Fix/code highlighting split

packages/lexical-code/LexicalCode.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  ParagraphNode,
+  RangeSelection,
+  EditorThemeClasses,
+  LexicalEditor,
+  SerializedElementNode,
+  SerializedTextNode,
+} from 'lexical';
+
+import {ElementNode, TextNode} from 'lexical';
+import {Spread} from 'libdefs/globals';
+
+declare class CodeNode extends ElementNode {
+  static getType(): string;
+  static clone(node: CodeNode): CodeNode;
+  constructor(key?: NodeKey);
+  createDOM(config: EditorConfig): HTMLElement;
+  updateDOM(prevNode: CodeNode, dom: HTMLElement): boolean;
+  insertNewAfter(
+    selection: RangeSelection,
+  ): null | ParagraphNode | CodeHighlightNode;
+  canInsertTab(): boolean;
+  collapseAtStart(): true;
+  setLanguage(language: string): void;
+  getLanguage(): string | void;
+  importJSON(serializedNode: SerializedCodeNode): CodeNode;
+  exportJSON(): SerializedElementNode;
+}
+declare function $createCodeNode(language?: string): CodeNode;
+declare function $isCodeNode(
+  node: null | undefined | LexicalNode,
+): node is CodeNode;
+
+declare function getFirstCodeHighlightNodeOfLine(
+  anchor: LexicalNode,
+): null | undefined | CodeHighlightNode;
+
+declare function getLastCodeHighlightNodeOfLine(
+  anchor: LexicalNode,
+): null | undefined | CodeHighlightNode;
+
+declare function getDefaultCodeLanguage(): string;
+declare function getCodeLanguages(): Array<string>;
+
+declare class CodeHighlightNode extends TextNode {
+  __highlightType: null | undefined | string;
+  constructor(text: string, highlightType?: string, key?: NodeKey);
+  static getType(): string;
+  static clone(node: CodeHighlightNode): CodeHighlightNode;
+  createDOM(config: EditorConfig): HTMLElement;
+  updateDOM(
+    prevNode: CodeHighlightNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): boolean;
+  setFormat(format: number): this;
+}
+declare function getHighlightThemeClass(
+  theme: EditorThemeClasses,
+  highlightType: null | undefined | string,
+): null | undefined | string;
+declare function $createCodeHighlightNode(
+  text: string,
+  highlightType?: string,
+): CodeHighlightNode;
+declare function $isCodeHighlightNode(
+  node: LexicalNode | null | undefined,
+): node is CodeHighlightNode;
+
+declare function registerCodeHighlighting(
+  editor: LexicalEditor,
+  threshold: number,
+): () => void;
+declare function registerCodeIndent(editor: LexicalEditor): () => void;
+
+type SerializedCodeNode = Spread<
+  {
+    language: string | null | undefined;
+    type: 'code';
+    version: 1;
+  },
+  SerializedElementNode
+>;
+
+type SerializedCodeHighlightNode = Spread<
+  {
+    highlightType: string | null | undefined;
+    type: 'code-highlight';
+    version: 1;
+  },
+  SerializedTextNode
+>;

packages/lexical-code/src/CodeHighlightNode.ts

@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// eslint-disable-next-line simple-import-sort/imports
+import type {
+  EditorConfig,
+  EditorThemeClasses,
+  LexicalNode,
+  NodeKey,
+  SerializedTextNode,
+  Spread,
+} from 'lexical';
+
+import {
+  addClassNamesToElement,
+  removeClassNamesFromElement,
+} from '@lexical/utils';
+import {TextNode} from 'lexical';
+
+type SerializedCodeHighlightNode = Spread<
+  {
+    highlightType: string | null | undefined;
+    type: 'code-highlight';
+    version: 1;
+  },
+  SerializedTextNode
+>;
+export class CodeHighlightNode extends TextNode {
+  __highlightType: string | null | undefined;
+
+  constructor(text: string, highlightType?: string, key?: NodeKey) {
+    super(text, key);
+    this.__highlightType = highlightType;
+  }
+
+  static getType(): string {
+    return 'code-highlight';
+  }
+
+  static clone(node: CodeHighlightNode): CodeHighlightNode {
+    return new CodeHighlightNode(
+      node.__text,
+      node.__highlightType || undefined,
+      node.__key,
+    );
+  }
+
+  getHighlightType(): string | null | undefined {
+    const self = this.getLatest();
+    return self.__highlightType;
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const element = super.createDOM(config);
+    const className = getHighlightThemeClass(
+      config.theme,
+      this.__highlightType,
+    );
+    addClassNamesToElement(element, className);
+    return element;
+  }
+
+  updateDOM(
+    prevNode: CodeHighlightNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): boolean {
+    const update = super.updateDOM(prevNode, dom, config);
+    const prevClassName = getHighlightThemeClass(
+      config.theme,
+      prevNode.__highlightType,
+    );
+    const nextClassName = getHighlightThemeClass(
+      config.theme,
+      this.__highlightType,
+    );
+    if (prevClassName !== nextClassName) {
+      if (prevClassName) {
+        removeClassNamesFromElement(dom, prevClassName);
+      }
+      if (nextClassName) {
+        addClassNamesToElement(dom, nextClassName);
+      }
+    }
+    return update;
+  }
+
+  static importJSON(
+    serializedNode: SerializedCodeHighlightNode,
+  ): CodeHighlightNode {
+    const node = $createCodeHighlightNode(
+      serializedNode.text,
+      serializedNode.highlightType,
+    );
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  exportJSON(): SerializedCodeHighlightNode {
+    return {
+      ...super.exportJSON(),
+      highlightType: this.getHighlightType(),
+      type: 'code-highlight',
+      version: 1,
+    };
+  }
+
+  // Prevent formatting (bold, underline, etc)
+  setFormat(format: number): this {
+    return this;
+  }
+}
+
+function getHighlightThemeClass(
+  theme: EditorThemeClasses,
+  highlightType: string | undefined,
+): string | undefined {
+  return (
+    highlightType &&
+    theme &&
+    theme.codeHighlight &&
+    theme.codeHighlight[highlightType]
+  );
+}
+
+export function $createCodeHighlightNode(
+  text: string,
+  highlightType?: string,
+): CodeHighlightNode {
+  return new CodeHighlightNode(text, highlightType);
+}
+
+export function $isCodeHighlightNode(
+  node: LexicalNode | CodeHighlightNode | null | undefined,
+): node is CodeHighlightNode {
+  return node instanceof CodeHighlightNode;
+}