@webiny/lexical-nodes 0.0.0-unstable.06b2ede40f

package/ListNode.js

@@ -0,0 +1,248 @@
+import { ElementNode } from "lexical";
+import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { addClassNamesToElement, removeClassNamesFromElement } from "@lexical/utils";
+import { $getListDepth, wrapInListItem } from "./utils/listNode";
+import { $isListItemNode } from "./ListItemNode";
+export class ListNode extends ElementNode {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  constructor(listType, options = {}) {
+    const {
+      styleId,
+      key,
+      className,
+      start
+    } = options;
+    super(key);
+    this.__styleId = styleId ?? "";
+    this.__className = className;
+    const _listType = TAG_TO_WEBINY_LIST_TYPE[listType] || listType;
+    this.__listType = _listType;
+    this.__tag = _listType === "number" ? "ol" : "ul";
+    this.__start = start || 1;
+  }
+  static getType() {
+    return "wby-list";
+  }
+  createDOM(config) {
+    const tag = this.__tag;
+    const element = document.createElement(tag);
+    if (this.__start !== 1) {
+      element.setAttribute("start", String(this.__start));
+    }
+    this.updateElementWithThemeClasses(element, config.theme);
+
+    // @ts-expect-error Internal field.
+    element.__lexicalListType = this.__listType;
+    const theme = config.theme;
+    setListThemeClassNames(element, theme, this, this.__styleId);
+    return element;
+  }
+  exportDOM(editor) {
+    const base = super.exportDOM(editor);
+    const element = base.element;
+    if (element && this.__className) {
+      element.classList.add(this.__className);
+    }
+    return {
+      ...base,
+      element
+    };
+  }
+  static clone(node) {
+    return new ListNode(node.getListType(), {
+      className: node.getClassName(),
+      styleId: node.getStyleId(),
+      start: node.getStart(),
+      key: node.getKey()
+    });
+  }
+  getStyleId() {
+    return this.__styleId;
+  }
+  setStyleId(styleId) {
+    this.__styleId = styleId ?? "";
+  }
+  setClassName(className) {
+    this.__className = className;
+  }
+  getClassName() {
+    return this.__className;
+  }
+  static importJSON(serializedNode) {
+    const node = $createListNode(serializedNode.listType,
+    // `styleId` is for backwards compatibility
+    serializedNode.styleId ?? serializedNode.styleId, serializedNode.start);
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    node.setClassName(serializedNode.className);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      styleId: this.__styleId,
+      className: this.__className,
+      listType: this.getListType(),
+      start: this.getStart(),
+      tag: this.getTag(),
+      type: "wby-list"
+    };
+  }
+  static importDomConversionMap() {
+    return {
+      conversion: convertListNode,
+      priority: 0
+    };
+  }
+  static importDOM() {
+    return {
+      ol: () => {
+        return this.importDomConversionMap();
+      },
+      ul: () => {
+        return this.importDomConversionMap();
+      }
+    };
+  }
+  updateDOM(prevNode, dom, config) {
+    if (prevNode.__tag !== this.__tag) {
+      return true;
+    }
+    setListThemeClassNames(dom, config.theme, this, this.__styleId);
+    return false;
+  }
+  extractWithChild(child) {
+    return $isListItemNode(child);
+  }
+  getListType() {
+    return this.__listType;
+  }
+  getStart() {
+    return this.__start;
+  }
+  getTag() {
+    return this.__tag;
+  }
+  updateElementWithThemeClasses(element, theme) {
+    if (!theme?.emotionMap) {
+      return element;
+    }
+    if (!this.__styleId || !this.__className) {
+      this.setDefaultTypography(theme.emotionMap);
+    }
+    if (this.__className) {
+      addClassNamesToElement(element, this.__className);
+    }
+    return element;
+  }
+  setDefaultTypography(themeEmotionMap) {
+    const typographyStyle = findTypographyStyleByHtmlTag(this.getTag(), themeEmotionMap);
+    if (typographyStyle) {
+      this.__styleId = typographyStyle.id;
+      this.__className = typographyStyle.className;
+    }
+  }
+}
+function setListThemeClassNames(dom, editorTheme, node, styleId) {
+  const editorThemeClasses = editorTheme;
+  const classesToAdd = [];
+  const classesToRemove = [];
+  const listTheme = editorThemeClasses.list;
+  const emotionMap = editorTheme?.emotionMap || {};
+  if (listTheme !== undefined) {
+    const listLevelsClassNames = listTheme[`${node.__tag}Depth`] || [];
+    const listDepth = $getListDepth(node) - 1;
+    const normalizedListDepth = listDepth % listLevelsClassNames.length;
+    const listLevelClassName = listLevelsClassNames[normalizedListDepth];
+    const listClassName = `${listTheme[node.__tag]} ${emotionMap[styleId]?.className ?? ""}`;
+    let nestedListClassName;
+    const nestedListTheme = listTheme.nested;
+    if (nestedListTheme !== undefined && nestedListTheme.list) {
+      nestedListClassName = nestedListTheme.list;
+    }
+    if (listClassName) {
+      classesToAdd.push(listClassName);
+    }
+    if (listLevelClassName !== undefined) {
+      const listItemClasses = listLevelClassName.split(" ");
+      classesToAdd.push(...listItemClasses);
+      for (let i = 0; i < listLevelsClassNames.length; i++) {
+        if (i !== normalizedListDepth) {
+          classesToRemove.push(node.__tag + i);
+        }
+      }
+    }
+    if (nestedListClassName !== undefined) {
+      const nestedListItemClasses = nestedListClassName.split(" ");
+      if (listDepth > 1) {
+        classesToAdd.push(...nestedListItemClasses);
+      } else {
+        classesToRemove.push(...nestedListItemClasses);
+      }
+    }
+  }
+  if (classesToRemove.length > 0) {
+    removeClassNamesFromElement(dom, ...classesToRemove);
+  }
+  if (classesToAdd.length > 0) {
+    addClassNamesToElement(dom, ...classesToAdd);
+  }
+}
+
+/*
+ * This function normalizes the children of a ListNode after the conversion from HTML,
+ * ensuring that they are all ListItemNodes and contain either a single nested ListNode
+ * or some other inline content.
+ */
+function normalizeChildren(nodes) {
+  const normalizedListItems = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if ($isListItemNode(node)) {
+      normalizedListItems.push(node);
+      node.getChildren().forEach(child => {
+        if ($isListNode(child)) {
+          normalizedListItems.push(wrapInListItem(child));
+        }
+      });
+    } else {
+      normalizedListItems.push(wrapInListItem(node));
+    }
+  }
+  return normalizedListItems;
+}
+function convertListNode(domNode) {
+  const nodeName = domNode.nodeName.toLowerCase();
+  let node = null;
+  if (nodeName === "ol") {
+    node = $createListNode("number");
+  } else if (nodeName === "ul") {
+    node = $createListNode("bullet");
+  }
+  return {
+    // @ts-expect-error
+    after: normalizeChildren,
+    node
+  };
+}
+const TAG_TO_WEBINY_LIST_TYPE = {
+  ol: "number",
+  ul: "bullet"
+};
+export function $createListNode(listType, styleId, start = 1) {
+  return new ListNode(listType, {
+    start,
+    styleId
+  });
+}
+export function $isListNode(node) {
+  return node instanceof ListNode;
+}
+
+//# sourceMappingURL=ListNode.js.map

