@ones-editor/editor 3.1.0 → 4.0.0

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from '../@ones-editor/layout-block';
 export * from '../@ones-editor/markdown-to-doc';
 export * from '../@ones-editor/html-to-doc';
 export * from '../@ones-editor/main-toolbar';
+export * from '../@ones-editor/mention';
 export { Popup, ManualMenu, OnesEditorAutoSuggest, tippy, ManualToolbar, ManualCloseDialog, TextColorItem, shouldFocusToEditor, FixedToolbar, } from '../@ones-editor/ui-base';
 export * from '../@ones-editor/drawio-embed';
 export * from '../@ones-editor/block-resizer';
@@ -108,3 +109,4 @@ export interface ShowDocVersionsOptions2 {
     editorOptions?: CreateOnesEditorOptions;
 }
 export declare function showDocVersions2(parent: HTMLElement, options: ShowDocVersionsOptions2): Promise<OnesEditorVersionsDialog>;
+export declare function createSimpleInput(root: HTMLElement, docData: DocObject | OnesEditorDoc, options: CreateLocalEditorOptions): Promise<OnesEditor>;

package/dist/index.js

@@ -7798,6 +7798,38 @@ div.editor-root:not(.readonly) div.editor-content div[data-type=editor-container
 }
 div.editor-root.readonly div.editor-content div[data-type=editor-container] .embed-block[data-embed-type=drawio] [data-src] {
   cursor: zoom-in;
+}
+.command-item.menu-item[data-id=insert-drawio] {
+  width: 100%;
+}
+.command-item.menu-item[data-id=insert-drawio] .uml-menu-item {
+  color: #2d2d2e;
+  user-select: none;
+  transition: background 20ms ease-in 0s;
+  width: 100%;
+  height: 32px;
+  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.command-item.menu-item[data-id=insert-drawio] .uml-menu-item .menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  margin-right: 5px;
+  margin-top: -2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.command-item.menu-item[data-id=insert-drawio] .uml-menu-item .menu-item-name {
+  white-space: nowrap;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
 }.embed-block[data-embed-type=mermaid],
 .embed-block[data-embed-type=flowchart],
 .embed-block[data-embed-type=plantuml] {
@@ -25212,20 +25244,20 @@ var __publicField = (obj, key, value) => {
   function textBlockToMarkdown(editor, blockData, doc2) {
     const richText2 = blockData.text || [];
     const text2 = textToMarkdownText(editor, richText2, doc2);
-    let markdown = text2;
+    let markdown2 = text2;
     if (blockData.heading) {
       const heading = blockData.heading;
       const prefix = "#".repeat(heading);
-      markdown = `${prefix} ${markdown}`;
+      markdown2 = `${prefix} ${markdown2}`;
     }
     if (blockData.quoted) {
-      markdown = `> ${markdown}`;
+      markdown2 = `> ${markdown2}`;
     }
     if (blockData.type === "text") {
-      markdown = `${markdown}
+      markdown2 = `${markdown2}
 `;
     }
-    return markdown;
+    return markdown2;
   }
   function styleColorToColor$1(color) {
     switch (color) {
@@ -26890,8 +26922,8 @@ var __publicField = (obj, key, value) => {
   function docToMarkdown(editor, doc2) {
     const lines = doc2.blocks.root.map((b, index2) => blockToMarkdown(editor, b, doc2, [{ containerId: "root", blockIndex: index2 }]));
     lines[lines.length - 1] = lines[lines.length - 1].trimEnd();
-    const markdown = lines.join("\n");
-    return markdown;
+    const markdown2 = lines.join("\n");
+    return markdown2;
   }
   const logger$3O = getLogger("get-text-position");
   function editorGetTextPosition(editor, insertPos) {
@@ -28718,6 +28750,11 @@ var __publicField = (obj, key, value) => {
     addClass(editor.rootContainer, "select-all");
     selectParentContainer(editor, getFirstChildBlock(editor.rootContainer));
   }
+  function editorClearAll(editor) {
+    selectParentContainer(editor, getFirstChildBlock(editor.rootContainer));
+    editorClearSelectedContents(editor);
+    removeClass(editor.rootContainer, "select-all");
+  }
   function editorSelectWord(editor) {
     const old = editor.selection.range.focus;
     if (!old.isSimple())
@@ -29894,13 +29931,13 @@ ${codeText}
     addMetaToDoc(editor, doc2);
     const htmlFragment = docToHtmlFragment(editor, doc2);
     injectDocToHtmlFragment(htmlFragment, doc2);
-    let markdown = "";
+    let markdown2 = "";
     if (isSelectedCodeTextBlock(editor)) {
       const selectBlock = editor.selection.range.getSelectedBlocks()[0];
       const container = getParentContainer(selectBlock.block);
       const codeBlock2 = getParentBlock(container);
       if (codeBlock2) {
-        markdown = getSelectedCodeBlockMarkdown(editor, docToText(editor, doc2));
+        markdown2 = getSelectedCodeBlockMarkdown(editor, docToText(editor, doc2));
       }
     } else {
       const lines = [];
@@ -29908,11 +29945,11 @@ ${codeText}
         lines.push(blockToMarkdown(editor, b, doc2, [{ containerId: "root", blockIndex: index2 }]));
       });
       lines[lines.length - 1] = lines[lines.length - 1].trimEnd();
-      markdown = lines.join("\n");
+      markdown2 = lines.join("\n");
     }
     setClipboardData([{
       type: "text/plain",
-      data: new Blob([markdown], { type: "text/plain" })
+      data: new Blob([markdown2], { type: "text/plain" })
     }]);
     return true;
   }
@@ -41800,7 +41837,9 @@ ${codeText}
           }
         }
         if (item.element) {
-          return;
+          if (!item.useDefaultClickHandler) {
+            return;
+          }
         }
         this.emit("click", this, item, elem);
         if (item.clickToClose === false) {
@@ -42727,6 +42766,9 @@ ${codeText}
   function initMenuItem$1(item, elem) {
     var _a, _b;
     addClass(elem, "menu-item");
+    if (item.className) {
+      addClass(elem, ...item.className.split(" "));
+    }
     if (item.element) {
       return;
     }
@@ -42802,6 +42844,9 @@ ${codeText}
     });
   }
   function initToolbarItem(item, elem, options) {
+    if (item.className) {
+      addClass(elem, ...item.className.split(" "));
+    }
     elem.setAttribute("data-button-id", item.id);
     if (options.tooltipId && item.name && !item.disableTooltip) {
       elem.setAttribute(`data-editor-tooltip-${options.tooltipId}`, item.name);
@@ -52429,7 +52474,22 @@ ${codeText}
     var _a, _b, _c;
     const list2 = blockData;
     if (type === "text") {
-      const text2 = ((_a = TextBlock.convertTo) == null ? void 0 : _a.call(TextBlock, editor, blockData, doc2, "text", path)) || "";
+      let text2 = ((_a = TextBlock.convertTo) == null ? void 0 : _a.call(TextBlock, editor, blockData, doc2, "text", path)) || "";
+      if (path.length === 1) {
+        if (list2.checkbox === "checked") {
+          text2 = `[x] ${text2}`;
+        } else if (list2.checkbox === "unchecked") {
+          text2 = `[ ] ${text2}`;
+        }
+        if (list2.ordered) {
+          text2 = `${list2.start}. ${text2}`;
+        } else {
+          text2 = `- ${text2}`;
+        }
+        const level = list2.level || 0;
+        const prefix = level > 0 ? "  ".repeat(level - 1) : "";
+        text2 = prefix + text2;
+      }
       return text2;
     }
     if (type === "markdown") {
@@ -67217,9 +67277,11 @@ ${codeText}
     });
     return true;
   }
-  function matchBlockStyle(editor, containerId, blockIndex, offset) {
-    if (matchHeading(editor, containerId, blockIndex, offset)) {
-      return true;
+  function matchBlockStyle(editor, containerId, blockIndex, offset, options) {
+    if ((options == null ? void 0 : options.disableHeadingShortcuts) !== true) {
+      if (matchHeading(editor, containerId, blockIndex, offset)) {
+        return true;
+      }
     }
     if (matchBlockQuote(editor, containerId, blockIndex, offset)) {
       return true;
@@ -67324,6 +67386,9 @@ ${codeText}
     return false;
   }
   class MarkdownInputHandler {
+    constructor(options) {
+      this.options = options;
+    }
     handleAfterInsertText(editor, containerId, blockIndex, offset, text2) {
       const block = editor.getBlockByIndex(containerId, blockIndex);
       if (isTitleBlock$2(block)) {
@@ -67333,7 +67398,7 @@ ${codeText}
         if (converterIntercept(editor, containerId)) {
           return false;
         }
-        if (matchBlockStyle(editor, containerId, blockIndex, offset)) {
+        if (matchBlockStyle(editor, containerId, blockIndex, offset, this.options)) {
           return true;
         }
         if (matchTextStyle(editor, containerId, blockIndex, offset)) {
@@ -69873,8 +69938,8 @@ ${codeText}
       return images.map((image) => `<img data-embed-type="image" data-uuid="image:${image.src}" src="${editor.doc.buildResourceUrl(image.src, { withToken: true })}">`).join("");
     }
     if (type === "markdown") {
-      const markdown = images.map((image) => `![img](${editor.doc.buildResourceUrl(image.src, { withToken: true })})`).join("\n");
-      return `${markdown}
+      const markdown2 = images.map((image) => `![img](${editor.doc.buildResourceUrl(image.src, { withToken: true })})`).join("\n");
+      return `${markdown2}
 `;
     }
     return "";
@@ -75299,8 +75364,8 @@ ${codeText}
         }
         lines.push(rowText);
       }
-      const markdown = lines.join("\n");
-      return `${markdown}
+      const markdown2 = lines.join("\n");
+      return `${markdown2}
 `;
     }
     if (type === "html") {
@@ -76343,6 +76408,11 @@ ${codeText}
   }
   const logger$S = getLogger("custom-tag-to-text");
   function customTagToText(token, attributes, options) {
+    var _a;
+    const processed = (_a = options.customTagProcess) == null ? void 0 : _a.call(options, token, attributes);
+    if (processed) {
+      return processed;
+    }
     const content = token.content;
     try {
       const base64 = content;
@@ -76555,7 +76625,7 @@ ${codeText}
         return createTextWithReplaceSoftReturn(htmlDecode(token.text), attributes);
       }
       if (token.type === "custom-tag") {
-        return customTagToText(token, attributes);
+        return customTagToText(token, attributes, options);
       }
       if (token.type === "latex") {
         return [{
@@ -77018,9 +77088,9 @@ ${codeText}
   });
   marked.marked.use(extendedCustomTag());
   marked.marked.use(confluenceTextTag());
-  function markdownToDoc(markdown, options) {
+  function markdownToDoc(markdown2, options) {
     const lexer = new marked.marked.Lexer();
-    const tokens = lexer.lex(markdown);
+    const tokens = lexer.lex(markdown2);
     const doc2 = {
       blocks: {
         root: []
@@ -77035,7 +77105,8 @@ ${codeText}
       tokensToBlocks,
       tokensToTextWithChildren,
       htmlToDoc: options == null ? void 0 : options.htmlToDoc,
-      listLevel: 1
+      listLevel: 1,
+      customTagProcess: options == null ? void 0 : options.customTagProcess
     };
     const rootBlocks = tokensToBlocks(tokens, tokenToBlockOptions);
     if (rootBlocks.length === 0) {
@@ -77048,6 +77119,13 @@ ${codeText}
     doc2.blocks.root.push(...rootBlocks);
     return doc2;
   }
+  const markdown = `
+[[cursor]]
+`;
+  setTimeout(() => {
+    const doc2 = markdownToDoc(markdown);
+    console.log(doc2);
+  }, 100);
   function extend(destination) {
     for (let i = 1; i < arguments.length; i++) {
       const source = arguments[i];
@@ -78613,9 +78691,9 @@ ${docStr}
         htmlFragment = html.substring(start + "<!--StartFragment-->".length, end);
       }
     }
-    const markdown = turndownService.turndown(htmlFragment);
-    logger$P.debug(`markdown: ${markdown}`);
-    return markdownToDoc(markdown, {
+    const markdown2 = turndownService.turndown(htmlFragment);
+    logger$P.debug(`markdown: ${markdown2}`);
+    return markdownToDoc(markdown2, {
       htmlToDoc: (html2) => {
         const doc2 = htmlToDocByMarkdown(html2, options);
         return doc2;
@@ -88395,7 +88473,12 @@ ${data2.flowchartText}
   function getBlockProperties$3(editor, block) {
     const properties = getStandardEmbedBlockProperties(editor, block, {
       handleExecuteCommand: (editor2, block2, item) => {
+        var _a, _b;
         if (item.id === "edit") {
+          const drawioOptions = getDrawioOptions(editor2);
+          if (((_b = (_a = drawioOptions.callbacks) == null ? void 0 : _a.onBeforeInsertDrawio) == null ? void 0 : _b.call(_a, editor2)) === false) {
+            return true;
+          }
           const data2 = editor2.getBlockData(block2).embedData;
           editGraph(editor2, block2, data2, false);
           return true;
@@ -88583,30 +88666,51 @@ ${data2.flowchartText}
     update(editor, embed, data2);
     return true;
   }
-  function getOptions$3() {
-    return {
-      name: "UML",
-      insertEmbedCommandItems: [{
+  function getOptions$3(editor) {
+    var _a;
+    const drawioOptions = getDrawioOptions(editor);
+    const suffixElem = (_a = drawioOptions.menuItemSuffix) == null ? void 0 : _a.call(drawioOptions, editor);
+    const element = suffixElem ? () => {
+      const root2 = createElement("div", ["uml-menu-item"], null);
+      const iconElem = createElement("div", ["menu-item-icon"], root2);
+      iconElem.innerHTML = UmlIcon;
+      createElement("div", ["menu-item-name"], root2, i18n$1.t("drawio.title"));
+      root2.appendChild(suffixElem);
+      return root2;
+    } : void 0;
+    const insertEmbedCommandItems = [];
+    if (drawioOptions.visible !== false) {
+      insertEmbedCommandItems.push({
         id: "insert-drawio",
         name: i18n$1.t("drawio.title"),
         icon: UmlIcon,
         group: "common",
         order: 600,
-        subText: getShortcutById("insert-drawio")
-      }],
-      handleInsertEmptyEmbed: async (editor, options) => {
+        subText: getShortcutById("insert-drawio"),
+        element,
+        useDefaultClickHandler: true
+      });
+    }
+    return {
+      name: "UML",
+      insertEmbedCommandItems,
+      handleInsertEmptyEmbed: async (editor2, options) => {
+        var _a2, _b;
+        if (((_b = (_a2 = drawioOptions.callbacks) == null ? void 0 : _a2.onBeforeInsertDrawio) == null ? void 0 : _b.call(_a2, editor2)) === false) {
+          return null;
+        }
         const embedData = {
           src: "",
           xml: "",
           xmlSvg: ""
         };
-        const block = editor.insertEmbed(options.containerId, options.blockIndex, "drawio", embedData);
+        const block = editor2.insertEmbed(options.containerId, options.blockIndex, "drawio", embedData);
         setTimeout(() => {
           const blockContent = getBlockContent(block);
           const embed = blockContent.querySelector(":scope > .editor-drawio-content");
           assert(logger$i, embed, "embed should not be null");
-          const blockData = editor.getBlockData(block);
-          editDrawIO(editor, block, embed, blockData.embedData);
+          const blockData = editor2.getBlockData(block);
+          editDrawIO(editor2, block, embed, blockData.embedData);
         }, 100);
         return block;
       }
@@ -96527,9 +96631,8 @@ ${JSON.stringify(error2, null, 2)}`);
       }
       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);
