search

ianstormtaylor / slate

A completely customizable framework for building rich text editors. (Currently in beta.)
http://slatejs.org
MIT License
29.87k stars 3.25k forks source link

Feature: Support iOS selection tooltip formatting #3760

Open dminkovsky opened 4 years ago

dminkovsky commented 4 years ago

iOS displays formatting controls in a tooltip when text inside a contentEditable is selected. Some editor support this tooltip. For example: https://github.com/ProseMirror/prosemirror/issues/1037. Is this possible with Slate?

Screen Shot 2020-07-02 at 9 48 07 AM

Slate: 0.5x.y Browser: Safari OS: iOS

TheSpyder commented 4 years ago

Slate does not support updating the model by mutating the editable area (as those tooltips do, which was explained in the prosemirror ticket). This is not currently possible. Sorry.

nucleartux commented 4 years ago

you can handle such events, add this to Editable:

onDOMBeforeInput={event => {
          if (event.inputType === "formatBold") {
            event.preventDefault();
            toggleMark(editor, "bold");
            return true;
          }
        }}
dmitrizzle commented 4 years ago

Another option is a design accommodation. See screenshot under "Shiny Stuff" here. Basically, on iOS I place the tooltip further up to give space for native controls and add a dotted line to give user a clear idea where it belongs to. You can try it here: https://www.analog.cafe/write/draft