package/ListNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ElementNode","findTypographyStyleByHtmlTag","addClassNamesToElement","removeClassNamesFromElement","$getListDepth","wrapInListItem","$isListItemNode","ListNode","constructor","listType","options","styleId","key","className","start","__styleId","__className","_listType","TAG_TO_WEBINY_LIST_TYPE","__listType","__tag","__start","getType","createDOM","config","tag","element","document","createElement","setAttribute","String","updateElementWithThemeClasses","theme","__lexicalListType","setListThemeClassNames","exportDOM","editor","base","classList","add","clone","node","getListType","getClassName","getStyleId","getStart","getKey","setStyleId","setClassName","importJSON","serializedNode","$createListNode","setFormat","format","setIndent","indent","setDirection","direction","exportJSON","getTag","type","importDomConversionMap","conversion","convertListNode","priority","importDOM","ol","ul","updateDOM","prevNode","dom","extractWithChild","child","emotionMap","setDefaultTypography","themeEmotionMap","typographyStyle","id","editorTheme","editorThemeClasses","classesToAdd","classesToRemove","listTheme","list","undefined","listLevelsClassNames","listDepth","normalizedListDepth","length","listLevelClassName","listClassName","nestedListClassName","nestedListTheme","nested","push","listItemClasses","split","i","nestedListItemClasses","normalizeChildren","nodes","normalizedListItems","getChildren","forEach","$isListNode","domNode","nodeName","toLowerCase","after"],"sources":["ListNode.ts"],"sourcesContent":["import type {\n    DOMConversion,\n    DOMConversionMap,\n    DOMConversionOutput,\n    DOMExportOutput,\n    EditorConfig,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    SerializedElementNode,\n    Spread\n} from \"lexical\";\nimport { ElementNode } from \"lexical\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { addClassNamesToElement, removeClassNamesFromElement } from \"@lexical/utils\";\nimport type { ListNodeTagType } from \"@lexical/list/LexicalListNode\";\nimport { $getListDepth, wrapInListItem } from \"~/utils/listNode\";\nimport type { ListItemNode } from \"./ListItemNode\";\nimport { $isListItemNode } from \"./ListItemNode\";\nimport type { ListType } from \"@lexical/list\";\nimport type { TypographyStylesNode } from \"~/types\";\n\nexport type SerializedWebinyListNode = Spread<\n    {\n        styleId?: string;\n        className?: string;\n        listType: ListType;\n        start: number;\n        tag: ListNodeTagType;\n        type: \"wby-list\";\n    },\n    SerializedElementNode\n>;\n\ntype ListNodeOptions = {\n    styleId?: string;\n    className?: string;\n    start?: number;\n    key?: NodeKey;\n};\n\nexport class ListNode extends ElementNode implements TypographyStylesNode {\n    /** @internal */\n    __tag: ListNodeTagType;\n    /** @internal */\n    __start: number;\n    /** @internal */\n    __listType: ListType;\n\n    private __styleId: string;\n    private __className: string | undefined;\n\n    constructor(listType: ListType, options: ListNodeOptions = {}) {\n        const { styleId, key, className, start } = options;\n        super(key);\n        this.__styleId = styleId ?? \"\";\n        this.__className = className;\n        const _listType = TAG_TO_WEBINY_LIST_TYPE[listType] || listType;\n        this.__listType = _listType;\n        this.__tag = _listType === \"number\" ? \"ol\" : \"ul\";\n        this.__start = start || 1;\n    }\n\n    static override getType() {\n        return \"wby-list\";\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const tag = this.__tag;\n        const element = document.createElement(tag);\n\n        if (this.__start !== 1) {\n            element.setAttribute(\"start\", String(this.__start));\n        }\n\n        this.updateElementWithThemeClasses(element, config.theme as EditorTheme);\n\n        // @ts-expect-error Internal field.\n        element.__lexicalListType = this.__listType;\n        const theme = config.theme as EditorTheme;\n        setListThemeClassNames(element, theme, this, this.__styleId);\n        return element;\n    }\n\n    override exportDOM(editor: LexicalEditor): DOMExportOutput {\n        const base = super.exportDOM(editor);\n\n        const element = base.element as HTMLElement;\n        if (element && this.__className) {\n            element.classList.add(this.__className);\n        }\n\n        return { ...base, element };\n    }\n\n    static override clone(node: ListNode): ListNode {\n        return new ListNode(node.getListType(), {\n            className: node.getClassName(),\n            styleId: node.getStyleId(),\n            start: node.getStart(),\n            key: node.getKey()\n        });\n    }\n\n    getStyleId(): string | undefined {\n        return this.__styleId;\n    }\n\n    setStyleId(styleId: string | undefined) {\n        this.__styleId = styleId ?? \"\";\n    }\n\n    setClassName(className: string | undefined) {\n        this.__className = className;\n    }\n\n    getClassName(): string | undefined {\n        return this.__className;\n    }\n\n    static override importJSON(serializedNode: SerializedWebinyListNode): ListNode {\n        const node = $createListNode(\n            serializedNode.listType,\n            // `styleId` is for backwards compatibility\n            serializedNode.styleId ?? serializedNode.styleId,\n            serializedNode.start\n        );\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n\n        node.setClassName(serializedNode.className);\n\n        return node;\n    }\n\n    override exportJSON(): SerializedWebinyListNode {\n        return {\n            ...super.exportJSON(),\n            styleId: this.__styleId,\n            className: this.__className,\n            listType: this.getListType(),\n            start: this.getStart(),\n            tag: this.getTag(),\n            type: \"wby-list\"\n        };\n    }\n\n    static importDomConversionMap(): DOMConversion<HTMLElement> | null {\n        return {\n            conversion: convertListNode,\n            priority: 0\n        };\n    }\n\n    static override importDOM(): DOMConversionMap | null {\n        return {\n            ol: () => {\n                return this.importDomConversionMap();\n            },\n            ul: () => {\n                return this.importDomConversionMap();\n            }\n        };\n    }\n\n    override updateDOM(prevNode: ListNode, dom: HTMLElement, config: EditorConfig): boolean {\n        if (prevNode.__tag !== this.__tag) {\n            return true;\n        }\n\n        setListThemeClassNames(dom, config.theme as EditorTheme, this, this.__styleId);\n        return false;\n    }\n\n    override extractWithChild(child: LexicalNode): boolean {\n        return $isListItemNode(child);\n    }\n\n    public getListType(): ListType {\n        return this.__listType;\n    }\n\n    public getStart(): number {\n        return this.__start;\n    }\n\n    private getTag(): ListNodeTagType {\n        return this.__tag;\n    }\n\n    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        if (!theme?.emotionMap) {\n            return element;\n        }\n\n        if (!this.__styleId || !this.__className) {\n            this.setDefaultTypography(theme.emotionMap);\n        }\n\n        if (this.__className) {\n            addClassNamesToElement(element, this.__className);\n        }\n\n        return element;\n    }\n\n    private setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(this.getTag(), themeEmotionMap);\n        if (typographyStyle) {\n            this.__styleId = typographyStyle.id;\n            this.__className = typographyStyle.className;\n        }\n    }\n}\n\nfunction setListThemeClassNames(\n    dom: HTMLElement,\n    editorTheme: EditorTheme,\n    node: ListNode,\n    styleId: string\n): void {\n    const editorThemeClasses = editorTheme;\n    const classesToAdd = [];\n    const classesToRemove = [];\n    const listTheme = editorThemeClasses.list;\n    const emotionMap = editorTheme?.emotionMap || {};\n    if (listTheme !== undefined) {\n        const listLevelsClassNames = listTheme[`${node.__tag}Depth`] || [];\n        const listDepth = $getListDepth(node) - 1;\n        const normalizedListDepth = listDepth % listLevelsClassNames.length;\n        const listLevelClassName = listLevelsClassNames[normalizedListDepth];\n        const listClassName = `${listTheme[node.__tag]} ${emotionMap[styleId]?.className ?? \"\"}`;\n        let nestedListClassName;\n        const nestedListTheme = listTheme.nested;\n\n        if (nestedListTheme !== undefined && nestedListTheme.list) {\n            nestedListClassName = nestedListTheme.list;\n        }\n\n        if (listClassName) {\n            classesToAdd.push(listClassName);\n        }\n\n        if (listLevelClassName !== undefined) {\n            const listItemClasses = listLevelClassName.split(\" \");\n            classesToAdd.push(...listItemClasses);\n            for (let i = 0; i < listLevelsClassNames.length; i++) {\n                if (i !== normalizedListDepth) {\n                    classesToRemove.push(node.__tag + i);\n                }\n            }\n        }\n\n        if (nestedListClassName !== undefined) {\n            const nestedListItemClasses = nestedListClassName.split(\" \");\n\n            if (listDepth > 1) {\n                classesToAdd.push(...nestedListItemClasses);\n            } else {\n                classesToRemove.push(...nestedListItemClasses);\n            }\n        }\n    }\n\n    if (classesToRemove.length > 0) {\n        removeClassNamesFromElement(dom, ...classesToRemove);\n    }\n\n    if (classesToAdd.length > 0) {\n        addClassNamesToElement(dom, ...classesToAdd);\n    }\n}\n\n/*\n * This function normalizes the children of a ListNode after the conversion from HTML,\n * ensuring that they are all ListItemNodes and contain either a single nested ListNode\n * or some other inline content.\n */\nfunction normalizeChildren(nodes: Array<ListNode>): Array<ListItemNode> {\n    const normalizedListItems: Array<ListItemNode> = [];\n    for (let i = 0; i < nodes.length; i++) {\n        const node = nodes[i];\n        if ($isListItemNode(node)) {\n            normalizedListItems.push(node);\n            node.getChildren().forEach(child => {\n                if ($isListNode(child)) {\n                    normalizedListItems.push(wrapInListItem(child));\n                }\n            });\n        } else {\n            normalizedListItems.push(wrapInListItem(node));\n        }\n    }\n    return normalizedListItems;\n}\n\nfunction convertListNode(domNode: Node): DOMConversionOutput {\n    const nodeName = domNode.nodeName.toLowerCase();\n    let node = null;\n\n    if (nodeName === \"ol\") {\n        node = $createListNode(\"number\");\n    } else if (nodeName === \"ul\") {\n        node = $createListNode(\"bullet\");\n    }\n\n    return {\n        // @ts-expect-error\n        after: normalizeChildren,\n        node\n    };\n}\n\nconst TAG_TO_WEBINY_LIST_TYPE: Record<string, ListType> = {\n    ol: \"number\",\n    ul: \"bullet\"\n};\n\nexport function $createListNode(listType: ListType, styleId?: string, start = 1): ListNode {\n    return new ListNode(listType, {\n        start,\n        styleId\n    });\n}\n\nexport function $isListNode(node: LexicalNode | null | undefined): node is ListNode {\n    return node instanceof ListNode;\n}\n"],"mappings":"AAYA,SAASA,WAAW,QAAQ,SAAS;AAErC,SAASC,4BAA4B,QAAQ,uBAAuB;AACpE,SAASC,sBAAsB,EAAEC,2BAA2B,QAAQ,gBAAgB;AAEpF,SAASC,aAAa,EAAEC,cAAc;AAEtC,SAASC,eAAe;AAuBxB,OAAO,MAAMC,QAAQ,SAASP,WAAW,CAAiC;EACtE;;EAEA;;EAEA;;EAMAQ,WAAWA,CAACC,QAAkB,EAAEC,OAAwB,GAAG,CAAC,CAAC,EAAE;IAC3D,MAAM;MAAEC,OAAO;MAAEC,GAAG;MAAEC,SAAS;MAAEC;IAAM,CAAC,GAAGJ,OAAO;IAClD,KAAK,CAACE,GAAG,CAAC;IACV,IAAI,CAACG,SAAS,GAAGJ,OAAO,IAAI,EAAE;IAC9B,IAAI,CAACK,WAAW,GAAGH,SAAS;IAC5B,MAAMI,SAAS,GAAGC,uBAAuB,CAACT,QAAQ,CAAC,IAAIA,QAAQ;IAC/D,IAAI,CAACU,UAAU,GAAGF,SAAS;IAC3B,IAAI,CAACG,KAAK,GAAGH,SAAS,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI;IACjD,IAAI,CAACI,OAAO,GAAGP,KAAK,IAAI,CAAC;EAC7B;EAEA,OAAgBQ,OAAOA,CAAA,EAAG;IACtB,OAAO,UAAU;EACrB;EAESC,SAASA,CAACC,MAAoB,EAAe;IAClD,MAAMC,GAAG,GAAG,IAAI,CAACL,KAAK;IACtB,MAAMM,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAACH,GAAG,CAAC;IAE3C,IAAI,IAAI,CAACJ,OAAO,KAAK,CAAC,EAAE;MACpBK,OAAO,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAAC,IAAI,CAACT,OAAO,CAAC,CAAC;IACvD;IAEA,IAAI,CAACU,6BAA6B,CAACL,OAAO,EAAEF,MAAM,CAACQ,KAAoB,CAAC;;IAExE;IACAN,OAAO,CAACO,iBAAiB,GAAG,IAAI,CAACd,UAAU;IAC3C,MAAMa,KAAK,GAAGR,MAAM,CAACQ,KAAoB;IACzCE,sBAAsB,CAACR,OAAO,EAAEM,KAAK,EAAE,IAAI,EAAE,IAAI,CAACjB,SAAS,CAAC;IAC5D,OAAOW,OAAO;EAClB;EAESS,SAASA,CAACC,MAAqB,EAAmB;IACvD,MAAMC,IAAI,GAAG,KAAK,CAACF,SAAS,CAACC,MAAM,CAAC;IAEpC,MAAMV,OAAO,GAAGW,IAAI,CAACX,OAAsB;IAC3C,IAAIA,OAAO,IAAI,IAAI,CAACV,WAAW,EAAE;MAC7BU,OAAO,CAACY,SAAS,CAACC,GAAG,CAAC,IAAI,CAACvB,WAAW,CAAC;IAC3C;IAEA,OAAO;MAAE,GAAGqB,IAAI;MAAEX;IAAQ,CAAC;EAC/B;EAEA,OAAgBc,KAAKA,CAACC,IAAc,EAAY;IAC5C,OAAO,IAAIlC,QAAQ,CAACkC,IAAI,CAACC,WAAW,CAAC,CAAC,EAAE;MACpC7B,SAAS,EAAE4B,IAAI,CAACE,YAAY,CAAC,CAAC;MAC9BhC,OAAO,EAAE8B,IAAI,CAACG,UAAU,CAAC,CAAC;MAC1B9B,KAAK,EAAE2B,IAAI,CAACI,QAAQ,CAAC,CAAC;MACtBjC,GAAG,EAAE6B,IAAI,CAACK,MAAM,CAAC;IACrB,CAAC,CAAC;EACN;EAEAF,UAAUA,CAAA,EAAuB;IAC7B,OAAO,IAAI,CAAC7B,SAAS;EACzB;EAEAgC,UAAUA,CAACpC,OAA2B,EAAE;IACpC,IAAI,CAACI,SAAS,GAAGJ,OAAO,IAAI,EAAE;EAClC;EAEAqC,YAAYA,CAACnC,SAA6B,EAAE;IACxC,IAAI,CAACG,WAAW,GAAGH,SAAS;EAChC;EAEA8B,YAAYA,CAAA,EAAuB;IAC/B,OAAO,IAAI,CAAC3B,WAAW;EAC3B;EAEA,OAAgBiC,UAAUA,CAACC,cAAwC,EAAY;IAC3E,MAAMT,IAAI,GAAGU,eAAe,CACxBD,cAAc,CAACzC,QAAQ;IACvB;IACAyC,cAAc,CAACvC,OAAO,IAAIuC,cAAc,CAACvC,OAAO,EAChDuC,cAAc,CAACpC,KACnB,CAAC;IACD2B,IAAI,CAACW,SAAS,CAACF,cAAc,CAACG,MAAM,CAAC;IACrCZ,IAAI,CAACa,SAAS,CAACJ,cAAc,CAACK,MAAM,CAAC;IACrCd,IAAI,CAACe,YAAY,CAACN,cAAc,CAACO,SAAS,CAAC;IAE3ChB,IAAI,CAACO,YAAY,CAACE,cAAc,CAACrC,SAAS,CAAC;IAE3C,OAAO4B,IAAI;EACf;EAESiB,UAAUA,CAAA,EAA6B;IAC5C,OAAO;MACH,GAAG,KAAK,CAACA,UAAU,CAAC,CAAC;MACrB/C,OAAO,EAAE,IAAI,CAACI,SAAS;MACvBF,SAAS,EAAE,IAAI,CAACG,WAAW;MAC3BP,QAAQ,EAAE,IAAI,CAACiC,WAAW,CAAC,CAAC;MAC5B5B,KAAK,EAAE,IAAI,CAAC+B,QAAQ,CAAC,CAAC;MACtBpB,GAAG,EAAE,IAAI,CAACkC,MAAM,CAAC,CAAC;MAClBC,IAAI,EAAE;IACV,CAAC;EACL;EAEA,OAAOC,sBAAsBA,CAAA,EAAsC;IAC/D,OAAO;MACHC,UAAU,EAAEC,eAAe;MAC3BC,QAAQ,EAAE;IACd,CAAC;EACL;EAEA,OAAgBC,SAASA,CAAA,EAA4B;IACjD,OAAO;MACHC,EAAE,EAAEA,CAAA,KAAM;QACN,OAAO,IAAI,CAACL,sBAAsB,CAAC,CAAC;MACxC,CAAC;MACDM,EAAE,EAAEA,CAAA,KAAM;QACN,OAAO,IAAI,CAACN,sBAAsB,CAAC,CAAC;MACxC;IACJ,CAAC;EACL;EAESO,SAASA,CAACC,QAAkB,EAAEC,GAAgB,EAAE9C,MAAoB,EAAW;IACpF,IAAI6C,QAAQ,CAACjD,KAAK,KAAK,IAAI,CAACA,KAAK,EAAE;MAC/B,OAAO,IAAI;IACf;IAEAc,sBAAsB,CAACoC,GAAG,EAAE9C,MAAM,CAACQ,KAAK,EAAiB,IAAI,EAAE,IAAI,CAACjB,SAAS,CAAC;IAC9E,OAAO,KAAK;EAChB;EAESwD,gBAAgBA,CAACC,KAAkB,EAAW;IACnD,OAAOlE,eAAe,CAACkE,KAAK,CAAC;EACjC;EAEO9B,WAAWA,CAAA,EAAa;IAC3B,OAAO,IAAI,CAACvB,UAAU;EAC1B;EAEO0B,QAAQA,CAAA,EAAW;IACtB,OAAO,IAAI,CAACxB,OAAO;EACvB;EAEQsC,MAAMA,CAAA,EAAoB;IAC9B,OAAO,IAAI,CAACvC,KAAK;EACrB;EAEUW,6BAA6BA,CAACL,OAAoB,EAAEM,KAAkB,EAAe;IAC3F,IAAI,CAACA,KAAK,EAAEyC,UAAU,EAAE;MACpB,OAAO/C,OAAO;IAClB;IAEA,IAAI,CAAC,IAAI,CAACX,SAAS,IAAI,CAAC,IAAI,CAACC,WAAW,EAAE;MACtC,IAAI,CAAC0D,oBAAoB,CAAC1C,KAAK,CAACyC,UAAU,CAAC;IAC/C;IAEA,IAAI,IAAI,CAACzD,WAAW,EAAE;MAClBd,sBAAsB,CAACwB,OAAO,EAAE,IAAI,CAACV,WAAW,CAAC;IACrD;IAEA,OAAOU,OAAO;EAClB;EAEQgD,oBAAoBA,CAACC,eAAgC,EAAE;IAC3D,MAAMC,eAAe,GAAG3E,4BAA4B,CAAC,IAAI,CAAC0D,MAAM,CAAC,CAAC,EAAEgB,eAAe,CAAC;IACpF,IAAIC,eAAe,EAAE;MACjB,IAAI,CAAC7D,SAAS,GAAG6D,eAAe,CAACC,EAAE;MACnC,IAAI,CAAC7D,WAAW,GAAG4D,eAAe,CAAC/D,SAAS;IAChD;EACJ;AACJ;AAEA,SAASqB,sBAAsBA,CAC3BoC,GAAgB,EAChBQ,WAAwB,EACxBrC,IAAc,EACd9B,OAAe,EACX;EACJ,MAAMoE,kBAAkB,GAAGD,WAAW;EACtC,MAAME,YAAY,GAAG,EAAE;EACvB,MAAMC,eAAe,GAAG,EAAE;EAC1B,MAAMC,SAAS,GAAGH,kBAAkB,CAACI,IAAI;EACzC,MAAMV,UAAU,GAAGK,WAAW,EAAEL,UAAU,IAAI,CAAC,CAAC;EAChD,IAAIS,SAAS,KAAKE,SAAS,EAAE;IACzB,MAAMC,oBAAoB,GAAGH,SAAS,CAAC,GAAGzC,IAAI,CAACrB,KAAK,OAAO,CAAC,IAAI,EAAE;IAClE,MAAMkE,SAAS,GAAGlF,aAAa,CAACqC,IAAI,CAAC,GAAG,CAAC;IACzC,MAAM8C,mBAAmB,GAAGD,SAAS,GAAGD,oBAAoB,CAACG,MAAM;IACnE,MAAMC,kBAAkB,GAAGJ,oBAAoB,CAACE,mBAAmB,CAAC;IACpE,MAAMG,aAAa,GAAG,GAAGR,SAAS,CAACzC,IAAI,CAACrB,KAAK,CAAC,IAAIqD,UAAU,CAAC9D,OAAO,CAAC,EAAEE,SAAS,IAAI,EAAE,EAAE;IACxF,IAAI8E,mBAAmB;IACvB,MAAMC,eAAe,GAAGV,SAAS,CAACW,MAAM;IAExC,IAAID,eAAe,KAAKR,SAAS,IAAIQ,eAAe,CAACT,IAAI,EAAE;MACvDQ,mBAAmB,GAAGC,eAAe,CAACT,IAAI;IAC9C;IAEA,IAAIO,aAAa,EAAE;MACfV,YAAY,CAACc,IAAI,CAACJ,aAAa,CAAC;IACpC;IAEA,IAAID,kBAAkB,KAAKL,SAAS,EAAE;MAClC,MAAMW,eAAe,GAAGN,kBAAkB,CAACO,KAAK,CAAC,GAAG,CAAC;MACrDhB,YAAY,CAACc,IAAI,CAAC,GAAGC,eAAe,CAAC;MACrC,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGZ,oBAAoB,CAACG,MAAM,EAAES,CAAC,EAAE,EAAE;QAClD,IAAIA,CAAC,KAAKV,mBAAmB,EAAE;UAC3BN,eAAe,CAACa,IAAI,CAACrD,IAAI,CAACrB,KAAK,GAAG6E,CAAC,CAAC;QACxC;MACJ;IACJ;IAEA,IAAIN,mBAAmB,KAAKP,SAAS,EAAE;MACnC,MAAMc,qBAAqB,GAAGP,mBAAmB,CAACK,KAAK,CAAC,GAAG,CAAC;MAE5D,IAAIV,SAAS,GAAG,CAAC,EAAE;QACfN,YAAY,CAACc,IAAI,CAAC,GAAGI,qBAAqB,CAAC;MAC/C,CAAC,MAAM;QACHjB,eAAe,CAACa,IAAI,CAAC,GAAGI,qBAAqB,CAAC;MAClD;IACJ;EACJ;EAEA,IAAIjB,eAAe,CAACO,MAAM,GAAG,CAAC,EAAE;IAC5BrF,2BAA2B,CAACmE,GAAG,EAAE,GAAGW,eAAe,CAAC;EACxD;EAEA,IAAID,YAAY,CAACQ,MAAM,GAAG,CAAC,EAAE;IACzBtF,sBAAsB,CAACoE,GAAG,EAAE,GAAGU,YAAY,CAAC;EAChD;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASmB,iBAAiBA,CAACC,KAAsB,EAAuB;EACpE,MAAMC,mBAAwC,GAAG,EAAE;EACnD,KAAK,IAAIJ,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGG,KAAK,CAACZ,MAAM,EAAES,CAAC,EAAE,EAAE;IACnC,MAAMxD,IAAI,GAAG2D,KAAK,CAACH,CAAC,CAAC;IACrB,IAAI3F,eAAe,CAACmC,IAAI,CAAC,EAAE;MACvB4D,mBAAmB,CAACP,IAAI,CAACrD,IAAI,CAAC;MAC9BA,IAAI,CAAC6D,WAAW,CAAC,CAAC,CAACC,OAAO,CAAC/B,KAAK,IAAI;QAChC,IAAIgC,WAAW,CAAChC,KAAK,CAAC,EAAE;UACpB6B,mBAAmB,CAACP,IAAI,CAACzF,cAAc,CAACmE,KAAK,CAAC,CAAC;QACnD;MACJ,CAAC,CAAC;IACN,CAAC,MAAM;MACH6B,mBAAmB,CAACP,IAAI,CAACzF,cAAc,CAACoC,IAAI,CAAC,CAAC;IAClD;EACJ;EACA,OAAO4D,mBAAmB;AAC9B;AAEA,SAAStC,eAAeA,CAAC0C,OAAa,EAAuB;EACzD,MAAMC,QAAQ,GAAGD,OAAO,CAACC,QAAQ,CAACC,WAAW,CAAC,CAAC;EAC/C,IAAIlE,IAAI,GAAG,IAAI;EAEf,IAAIiE,QAAQ,KAAK,IAAI,EAAE;IACnBjE,IAAI,GAAGU,eAAe,CAAC,QAAQ,CAAC;EACpC,CAAC,MAAM,IAAIuD,QAAQ,KAAK,IAAI,EAAE;IAC1BjE,IAAI,GAAGU,eAAe,CAAC,QAAQ,CAAC;EACpC;EAEA,OAAO;IACH;IACAyD,KAAK,EAAET,iBAAiB;IACxB1D;EACJ,CAAC;AACL;AAEA,MAAMvB,uBAAiD,GAAG;EACtDgD,EAAE,EAAE,QAAQ;EACZC,EAAE,EAAE;AACR,CAAC;AAED,OAAO,SAAShB,eAAeA,CAAC1C,QAAkB,EAAEE,OAAgB,EAAEG,KAAK,GAAG,CAAC,EAAY;EACvF,OAAO,IAAIP,QAAQ,CAACE,QAAQ,EAAE;IAC1BK,KAAK;IACLH;EACJ,CAAC,CAAC;AACN;AAEA,OAAO,SAAS6F,WAAWA,CAAC/D,IAAoC,EAAoB;EAChF,OAAOA,IAAI,YAAYlC,QAAQ;AACnC","ignoreList":[]}

