Focus on input in balloon toolbar

[xypnox]

The balloon toolbar works nicely with one click buttons. But when we try to add a button with an input (for example link input in toolbar to apply link element on the selection), the toolbar looses focus.

I could not find why this was happening or any other approach for the same.

<>
    <button
      active={isLink}
      onMouseDown={handleMouseDownLink}
    >
      {props.icon}
    </button>
    {showInput && <input {...register('link_value')} />
</>

A rendering strategy as shown above for the link button doesn't work.

[zbeyens]

This will need a PR against BalloonToolbar component, it's currently hiding when the editor loses the focus

[xypnox]

Hi thanks for the solution for applying the link. Now, it is possible to have the interaction of input and apply the link. However, when the input is focused, the user cannot see the selection in the editor.

[zbeyens]

Indeed, maybe try to apply a decoration based on editor.blurSelection? I didn't study slate decorations yet so I can't help on that part. Would love to see your solution if any

[xypnox]

Hi,

While the implementation for BlurEditor works, I could not use the plugins thus generated: (alias) const Plugins: (SlatePlugin<SPEditor> | SlatePlugin<BlurSelectionEditor>)[] in the SlatePlugins editor which requires plugins of type: plugins?: SlatePlugin<SPEditor>[] | undefined.

How can I extend the SlatePlugin's types in slate.d.ts?

[zbeyens]

I just do as EditorType (union of all the editor types I use) whenever I don't have time to fix the typing :)

[r-LaForge]

Nice - I like the plugin idea! 🙂
Not sure if I'm a fan of the name blurSelection as that describes the action that null's the selection rather than what the selection actually is (something like lastDefinedSelection / lastValidSelection).
If it turns out another action results in setting selection to null, then blurSelection doesn't really capture that.