+      return Boolean(refId && uuid);
     },
     replacement: (content, node) => {
       const refType = node.getAttribute("data-ref-type");
@@ -97067,7 +97170,7 @@ ${JSON.stringify(error2, null, 2)}`);
         }
       }
     });
-    editor.version = "3.1.0";
+    editor.version = "4.0.0";
     return editor;
   }
   function isDoc(doc2) {
@@ -97201,7 +97304,7 @@ ${JSON.stringify(error2, null, 2)}`);
     OnesEditorDropTarget.register(editor);
     OnesEditorTocProvider.register(editor);
     OnesEditorExclusiveBlock.register(editor);
-    editor.version = "3.1.0";
+    editor.version = "4.0.0";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -97268,6 +97371,77 @@ ${JSON.stringify(error2, null, 2)}`);
     dialog.show(dialogOptions);
     return dialog;
   }
+  async function createSimpleInput(root2, docData, options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    assert(logger, root2, "app does not exists");
+    const doc2 = isDoc(docData) ? docData : new LocalDoc(docData, {
+      serverUrl: options.serverUrl || ""
+    });
+    if (options.lang) {
+      i18n$1.setLang(options.lang);
+    }
+    Logger$2.level = (_a = options.logLevel) != null ? _a : LogLevel.DEBUG;
+    const editor = createEditor(root2, doc2, {
+      id: options.id,
+      scrollContainer: options == null ? void 0 : options.scrollContainer,
+      enableResolveComments: false,
+      enableComments: false,
+      dateTimeFormatter: options.dateTimeFormatter,
+      components: {
+        blocks: [ListBlock, ...(_c = (_b = options.components) == null ? void 0 : _b.blocks) != null ? _c : []],
+        commandProviders: [],
+        decorators: [],
+        embeds: [...((_d = options.components) == null ? void 0 : _d.embeds) || []],
+        boxes: [...((_e = options.components) == null ? void 0 : _e.boxes) || []],
+        insertions: [],
+        blockHooks: [...((_f = options.components) == null ? void 0 : _f.blockHooks) || []],
+        textRenders: [
+          ...((_g = options.components) == null ? void 0 : _g.textRenders) || []
+        ].filter(Boolean),
+        options: { ...options.componentsOptions }
+      },
+      shortcuts: [TextStyleShortcuts, DefaultShortcuts]
+    });
+    if (options.compact) {
+      addClass(editor.rootElement, "compact");
+      if (options.headingButton === false)
+        addClass(editor.rootElement, "no-heading-collapse");
+      if (options.blockMenuButton === false)
+        addClass(editor.rootElement, "no-block-menu");
+    }
+    editor.input.addHandler(new MarkdownInputHandler({
+      disableHeadingShortcuts: true
+    }));
+    editor.input.addHandler(new OnesEditorPasteHandler(editor));
+    editor.input.addHandler(new ListPasteHandler());
+    editor.doc.registerCallback(new HeadingBlockDocEvents(editor));
+    if (!clientType.isMobile) {
+      editor.addCustom("editor-tooltip", () => new OnesEditorTooltip(editor));
+    }
+    editor.addCustom("create-options", () => new OnesEditorCustomDataWrapper(editor, options));
+    if ((_h = options.componentsOptions) == null ? void 0 : _h.mention) {
+      const mentionOptions = options.componentsOptions.mention;
+      editor.addCustom("mention", () => new OnesEditorMention(editor, mentionOptions));
+    }
+    if (options.autoNewLine) {
+      editor.addCustom("auto-new-line", () => new AutoNewLine(editor));
+    }
+    editor.addListener("clickLink", (editor2, event, link2) => {
+      var _a2;
+      if ((_a2 = options == null ? void 0 : options.events) == null ? void 0 : _a2.onClickLink) {
+        options.events.onClickLink(editor2, event, link2);
+        return;
+      }
+      const href = link2.getAttribute("link") || link2.getAttribute("href");
+      if (href) {
+        if (editor2.readonly || event.ctrlKey || event.metaKey || !getParentBlock(link2)) {
+          window.open(href, "_blank");
+        }
+      }
+    });
+    editor.version = "4.0.0";
+    return editor;
+  }
   const emojis$1 = {
     smileysAndPeople: [
       "\u{1F600}",
@@ -143171,6 +143345,7 @@ ${JSON.stringify(error2, null, 2)}`);
   exports2.MathMenuIcon = MathMenuIcon;
   exports2.MaxUserError = MaxUserError;
   exports2.Mention2Icon = Mention2Icon;
