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

package/lib/kaitify-core.es.js

@@ -3240,12 +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);
@@ -3311,30 +3309,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();
@@ -3351,80 +3325,107 @@ const setDomObserve = (editor) => {
     if (editor.isComposition) {
       return;
     }
-    let hasUpdate = false;
-    const illegalDoms = [];
+    const updateRecords = [];
     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;
+        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") {
-        const elements = Array.from(mutationRecord.addedNodes).filter((item) => !isLegalDom(editor, item));
-        if (elements.length > 0) {
-          const parentElement = mutationRecord.target;
+        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) {
-            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;
-            });
+            editor.stackNodes.splice(index, 0, node);
           } 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;
-            });
+            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");
+            }
           }
         }
-      }
-    }
-    if (hasUpdate) {
-      illegalDoms.forEach((item) => {
-        item.remove();
       });
       editor.updateView();
     }
   });
   editor.domObserver.observe(editor.$el, {
-    attributes: false,
+    attributes: true,
     characterData: true,
     characterDataOldValue: true,
     childList: true,
@@ -38320,6 +38321,51 @@ class Editor {
     }
     return `<style>${styles2}</style><div class="kaitify">${this.$el.innerHTML}</div>`;
   }
+  /**
+   * 判断光标是否完全在可视范围内
+   */
+  isSelectionInView() {
+    if (this.selection.focused()) {
+      const focusDom = this.findDom(this.selection.end.node);
+      const isInView = (scrollElement) => {
+        const scrollHeight = element.getScrollHeight(scrollElement);
+        const scrollWidth = element.getScrollWidth(scrollElement);
+        if (scrollElement.clientHeight < scrollHeight || scrollElement.clientWidth < scrollWidth) {
+          const selection = window.getSelection();
+          const range = selection.getRangeAt(0);
+          const rects = range.getClientRects();
+          let target = range;
+          if (rects.length == 0) {
+            target = focusDom;
+          }
+          const childRect = target.getBoundingClientRect();
+          const parentRect = scrollElement.getBoundingClientRect();
+          if (scrollElement.clientHeight < scrollHeight) {
+            if (childRect.top < parentRect.top || childRect.bottom > parentRect.bottom) {
+              return false;
+            }
+          }
+          if (scrollElement.clientWidth < scrollWidth) {
+            if (childRect.left < parentRect.left || childRect.right > parentRect.right) {
+              return false;
+            }
+          }
+        }
+        return true;
+      };
+      let inView = true;
+      let dom = focusDom;
+      while (element.isElement(dom) && dom != document.documentElement) {
+        if (!isInView(dom)) {
+          inView = false;
+          break;
+        }
+        dom = dom.parentNode;
+      }
+      return inView;
+    }
+    return true;
+  }
   /**
    * 配置编辑器，返回创建的编辑器
    */