@kaitify/core 0.0.1-beta.26 → 0.0.1-beta.28

package/lib/kaitify-core.es.js

@@ -3240,13 +3240,10 @@ const onComposition = async function(e) {
     const parentElement = element2.parentElement;
     const parentNode = this.findNode(parentElement);
     if (parentNode.isText() && parentNode.textContent != element2.textContent) {
-      const textContent = parentNode.textContent || "";
       parentNode.textContent = element2.textContent || "";
       if (this.isSelectionInTargetNode(parentNode)) {
         updateSelection$1.apply(this);
       }
-      element2.textContent = textContent;
-      await this.updateView();
     } else if (!parentNode.isText()) {
       const index = Array.from(parentElement.childNodes).findIndex((item) => item === element2);
       const node = this.domParseNode(element2);
@@ -3256,10 +3253,9 @@ const onComposition = async function(e) {
       if (this.selection.focused()) {
         this.setSelectionAfter(node, "all");
       }
-      await this.updateView();
     }
     this.isComposition = false;
-    setPlaceholder.apply(this);
+    await this.updateView();
   }
 };
 const onKeyboard = function(e) {
@@ -3311,126 +3307,6 @@ const onCut = function(e) {
     event2.preventDefault();
   }
 };
-const isLegalDom = (editor, dom) => {
-  let legal = true;
-  if (dom.nodeType == 3) {
-    if (dom.parentNode && dom.parentNode.childNodes.length == 1) {
-      try {
-        const node = editor.findNode(dom.parentNode);
-        if (!node.isText()) {
-          legal = false;
-        }
-      } catch (error2) {
-        legal = false;
-      }
-    } else {
-      legal = false;
-    }
-  } else if (dom.nodeType == 1) {
-    try {
-      editor.findNode(dom);
-    } catch (error2) {
-      legal = false;
-    }
-  }
-  return legal;
-};
-const removeDomObserve = (editor) => {
-  if (editor.domObserver) {
-    editor.domObserver.disconnect();
-    editor.domObserver = null;
-  }
-};
-const setDomObserve = (editor) => {
-  if (!window.MutationObserver) {
-    console.warn("The current browser does not support MutationObserver");
-    return;
-  }
-  removeDomObserve(editor);
-  editor.domObserver = new MutationObserver((mutationList) => {
-    if (editor.isComposition) {
-      return;
-    }
-    let hasUpdate = false;
-    const illegalDoms = [];
-    for (let i = 0; i < mutationList.length; i++) {
-      const mutationRecord = mutationList[i];
-      if (mutationRecord.type == "characterData") {
-        const parentElement = mutationRecord.target.parentNode;
-        const parentNode = editor.findNode(parentElement);
-        if (parentNode.isText() && parentNode.textContent != mutationRecord.target.textContent) {
-          const textContent = parentNode.textContent || "";
-          parentNode.textContent = mutationRecord.target.textContent || "";
-          if (editor.isSelectionInTargetNode(parentNode)) {
-            updateSelection$1.apply(editor);
-          }
-          removeDomObserve(editor);
-          mutationRecord.target.textContent = textContent;
-          setDomObserve(editor);
-          hasUpdate = true;
-        } else if (!parentNode.isText()) {
-          const index = Array.from(parentElement.childNodes).findIndex((item) => item === mutationRecord.target);
-          const node = editor.domParseNode(mutationRecord.target);
-          parentNode.children.splice(index, 0, node);
-          node.parent = parentNode;
-          illegalDoms.push(mutationRecord.target);
-          if (editor.selection.focused()) {
-            editor.setSelectionAfter(node, "all");
-          }
-          hasUpdate = true;
-        }
-      } else if (mutationRecord.type == "childList") {
-        const elements = Array.from(mutationRecord.addedNodes).filter((item) => !isLegalDom(editor, item));
-        if (elements.length > 0) {
-          const parentElement = mutationRecord.target;
-          if (parentElement === editor.$el) {
-            elements.forEach((el) => {
-              const index = Array.from(parentElement.childNodes).findIndex((item) => item === el);
-              const node = editor.domParseNode(el);
-              editor.stackNodes.splice(index, 0, node);
-              illegalDoms.push(el);
-              if (editor.selection.focused()) {
-                editor.setSelectionAfter(node, "all");
-              }
-              hasUpdate = true;
-            });
-          } else {
-            const parentNode = editor.findNode(parentElement);
-            elements.forEach((el) => {
-              const index = Array.from(parentElement.childNodes).findIndex((item) => item === el);
-              const node = editor.domParseNode(el);
-              if (parentNode.hasChildren()) {
-                parentNode.children.splice(index, 0, node);
-                node.parent = parentNode;
-              } else {
-                parentNode.parent.children.splice(index, 0, node);
-                node.parent = parentNode.parent;
-              }
-              illegalDoms.push(el);
-              if (editor.selection.focused()) {
-                editor.setSelectionAfter(node, "all");
-              }
-              hasUpdate = true;
-            });
-          }
-        }
-      }
-    }
-    if (hasUpdate) {
-      illegalDoms.forEach((item) => {
-        item.remove();
-      });
-      editor.updateView();
-    }
-  });
-  editor.domObserver.observe(editor.$el, {
-    attributes: false,
-    characterData: true,
-    characterDataOldValue: true,
-    childList: true,
-    subtree: true
-  });
-};
 class Extension {
   constructor(name) {
     /**
@@ -6207,6 +6083,7 @@ const imageResizable = (editor) => {
           event$1.interaction.stop();
           return;
         }
+        editor.removeDomObserve();
         event.on(event$1.target, "dragstart", (e) => e.preventDefault());
         const node = editor.findNode(event$1.target);
         data.set(event$1.target, "node", node);
@@ -6375,6 +6252,7 @@ const videoResizable = (editor) => {
           event$1.interaction.stop();
           return;
         }
+        editor.removeDomObserve();
         event.on(event$1.target, "dragstart", (e) => e.preventDefault());
         const node = editor.findNode(event$1.target);
         data.set(event$1.target, "node", node);
@@ -35940,6 +35818,7 @@ const tableResizable = (editor) => {
           event$1.interaction.stop();
           return;
         }
+        editor.removeDomObserve();
         event.on(event$1.target, "dragstart", (e) => e.preventDefault());
         const node = editor.findNode(event$1.target);
         const index = node.parent.children.findIndex((item) => item.isEqual(node));
@@ -38208,10 +38087,10 @@ class Editor {
     checkNodes.apply(this);
     setPlaceholder.apply(this);
     const oldHtml = this.$el.innerHTML;
-    removeDomObserve(this);
+    this.removeDomObserve();
     const useDefault = typeof this.onUpdateView == "function" ? await this.onUpdateView.apply(this, [false]) : true;
     useDefault && defaultUpdateView.apply(this, [false]);
-    setDomObserve(this);
+    this.setDomObserve();
     const newHtml = this.$el.innerHTML;
     if (oldHtml != newHtml) {
       if (typeof this.onChange == "function") {
@@ -38275,10 +38154,10 @@ class Editor {
     });
     checkNodes.apply(this);
     setPlaceholder.apply(this);
-    removeDomObserve(this);
+    this.removeDomObserve();
     const useDefault = typeof this.onUpdateView == "function" ? await this.onUpdateView.apply(this, [true]) : true;
     if (useDefault) defaultUpdateView.apply(this, [true]);
-    setDomObserve(this);
+    this.setDomObserve();
     this.history.setState(this.stackNodes, this.selection);
     this.oldStackNodes = this.stackNodes.map((item) => item.fullClone());
     if (typeof this.afterUpdateView == "function") this.afterUpdateView.apply(this);
@@ -38365,6 +38244,135 @@ class Editor {
     }
     return true;
   }
+  /**
+   * 移除对编辑器的dom监听
+   */
+  removeDomObserve() {
+    if (this.domObserver) {
+      this.domObserver.disconnect();
+      this.domObserver = null;
+    }
+  }
+  /**
+   * 设置对编辑器的dom监听，主要解决非法dom插入问题
+   */
+  setDomObserve() {
+    if (!window.MutationObserver) {
+      console.warn("The current browser does not support MutationObserver");
+      return;
+    }
+    this.removeDomObserve();
+    this.domObserver = new MutationObserver((mutationList) => {
+      if (this.isComposition) {
+        return;
+      }
+      const updateRecords = [];
+      for (let i = 0; i < mutationList.length; i++) {
+        const mutationRecord = mutationList[i];
+        if (mutationRecord.type == "characterData") {
+          if (!updateRecords.find((item) => item.type === "update" && item.elm === mutationRecord.target)) {
+            updateRecords.push({
+              type: "update",
+              elm: mutationRecord.target
+            });
+          }
+        } else if (mutationRecord.type == "attributes") {
+          if (mutationRecord.target != this.$el && !updateRecords.find((item) => item.type === "update" && item.elm === mutationRecord.target)) {
+            updateRecords.push({
+              type: "update",
+              elm: mutationRecord.target
+            });
+          }
+        } else if (mutationRecord.type == "childList") {
+          if (mutationRecord.addedNodes.length > 0) {
+            mutationRecord.addedNodes.forEach((addNode) => {
+              if (!updateRecords.find((item) => item.type === "add" && item.elm === addNode)) {
+                updateRecords.push({
+                  type: "add",
+                  elm: addNode
+                });
+              }
+            });
+          }
+          if (mutationRecord.removedNodes.length > 0) {
+            mutationRecord.removedNodes.forEach((removedNode) => {
+              const recordIndex = updateRecords.findIndex((item) => item.type === "add" && item.elm === removedNode);
+              if (recordIndex > -1) {
+                updateRecords.splice(recordIndex, 1);
+              } else if (!updateRecords.find((item) => item.type === "remove" && item.elm === removedNode)) {
+                updateRecords.push({
+                  type: "remove",
+                  elm: removedNode
+                });
+              }
+            });
+          }
+        }
+      }
+      if (updateRecords.length > 0) {
+        updateRecords.forEach((record) => {
+          if (record.type === "update") {
+            const elm = record.elm.nodeType === 3 ? record.elm.parentNode : record.elm;
+            const nodeKey = elm.getAttribute(NODE_MARK);
+            const node = nodeKey ? KNode.searchByKey(nodeKey, this.stackNodes) : null;
+            if (node) {
+              const newNode2 = this.domParseNode(elm);
+              this.addNodeAfter(newNode2, node);
+              if (this.isSelectionInTargetNode(node, "start")) {
+                this.setSelectionAfter(newNode2, "start");
+              }
+              if (this.isSelectionInTargetNode(node, "end")) {
+                this.setSelectionAfter(newNode2, "end");
+              }
+              const index = (node.parent ? node.parent.children : this.stackNodes).findIndex((item) => item.isEqual(node));
+              (node.parent ? node.parent.children : this.stackNodes).splice(index, 1);
+            }
+          } else if (record.type === "add") {
+            if (updateRecords.some((item) => item.type === "update" && (item.elm.nodeType === 3 ? item.elm.parentNode : item.elm).contains(record.elm))) {
+              return;
+            }
+            const parentElement = record.elm.parentNode;
+            const index = Array.from(parentElement.childNodes).findIndex((item) => item === record.elm);
+            const node = this.domParseNode(record.elm);
+            if (parentElement === this.$el) {
+              this.stackNodes.splice(index, 0, node);
+            } else {
+              const nodeKey = parentElement.getAttribute(NODE_MARK);
+              const parentNode = nodeKey ? KNode.searchByKey(nodeKey, this.stackNodes) : null;
+              if (parentNode) this.addNode(node, parentNode, index);
+            }
+            parentElement.removeChild(record.elm);
+          } else if (record.type === "remove") {
+            if (updateRecords.some((item) => item.type === "update" && (item.elm.nodeType === 3 ? item.elm.parentNode : item.elm).contains(record.elm))) {
+              return;
+            }
+            const elm = record.elm.nodeType === 3 ? record.elm.parentNode : record.elm;
+            const nodeKey = elm.getAttribute(NODE_MARK);
+            const node = nodeKey ? KNode.searchByKey(nodeKey, this.stackNodes) : null;
+            if (node) {
+              const startInNode = this.isSelectionInTargetNode(node, "start");
+              const endInNode = this.isSelectionInTargetNode(node, "end");
+              node.toEmpty();
+              if (startInNode) {
+                this.updateSelectionRecently("start");
+              }
+              if (endInNode) {
+                this.updateSelectionRecently("end");
+              }
+            }
+          }
+        });
+        this.updateView();
+      }
+    });
+    this.domObserver.observe(this.$el, {
+      attributes: true,
+      characterData: true,
+      characterDataOldValue: true,
+      childList: true,
+      subtree: true
+    });
+  }
   /**
    * 配置编辑器，返回创建的编辑器
    */