+  exports2.MentionBox = MentionBox;
   exports2.MentionIcon = MentionIcon;
   exports2.MergeCellIcon = MergeCellIcon;
   exports2.Mindmap = Mindmap;
@@ -143183,12 +143358,14 @@ ${JSON.stringify(error2, null, 2)}`);
   exports2.MoreItem = MoreItem;
   exports2.NextIcon = NextIcon;
   exports2.OnesEditorAutoSuggest = OnesEditorAutoSuggest;
+  exports2.OnesEditorBlockMention = OnesEditorBlockMention;
   exports2.OnesEditorComments = OnesEditorComments;
   exports2.OnesEditorCommentsRender = OnesEditorCommentsRender;
   exports2.OnesEditorCustomDataWrapper = OnesEditorCustomDataWrapper;
   exports2.OnesEditorExclusiveBlock = OnesEditorExclusiveBlock;
   exports2.OnesEditorHoveringBlock = OnesEditorHoveringBlock;
   exports2.OnesEditorIcons = index$f;
+  exports2.OnesEditorMention = OnesEditorMention;
   exports2.OnesEditorQuickMenu = OnesEditorQuickMenu;
   exports2.OnesEditorToc = OnesEditorToc;
   exports2.OnesEditorTocProvider = OnesEditorTocProvider;
@@ -143386,6 +143563,7 @@ ${JSON.stringify(error2, null, 2)}`);
   exports2.createSeparator = createSeparator;
   exports2.createSimpleBlockPosition = createSimpleBlockPosition;
   exports2.createSimpleDocPos = createSimpleDocPos;
+  exports2.createSimpleInput = createSimpleInput;
   exports2.createTextBlockData = createTextBlockData;
   exports2.createTextButton = createTextButton;
   exports2.createTextOp = createTextOp;
@@ -143412,6 +143590,7 @@ ${JSON.stringify(error2, null, 2)}`);
   exports2.editorAutoBreakTextBlock = editorAutoBreakTextBlock;
   exports2.editorAutoInsertBlock = editorAutoInsertBlock;
   exports2.editorBreakTextBlock = editorBreakTextBlock;
+  exports2.editorClearAll = editorClearAll;
   exports2.editorClearCompositionText = editorClearCompositionText;
   exports2.editorClearSelectedContents = editorClearSelectedContents;
   exports2.editorCopyBlock = editorCopyBlock;

package/package.json

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