Comments (3)
Can you share code?
on my side:
const editor = useEditorBridge({
autofocus: true,
avoidIosKeyboard: true,
bridgeExtensions: [
...TenTapStartKit,
CodeBridge.configureCSS(`
* {
color: red;
}
#root div .ProseMirror * {
color: #404040;
}
`), // Custom codeblock css
],
initialContent,
});
from 10tap-editor.
Here's my editor code in dark mode!! Thank you for your quick response :)
// editor in dark mode
const editor = useEditorBridge({
bridgeExtensions: [
CodeBridge.configureCSS(`
.tiptap {
background-color: ${color.background}; // #212121 (black background)
padding: 0 24px;
font-size: 15px;
color: ${color.neutral1}; // #E6E6E6 (white font color)
}
`),
],
initialContent,
});
As shown in the top photo, in dark mode (background color is black, text color is white), the selection background obscures the text. This selection background (similar to the font color) is only rectangularly wrapping around the text, not the margins.
Additionally, when I applied the solution, the result was as follows (background color is not changed)
from 10tap-editor.
@jinwon7878 - you didnt follow my solution at all
#root div .ProseMirror * {
color: blue;
}
* {
color: red;
}
#root div .ProseMirror {
background-color: black;
padding: 0 24px;
font-size: 15px;
}
output:
please notice the:
* {
color: red;
}
which does the trick here, change the selection color, then:
#root div .ProseMirror * {
color: blue;
}
Will let you override the color to whatever you want to be the color of the actual text
from 10tap-editor.
Related Issues (20)
- Does 10tap support tiptap-markdown extension HOT 4
- Can I set the selection background color? HOT 4
- [BUG]: Build failed when trying to use the editor in the web (Expo) HOT 1
- [BUG]: Adding a new BridgeExtension for TextAlign does not behave as expected HOT 5
- [BUG]: A symbol conflicting with other dependency
- [BUG-Question?]: Excessive state updates when updating content via `useBridgeState` HOT 1
- Customizing link formatting when using the insert link toolbar item HOT 1
- [BUG]: Android build failing for react native 0.74.3 HOT 5
- Need E2E Tests
- Filter Toolbar Items HOT 2
- [BUG]: when setImage, cursor not easy to move HOT 4
- [BUG]: dynamicHeight confusion HOT 2
- [PRO]: MentionBridge example not working on latest versions HOT 3
- [BUG]: Link button icon in `EditLinkBar.tsx` lacks active styling while its container has active button styling HOT 1
- [BUG]: No Ability to use custom flatlist implementation HOT 1
- [BUG]: Editor isn't ready yet and setting content not working HOT 1
- [BUG]: maybe just documentation; minimum supported Android API level? HOT 1
- [BUG]: Props in RichText component not working (e.g. showsVerticalScrollIndicator) HOT 1
- Can't set the background color when dragged HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 10tap-editor.