package/ParagraphNode.d.ts

@@ -0,0 +1,39 @@
+import type { DOMConversionMap, LexicalNode, NodeKey, SerializedParagraphNode as SerializedBaseParagraphNode, Spread, LexicalEditor, DOMExportOutput, RangeSelection } from "lexical";
+import { ParagraphNode as BaseParagraphNode } from "lexical";
+import type { EditorConfig } from "lexical";
+import type { EditorTheme } from "@webiny/lexical-theme";
+import type { TypographyStylesNode, ThemeStyleValue } from "./types";
+export type SerializeParagraphNode = Spread<{
+    styles?: ThemeStyleValue[];
+    styleId?: string;
+    className?: string;
+    type: "wby-paragraph";
+}, SerializedBaseParagraphNode>;
+interface ParagraphNodeOptions {
+    className?: string;
+    styleId?: string;
+    key?: NodeKey;
+}
+export declare class ParagraphNode extends BaseParagraphNode implements TypographyStylesNode {
+    private __styleId;
+    private __className;
+    constructor(options?: ParagraphNodeOptions);
+    getStyleId(): string | undefined;
+    setStyleId(styleId: string | undefined): void;
+    setClassName(className: string | undefined): void;
+    getClassName(): string | undefined;
+    static getType(): string;
+    static clone(node: ParagraphNode): ParagraphNode;
+    insertNewAfter(rangeSelection: RangeSelection, restoreSelection: boolean): ParagraphNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(editor: LexicalEditor): DOMExportOutput;
+    updateDOM(prevNode: ParagraphNode, dom: HTMLElement, config: EditorConfig): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializeParagraphNode): BaseParagraphNode;
+    exportJSON(): SerializeParagraphNode;
+    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement;
+    private setDefaultTypography;
+}
+export declare function $createParagraphNode(styleId?: string): ParagraphNode;
+export declare function $isParagraphNode(node: LexicalNode | null | undefined): node is ParagraphNode;
+export {};

