Replaceable elements

[vimtor]

Hi there! I'm working on an email editor using this awesome library.

I got stuck when trying to develop a system where the user can create email template with variables and then those variable get replaced.

I created a custom private plugin for creating and adding those email template elements. But I'm unsure how to go about substituting them so the user can see them replaced by their actual values and edit them before sending.

I faced 2 issues primarily:

1. Email templates variables should be void but not when being replaced
2. How to pass information from the plugin to the render a different element component

How would to go about dealing with this?

I've considered pre-parsing the template and substitute the variables, but feels awkward since I don't see any way to do that from the plugin.

I also tried, to give different keys to the createPlateComponents option like so:

const components = createPlateComponents({
  'template-variable': props => {
    return (
      <span {...props.attributes}>
        <span contentEditable={false}>Template Value</span>
        {props.children}
      </span>
    ); 
  },
  'replaced-variable': props => {
    return (
      <span {...props.attributes}>
        <span>Replaced Value</span>
        {props.children}
      </span>
    );
  },
});

When declaring the plugin like this:

const replace = true;
const plugin = {
      pluginKeys: 'template-variable',
      deserialize: getTemplateVariableDeserialize(),
      serialize: getTemplateVariableSerialize({ substitute }),
      renderElement: getRenderElement(replace ? 'replaced-variable' : 'template-variable'),
      inlineTypes: getPlatePluginTypes('template-variable'),
      voidTypes: getPlatePluginTypes('template-variable'),
}

But it ignored me altogether when replacing the variable.

Thanks ❤️

[zbeyens]

getRenderElement accepts an array of plugin key, can you try getRenderElement(['replaced-variable', 'template-variable'])?

With a plugin factory you can recreate the plugins, then if you give a new reference to Plate plugins prop, it should update them

[vimtor]

If I pass an array of plugin keys to getRenderElement how will I decide whether to use or not the replaced version?
Take into account that the only type being stored right now is the template-variable.

[zbeyens]

I would update the node type as plate components are mapped to node types

[vimtor]

I ended up doing something like this:

const pluginKeys = [ELEMENT_TEMPLATE_VARIABLE, ELEMENT_MISSING_VARIABLE];
const plugins = {
    pluginKeys,
    deserialize: getTemplateVariableDeserialize(),
    serialize: getTemplateVariableSerialize({ substitute }),
    renderElement: getRenderElement(pluginKeys),
    inlineTypes: getPlatePluginTypes(pluginKeys),
    voidTypes: getPlatePluginTypes(pluginKeys),
    withOverrides: editor => {
      const { normalizeNode } = editor;

      editor.normalizeNode = ([node, path]) => {
        if (substitute && Element.isElement(node) && node.type === 'variable') {
          Transforms.removeNodes(editor, { at: path });

          const variable = variables.find(x => x.id === node.id);
          if (variable) {
            Transforms.insertText(editor, variable, { at: path });
          } else {
            Transforms.insertNodes(
              editor,
              { ...node, type: ELEMENT_MISSING_VARIABLE },
              { at: path },
            );
          }
        } else {
          normalizeNode([node, path]);
        }
      };

      return editor;
    },
}

Which required me to do the fancy trick (#362) for normalizing the editor automatically on first render.

Thank you!