@lexical/html 0.8.1 → 0.9.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/LexicalHtml.dev.js +40 -4
- package/package.json +3 -3
package/LexicalHtml.dev.js
CHANGED
|
@@ -10,68 +10,84 @@ var selection = require('@lexical/selection');
|
|
|
10
10
|
var lexical = require('lexical');
|
|
11
11
|
|
|
12
12
|
/** @module @lexical/html */
|
|
13
|
-
|
|
14
13
|
/**
|
|
15
14
|
* How you parse your html string to get a document is left up to you. In the browser you can use the native
|
|
16
15
|
* DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom
|
|
17
16
|
* or an equivilant library and pass in the document here.
|
|
18
17
|
*/
|
|
18
|
+
|
|
19
19
|
function $generateNodesFromDOM(editor, dom) {
|
|
20
20
|
let lexicalNodes = [];
|
|
21
21
|
const elements = dom.body ? Array.from(dom.body.childNodes) : [];
|
|
22
22
|
const elementsLength = elements.length;
|
|
23
|
+
|
|
23
24
|
for (let i = 0; i < elementsLength; i++) {
|
|
24
25
|
const element = elements[i];
|
|
26
|
+
|
|
25
27
|
if (!IGNORE_TAGS.has(element.nodeName)) {
|
|
26
28
|
const lexicalNode = $createNodesFromDOM(element, editor);
|
|
29
|
+
|
|
27
30
|
if (lexicalNode !== null) {
|
|
28
31
|
lexicalNodes = lexicalNodes.concat(lexicalNode);
|
|
29
32
|
}
|
|
30
33
|
}
|
|
31
34
|
}
|
|
35
|
+
|
|
32
36
|
return lexicalNodes;
|
|
33
37
|
}
|
|
34
38
|
function $generateHtmlFromNodes(editor, selection) {
|
|
35
39
|
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
|
36
40
|
throw new Error('To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.');
|
|
37
41
|
}
|
|
42
|
+
|
|
38
43
|
const container = document.createElement('div');
|
|
39
44
|
const root = lexical.$getRoot();
|
|
40
45
|
const topLevelChildren = root.getChildren();
|
|
46
|
+
|
|
41
47
|
for (let i = 0; i < topLevelChildren.length; i++) {
|
|
42
48
|
const topLevelNode = topLevelChildren[i];
|
|
43
49
|
$appendNodesToHTML(editor, topLevelNode, container, selection);
|
|
44
50
|
}
|
|
51
|
+
|
|
45
52
|
return container.innerHTML;
|
|
46
53
|
}
|
|
54
|
+
|
|
47
55
|
function $appendNodesToHTML(editor, currentNode, parentElement, selection$1 = null) {
|
|
48
56
|
let shouldInclude = selection$1 != null ? currentNode.isSelected() : true;
|
|
49
57
|
const shouldExclude = lexical.$isElementNode(currentNode) && currentNode.excludeFromCopy('html');
|
|
50
58
|
let target = currentNode;
|
|
59
|
+
|
|
51
60
|
if (selection$1 !== null) {
|
|
52
61
|
let clone = selection.$cloneWithProperties(currentNode);
|
|
53
62
|
clone = lexical.$isTextNode(clone) && selection$1 != null ? selection.$sliceSelectedTextNodeContent(selection$1, clone) : clone;
|
|
54
63
|
target = clone;
|
|
55
64
|
}
|
|
65
|
+
|
|
56
66
|
const children = lexical.$isElementNode(target) ? target.getChildren() : [];
|
|
57
67
|
const {
|
|
58
68
|
element,
|
|
59
69
|
after
|
|
60
70
|
} = target.exportDOM(editor);
|
|
71
|
+
|
|
61
72
|
if (!element) {
|
|
62
73
|
return false;
|
|
63
74
|
}
|
|
75
|
+
|
|
64
76
|
const fragment = new DocumentFragment();
|
|
77
|
+
|
|
65
78
|
for (let i = 0; i < children.length; i++) {
|
|
66
79
|
const childNode = children[i];
|
|
67
80
|
const shouldIncludeChild = $appendNodesToHTML(editor, childNode, fragment, selection$1);
|
|
81
|
+
|
|
68
82
|
if (!shouldInclude && lexical.$isElementNode(currentNode) && shouldIncludeChild && currentNode.extractWithChild(childNode, selection$1, 'html')) {
|
|
69
83
|
shouldInclude = true;
|
|
70
84
|
}
|
|
71
85
|
}
|
|
86
|
+
|
|
72
87
|
if (shouldInclude && !shouldExclude) {
|
|
73
88
|
element.append(fragment);
|
|
74
89
|
parentElement.append(element);
|
|
90
|
+
|
|
75
91
|
if (after) {
|
|
76
92
|
const newElement = after.call(target, element);
|
|
77
93
|
if (newElement) element.replaceWith(newElement);
|
|
@@ -79,63 +95,82 @@ function $appendNodesToHTML(editor, currentNode, parentElement, selection$1 = nu
|
|
|
79
95
|
} else {
|
|
80
96
|
parentElement.append(fragment);
|
|
81
97
|
}
|
|
98
|
+
|
|
82
99
|
return shouldInclude;
|
|
83
100
|
}
|
|
101
|
+
|
|
84
102
|
function getConversionFunction(domNode, editor) {
|
|
85
103
|
const {
|
|
86
104
|
nodeName
|
|
87
105
|
} = domNode;
|
|
106
|
+
|
|
88
107
|
const cachedConversions = editor._htmlConversions.get(nodeName.toLowerCase());
|
|
108
|
+
|
|
89
109
|
let currentConversion = null;
|
|
110
|
+
|
|
90
111
|
if (cachedConversions !== undefined) {
|
|
91
112
|
for (const cachedConversion of cachedConversions) {
|
|
92
113
|
const domConversion = cachedConversion(domNode);
|
|
114
|
+
|
|
93
115
|
if (domConversion !== null && (currentConversion === null || currentConversion.priority < domConversion.priority)) {
|
|
94
116
|
currentConversion = domConversion;
|
|
95
117
|
}
|
|
96
118
|
}
|
|
97
119
|
}
|
|
120
|
+
|
|
98
121
|
return currentConversion !== null ? currentConversion.conversion : null;
|
|
99
122
|
}
|
|
123
|
+
|
|
100
124
|
const IGNORE_TAGS = new Set(['STYLE']);
|
|
125
|
+
|
|
101
126
|
function $createNodesFromDOM(node, editor, forChildMap = new Map(), parentLexicalNode, preformatted = false) {
|
|
102
127
|
let lexicalNodes = [];
|
|
128
|
+
|
|
103
129
|
if (IGNORE_TAGS.has(node.nodeName)) {
|
|
104
130
|
return lexicalNodes;
|
|
105
131
|
}
|
|
132
|
+
|
|
106
133
|
let currentLexicalNode = null;
|
|
107
134
|
const transformFunction = getConversionFunction(node, editor);
|
|
108
135
|
const transformOutput = transformFunction ? transformFunction(node, undefined, preformatted) : null;
|
|
109
136
|
let postTransform = null;
|
|
137
|
+
|
|
110
138
|
if (transformOutput !== null) {
|
|
111
139
|
postTransform = transformOutput.after;
|
|
112
140
|
currentLexicalNode = transformOutput.node;
|
|
141
|
+
|
|
113
142
|
if (currentLexicalNode !== null) {
|
|
114
143
|
for (const [, forChildFunction] of forChildMap) {
|
|
115
144
|
currentLexicalNode = forChildFunction(currentLexicalNode, parentLexicalNode);
|
|
145
|
+
|
|
116
146
|
if (!currentLexicalNode) {
|
|
117
147
|
break;
|
|
118
148
|
}
|
|
119
149
|
}
|
|
150
|
+
|
|
120
151
|
if (currentLexicalNode) {
|
|
121
152
|
lexicalNodes.push(currentLexicalNode);
|
|
122
153
|
}
|
|
123
154
|
}
|
|
155
|
+
|
|
124
156
|
if (transformOutput.forChild != null) {
|
|
125
157
|
forChildMap.set(node.nodeName, transformOutput.forChild);
|
|
126
158
|
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
// If the DOM node doesn't have a transformer, we don't know what
|
|
159
|
+
} // If the DOM node doesn't have a transformer, we don't know what
|
|
130
160
|
// to do with it but we still need to process any childNodes.
|
|
161
|
+
|
|
162
|
+
|
|
131
163
|
const children = node.childNodes;
|
|
132
164
|
let childLexicalNodes = [];
|
|
165
|
+
|
|
133
166
|
for (let i = 0; i < children.length; i++) {
|
|
134
167
|
childLexicalNodes.push(...$createNodesFromDOM(children[i], editor, new Map(forChildMap), currentLexicalNode, preformatted || (transformOutput && transformOutput.preformatted) === true));
|
|
135
168
|
}
|
|
169
|
+
|
|
136
170
|
if (postTransform != null) {
|
|
137
171
|
childLexicalNodes = postTransform(childLexicalNodes);
|
|
138
172
|
}
|
|
173
|
+
|
|
139
174
|
if (currentLexicalNode == null) {
|
|
140
175
|
// If it hasn't been converted to a LexicalNode, we hoist its children
|
|
141
176
|
// up to the same level as it.
|
|
@@ -147,6 +182,7 @@ function $createNodesFromDOM(node, editor, forChildMap = new Map(), parentLexica
|
|
|
147
182
|
currentLexicalNode.append(...childLexicalNodes);
|
|
148
183
|
}
|
|
149
184
|
}
|
|
185
|
+
|
|
150
186
|
return lexicalNodes;
|
|
151
187
|
}
|
|
152
188
|
|
package/package.json
CHANGED
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
"html"
|
|
9
9
|
],
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"version": "0.
|
|
11
|
+
"version": "0.9.0",
|
|
12
12
|
"main": "LexicalHtml.js",
|
|
13
13
|
"peerDependencies": {
|
|
14
|
-
"lexical": "0.
|
|
14
|
+
"lexical": "0.9.0"
|
|
15
15
|
},
|
|
16
16
|
"repository": {
|
|
17
17
|
"type": "git",
|
|
@@ -19,6 +19,6 @@
|
|
|
19
19
|
"directory": "packages/lexical-html"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@lexical/selection": "0.
|
|
22
|
+
"@lexical/selection": "0.9.0"
|
|
23
23
|
}
|
|
24
24
|
}
|