Question: Custom node + custom markdown transformer

[omonk]

Big thanks for all the work so far, I am enjoying using lexical!

I've created a custom node type called Placeholder, you can insert into a heading, paragraph, list, etc. The placeholder values are then replaced using handlebars later down the line once we've exported markdown.

Below the text editor UI you can see exporting to markdown is fine, however I'm curious about the best way to import this into the editor with a custom transformer with initialEditorState. The placeholder node can exist as a child of multiple different text node types (h1, h2, p, list, etc.).

Question:

What would be the best way to replace the matched string and preserve the sibling text nodes?

PlaceHolderNode

import { LexicalNode, EditorConfig, TextNode, NodeKey } from "lexical";

export class PlaceHolderNode extends TextNode {
  __text: string;

  constructor(text: string, key?: NodeKey) {
    super(text, key);
    this.__text = text;
    this.__mode = 2;
    this.__style = `background: #D9E6FF; border-radius: 8px; padding: 2px; margin: 0 2px;`;
  }

  static getType(): string {
    return "placeholder";
  }

  static clone(node: PlaceHolderNode): PlaceHolderNode {
    return new PlaceHolderNode(node.__text);
  }

  createDOM(config: EditorConfig): HTMLElement {
    const element = super.createDOM(config);

    return element;
  }

  updateDOM(
    prevNode: PlaceHolderNode,
    dom: HTMLElement,
    config: EditorConfig,
  ): boolean {
    const isUpdated = super.updateDOM(prevNode, dom, config);

    return isUpdated;
  }
}

export function $createPlaceHolderNode(text: string): PlaceHolderNode {
  return new PlaceHolderNode(text);
}

export function $isPlaceHolderNode(node?: LexicalNode): boolean {
  return node instanceof PlaceHolderNode;
}

Custom Transformer

const PLACE_HOLDER_TRANSFORMER: Transformer = {
  export: (node) => {
    if (!$isPlaceHolderNode(node)) {
      return null;
    }

    const textContent = node.getTextContent();
    return textContent;
  },
  regExp: /(.*)(\{\{.*\}\})(.*)/,
  replace: (parentNode, children, match) => {
    // Get before and after 
    const [allMatch, start, placeholder, end] = match;

    let siblingNodeCreator: any = $createParagraphNode;
    
    // Work out what type of Element we're dealing with using
   // the default matchers exported from @lexical/markdown
    const headingMatch = allMatch.match(HEADING.regExp);

    if (headingMatch != null) {
      siblingNodeCreator = $createHeadingNode;
    }

    const orderedListMatch = allMatch.match(ORDERED_LIST.regExp);
    const unorderedListMatch = allMatch.match(UNORDERED_LIST.regExp);

    if (orderedListMatch != null || unorderedListMatch != null) {
      siblingNodeCreator = $createListItemNode;
    }
    
    // Take matched values and create nodes relating
    const startNode = start ? siblingNodeCreator(start) : null;
    const node = $createPlaceHolderNode(placeholder);
    const endNode = end ? siblingNodeCreator(end) : null;

    parentNode.replace([startNode, node, endNode]);
  },
  type: "element",
};

Line in above transformer parentNode.replace([startNode, node, endNode]); wont work obviously but how can I replace the current node I'm in with the new created nodes?

[milaabl]

Have you found any solution for this?

[omonk]

Super cool @moy2010 thanks, will check that out

[milaabl]

Thank you @omonk for your reply and thank you @moy2010 for the solution! :)

[Lukasvo]

Hi guys, this is a really interesting use case, but I'm struggling to implement it. Would anyone be willing to share a working example (code or demo)? 1000x thanks!

[milaabl]

Hi @Lukasvo , you can have a look here: https://github.com/milaabl/AppBase/tree/custom-link--fixes-export-to-markdown-string/components/markdownEditor/plugins/customLink See https://github.com/milaabl/AppBase/blob/custom-link--fixes-export-to-markdown-string/components/markdownEditor/plugins/customLink/CustomLinkNodeTransformer.tsx

Let me know if you have any questions

[Lukasvo]

Thanks so much for your quick reply, @milaabl!

Since I'm using HTML and not markdown, I couldn't use the TextMatchTransformer.

I decided to use a different approach inspired by the MentionsPlugin: a typeahead menu with placeholders, triggered by typing {.

This still requires the handlebars to be introduced when the initial value is loaded into the editor.
I apply the following transformer after generating nodes from the HTML string:

export const $initHandlebars = (node: LexicalNode) => {
  if (!node.splitText) return;

  const text = node.getTextContent();
  const regex = /\{\{\{?.+?\}?\}\}/g;
  let match: RegExpExecArray;
  do {
    match = regex.exec(text);
    if (match) {
      let targetNode;
      const { length } = match[0];
      if (match.index === 0) {
        [targetNode] = node.splitText(match.index + length);
      } else {
        [, targetNode] = node.splitText(match.index, match.index + length);
      }
      const handlebarNode = $createHandlebarNode(match[0]);
      targetNode.replace(handlebarNode);
    }
  } while (match);
};

Code to apply the above transformer / set the initial value of the editor:

const nodes = $generateNodesFromDOM(editor, dom);

nodes.map((n) => (n.getAllTextNodes ? n.getAllTextNodes() : [])).flat().forEach($initHandlebars);

const root = $getRoot();

nodes.forEach((node) => root.append(node));