@ones-editor/editor 2.2.15-beta.1 → 2.2.15-beta.2

package/@ones-editor/ui-base/src/emoji-palette/index.d.ts

@@ -14,7 +14,7 @@ export declare class EmojiPalette extends TypedEmitter<EmojiPaletteEvents> imple
     private unmountPalette;
     constructor(editor: OnesEditor);
     private renderPalette;
-    render(): void;
+    render(): Promise<void>;
     setCurrentEmoji(emoji: string): void;
     destroy(): void;
 }

package/dist/index.js

@@ -6596,7 +6596,7 @@ div[data-command-bar-id=mobile-bottom-menu] .mobile-menu-wrap.editor-mention .co
   padding: 10px;
   border-radius: 3px;
 }
-.editor-root [data-type=editor-container].root div[data-type=editor-block].callout-block .callout-root .callout-icon {
+.editor-root [data-type=editor-container].root div[data-type=editor-block].callout-block .callout-root .callout-icon-inner {
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -6609,7 +6609,7 @@ div[data-command-bar-id=mobile-bottom-menu] .mobile-menu-wrap.editor-mention .co
   line-height: 1;
   font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
 }
-.editor-root [data-type=editor-container].root div[data-type=editor-block].callout-block .callout-root .callout-icon:hover {
+.editor-root [data-type=editor-container].root div[data-type=editor-block].callout-block .callout-root .callout-icon-inner:hover {
   border-radius: 3px;
   background-color: rgba(0, 36, 90, 0.04);
 }
@@ -42938,8 +42938,9 @@ ${codeText}
       const element = createElement("div", ["emoji-palette"], null);
       this.element = element;
     }
-    renderPalette() {
+    async renderPalette() {
       var _a;
+      this.element.innerHTML = "";
       const emojiPaletteOptions = this.editor.getComponentOptions("emojiPalette");
       const paletteRenderer = (_a = emojiPaletteOptions == null ? void 0 : emojiPaletteOptions.emojiPaletteRenderer) != null ? _a : defaultPaletteRenderer;
       const handleSelectEmoji = (emoji) => {
@@ -42949,10 +42950,10 @@ ${codeText}
         emoji: this.currentEmoji,
         onSelectEmoji: handleSelectEmoji
       };
-      return paletteRenderer(this.element, options);
+      return Promise.resolve().then(() => paletteRenderer(this.element, options));
     }
-    render() {
-      this.unmountPalette = this.renderPalette();
+    async render() {
+      this.unmountPalette = await this.renderPalette();
     }
     setCurrentEmoji(emoji) {
       this.currentEmoji = emoji;
@@ -80731,6 +80732,7 @@ ${content}
     editor.updateBlockData(block, blockPayload, void 0, {
       noScroll: true
     });
+    CalloutLastUpdateData.init(editor).update(blockPayload);
   }
   getLogger("callout-block-commands");
   class CalloutBlockCommands {
@@ -80796,7 +80798,6 @@ ${content}
     }
     updateCalloutBlockData(blockPayload) {
       updateCalloutBlockData(this.editor, this.activeBlock, blockPayload);
-      CalloutLastUpdateData.init(this.editor).update(blockPayload);
     }
     createPresetItem(presetId) {
       return createPresetItem(presetId, this.editor, this.activeBlock);
@@ -80841,21 +80842,29 @@ ${content}
   }
   class EmojiPopup {
     constructor(editor) {
+      __publicField(this, "popup");
+      __publicField(this, "popupContent");
+      __publicField(this, "emojiPalette");
+      __publicField(this, "handlePopupClose", () => {
+        this.emojiPalette.destroy();
+      });
       this.editor = editor;
-    }
-    createEmojiPopupContent(options) {
-      const { emoji, onSelectEmoji } = options;
-      const emojiPalette = new EmojiPalette(this.editor);
-      emojiPalette.setCurrentEmoji(emoji);
-      emojiPalette.render();
-      emojiPalette.addListener("onSelectEmoji", onSelectEmoji);
-      return emojiPalette.element;
-    }
-    show(rect, options) {
-      const popup = new Popup(this.createEmojiPopupContent(options), {
+      this.popupContent = createElement("div", ["emoji-popup-content"], null);
+      this.popup = new Popup(this.popupContent, {
         id: "emoji-popup"
       });
-      popup.manualShow(document.body, {
+      this.popup.on("close", this.handlePopupClose);
+      const emojiPalette = new EmojiPalette(this.editor);
+      this.emojiPalette = emojiPalette;
+    }
+    populateEmojiPopupContent() {
+      this.popupContent.innerHTML = "";
+      this.emojiPalette.render();
+      this.popupContent.appendChild(this.emojiPalette.element);
+    }
+    show(rect) {
+      this.populateEmojiPopupContent();
+      this.popup.manualShow(document.body, {
         theme: "light",
         placement: "bottom-start",
         offset: [0, 5],
@@ -80864,74 +80873,85 @@ ${content}
     }
     destroy() {
     }
-    static get(editor) {
-      return editor.addCustom("emoji-popup", (editor2) => new EmojiPopup(editor2));
+    static get(editor, blockId) {
+      return editor.addCustom(`emoji-popup-${blockId}`, (editor2) => new EmojiPopup(editor2));
     }
   }
   class CalloutIcon {
-    constructor(editor, options) {
+    constructor(editor, blockId) {
       __publicField(this, "iconElement");
+      __publicField(this, "emojiPopup");
       __publicField(this, "handleSelectEmoji", (emoji) => {
-        const calloutBlock = this.editor.getBlockById(this.options.blockId);
-        updateCalloutBlockData(this.editor, calloutBlock, {
-          icon: emoji
-        });
+        const calloutBlock = this.editor.getBlockById(this.blockId);
+        updateCalloutBlockData(this.editor, calloutBlock, { icon: emoji });
       });
       __publicField(this, "handleIconClick", () => {
-        const emojiPopup = EmojiPopup.get(this.editor);
-        const { icon, blockId } = this.options;
+        const calloutBlock = this.editor.getBlockById(this.blockId);
+        const blockData = getCalloutBlockData(this.editor, calloutBlock);
+        const { icon } = blockData;
+        this.emojiPopup.emojiPalette.setCurrentEmoji(icon);
         const rect = this.iconElement.getBoundingClientRect();
-        emojiPopup.show(rect, {
-          emoji: icon,
-          onSelectEmoji: (emoji) => {
-            const calloutBlock = this.editor.getBlockById(blockId);
-            updateCalloutBlockData(this.editor, calloutBlock, {
-              icon: emoji
-            });
-          }
-        });
+        this.emojiPopup.show(rect);
       });
       this.editor = editor;
-      this.options = options;
-      const { parent, icon } = options;
-      const calloutIcon = createElement("div", ["callout-icon"], parent);
+      this.blockId = blockId;
+      const calloutIcon = createElement("div", ["callout-icon"], null);
       this.iconElement = calloutIcon;
       calloutIcon.setAttribute("data-editor-tooltip-common", i18n$1.t("callout.icon.toggleIcon"));
-      this.updateIcon(icon);
-      this.bindEvent();
-    }
-    bindEvent() {
       this.editor.domEvents.addEventListener(this.iconElement, "click", this.handleIconClick);
+      this.emojiPopup = EmojiPopup.get(this.editor, blockId);
+      this.emojiPopup.emojiPalette.on("onSelectEmoji", this.handleSelectEmoji);
+    }
+    render(parent, icon) {
+      this.updateIcon(icon);
+      parent.appendChild(this.iconElement);
     }
     updateIcon(icon) {
-      const displayIcon = isPresetId(icon) ? getPresetIcon(icon) : icon;
-      this.iconElement.innerHTML = displayIcon;
+      const calloutIcon = this.iconElement;
+      calloutIcon.innerHTML = "";
+      if (icon) {
+        const calloutIconInner = createElement("div", ["callout-icon-inner"], calloutIcon);
+        const displayIcon = isPresetId(icon) ? getPresetIcon(icon) : icon;
+        calloutIconInner.innerHTML = displayIcon;
+        calloutIcon.appendChild(calloutIconInner);
+      }
     }
     destroy() {
     }
-    static create(editor, options) {
-      return new CalloutIcon(editor, options);
+    static get(editor, blockId) {
+      return editor.addCustom(`callout-icon-${blockId}`, () => new CalloutIcon(editor, blockId));
     }
   }
   getLogger("callout-root-dom");
+  function updateCalloutRoot(blockContent, payload) {
+    const calloutRoot = blockContent.querySelector(".callout-root");
+    setDataset(calloutRoot, payload);
+  }
   function createCalloutBlockContent(editor, path, blockElement, blockData) {
     const { icon, backgroundColor, children, id } = blockData;
     const blockContent = createBlockContentElement(blockElement, "div");
-    const calloutRoot = createElement("div", ["callout-root"], blockContent, {
-      icon,
-      backgroundColor
+    const calloutRoot = createElement("div", ["callout-root"], blockContent);
+    updateCalloutRoot(blockContent, {
+      backgroundColor,
+      icon
     });
-    if (icon) {
-      CalloutIcon.create(editor, {
-        blockId: id,
-        icon,
-        parent: calloutRoot
-      });
-    }
+    const calloutIcon = CalloutIcon.get(editor, id);
+    calloutIcon.render(calloutRoot, icon);
     const calloutContent = createElement("div", ["callout-content"], calloutRoot);
     editor.createChildContainer(path, calloutContent, children[0]);
     return blockContent;
   }
+  function handleUpdateCalloutBlock(editor, block, blockData) {
+    const { icon, backgroundColor, id } = blockData;
+    const blockContent = getBlockContent(block);
+    updateCalloutRoot(blockContent, {
+      backgroundColor,
+      icon
+    });
+    const calloutIcon = CalloutIcon.get(editor, id);
+    calloutIcon.updateIcon(icon);
+    return true;
+  }
   class CalloutQuickMenuItemFilter {
     constructor(editor) {
       setTimeout(() => {
@@ -81180,6 +81200,7 @@ ${content}
     getRangeFromPoint: getRangeFromPoint$1,
     getBlockTextLength: getBlockTextLength$1,
     createBlockContent: createBlockContent$1,
+    handleUpdateBlock: handleUpdateCalloutBlock,
     moveCaret: moveCaret$1,
     getCaretRect: getCaretRect$1,
     updateSelection: updateSelection$1,
@@ -88422,7 +88443,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.2.15-beta.1";
+    editor.version = "2.2.15-beta.2";
     return editor;
   }
   function isDoc(doc2) {
@@ -88517,7 +88538,7 @@ ${data2.flowchartText}
     });
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
     OnesEditorToolbar.register(editor);
-    editor.version = "2.2.15-beta.1";
+    editor.version = "2.2.15-beta.2";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {

package/package.json

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