package/ParagraphNode.js

@@ -0,0 +1,157 @@
+import { ParagraphNode as BaseParagraphNode } from "lexical";
+import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { addClassNamesToElement } from "@lexical/utils";
+import { getStyleId } from "./utils/getStyleId";
+function convertParagraphElement(element) {
+  const node = $createParagraphNode();
+  if (element.style) {
+    node.setFormat(element.style.textAlign);
+  }
+  return {
+    node
+  };
+}
+export class ParagraphNode extends BaseParagraphNode {
+  constructor(options = {}) {
+    const {
+      styleId,
+      key,
+      className
+    } = options;
+    super(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-paragraph";
+  }
+  static clone(node) {
+    return new ParagraphNode({
+      styleId: node.getStyleId(),
+      className: node.getClassName(),
+      key: node.__key
+    });
+  }
+  insertNewAfter(rangeSelection, restoreSelection) {
+    const newElement = $createParagraphNode();
+    newElement.setTextFormat(rangeSelection.format);
+    newElement.setTextStyle(rangeSelection.style);
+    const direction = this.getDirection();
+    newElement.setDirection(direction);
+    newElement.setFormat(this.getFormatType());
+    newElement.setStyle(this.getStyle());
+    this.insertAfter(newElement, restoreSelection);
+    return newElement;
+  }
+  createDOM(config) {
+    const element = super.createDOM(config);
+    return this.updateElementWithThemeClasses(element, config.theme);
+  }
+  exportDOM(editor) {
+    const base = super.exportDOM(editor);
+    const element = base.element;
+    if (element && this.__className) {
+      element.classList.add(this.__className);
+    }
+    return {
+      ...base,
+      element
+    };
+  }
+  updateDOM(prevNode, dom, config) {
+    const prevTypoStyleId = prevNode.getStyleId();
+    const nextTypoStyleId = this.getStyleId();
+    if (!nextTypoStyleId) {
+      this.updateElementWithThemeClasses(dom, config.theme);
+      return false;
+    }
+    if (prevTypoStyleId !== nextTypoStyleId && nextTypoStyleId) {
+      this.updateElementWithThemeClasses(dom, config.theme);
+    }
+    // Returning false tells Lexical that this node does not need its
+    // DOM element replacing with a new copy from createDOM.
+    return false;
+  }
+
+  /*
+   * On copy/paste event this method will be executed in and create a node
+   * */
+  static importDOM() {
+    return {
+      p: () => ({
+        conversion: convertParagraphElement,
+        priority: 0
+      })
+    };
+  }
+
+  /*
+   * Serialize the JSON data back into a node
+   */
+  static importJSON(serializedNode) {
+    const node = $createParagraphNode();
+    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;
+  }
+
+  /*
+   * Serialize the node to JSON data representation.
+   * */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      styleId: this.__styleId,
+      className: this.__className,
+      type: "wby-paragraph"
+    };
+  }
+  updateElementWithThemeClasses(element, theme) {
+    if (!theme?.emotionMap) {
+      return element;
+    }
+    if (!this.__styleId || !this.__className) {
+      this.setDefaultTypography(theme.emotionMap);
+    }
+    if (this.__className) {
+      addClassNamesToElement(element, this.__className);
+    }
+    return element;
+  }
+  setDefaultTypography(themeEmotionMap) {
+    const typographyStyle = findTypographyStyleByHtmlTag("p", themeEmotionMap);
+    if (typographyStyle) {
+      this.__styleId = typographyStyle.id;
+      this.__className = typographyStyle.className;
+    }
+  }
+}
+export function $createParagraphNode(styleId) {
+  return new ParagraphNode({
+    styleId
+  });
+}
+export function $isParagraphNode(node) {
+  return node instanceof ParagraphNode;
+}
+
+//# sourceMappingURL=ParagraphNode.js.map

