@webiny/lexical-nodes 6.0.0-beta.0 → 6.0.0-rc.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.
Files changed (83) hide show
  1. package/FontColorNode.d.ts +24 -22
  2. package/FontColorNode.js +114 -103
  3. package/FontColorNode.js.map +1 -1
  4. package/HeadingNode.d.ts +30 -20
  5. package/HeadingNode.js +185 -176
  6. package/HeadingNode.js.map +1 -1
  7. package/ImageNode.d.ts +2 -12
  8. package/ImageNode.js +119 -193
  9. package/ImageNode.js.map +1 -1
  10. package/LinkNode.d.ts +6 -6
  11. package/LinkNode.js +249 -347
  12. package/LinkNode.js.map +1 -1
  13. package/ListItemNode.d.ts +6 -5
  14. package/ListItemNode.js +275 -352
  15. package/ListItemNode.js.map +1 -1
  16. package/ListNode.d.ts +32 -19
  17. package/ListNode.js +170 -210
  18. package/ListNode.js.map +1 -1
  19. package/ParagraphNode.d.ts +30 -20
  20. package/ParagraphNode.js +144 -201
  21. package/ParagraphNode.js.map +1 -1
  22. package/QuoteNode.d.ts +27 -20
  23. package/QuoteNode.js +102 -208
  24. package/QuoteNode.js.map +1 -1
  25. package/README.md +9 -4
  26. package/components/ImageNode/ImageComponent.d.ts +2 -7
  27. package/components/ImageNode/ImageComponent.js +72 -166
  28. package/components/ImageNode/ImageComponent.js.map +1 -1
  29. package/components/ImageNode/ImageResizer.d.ts +1 -8
  30. package/components/ImageNode/ImageResizer.js +80 -95
  31. package/components/ImageNode/ImageResizer.js.map +1 -1
  32. package/generateInitialLexicalValue.d.ts +4 -0
  33. package/generateInitialLexicalValue.js +27 -0
  34. package/generateInitialLexicalValue.js.map +1 -0
  35. package/index.d.ts +19 -23
  36. package/index.js +50 -233
  37. package/index.js.map +1 -1
  38. package/package.json +22 -19
  39. package/prepareLexicalState.d.ts +2 -0
  40. package/prepareLexicalState.js +53 -0
  41. package/prepareLexicalState.js.map +1 -0
  42. package/types.d.ts +5 -9
  43. package/types.js +1 -5
  44. package/types.js.map +1 -1
  45. package/utils/clearNodeFormating.d.ts +2 -2
  46. package/utils/clearNodeFormating.js +12 -18
  47. package/utils/clearNodeFormating.js.map +1 -1
  48. package/utils/formatList.d.ts +4 -4
  49. package/utils/formatList.js +171 -208
  50. package/utils/formatList.js.map +1 -1
  51. package/utils/formatToHeading.d.ts +2 -2
  52. package/utils/formatToHeading.js +8 -15
  53. package/utils/formatToHeading.js.map +1 -1
  54. package/utils/formatToParagraph.d.ts +1 -1
  55. package/utils/formatToParagraph.js +8 -16
  56. package/utils/formatToParagraph.js.map +1 -1
  57. package/utils/formatToQuote.d.ts +1 -1
  58. package/utils/formatToQuote.js +10 -17
  59. package/utils/formatToQuote.js.map +1 -1
  60. package/utils/getStyleId.d.ts +11 -0
  61. package/utils/getStyleId.js +14 -0
  62. package/utils/getStyleId.js.map +1 -0
  63. package/utils/listNode.d.ts +14 -4
  64. package/utils/listNode.js +43 -49
  65. package/utils/listNode.js.map +1 -1
  66. package/utils/toggleLink.d.ts +1 -1
  67. package/utils/toggleLink.js +41 -45
  68. package/utils/toggleLink.js.map +1 -1
  69. package/TypographyNode.d.ts +0 -39
  70. package/TypographyNode.js +0 -147
  71. package/TypographyNode.js.map +0 -1
  72. package/components/ImageNode/ContentEditable.css +0 -22
  73. package/components/ImageNode/ContentEditable.d.ts +0 -12
  74. package/components/ImageNode/ContentEditable.js +0 -26
  75. package/components/ImageNode/ContentEditable.js.map +0 -1
  76. package/components/ImageNode/ImageComponent.css +0 -43
  77. package/components/ImageNode/Placeholder.css +0 -20
  78. package/components/ImageNode/Placeholder.d.ts +0 -15
  79. package/components/ImageNode/Placeholder.js +0 -30
  80. package/components/ImageNode/Placeholder.js.map +0 -1
  81. package/components/ImageNode/SharedHistoryContext.d.ts +0 -10
  82. package/components/ImageNode/SharedHistoryContext.js +0 -27
  83. package/components/ImageNode/SharedHistoryContext.js.map +0 -1
package/ListItemNode.js CHANGED
@@ -1,380 +1,305 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.$createListItemNode = $createListItemNode;
8
- exports.$isListItemNode = $isListItemNode;
9
- exports.ListItemNode = void 0;
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
12
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
14
- var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
15
- var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
16
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
17
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
18
- var _lexical = require("lexical");
19
- var _ListNode = require("./ListNode");
20
- var _utils = require("@lexical/utils");
21
- var _formatList = require("./utils/formatList");
22
- var _ParagraphNode = require("./ParagraphNode");
23
- var _listNode = require("./utils/listNode");
1
+ import { $isElementNode, $isRangeSelection, ElementNode, addClassNamesToElement, removeClassNamesFromElement } from "lexical";
2
+ import { $createListNode, $isListNode } from "./ListNode.js";
3
+ import { $handleIndent, $handleOutdent, mergeLists, updateChildrenListItemValue } from "./utils/formatList.js";
4
+ import { $createParagraphNode, $isParagraphNode } from "./ParagraphNode.js";
5
+ import { isNestedListNode } from "./utils/listNode.js";
6
+ export const LIST_ITEM_TYPE = "wby-list-item";
24
7
  /** @noInheritDoc */
25
- var ListItemNode = exports.ListItemNode = /*#__PURE__*/function (_ElementNode) {
26
- function ListItemNode(value, checked, key) {
27
- var _this;
28
- (0, _classCallCheck2.default)(this, ListItemNode);
29
- _this = (0, _callSuper2.default)(this, ListItemNode, [key]);
30
- _this.__value = value === undefined ? 1 : value;
31
- _this.__checked = checked;
32
- return _this;
33
- }
34
- (0, _inherits2.default)(ListItemNode, _ElementNode);
35
- return (0, _createClass2.default)(ListItemNode, [{
36
- key: "createDOM",
37
- value: function createDOM(config) {
38
- var element = document.createElement("li");
39
- var parent = this.getParent();
40
- if ((0, _ListNode.$isListNode)(parent) && parent.getListType() === "check") {
41
- updateListItemChecked(element, this, null, parent);
42
- }
43
- element.value = this.__value;
44
- $setListItemThemeClassNames(element, config.theme, this);
45
- return element;
46
- }
47
- }, {
48
- key: "updateDOM",
49
- value: function updateDOM(prevNode, dom, config) {
50
- var parent = this.getParent();
51
- if ((0, _ListNode.$isListNode)(parent) && parent.getListType() === "check") {
52
- updateListItemChecked(dom, this, prevNode, parent);
53
- }
54
- // @ts-expect-error - this is always HTMLListItemElement
55
- dom.value = this.__value;
56
- $setListItemThemeClassNames(dom, config.theme, this);
57
- return false;
58
- }
59
- }, {
60
- key: "exportJSON",
61
- value: function exportJSON() {
62
- return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(ListItemNode.prototype), "exportJSON", this).call(this)), {}, {
63
- checked: this.getChecked(),
64
- type: "webiny-listitem",
65
- value: this.getValue(),
66
- version: 1
67
- });
8
+ export class ListItemNode extends ElementNode {
9
+ /** @internal */
10
+
11
+ /** @internal */
12
+
13
+ static getType() {
14
+ return LIST_ITEM_TYPE;
15
+ }
16
+ static clone(node) {
17
+ return new ListItemNode(node.__value, node.__checked, node.__key);
18
+ }
19
+ constructor(value, checked, key) {
20
+ super(key);
21
+ this.__value = value === undefined ? 1 : value;
22
+ this.__checked = checked;
23
+ }
24
+ createDOM(config) {
25
+ const element = document.createElement("li");
26
+ const parent = this.getParent();
27
+ if ($isListNode(parent) && parent.getListType() === "check") {
28
+ updateListItemChecked(element, this, null, parent);
68
29
  }
69
- }, {
70
- key: "append",
71
- value: function append() {
72
- for (var i = 0; i < arguments.length; i++) {
73
- var node = i < 0 || arguments.length <= i ? undefined : arguments[i];
74
- if ((0, _lexical.$isElementNode)(node) && this.canMergeWith(node)) {
75
- var children = node.getChildren();
76
- this.append.apply(this, (0, _toConsumableArray2.default)(children));
77
- node.remove();
78
- } else {
79
- (0, _get2.default)((0, _getPrototypeOf2.default)(ListItemNode.prototype), "append", this).call(this, node);
80
- }
81
- }
82
- return this;
30
+ element.value = this.__value;
31
+ $setListItemThemeClassNames(element, config.theme, this);
32
+ return element;
33
+ }
34
+ updateDOM(prevNode, dom, config) {
35
+ const parent = this.getParent();
36
+ if ($isListNode(parent) && parent.getListType() === "check") {
37
+ updateListItemChecked(dom, this, prevNode, parent);
83
38
  }
84
- }, {
85
- key: "replace",
86
- value: function replace(replaceWithNode, includeChildren) {
87
- if ($isListItemNode(replaceWithNode)) {
88
- return (0, _get2.default)((0, _getPrototypeOf2.default)(ListItemNode.prototype), "replace", this).call(this, replaceWithNode);
89
- }
90
- this.setIndent(0);
91
- var list = this.getParentOrThrow();
92
- if (!(0, _ListNode.$isListNode)(list)) {
93
- return replaceWithNode;
94
- }
95
- if (list.__first === this.getKey()) {
96
- list.insertBefore(replaceWithNode);
97
- } else if (list.__last === this.getKey()) {
98
- list.insertAfter(replaceWithNode);
39
+ // @ts-expect-error - this is always HTMLListItemElement
40
+ dom.value = this.__value;
41
+ $setListItemThemeClassNames(dom, config.theme, this);
42
+ return false;
43
+ }
44
+ static importDOM() {
45
+ return {
46
+ li: () => ({
47
+ conversion: convertListItemElement,
48
+ priority: 0
49
+ })
50
+ };
51
+ }
52
+ static importJSON(serializedNode) {
53
+ const node = new ListItemNode(serializedNode.value, serializedNode.checked);
54
+ node.setFormat(serializedNode.format);
55
+ node.setIndent(serializedNode.indent);
56
+ node.setDirection(serializedNode.direction);
57
+ return node;
58
+ }
59
+ exportJSON() {
60
+ return {
61
+ ...super.exportJSON(),
62
+ checked: this.getChecked(),
63
+ type: LIST_ITEM_TYPE,
64
+ value: this.getValue()
65
+ };
66
+ }
67
+ append(...nodes) {
68
+ for (let i = 0; i < nodes.length; i++) {
69
+ const node = nodes[i];
70
+ if ($isElementNode(node) && this.canMergeWith(node)) {
71
+ const children = node.getChildren();
72
+ this.append(...children);
73
+ node.remove();
99
74
  } else {
100
- // Split the list
101
- var newList = (0, _ListNode.$createListNode)(list.getListType());
102
- var nextSibling = this.getNextSibling();
103
- while (nextSibling) {
104
- var nodeToAppend = nextSibling;
105
- nextSibling = nextSibling.getNextSibling();
106
- newList.append(nodeToAppend);
107
- }
108
- list.insertAfter(replaceWithNode);
109
- replaceWithNode.insertAfter(newList);
110
- }
111
- if (includeChildren) {
112
- this.getChildren().forEach(function (child) {
113
- replaceWithNode.append(child);
114
- });
115
- }
116
- this.remove();
117
- if (list.getChildrenSize() === 0) {
118
- list.remove();
75
+ super.append(node);
119
76
  }
77
+ }
78
+ return this;
79
+ }
80
+ replace(replaceWithNode, includeChildren) {
81
+ if ($isListItemNode(replaceWithNode)) {
82
+ return super.replace(replaceWithNode);
83
+ }
84
+ this.setIndent(0);
85
+ const list = this.getParentOrThrow();
86
+ if (!$isListNode(list)) {
120
87
  return replaceWithNode;
121
88
  }
122
- }, {
123
- key: "insertAfter",
124
- value: function insertAfter(node) {
125
- var listNode = this.getParentOrThrow();
126
- if (!(0, _ListNode.$isListNode)(listNode)) {
127
- console.log("insertAfter: webiny list node is not parent of list item node");
128
- return listNode;
129
- }
130
- var siblings = this.getNextSiblings();
131
- if ($isListItemNode(node)) {
132
- var after = (0, _get2.default)((0, _getPrototypeOf2.default)(ListItemNode.prototype), "insertAfter", this).call(this, node);
133
- var afterListNode = node.getParentOrThrow();
134
- if ((0, _ListNode.$isListNode)(afterListNode)) {
135
- (0, _formatList.updateChildrenListItemValue)(afterListNode);
136
- }
137
- return after;
138
- }
139
-
140
- // Attempt to merge if the list is of the same type.
141
-
142
- if ((0, _ListNode.$isListNode)(node) && node.getListType() === listNode.getListType()) {
143
- var child = node;
144
- var children = node.getChildren();
145
- for (var i = children.length - 1; i >= 0; i--) {
146
- child = children[i];
147
- this.insertAfter(child);
148
- }
149
- return child;
150
- }
151
-
152
- // Otherwise, split the list
153
- // Split the lists and insert the node in between them
154
- listNode.insertAfter(node);
155
- if (siblings.length !== 0) {
156
- var newListNode = (0, _ListNode.$createListNode)(listNode.getListType());
157
- siblings.forEach(function (sibling) {
158
- return newListNode.append(sibling);
159
- });
160
- node.insertAfter(newListNode);
89
+ if (list.__first === this.getKey()) {
90
+ list.insertBefore(replaceWithNode);
91
+ } else if (list.__last === this.getKey()) {
92
+ list.insertAfter(replaceWithNode);
93
+ } else {
94
+ // Split the list
95
+ const newList = $createListNode(list.getListType());
96
+ let nextSibling = this.getNextSibling();
97
+ while (nextSibling) {
98
+ const nodeToAppend = nextSibling;
99
+ nextSibling = nextSibling.getNextSibling();
100
+ newList.append(nodeToAppend);
161
101
  }
162
- return node;
102
+ list.insertAfter(replaceWithNode);
103
+ replaceWithNode.insertAfter(newList);
163
104
  }
164
- }, {
165
- key: "remove",
166
- value: function remove(preserveEmptyParent) {
167
- var prevSibling = this.getPreviousSibling();
168
- var nextSibling = this.getNextSibling();
169
- (0, _get2.default)((0, _getPrototypeOf2.default)(ListItemNode.prototype), "remove", this).call(this, preserveEmptyParent);
170
- if (prevSibling && nextSibling && (0, _listNode.isNestedListNode)(prevSibling) && (0, _listNode.isNestedListNode)(nextSibling)) {
171
- (0, _formatList.mergeLists)(prevSibling.getFirstChild(), nextSibling.getFirstChild());
172
- nextSibling.remove();
173
- } else if (nextSibling) {
174
- var parent = nextSibling.getParent();
175
- if ((0, _ListNode.$isListNode)(parent)) {
176
- (0, _formatList.updateChildrenListItemValue)(parent);
177
- }
105
+ if (includeChildren) {
106
+ if (!$isElementNode(replaceWithNode)) {
107
+ throw Error("includeChildren should only be true for ElementNodes");
178
108
  }
179
- }
180
- }, {
181
- key: "insertNewAfter",
182
- value: function insertNewAfter() {
183
- var newElement = $createListItemNode(this.__checked == null ? undefined : false);
184
- this.insertAfter(newElement);
185
- return newElement;
186
- }
187
- }, {
188
- key: "collapseAtStart",
189
- value: function collapseAtStart(selection) {
190
- var paragraph = (0, _ParagraphNode.$createParagraphNode)();
191
- var children = this.getChildren();
192
- children.forEach(function (child) {
193
- return paragraph.append(child);
109
+ this.getChildren().forEach(child => {
110
+ replaceWithNode.append(child);
194
111
  });
195
- var listNode = this.getParentOrThrow();
196
- var listNodeParent = listNode.getParentOrThrow();
197
- var isIndented = $isListItemNode(listNodeParent);
198
- if (listNode.getChildrenSize() === 1) {
199
- if (isIndented) {
200
- // if the list node is nested, we just want to remove it,
201
- // effectively unindenting it.
202
- listNode.remove();
203
- listNodeParent.select();
204
- } else {
205
- listNode.replace(paragraph);
206
- // If we have selection on the list item, we'll need to move it
207
- // to the paragraph
208
- var anchor = selection.anchor;
209
- var focus = selection.focus;
210
- var key = paragraph.getKey();
211
- if (anchor.type === "element" && anchor.getNode().is(this)) {
212
- anchor.set(key, anchor.offset, "element");
213
- }
214
- if (focus.type === "element" && focus.getNode().is(this)) {
215
- focus.set(key, focus.offset, "element");
216
- }
217
- }
218
- } else {
219
- listNode.insertBefore(paragraph);
220
- this.remove();
221
- }
222
- return true;
223
- }
224
- }, {
225
- key: "getValue",
226
- value: function getValue() {
227
- var self = this.getLatest();
228
- return self.__value;
229
112
  }
230
- }, {
231
- key: "setValue",
232
- value: function setValue(value) {
233
- var self = this.getWritable();
234
- self.__value = value;
113
+ this.remove();
114
+ if (list.getChildrenSize() === 0) {
115
+ list.remove();
235
116
  }
236
- }, {
237
- key: "getChecked",
238
- value: function getChecked() {
239
- var self = this.getLatest();
240
- return self.__checked;
241
- }
242
- }, {
243
- key: "setChecked",
244
- value: function setChecked(checked) {
245
- var self = this.getWritable();
246
- self.__checked = checked;
117
+ return replaceWithNode;
118
+ }
119
+ insertAfter(node) {
120
+ const listNode = this.getParentOrThrow();
121
+ if (!$isListNode(listNode)) {
122
+ console.log("insertAfter: webiny list node is not parent of list item node");
123
+ return listNode;
247
124
  }
248
- }, {
249
- key: "getIndent",
250
- value: function getIndent() {
251
- // If we don't have a parent, we are likely serializing
252
- var parent = this.getParent();
253
- if (parent === null) {
254
- return this.getLatest().__indent;
255
- }
256
- // ListItemNode should always have a ListNode for a parent.
257
- var listNodeParent = parent.getParentOrThrow();
258
- var indentLevel = 0;
259
- while ($isListItemNode(listNodeParent)) {
260
- listNodeParent = listNodeParent.getParentOrThrow().getParentOrThrow();
261
- indentLevel++;
125
+ const siblings = this.getNextSiblings();
126
+ if ($isListItemNode(node)) {
127
+ const after = super.insertAfter(node);
128
+ const afterListNode = node.getParentOrThrow();
129
+ if ($isListNode(afterListNode)) {
130
+ updateChildrenListItemValue(afterListNode);
262
131
  }
263
- return indentLevel;
132
+ return after;
264
133
  }
265
- }, {
266
- key: "setIndent",
267
- value: function setIndent(indent) {
268
- var currentIndent = this.getIndent();
269
- while (currentIndent !== indent) {
270
- if (currentIndent < indent) {
271
- (0, _formatList.$handleIndent)([this]);
272
- currentIndent++;
273
- } else {
274
- (0, _formatList.$handleOutdent)([this]);
275
- currentIndent--;
276
- }
134
+
135
+ // Attempt to merge if the list is of the same type.
136
+
137
+ if ($isListNode(node) && node.getListType() === listNode.getListType()) {
138
+ let child = node;
139
+ const children = node.getChildren();
140
+ for (let i = children.length - 1; i >= 0; i--) {
141
+ child = children[i];
142
+ this.insertAfter(child);
277
143
  }
278
- return this;
144
+ return child;
279
145
  }
280
- }, {
281
- key: "canIndent",
282
- value: function canIndent() {
283
- // Indent/outdent is handled specifically in the RichText logic.
284
146
 
285
- return false;
147
+ // Otherwise, split the list
148
+ // Split the lists and insert the node in between them
149
+ listNode.insertAfter(node);
150
+ if (siblings.length !== 0) {
151
+ const newListNode = $createListNode(listNode.getListType());
152
+ siblings.forEach(sibling => newListNode.append(sibling));
153
+ node.insertAfter(newListNode);
286
154
  }
287
- }, {
288
- key: "insertBefore",
289
- value: function insertBefore(nodeToInsert) {
290
- if ($isListItemNode(nodeToInsert)) {
291
- var parent = this.getParentOrThrow();
292
- if ((0, _ListNode.$isListNode)(parent)) {
293
- var siblings = this.getNextSiblings();
294
- (0, _formatList.updateChildrenListItemValue)(parent, siblings);
295
- }
155
+ return node;
156
+ }
157
+ remove(preserveEmptyParent) {
158
+ const prevSibling = this.getPreviousSibling();
159
+ const nextSibling = this.getNextSibling();
160
+ super.remove(preserveEmptyParent);
161
+ if (prevSibling && nextSibling && isNestedListNode(prevSibling) && isNestedListNode(nextSibling)) {
162
+ mergeLists(prevSibling.getFirstChild(), nextSibling.getFirstChild());
163
+ nextSibling.remove();
164
+ } else if (nextSibling) {
165
+ const parent = nextSibling.getParent();
166
+ if ($isListNode(parent)) {
167
+ updateChildrenListItemValue(parent);
296
168
  }
297
- return (0, _get2.default)((0, _getPrototypeOf2.default)(ListItemNode.prototype), "insertBefore", this).call(this, nodeToInsert);
298
169
  }
299
- }, {
300
- key: "canInsertAfter",
301
- value: function canInsertAfter(node) {
302
- return (0, _ListNode.$isListNode)(node);
170
+ }
171
+ insertNewAfter() {
172
+ const newElement = $createListItemNode(this.__checked == null ? undefined : false);
173
+ this.insertAfter(newElement);
174
+ return newElement;
175
+ }
176
+ collapseAtStart(selection) {
177
+ const paragraph = $createParagraphNode();
178
+ const children = this.getChildren();
179
+ children.forEach(child => paragraph.append(child));
180
+ const listNode = this.getParentOrThrow();
181
+ const listNodeParent = listNode.getParentOrThrow();
182
+ const isIndented = $isListItemNode(listNodeParent);
183
+ if (listNode.getChildrenSize() === 1) {
184
+ if (isIndented) {
185
+ // if the list node is nested, we just want to remove it,
186
+ // effectively unindenting it.
187
+ listNode.remove();
188
+ listNodeParent.select();
189
+ } else {
190
+ listNode.replace(paragraph);
191
+ // If we have selection on the list item, we'll need to move it
192
+ // to the paragraph
193
+ const anchor = selection.anchor;
194
+ const focus = selection.focus;
195
+ const key = paragraph.getKey();
196
+ if (anchor.type === "element" && anchor.getNode().is(this)) {
197
+ anchor.set(key, anchor.offset, "element");
198
+ }
199
+ if (focus.type === "element" && focus.getNode().is(this)) {
200
+ focus.set(key, focus.offset, "element");
201
+ }
202
+ }
203
+ } else {
204
+ listNode.insertBefore(paragraph);
205
+ this.remove();
303
206
  }
304
- }, {
305
- key: "canReplaceWith",
306
- value: function canReplaceWith(replacement) {
307
- return $isListItemNode(replacement);
207
+ return true;
208
+ }
209
+ getValue() {
210
+ const self = this.getLatest();
211
+ return self.__value;
212
+ }
213
+ setValue(value) {
214
+ const self = this.getWritable();
215
+ self.__value = value;
216
+ }
217
+ getChecked() {
218
+ const self = this.getLatest();
219
+ return self.__checked;
220
+ }
221
+ setChecked(checked) {
222
+ const self = this.getWritable();
223
+ self.__checked = checked;
224
+ }
225
+ getIndent() {
226
+ // If we don't have a parent, we are likely serializing
227
+ const parent = this.getParent();
228
+ if (parent === null) {
229
+ return this.getLatest().__indent;
308
230
  }
309
- }, {
310
- key: "canMergeWith",
311
- value: function canMergeWith(node) {
312
- return (0, _ParagraphNode.$isParagraphNode)(node) || $isListItemNode(node);
231
+ // ListItemNode should always have a ListNode for a parent.
232
+ let listNodeParent = parent.getParentOrThrow();
233
+ let indentLevel = 0;
234
+ while ($isListItemNode(listNodeParent)) {
235
+ listNodeParent = listNodeParent.getParentOrThrow().getParentOrThrow();
236
+ indentLevel++;
313
237
  }
314
- }, {
315
- key: "extractWithChild",
316
- value: function extractWithChild(child, selection) {
317
- if (!(0, _lexical.$isRangeSelection)(selection)) {
318
- return false;
238
+ return indentLevel;
239
+ }
240
+ setIndent(indent) {
241
+ let currentIndent = this.getIndent();
242
+ while (currentIndent !== indent) {
243
+ if (currentIndent < indent) {
244
+ $handleIndent([this]);
245
+ currentIndent++;
246
+ } else {
247
+ $handleOutdent([this]);
248
+ currentIndent--;
319
249
  }
320
- var anchorNode = selection.anchor.getNode();
321
- var focusNode = selection.focus.getNode();
322
- return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && this.getTextContent().length === selection.getTextContent().length;
323
250
  }
324
- }], [{
325
- key: "getType",
326
- value: /** @internal */
327
-
328
- /** @internal */
251
+ return this;
252
+ }
253
+ canIndent() {
254
+ // Indent/outdent is handled specifically in the RichText logic.
329
255
 
330
- function getType() {
331
- return "webiny-listitem";
332
- }
333
- }, {
334
- key: "clone",
335
- value: function clone(node) {
336
- return new ListItemNode(node.__value, node.__checked, node.__key);
337
- }
338
- }, {
339
- key: "importDOM",
340
- value: function importDOM() {
341
- return {
342
- li: function li() {
343
- return {
344
- conversion: convertListItemElement,
345
- priority: 0
346
- };
347
- }
348
- };
256
+ return false;
257
+ }
258
+ insertBefore(nodeToInsert) {
259
+ if ($isListItemNode(nodeToInsert)) {
260
+ const parent = this.getParentOrThrow();
261
+ if ($isListNode(parent)) {
262
+ const siblings = this.getNextSiblings();
263
+ updateChildrenListItemValue(parent, siblings);
264
+ }
349
265
  }
350
- }, {
351
- key: "importJSON",
352
- value: function importJSON(serializedNode) {
353
- var node = new ListItemNode(serializedNode.value, serializedNode.checked);
354
- node.setFormat(serializedNode.format);
355
- node.setIndent(serializedNode.indent);
356
- node.setDirection(serializedNode.direction);
357
- return node;
266
+ return super.insertBefore(nodeToInsert);
267
+ }
268
+ canInsertAfter(node) {
269
+ return $isListNode(node);
270
+ }
271
+ canReplaceWith(replacement) {
272
+ return $isListItemNode(replacement);
273
+ }
274
+ canMergeWith(node) {
275
+ return $isParagraphNode(node) || $isListItemNode(node);
276
+ }
277
+ extractWithChild(child, selection) {
278
+ if (!$isRangeSelection(selection)) {
279
+ return false;
358
280
  }
359
- }]);
360
- }(_lexical.ElementNode);
281
+ const anchorNode = selection.anchor.getNode();
282
+ const focusNode = selection.focus.getNode();
283
+ return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && this.getTextContent().length === selection.getTextContent().length;
284
+ }
285
+ }
361
286
  function $setListItemThemeClassNames(dom, editorThemeClasses, node) {
362
- var classesToAdd = [];
363
- var classesToRemove = [];
364
- var listTheme = editorThemeClasses.list;
365
- var listItemClassName = listTheme ? listTheme.listitem : undefined;
366
- var nestedListItemClassName;
287
+ const classesToAdd = [];
288
+ const classesToRemove = [];
289
+ const listTheme = editorThemeClasses.list;
290
+ const listItemClassName = listTheme ? listTheme.listitem : undefined;
291
+ let nestedListItemClassName;
367
292
  if (listTheme && listTheme.nested) {
368
293
  nestedListItemClassName = listTheme.nested.listitem;
369
294
  }
370
295
  if (listItemClassName !== undefined) {
371
- var listItemClasses = listItemClassName.split(" ");
372
- classesToAdd.push.apply(classesToAdd, (0, _toConsumableArray2.default)(listItemClasses));
296
+ const listItemClasses = listItemClassName.split(" ");
297
+ classesToAdd.push(...listItemClasses);
373
298
  }
374
299
  if (listTheme) {
375
- var parentNode = node.getParent();
376
- var isCheckList = (0, _ListNode.$isListNode)(parentNode) && parentNode?.getListType() === "check";
377
- var checked = node.getChecked();
300
+ const parentNode = node.getParent();
301
+ const isCheckList = $isListNode(parentNode) && parentNode?.getListType() === "check";
302
+ const checked = node.getChecked();
378
303
  if (!isCheckList || checked) {
379
304
  classesToRemove.push(listTheme.listitemUnchecked);
380
305
  }
@@ -386,27 +311,25 @@ function $setListItemThemeClassNames(dom, editorThemeClasses, node) {
386
311
  }
387
312
  }
388
313
  if (nestedListItemClassName !== undefined) {
389
- var nestedListItemClasses = nestedListItemClassName.split(" ");
390
- if (node.getChildren().some(function (child) {
391
- return (0, _ListNode.$isListNode)(child);
392
- })) {
393
- classesToAdd.push.apply(classesToAdd, (0, _toConsumableArray2.default)(nestedListItemClasses));
314
+ const nestedListItemClasses = nestedListItemClassName.split(" ");
315
+ if (node.getChildren().some(child => $isListNode(child))) {
316
+ classesToAdd.push(...nestedListItemClasses);
394
317
  } else {
395
- classesToRemove.push.apply(classesToRemove, (0, _toConsumableArray2.default)(nestedListItemClasses));
318
+ classesToRemove.push(...nestedListItemClasses);
396
319
  }
397
320
  }
398
321
  if (classesToRemove.length > 0) {
399
- _utils.removeClassNamesFromElement.apply(void 0, [dom].concat(classesToRemove));
322
+ removeClassNamesFromElement(dom, ...classesToRemove);
400
323
  }
401
324
  if (classesToAdd.length > 0) {
402
- _utils.addClassNamesToElement.apply(void 0, [dom].concat(classesToAdd));
325
+ addClassNamesToElement(dom, ...classesToAdd);
403
326
  }
404
327
  }
405
328
  function updateListItemChecked(dom, listItemNode, prevListItemNode, listNode) {
406
- var isCheckList = listNode.getListType() === "check";
329
+ const isCheckList = listNode.getListType() === "check";
407
330
  if (isCheckList) {
408
331
  // Only add attributes for leaf list items
409
- if ((0, _ListNode.$isListNode)(listItemNode.getFirstChild())) {
332
+ if ($isListNode(listItemNode.getFirstChild())) {
410
333
  dom.removeAttribute("role");
411
334
  dom.removeAttribute("tabIndex");
412
335
  dom.removeAttribute("aria-checked");
@@ -429,10 +352,10 @@ function convertListItemElement() {
429
352
  node: $createListItemNode()
430
353
  };
431
354
  }
432
- function $createListItemNode(checked) {
355
+ export function $createListItemNode(checked) {
433
356
  return new ListItemNode(undefined, checked);
434
357
  }
435
- function $isListItemNode(node) {
358
+ export function $isListItemNode(node) {
436
359
  return node instanceof ListItemNode;
437
360
  }
438
361