@webiny/lexical-nodes 6.3.0-beta.4 → 6.4.0-beta.0

package/FontColorNode.js

@@ -1,128 +1,103 @@
-import { $getSelection, $isRangeSelection, createCommand, TextNode } from "lexical";
+import { $getSelection, $isRangeSelection, TextNode, createCommand } from "lexical";
 import { Theme } from "@webiny/lexical-theme";
-export class ThemeColorValue {
-  // Webiny theme color variable, like color1, color2, etc.
-
-  // This can be a HEX value or a CSS variable.
-
-  constructor(value, name) {
-    this.value = value;
-    this.id = name ?? "custom";
-  }
-  getValue() {
-    return this.value;
-  }
-  getName() {
-    return this.id;
-  }
-  updateFromTheme(theme) {
-    if (theme.colors && this.id !== "custom") {
-      const color = theme.colors.find(color => color.id === this.id);
-      if (color) {
-        this.value = color.value;
-      }
+class ThemeColorValue {
+    constructor(value, name){
+        this.value = value;
+        this.id = name ?? "custom";
+    }
+    getValue() {
+        return this.value;
+    }
+    getName() {
+        return this.id;
+    }
+    updateFromTheme(theme) {
+        if (theme.colors && "custom" !== this.id) {
+            const color = theme.colors.find((color)=>color.id === this.id);
+            if (color) this.value = color.value;
+        }
     }
-  }
 }
-export const ADD_FONT_COLOR_COMMAND = createCommand("ADD_FONT_COLOR_COMMAND");
+const ADD_FONT_COLOR_COMMAND = createCommand("ADD_FONT_COLOR_COMMAND");
 const FontColorNodeAttrName = "data-theme-font-color-name";
-/**
- * Main responsibility of this node is to apply custom or Webiny theme color to selected text.
- * Extends the original TextNode node to add additional transformation and support for webiny theme font color.
- */
-export class FontColorNode extends TextNode {
-  constructor(text, color, key) {
-    super(text, key);
-    this.__color = color;
-  }
-  static getType() {
-    return "wby-font-color";
-  }
-  static clone(node) {
-    return new FontColorNode(node.__text, node.__color, node.__key);
-  }
-  static importJSON(serializedNode) {
-    const node = new FontColorNode(serializedNode.text, new ThemeColorValue(serializedNode.color, serializedNode.themeColor));
-    node.setTextContent(serializedNode.text);
-    node.setFormat(serializedNode.format);
-    node.setDetail(serializedNode.detail);
-    node.setMode(serializedNode.mode);
-    node.setStyle(serializedNode.style);
-    return node;
-  }
-  splitText(...splitOffsets) {
-    const newNodes = super.splitText(...splitOffsets);
-    const selection = $getSelection();
-
-    // After splitting, we need to re-apply styling to the new TextNodes.
-    const fontColorNodes = newNodes.map(node => {
-      if (node instanceof FontColorNode) {
+class FontColorNode extends TextNode {
+    constructor(text, color, key){
+        super(text, key);
+        this.__color = color;
+    }
+    static getType() {
+        return "wby-font-color";
+    }
+    static clone(node) {
+        return new FontColorNode(node.__text, node.__color, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = new FontColorNode(serializedNode.text, new ThemeColorValue(serializedNode.color, serializedNode.themeColor));
+        node.setTextContent(serializedNode.text);
+        node.setFormat(serializedNode.format);
+        node.setDetail(serializedNode.detail);
+        node.setMode(serializedNode.mode);
+        node.setStyle(serializedNode.style);
         return node;
-      }
-      const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);
-      $applyStylesToNode(fontColorNode, this);
-      const newNode = node.replace(fontColorNode);
-
-      // Since we're replacing the existing node, we need to update the selection keys.
-      // This is very important to not break the editor functionality!
-      if ($isRangeSelection(selection)) {
-        const anchor = selection.anchor;
-        const focus = selection.focus;
-        if (anchor.key === node.getKey()) {
-          anchor.key = newNode.getKey();
-        }
-        if (focus.key === node.getKey()) {
-          focus.key = newNode.getKey();
-        }
-      }
-      return newNode;
-    });
-    return fontColorNodes;
-  }
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      themeColor: this.__color.getName(),
-      color: this.__color.getValue(),
-      type: "wby-font-color"
-    };
-  }
-  addColorValueToHTMLElement(element, theme) {
-    // Update color from webiny theme
-    this.__color.updateFromTheme(theme);
-    element.setAttribute(FontColorNodeAttrName, this.__color.getName());
-    element.style.color = this.__color.getValue();
-    return element;
-  }
-  updateDOM(prevNode, dom, config) {
-    const isUpdated = super.updateDOM(prevNode, dom, config);
-    const theme = Theme.from(config.theme);
-    this.__color.updateFromTheme(theme);
-    dom.setAttribute(FontColorNodeAttrName, this.__color.getName());
-    dom.style.color = this.__color.getValue();
-    return isUpdated;
-  }
-  getColorStyle() {
-    return {
-      color: this.__color.getValue(),
-      themeColor: this.__color.getName()
-    };
-  }
-  createDOM(config) {
-    const element = super.createDOM(config);
-    const theme = Theme.from(config.theme);
-    return this.addColorValueToHTMLElement(element, theme);
-  }
+    }
+    splitText(...splitOffsets) {
+        const newNodes = super.splitText(...splitOffsets);
+        const selection = $getSelection();
+        const fontColorNodes = newNodes.map((node)=>{
+            if (node instanceof FontColorNode) return node;
+            const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);
+            $applyStylesToNode(fontColorNode, this);
+            const newNode = node.replace(fontColorNode);
+            if ($isRangeSelection(selection)) {
+                const anchor = selection.anchor;
+                const focus = selection.focus;
+                if (anchor.key === node.getKey()) anchor.key = newNode.getKey();
+                if (focus.key === node.getKey()) focus.key = newNode.getKey();
+            }
+            return newNode;
+        });
+        return fontColorNodes;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            themeColor: this.__color.getName(),
+            color: this.__color.getValue(),
+            type: "wby-font-color"
+        };
+    }
+    addColorValueToHTMLElement(element, theme) {
+        this.__color.updateFromTheme(theme);
+        element.setAttribute(FontColorNodeAttrName, this.__color.getName());
+        element.style.color = this.__color.getValue();
+        return element;
+    }
+    updateDOM(prevNode, dom, config) {
+        const isUpdated = super.updateDOM(prevNode, dom, config);
+        const theme = Theme.from(config.theme);
+        this.__color.updateFromTheme(theme);
+        dom.setAttribute(FontColorNodeAttrName, this.__color.getName());
+        dom.style.color = this.__color.getValue();
+        return isUpdated;
+    }
+    getColorStyle() {
+        return {
+            color: this.__color.getValue(),
+            themeColor: this.__color.getName()
+        };
+    }
+    createDOM(config) {
+        const element = super.createDOM(config);
+        const theme = Theme.from(config.theme);
+        return this.addColorValueToHTMLElement(element, theme);
+    }
 }