package/ParagraphNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ParagraphNode","BaseParagraphNode","findTypographyStyleByHtmlTag","addClassNamesToElement","getStyleId","convertParagraphElement","element","node","$createParagraphNode","style","setFormat","textAlign","constructor","options","styleId","key","className","__styleId","__className","setStyleId","setClassName","getClassName","getType","clone","__key","insertNewAfter","rangeSelection","restoreSelection","newElement","setTextFormat","format","setTextStyle","direction","getDirection","setDirection","getFormatType","setStyle","getStyle","insertAfter","createDOM","config","updateElementWithThemeClasses","theme","exportDOM","editor","base","classList","add","updateDOM","prevNode","dom","prevTypoStyleId","nextTypoStyleId","importDOM","p","conversion","priority","importJSON","serializedNode","setIndent","indent","styles","exportJSON","type","emotionMap","setDefaultTypography","themeEmotionMap","typographyStyle","id","$isParagraphNode"],"sources":["ParagraphNode.ts"],"sourcesContent":["import type {\n    DOMConversionMap,\n    DOMConversionOutput,\n    ElementFormatType,\n    LexicalNode,\n    NodeKey,\n    SerializedParagraphNode as SerializedBaseParagraphNode,\n    Spread,\n    LexicalEditor,\n    DOMExportOutput,\n    RangeSelection\n} from \"lexical\";\nimport { ParagraphNode as BaseParagraphNode } from \"lexical\";\nimport type { EditorConfig } from \"lexical\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport type { TypographyStylesNode, ThemeStyleValue } from \"~/types\";\nimport { getStyleId } from \"./utils/getStyleId\";\n\nfunction convertParagraphElement(element: HTMLElement): DOMConversionOutput {\n    const node = $createParagraphNode();\n    if (element.style) {\n        node.setFormat(element.style.textAlign as ElementFormatType);\n    }\n\n    return { node };\n}\n\nexport type SerializeParagraphNode = Spread<\n    {\n        styles?: ThemeStyleValue[];\n        styleId?: string;\n        className?: string;\n        type: \"wby-paragraph\";\n    },\n    SerializedBaseParagraphNode\n>;\n\ninterface ParagraphNodeOptions {\n    className?: string;\n    styleId?: string;\n    key?: NodeKey;\n}\n\nexport class ParagraphNode extends BaseParagraphNode implements TypographyStylesNode {\n    private __styleId: string | undefined;\n    private __className: string | undefined;\n\n    constructor(options: ParagraphNodeOptions = {}) {\n        const { styleId, key, className } = options;\n        super(key);\n\n        this.__styleId = styleId;\n        this.__className = className;\n    }\n\n    getStyleId(): string | undefined {\n        return this.__styleId;\n    }\n\n    setStyleId(styleId: string | undefined) {\n        this.__styleId = styleId;\n    }\n\n    setClassName(className: string | undefined) {\n        this.__className = className;\n    }\n\n    getClassName(): string | undefined {\n        return this.__className;\n    }\n\n    static override getType(): string {\n        return \"wby-paragraph\";\n    }\n\n    static override clone(node: ParagraphNode): ParagraphNode {\n        return new ParagraphNode({\n            styleId: node.getStyleId(),\n            className: node.getClassName(),\n            key: node.__key\n        });\n    }\n\n    override insertNewAfter(\n        rangeSelection: RangeSelection,\n        restoreSelection: boolean\n    ): ParagraphNode {\n        const newElement = $createParagraphNode();\n        newElement.setTextFormat(rangeSelection.format);\n        newElement.setTextStyle(rangeSelection.style);\n        const direction = this.getDirection();\n        newElement.setDirection(direction);\n        newElement.setFormat(this.getFormatType());\n        newElement.setStyle(this.getStyle());\n        this.insertAfter(newElement, restoreSelection);\n        return newElement;\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.updateElementWithThemeClasses(element, config.theme as EditorTheme);\n    }\n\n    override exportDOM(editor: LexicalEditor): DOMExportOutput {\n        const base = super.exportDOM(editor);\n\n        const element = base.element as HTMLElement;\n        if (element && this.__className) {\n            element.classList.add(this.__className);\n        }\n\n        return { ...base, element };\n    }\n\n    override updateDOM(prevNode: ParagraphNode, dom: HTMLElement, config: EditorConfig): boolean {\n        const prevTypoStyleId = prevNode.getStyleId();\n        const nextTypoStyleId = this.getStyleId();\n\n        if (!nextTypoStyleId) {\n            this.updateElementWithThemeClasses(dom, config.theme as EditorTheme);\n            return false;\n        }\n\n        if (prevTypoStyleId !== nextTypoStyleId && nextTypoStyleId) {\n            this.updateElementWithThemeClasses(dom, config.theme as EditorTheme);\n        }\n        // Returning false tells Lexical that this node does not need its\n        // DOM element replacing with a new copy from createDOM.\n        return false;\n    }\n\n    /*\n     * On copy/paste event this method will be executed in and create a node\n     * */\n    static override importDOM(): DOMConversionMap | null {\n        return {\n            p: () => ({\n                conversion: convertParagraphElement,\n                priority: 0\n            })\n        };\n    }\n\n    /*\n     * Serialize the JSON data back into a node\n     */\n    static override importJSON(serializedNode: SerializeParagraphNode): BaseParagraphNode {\n        const node = $createParagraphNode();\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n\n        const styleId = getStyleId({\n            styleId: serializedNode.styleId,\n            styles: serializedNode.styles\n        });\n\n        node.setStyleId(styleId);\n        node.setClassName(serializedNode.className);\n        return node;\n    }\n\n    /*\n     * Serialize the node to JSON data representation.\n     * */\n    override exportJSON(): SerializeParagraphNode {\n        return {\n            ...super.exportJSON(),\n            styleId: this.__styleId,\n            className: this.__className,\n            type: \"wby-paragraph\"\n        };\n    }\n\n    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        if (!theme?.emotionMap) {\n            return element;\n        }\n\n        if (!this.__styleId || !this.__className) {\n            this.setDefaultTypography(theme.emotionMap);\n        }\n\n        if (this.__className) {\n            addClassNamesToElement(element, this.__className);\n        }\n\n        return element;\n    }\n\n    private setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        const typographyStyle = findTypographyStyleByHtmlTag(\"p\", themeEmotionMap);\n        if (typographyStyle) {\n            this.__styleId = typographyStyle.id;\n            this.__className = typographyStyle.className;\n        }\n    }\n}\n\nexport function $createParagraphNode(styleId?: string): ParagraphNode {\n    return new ParagraphNode({ styleId });\n}\n\nexport function $isParagraphNode(node: LexicalNode | null | undefined): node is ParagraphNode {\n    return node instanceof ParagraphNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/QuoteNode.d.ts

