Can I set the selection background color? about 10tap-editor HOT 4 CLOSED

hey @jinwon7878, while working on:
https://x.com/10play_software/status/1808501667215593521

I noticed that:

* {
color: red;
}

Will change the color of the iOS selection to red, iOS probably inspect the * color of the webpage inside the webview and by that color the selection, this solution + override the color inside the class .ProseMirror will give you full control on selection

so the final solution will look something like this:

const editor = useEditorBridge({
  ...,
  bridgeExtensions: [
    ...TenTapStartKit,
    CodeBridge.configureCSS(`
    * {
      color: red;
    }

    #root div .ProseMirror * {
      color: #404040;
    }
    `), // Custom codeblock css
  ],
});

see: https://10play.github.io/10tap-editor/docs/examples/customCss

from 10tap-editor.

what platform? ios or android?
on android I have managed to change the color of the selection using:

*::selection { 
background-color: << color >>;
}

from 10tap-editor.

what platform? ios or android? on android I have managed to change the color of the selection using:

*::selection { 
background-color: << color >>;
}

Thank you for your response!

IOS. Unfortunately, that code doesn't work for me.

If you briefly release focus from a dragged (selected) state, such as a bottomsheet, you'll end up with the situation below, which looks like a highlight - is this relevant? My BridgeExtensions (including Custom) look like this

const bridgeExtensions = [
      CoreBridge.configureCSS(customCodeBlockCSS).extendExtension({
        content: “title block*”,
      }),
      TitleBridge,
      ListItemBridge,
      BulletListBridge,
      OrderedListBridge,
      TaskListBridge,
      PlaceholderBridge.configureExtension({
        showOnlyCurrent: false,
      }),
      BoldBridge,
      ItalicBridge,
      UnderlineBridge,
      LinkBridge.configureExtension({ openOnClick: true }),
      // add customBridgeExtension here
  ];

from 10tap-editor.

hey @jinwon7878, while working on: https://x.com/10play_software/status/1808501667215593521

I noticed that:

* {
color: red;
}

Will change the color of the iOS selection to red, iOS probably inspect the * color of the webpage inside the webview and by that color the selection, this solution + override the color inside the class .ProseMirror will give you full control on selection

so the final solution will look something like this:

const editor = useEditorBridge({
  ...,
  bridgeExtensions: [
    ...TenTapStartKit,
    CodeBridge.configureCSS(`
    * {
      color: red;
    }

    #root div .ProseMirror * {
      color: #404040;
    }
    `), // Custom codeblock css
  ],
});

see: https://10play.github.io/10tap-editor/docs/examples/customCss

@GuySerfaty I tried it, but this seems to be the way to change the font color - it doesn't change the background color while it's a selection via dragging, it's still there.

If there's something I'm missing, I'd appreciate it if you could let me know 😢.

from 10tap-editor.