@ones-editor/editor 2.1.1-beta.59 → 2.1.1-beta.60

package/@ones-editor/ui/src/providers/clipboard-provider.d.ts

@@ -11,9 +11,10 @@ export default class ClipboardProvider implements OnesEditorCommandProvider {
     get hasClipboardReadPermission(): boolean;
     get hasClipboardWritePermission(): boolean;
     clipboardSupport(): void;
-    canPaste(): boolean;
+    canPaste(): Promise<boolean>;
+    createPasteElement(editor: OnesEditor): HTMLDivElement;
     getAvailableCommands: (editor: OnesEditor, blockElement: BlockElement) => CommandItem[];
     getInsertCommands: () => never[];
     copyRange(editor: OnesEditor, range: SelectionRange): void;
-    executeCommand(editor: OnesEditor, block: BlockElement, range: SelectionRange, command: CommandItem): boolean;
+    executeRangeCommand(editor: OnesEditor, range: SelectionRange, command: CommandItem): boolean;
 }

package/dist/index.js

@@ -2026,6 +2026,9 @@ div.tippy-box[data-theme=editor-tooltip] > .tippy-content {
 [data-command-bar-id] .command-item.disabled > .color-button svg {
   color: #b2bccd;
 }
+[data-command-bar-id] .command-item .command-item-paste.disabled {
+  color: #c7c7c7;
+}
 [data-command-bar-id=cursor-toolbar].mobile .tippy-box,
 [data-command-bar-id=paste-special-button].mobile .tippy-box,
 [data-command-bar-id=editor-toolbar].mobile .tippy-box {
@@ -6513,16 +6516,19 @@ div[data-command-bar-id=mobile-bottom-menu] .mobile-menu-wrap.editor-mention .co
 html, body {
   height: 100%;
   overscroll-behavior: contain;
-}.editor-root .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle {
+}[data-command-bar-id=editor-toolbar] .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle,
+.editor-root .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle {
   position: absolute;
   flex-direction: column;
   align-items: center;
   display: none;
   z-index: 10;
 }
+[data-command-bar-id=editor-toolbar] .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle.active,
 .editor-root .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle.active {
   display: flex;
 }
+[data-command-bar-id=editor-toolbar] .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle .line,
 .editor-root .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle .line {
   width: 4px;
   height: 16px;
@@ -6530,6 +6536,7 @@ html, body {
   flex-grow: 1;
   flex-shrink: 1;
 }
+[data-command-bar-id=editor-toolbar] .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle .circle,
 .editor-root .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle .circle {
   width: 16px;
   height: 16px;
@@ -6538,20 +6545,33 @@ html, body {
   flex-shrink: 0;
   background-color: var(--primary-color);
 }
+[data-command-bar-id=editor-toolbar] .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle.start,
 .editor-root .editor-content div[data-type=editor-block] div[data-type=block-tools] div.select-handle.start {
   flex-direction: column-reverse;
+}
+div.editor-root div.editor-content div[data-block-type=embed] > .embed-mask::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  opacity: 0;
 }.editor-root.readonly [data-type=editor-container].root div[data-type=editor-block].layout-block .layout-column-container.layout-column-container {
   background-color: transparent;
 }
 .editor-root div.editor-content div[data-type=editor-container].root > .container-blocks > * + .layout-block {
   margin-top: 1.67em;
 }
+.editor-root.mobile [data-type=editor-container].root div[data-type=editor-block].layout-block .layout-column-action-bar,
 .editor-root.readonly [data-type=editor-container].root div[data-type=editor-block].layout-block .layout-column-action-bar,
 .editor-content.dragging [data-type=editor-container].root div[data-type=editor-block].layout-block .layout-column-action-bar {
   display: none;
   user-select: none;
   pointer-events: none;
 }
+.editor-root.mobile [data-type=editor-container].root div[data-type=editor-block].layout-block .layout-separator,
 .editor-root.readonly [data-type=editor-container].root div[data-type=editor-block].layout-block .layout-separator,
 .editor-content.dragging [data-type=editor-container].root div[data-type=editor-block].layout-block .layout-separator {
   opacity: 0;
@@ -11191,11 +11211,29 @@ var __publicField = (obj, key, value) => {
   function ensureIsMobileEvent(events2) {
     return events2 instanceof TouchEvent;
   }
+  function bindDbClick(elem, handler) {
+    let touchTime = 0;
+    const callback = (event) => {
+      if (touchTime === 0) {
+        touchTime = new Date().getTime();
+      } else {
+        if (new Date().getTime() - touchTime < 800) {
+          handler(event);
+        }
+        touchTime = 0;
+      }
+    };
+    elem.addEventListener("click", callback);
+    return () => {
+      elem.removeEventListener("click", callback);
+    };
+  }
   class RootContainer {
     constructor(editor, rootContainer) {
       __publicField(this, "resizeObserver");
       __publicField(this, "isMoved", false);
       __publicField(this, "mouseDownEvent", null);
+      __publicField(this, "dbClickRef", null);
       __publicField(this, "handleContextMenu", (event) => {
         if (clientType.isSafari) {
           const sel = document.getSelection();
@@ -11344,7 +11382,11 @@ var __publicField = (obj, key, value) => {
         container.oncontextmenu = this.handleContextMenu;
         container.onclick = this.handleClick;
       }
-      container.ondblclick = this.handleDblClick;
+      if (clientType.isIOS) {
+        this.dbClickRef = bindDbClick(container, this.handleDblClick);
+      } else {
+        container.ondblclick = this.handleDblClick;
+      }
     }
     unbindEvents() {
       this.resizeObserver.disconnect();
@@ -11353,6 +11395,10 @@ var __publicField = (obj, key, value) => {
       container.ondblclick = null;
       container.onclick = null;
       container.oncontextmenu = null;
+      if (this.dbClickRef) {
+        this.dbClickRef();
+        this.dbClickRef = null;
+      }
     }
     destroy() {
       this.unbindEvents();
@@ -46456,8 +46502,8 @@ ${codeText}
         const pasteItem = {
           id: "paste",
           name: i18n$1.t("commands.paste"),
-          icon: PasteSpecialIcon,
-          states: this.canPaste() ? [] : ["disabled"]
+          element: this.createPasteElement(editor),
+          states: []
         };
         const items = [cutItem, copyItem];
         if (this.options.withPaste) {
@@ -46522,23 +46568,45 @@ ${codeText}
         };
       }
     }
-    canPaste() {
+    async canPaste() {
       const hasReadPermission = this.hasClipboardReadPermission;
       let clipboardEmpty;
       if (isFirefox() || isSafari()) {
         clipboardEmpty = true;
       } else {
-        clipboardEmpty = hasReadPermission;
+        clipboardEmpty = hasReadPermission ? await isClipboardEmpty$1() : false;
       }
       return this.isSecureContext && this.clipboardPermission.read !== "denied" && !clipboardEmpty;
     }
+    createPasteElement(editor) {
+      const pasteItemElement = createElement("div", ["command-item-paste"], null);
+      pasteItemElement.textContent = i18n$1.t("commands.paste");
+      this.canPaste().then((canPaste) => {
+        if (!canPaste) {
+          pasteItemElement.classList.add("disabled");
+        }
+      });
+      pasteItemElement.addEventListener("click", () => {
+        if (pasteItemElement.classList.contains("disabled")) {
+          return;
+        }
+        getClipboardData$1().then((clipboardData) => {
+          const event = new ClipboardEvent("paste", {
+            clipboardData,
+            bubbles: true
+          });
+          editor.input.inputElement.dispatchEvent(event);
+        });
+      });
+      return pasteItemElement;
+    }
     copyRange(editor, range) {
       const selectedBlocks = range.getSelectedBlocks();
       const docs = selectedBlocks.map((s) => selectedBlockToDoc(editor, s));
       const doc2 = mergeDocs(docs);
       editorCopyDoc(editor, doc2);
     }
-    executeCommand(editor, block, range, command) {
+    executeRangeCommand(editor, range, command) {
       if (command.id === "copy") {
         this.copyRange(editor, range);
         return true;
@@ -46548,16 +46616,6 @@ ${codeText}
         editorClearSelectedContents(editor, range);
         return true;
       }
-      if (command.id === "paste") {
-        getClipboardData$1().then((clipboardData) => {
-          const event = new ClipboardEvent("paste", {
-            clipboardData,
-            bubbles: true
-          });
-          editor.input.inputElement.dispatchEvent(event);
-        });
-        return true;
-      }
       return false;
     }
   }
@@ -46582,11 +46640,14 @@ ${codeText}
       return items;
     }
     executeCommand(editor, block, box, item) {
-      var _a;
+      var _a, _b;
       const { start, end } = getChildOffset(block, box);
       const range = createBlockSimpleRange(editor, block, start, end);
       for (const provider of this.providers) {
-        if ((_a = provider.executeCommand) == null ? void 0 : _a.call(provider, editor, block, range, item, {})) {
+        if ((_a = provider.executeRangeCommand) == null ? void 0 : _a.call(provider, editor, range, item, {})) {
+          return;
+        }
+        if ((_b = provider.executeCommand) == null ? void 0 : _b.call(provider, editor, block, range, item, {})) {
           return;
         }
       }
@@ -50221,7 +50282,7 @@ ${codeText}
         this.provider.executeCommand(editor, block, editor.selection.range, item, { child });
         const { start, end } = getChildOffset(block, child);
         const range = createBlockSimpleRange(editor, block, start, end);
-        this.clipboardProvider.executeCommand(editor, block, range, item);
+        this.clipboardProvider.executeRangeCommand(editor, range, item);
       });
       this.editor = editor;
       this.clipboardProvider = new ClipboardProvider(this.editor, { withPaste: true });
@@ -50328,7 +50389,7 @@ ${codeText}
         this._lastClickTime = Date.now();
       });
       __publicField(this, "handleClose", () => {
-        if (shouldFocusToEditor(this.editor)) {
+        if (shouldFocusToEditor(this.editor) && !clientType.isMobile) {
           this.editor.focus({
             preventScroll: true
           });
@@ -69101,7 +69162,7 @@ ${codeText}
       scrollContainer.init({
         parentElement: content,
         childElement: tableContent,
-        safeRightSpace: 50,
+        safeRightSpace: clientType.isMobile ? 20 : 50,
         safeLeftSpace: 40,
         parentContainer: isRootContainer(container) || !containerScrollable ? editor.scrollContainer : container,
         locatingContainer: isRootContainer(container) ? (options == null ? void 0 : options.locatingContainer) || editor.parent : container,
@@ -78318,7 +78379,7 @@ ${content}
       __publicField(this, "createMobileCommandItem", (items) => {
         this.mobileWrap = createElement("div", ["mobile-item-wrap"], null);
         const content = createElement("div", ["mobile-item-content"], null);
-        const clientHeight = this.editor.rootContainer.clientHeight;
+        const clientHeight = this.editor.scrollContainer.clientHeight;
         content.style.maxHeight = `${clientHeight - 180}px`;
         const icon = createElement("div", ["editor-input-icon"], null);
         icon.innerHTML = SearchIcon;
@@ -79493,10 +79554,10 @@ ${content}
       const endToolsRect = endBlock.getBoundingClientRect();
       const startGripperHeight = startRect.height + HANDLE_CIRCLE_SIZE;
       const endGripperHeight = endRect.height + HANDLE_CIRCLE_SIZE;
-      const startX = startRect.left - startToolsRect.left - HANDLE_WIDTH / 2;
-      const startY = startRect.top - startToolsRect.top - HANDLE_CIRCLE_SIZE;
-      const endX = endRect.left - endToolsRect.left - HANDLE_WIDTH / 2;
-      const endY = endRect.top - endToolsRect.top;
+      const startX = startRect.left - startToolsRect.left - startBlock.clientLeft - HANDLE_WIDTH / 2;
+      const startY = startRect.top - startToolsRect.top - startBlock.clientTop - HANDLE_CIRCLE_SIZE;
+      const endX = endRect.left - endToolsRect.left - endBlock.clientLeft - HANDLE_WIDTH / 2;
+      const endY = endRect.top - endToolsRect.top - endBlock.clientTop;
       this.startGripper.style.left = `${startX}px`;
       this.startGripper.style.top = `${startY}px`;
       this.endGripper.style.left = `${endX}px`;
@@ -79612,14 +79673,14 @@ ${content}
   class CursorToolbarHandler {
     constructor(editor) {
       __publicField(this, "toolbar");
+      __publicField(this, "clipboardProvider");
       __publicField(this, "handleButtonClick", (toolbar2, item) => {
-        const focusBlock = this.editor.selection.focusedBlock;
         const range = this.editor.selection.range;
         if (item.id === "select") {
           editorSelectWord(this.editor);
         }
         if (item.id === "paste") {
-          new ClipboardProvider(this.editor, { withPaste: true }).executeCommand(this.editor, focusBlock, range, item);
+          this.clipboardProvider.executeRangeCommand(this.editor, range, item);
         }
       });
       __publicField(this, "handleSelectionChange", () => {
@@ -79628,7 +79689,7 @@ ${content}
       __publicField(this, "getCommands", () => {
         const commands = [{ id: "select", name: i18n$1.t("mobile.commands.select") }];
         const focusBlock = this.editor.selection.focusedBlock;
-        const clipboardCommands = new ClipboardProvider(this.editor, { withPaste: true }).getAvailableCommands(this.editor, focusBlock);
+        const clipboardCommands = this.clipboardProvider.getAvailableCommands(this.editor, focusBlock);
         clipboardCommands.filter((cmd) => cmd.id === "paste").forEach((cmd) => commands.push(cmd));
         return groupEachCommand(commands);
       });
@@ -79657,6 +79718,7 @@ ${content}
       });
       this.toolbar.on("click", this.handleButtonClick);
       this.editor.addListener("selectionChanged", this.handleSelectionChange);
+      this.clipboardProvider = new ClipboardProvider(this.editor, { withPaste: true });
     }
     destroy() {
       this.editor.removeListener("selectionChanged", this.handleSelectionChange);
@@ -79740,7 +79802,7 @@ ${content}
         ];
       });
       this.editor = editor;
-      this.providers = [new HeadingProvider(editor)];
+      this.providers = [new HeadingProvider(editor, { withPlainText: true })];
     }
   }
   class TabProvider {
@@ -79956,6 +80018,7 @@ ${content}
     destroy() {
       this.editor.removeListener("selectionChanged", this.handleSelectionChange);
       this.mobileToolbar.destroy();
+      this.bar.remove();
     }
   }
   class ActiveElementObserver {
@@ -79984,10 +80047,11 @@ ${content}
       __publicField(this, "observer");
       __publicField(this, "showKeyboard", false);
       __publicField(this, "initViewportHeight", this.window.visualViewport.height);
+      __publicField(this, "toggleDelay", clientType.isSafari ? 800 : 100);
       __publicField(this, "toggle", debounce__default.default(() => {
         const offsetHeight = Math.max(this.clientHeight - this.virtualViewportHeight, 0);
         this.commandBar.bar.style.bottom = `${offsetHeight}px`;
-      }, 100));
+      }, this.toggleDelay));
       __publicField(this, "handleFocusIn", () => {
         if (!this.showKeyboard) {
           this.showKeyboard = true;
@@ -80076,6 +80140,39 @@ ${content}
     "en-US": enUS$7,
     "ja-JP": jaJP$7
   });
+  class MobileEmbedMask {
+    constructor(editor) {
+      __publicField(this, "addMask", (block) => {
+        const content = getBlockContent(block);
+        addClass(content, "embed-mask");
+      });
+      __publicField(this, "removeMask", (block) => {
+        const content = getBlockContent(block);
+        removeClass(content, "embed-mask");
+      });
+      __publicField(this, "handleSelectionChanged", debounce__default.default(() => {
+        if (this.editor.readonly) {
+          return;
+        }
+        const { start, end } = this.editor.selection.range;
+        this.editor.rootContainer.querySelectorAll("div.embed-block[data-type=editor-block][data-block-type=embed]").forEach((blockElem) => {
+          const block = blockElem;
+          const blockId = getBlockId(block);
+          if (start.blockId === end.blockId && start.blockId === blockId) {
+            this.removeMask(block);
+            return;
+          }
+          this.addMask(block);
+        });
+      }, 400));
+      this.editor = editor;
+      this.editor.addListener("selectionChanged", this.handleSelectionChanged);
+      this.handleSelectionChanged();
+    }
+    destroy() {
+      this.editor.removeListener("selectionChanged", this.handleSelectionChanged);
+    }
+  }
   const LONG_PRESS_DELAY = 800;
   class OnesEditorMobileHelper {
     constructor(editor) {
@@ -80084,9 +80181,10 @@ ${content}
       __publicField(this, "gripper");
       __publicField(this, "cursorToolbar");
       __publicField(this, "isMoving", false);
-      __publicField(this, "handleSelectionChange", () => {
+      __publicField(this, "mobileEmbedMask");
+      __publicField(this, "handleSelectionChange", debounce__default.default(() => {
         this.gripper.update();
-      });
+      }, 10));
       __publicField(this, "handleLongPress", (event) => {
         const touch = event.touches[0];
         const range = getBlockRangeFromPoint(this.editor, touch.clientX, touch.clientY);
@@ -80157,6 +80255,7 @@ ${content}
       document.addEventListener("touchmove", this.handleTouchMove);
       this.gripper = new SelectionGripper(this.editor);
       this.cursorToolbar = createCursorToolbar(this.editor);
+      this.mobileEmbedMask = new MobileEmbedMask(this.editor);
     }
     destroy() {
       this.editor.removeListener("selectionChanged", this.handleSelectionChange);
@@ -80164,6 +80263,9 @@ ${content}
       document.removeEventListener("touchstart", this.handleTouchStart);
       document.removeEventListener("touchend", this.handleTouchEnd);
       document.removeEventListener("touchmove", this.handleTouchMove);
+      this.mobileEmbedMask.destroy();
+      this.cursorToolbar.destroy();
+      this.gripper.destroy();
     }
   }
   function getChildContainers(editor, block, from, to) {
@@ -83175,6 +83277,9 @@ ${content}
         content.style.height = `${embedData.height}px`;
       }
       setTimeout(() => {
+        if (clientType.isMobile) {
+          return;
+        }
         const blockElement = this.editor.getBlockById(id);
         EmbedBlockResizer.register(this.editor, blockElement);
       });
@@ -86551,7 +86656,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.1-beta.59";
+    editor.version = "2.1.1-beta.60";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -86649,7 +86754,7 @@ ${data2.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.1.1-beta.59";
+    editor.version = "2.1.1-beta.60";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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