@@ -0,0 +1,38 @@
+import type { DOMConversion, DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, Spread } from "lexical";
+import type { EditorTheme } from "@webiny/lexical-theme";
+import type { SerializedQuoteNode as BaseSerializedQuoteNode } from "@lexical/rich-text";
+import { QuoteNode as BaseQuoteNode } from "@lexical/rich-text";
+import type { ThemeStyleValue, TypographyStylesNode } from "./types";
+export type SerializedQuoteNode = Spread<{
+    styleId?: string;
+    styles?: ThemeStyleValue[];
+    className?: string;
+    type: "wby-quote";
+}, BaseSerializedQuoteNode>;
+interface QuoteNodeOptions {
+    className?: string;
+    styleId?: string;
+    key?: NodeKey;
+}
+export declare class QuoteNode extends BaseQuoteNode implements TypographyStylesNode {
+    private __styleId;
+    private __className;
+    constructor(options?: QuoteNodeOptions);
+    getStyleId(): string | undefined;
+    setStyleId(styleId: string | undefined): void;
+    setClassName(className: string | undefined): void;
+    getClassName(): string | undefined;
+    private setDefaultTypography;
+    static getType(): string;
+    static clone(node: QuoteNode): QuoteNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(editor: LexicalEditor): DOMExportOutput;
+    static importDomConversionMap(): DOMConversion<HTMLElement> | null;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedQuoteNode): QuoteNode;
+    exportJSON(): SerializedQuoteNode;
+    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement;
+}
+export declare function $createQuoteNode(styleId?: string, key?: NodeKey): QuoteNode;
+export declare function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode;
+export {};

