@ones-editor/editor 2.9.8-beta.1 → 2.9.8-beta.10

package/@ones-editor/ui-base/src/command-bar/types.d.ts

@@ -69,9 +69,14 @@ export interface CommandBarOptions {
     beforeClose?: (event?: MouseEvent | TouchEvent) => boolean;
     showName?: boolean;
     maxWidth?: number | string;
+    appendTo?: Element;
 }
 export type CreateManualCommandBarFunction = (parentItem: CommandItem, closeable: Closeable, options?: CommandBarOptions) => AbstractManualCommandBar;
 export type PopoverOptions = {
     overflowBoundary?: Element;
+    appendTo?: Element;
+};
+export type ObjectToolbarOptions = {
+    appendTo?: Element;
 };
 export type SelectItemFrom = 'event' | 'manual';

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export { ShareDBDocVersionsProvider, OnesEditorIcons, isLayoutBlock, LayoutQuick
 export type { FileBoxData, FileEmbedData } from '../@ones-editor/file';
 export * from './helper';
 export { OnesEditorComments, OnesEditorCommentsRender } from '../@ones-editor/comments';
+export * from '../@ones-editor/cke-html';
 export { type DocListBlock } from '../@ones-editor/list-block';
 export declare function getDefaultOnesEditorOptions(options: CreateOnesEditorOptions): {
     id: string | undefined;

package/dist/index.js

@@ -24898,18 +24898,11 @@ var __publicField = (obj, key, value) => {
     };
   }
   function isEmptyDoc(doc2) {
-    const root2 = doc2.blocks.root;
-    if (root2.length !== 1) {
-      return false;
-    }
-    const block = root2[0];
-    if (!block.text) {
-      return false;
-    }
-    if (getTextLength(block.text)) {
-      return false;
-    }
-    return true;
+    const blocks = doc2.blocks.root;
+    const ret = blocks.every((block) => {
+      return block.type === "text" && getTextLength(block.text || []) === 0;
+    });
+    return ret;
   }
   function createContainer$1(doc2, docsOrDocObject) {
     const containerId = genId();
@@ -26352,9 +26345,10 @@ var __publicField = (obj, key, value) => {
     const y2 = rect.bottom > windowHeight ? windowHeight : rect.bottom;
     const centerX = (x1 + x2) / 2;
     const centerY = (y1 + y2) / 2;
-    const x = 0 - rect.left + centerX;
-    const y = 0 - rect.top + centerY + container.scrollTop;
     const input2 = editor.input.inputElement;
+    const inputHeight = input2.getBoundingClientRect().height;
+    const x = 0 - rect.left + centerX;
+    const y = 0 - rect.top + centerY + container.scrollTop - inputHeight / 2;
     input2.style.left = `${x / scale}px`;
     input2.style.top = `${y / scale}px`;
   }
@@ -31956,6 +31950,7 @@ ${codeText}
       __publicField(this, "settingsProvider");
       __publicField(this, "_readonly", false);
       __publicField(this, "_scrollable", true);
+      __publicField(this, "_destroyed", false);
       __publicField(this, "getColor", (index2) => {
         const colors = this.options.colors;
         if (colors.length === 0) {
@@ -32095,6 +32090,10 @@ ${codeText}
       this.domEvents.destroy();
       this.removeAllListeners();
       this.inputHandlers.destroy();
+      this._destroyed = true;
+    }
+    get destroyed() {
+      return this._destroyed;
     }
     focus(options) {
       this.input.focus(options);
@@ -32386,11 +32385,17 @@ ${codeText}
         this.emit("change", Array.from(this.users.values()));
       }, 300);
     }
-    getSimpleCursors(blockId) {
+    getSimpleCursors(blockId, excludeUserId) {
       const ret = /* @__PURE__ */ new Map();
       Array.from(this.cursors.values()).filter((message) => {
         const ret2 = message.range.anchor.blockId === blockId && isSimpleRange(message.range);
-        return ret2;
+        if (!ret2) {
+          return false;
+        }
+        if (excludeUserId && excludeUserId === message.user.userId) {
+          return false;
+        }
+        return true;
       }).forEach((message) => {
         const offset = message.range.focus.offset;
         let users = ret.get(offset);
@@ -40162,7 +40167,7 @@ ${codeText}
       assert(logger$2S, typeof blockIndex === "number", "invalid path blockIndex");
       const blockData = editor.doc.getBlockData(containerId, blockIndex);
       const length = getTextLength(blockText);
-      const cursorMessages = remoteUsers.getSimpleCursors(blockData.id);
+      const cursorMessages = remoteUsers.getSimpleCursors(blockData.id, editor.doc.getUser().userId);
       cursorMessages.forEach((messages, offset) => {
         if (offset > length) {
           offset = length;
@@ -41987,7 +41992,7 @@ ${codeText}
         placement: (_a = options == null ? void 0 : options.placement) != null ? _a : "bottom-start",
         maxWidth: (_b = this.options.maxWidth) != null ? _b : 650,
         arrow: (_c = options == null ? void 0 : options.arrow) != null ? _c : this.options.tippyArrow,
-        appendTo: document.body,
+        appendTo: this.options.appendTo || target.closest(".command-bar-container") || document.body,
         onShow: this.handleShow,
         onHidden: this.handleHidden,
         onShown: this.handleShown,
@@ -42553,7 +42558,7 @@ ${codeText}
         placement: (_a = options == null ? void 0 : options.placement) != null ? _a : "bottom-start",
         maxWidth: 500,
         arrow: this.options.tippyArrow,
-        appendTo: document.body,
+        appendTo: this.options.appendTo || target.closest(".command-bar-container") || document.body,
         onShow: this.handleShow,
         onHidden: this.handleHidden,
         delay: options == null ? void 0 : options.delay,
@@ -43163,7 +43168,7 @@ ${codeText}
           placement: "bottom",
           maxWidth: 1e3,
           arrow: (_b = options == null ? void 0 : options.arrow) != null ? _b : this.options.tippyArrow,
-          appendTo: document.body,
+          appendTo: this.options.appendTo || target.closest(".command-bar-container") || document.body,
           onShow: this.handleShow,
           onShown: this.handleShown,
           onHidden: this.handleHidden,
@@ -54589,6 +54594,7 @@ ${codeText}
       }, 50));
       this.editor = editor;
       const popover = editor.options.componentsOptions.popover;
+      const objectToolbar = editor.options.componentsOptions.objectToolbar;
       this.toolbar = new ManualToolbar([], void 0, {
         tooltipId: editor.clientId,
         id: "editor-toolbar",
@@ -54596,7 +54602,8 @@ ${codeText}
         refuseOverflow: true,
         padding: 20,
         showName: clientType.isMobile,
-        autoClose: clientType.isMobile ? true : void 0
+        autoClose: clientType.isMobile ? true : void 0,
+        appendTo: (objectToolbar == null ? void 0 : objectToolbar.appendTo) || (popover == null ? void 0 : popover.appendTo)
       });
       this.toolbar.on("click", this.handleButtonClick);
       this.toolbar.on("close", this.handleClose);
@@ -74544,20 +74551,6 @@ ${codeText}
         const maxCellTextLength = maxCellTextLengths.get(cell.col) || 0;
         return padText(text2, maxCellTextLength);
       };
-      if (type === "text") {
-        const text2 = [];
-        for (let col = 0; col < grid.colCount; col++) {
-          const cellText = getCellText({ row: 0, col });
-          text2.push(cellText);
-        }
-        for (let row = 1; row < grid.rowCount; row++) {
-          for (let col = 0; col < grid.colCount; col++) {
-            const cellText = getCellText({ row, col });
-            text2.push(cellText);
-          }
-        }
-        return text2.join("\n");
-      }
       const lines = [];
       let headerText = "|";
       let headerSeparator = "|";
@@ -94763,6 +94756,294 @@ ${JSON.stringify(error2, null, 2)}`);
       }
     });
   }
+  const CkeImageConverter = {
+    filter: (node) => {
+      if (node.nodeName !== "IMG") {
+        return false;
+      }
+      const elem = node;
+      const refId = elem.getAttribute("data-ref-id");
+      const refType = elem.getAttribute("data-ref-type");
+      const uuid = elem.getAttribute("data-uuid");
+      return Boolean(refType === "task" && refId && uuid);
+    },
+    replacement: (content, node) => {
+      const refType = node.getAttribute("data-ref-type");
+      const refId = node.getAttribute("data-ref-id");
+      const uuid = node.getAttribute("data-uuid");
+      const src = `ones-file:${refType}/${refId}/${uuid}`;
+      return `![${refType}](${src})`;
+    }
+  };
+  const ckeHtmlConverters = /* @__PURE__ */ new Map();
+  function registerCKEHtmlConvert(name, converter) {
+    if (ckeHtmlConverters.has(name)) {
+      return;
+    }
+    ckeHtmlConverters.set(name, converter);
+    turndownService.use((ts) => {
+      ts.addRule(name, converter);
+    });
+  }
+  function getTurndownRootElement(node) {
+    let parent = node;
+    while (parent) {
+      if (parent instanceof HTMLElement && parent.tagName === "BODY") {
+        return parent;
+      }
+      if (!parent.parentNode) {
+        return parent;
+      }
+      parent = parent.parentNode;
+    }
+    return node;
+  }
+  function patchForEmptyBlock(key, node, className) {
+    const root2 = getTurndownRootElement(node);
+    if (root2 && root2 instanceof HTMLElement) {
+      const attributeKey = `data-${key}-processed`;
+      if (!root2.getAttribute(attributeKey)) {
+        root2.setAttribute(attributeKey, "true");
+        const elements = root2.querySelectorAll(className);
+        elements.forEach((elem) => {
+          var _a;
+          const text2 = (_a = elem.textContent) == null ? void 0 : _a.trim();
+          if (!text2) {
+            elem.innerText = "--temp-data--";
+          }
+        });
+      }
+    }
+  }
+  const CkeCommentConverter = {
+    filter: (node) => {
+      if (node.nodeName === "SPAN") {
+        const span = node;
+        const ref = span.getAttribute("data-annotate-ref");
+        return Boolean(ref);
+      }
+      return false;
+    },
+    replacement: (content, node) => {
+      var _a;
+      const span = node;
+      const ref = span.getAttribute("data-annotate-ref");
+      const text2 = (_a = span.textContent) != null ? _a : "";
+      return `[${text2}](comment://${ref})`;
+    }
+  };
+  function processCkeCommentsLink(doc2) {
+    const containers = doc2.blocks;
+    Object.values(containers).forEach((blocks) => {
+      blocks.forEach((block) => {
+        const text2 = block.text;
+        if (text2) {
+          text2.forEach((op) => {
+            if (op.attributes) {
+              const attributes = op.attributes;
+              const link2 = attributes.link;
+              if (link2 == null ? void 0 : link2.startsWith("comment://")) {
+                delete attributes.link;
+                const commentId = link2.replace("comment://", "");
+                const key = `comment-${commentId.toLocaleLowerCase()}`;
+                attributes[key] = commentId;
+              }
+            }
+          });
+        }
+      });
+    });
+  }
+  const CkeMentionConverter = {
+    filter: (node) => {
+      patchForEmptyBlock("mention", node, ".ones-at-user-block");
+      if (node.nodeName === "SPAN") {
+        const span = node;
+        if (hasClass(span, "ones-at-user-block")) {
+          const name = span.getAttribute("data-default-name");
+          const refId = span.getAttribute("data-ref-id");
+          return Boolean(name) && Boolean(refId);
+        }
+      }
+      return false;
+    },
+    replacement: (content, node) => {
+      const span = node;
+      const name = span.getAttribute("data-default-name") || "";
+      const refId = span.getAttribute("data-ref-id") || "";
+      if (name && refId) {
+        const box = {
+          id: genId(),
+          type: "mention",
+          box: true,
+          created: Date.now(),
+          iconUrl: "",
+          text: name,
+          mentionId: refId
+        };
+        const text2 = [
+          {
+            insert: " ",
+            attributes: box
+          }
+        ];
+        const obj = {
+          text: text2
+        };
+        const base64 = toBase64URL(JSON.stringify(obj));
+        return `[[${base64}]]`;
+      }
+      return name;
+    }
+  };
+  function convertMentionToCkeMention(editor, boxData, doc2, type) {
+    const data2 = boxData;
+    if (type === "html") {
+      return `<ones-at-user data-ref-name="${data2.text}" data-ref-id="${data2.mentionId}" data-default-name="${data2.text}" class="ones-at-user-block" data-viewer="1"><span>@${data2.text}</span></ones-at-user>`;
+    }
+    return `@${data2.text}`;
+  }
+  function patchMentionConverter(editor) {
+    const mentionBox = editor.editorBoxes.getBoxClass("mention");
+    if (mentionBox) {
+      const oldConvertTo = mentionBox.convertTo;
+      if (oldConvertTo !== convertMentionToCkeMention) {
+        mentionBox.convertTo = convertMentionToCkeMention;
+      }
+    }
+  }
+  function processLinks(doc2) {
+    const containers = doc2.blocks;
+    Object.values(containers).forEach((blocks) => {
+      blocks.forEach((block) => {
+        if (block.text) {
+          const text2 = block.text;
+          text2.forEach((op) => {
+            const attributes = op.attributes;
+            if (attributes) {
+              attributes.link;
+            }
+          });
+        }
+      });
+    });
+  }
+  const CkeMarkdownConverter = {
+    filter: (node) => {
+      if (node.nodeName !== "DIV") {
+        return false;
+      }
+      const div = node;
+      return hasClass(div, "ones-marked-card");
+    },
+    replacement: (content, node) => {
+      const textToCodeBlock2 = (text2, language) => {
+        const codeBlocks = text2.split("\n").map((line) => {
+          const block = {
+            type: "text",
+            id: genId(),
+            text: createRichText(line)
+          };
+          return block;
+        });
+        const containerId = genId();
+        const doc22 = {
+          blocks: {
+            root: [
+              {
+                id: genId(),
+                type: "code",
+                language,
+                children: [containerId]
+              }
+            ],
+            [containerId]: codeBlocks
+          },
+          meta: {},
+          comments: {}
+        };
+        return toBase64URL(JSON.stringify(doc22));
+      };
+      const nodeToCodeBlock2 = (node2, lang) => {
+        const text2 = node2.textContent || "";
+        return textToCodeBlock2(text2, lang);
+      };
+      const doc2 = nodeToCodeBlock2(node, "markdown");
+      const fence = "```";
+      return "\n\n" + fence + "\n" + doc2 + "\n" + fence + "\n\n";
+    }
+  };
+  registerCKEHtmlConvert("image", CkeImageConverter);
+  registerCKEHtmlConvert("comment", CkeCommentConverter);
+  registerCKEHtmlConvert("mention", CkeMentionConverter);
+  registerCKEHtmlConvert("markdown", CkeMarkdownConverter);
+  function ckeHtml2Doc(html) {
+    const doc2 = htmlToDoc(html) || createEmptyDoc$1();
+    processCkeCommentsLink(doc2);
+    processLinks(doc2);
+    return doc2;
+  }
+  function injectDocToCkeHtmlFragment(htmlFragment, doc2, text2) {
+    const meta = `<meta charset="utf-8"><ones-editor-doc data-source="ones-editor-doc::${toBase64URL(
+      JSON.stringify(doc2)
+    )}::ones-editor-doc" />`;
+    let textMeta = "";
+    if (text2) {
+      textMeta = `<meta name="ones-editor-text" content="${toBase64URL(text2)}" />`;
+    }
+    const html = `<!doctype html><html><head>${meta}${textMeta}</head><body>${htmlFragment}</body></html>`;
+    return html;
+  }
+  function editorToCKEHtml(editor) {
+    patchMentionConverter(editor);
+    const docObject = editor.doc.toJSON();
+    if (isEmptyDoc(docObject)) {
+      return "";
+    }
+    let html = docToHtmlFragment(editor, docObject);
+    const text2 = docToText(editor, docObject);
+    html = injectDocToCkeHtmlFragment(html, docObject, text2);
+    return html;
+  }
+  function combineDoc(doc1, doc2) {
+    if (isEmptyDoc(doc1)) {
+      return doc2;
+    }
+    if (isEmptyDoc(doc2)) {
+      return doc1;
+    }
+    const splitterDoc = createEmptyDoc$1("", {
+      firstLineAsTitle: false
+    });
+    return mergeDocs([doc1, splitterDoc, doc2]);
+  }
+  function mergeHTMLBodiesOnly(htmlA, htmlB) {
+    const parser = new DOMParser();
+    const docA = parser.parseFromString(htmlA, "text/html");
+    const docB = parser.parseFromString(htmlB, "text/html");
+    const mergedDoc = document.implementation.createHTMLDocument("Merged");
+    const bodyA = docA.body;
+    const bodyB = docB.body;
+    const mergedBody = mergedDoc.body;
+    Array.from(bodyA.childNodes).forEach((node) => {
+      mergedBody.appendChild(mergedDoc.importNode(node, true));
+    });
+    Array.from(bodyB.childNodes).forEach((node) => {
+      mergedBody.appendChild(mergedDoc.importNode(node, true));
+    });
+    return mergedBody.innerHTML;
+  }
+  function combineCkeHtml(html1, html2) {
+    const doc1 = ckeHtml2Doc(html1);
+    const doc2 = ckeHtml2Doc(html2);
+    const newDoc = combineDoc(doc1, doc2);
+    const newHtml = mergeHTMLBodiesOnly(html1, html2);
+    const ret = injectDocToCkeHtmlFragment(newHtml, newDoc);
+    return ret;
+  }
+  function combineRichTextValue(value1, value2) {
+    return combineCkeHtml(value1, value2);
+  }
   const logger = getLogger("create-editor");
   function getHooks(options, local) {
     var _a;
@@ -95021,7 +95302,7 @@ ${JSON.stringify(error2, null, 2)}`);
         }
       }
     });
-    editor.version = "2.9.8-beta.1";
+    editor.version = "2.9.8-beta.10";
     return editor;
   }
   function isDoc(doc2) {
@@ -95153,7 +95434,7 @@ ${JSON.stringify(error2, null, 2)}`);
     OnesEditorDropTarget.register(editor);
     OnesEditorTocProvider.register(editor);
     OnesEditorExclusiveBlock.register(editor);
-    editor.version = "2.9.8-beta.1";
+    editor.version = "2.9.8-beta.10";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -141255,12 +141536,15 @@ ${JSON.stringify(error2, null, 2)}`);
   exports2.blockToText = blockToText;
   exports2.blocksToDoc = blocksToDoc;
   exports2.changeButtonName = changeButtonName;
+  exports2.ckeHtml2Doc = ckeHtml2Doc;
   exports2.clearAllSelection = clearAllSelection;
   exports2.clientType = clientType;
   exports2.cloneBlock = cloneBlock;
   exports2.cloneChildContainer = cloneChildContainer;
   exports2.cloneDoc = cloneDoc;
   exports2.cloneText = cloneText;
+  exports2.combineCkeHtml = combineCkeHtml;
+  exports2.combineRichTextValue = combineRichTextValue;
   exports2.commentToShareDbComment = commentToShareDbComment;
   exports2.compareElement = compareElement;
   exports2.comparePosition = comparePosition;
@@ -141416,6 +141700,7 @@ ${JSON.stringify(error2, null, 2)}`);
   exports2.editorSelectWordLeft = editorSelectWordLeft;
   exports2.editorSetTextColor = editorSetTextColor;
   exports2.editorShowFindDialog = editorShowFindDialog;
+  exports2.editorToCKEHtml = editorToCKEHtml;
   exports2.editorToDocx = editorToDocx;
   exports2.editorUpdateBlockData = editorUpdateBlockData;
   exports2.editorUpdateCompositionText = editorUpdateCompositionText;
@@ -141582,6 +141867,7 @@ ${JSON.stringify(error2, null, 2)}`);
   exports2.i18n = i18n$1;
   exports2.includeBigTable = includeBigTable;
   exports2.injectBlockOptions = injectBlockOptions;
+  exports2.injectDocToCkeHtmlFragment = injectDocToCkeHtmlFragment;
   exports2.injectDocToHtmlFragment = injectDocToHtmlFragment;
   exports2.injectSource = injectSource;
   exports2.injectStyle = injectStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ones-editor/editor",
-  "version": "2.9.8-beta.1",
+  "version": "2.9.8-beta.10",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {