@kaitify/core 0.0.1-beta.27 → 0.0.1-beta.29

package/lib/kaitify-core.es.js

@@ -3244,7 +3244,6 @@ const onComposition = async function(e) {
       if (this.isSelectionInTargetNode(parentNode)) {
         updateSelection$1.apply(this);
       }
-      await this.updateView();
     } else if (!parentNode.isText()) {
       const index = Array.from(parentElement.childNodes).findIndex((item) => item === element2);
       const node = this.domParseNode(element2);
@@ -3254,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) {
@@ -3309,129 +3307,6 @@ const onCut = function(e) {
     event2.preventDefault();
   }
 };
-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;
-    }
-    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 != editor.$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, editor.stackNodes) : null;
-          if (node) {
-            const newNode2 = editor.domParseNode(elm);
-            editor.addNodeAfter(newNode2, node);
-            if (editor.isSelectionInTargetNode(node, "start")) {
-              editor.setSelectionAfter(newNode2, "start");
-            }
-            if (editor.isSelectionInTargetNode(node, "end")) {
-              editor.setSelectionAfter(newNode2, "end");
-            }
-            const index = (node.parent ? node.parent.children : editor.stackNodes).findIndex((item) => item.isEqual(node));
-            (node.parent ? node.parent.children : editor.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 = editor.domParseNode(record.elm);
-          if (parentElement === editor.$el) {
-            editor.stackNodes.splice(index, 0, node);
-          } else {
-            const nodeKey = parentElement.getAttribute(NODE_MARK);
-            const parentNode = nodeKey ? KNode.searchByKey(nodeKey, editor.stackNodes) : null;
-            if (parentNode) editor.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, editor.stackNodes) : null;
-          if (node) {
-            const startInNode = editor.isSelectionInTargetNode(node, "start");
-            const endInNode = editor.isSelectionInTargetNode(node, "end");
-            node.toEmpty();
-            if (startInNode) {
-              editor.updateSelectionRecently("start");
-            }
-            if (endInNode) {
-              editor.updateSelectionRecently("end");
-            }
-          }
-        }
-      });
-      editor.updateView();
-    }
-  });
-  editor.domObserver.observe(editor.$el, {
-    attributes: true,
-    characterData: true,
-    characterDataOldValue: true,
-    childList: true,
-    subtree: true
-  });
-};
 class Extension {
   constructor(name) {
     /**
@@ -6208,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);
@@ -6376,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);
@@ -35941,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));
@@ -37078,7 +36956,7 @@ class Editor {
    * 如果编辑器内有滚动条，滚动编辑器到光标可视范围
    */
   scrollViewToSelection() {
-    if (this.selection.focused()) {
+    if (this.selection.focused() && this.isEditable()) {
       const focusDom = this.findDom(this.selection.end.node);
       const scrollFunction = async (scrollEl) => {
         const scrollHeight = element.getScrollHeight(scrollEl);
@@ -38209,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") {
@@ -38230,6 +38108,9 @@ class Editor {
    * 根据selection更新编辑器真实光标
    */
   async updateRealSelection() {
+    if (!this.isEditable()) {
+      return;
+    }
     const realSelection = window.getSelection();
     if (!realSelection) {
       return;
@@ -38266,9 +38147,11 @@ class Editor {
     }
   }
   /**
-   * 重新渲染编辑器视图，不会触发onChange
+   * 重新渲染编辑器视图
+   * 1. 不会触发onChange事件；
+   * 2. 不会渲染真实光标
    */
-  async review(value) {
+  async review(value, unPushHistory = false) {
     if (typeof this.beforeUpdateView == "function") this.beforeUpdateView.apply(this);
     this.stackNodes = this.htmlParseNode(value || "");
     this.formatRules.forEach((rule) => {
@@ -38276,11 +38159,13 @@ 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.history.setState(this.stackNodes, this.selection);
+    this.setDomObserve();
+    if (!unPushHistory) {
+      this.history.setState(this.stackNodes, this.selection);
+    }
     this.oldStackNodes = this.stackNodes.map((item) => item.fullClone());
     if (typeof this.afterUpdateView == "function") this.afterUpdateView.apply(this);
   }
@@ -38366,6 +38251,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
+    });
+  }
   /**
    * 配置编辑器，返回创建的编辑器
    */