package/QuoteNode.js

@@ -0,0 +1,120 @@
+import { $applyNodeReplacement } from "lexical";
+import { findTypographyStyleByHtmlTag } from "@webiny/lexical-theme";
+import { addClassNamesToElement } from "@lexical/utils";
+import { QuoteNode as BaseQuoteNode } from "@lexical/rich-text";
+import { getStyleId } from "./utils/getStyleId";
+export class QuoteNode extends BaseQuoteNode {
+  constructor(options = {}) {
+    super(options.key);
+    this.__styleId = options?.styleId;
+    this.__className = options?.className;
+  }
+  getStyleId() {
+    return this.__styleId;
+  }
+  setStyleId(styleId) {
+    this.__styleId = styleId;
+  }
+  setClassName(className) {
+    this.__className = className;
+  }
+  getClassName() {
+    return this.__className;
+  }
+  setDefaultTypography(themeEmotionMap) {
+    // For some time in v5 we had `quoteblock` as tag name :facepalm: We must not break it.
+    const typographyStyle = findTypographyStyleByHtmlTag(["blockquote", "quoteblock"], themeEmotionMap);
+    if (typographyStyle) {
+      this.__styleId = typographyStyle.id;
+      this.__className = typographyStyle.className;
+    }
+  }
+  static getType() {
+    return "wby-quote";
+  }
+  static clone(node) {
+    return new QuoteNode({
+      styleId: node.getStyleId(),
+      className: node.getClassName(),
+      key: node.getKey()
+    });
+  }
+  createDOM(config) {
+    const element = super.createDOM(config);
+    return this.updateElementWithThemeClasses(element, config.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 importDomConversionMap() {
+    return {
+      conversion: convertBlockquoteElement,
+      priority: 0
+    };
+  }
+  static importDOM() {
+    return {
+      blockquote: () => {
+        return this.importDomConversionMap();
+      }
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = $createQuoteNode();
+    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-quote",
+      className: this.__className,
+      styleId: this.__styleId
+    };
+  }
+  updateElementWithThemeClasses(element, theme) {
+    if (!theme?.emotionMap) {
+      return element;
+    }
+    if (!this.__styleId || !this.__className) {
+      this.setDefaultTypography(theme.emotionMap);
+    }
+    if (this.__className) {
+      addClassNamesToElement(element, this.__className);
+    }
+    return element;
+  }
+}
+function convertBlockquoteElement() {
+  const node = $createQuoteNode();
+  return {
+    node
+  };
+}
+export function $createQuoteNode(styleId, key) {
+  return $applyNodeReplacement(new QuoteNode({
+    styleId,
+    key
+  }));
+}
+export function $isQuoteNode(node) {
+  return node instanceof QuoteNode;
+}
+
+//# sourceMappingURL=QuoteNode.js.map