@webiny/lexical-converter 5.44.1-beta.0 β†’ 5.45.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,106 +1,11 @@
1
1
  # @webiny/lexical-converter
2
2
 
3
- [![](https://img.shields.io/npm/dw/@webiny/lexical-converter.svg)](https://www.npmjs.com/package/@webiny/llexical-lexical-converter)
4
- [![](https://img.shields.io/npm/v/@webiny/lexical-converter.svg)](https://www.npmjs.com/package/@webiny/lexical-converter)
5
- [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
6
- [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
3
+ > [!NOTE]
4
+ > This package is part of the [Webiny](https://www.webiny.com) monorepo.
5
+ > It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
7
6
 
8
- ## About
7
+ πŸ“˜ **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
9
8
 
10
- This package provides features that will enable you to parse your HTML pages into Lexical editor state object.
9
+ ---
11
10
 
12
- Further, this lexical state object can be imported into Webiny's apps like the Page builder and Headless CMS, trough the [Webiny's graphql API](https://www.webiny.com/docs/headless-cms/basics/graphql-api).
13
-
14
- > Webiny use the Lexical editor as primary rich text editor across the platform.
15
-
16
- Note: This module is built to be used in the `node.js` environment.
17
-
18
- ## Usage
19
-
20
- To parse the HTML to lexical editor state object, you need to import `createHtmlToLexicalParser` factory function,
21
- to create the parser function (with default or custom configuration) and provide the HTML content as parameter.
22
- Parser will return Lexical editor state object.
23
-
24
- > The parser uses the default configuration with the Webiny's Lexical nodes. DOM elements like headings and
25
- > paragraph, for example, will be converted to our custom Webiny Lexical nodes.
26
-
27
- ```tsx
28
- import { createHtmlToLexicalParser } from "@webiny/lexical-converter";
29
-
30
- const htmlString = "<p>My paragraph</p>";
31
-
32
- // Create a parser function.
33
- const myParser = createHtmlToLexicalParser();
34
-
35
- // Parse the HTML string to Lexical editor state object.
36
- const lexicalEditorState = myParser(htmlString);
37
- ```
38
-
39
- Here is the result in JSON format. This object structure is a valid Lexical editor state.
40
-
41
- ```json
42
- {
43
- "root": {
44
- "children": [
45
- {
46
- "children": [
47
- {
48
- "detail": 0,
49
- "format": 0,
50
- "mode": "normal",
51
- "style": "",
52
- "text": "Space",
53
- "type": "text",
54
- "version": 1
55
- }
56
- ],
57
- "direction": null,
58
- "format": "",
59
- "indent": 0,
60
- "styles": [],
61
- "type": "paragraph-element",
62
- "version": 1
63
- }
64
- ],
65
- "direction": null,
66
- "format": "",
67
- "indent": 0,
68
- "type": "root",
69
- "version": 1
70
- }
71
- }
72
- ```
73
-
74
- ## Configuration
75
-
76
- To configure the parser, you can pass an optional configuration object to the parser factory.
77
-
78
- ```ts
79
- import { createHtmlToLexicalParser } from "@webiny/lexical-converter";
80
- import { myCustomTheme } from "./theme/myCustomTheme";
81
- import { MyCustomLexicalNode } from "./lexical/nodes/MyCustomLexicalNode";
82
-
83
- const addCustomThemeStyleToHeadings = (node: LexicalNode): LexicalNode => {
84
- if (node.getType() === "heading-element") {
85
- return (node as HeadingNode).setThemeStyles([{ styleId: "my-default-id", type: "typography" }]);
86
- }
87
- return node;
88
- };
89
-
90
- // Create your parser with custom configuration
91
- const myParser = createHtmlToLexicalParser({
92
- // Lexical editor configuration
93
- editorConfig: {
94
- // Add custom nodes for parsing
95
- nodes: [MyCustomLexicalNode],
96
- // Add you custom theme
97
- theme: myCustomTheme
98
- },
99
- nodeMapper: addCustomThemeStyleToHeadings,
100
- normalizeTextNodes: false // Default: true
101
- });
102
-
103
- const lexicalEditorState = myParser(htmlString);
104
- ```
105
-
106
- To learn more about how to create custom Lexical nodes, please visit [Lexical's documentation web page](https://lexical.dev/docs/intro).
11
+ _This README file is automatically generated during the publish process._
@@ -1,4 +1,4 @@
1
- import { ParserConfigurationOptions } from "./types";
1
+ import type { ParserConfigurationOptions } from "./types.js";
2
2
  /**
3
3
  * Parse html string to lexical JSON object.
4
4
  */
@@ -1,35 +1,29 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.createHtmlToLexicalParser = void 0;
7
- var _headless = require("@lexical/headless");
8
- var _html = require("@lexical/html");
9
- var _lexical = require("lexical");
10
- var _lexicalNodes = require("@webiny/lexical-nodes");
1
+ import { createHeadlessEditor } from "@lexical/headless";
2
+ import { $generateNodesFromDOM } from "@lexical/html";
3
+ import { $getRoot, $getSelection } from "lexical";
4
+ import { allNodes } from "@webiny/lexical-nodes";
11
5
  const passthroughMapper = node => node;
12
6
 
13
7
  /**
14
8
  * Parse html string to lexical JSON object.
15
9
  */
16
- const createHtmlToLexicalParser = (config = {}) => {
10
+ export const createHtmlToLexicalParser = (config = {}) => {
17
11
  return domDocument => {
18
12
  const customNodeMapper = config.nodeMapper ?? passthroughMapper;
19
- const editor = (0, _headless.createHeadlessEditor)({
13
+ const editor = createHeadlessEditor({
20
14
  ...config.editorConfig,
21
- nodes: [..._lexicalNodes.allNodes, ...(config.editorConfig?.nodes || [])]
15
+ nodes: [...allNodes, ...(config.editorConfig?.nodes || [])]
22
16
  });
23
17
  let parsingError;
24
18
  editor.update(() => {
25
19
  // Convert to lexical node objects that can be stored in db.
26
- const lexicalNodes = (0, _html.$generateNodesFromDOM)(editor, domDocument).map(customNodeMapper);
20
+ const lexicalNodes = $generateNodesFromDOM(editor, domDocument).map(customNodeMapper);
27
21
 
28
22
  // Select the root
29
- (0, _lexical.$getRoot)().select();
23
+ $getRoot().select();
30
24
 
31
25
  // Insert the nodes at a selection.
32
- const selection = (0, _lexical.$getSelection)();
26
+ const selection = $getSelection();
33
27
  if (selection) {
34
28
  try {
35
29
  selection.insertNodes(lexicalNodes);
@@ -50,6 +44,5 @@ const createHtmlToLexicalParser = (config = {}) => {
50
44
  return editor.getEditorState().toJSON();
51
45
  };
52
46
  };
53
- exports.createHtmlToLexicalParser = createHtmlToLexicalParser;
54
47
 
55
48
  //# sourceMappingURL=createHtmlToLexicalParser.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_headless","require","_html","_lexical","_lexicalNodes","passthroughMapper","node","createHtmlToLexicalParser","config","domDocument","customNodeMapper","nodeMapper","editor","createHeadlessEditor","editorConfig","nodes","allNodes","parsingError","update","lexicalNodes","$generateNodesFromDOM","map","$getRoot","select","selection","$getSelection","insertNodes","err","discrete","getEditorState","toJSON","exports"],"sources":["createHtmlToLexicalParser.ts"],"sourcesContent":["import { createHeadlessEditor } from \"@lexical/headless\";\nimport { $generateNodesFromDOM } from \"@lexical/html\";\nimport { $getRoot, $getSelection } from \"lexical\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { NodeMapper, ParserConfigurationOptions } from \"~/types\";\n\nconst passthroughMapper: NodeMapper = node => node;\n\n/**\n * Parse html string to lexical JSON object.\n */\nexport const createHtmlToLexicalParser = (config: ParserConfigurationOptions = {}) => {\n return (domDocument: Document): Record<string, any> | null => {\n const customNodeMapper: NodeMapper = config.nodeMapper ?? passthroughMapper;\n\n const editor = createHeadlessEditor({\n ...config.editorConfig,\n nodes: [...allNodes, ...(config.editorConfig?.nodes || [])]\n });\n\n let parsingError;\n\n editor.update(\n () => {\n // Convert to lexical node objects that can be stored in db.\n const lexicalNodes = $generateNodesFromDOM(editor, domDocument).map(\n customNodeMapper\n );\n\n // Select the root\n $getRoot().select();\n\n // Insert the nodes at a selection.\n const selection = $getSelection();\n if (selection) {\n try {\n selection.insertNodes(lexicalNodes);\n } catch (err) {\n parsingError = err;\n }\n }\n },\n /**\n * Prevents this update from being batched, forcing it to run synchronously.\n */\n { discrete: true }\n );\n\n if (parsingError) {\n throw parsingError;\n }\n\n return editor.getEditorState().toJSON();\n };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAGA,MAAMI,iBAA6B,GAAGC,IAAI,IAAIA,IAAI;;AAElD;AACA;AACA;AACO,MAAMC,yBAAyB,GAAGA,CAACC,MAAkC,GAAG,CAAC,CAAC,KAAK;EAClF,OAAQC,WAAqB,IAAiC;IAC1D,MAAMC,gBAA4B,GAAGF,MAAM,CAACG,UAAU,IAAIN,iBAAiB;IAE3E,MAAMO,MAAM,GAAG,IAAAC,8BAAoB,EAAC;MAChC,GAAGL,MAAM,CAACM,YAAY;MACtBC,KAAK,EAAE,CAAC,GAAGC,sBAAQ,EAAE,IAAIR,MAAM,CAACM,YAAY,EAAEC,KAAK,IAAI,EAAE,CAAC;IAC9D,CAAC,CAAC;IAEF,IAAIE,YAAY;IAEhBL,MAAM,CAACM,MAAM,CACT,MAAM;MACF;MACA,MAAMC,YAAY,GAAG,IAAAC,2BAAqB,EAACR,MAAM,EAAEH,WAAW,CAAC,CAACY,GAAG,CAC/DX,gBACJ,CAAC;;MAED;MACA,IAAAY,iBAAQ,EAAC,CAAC,CAACC,MAAM,CAAC,CAAC;;MAEnB;MACA,MAAMC,SAAS,GAAG,IAAAC,sBAAa,EAAC,CAAC;MACjC,IAAID,SAAS,EAAE;QACX,IAAI;UACAA,SAAS,CAACE,WAAW,CAACP,YAAY,CAAC;QACvC,CAAC,CAAC,OAAOQ,GAAG,EAAE;UACVV,YAAY,GAAGU,GAAG;QACtB;MACJ;IACJ,CAAC;IACD;AACZ;AACA;IACY;MAAEC,QAAQ,EAAE;IAAK,CACrB,CAAC;IAED,IAAIX,YAAY,EAAE;MACd,MAAMA,YAAY;IACtB;IAEA,OAAOL,MAAM,CAACiB,cAAc,CAAC,CAAC,CAACC,MAAM,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC;AAACC,OAAA,CAAAxB,yBAAA,GAAAA,yBAAA","ignoreList":[]}
1
+ {"version":3,"names":["createHeadlessEditor","$generateNodesFromDOM","$getRoot","$getSelection","allNodes","passthroughMapper","node","createHtmlToLexicalParser","config","domDocument","customNodeMapper","nodeMapper","editor","editorConfig","nodes","parsingError","update","lexicalNodes","map","select","selection","insertNodes","err","discrete","getEditorState","toJSON"],"sources":["createHtmlToLexicalParser.ts"],"sourcesContent":["import { createHeadlessEditor } from \"@lexical/headless\";\nimport { $generateNodesFromDOM } from \"@lexical/html\";\nimport { $getRoot, $getSelection } from \"lexical\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { NodeMapper, ParserConfigurationOptions } from \"~/types.js\";\n\nconst passthroughMapper: NodeMapper = node => node;\n\n/**\n * Parse html string to lexical JSON object.\n */\nexport const createHtmlToLexicalParser = (config: ParserConfigurationOptions = {}) => {\n return (domDocument: Document): Record<string, any> | null => {\n const customNodeMapper: NodeMapper = config.nodeMapper ?? passthroughMapper;\n\n const editor = createHeadlessEditor({\n ...config.editorConfig,\n nodes: [...allNodes, ...(config.editorConfig?.nodes || [])]\n });\n\n let parsingError;\n\n editor.update(\n () => {\n // Convert to lexical node objects that can be stored in db.\n const lexicalNodes = $generateNodesFromDOM(editor, domDocument).map(\n customNodeMapper\n );\n\n // Select the root\n $getRoot().select();\n\n // Insert the nodes at a selection.\n const selection = $getSelection();\n if (selection) {\n try {\n selection.insertNodes(lexicalNodes);\n } catch (err) {\n parsingError = err;\n }\n }\n },\n /**\n * Prevents this update from being batched, forcing it to run synchronously.\n */\n { discrete: true }\n );\n\n if (parsingError) {\n throw parsingError;\n }\n\n return editor.getEditorState().toJSON();\n };\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,mBAAmB;AACxD,SAASC,qBAAqB,QAAQ,eAAe;AACrD,SAASC,QAAQ,EAAEC,aAAa,QAAQ,SAAS;AACjD,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,MAAMC,iBAA6B,GAAGC,IAAI,IAAIA,IAAI;;AAElD;AACA;AACA;AACA,OAAO,MAAMC,yBAAyB,GAAGA,CAACC,MAAkC,GAAG,CAAC,CAAC,KAAK;EAClF,OAAQC,WAAqB,IAAiC;IAC1D,MAAMC,gBAA4B,GAAGF,MAAM,CAACG,UAAU,IAAIN,iBAAiB;IAE3E,MAAMO,MAAM,GAAGZ,oBAAoB,CAAC;MAChC,GAAGQ,MAAM,CAACK,YAAY;MACtBC,KAAK,EAAE,CAAC,GAAGV,QAAQ,EAAE,IAAII,MAAM,CAACK,YAAY,EAAEC,KAAK,IAAI,EAAE,CAAC;IAC9D,CAAC,CAAC;IAEF,IAAIC,YAAY;IAEhBH,MAAM,CAACI,MAAM,CACT,MAAM;MACF;MACA,MAAMC,YAAY,GAAGhB,qBAAqB,CAACW,MAAM,EAAEH,WAAW,CAAC,CAACS,GAAG,CAC/DR,gBACJ,CAAC;;MAED;MACAR,QAAQ,CAAC,CAAC,CAACiB,MAAM,CAAC,CAAC;;MAEnB;MACA,MAAMC,SAAS,GAAGjB,aAAa,CAAC,CAAC;MACjC,IAAIiB,SAAS,EAAE;QACX,IAAI;UACAA,SAAS,CAACC,WAAW,CAACJ,YAAY,CAAC;QACvC,CAAC,CAAC,OAAOK,GAAG,EAAE;UACVP,YAAY,GAAGO,GAAG;QACtB;MACJ;IACJ,CAAC;IACD;AACZ;AACA;IACY;MAAEC,QAAQ,EAAE;IAAK,CACrB,CAAC;IAED,IAAIR,YAAY,EAAE;MACd,MAAMA,YAAY;IACtB;IAEA,OAAOH,MAAM,CAACY,cAAc,CAAC,CAAC,CAACC,MAAM,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- import { CreateEditorArgs, SerializedEditorState, LexicalNode } from "lexical";
1
+ import type { CreateEditorArgs, SerializedEditorState, LexicalNode } from "lexical";
2
2
  interface LexicalStateTransformerConfig {
3
3
  editorConfig?: Pick<CreateEditorArgs, "nodes" | "theme">;
4
4
  }
@@ -1,61 +1,56 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.createLexicalStateTransformer = void 0;
7
- var _lexical = require("lexical");
8
- var _html = require("@lexical/html");
9
- var _headless = require("@lexical/headless");
10
- var _lexicalNodes = require("@webiny/lexical-nodes");
1
+ import { $getRoot, $createNodeSelection, $isElementNode } from "lexical";
2
+ import { $generateHtmlFromNodes } from "@lexical/html";
3
+ import { createHeadlessEditor } from "@lexical/headless";
4
+ import { allNodes, prepareLexicalState } from "@webiny/lexical-nodes";
5
+ import { postProcessHtml } from "./postProcessHtml.js";
11
6
  class LexicalStateTransformer {
12
7
  constructor(config = {}) {
13
- this.editor = (0, _headless.createHeadlessEditor)({
8
+ this.editor = createHeadlessEditor({
14
9
  ...config.editorConfig,
15
- nodes: [..._lexicalNodes.allNodes, ...(config.editorConfig?.nodes || [])]
10
+ nodes: [...allNodes, ...(config.editorConfig?.nodes || [])]
16
11
  });
17
12
  }
18
13
  flatten(state) {
19
- const editorState = this.editor.parseEditorState(state);
14
+ const editorState = this.editor.parseEditorState(prepareLexicalState(state));
20
15
  this.editor.setEditorState(editorState);
21
16
  let flattenedNodes = [];
22
17
  this.editor.update(() => {
23
- const children = (0, _lexical.$getRoot)().getChildren();
18
+ const children = $getRoot().getChildren();
24
19
  flattenedNodes = children.map(childNode => {
25
- const selection = (0, _lexical.$createNodeSelection)();
20
+ const selection = $createNodeSelection();
26
21
  selection.add(childNode.getKey());
27
22
  this.getNodeDescendants(childNode).forEach(node => {
28
23
  selection.add(node.getKey());
29
24
  });
30
- const html = (0, _html.$generateHtmlFromNodes)(this.editor, selection);
25
+ const html = $generateHtmlFromNodes(this.editor, selection);
31
26
  return {
32
27
  node: childNode,
33
- html
28
+ html: postProcessHtml(html)
34
29
  };
35
30
  });
36
31
  });
37
32
  return flattenedNodes;
38
33
  }
39
34
  toHtml(state) {
40
- const editorState = this.editor.parseEditorState(state);
35
+ const preparedState = prepareLexicalState(state);
36
+ const editorState = this.editor.parseEditorState(preparedState);
41
37
  this.editor.setEditorState(editorState);
42
38
  let html = "";
43
39
  this.editor.update(() => {
44
- html = (0, _html.$generateHtmlFromNodes)(this.editor);
40
+ html = $generateHtmlFromNodes(this.editor);
45
41
  });
46
- return html;
42
+ return postProcessHtml(html);
47
43
  }
48
44
  getNodeDescendants(node) {
49
- if (!(0, _lexical.$isElementNode)(node)) {
45
+ if (!$isElementNode(node)) {
50
46
  return [];
51
47
  }
52
48
  const children = node.getChildren();
53
49
  return [...children, ...children.map(child => this.getNodeDescendants(child)).flat()];
54
50
  }
55
51
  }
56
- const createLexicalStateTransformer = config => {
52
+ export const createLexicalStateTransformer = config => {
57
53
  return new LexicalStateTransformer(config);
58
54
  };
59
- exports.createLexicalStateTransformer = createLexicalStateTransformer;
60
55
 
61
56
  //# sourceMappingURL=createLexicalStateTransformer.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["_lexical","require","_html","_headless","_lexicalNodes","LexicalStateTransformer","constructor","config","editor","createHeadlessEditor","editorConfig","nodes","allNodes","flatten","state","editorState","parseEditorState","setEditorState","flattenedNodes","update","children","$getRoot","getChildren","map","childNode","selection","$createNodeSelection","add","getKey","getNodeDescendants","forEach","node","html","$generateHtmlFromNodes","toHtml","$isElementNode","child","flat","createLexicalStateTransformer","exports"],"sources":["createLexicalStateTransformer.ts"],"sourcesContent":["import {\n CreateEditorArgs,\n LexicalEditor,\n SerializedEditorState,\n $getRoot,\n $createNodeSelection,\n $isElementNode,\n LexicalNode\n} from \"lexical\";\nimport { $generateHtmlFromNodes } from \"@lexical/html\";\nimport { createHeadlessEditor } from \"@lexical/headless\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\n\ninterface LexicalStateTransformerConfig {\n editorConfig?: Pick<CreateEditorArgs, \"nodes\" | \"theme\">;\n}\n\nexport type FlatStateWithHTML = Array<{ node: LexicalNode; html: string }>;\n\nclass LexicalStateTransformer {\n private readonly editor: LexicalEditor;\n\n constructor(config: LexicalStateTransformerConfig = {}) {\n this.editor = createHeadlessEditor({\n ...config.editorConfig,\n nodes: [...allNodes, ...(config.editorConfig?.nodes || [])]\n });\n }\n\n public flatten(state: string | SerializedEditorState) {\n const editorState = this.editor.parseEditorState(state);\n this.editor.setEditorState(editorState);\n\n let flattenedNodes: FlatStateWithHTML = [];\n\n this.editor.update(() => {\n const children = $getRoot().getChildren();\n\n flattenedNodes = children.map(childNode => {\n const selection = $createNodeSelection();\n selection.add(childNode.getKey());\n\n this.getNodeDescendants(childNode).forEach(node => {\n selection.add(node.getKey());\n });\n\n const html = $generateHtmlFromNodes(this.editor, selection);\n\n return {\n node: childNode,\n html\n };\n });\n });\n\n return flattenedNodes;\n }\n\n public toHtml(state: string | SerializedEditorState) {\n const editorState = this.editor.parseEditorState(state);\n this.editor.setEditorState(editorState);\n\n let html = \"\";\n\n this.editor.update(() => {\n html = $generateHtmlFromNodes(this.editor);\n });\n\n return html;\n }\n\n private getNodeDescendants(node: LexicalNode): LexicalNode[] {\n if (!$isElementNode(node)) {\n return [];\n }\n const children = node.getChildren();\n return [...children, ...children.map(child => this.getNodeDescendants(child)).flat()];\n }\n}\n\nexport const createLexicalStateTransformer = (config?: LexicalStateTransformerConfig) => {\n return new LexicalStateTransformer(config);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AASA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAQA,MAAMI,uBAAuB,CAAC;EAG1BC,WAAWA,CAACC,MAAqC,GAAG,CAAC,CAAC,EAAE;IACpD,IAAI,CAACC,MAAM,GAAG,IAAAC,8BAAoB,EAAC;MAC/B,GAAGF,MAAM,CAACG,YAAY;MACtBC,KAAK,EAAE,CAAC,GAAGC,sBAAQ,EAAE,IAAIL,MAAM,CAACG,YAAY,EAAEC,KAAK,IAAI,EAAE,CAAC;IAC9D,CAAC,CAAC;EACN;EAEOE,OAAOA,CAACC,KAAqC,EAAE;IAClD,MAAMC,WAAW,GAAG,IAAI,CAACP,MAAM,CAACQ,gBAAgB,CAACF,KAAK,CAAC;IACvD,IAAI,CAACN,MAAM,CAACS,cAAc,CAACF,WAAW,CAAC;IAEvC,IAAIG,cAAiC,GAAG,EAAE;IAE1C,IAAI,CAACV,MAAM,CAACW,MAAM,CAAC,MAAM;MACrB,MAAMC,QAAQ,GAAG,IAAAC,iBAAQ,EAAC,CAAC,CAACC,WAAW,CAAC,CAAC;MAEzCJ,cAAc,GAAGE,QAAQ,CAACG,GAAG,CAACC,SAAS,IAAI;QACvC,MAAMC,SAAS,GAAG,IAAAC,6BAAoB,EAAC,CAAC;QACxCD,SAAS,CAACE,GAAG,CAACH,SAAS,CAACI,MAAM,CAAC,CAAC,CAAC;QAEjC,IAAI,CAACC,kBAAkB,CAACL,SAAS,CAAC,CAACM,OAAO,CAACC,IAAI,IAAI;UAC/CN,SAAS,CAACE,GAAG,CAACI,IAAI,CAACH,MAAM,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,MAAMI,IAAI,GAAG,IAAAC,4BAAsB,EAAC,IAAI,CAACzB,MAAM,EAAEiB,SAAS,CAAC;QAE3D,OAAO;UACHM,IAAI,EAAEP,SAAS;UACfQ;QACJ,CAAC;MACL,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAOd,cAAc;EACzB;EAEOgB,MAAMA,CAACpB,KAAqC,EAAE;IACjD,MAAMC,WAAW,GAAG,IAAI,CAACP,MAAM,CAACQ,gBAAgB,CAACF,KAAK,CAAC;IACvD,IAAI,CAACN,MAAM,CAACS,cAAc,CAACF,WAAW,CAAC;IAEvC,IAAIiB,IAAI,GAAG,EAAE;IAEb,IAAI,CAACxB,MAAM,CAACW,MAAM,CAAC,MAAM;MACrBa,IAAI,GAAG,IAAAC,4BAAsB,EAAC,IAAI,CAACzB,MAAM,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAOwB,IAAI;EACf;EAEQH,kBAAkBA,CAACE,IAAiB,EAAiB;IACzD,IAAI,CAAC,IAAAI,uBAAc,EAACJ,IAAI,CAAC,EAAE;MACvB,OAAO,EAAE;IACb;IACA,MAAMX,QAAQ,GAAGW,IAAI,CAACT,WAAW,CAAC,CAAC;IACnC,OAAO,CAAC,GAAGF,QAAQ,EAAE,GAAGA,QAAQ,CAACG,GAAG,CAACa,KAAK,IAAI,IAAI,CAACP,kBAAkB,CAACO,KAAK,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC;EACzF;AACJ;AAEO,MAAMC,6BAA6B,GAAI/B,MAAsC,IAAK;EACrF,OAAO,IAAIF,uBAAuB,CAACE,MAAM,CAAC;AAC9C,CAAC;AAACgC,OAAA,CAAAD,6BAAA,GAAAA,6BAAA","ignoreList":[]}
1
+ {"version":3,"names":["$getRoot","$createNodeSelection","$isElementNode","$generateHtmlFromNodes","createHeadlessEditor","allNodes","prepareLexicalState","postProcessHtml","LexicalStateTransformer","constructor","config","editor","editorConfig","nodes","flatten","state","editorState","parseEditorState","setEditorState","flattenedNodes","update","children","getChildren","map","childNode","selection","add","getKey","getNodeDescendants","forEach","node","html","toHtml","preparedState","child","flat","createLexicalStateTransformer"],"sources":["createLexicalStateTransformer.ts"],"sourcesContent":["import type { CreateEditorArgs, LexicalEditor, SerializedEditorState, LexicalNode } from \"lexical\";\nimport { $getRoot, $createNodeSelection, $isElementNode } from \"lexical\";\nimport { $generateHtmlFromNodes } from \"@lexical/html\";\nimport { createHeadlessEditor } from \"@lexical/headless\";\nimport { allNodes, prepareLexicalState } from \"@webiny/lexical-nodes\";\nimport { postProcessHtml } from \"./postProcessHtml.js\";\n\ninterface LexicalStateTransformerConfig {\n editorConfig?: Pick<CreateEditorArgs, \"nodes\" | \"theme\">;\n}\n\nexport type FlatStateWithHTML = Array<{ node: LexicalNode; html: string }>;\n\nclass LexicalStateTransformer {\n private readonly editor: LexicalEditor;\n\n constructor(config: LexicalStateTransformerConfig = {}) {\n this.editor = createHeadlessEditor({\n ...config.editorConfig,\n nodes: [...allNodes, ...(config.editorConfig?.nodes || [])]\n });\n }\n\n public flatten(state: string | SerializedEditorState) {\n const editorState = this.editor.parseEditorState(prepareLexicalState(state));\n this.editor.setEditorState(editorState);\n\n let flattenedNodes: FlatStateWithHTML = [];\n\n this.editor.update(() => {\n const children = $getRoot().getChildren();\n\n flattenedNodes = children.map(childNode => {\n const selection = $createNodeSelection();\n selection.add(childNode.getKey());\n\n this.getNodeDescendants(childNode).forEach(node => {\n selection.add(node.getKey());\n });\n\n const html = $generateHtmlFromNodes(this.editor, selection);\n\n return {\n node: childNode,\n html: postProcessHtml(html)\n };\n });\n });\n\n return flattenedNodes;\n }\n\n public toHtml(state: string | SerializedEditorState) {\n const preparedState = prepareLexicalState(state);\n const editorState = this.editor.parseEditorState(preparedState);\n this.editor.setEditorState(editorState);\n\n let html = \"\";\n\n this.editor.update(() => {\n html = $generateHtmlFromNodes(this.editor);\n });\n\n return postProcessHtml(html);\n }\n\n private getNodeDescendants(node: LexicalNode): LexicalNode[] {\n if (!$isElementNode(node)) {\n return [];\n }\n const children = node.getChildren();\n return [...children, ...children.map(child => this.getNodeDescendants(child)).flat()];\n }\n}\n\nexport const createLexicalStateTransformer = (config?: LexicalStateTransformerConfig) => {\n return new LexicalStateTransformer(config);\n};\n"],"mappings":"AACA,SAASA,QAAQ,EAAEC,oBAAoB,EAAEC,cAAc,QAAQ,SAAS;AACxE,SAASC,sBAAsB,QAAQ,eAAe;AACtD,SAASC,oBAAoB,QAAQ,mBAAmB;AACxD,SAASC,QAAQ,EAAEC,mBAAmB,QAAQ,uBAAuB;AACrE,SAASC,eAAe;AAQxB,MAAMC,uBAAuB,CAAC;EAG1BC,WAAWA,CAACC,MAAqC,GAAG,CAAC,CAAC,EAAE;IACpD,IAAI,CAACC,MAAM,GAAGP,oBAAoB,CAAC;MAC/B,GAAGM,MAAM,CAACE,YAAY;MACtBC,KAAK,EAAE,CAAC,GAAGR,QAAQ,EAAE,IAAIK,MAAM,CAACE,YAAY,EAAEC,KAAK,IAAI,EAAE,CAAC;IAC9D,CAAC,CAAC;EACN;EAEOC,OAAOA,CAACC,KAAqC,EAAE;IAClD,MAAMC,WAAW,GAAG,IAAI,CAACL,MAAM,CAACM,gBAAgB,CAACX,mBAAmB,CAACS,KAAK,CAAC,CAAC;IAC5E,IAAI,CAACJ,MAAM,CAACO,cAAc,CAACF,WAAW,CAAC;IAEvC,IAAIG,cAAiC,GAAG,EAAE;IAE1C,IAAI,CAACR,MAAM,CAACS,MAAM,CAAC,MAAM;MACrB,MAAMC,QAAQ,GAAGrB,QAAQ,CAAC,CAAC,CAACsB,WAAW,CAAC,CAAC;MAEzCH,cAAc,GAAGE,QAAQ,CAACE,GAAG,CAACC,SAAS,IAAI;QACvC,MAAMC,SAAS,GAAGxB,oBAAoB,CAAC,CAAC;QACxCwB,SAAS,CAACC,GAAG,CAACF,SAAS,CAACG,MAAM,CAAC,CAAC,CAAC;QAEjC,IAAI,CAACC,kBAAkB,CAACJ,SAAS,CAAC,CAACK,OAAO,CAACC,IAAI,IAAI;UAC/CL,SAAS,CAACC,GAAG,CAACI,IAAI,CAACH,MAAM,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,MAAMI,IAAI,GAAG5B,sBAAsB,CAAC,IAAI,CAACQ,MAAM,EAAEc,SAAS,CAAC;QAE3D,OAAO;UACHK,IAAI,EAAEN,SAAS;UACfO,IAAI,EAAExB,eAAe,CAACwB,IAAI;QAC9B,CAAC;MACL,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAOZ,cAAc;EACzB;EAEOa,MAAMA,CAACjB,KAAqC,EAAE;IACjD,MAAMkB,aAAa,GAAG3B,mBAAmB,CAACS,KAAK,CAAC;IAChD,MAAMC,WAAW,GAAG,IAAI,CAACL,MAAM,CAACM,gBAAgB,CAACgB,aAAa,CAAC;IAC/D,IAAI,CAACtB,MAAM,CAACO,cAAc,CAACF,WAAW,CAAC;IAEvC,IAAIe,IAAI,GAAG,EAAE;IAEb,IAAI,CAACpB,MAAM,CAACS,MAAM,CAAC,MAAM;MACrBW,IAAI,GAAG5B,sBAAsB,CAAC,IAAI,CAACQ,MAAM,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAOJ,eAAe,CAACwB,IAAI,CAAC;EAChC;EAEQH,kBAAkBA,CAACE,IAAiB,EAAiB;IACzD,IAAI,CAAC5B,cAAc,CAAC4B,IAAI,CAAC,EAAE;MACvB,OAAO,EAAE;IACb;IACA,MAAMT,QAAQ,GAAGS,IAAI,CAACR,WAAW,CAAC,CAAC;IACnC,OAAO,CAAC,GAAGD,QAAQ,EAAE,GAAGA,QAAQ,CAACE,GAAG,CAACW,KAAK,IAAI,IAAI,CAACN,kBAAkB,CAACM,KAAK,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAAC;EACzF;AACJ;AAEA,OAAO,MAAMC,6BAA6B,GAAI1B,MAAsC,IAAK;EACrF,OAAO,IAAIF,uBAAuB,CAACE,MAAM,CAAC;AAC9C,CAAC","ignoreList":[]}
package/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { SerializedEditorState } from "lexical";
2
- export * from "./createHtmlToLexicalParser";
3
- export * from "./createLexicalStateTransformer";
1
+ export type { SerializedEditorState } from "lexical";
2
+ export * from "./createHtmlToLexicalParser.js";
3
+ export * from "./createLexicalStateTransformer.js";
package/index.js CHANGED
@@ -1,41 +1,5 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _exportNames = {
7
- SerializedEditorState: true
8
- };
9
- Object.defineProperty(exports, "SerializedEditorState", {
10
- enumerable: true,
11
- get: function () {
12
- return _lexical.SerializedEditorState;
13
- }
14
- });
15
- var _lexical = require("lexical");
16
- var _createHtmlToLexicalParser = require("./createHtmlToLexicalParser");
17
- Object.keys(_createHtmlToLexicalParser).forEach(function (key) {
18
- if (key === "default" || key === "__esModule") return;
19
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
20
- if (key in exports && exports[key] === _createHtmlToLexicalParser[key]) return;
21
- Object.defineProperty(exports, key, {
22
- enumerable: true,
23
- get: function () {
24
- return _createHtmlToLexicalParser[key];
25
- }
26
- });
27
- });
28
- var _createLexicalStateTransformer = require("./createLexicalStateTransformer");
29
- Object.keys(_createLexicalStateTransformer).forEach(function (key) {
30
- if (key === "default" || key === "__esModule") return;
31
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
32
- if (key in exports && exports[key] === _createLexicalStateTransformer[key]) return;
33
- Object.defineProperty(exports, key, {
34
- enumerable: true,
35
- get: function () {
36
- return _createLexicalStateTransformer[key];
37
- }
38
- });
39
- });
1
+ export * from "./createHtmlToLexicalParser.js";
2
+ export * from "./createLexicalStateTransformer.js";
3
+ export {};
40
4
 
41
5
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_lexical","require","_createHtmlToLexicalParser","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_createLexicalStateTransformer"],"sources":["index.ts"],"sourcesContent":["export { SerializedEditorState } from \"lexical\";\nexport * from \"./createHtmlToLexicalParser\";\nexport * from \"./createLexicalStateTransformer\";\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,0BAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,0BAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,0BAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,0BAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,8BAAA,GAAAd,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAW,8BAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,8BAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,8BAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export type { SerializedEditorState } from \"lexical\";\nexport * from \"./createHtmlToLexicalParser.js\";\nexport * from \"./createLexicalStateTransformer.js\";\n"],"mappings":"AACA;AACA;AAAmD","ignoreList":[]}
package/package.json CHANGED
@@ -1,25 +1,22 @@
1
1
  {
2
2
  "name": "@webiny/lexical-converter",
3
- "version": "5.44.1-beta.0",
3
+ "version": "5.45.0-beta.0",
4
+ "type": "module",
4
5
  "dependencies": {
5
- "@lexical/headless": "0.23.1",
6
- "@lexical/html": "0.23.1",
7
- "@webiny/lexical-nodes": "5.44.1-beta.0",
8
- "lexical": "0.23.1"
6
+ "@lexical/headless": "0.40.0",
7
+ "@lexical/html": "0.40.0",
8
+ "@webiny/lexical-nodes": "5.45.0-beta.0",
9
+ "cheerio": "1.2.0",
10
+ "lexical": "0.40.0"
9
11
  },
10
12
  "devDependencies": {
11
- "@types/jsdom": "^21.1.6",
12
- "@webiny/project-utils": "5.44.1-beta.0",
13
- "jsdom": "25.0.1"
13
+ "@webiny/build-tools": "5.45.0-beta.0",
14
+ "jsdom": "25.0.1",
15
+ "vitest": "4.0.18"
14
16
  },
15
17
  "publishConfig": {
16
18
  "access": "public",
17
19
  "directory": "dist"
18
20
  },
19
- "scripts": {
20
- "build": "node ../cli/bin.js run build",
21
- "watch": "node ../cli/bin.js run watch"
22
- },
23
- "test": "jest --verbose --runInBand --detectOpenHandles --forceExit",
24
- "gitHead": "c80e6d88501ac84229f6577dee7b30163a906379"
21
+ "gitHead": "b85c33cfbe7c02c130445c918d913ef4b2c09cb2"
25
22
  }
@@ -0,0 +1 @@
1
+ export declare const postProcessHtml: (html: string) => string;
@@ -0,0 +1,12 @@
1
+ import { load } from "cheerio";
2
+ export const postProcessHtml = html => {
3
+ const $ = load(html);
4
+
5
+ // Replace <b> elements with their text content (unwrap them)
6
+ $("b").each((_, el) => {
7
+ $(el).replaceWith($(el).html() ?? "");
8
+ });
9
+ return $("body").html() ?? html;
10
+ };
11
+
12
+ //# sourceMappingURL=postProcessHtml.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["load","postProcessHtml","html","$","each","_","el","replaceWith"],"sources":["postProcessHtml.ts"],"sourcesContent":["import { load } from \"cheerio\";\n\nexport const postProcessHtml = (html: string) => {\n const $ = load(html);\n\n // Replace <b> elements with their text content (unwrap them)\n $(\"b\").each((_, el) => {\n $(el).replaceWith($(el).html() ?? \"\");\n });\n\n return $(\"body\").html() ?? html;\n};\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,OAAO,MAAMC,eAAe,GAAIC,IAAY,IAAK;EAC7C,MAAMC,CAAC,GAAGH,IAAI,CAACE,IAAI,CAAC;;EAEpB;EACAC,CAAC,CAAC,GAAG,CAAC,CAACC,IAAI,CAAC,CAACC,CAAC,EAAEC,EAAE,KAAK;IACnBH,CAAC,CAACG,EAAE,CAAC,CAACC,WAAW,CAACJ,CAAC,CAACG,EAAE,CAAC,CAACJ,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;EACzC,CAAC,CAAC;EAEF,OAAOC,CAAC,CAAC,MAAM,CAAC,CAACD,IAAI,CAAC,CAAC,IAAIA,IAAI;AACnC,CAAC","ignoreList":[]}
package/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CreateEditorArgs, LexicalNode } from "lexical";
1
+ import type { CreateEditorArgs, LexicalNode } from "lexical";
2
2
  export type NodeMapper = (node: LexicalNode) => LexicalNode;
3
3
  export interface ParserConfigurationOptions {
4
4
  editorConfig?: Pick<CreateEditorArgs, "nodes" | "theme">;
package/types.js CHANGED
@@ -1,7 +1,3 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
1
+ export {};
6
2
 
7
3
  //# sourceMappingURL=types.js.map
package/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import { CreateEditorArgs, LexicalNode } from \"lexical\";\n\nexport type NodeMapper = (node: LexicalNode) => LexicalNode;\n\nexport interface ParserConfigurationOptions {\n editorConfig?: Pick<CreateEditorArgs, \"nodes\" | \"theme\">;\n nodeMapper?: NodeMapper;\n}\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { CreateEditorArgs, LexicalNode } from \"lexical\";\n\nexport type NodeMapper = (node: LexicalNode) => LexicalNode;\n\nexport interface ParserConfigurationOptions {\n editorConfig?: Pick<CreateEditorArgs, \"nodes\" | \"theme\">;\n nodeMapper?: NodeMapper;\n}\n"],"mappings":"","ignoreList":[]}