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

package/ListItemNode.js

@@ -3,360 +3,289 @@ import { $createListNode, $isListNode } from "./ListNode.js";
 import { $handleIndent, $handleOutdent, mergeLists, updateChildrenListItemValue } from "./utils/formatList.js";
 import { $createParagraphNode, $isParagraphNode } from "./ParagraphNode.js";
 import { isNestedListNode } from "./utils/listNode.js";
-export const LIST_ITEM_TYPE = "wby-list-item";
-/** @noInheritDoc */
-export class ListItemNode extends ElementNode {
-  /** @internal */
-
-  /** @internal */
-
-  static getType() {
-    return LIST_ITEM_TYPE;
-  }
-  static clone(node) {
-    return new ListItemNode(node.__value, node.__checked, node.__key);
-  }
-  constructor(value, checked, key) {
-    super(key);
-    this.__value = value === undefined ? 1 : value;
-    this.__checked = checked;
-  }
-  createDOM(config) {
-    const element = document.createElement("li");
-    const parent = this.getParent();
-    if ($isListNode(parent) && parent.getListType() === "check") {
-      updateListItemChecked(element, this, null, parent);
+const LIST_ITEM_TYPE = "wby-list-item";
+class ListItemNode extends ElementNode {
+    static getType() {
+        return LIST_ITEM_TYPE;
     }
-    element.value = this.__value;
-    $setListItemThemeClassNames(element, config.theme, this);
-    return element;
-  }
-  updateDOM(prevNode, dom, config) {
-    const parent = this.getParent();
-    if ($isListNode(parent) && parent.getListType() === "check") {
-      updateListItemChecked(dom, this, prevNode, parent);
+    static clone(node) {
+        return new ListItemNode(node.__value, node.__checked, node.__key);
     }
-    // @ts-expect-error - this is always HTMLListItemElement
-    dom.value = this.__value;
-    $setListItemThemeClassNames(dom, config.theme, this);
-    return false;
-  }
-  static importDOM() {
-    return {
-      li: () => ({
-        conversion: convertListItemElement,
-        priority: 0
-      })
-    };
-  }
-  static importJSON(serializedNode) {
-    const node = new ListItemNode(serializedNode.value, serializedNode.checked);
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    return node;
-  }
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      checked: this.getChecked(),
-      type: LIST_ITEM_TYPE,
-      value: this.getValue()
-    };
-  }
-  append(...nodes) {
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      if ($isElementNode(node) && this.canMergeWith(node)) {
-        const children = node.getChildren();
-        this.append(...children);
-        node.remove();
-      } else {
-        super.append(node);
-      }
+    constructor(value, checked, key){
+        super(key);
+        this.__value = void 0 === value ? 1 : value;
+        this.__checked = checked;
     }
-    return this;
-  }
-  replace(replaceWithNode, includeChildren) {
-    if ($isListItemNode(replaceWithNode)) {
-      return super.replace(replaceWithNode);
+    createDOM(config) {
+        const element = document.createElement("li");
+        const parent = this.getParent();
+        if ($isListNode(parent) && "check" === parent.getListType()) updateListItemChecked(element, this, null, parent);
+        element.value = this.__value;
+        $setListItemThemeClassNames(element, config.theme, this);
+        return element;
     }
-    this.setIndent(0);
-    const list = this.getParentOrThrow();
-    if (!$isListNode(list)) {
-      return replaceWithNode;
+    updateDOM(prevNode, dom, config) {
+        const parent = this.getParent();
+        if ($isListNode(parent) && "check" === parent.getListType()) updateListItemChecked(dom, this, prevNode, parent);
+        dom.value = this.__value;
+        $setListItemThemeClassNames(dom, config.theme, this);
+        return false;
     }
-    if (list.__first === this.getKey()) {
-      list.insertBefore(replaceWithNode);
-    } else if (list.__last === this.getKey()) {
-      list.insertAfter(replaceWithNode);
-    } else {
-      // Split the list
-      const newList = $createListNode(list.getListType());
-      let nextSibling = this.getNextSibling();
-      while (nextSibling) {
-        const nodeToAppend = nextSibling;
-        nextSibling = nextSibling.getNextSibling();
-        newList.append(nodeToAppend);
-      }
-      list.insertAfter(replaceWithNode);
-      replaceWithNode.insertAfter(newList);
+    static importDOM() {
+        return {
+            li: ()=>({
+                    conversion: convertListItemElement,
+                    priority: 0
+                })
+        };
     }
-    if (includeChildren) {
-      if (!$isElementNode(replaceWithNode)) {
-        throw Error("includeChildren should only be true for ElementNodes");
-      }
-      this.getChildren().forEach(child => {
-        replaceWithNode.append(child);
-      });
+    static importJSON(serializedNode) {
+        const node = new ListItemNode(serializedNode.value, serializedNode.checked);
+        node.setFormat(serializedNode.format);
+        node.setIndent(serializedNode.indent);
+        node.setDirection(serializedNode.direction);
+        return node;
     }
-    this.remove();
-    if (list.getChildrenSize() === 0) {
-      list.remove();
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            checked: this.getChecked(),
+            type: LIST_ITEM_TYPE,
+            value: this.getValue()
+        };
     }
-    return replaceWithNode;
-  }
-  insertAfter(node) {
-    const listNode = this.getParentOrThrow();
-    if (!$isListNode(listNode)) {
-      console.log("insertAfter: webiny list node is not parent of list item node");
-      return listNode;
+    append(...nodes) {
+        for(let i = 0; i < nodes.length; i++){
+            const node = nodes[i];
+            if ($isElementNode(node) && this.canMergeWith(node)) {
+                const children = node.getChildren();
+                this.append(...children);
+                node.remove();
+            } else super.append(node);
+        }
+        return this;
     }
-    const siblings = this.getNextSiblings();
-    if ($isListItemNode(node)) {
-      const after = super.insertAfter(node);
-      const afterListNode = node.getParentOrThrow();
-      if ($isListNode(afterListNode)) {
-        updateChildrenListItemValue(afterListNode);
-      }
-      return after;
+    replace(replaceWithNode, includeChildren) {
+        if ($isListItemNode(replaceWithNode)) return super.replace(replaceWithNode);
+        this.setIndent(0);
+        const list = this.getParentOrThrow();
+        if (!$isListNode(list)) return replaceWithNode;
+        if (list.__first === this.getKey()) list.insertBefore(replaceWithNode);
+        else if (list.__last === this.getKey()) list.insertAfter(replaceWithNode);
+        else {
+            const newList = $createListNode(list.getListType());
+            let nextSibling = this.getNextSibling();
+            while(nextSibling){
+                const nodeToAppend = nextSibling;
+                nextSibling = nextSibling.getNextSibling();
+                newList.append(nodeToAppend);
+            }
+            list.insertAfter(replaceWithNode);
+            replaceWithNode.insertAfter(newList);
+        }
+        if (includeChildren) {
+            if (!$isElementNode(replaceWithNode)) throw Error("includeChildren should only be true for ElementNodes");
+            this.getChildren().forEach((child)=>{
+                replaceWithNode.append(child);
+            });
+        }
+        this.remove();
+        if (0 === list.getChildrenSize()) list.remove();
+        return replaceWithNode;
     }
-
-    // Attempt to merge if the list is of the same type.
-
-    if ($isListNode(node) && node.getListType() === listNode.getListType()) {
-      let child = node;
-      const children = node.getChildren();
-      for (let i = children.length - 1; i >= 0; i--) {
-        child = children[i];
-        this.insertAfter(child);
-      }
-      return child;
+    insertAfter(node) {
+        const listNode = this.getParentOrThrow();
+        if (!$isListNode(listNode)) {
+            console.log("insertAfter: webiny list node is not parent of list item node");
+            return listNode;
+        }
+        const siblings = this.getNextSiblings();
+        if ($isListItemNode(node)) {
+            const after = super.insertAfter(node);
+            const afterListNode = node.getParentOrThrow();
+            if ($isListNode(afterListNode)) updateChildrenListItemValue(afterListNode);
+            return after;
+        }
+        if ($isListNode(node) && node.getListType() === listNode.getListType()) {
+            let child = node;
+            const children = node.getChildren();
+            for(let i = children.length - 1; i >= 0; i--){
+                child = children[i];
+                this.insertAfter(child);
+            }
+            return child;
+        }
+        listNode.insertAfter(node);
+        if (0 !== siblings.length) {
+            const newListNode = $createListNode(listNode.getListType());
+            siblings.forEach((sibling)=>newListNode.append(sibling));
+            node.insertAfter(newListNode);
+        }
+        return node;
     }
-
-    // Otherwise, split the list
-    // Split the lists and insert the node in between them
-    listNode.insertAfter(node);
-    if (siblings.length !== 0) {
-      const newListNode = $createListNode(listNode.getListType());
-      siblings.forEach(sibling => newListNode.append(sibling));
-      node.insertAfter(newListNode);
+    remove(preserveEmptyParent) {
+        const prevSibling = this.getPreviousSibling();
+        const nextSibling = this.getNextSibling();
+        super.remove(preserveEmptyParent);
+        if (prevSibling && nextSibling && isNestedListNode(prevSibling) && isNestedListNode(nextSibling)) {
+            mergeLists(prevSibling.getFirstChild(), nextSibling.getFirstChild());
+            nextSibling.remove();
+        } else if (nextSibling) {
+            const parent = nextSibling.getParent();
+            if ($isListNode(parent)) updateChildrenListItemValue(parent);
+        }
     }
-    return node;
-  }
-  remove(preserveEmptyParent) {
-    const prevSibling = this.getPreviousSibling();
-    const nextSibling = this.getNextSibling();
-    super.remove(preserveEmptyParent);
-    if (prevSibling && nextSibling && isNestedListNode(prevSibling) && isNestedListNode(nextSibling)) {
-      mergeLists(prevSibling.getFirstChild(), nextSibling.getFirstChild());
-      nextSibling.remove();
-    } else if (nextSibling) {
-      const parent = nextSibling.getParent();
-      if ($isListNode(parent)) {
-        updateChildrenListItemValue(parent);
-      }
+    insertNewAfter() {
+        const newElement = $createListItemNode(null == this.__checked ? void 0 : false);
+        this.insertAfter(newElement);
+        return newElement;
     }
-  }
-  insertNewAfter() {
-    const newElement = $createListItemNode(this.__checked == null ? undefined : false);
-    this.insertAfter(newElement);
-    return newElement;
-  }
-  collapseAtStart(selection) {
-    const paragraph = $createParagraphNode();
-    const children = this.getChildren();
-    children.forEach(child => paragraph.append(child));
-    const listNode = this.getParentOrThrow();
-    const listNodeParent = listNode.getParentOrThrow();
-    const isIndented = $isListItemNode(listNodeParent);
-    if (listNode.getChildrenSize() === 1) {
-      if (isIndented) {
-        // if the list node is nested, we just want to remove it,
-        // effectively unindenting it.
-        listNode.remove();
-        listNodeParent.select();
-      } else {
-        listNode.replace(paragraph);
-        // If we have selection on the list item, we'll need to move it
-        // to the paragraph
-        const anchor = selection.anchor;
-        const focus = selection.focus;
-        const key = paragraph.getKey();
-        if (anchor.type === "element" && anchor.getNode().is(this)) {
-          anchor.set(key, anchor.offset, "element");
+    collapseAtStart(selection) {
+        const paragraph = $createParagraphNode();
+        const children = this.getChildren();
+        children.forEach((child)=>paragraph.append(child));
+        const listNode = this.getParentOrThrow();
+        const listNodeParent = listNode.getParentOrThrow();
+        const isIndented = $isListItemNode(listNodeParent);
+        if (1 === listNode.getChildrenSize()) if (isIndented) {
+            listNode.remove();
+            listNodeParent.select();
+        } else {
+            listNode.replace(paragraph);
+            const anchor = selection.anchor;
+            const focus = selection.focus;
+            const key = paragraph.getKey();
+            if ("element" === anchor.type && anchor.getNode().is(this)) anchor.set(key, anchor.offset, "element");
+            if ("element" === focus.type && focus.getNode().is(this)) focus.set(key, focus.offset, "element");
         }
-        if (focus.type === "element" && focus.getNode().is(this)) {
-          focus.set(key, focus.offset, "element");
+        else {
+            listNode.insertBefore(paragraph);
+            this.remove();
         }
-      }
-    } else {
-      listNode.insertBefore(paragraph);
-      this.remove();
+        return true;
     }
-    return true;
-  }
-  getValue() {
-    const self = this.getLatest();
-    return self.__value;
-  }
-  setValue(value) {
-    const self = this.getWritable();
-    self.__value = value;
-  }
-  getChecked() {
-    const self = this.getLatest();
-    return self.__checked;
-  }
-  setChecked(checked) {
-    const self = this.getWritable();
-    self.__checked = checked;
-  }
-  getIndent() {
-    // If we don't have a parent, we are likely serializing
-    const parent = this.getParent();
-    if (parent === null) {
-      return this.getLatest().__indent;
+    getValue() {
+        const self = this.getLatest();
+        return self.__value;
     }
-    // ListItemNode should always have a ListNode for a parent.
-    let listNodeParent = parent.getParentOrThrow();
-    let indentLevel = 0;
-    while ($isListItemNode(listNodeParent)) {
-      listNodeParent = listNodeParent.getParentOrThrow().getParentOrThrow();
-      indentLevel++;
+    setValue(value) {
+        const self = this.getWritable();
+        self.__value = value;
     }
-    return indentLevel;
-  }
-  setIndent(indent) {
-    let currentIndent = this.getIndent();
-    while (currentIndent !== indent) {
-      if (currentIndent < indent) {
-        $handleIndent([this]);
-        currentIndent++;
-      } else {
-        $handleOutdent([this]);
-        currentIndent--;
-      }
+    getChecked() {
+        const self = this.getLatest();
+        return self.__checked;
     }
-    return this;
-  }
-  canIndent() {
-    // Indent/outdent is handled specifically in the RichText logic.
-
-    return false;
-  }
-  insertBefore(nodeToInsert) {
-    if ($isListItemNode(nodeToInsert)) {
-      const parent = this.getParentOrThrow();
-      if ($isListNode(parent)) {
-        const siblings = this.getNextSiblings();
-        updateChildrenListItemValue(parent, siblings);
-      }
+    setChecked(checked) {
+        const self = this.getWritable();
+        self.__checked = checked;
+    }
+    getIndent() {
+        const parent = this.getParent();
+        if (null === parent) return this.getLatest().__indent;
+        let listNodeParent = parent.getParentOrThrow();
+        let indentLevel = 0;
+        while($isListItemNode(listNodeParent)){
+            listNodeParent = listNodeParent.getParentOrThrow().getParentOrThrow();
+            indentLevel++;
+        }
+        return indentLevel;
+    }
+    setIndent(indent) {
+        let currentIndent = this.getIndent();
+        while(currentIndent !== indent)if (currentIndent < indent) {
+            $handleIndent([
+                this
+            ]);
+            currentIndent++;
+        } else {
+            $handleOutdent([
+                this
+            ]);
+            currentIndent--;
+        }
+        return this;
+    }
+    canIndent() {
+        return false;
+    }
+    insertBefore(nodeToInsert) {
+        if ($isListItemNode(nodeToInsert)) {
+            const parent = this.getParentOrThrow();
+            if ($isListNode(parent)) {
+                const siblings = this.getNextSiblings();
+                updateChildrenListItemValue(parent, siblings);
+            }
+        }
+        return super.insertBefore(nodeToInsert);
+    }
+    canInsertAfter(node) {
+        return $isListNode(node);
+    }
+    canReplaceWith(replacement) {
+        return $isListItemNode(replacement);
     }
-    return super.insertBefore(nodeToInsert);
-  }
-  canInsertAfter(node) {
-    return $isListNode(node);
-  }
-  canReplaceWith(replacement) {
-    return $isListItemNode(replacement);
-  }
-  canMergeWith(node) {
-    return $isParagraphNode(node) || $isListItemNode(node);
-  }
-  extractWithChild(child, selection) {
-    if (!$isRangeSelection(selection)) {
-      return false;
+    canMergeWith(node) {
+        return $isParagraphNode(node) || $isListItemNode(node);
+    }
+    extractWithChild(child, selection) {
+        if (!$isRangeSelection(selection)) return false;
+        const anchorNode = selection.anchor.getNode();
+        const focusNode = selection.focus.getNode();
+        return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && this.getTextContent().length === selection.getTextContent().length;
     }
-    const anchorNode = selection.anchor.getNode();
-    const focusNode = selection.focus.getNode();
-    return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && this.getTextContent().length === selection.getTextContent().length;
-  }
 }
 function $setListItemThemeClassNames(dom, editorThemeClasses, node) {
-  const classesToAdd = [];
-  const classesToRemove = [];
-  const listTheme = editorThemeClasses.list;
-  const listItemClassName = listTheme ? listTheme.listitem : undefined;
-  let nestedListItemClassName;
-  if (listTheme && listTheme.nested) {
-    nestedListItemClassName = listTheme.nested.listitem;
-  }
-  if (listItemClassName !== undefined) {
-    const listItemClasses = listItemClassName.split(" ");
-    classesToAdd.push(...listItemClasses);
-  }
-  if (listTheme) {
-    const parentNode = node.getParent();
-    const isCheckList = $isListNode(parentNode) && parentNode?.getListType() === "check";
-    const checked = node.getChecked();
-    if (!isCheckList || checked) {
-      classesToRemove.push(listTheme.listitemUnchecked);
+    const classesToAdd = [];
+    const classesToRemove = [];
+    const listTheme = editorThemeClasses.list;
+    const listItemClassName = listTheme ? listTheme.listitem : void 0;
+    let nestedListItemClassName;
+    if (listTheme && listTheme.nested) nestedListItemClassName = listTheme.nested.listitem;
+    if (void 0 !== listItemClassName) {
+        const listItemClasses = listItemClassName.split(" ");
+        classesToAdd.push(...listItemClasses);
     }
-    if (!isCheckList || !checked) {
-      classesToRemove.push(listTheme.listitemChecked);
+    if (listTheme) {
+        const parentNode = node.getParent();
+        const isCheckList = $isListNode(parentNode) && parentNode?.getListType() === "check";
+        const checked = node.getChecked();
+        if (!isCheckList || checked) classesToRemove.push(listTheme.listitemUnchecked);
+        if (!isCheckList || !checked) classesToRemove.push(listTheme.listitemChecked);
+        if (isCheckList) classesToAdd.push(checked ? listTheme.listitemChecked : listTheme.listitemUnchecked);
     }
-    if (isCheckList) {
-      classesToAdd.push(checked ? listTheme.listitemChecked : listTheme.listitemUnchecked);
+    if (void 0 !== nestedListItemClassName) {
+        const nestedListItemClasses = nestedListItemClassName.split(" ");
+        if (node.getChildren().some((child)=>$isListNode(child))) classesToAdd.push(...nestedListItemClasses);
+        else classesToRemove.push(...nestedListItemClasses);
     }
-  }
-  if (nestedListItemClassName !== undefined) {
-    const nestedListItemClasses = nestedListItemClassName.split(" ");
-    if (node.getChildren().some(child => $isListNode(child))) {
-      classesToAdd.push(...nestedListItemClasses);
-    } else {
-      classesToRemove.push(...nestedListItemClasses);
-    }
-  }
-  if (classesToRemove.length > 0) {
-    removeClassNamesFromElement(dom, ...classesToRemove);
-  }
-  if (classesToAdd.length > 0) {
-    addClassNamesToElement(dom, ...classesToAdd);
-  }
+    if (classesToRemove.length > 0) removeClassNamesFromElement(dom, ...classesToRemove);
+    if (classesToAdd.length > 0) addClassNamesToElement(dom, ...classesToAdd);
 }
 function updateListItemChecked(dom, listItemNode, prevListItemNode, listNode) {
-  const isCheckList = listNode.getListType() === "check";
-  if (isCheckList) {
-    // Only add attributes for leaf list items
-    if ($isListNode(listItemNode.getFirstChild())) {
-      dom.removeAttribute("role");
-      dom.removeAttribute("tabIndex");
-      dom.removeAttribute("aria-checked");
+    const isCheckList = "check" === listNode.getListType();
+    if (isCheckList) if ($isListNode(listItemNode.getFirstChild())) {
+        dom.removeAttribute("role");
+        dom.removeAttribute("tabIndex");
+        dom.removeAttribute("aria-checked");
     } else {
-      dom.setAttribute("role", "checkbox");
-      dom.setAttribute("tabIndex", "-1");
-      if (!prevListItemNode || listItemNode.__checked !== prevListItemNode.__checked) {
-        dom.setAttribute("aria-checked", listItemNode.getChecked() ? "true" : "false");
-      }
-    }
-  } else {
-    // Clean up checked state
-    if (listItemNode.getChecked() != null) {
-      listItemNode.setChecked(undefined);
+        dom.setAttribute("role", "checkbox");
+        dom.setAttribute("tabIndex", "-1");
+        if (!prevListItemNode || listItemNode.__checked !== prevListItemNode.__checked) dom.setAttribute("aria-checked", listItemNode.getChecked() ? "true" : "false");
     }
-  }
+    else if (null != listItemNode.getChecked()) listItemNode.setChecked(void 0);
 }
 function convertListItemElement() {
-  return {
-    node: $createListItemNode()
-  };
+    return {
+        node: $createListItemNode()
+    };
 }
-export function $createListItemNode(checked) {
-  return new ListItemNode(undefined, checked);
+function $createListItemNode(checked) {
+    return new ListItemNode(void 0, checked);
 }
-export function $isListItemNode(node) {
-  return node instanceof ListItemNode;
+function $isListItemNode(node) {
+    return node instanceof ListItemNode;
 }
+export { $createListItemNode, $isListItemNode, LIST_ITEM_TYPE, ListItemNode };
 
 //# sourceMappingURL=ListItemNode.js.map