@ones-editor/editor 2.1.7-beta.13 → 2.1.7-beta.14

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

@@ -2045,6 +2045,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 {
@@ -5843,7 +5846,7 @@ div[data-command-bar-id=mobile-bottom-menu] .mobile-menu-wrap.editor-mention .co
 }
 div[data-command-bar-id=mobile-bottom-menu] .mobile-menu-wrap.editor-mention .command-item .mobile-item-wrap .mobile-item-content {
   height: 400px;
-  overflow-x: auto;
+  overflow-y: auto;
   overscroll-behavior: contain;
 }
 div[data-command-bar-id=mobile-bottom-menu] .mobile-menu-wrap.editor-mention .command-item .mobile-item-wrap .mobile-item-content .mobile-item {
@@ -6526,16 +6529,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;
@@ -6543,6 +6549,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;
@@ -6551,20 +6558,36 @@ 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 {
+  pointer-events: none;
+}
+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;
@@ -7470,7 +7493,10 @@ div.editor-root div.editor-content div[data-type=editor-container] div[data-embe
   justify-content: center;
   max-width: 100%;
 }
-.embed-block[data-embed-type=video] > div[data-type=block-content] .media.full-screen, .embed-block[data-embed-type=audio] > div[data-type=block-content] .media.full-screen {
+.embed-block[data-embed-type=video] > div[data-type=block-content].full-screen, .embed-block[data-embed-type=audio] > div[data-type=block-content].full-screen {
+  width: 100%;
+}
+.embed-block[data-embed-type=video] > div[data-type=block-content] .media, .embed-block[data-embed-type=audio] > div[data-type=block-content] .media {
   width: 100%;
 }
 .embed-block[data-embed-type=video] > div[data-type=block-content] .media, .embed-block[data-embed-type=audio] > div[data-type=block-content] .media {
@@ -11220,11 +11246,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();
@@ -11373,7 +11417,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();
@@ -11382,6 +11430,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();
@@ -41335,10 +41387,10 @@ ${codeText}
       this.element.addEventListener("click", this.handleButtonClick);
       const color = Number.parseInt(editor.settingsProvider.getItem(`${storageName}-color`) || "", 10);
       const backgroundColor = Number.parseInt(editor.settingsProvider.getItem(`${storageName}-backgroundColor`) || "", 10);
-      if (color && !Number.isNaN(color)) {
+      if (!Number.isNaN(color)) {
         this.latestColors[0] = color;
       }
-      if (backgroundColor && !Number.isNaN(backgroundColor)) {
+      if (!Number.isNaN(backgroundColor)) {
         this.latestColors[1] = backgroundColor;
       }
       this.updateButtonColor(this.latestColors);
@@ -46820,8 +46872,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) {
@@ -46886,23 +46938,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;
@@ -46912,16 +46986,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;
     }
   }
@@ -46946,11 +47010,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;
         }
       }
@@ -50350,6 +50417,9 @@ ${codeText}
       this.editor = editor;
     }
     isChecked(blockData, id) {
+      if (!blockData.align && id === "left") {
+        return true;
+      }
       if (blockData.align === id) {
         return true;
       }
@@ -50582,7 +50652,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 });
@@ -50690,7 +50760,7 @@ ${codeText}
         this._lastClickTime = Date.now();
       });
       __publicField(this, "handleClose", () => {
-        if (shouldFocusToEditor(this.editor)) {
+        if (shouldFocusToEditor(this.editor) && !clientType.isMobile) {
           this.editor.focus({
             preventScroll: true
           });
@@ -63044,66 +63114,45 @@ ${codeText}
     }
     return true;
   }
-  function getBlockPlaceholder(editor, options) {
-    var _a, _b, _c;
-    const block = editor.selection.focusedBlock;
-    const blockType = getBlockType(block);
-    const defaultPlaceholder = options.contentPlaceholder || i18n$1.t("placeholder.default");
-    let placeholder2 = clientType.isMobile ? "" : defaultPlaceholder;
-    if (blockType && isTextKindBlockType(editor, blockType)) {
-      if (block) {
-        if (!editor.isBlockWritable(block)) {
-          return "";
-        }
-        if (isCodeLineBlock(block)) {
-          return "";
-        }
-        if (isChildBlock(block) && !clientType.isMobile) {
-          const parentContainerBlock = getParentBlock(getParentContainer(block));
-          if (!parentContainerBlock || !((_b = (_a = getBlockClass(editor, parentContainerBlock)).getOptions) == null ? void 0 : _b.call(_a, editor).isMenuButtonBaseContainer)) {
-            placeholder2 = i18n$1.t("placeholder.common.contentInTable");
-          }
-          if (parentContainerBlock && getBlockType(parentContainerBlock) === "callout") {
-            placeholder2 = i18n$1.t("placeholder.common.contentInCallout");
-          }
-        }
-        placeholder2 = (_c = getTextKindBlockPlaceholder(block)) != null ? _c : placeholder2;
-      }
-    }
-    return placeholder2;
-  }
   function applyContentPlaceholder(editor, options) {
-    var _a;
-    const blockPlaceholder = getBlockPlaceholder(editor, options);
+    var _a, _b, _c;
+    let targetBlock = editor.selection.focusedBlock;
+    let placeholder2 = options.contentPlaceholder || i18n$1.t("placeholder.default");
     const titleBlock = editor.getFirstBlock();
     const firstContentBlock = options.hideTitle ? titleBlock : getNextBlock(titleBlock);
     if (!firstContentBlock) {
       return;
     }
     const secondContentBlock = getNextBlock(firstContentBlock);
-    if (secondContentBlock) {
-      if (!options.addPlaceholderToAllCurrentEmptyBlock) {
-        return;
-      }
+    if (secondContentBlock && !options.addPlaceholderToAllCurrentEmptyBlock) {
+      return;
     }
     if (!secondContentBlock) {
-      if (isEmptyTextBlockWithoutCompositionText(editor, firstContentBlock)) {
-        applyPlaceholderToBlock(
-          editor,
-          firstContentBlock,
-          (_a = getTextKindBlockPlaceholder(firstContentBlock)) != null ? _a : blockPlaceholder
-        );
-        return;
-      }
+      targetBlock = firstContentBlock;
     }
-    const focusedBlock = editor.getFocusedBlock();
-    if (!isEmptyTextBlockWithoutCompositionText(editor, focusedBlock)) {
+    if (!isEmptyTextBlockWithoutCompositionText(editor, targetBlock)) {
+      return;
+    }
+    if (!editor.isBlockWritable(targetBlock)) {
       return;
     }
-    if (focusedBlock === titleBlock && !options.hideTitle) {
+    if (isCodeLineBlock(targetBlock)) {
       return;
     }
-    applyPlaceholderToBlock(editor, focusedBlock, blockPlaceholder);
+    if (targetBlock === titleBlock && !options.hideTitle) {
+      return;
+    }
+    if (isChildBlock(targetBlock)) {
+      const parentContainerBlock = getParentBlock(getParentContainer(targetBlock));
+      if (!parentContainerBlock || !((_b = (_a = getBlockClass(editor, parentContainerBlock)).getOptions) == null ? void 0 : _b.call(_a, editor).isMenuButtonBaseContainer)) {
+        placeholder2 = i18n$1.t("placeholder.common.contentInContainer");
+      }
+    }
+    if (clientType.isMobile) {
+      placeholder2 = "";
+    }
+    placeholder2 = (_c = getTextKindBlockPlaceholder(targetBlock)) != null ? _c : placeholder2;
+    applyPlaceholderToBlock(editor, targetBlock, placeholder2);
   }
   function applyTitlePlaceholder(editor, options) {
     var _a, _b;
@@ -69501,7 +69550,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,
@@ -78719,7 +78768,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;
@@ -78735,6 +78784,10 @@ ${content}
         this.mobileWrap.appendChild(content);
         this.createMobileItems(content, items, "");
         this.mobileWrap.addEventListener("click", this.handleMobileWrapClick);
+        content.addEventListener("scroll", () => {
+          var _a;
+          return (_a = document.activeElement) == null ? void 0 : _a.blur();
+        });
         return [{
           id: "create-mobile-item",
           name: "Create Mobile Item",
@@ -79890,10 +79943,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`;
@@ -80009,14 +80062,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", () => {
@@ -80025,7 +80078,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);
       });
@@ -80054,6 +80107,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);
@@ -80137,7 +80191,7 @@ ${content}
         ];
       });
       this.editor = editor;
-      this.providers = [new HeadingProvider(editor)];
+      this.providers = [new HeadingProvider(editor, { withPlainText: true })];
     }
   }
   class TabProvider {
@@ -80353,6 +80407,7 @@ ${content}
     destroy() {
       this.editor.removeListener("selectionChanged", this.handleSelectionChange);
       this.mobileToolbar.destroy();
+      this.bar.remove();
     }
   }
   class ActiveElementObserver {
@@ -80381,10 +80436,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;
@@ -80473,6 +80529,39 @@ ${content}
     "en-US": enUS$8,
     "ja-JP": jaJP$8
   });
+  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) {
@@ -80481,9 +80570,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);
@@ -80554,6 +80644,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);
@@ -80561,6 +80652,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) {
@@ -83572,6 +83666,9 @@ ${content}
         content.style.height = `${embedData.height}px`;
       }
       setTimeout(() => {
+        if (clientType.isMobile) {
+          return;
+        }
         const blockElement = this.editor.getBlockById(id);
         EmbedBlockResizer.register(this.editor, blockElement);
       });
@@ -84609,12 +84706,14 @@ ${data2.flowchartText}
       });
     }
     setFullScreen() {
-      assert(logger$8, this.mediaContainer, "The media element not exist");
-      addClass(this.mediaContainer, "full-screen");
+      var _a;
+      assert(logger$8, (_a = this.mediaContainer) == null ? void 0 : _a.parentElement, "The media element not exist");
+      addClass(this.mediaContainer.parentElement, "full-screen");
     }
     removeFullScreen() {
-      assert(logger$8, this.mediaContainer, "The media element not exist");
-      removeClass(this.mediaContainer, "full-screen");
+      var _a;
+      assert(logger$8, (_a = this.mediaContainer) == null ? void 0 : _a.parentElement, "The media element not exist");
+      removeClass(this.mediaContainer.parentElement, "full-screen");
     }
     updateBlockAlign(blockData, content) {
       const block = getParentBlock(content);
@@ -85351,7 +85450,7 @@ ${data2.flowchartText}
         title: "\u8BF7\u8F93\u5165\u6807\u9898",
         readonlyTitle: "\u8BF7\u8F93\u5165\u6807\u9898",
         content: "\u70B9\u51FB + \uFF0C\u6216\u8F93\u5165 / \u5FEB\u6377\u63D2\u5165\u7EC4\u4EF6",
-        contentInTable: "\u8F93\u5165 / \u5FEB\u6377\u63D2\u5165\u7EC4\u4EF6",
+        contentInContainer: "\u8F93\u5165 / \u5FEB\u6377\u63D2\u5165\u7EC4\u4EF6",
         contentInCallout: "\u8BF7\u8F93\u5165"
       },
       local: {
@@ -85371,7 +85470,7 @@ ${data2.flowchartText}
         title: "Enter a title",
         readonlyTitle: "Enter a title",
         content: 'Click "+", or enter "/" to insert components quickly',
-        contentInTable: 'Enter "/" to insert components quickly',
+        contentInContainer: 'Enter "/" to insert components quickly',
         contentInCallout: "Enter text here"
       },
       local: {
@@ -85391,7 +85490,7 @@ ${data2.flowchartText}
         title: "\u30BF\u30A4\u30C8\u30EB\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044",
         readonlyTitle: "\u30BF\u30A4\u30C8\u30EB\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044",
         content: "\u300C+\u300D\u3092\u30AF\u30EA\u30C3\u30AF\u3059\u308B\u304B\u3001\u300C/\u300D\u3092\u5165\u529B\u3059\u308B\u3068\u3001\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u304C\u7D20\u65E9\u304F\u633F\u5165\u3067\u304D\u307E\u3059",
-        contentInTable: "\u300C/\u300D\u3092\u5165\u529B\u3059\u308B\u3068\u3001\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u304C\u7D20\u65E9\u304F\u633F\u5165\u3067\u304D\u307E\u3059",
+        contentInContainer: "\u300C/\u300D\u3092\u5165\u529B\u3059\u308B\u3068\u3001\u30B3\u30F3\u30DD\u30FC\u30CD\u30F3\u30C8\u304C\u7D20\u65E9\u304F\u633F\u5165\u3067\u304D\u307E\u3059",
         contentInCallout: "\u5185\u5BB9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"
       },
       local: {
@@ -87617,7 +87716,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.7-beta.13";
+    editor.version = "2.1.7-beta.14";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -87736,7 +87835,7 @@ ${data2.flowchartText}
       }
     }
     OnesEditorToolbar.register(editor);
-    editor.version = "2.1.7-beta.13";
+    editor.version = "2.1.7-beta.14";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/dist/lang/en-us.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
             title: string;
             readonlyTitle: string;
             content: string;
-            contentInTable: string;
+            contentInContainer: string;
             contentInCallout: string;
         };
         local: {

package/dist/lang/ja-jp.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
             title: string;
             readonlyTitle: string;
             content: string;
-            contentInTable: string;
+            contentInContainer: string;
             contentInCallout: string;
         };
         local: {

package/dist/lang/zh-cn.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
             title: string;
             readonlyTitle: string;
             content: string;
-            contentInTable: string;
+            contentInContainer: string;
             contentInCallout: string;
         };
         local: {

package/package.json

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