feat: Add VariableNode and AddVariablesPlugin (#15293)

packages/ui/components/editor/Editor.tsx

@@ -17,6 +17,8 @@ import type { Dispatch, SetStateAction } from "react";
 import { classNames } from "@calcom/lib";
 
 import ExampleTheme from "./ExampleTheme";
+import { VariableNode } from "./nodes/VariableNode";
+import AddVariablesPlugin from "./plugins/AddVariablesPlugin";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";
 import "./stylesEditor.css";
@@ -60,6 +62,7 @@ const editorConfig = {
     TableRowNode,
     AutoLinkNode,
     LinkNode,
+    VariableNode,
   ],
 };
 
@@ -100,6 +103,7 @@ export const Editor = (props: TextEditorProps) => {
             <ListPlugin />
             <LinkPlugin />
             <AutoLinkPlugin />
+            {props?.variables ? <AddVariablesPlugin variables={props.variables} /> : null}
             <HistoryPlugin />
             <MarkdownShortcutPlugin
               transformers={

packages/ui/components/editor/nodes/VariableNode.ts

@@ -0,0 +1,53 @@
+import type { EditorConfig, LexicalNode, NodeKey, SerializedTextNode } from "lexical";
+import { $applyNodeReplacement, TextNode } from "lexical";
+
+export class VariableNode extends TextNode {
+  static getType(): string {
+    return "variable";
+  }
+
+  static clone(node: VariableNode): VariableNode {
+    return new VariableNode(node.__text, node.__key);
+  }
+
+  constructor(text: string, key?: NodeKey) {
+    super(text, key);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    dom.className = "bg-info";
+    dom.setAttribute("data-lexical-variable", "true");
+    return dom;
+  }
+
+  exportJSON(): SerializedTextNode {
+    return {
+      ...super.exportJSON(),
+      type: "variable",
+      version: 1,
+    };
+  }
+
+  isTextEntity(): true {
+    return true;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+}
+
+export function $createVariableNode(text = ""): VariableNode {
+  const node = new VariableNode(text);
+  node.setMode("segmented").toggleDirectionless();
+  return $applyNodeReplacement(node);
+}
+
+export function $isVariableNode(node: LexicalNode | null | undefined): node is VariableNode {
+  return node instanceof VariableNode;
+}

packages/ui/components/editor/plugins/AddVariablesPlugin.tsx

@@ -0,0 +1,159 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  LexicalTypeaheadMenuPlugin,
+  TypeaheadOption,
+  useBasicTypeaheadTriggerMatch,
+} from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import type { LexicalEditor } from "lexical";
+import { TextNode } from "lexical";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+import { VariableNode, $createVariableNode } from "../nodes/VariableNode";
+
+function $findAndTransformVariable(node: TextNode): null | TextNode {
+  const text = node.getTextContent();
+
+  const regex = /\{[^}]+\}/g; // Regular expression to match {VARIABLE_NAME <whatever>}
+  let match;
+
+  // Iterate over the text content
+  for (let i = 0; i < text.length; i++) {
+    regex.lastIndex = i; // Set the regex search position to the current index
+    match = regex.exec(text);
+
+    if (match !== null) {
+      const matchedText = match[0]; // The entire matched text {VARIABLE_NAME <whatever here>}
+      const matchIndex = match.index; // Start index of the matched text
+
+      // Ensure that we move the loop index past the current match
+      i = matchIndex + matchedText.length - 1;
+
+      let targetNode;
+      if (matchIndex === 0) {
+        [targetNode] = node.splitText(matchIndex + matchedText.length);
+      } else {
+        [, targetNode] = node.splitText(matchIndex, matchIndex + matchedText.length);
+      }
+      const variableNode = $createVariableNode(matchedText);
+      targetNode.replace(variableNode);
+      return variableNode;
+    }
+  }
+
+  return null;
+}
+
+function useVariablesTransform(editor: LexicalEditor): void {
+  useEffect(() => {
+    if (!editor.hasNodes([VariableNode])) {
+      console.error("VariableNode is not registered in the editor");
+      return;
+    }
+    return editor.registerNodeTransform(TextNode, (node) => {
+      let targetNode: TextNode | null = node;
+
+      while (targetNode !== null) {
+        if (!targetNode.isSimpleText()) {
+          return;
+        }
+        targetNode = $findAndTransformVariable(targetNode);
+      }
+    });
+  }, [editor]);
+}
+
+class VariableTypeaheadOption extends TypeaheadOption {
+  name: string;
+  constructor(name: string) {
+    super(name);
+    this.name = name;
+  }
+}
+
+interface AddVariablesPluginProps {
+  variables: string[];
+}
+
+export default function AddVariablesPlugin({ variables }: AddVariablesPluginProps): JSX.Element | null {
+  const { t } = useLocale();
+  const [editor] = useLexicalComposerContext();
+  useVariablesTransform(editor);
+
+  const [queryString, setQueryString] = useState<string | null>(null);
+
+  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("{", {
+    minLength: 0,
+  });
+
+  const options = useMemo(() => {
+    return variables
+      .filter((variable) => variable.toLowerCase().includes(queryString?.toLowerCase() ?? ""))
+      .map((result) => new VariableTypeaheadOption(result));
+  }, [variables, queryString]);
+
+  const onSelectOption = useCallback(
+    (selectedOption: VariableTypeaheadOption, nodeToReplace: TextNode | null, closeMenu: () => void) => {
+      editor.update(() => {
+        const variableNode = $createVariableNode(
+          `{${t(`${selectedOption.name}_variable`).toUpperCase().replace(/ /g, "_")}}`
+        );
+        if (nodeToReplace) {
+          nodeToReplace.replace(variableNode);
+        }
+        variableNode.select();
+        closeMenu();
+      });
+    },
+    [editor, t]
+  );
+
+  return (
+    <LexicalTypeaheadMenuPlugin<VariableTypeaheadOption>
+      onQueryChange={setQueryString}
+      onSelectOption={onSelectOption}
+      triggerFn={checkForTriggerMatch}
+      options={options}
+      menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) =>
+        anchorElementRef.current && options.length
+          ? createPortal(
+              <div
+                className={classNames(
+                  "shadow-dropdown bg-default border-subtle mt-5 w-64 overflow-hidden rounded-md border",
+                  "typeahead-popover" // class required by Lexical
+                )}>
+                <ul className="max-h-64 list-none overflow-y-scroll md:max-h-80">
+                  {options.map((option, index) => (
+                    <li
+                      id={`typeahead-item-${index}`}
+                      key={option.key}
+                      aria-selected={selectedIndex === index}
+                      tabIndex={-1}
+                      className="focus:ring-brand-800 hover:bg-subtle hover:text-emphasis text-default aria-selected:bg-subtle aria-selected:text-emphasis cursor-pointer px-4 py-2 text-sm outline-none ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] focus:outline-none focus:ring-1"
+                      ref={option.setRefElement}
+                      role="option"
+                      onClick={() => {
+                        setHighlightedIndex(index);
+                        selectOptionAndCleanUp(option);
+                      }}
+                      onMouseEnter={() => {
+                        setHighlightedIndex(index);
+                      }}>
+                      <p className="text-sm font-semibold">
+                        {`{${t(`${option.name}_variable`).toUpperCase().replace(/ /g, "_")}}`}
+                      </p>
+                      <span className="text-default text-sm">{t(`${option.name}_info`)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>,
+              anchorElementRef.current
+            )
+          : null
+      }
+    />
+  );
+}