-export const $createFontColorNode = (text, color) => {
-  return new FontColorNode(text, color);
-};
-export const $isFontColorNode = node => {
-  return node instanceof FontColorNode;
-};
-export function $applyStylesToNode(node, source) {
-  node.setFormat(source.getFormat());
-  node.setStyle(source.getStyle());
+const $createFontColorNode = (text, color)=>new FontColorNode(text, color);
+const $isFontColorNode = (node)=>node instanceof FontColorNode;
+function $applyStylesToNode(node, source) {
+    node.setFormat(source.getFormat());
+    node.setStyle(source.getStyle());
 }
+export { $applyStylesToNode, $createFontColorNode, $isFontColorNode, ADD_FONT_COLOR_COMMAND, FontColorNode, ThemeColorValue };
 
 //# sourceMappingURL=FontColorNode.js.map

package/FontColorNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["$getSelection","$isRangeSelection","createCommand","TextNode","Theme","ThemeColorValue","constructor","value","name","id","getValue","getName","updateFromTheme","theme","colors","color","find","ADD_FONT_COLOR_COMMAND","FontColorNodeAttrName","FontColorNode","text","key","__color","getType","clone","node","__text","__key","importJSON","serializedNode","themeColor","setTextContent","setFormat","format","setDetail","detail","setMode","mode","setStyle","style","splitText","splitOffsets","newNodes","selection","fontColorNodes","map","fontColorNode","$createFontColorNode","getTextContent","$applyStylesToNode","newNode","replace","anchor","focus","getKey","exportJSON","type","addColorValueToHTMLElement","element","setAttribute","updateDOM","prevNode","dom","config","isUpdated","from","getColorStyle","createDOM","$isFontColorNode","source","getFormat","getStyle"],"sources":["FontColorNode.ts"],"sourcesContent":["import type { EditorConfig, LexicalNode, SerializedTextNode, Spread } from \"lexical\";\nimport { $getSelection, $isRangeSelection, createCommand, TextNode } from \"lexical\";\nimport { Theme } from \"@webiny/lexical-theme\";\n\nexport class ThemeColorValue {\n    // Webiny theme color variable, like color1, color2, etc.\n    private readonly id: string;\n    // This can be a HEX value or a CSS variable.\n    private value: string;\n\n    constructor(value: string, name?: string) {\n        this.value = value;\n        this.id = name ?? \"custom\";\n    }\n\n    getValue() {\n        return this.value;\n    }\n\n    getName() {\n        return this.id;\n    }\n\n    updateFromTheme(theme: Theme) {\n        if (theme.colors && this.id !== \"custom\") {\n            const color = theme.colors.find(color => color.id === this.id);\n            if (color) {\n                this.value = color.value;\n            }\n        }\n    }\n}\n\nexport const ADD_FONT_COLOR_COMMAND = createCommand<FontColorPayload>(\"ADD_FONT_COLOR_COMMAND\");\n\nconst FontColorNodeAttrName = \"data-theme-font-color-name\";\n\nexport interface FontColorPayload {\n    color: ThemeColorValue;\n}\n\nexport type SerializedFontColorNode = Spread<\n    {\n        themeColor: string;\n        color: string;\n        type: \"wby-font-color\";\n    },\n    SerializedTextNode\n>;\n\n/**\n * Main responsibility of this node is to apply custom or Webiny theme color to selected text.\n * Extends the original TextNode node to add additional transformation and support for webiny theme font color.\n */\nexport class FontColorNode extends TextNode {\n    private readonly __color: ThemeColorValue;\n\n    constructor(text: string, color: ThemeColorValue, key?: string) {\n        super(text, key);\n        this.__color = color;\n    }\n\n    static override getType(): string {\n        return \"wby-font-color\";\n    }\n\n    static override clone(node: FontColorNode): FontColorNode {\n        return new FontColorNode(node.__text, node.__color, node.__key);\n    }\n\n    static override importJSON(serializedNode: SerializedFontColorNode): TextNode {\n        const node = new FontColorNode(\n            serializedNode.text,\n            new ThemeColorValue(serializedNode.color, serializedNode.themeColor)\n        );\n        node.setTextContent(serializedNode.text);\n        node.setFormat(serializedNode.format);\n        node.setDetail(serializedNode.detail);\n        node.setMode(serializedNode.mode);\n        node.setStyle(serializedNode.style);\n        return node;\n    }\n\n    override splitText(...splitOffsets: Array<number>): Array<FontColorNode> {\n        const newNodes = super.splitText(...splitOffsets);\n\n        const selection = $getSelection();\n\n        // After splitting, we need to re-apply styling to the new TextNodes.\n        const fontColorNodes = newNodes.map(node => {\n            if (node instanceof FontColorNode) {\n                return node;\n            }\n\n            const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);\n            $applyStylesToNode(fontColorNode, this);\n\n            const newNode = node.replace(fontColorNode);\n\n            // Since we're replacing the existing node, we need to update the selection keys.\n            // This is very important to not break the editor functionality!\n            if ($isRangeSelection(selection)) {\n                const anchor = selection.anchor;\n                const focus = selection.focus;\n\n                if (anchor.key === node.getKey()) {\n                    anchor.key = newNode.getKey();\n                }\n\n                if (focus.key === node.getKey()) {\n                    focus.key = newNode.getKey();\n                }\n            }\n\n            return newNode;\n        });\n\n        return fontColorNodes as Array<FontColorNode>;\n    }\n\n    override exportJSON(): SerializedFontColorNode {\n        return {\n            ...super.exportJSON(),\n            themeColor: this.__color.getName(),\n            color: this.__color.getValue(),\n            type: \"wby-font-color\"\n        };\n    }\n\n    private addColorValueToHTMLElement(element: HTMLElement, theme: Theme): HTMLElement {\n        // Update color from webiny theme\n        this.__color.updateFromTheme(theme);\n        element.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        element.style.color = this.__color.getValue();\n        return element;\n    }\n\n    override updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {\n        const isUpdated = super.updateDOM(prevNode, dom, config);\n        const theme = Theme.from(config.theme);\n        this.__color.updateFromTheme(theme);\n\n        dom.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        dom.style.color = this.__color.getValue();\n        return isUpdated;\n    }\n\n    getColorStyle() {\n        return {\n            color: this.__color.getValue(),\n            themeColor: this.__color.getName()\n        };\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        const theme = Theme.from(config.theme);\n        return this.addColorValueToHTMLElement(element, theme);\n    }\n}\n\nexport const $createFontColorNode = (text: string, color: ThemeColorValue): FontColorNode => {\n    return new FontColorNode(text, color);\n};\n\nexport const $isFontColorNode = (node: LexicalNode): node is FontColorNode => {\n    return node instanceof FontColorNode;\n};\n\nexport function $applyStylesToNode(node: TextNode, source: TextNode) {\n    node.setFormat(source.getFormat());\n    node.setStyle(source.getStyle());\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FontColorNode.js","sources":["../src/FontColorNode.ts"],"sourcesContent":["import type { EditorConfig, LexicalNode, SerializedTextNode, Spread } from \"lexical\";\nimport { $getSelection, $isRangeSelection, createCommand, TextNode } from \"lexical\";\nimport { Theme } from \"@webiny/lexical-theme\";\n\nexport class ThemeColorValue {\n    // Webiny theme color variable, like color1, color2, etc.\n    private readonly id: string;\n    // This can be a HEX value or a CSS variable.\n    private value: string;\n\n    constructor(value: string, name?: string) {\n        this.value = value;\n        this.id = name ?? \"custom\";\n    }\n\n    getValue() {\n        return this.value;\n    }\n\n    getName() {\n        return this.id;\n    }\n\n    updateFromTheme(theme: Theme) {\n        if (theme.colors && this.id !== \"custom\") {\n            const color = theme.colors.find(color => color.id === this.id);\n            if (color) {\n                this.value = color.value;\n            }\n        }\n    }\n}\n\nexport const ADD_FONT_COLOR_COMMAND = createCommand<FontColorPayload>(\"ADD_FONT_COLOR_COMMAND\");\n\nconst FontColorNodeAttrName = \"data-theme-font-color-name\";\n\nexport interface FontColorPayload {\n    color: ThemeColorValue;\n}\n\nexport type SerializedFontColorNode = Spread<\n    {\n        themeColor: string;\n        color: string;\n        type: \"wby-font-color\";\n    },\n    SerializedTextNode\n>;\n\n/**\n * Main responsibility of this node is to apply custom or Webiny theme color to selected text.\n * Extends the original TextNode node to add additional transformation and support for webiny theme font color.\n */\nexport class FontColorNode extends TextNode {\n    private readonly __color: ThemeColorValue;\n\n    constructor(text: string, color: ThemeColorValue, key?: string) {\n        super(text, key);\n        this.__color = color;\n    }\n\n    static override getType(): string {\n        return \"wby-font-color\";\n    }\n\n    static override clone(node: FontColorNode): FontColorNode {\n        return new FontColorNode(node.__text, node.__color, node.__key);\n    }\n\n    static override importJSON(serializedNode: SerializedFontColorNode): TextNode {\n        const node = new FontColorNode(\n            serializedNode.text,\n            new ThemeColorValue(serializedNode.color, serializedNode.themeColor)\n        );\n        node.setTextContent(serializedNode.text);\n        node.setFormat(serializedNode.format);\n        node.setDetail(serializedNode.detail);\n        node.setMode(serializedNode.mode);\n        node.setStyle(serializedNode.style);\n        return node;\n    }\n\n    override splitText(...splitOffsets: Array<number>): Array<FontColorNode> {\n        const newNodes = super.splitText(...splitOffsets);\n\n        const selection = $getSelection();\n\n        // After splitting, we need to re-apply styling to the new TextNodes.\n        const fontColorNodes = newNodes.map(node => {\n            if (node instanceof FontColorNode) {\n                return node;\n            }\n\n            const fontColorNode = $createFontColorNode(node.getTextContent(), this.__color);\n            $applyStylesToNode(fontColorNode, this);\n\n            const newNode = node.replace(fontColorNode);\n\n            // Since we're replacing the existing node, we need to update the selection keys.\n            // This is very important to not break the editor functionality!\n            if ($isRangeSelection(selection)) {\n                const anchor = selection.anchor;\n                const focus = selection.focus;\n\n                if (anchor.key === node.getKey()) {\n                    anchor.key = newNode.getKey();\n                }\n\n                if (focus.key === node.getKey()) {\n                    focus.key = newNode.getKey();\n                }\n            }\n\n            return newNode;\n        });\n\n        return fontColorNodes as Array<FontColorNode>;\n    }\n\n    override exportJSON(): SerializedFontColorNode {\n        return {\n            ...super.exportJSON(),\n            themeColor: this.__color.getName(),\n            color: this.__color.getValue(),\n            type: \"wby-font-color\"\n        };\n    }\n\n    private addColorValueToHTMLElement(element: HTMLElement, theme: Theme): HTMLElement {\n        // Update color from webiny theme\n        this.__color.updateFromTheme(theme);\n        element.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        element.style.color = this.__color.getValue();\n        return element;\n    }\n\n    override updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {\n        const isUpdated = super.updateDOM(prevNode, dom, config);\n        const theme = Theme.from(config.theme);\n        this.__color.updateFromTheme(theme);\n\n        dom.setAttribute(FontColorNodeAttrName, this.__color.getName());\n        dom.style.color = this.__color.getValue();\n        return isUpdated;\n    }\n\n    getColorStyle() {\n        return {\n            color: this.__color.getValue(),\n            themeColor: this.__color.getName()\n        };\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        const theme = Theme.from(config.theme);\n        return this.addColorValueToHTMLElement(element, theme);\n    }\n}\n\nexport const $createFontColorNode = (text: string, color: ThemeColorValue): FontColorNode => {\n    return new FontColorNode(text, color);\n};\n\nexport const $isFontColorNode = (node: LexicalNode): node is FontColorNode => {\n    return node instanceof FontColorNode;\n};\n\nexport function $applyStylesToNode(node: TextNode, source: TextNode) {\n    node.setFormat(source.getFormat());\n    node.setStyle(source.getStyle());\n}\n"],"names":["ThemeColorValue","value","name","theme","color","ADD_FONT_COLOR_COMMAND","createCommand","FontColorNodeAttrName","FontColorNode","TextNode","text","key","node","serializedNode","splitOffsets","newNodes","selection","$getSelection","fontColorNodes","fontColorNode","$createFontColorNode","$applyStylesToNode","newNode","$isRangeSelection","anchor","focus","element","prevNode","dom","config","isUpdated","Theme","$isFontColorNode","source"],"mappings":"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"}

package/HeadingNode.js

@@ -1,198 +1,175 @@
-import { $applyNodeReplacement, setNodeIndentFromDOM, addClassNamesToElement } from "lexical";
-import { HeadingNode as BaseHeadingNode } from "@lexical/rich-text";
+import { $applyNodeReplacement, addClassNamesToElement, setNodeIndentFromDOM } from "lexical";
+import { HeadingNode } from "@lexical/rich-text";
 import { Theme } from "@webiny/lexical-theme";
 import { getStyleId } from "./utils/getStyleId.js";
 function isGoogleDocsTitle(domNode) {
-  if (domNode.nodeName.toLowerCase() === "span") {
-    return domNode.style.fontSize === "26pt";
-  }
-  return false;
+    if ("span" === domNode.nodeName.toLowerCase()) return "26pt" === domNode.style.fontSize;
+    return false;
 }
 function $convertHeadingElement(element) {
-  const nodeName = element.nodeName.toLowerCase();
-  let node = null;
-  if (nodeName === "h1" || nodeName === "h2" || nodeName === "h3" || nodeName === "h4" || nodeName === "h5" || nodeName === "h6") {
-    node = $createHeadingNode(nodeName);
-    if (element.style !== null) {
-      setNodeIndentFromDOM(element, node);
-      node.setFormat(element.style.textAlign);
-    }
-  }
-  return {
-    node
-  };
-}
-export class HeadingNode extends BaseHeadingNode {
-  constructor(tag, options = {}) {
-    const {
-      styleId,
-      key,
-      className
-    } = options;
-    super(tag, key);
-    this.__styleId = styleId;
-    this.__className = className;
-  }
-  getStyleId() {
-    return this.__styleId;
-  }
-  setStyleId(styleId) {
-    this.__styleId = styleId;
-  }
-  setClassName(className) {
-    this.__className = className;
-  }
-  getClassName() {
-    return this.__className;
-  }
-  static getType() {
-    return "wby-heading";
-  }
-  static clone(node) {
-    return new HeadingNode(node.getTag(), {
-      key: node.getKey(),
-      styleId: node.getStyleId(),
-      className: node.getClassName()
-    });
-  }
-  createDOM(config) {
-    const element = super.createDOM(config);
-    const theme = Theme.from(config.theme);
-    return this.updateElementWithThemeClasses(element, theme);
-  }
-  exportDOM(editor) {
-    const base = super.exportDOM(editor);
-    const element = base.element;
-    if (element && this.__className) {
-      element.classList.add(this.__className);
+    const nodeName = element.nodeName.toLowerCase();
+    let node = null;
+    if ("h1" === nodeName || "h2" === nodeName || "h3" === nodeName || "h4" === nodeName || "h5" === nodeName || "h6" === nodeName) {
+        node = $createHeadingNode(nodeName);
+        if (null !== element.style) {
+            setNodeIndentFromDOM(element, node);
+            node.setFormat(element.style.textAlign);
+        }
     }
     return {
-      ...base,
-      element
+        node
     };
-  }
-  static importDOM() {
-    return {
-      h1: () => ({
-        conversion: $convertHeadingElement,
-        priority: 0
-      }),
-      h2: () => ({
-        conversion: $convertHeadingElement,
-        priority: 0
-      }),
-      h3: () => ({
-        conversion: $convertHeadingElement,
-        priority: 0
-      }),
-      h4: () => ({
-        conversion: $convertHeadingElement,
-        priority: 0
-      }),
-      h5: () => ({
-        conversion: $convertHeadingElement,
-        priority: 0
-      }),
-      h6: () => ({
-        conversion: $convertHeadingElement,
-        priority: 0
-      }),
-      p: node => {
-        // domNode is a <p> since we matched it by nodeName
-        const firstChild = node.firstChild;
-        if (firstChild !== null && isGoogleDocsTitle(firstChild)) {
-          return {
-            conversion: () => ({
-              node: null
-            }),
-            priority: 3
-          };
-        }
-        return null;
-      },
-      span: node => {
-        if (isGoogleDocsTitle(node)) {
-          return {
-            conversion: () => {
-              return {
-                node: $createHeadingNode("h1")
-              };
+}
+class HeadingNode_HeadingNode extends HeadingNode {
+    constructor(tag, options = {}){
+        const { styleId, key, className } = options;
+        super(tag, key);
+        this.__styleId = styleId;
+        this.__className = className;
+    }
+    getStyleId() {
+        return this.__styleId;
+    }
+    setStyleId(styleId) {
+        this.__styleId = styleId;
+    }
+    setClassName(className) {
+        this.__className = className;
+    }
+    getClassName() {
+        return this.__className;
+    }
+    static getType() {
+        return "wby-heading";
+    }
+    static clone(node) {
+        return new HeadingNode_HeadingNode(node.getTag(), {
+            key: node.getKey(),
+            styleId: node.getStyleId(),
+            className: node.getClassName()
+        });
+    }
+    createDOM(config) {
+        const element = super.createDOM(config);
+        const theme = Theme.from(config.theme);
+        return this.updateElementWithThemeClasses(element, theme);
+    }
+    exportDOM(editor) {
+        const base = super.exportDOM(editor);
+        const element = base.element;
+        if (element && this.__className) element.classList.add(this.__className);
+        return {
+            ...base,
+            element
+        };
+    }
+    static importDOM() {
+        return {
+            h1: ()=>({
+                    conversion: $convertHeadingElement,
+                    priority: 0
+                }),
+            h2: ()=>({
+                    conversion: $convertHeadingElement,
+                    priority: 0
+                }),
+            h3: ()=>({
+                    conversion: $convertHeadingElement,
+                    priority: 0
+                }),
+            h4: ()=>({
+                    conversion: $convertHeadingElement,
+                    priority: 0
+                }),
+            h5: ()=>({
+                    conversion: $convertHeadingElement,
+                    priority: 0
+                }),
+            h6: ()=>({
+                    conversion: $convertHeadingElement,
+                    priority: 0
+                }),
+            p: (node)=>{
+                const firstChild = node.firstChild;
+                if (null !== firstChild && isGoogleDocsTitle(firstChild)) return {
+                    conversion: ()=>({
+                            node: null
+                        }),
+                    priority: 3
+                };
+                return null;
             },
-            priority: 3
-          };
+            span: (node)=>{
+                if (isGoogleDocsTitle(node)) return {
+                    conversion: ()=>({
+                            node: $createHeadingNode("h1")
+                        }),
+                    priority: 3
+                };
+                return null;
+            }
+        };
+    }
+    static importJSON(serializedNode) {
+        const node = $createHeadingNode(serializedNode.tag);
+        node.setFormat(serializedNode.format);
+        node.setIndent(serializedNode.indent);
+        node.setDirection(serializedNode.direction);
+        const styleId = getStyleId({
+            styleId: serializedNode.styleId,
+            styles: serializedNode.styles
+        });
+        node.setStyleId(styleId);
+        node.setClassName(serializedNode.className);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: "wby-heading",
+            styleId: this.__styleId,
+            className: this.__className
+        };
+    }
+    insertNewAfter(selection, restoreSelection = true) {
+        const newElement = $createHeadingNode(this.getTag());
+        const direction = this.getDirection();
+        newElement.setDirection(direction);
+        this.insertAfter(newElement, restoreSelection);
+        return newElement;
+    }
+    collapseAtStart() {
+        const newElement = $createHeadingNode(this.getTag());
+        const children = this.getChildren();
+        children.forEach((child)=>newElement.append(child));
+        this.replace(newElement);
+        return true;
+    }
+    updateElementWithThemeClasses(element, theme) {
+        if (!this.__styleId || !this.__className) this.setDefaultTypography(theme, this.__styleId);
+        if (this.__className) addClassNamesToElement(element, this.__className);
+        return element;
+    }
+    setDefaultTypography(theme, styleId) {
+        let typographyStyle = theme.getTypographyByTag(this.getTag());
+        if (styleId) {
+            const byStyleId = theme.getTypographyById(styleId);
+            if (byStyleId) typographyStyle = byStyleId;
         }
-        return null;
-      }
-    };
-  }
-  static importJSON(serializedNode) {
-    const node = $createHeadingNode(serializedNode.tag);
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    const styleId = getStyleId({
-      styleId: serializedNode.styleId,
-      styles: serializedNode.styles
-    });
-    node.setStyleId(styleId);
-    node.setClassName(serializedNode.className);
-    return node;
-  }
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      type: "wby-heading",
-      styleId: this.__styleId,
-      className: this.__className
-    };
-  }
-
-  // Mutation
-  insertNewAfter(selection, restoreSelection = true) {
-    // Next line for headings are always headings with the same tag
-    const newElement = $createHeadingNode(this.getTag());
-    const direction = this.getDirection();
-    newElement.setDirection(direction);
-    this.insertAfter(newElement, restoreSelection);
-    return newElement;
-  }
-  collapseAtStart() {
-    const newElement = $createHeadingNode(this.getTag());
-    const children = this.getChildren();
-    children.forEach(child => newElement.append(child));
-    this.replace(newElement);
-    return true;
-  }
-  updateElementWithThemeClasses(element, theme) {
-    if (!this.__styleId || !this.__className) {
-      this.setDefaultTypography(theme, this.__styleId);
-    }
-    if (this.__className) {
-      addClassNamesToElement(element, this.__className);
-    }
-    return element;
-  }
-  setDefaultTypography(theme, styleId) {
-    let typographyStyle = theme.getTypographyByTag(this.getTag());
-    if (styleId) {
-      const byStyleId = theme.getTypographyById(styleId);
-      if (byStyleId) {
-        typographyStyle = byStyleId;
-      }
-    }
-    if (typographyStyle) {
-      this.__styleId = typographyStyle.id;
-      this.__className = typographyStyle.className;
-    }
-  }
+        if (typographyStyle) {
+            this.__styleId = typographyStyle.id;
+            this.__className = typographyStyle.className;
+        }
+    }
 }
-export function $createHeadingNode(tag, styleId) {
-  return $applyNodeReplacement(new HeadingNode(tag, {
-    styleId
-  }));
+function $createHeadingNode(tag, styleId) {
+    return $applyNodeReplacement(new HeadingNode_HeadingNode(tag, {
+        styleId
+    }));
 }
-export function $isHeadingNode(node) {
-  return node instanceof HeadingNode;
+function $isHeadingNode(node) {
+    return node instanceof HeadingNode_HeadingNode;
 }
+export { $createHeadingNode, $isHeadingNode, HeadingNode_HeadingNode as HeadingNode };
 
 //# sourceMappingURL=HeadingNode.js.map