@ones-editor/editor 1.2.0-beta.6 → 1.2.0-beta.9

package/dist/index.js

@@ -6080,27 +6080,28 @@ div.editor-root div.editor-content div[data-type=editor-container] div[data-embe
   width: 100%;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: start;
   background-color: antiquewhite;
   gap: 20px;
   padding: 0 20px;
   flex-wrap: wrap;
+  overflow-x: auto;
 }
 .command-m-bar .command-m-container {
   display: flex;
-  width: 100%;
 }
 .command-m-bar .command-item {
-  width: 40px;
+  width: 80px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .command-m-bar .child-layout {
-  height: 300px;
+  height: 280px;
   width: 100%;
   display: flex;
+  display: none;
 }
 .command-m-bar .child-layout .child-item {
   width: 80px;
@@ -7428,6 +7429,36 @@ var __publicField = (obj, key, value) => {
     });
     return elem || document.body;
   }
+  function ensureIsMobileEvent$1(events2) {
+    return clientType.isMobile;
+  }
+  function createMouseEventFromTouchEvent(event, type) {
+    const touch = event.changedTouches[0];
+    const mouseEvent = new MouseEvent("mousedown", {
+      bubbles: true,
+      cancelable: true,
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      screenX: touch.screenX,
+      screenY: touch.screenY,
+      button: 0
+    });
+    Object.defineProperty(mouseEvent, "target", { value: event.target, enumerable: true });
+    return mouseEvent;
+  }
+  function bindTouchEnd(elem, callback) {
+    let isMove = false;
+    window.addEventListener("touchmove", () => {
+      isMove = true;
+    });
+    window.addEventListener("touchend", (e2) => {
+      if (isMove) {
+        e2.stopPropagation();
+      }
+      isMove = false;
+    }, true);
+    elem.addEventListener("touchend", callback);
+  }
   class ScrollDomElement {
     constructor(element) {
       __publicField(this, "element");
@@ -9844,6 +9875,9 @@ var __publicField = (obj, key, value) => {
   }
   const logger$3W = getLogger("root-container");
   const MIN_DISTANCE_THRESHOLD = 3;
+  function ensureIsMobileEvent(events2) {
+    return events2 instanceof TouchEvent;
+  }
   class RootContainer {
     constructor(editor, rootContainer) {
       __publicField(this, "resizeObserver");
@@ -9866,19 +9900,25 @@ var __publicField = (obj, key, value) => {
         }
       });
       __publicField(this, "handleClick", (event) => {
-        this.editor.emit("click", this.editor, event);
-        const target = event.target;
+        if (!this.mouseDownEvent)
+          return;
+        const mouseEvent = ensureIsMobileEvent(event) ? createMouseEventFromTouchEvent(event) : event;
+        this.editor.emit("click", this.editor, mouseEvent);
+        const target = ensureIsMobileEvent(this.mouseDownEvent) ? this.mouseDownEvent.changedTouches[0].target : this.mouseDownEvent.target;
         if (isInBlockTools(target)) {
+          this.mouseDownEvent = null;
           return;
         }
-        if (event.detail === 1) {
+        if (event.detail === 1 || clientType.isMobile) {
           this.editor.input.focus();
         }
-        if (event.detail === 3) {
+        if (!ensureIsMobileEvent(event) && event.detail === 3) {
           this.editor.selectionHandler.handleTripleClick(event);
         }
-        if (event.detail === 1 && event.button === 0) {
-          const elem = getElementFromPoint(event.clientX, event.clientY);
+        if (event.detail === 1 || (ensureIsMobileEvent(event) || event.button === 0)) {
+          const clientX = ensureIsMobileEvent(event) ? event.changedTouches[0].clientX : event.clientX;
+          const clientY = ensureIsMobileEvent(event) ? event.changedTouches[0].clientY : event.clientY;
+          const elem = getElementFromPoint(clientX, clientY);
           if (elem && isChildNode(this.rootContainer, elem)) {
             const block = getParentBlock(elem);
             if (block && isChildNode(block, elem)) {
@@ -9886,17 +9926,19 @@ var __publicField = (obj, key, value) => {
             }
           }
         }
+        this.mouseDownEvent = null;
       });
       __publicField(this, "handleBlockClick", (event, block, elem) => {
         var _a, _b;
         if (!isTextKindBlock(this.editor, block)) {
           return;
         }
+        const mouseEvent = ensureIsMobileEvent(event) ? createMouseEventFromTouchEvent(event) : event;
         const box = getParentBox(elem);
         if (box) {
           const block2 = getParentBlock(box);
           assert(logger$3W, block2, "no parent block");
-          (_b = (_a = this.editor.editorBoxes.getBoxClass(getBoxTypeFromElement(box))) == null ? void 0 : _a.handleClickBox) == null ? void 0 : _b.call(_a, this.editor, box, event);
+          (_b = (_a = this.editor.editorBoxes.getBoxClass(getBoxTypeFromElement(box))) == null ? void 0 : _a.handleClickBox) == null ? void 0 : _b.call(_a, this.editor, box, mouseEvent);
           return;
         }
         const link2 = elem.closest("span.text.link");
@@ -9904,7 +9946,7 @@ var __publicField = (obj, key, value) => {
           const children = getTextBlockContentChildren(block);
           const index2 = children.indexOf(link2);
           if (index2 !== -1) {
-            this.editor.emit("clickLink", this.editor, event, link2);
+            this.editor.emit("clickLink", this.editor, mouseEvent, link2);
           }
         }
       });
@@ -9928,7 +9970,7 @@ var __publicField = (obj, key, value) => {
         if (isInBlockTools(target)) {
           return;
         }
-        if (event.button === 2) {
+        if (!ensureIsMobileEvent(event) && event.button === 2) {
           event.stopPropagation();
           return;
         }
@@ -9938,17 +9980,19 @@ var __publicField = (obj, key, value) => {
           this.editor.input.focus();
           return;
         }
-        if (event.button === 0) {
-          document.addEventListener("mousemove", this.handleMouseMove);
-          document.addEventListener("mouseup", this.handleMouseUp);
+        if (ensureIsMobileEvent(event) || event.button === 0) {
+          if (!clientType.isMobile) {
+            document.addEventListener("mousemove", this.handleMouseMove);
+            document.addEventListener("mouseup", this.handleMouseUp);
+          }
           this.editor.selectionHandler.handleMouseDown(event, { autoScroll: true });
         }
-        if (!clientType.isMobileSafari) {
-          this.editor.input.focus();
-        }
+        this.editor.input.focus();
       });
       __publicField(this, "handleMouseMove", (event) => {
         assert(logger$3W, this.mouseDownEvent, "no mouse down event");
+        if (ensureIsMobileEvent(this.mouseDownEvent))
+          return;
         const deltaX = event.x - this.mouseDownEvent.x;
         const deltaY = event.y - this.mouseDownEvent.y;
         if (Math.abs(deltaX) >= MIN_DISTANCE_THRESHOLD || Math.abs(deltaY) >= MIN_DISTANCE_THRESHOLD) {
@@ -9985,10 +10029,15 @@ var __publicField = (obj, key, value) => {
     bindEvents(rootContainer) {
       this.resizeObserver.observe(rootContainer);
       const container = this.editor.rootElement;
-      container.onmousedown = this.handleMouseDown;
+      if (clientType.isMobile) {
+        bindTouchEnd(container, this.handleMouseDown);
+        container.onclick = this.handleClick;
+      } else {
+        container.onmousedown = this.handleMouseDown;
+        container.oncontextmenu = this.handleContextMenu;
+        container.onclick = this.handleClick;
+      }
       container.ondblclick = this.handleDblClick;
-      container.onclick = this.handleClick;
-      container.oncontextmenu = this.handleContextMenu;
     }
     unbindEvents() {
       this.resizeObserver.disconnect();
@@ -23068,7 +23117,7 @@ var __publicField = (obj, key, value) => {
       input2.addEventListener("compositionend", this.handleCompositionend);
       this.inputElement = input2;
       if (clientType.isMobile) {
-        document.addEventListener("touchend", this.handleDocumentClick);
+        bindTouchEnd(document, this.handleDocumentClick);
       } else {
         document.addEventListener("click", this.handleDocumentClick);
       }
@@ -25259,7 +25308,7 @@ var __publicField = (obj, key, value) => {
     if (newEndPos.blockId !== currentBlockId) {
       newEndPos = createSimpleBlockPosition(block, getBlockTextLength$4(editor, block), "end");
     }
-    editor.selection.setSelection(newStartPos, newEndPos);
+    editor.selection.setSelection(newStartPos, newEndPos, { noScroll: true });
   }
   function editorFocusToEnd(editor) {
     editorSelectEnd(editor);
@@ -25683,7 +25732,9 @@ var __publicField = (obj, key, value) => {
       __publicField(this, "handleMouseDown", (event, options) => {
         var _a;
         this.mouseDownEvent = event;
-        const range = getBlockNearestRangeFromPoint(this.editor, event.x, event.y);
+        const x = ensureIsMobileEvent$1() ? event.changedTouches[0].clientX : event.x;
+        const y = ensureIsMobileEvent$1() ? event.changedTouches[0].clientY : event.y;
+        const range = getBlockNearestRangeFromPoint(this.editor, x, y);
         if (range) {
           if (range instanceof EditorComplexSelectionRange) {
             return;
@@ -25719,6 +25770,8 @@ var __publicField = (obj, key, value) => {
           return;
         if (!this.mouseDownEvent)
           return;
+        if (ensureIsMobileEvent$1(this.mouseDownEvent))
+          return;
         if (Math.abs(this.mouseDownEvent.x - event.x) < 3 && Math.abs(this.mouseDownEvent.y - event.y) < 3) {
           return;
         }
@@ -71960,7 +72013,7 @@ ${codeText}
       __publicField(this, "handleLongPress", (event) => {
         const touch = event.touches[0];
         const range = getBlockRangeFromPoint(this.editor, touch.clientX, touch.clientY);
-        if (!range) {
+        if (!range || this.isMoving) {
           return;
         }
         if (!range.isSimple()) {
@@ -71975,7 +72028,12 @@ ${codeText}
         this.editor.selection.selectBlock(block, start.offset);
         editorSelectWord(this.editor);
       });
+      __publicField(this, "isMoving", false);
+      __publicField(this, "handleTouchMove", (event) => {
+        this.isMoving = true;
+      });
       __publicField(this, "handleTouchStart", (event) => {
+        this.isMoving = false;
         if (event.touches.length === 1) {
           this.longPressTimeout = window.setTimeout(() => {
             this.handleLongPress(event);
@@ -71987,11 +72045,13 @@ ${codeText}
           window.clearTimeout(this.longPressTimeout);
           this.longPressTimeout = 0;
         }
+        this.isMoving = false;
       });
       this.editor = editor;
       this.editor.addListener("selectionChanged", this.handleSelectionChange);
       document.addEventListener("touchstart", this.handleTouchStart);
       document.addEventListener("touchend", this.handleTouchEnd);
+      document.addEventListener("touchmove", this.handleTouchMove);
       this.gripper = new SelectionGripper(this.editor);
     }
     destroy() {
@@ -75327,7 +75387,9 @@ ${data.flowchartText}
       __publicField(this, "createLayout", (parent, children) => {
         const layout = new Layout(children);
         layout.appendTo(parent);
-        layout.show();
+        setTimeout(() => {
+          layout.show();
+        }, 300);
         return layout;
       });
       __publicField(this, "handleChildTouchStart", (item) => {
@@ -75342,6 +75404,7 @@ ${data.flowchartText}
       });
       __publicField(this, "handleTouchStart", (event, command) => {
         var _a, _b;
+        console.log("handleTouchStart");
         const elem = event.changedTouches[0].target;
         if (!(elem instanceof HTMLElement)) {
           return;
@@ -75353,13 +75416,15 @@ ${data.flowchartText}
             item.hidden();
           } else if (keyd === key) {
             item == null ? void 0 : item.appendTo(parent);
-            item.show();
+            setTimeout(() => {
+              item.show();
+            }, 300);
           }
         });
         if (command.id === "add") {
           const children = [{ name: "\u6807\u98981" }].map((item) => {
             const childItem = createElement("div", ["child-item"], null, item.name);
-            childItem.ontouchstart = () => this.handleChildTouchStart(item);
+            childItem.addEventListener("touchend", () => this.handleChildTouchStart(item));
             return childItem;
           });
           if (!this.layoutMap.has(key)) {
@@ -75371,7 +75436,7 @@ ${data.flowchartText}
           const parent2 = (_b = elem.parentElement) == null ? void 0 : _b.parentElement;
           const children = [{ name: "\u80CC\u666F\u8272" }].map((item) => {
             const childItem = createElement("div", ["child-item"], null, item.name);
-            childItem.ontouchstart = () => this.handleChildTouchStart(item);
+            childItem.addEventListener("touchend", () => this.handleChildTouchStart(item));
             return childItem;
           });
           if (!this.layoutMap.has(key)) {
@@ -75384,7 +75449,7 @@ ${data.flowchartText}
         const fragment = document.createDocumentFragment();
         commands.forEach((command) => {
           const elem = createElement("div", ["command-item"], fragment, command.name);
-          elem.ontouchstart = (e2) => this.handleTouchStart(e2, command);
+          bindTouchEnd(elem, (e2) => this.handleTouchStart(e2, command));
         });
         container.appendChild(fragment);
       });
@@ -75435,6 +75500,27 @@ ${data.flowchartText}
         }, {
           id: "color",
           name: "A"
+        }, {
+          id: "heading",
+          name: "H"
+        }, {
+          id: "list",
+          name: "L"
+        }, {
+          id: "table",
+          name: "T"
+        }, {
+          id: "checkbox",
+          name: "C"
+        }, {
+          id: "link",
+          name: "L"
+        }, {
+          id: "quote",
+          name: "Q"
+        }, {
+          id: "image",
+          name: "I"
         }]
       });
       document.addEventListener("focusin", this.handleFocusIn);
@@ -76949,7 +77035,7 @@ ${data.flowchartText}
         }
       }
     });
-    editor.version = "1.2.0-beta.6";
+    editor.version = "1.2.0-beta.9";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -77042,7 +77128,7 @@ ${data.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "1.2.0-beta.6";
+    editor.version = "1.2.0-beta.9";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -77167,6 +77253,7 @@ ${data.flowchartText}
   exports2.assert = assert;
   exports2.autoShowHideTemplates = autoShowHideTemplates;
   exports2.bindKeyDownEvent = bindKeyDownEvent;
+  exports2.bindTouchEnd = bindTouchEnd;
   exports2.blockToDoc = blockToDoc;
   exports2.blockToHtml = blockToHtml;
   exports2.blockToMarkdown = blockToMarkdown;
@@ -77227,6 +77314,7 @@ ${data.flowchartText}
   exports2.createInsertionContentElement = createInsertionContentElement;
   exports2.createInsertionElement = createInsertionElement;
   exports2.createLocalEditor = createLocalEditor;
+  exports2.createMouseEventFromTouchEvent = createMouseEventFromTouchEvent;
   exports2.createOnesEditor = createOnesEditor;
   exports2.createRange = createRange;
   exports2.createRichText = createRichText;
@@ -77318,6 +77406,7 @@ ${data.flowchartText}
   exports2.editorUpdateCompositionText = editorUpdateCompositionText;
   exports2.editorUpdateEmbedData = editorUpdateEmbedData;
   exports2.enablePageScroll = enablePageScroll;
+  exports2.ensureIsMobileEvent = ensureIsMobileEvent$1;
   exports2.escapeHtmlText = escapeHtmlText;
   exports2.escapeRegExp = escapeRegExp;
   exports2.escapeSpace = escapeSpace;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ones-editor/editor",
-  "version": "1.2.0-beta.6",
+  "version": "1.2.0-beta.9",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",