Can I apply marks to Mentions?

[MingkunHe]

I'm creating a custom plugin that work (and render) as Mention do, but the (basic) marks didn't work with my plugin (as well as MentionPlugin), could you provide an example how to do this?

Here's more detail:

1. input text for a 'mention' (aka 'variable')
2. the 'variable' is render in editor as plain text with surrounding {{}}, like --> "I inserted a {{my-var}} in editor."
3. when i select the "{{my-var}}", and click "B" (bold), it should be "{{my-var}}" (but it didn't)

[zbeyens]

Mention is a void node so it can't be marked

[MingkunHe]

Great! I tried make my plugin "not void" (by removing "voidTypes") and i could add marks, thank you!

[HappyEmu]

@zbeyens Slate supports "markable Voids" now:

https://docs.slatejs.org/api/nodes/element#voids-that-support-marks
https://docs.slatejs.org/api/nodes/element#rendering-void-elements

Looks like support was added in Slate 0.85.0: https://github.com/ianstormtaylor/slate/releases/tag/slate%400.85.0

Is there any hope that this will be exposed in Plate as well?

[zbeyens]

I'd support it. In the meantime someone works on it, you can use withOverrides to override editor.markableVoid for mention support.

[HappyEmu]

Perfect, I just figured out the withOverrides workaround 2 minutes ago 😄 . Thank you so much for your prompt response 👍

[HappyEmu]

If anybody else wants to support markable Voids with the current version, I'm using the following custom plugin. Just note that this treats every Void element as a markable Void.

import { createPluginFactory } from '@udecode/plate-core';
import { TElement } from '@udecode/plate';

const MARKABLE_VOID_PLUGIN = 'markable-void';

export const createMarkableVoidPlugin = createPluginFactory({
  key: MARKABLE_VOID_PLUGIN,
  isElement: false,
  isLeaf: false,
  withOverrides: (editor) => {
    const { markableVoid } = editor;

    const voidPlugins = editor.plugins
      .filter(p => p.isVoid)
      .map(p => p.type);

    editor.markableVoid = (element: TElement) => {
      if (voidPlugins.includes(element.type)) {
        return true;
      }

      return markableVoid(element);
    };

    return editor;
  },
});

[zbeyens]

Completed in #2567