@ones-editor/editor 2.1.7-beta.2 → 2.1.7-beta.4

package/dist/index.js

@@ -439,7 +439,10 @@ div.comment-editor-root div.root.select-all > .container-blocks > div[data-type=
   position: absolute;
   pointer-events: none;
   z-index: -1;
-}.editor-command-bar.toolbar .color-button {
+}.editor-command-bar.toolbar .command-item.disabled .color-button {
+  color: #c7c7c7;
+}
+.editor-command-bar.toolbar .command-item .color-button {
   width: 24px;
   height: 24px;
   display: flex;
@@ -454,70 +457,70 @@ div.comment-editor-root div.root.select-all > .container-blocks > div[data-type=
   cursor: pointer;
   color: #2D2D2E;
 }
-.editor-command-bar.toolbar .color-button[data-color="0"] {
+.editor-command-bar.toolbar .command-item .color-button[data-color="0"] {
   color: var(--color-0);
 }
-.editor-command-bar.toolbar .color-button[data-color="1"] {
+.editor-command-bar.toolbar .command-item .color-button[data-color="1"] {
   color: var(--color-1);
 }
-.editor-command-bar.toolbar .color-button[data-color="2"] {
+.editor-command-bar.toolbar .command-item .color-button[data-color="2"] {
   color: var(--color-2);
 }
-.editor-command-bar.toolbar .color-button[data-color="3"] {
+.editor-command-bar.toolbar .command-item .color-button[data-color="3"] {
   color: var(--color-3);
 }
-.editor-command-bar.toolbar .color-button[data-color="4"] {
+.editor-command-bar.toolbar .command-item .color-button[data-color="4"] {
   color: var(--color-4);
 }
-.editor-command-bar.toolbar .color-button[data-color="5"] {
+.editor-command-bar.toolbar .command-item .color-button[data-color="5"] {
   color: var(--color-5);
 }
-.editor-command-bar.toolbar .color-button[data-color="6"] {
+.editor-command-bar.toolbar .command-item .color-button[data-color="6"] {
   color: var(--color-6);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="0"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="0"] {
   background-color: var(--background-color-0);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="1"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="1"] {
   background-color: var(--background-color-1);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="2"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="2"] {
   background-color: var(--background-color-2);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="3"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="3"] {
   background-color: var(--background-color-3);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="4"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="4"] {
   background-color: var(--background-color-4);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="5"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="5"] {
   background-color: var(--background-color-5);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="6"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="6"] {
   background-color: var(--background-color-6);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="7"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="7"] {
   background-color: var(--background-color-7);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="8"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="8"] {
   background-color: var(--background-color-8);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="9"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="9"] {
   background-color: var(--background-color-9);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="10"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="10"] {
   background-color: var(--background-color-10);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="11"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="11"] {
   background-color: var(--background-color-11);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="12"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="12"] {
   background-color: var(--background-color-12);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="13"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="13"] {
   background-color: var(--background-color-13);
 }
-.editor-command-bar.toolbar .color-button[data-background-color="14"] {
+.editor-command-bar.toolbar .command-item .color-button[data-background-color="14"] {
   background-color: var(--background-color-14);
 }
 .tippy-content {
@@ -40084,7 +40087,12 @@ ${codeText}
       button2.setAttribute("data-background-color", `${backgroundColor}`);
     }
   }
-  class TextColorItem extends tinyTypedEmitter.TypedEmitter {
+  function getButtonColor(button2) {
+    const color = button2.getAttribute("data-color");
+    const backgroundColor = button2.getAttribute("data-background-color");
+    return [color === null ? null : parseInt(color, 10), backgroundColor === null ? null : parseInt(backgroundColor, 10)];
+  }
+  class TextColorItem$1 extends tinyTypedEmitter.TypedEmitter {
     constructor(editor) {
       super();
       __publicField(this, "id", "text-color-item");
@@ -40114,6 +40122,7 @@ ${codeText}
         this.updatePaletteColor(this.latestColors);
         this.emit("beforePopup");
       });
+      __publicField(this, "getButtonColor", () => getButtonColor(this.element));
       this.editor = editor;
       this.colorPaletteItem = new ColorPaletteItem("text-color-palette-item");
       this.colorPaletteItem.palette.addListener("onClick", this.handlePaletteClick);
@@ -73044,7 +73053,7 @@ ${content}
         this.emptyTextBlockAttributes.set(blockId, attributes);
       });
       this.editor = editor;
-      this.colorItem = editor.addCustom("text-color-item", () => new TextColorItem(editor));
+      this.colorItem = editor.addCustom("text-color-item", () => new TextColorItem$1(editor));
       this.colorItem.addListener("onClick", this.handleChangeColor);
     }
     destroy() {
@@ -83750,6 +83759,493 @@ ${data2.flowchartText}
     }
     return buffer;
   }
+  class FontStyleBaseItem {
+    constructor(name, id) {
+      __publicField(this, "states", []);
+      this.name = name;
+      this.id = id;
+    }
+    getCommand(editor) {
+      const commands = editor.editorCommandProviders.getCommands(editor.selection.range, "main-toolbar");
+      return commands.find((c) => c.id === this.id);
+    }
+    onClick(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        editor.editorCommandProviders.executeCommand(editor.selection.range, command, {});
+      }
+    }
+    updateState(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        this.states = command.states || [];
+      } else {
+        this.states = ["disabled"];
+      }
+    }
+  }
+  class FontBoldItem extends FontStyleBaseItem {
+    constructor() {
+      super("bold", "text/style-bold");
+      __publicField(this, "icon", BoldIcon);
+    }
+  }
+  class FontItalicItem extends FontStyleBaseItem {
+    constructor() {
+      super("italic", "text/style-italic");
+      __publicField(this, "icon", ItalicIcon);
+    }
+  }
+  class FontUnderlineItem extends FontStyleBaseItem {
+    constructor() {
+      super("underline", "text/style-underline");
+      __publicField(this, "icon", UnderlineIcon);
+    }
+  }
+  class FontStrikethroughItem extends FontStyleBaseItem {
+    constructor() {
+      super("strikethrough", "text/style-strikethrough");
+      __publicField(this, "icon", LineThroughIcon);
+    }
+  }
+  class TextColorItem extends TextColorItem$1 {
+    constructor(editor) {
+      super(editor);
+      __publicField(this, "childrenPlacement", "bottom-start");
+      __publicField(this, "states");
+      __publicField(this, "handleMousedown", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      });
+      this.addListener("onClick", this.handleChangeColor);
+      this.element.addEventListener("mousedown", this.handleMousedown);
+    }
+    handleChangeColor(type, value) {
+      const provider = this.editor.editorCommandProviders.getCommandProvider("TextCommandProvider");
+      if (provider) {
+        provider.handleChangeColor(type, value);
+      }
+      this.setLatestColors(type, value);
+    }
+    updateState(editor) {
+      const provider = this.editor.editorCommandProviders.getCommandProvider("TextCommandProvider");
+      if (provider) {
+        const selection = editor.selection;
+        const blocks = selection.range.getSelectedBlocks();
+        const startBlock = blocks[0];
+        if (startBlock && startBlock.start.isSimple() && startBlock.end.isSimple()) {
+          const range = createBlockSimpleRange(this.editor, startBlock.block, startBlock.start.offset, startBlock.end.offset);
+          const commands = provider.getAvailableCommands(this.editor, startBlock.block, range);
+          const color = commands.find((c) => c.id === "text-color-item");
+          if (color) {
+            this.states = [];
+            const button2 = color.element;
+            if (button2) {
+              const color2 = button2.getAttribute("data-color");
+              const backgroundColor = button2.getAttribute("data-background-color");
+              const colors = [color2 === null ? null : parseInt(color2, 10), backgroundColor === null ? null : parseInt(backgroundColor, 10)];
+              this.updateButtonColor(colors);
+            }
+          } else {
+            this.states = ["disabled"];
+          }
+        }
+      }
+    }
+  }
+  class AlignBaseItem {
+    constructor(id, name, icon) {
+      __publicField(this, "states", []);
+      this.id = id;
+      this.name = name;
+      this.icon = icon;
+    }
+    getCommand(editor) {
+      var _a;
+      const commands = editor.editorCommandProviders.getCommands(editor.selection.range, "main-toolbar");
+      const parentCommand = commands.find((c) => c.id === "align");
+      if (!parentCommand) {
+        return null;
+      }
+      const command = (_a = parentCommand.children) == null ? void 0 : _a.find((c) => c.id === this.id);
+      return command || null;
+    }
+    onClick(editor, item) {
+      const command = {
+        ...item,
+        group: "BlockAlignProvider"
+      };
+      editor.editorCommandProviders.executeCommand(editor.selection.range, command, {});
+    }
+    updateState(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        this.states = command.states || [];
+      } else {
+        this.states = ["disabled"];
+      }
+    }
+  }
+  class AlignLeftItem extends AlignBaseItem {
+    constructor() {
+      super("align-left", "Align left", AlignLeftIcon);
+    }
+  }
+  class AlignCenterItem extends AlignBaseItem {
+    constructor() {
+      super("align-center", "Align center", AlignCenterIcon);
+    }
+  }
+  class AlignRightItem extends AlignBaseItem {
+    constructor() {
+      super("align-right", "Align right", AlignRightIcon);
+    }
+  }
+  class ParagraphItem {
+    constructor() {
+      __publicField(this, "children", []);
+      __publicField(this, "id", "paragraph");
+      __publicField(this, "name", "Paragraph");
+      __publicField(this, "states", []);
+      __publicField(this, "dropdown", true);
+      __publicField(this, "manualShowChildren", true);
+      __publicField(this, "childrenPlacement", "bottom-start");
+      this.children = [{
+        name: "Plain text",
+        id: "text",
+        icon: TextIcon
+      }, {
+        name: "",
+        id: "separator",
+        type: "separator"
+      }];
+      const icons = [
+        Heading1Icon,
+        Heading2Icon,
+        Heading3Icon,
+        Heading4Icon,
+        Heading5Icon,
+        Heading6Icon
+      ];
+      for (let i = 1; i <= 6; i++) {
+        this.children.push({
+          name: `Heading ${i}`,
+          id: `heading-${i}`,
+          icon: icons[i - 1],
+          value: `${i}`
+        });
+      }
+    }
+    updateState(editor) {
+      const block = editor.getBlockById(editor.selection.range.start.blockId);
+      if (!block || !isTextKindBlock(editor, block)) {
+        this.states = ["disabled"];
+        return;
+      }
+      this.states = [];
+      let heading;
+      if (isHeadingBlock$1(block)) {
+        heading = getBlockHeading(block);
+      }
+      const children = this.children;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (child.id === "text") {
+          child.states = heading === void 0 ? ["checked"] : [];
+        } else if (child.id === "separator")
+          ;
+        else if (child.id.startsWith("heading-")) {
+          child.states = child.value === `${heading}` ? ["checked"] : [];
+        }
+      }
+      if (heading === void 0) {
+        this.name = "Plain Text";
+      } else {
+        this.name = `Heading ${heading}`;
+      }
+    }
+    onClick(editor, item) {
+      const command = {
+        ...item,
+        group: "BlockTurnIntoCommandProvider"
+      };
+      editor.editorCommandProviders.executeCommand(editor.selection.range, command, {
+        value: item.value
+      });
+    }
+  }
+  class SeparatorItem {
+    constructor() {
+      __publicField(this, "id", `separator-${Date.now()}`);
+      __publicField(this, "type", "separator");
+      __publicField(this, "name", "");
+    }
+  }
+  class OrderedListItem {
+    constructor() {
+      __publicField(this, "id", "ordered-list");
+      __publicField(this, "name", "Ordered List");
+      __publicField(this, "icon", OrderedListIcon);
+      __publicField(this, "states", []);
+    }
+    getCommand(editor) {
+      const commands = editor.editorCommandProviders.getCommands(editor.selection.range, "");
+      const command = commands.find((c) => c.id === this.id);
+      return command;
+    }
+    updateState(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        this.name = command.name;
+        this.states = command.states || [];
+      } else {
+        this.states = ["disabled"];
+      }
+    }
+    onClick(editor, item) {
+      const command = {
+        ...item,
+        group: "BlockParagraphProvider"
+      };
+      editor.editorCommandProviders.executeCommand(editor.selection.range, command, {});
+    }
+  }
+  class UnorderedListItem {
+    constructor() {
+      __publicField(this, "id", "unordered-list");
+      __publicField(this, "name", "Unordered List");
+      __publicField(this, "icon", UnorderedListIcon);
+      __publicField(this, "states", []);
+    }
+    getCommand(editor) {
+      const commands = editor.editorCommandProviders.getCommands(editor.selection.range, "");
+      const command = commands.find((c) => c.id === this.id);
+      return command;
+    }
+    updateState(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        this.name = command.name;
+        this.states = command.states || [];
+      } else {
+        this.states = ["disabled"];
+      }
+    }
+    onClick(editor, item) {
+      const command = {
+        ...item,
+        group: "BlockParagraphProvider"
+      };
+      editor.editorCommandProviders.executeCommand(editor.selection.range, command, {});
+    }
+  }
+  class CheckListItem {
+    constructor() {
+      __publicField(this, "id", "check-list");
+      __publicField(this, "name", "Check List");
+      __publicField(this, "icon", CheckListIcon);
+      __publicField(this, "states", []);
+    }
+    getCommand(editor) {
+      const commands = editor.editorCommandProviders.getCommands(editor.selection.range, "");
+      const command = commands.find((c) => c.id === this.id);
+      return command;
+    }
+    updateState(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        this.name = command.name;
+        this.states = command.states || [];
+      } else {
+        this.states = ["disabled"];
+      }
+    }
+    onClick(editor, item) {
+      const command = {
+        ...item,
+        group: "BlockParagraphProvider"
+      };
+      editor.editorCommandProviders.executeCommand(editor.selection.range, command, {});
+    }
+  }
+  class InsertImageItem {
+    constructor() {
+      __publicField(this, "id", "insert-image");
+      __publicField(this, "name", "Insert Image");
+      __publicField(this, "icon", ImageIcon);
+    }
+    onClick(editor, item) {
+      const block = editor.getBlockById(editor.selection.range.start.blockId);
+      const items = getAllInsertBlockItems(editor, block, "insert-block", {
+        withPlainText: false,
+        from: "block-menu",
+        type: "sibling"
+      });
+      const imageItem = items.find((item2) => item2.id === "insert-image");
+      if (imageItem) {
+        executeInsertBlockCommand(editor, block, imageItem, false);
+      }
+    }
+  }
+  class InsertLinkItem {
+    constructor() {
+      __publicField(this, "id", "insert-link");
+      __publicField(this, "name", "Insert Link");
+      __publicField(this, "icon", LinkIcon);
+      __publicField(this, "states", []);
+    }
+    getCommand(editor) {
+      const commands = editor.editorCommandProviders.getCommands(editor.selection.range, "link");
+      return commands.find((command) => command.id === "link");
+    }
+    updateState(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        this.states = command.states || [];
+      } else {
+        this.states = ["disabled"];
+      }
+    }
+    onClick(editor, item) {
+      const command = this.getCommand(editor);
+      if (!command) {
+        return;
+      }
+      editor.editorCommandProviders.executeCommand(editor.selection.range, command, {});
+    }
+  }
+  class QuoteItem {
+    constructor() {
+      __publicField(this, "id", "quoted");
+      __publicField(this, "name", "Quote");
+      __publicField(this, "icon", QuoteIcon);
+      __publicField(this, "states", []);
+    }
+    getCommand(editor) {
+      const commands = editor.editorCommandProviders.getCommands(editor.selection.range, "quoted");
+      return commands.find((command) => command.id === "quoted");
+    }
+    updateState(editor) {
+      const command = this.getCommand(editor);
+      if (command) {
+        this.states = command.states || [];
+      } else {
+        this.states = ["disabled"];
+      }
+    }
+    onClick(editor, item) {
+      const command = this.getCommand(editor);
+      if (!command) {
+        return;
+      }
+      editor.editorCommandProviders.executeCommand(editor.selection.range, command, {});
+    }
+  }
+  function getToolbarDefaultItems(editor) {
+    return [
+      new ParagraphItem(),
+      new SeparatorItem(),
+      new FontBoldItem(),
+      new FontItalicItem(),
+      new FontUnderlineItem(),
+      new FontStrikethroughItem(),
+      new TextColorItem$1(editor),
+      new SeparatorItem(),
+      new AlignLeftItem(),
+      new AlignCenterItem(),
+      new AlignRightItem(),
+      new SeparatorItem(),
+      new OrderedListItem(),
+      new UnorderedListItem(),
+      new CheckListItem(),
+      new SeparatorItem(),
+      new InsertImageItem(),
+      new InsertLinkItem(),
+      new QuoteItem()
+    ];
+  }
+  class MainToolbar {
+    constructor(editor, parent) {
+      __publicField(this, "toolbar");
+      __publicField(this, "handleClick", (bar2, item) => {
+        const command = item;
+        if (command.onClick) {
+          command.onClick(this.editor, command);
+          this.handleSelectionChanged();
+          return;
+        }
+        const findParent = (item2, id) => {
+          if (item2.children) {
+            for (const child of item2.children) {
+              if (child.id === id) {
+                return item2;
+              }
+              const parent = findParent(child, id);
+              if (parent) {
+                return parent;
+              }
+            }
+          }
+          return null;
+        };
+        for (const i of this.toolbar.items) {
+          const parent = findParent(i, item.id);
+          if (parent) {
+            if (parent.onClick) {
+              parent.onClick(this.editor, item);
+              this.handleSelectionChanged();
+              return;
+            }
+          }
+        }
+      });
+      __publicField(this, "handleSelectionChanged", () => {
+        this.updateState();
+      });
+      this.editor = editor;
+      this.toolbar = new FixedToolbar(parent, this.getItems());
+      this.toolbar.addListener("click", this.handleClick);
+      this.editor.addListener("selectionChanged", this.handleSelectionChanged);
+      this.updateState();
+    }
+    destroy() {
+    }
+    setItems(items) {
+      this.toolbar.updateItems(items);
+      this.updateState();
+    }
+    getItems() {
+      return [
+        new ParagraphItem(),
+        new SeparatorItem(),
+        new FontBoldItem(),
+        new FontItalicItem(),
+        new FontUnderlineItem(),
+        new FontStrikethroughItem(),
+        new TextColorItem(this.editor),
+        new SeparatorItem(),
+        new AlignLeftItem(),
+        new AlignCenterItem(),
+        new AlignRightItem(),
+        new SeparatorItem(),
+        new OrderedListItem(),
+        new UnorderedListItem(),
+        new CheckListItem(),
+        new SeparatorItem(),
+        new InsertImageItem(),
+        new InsertLinkItem(),
+        new QuoteItem()
+      ];
+    }
+    updateState() {
+      const items = this.toolbar.items;
+      items.forEach((item) => {
+        var _a;
+        (_a = item.updateState) == null ? void 0 : _a.call(item, this.editor);
+      });
+      this.toolbar.updateItems(items);
+    }
+  }
   const logger = getLogger("create-editor");
   function getDefaultOnesEditorOptions(options) {
     var _a, _b, _c, _d, _e, _f;
@@ -83869,7 +84365,9 @@ ${data2.flowchartText}
       return new OnesEditorQuickMenu(editor, (_a2 = options.componentsOptions) == null ? void 0 : _a2.quickMenu);
     });
     editor.addCustom("remote-cursor", () => new RemoteCarets(editor));
-    editor.addCustom("block-menu", (editor2) => new OnesEditorBlockMenuButtons(editor2));
+    if (options.blockMenuButton !== false) {
+      editor.addCustom("block-menu", (editor2) => new OnesEditorBlockMenuButtons(editor2));
+    }
     if (!clientType.isMobile) {
       editor.addCustom("editor-tooltip", () => new OnesEditorTooltip(editor));
     }
@@ -83894,9 +84392,11 @@ ${data2.flowchartText}
       const mentionOptions = options.componentsOptions.mention;
       editor.addCustom("mention", () => new OnesEditorMention(editor, mentionOptions));
     }
-    editor.addCustom("heading-collapse", () => new HeadingBlockCollapseButton(editor));
+    if (options.headingButton !== false) {
+      editor.addCustom("heading-collapse", () => new HeadingBlockCollapseButton(editor));
+    }
     editor.addCustom(DOC_RE_AUTH_KEYS, (editor2) => new DocReAuthCallbacks(editor2));
-    if (!clientType.isMobile) {
+    if (!clientType.isMobile && options.floatingToolbar !== false) {
       OnesEditorToolbar.register(editor);
     }
     OnesEditorDropTarget.register(editor);
@@ -83941,7 +84441,7 @@ ${data2.flowchartText}
         }
       }
     });
-    editor.version = "2.1.7-beta.2";
+    editor.version = "2.1.7-beta.4";
     if (Logger$2.level === LogLevel.DEBUG) {
       window.setReauthFail = (fail) => {
         window.isReauthError = fail;
@@ -84000,8 +84500,10 @@ ${data2.flowchartText}
     editor.input.addHandler(new OnesEditorPasteHandler(editor));
     editor.input.addHandler(new BlockLockerPasteHandler());
     editor.input.addHandler(new ListPasteHandler());
-    editor.addCustom("block-menu", (editor2) => new OnesEditorBlockMenuButtons(editor2));
-    if (!clientType.isMobile) {
+    if (options.blockMenuButton !== false) {
+      editor.addCustom("block-menu", (editor2) => new OnesEditorBlockMenuButtons(editor2));
+    }
+    if (!clientType.isMobile && options.floatingToolbar !== false) {
       editor.addCustom("editor-tooltip", () => new OnesEditorTooltip(editor));
     }
     editor.addCustom("editor-quick-menu", () => {
@@ -84018,7 +84520,9 @@ ${data2.flowchartText}
     if (options.enableContextMenu !== false) {
       editor.addCustom("editor-context-menu", (editor2) => new OnesEditorContextMenu(editor2));
     }
-    editor.addCustom("heading-collapse", () => new HeadingBlockCollapseButton(editor));
+    if (options.headingButton !== false) {
+      editor.addCustom("heading-collapse", () => new HeadingBlockCollapseButton(editor));
+    }
     editor.addListener("clickLink", (editor2, event, link2) => {
       var _a2;
       if ((_a2 = options == null ? void 0 : options.events) == null ? void 0 : _a2.onClickLink) {
@@ -84036,7 +84540,7 @@ ${data2.flowchartText}
     if (!clientType.isMobile) {
       OnesEditorToolbar.register(editor);
     }
-    editor.version = "2.1.7-beta.2";
+    editor.version = "2.1.7-beta.4";
     return editor;
   }
   async function showDocVersions(editor, options, serverUrl) {
@@ -129810,6 +130314,9 @@ ${data2.flowchartText}
   });
   exports2.tippy = tippy__namespace;
   exports2.AddCommentToOldDocCommandProvider = AddCommentToOldDocCommandProvider;
+  exports2.AlignCenterItem = AlignCenterItem;
+  exports2.AlignLeftItem = AlignLeftItem;
+  exports2.AlignRightItem = AlignRightItem;
   exports2.AnchorBox = AnchorBox;
   exports2.AuthError = AuthError;
   exports2.AuthHeader = AuthHeader;
@@ -129821,6 +130328,7 @@ ${data2.flowchartText}
   exports2.BlockLockerPasteHandler = BlockLockerPasteHandler;
   exports2.BlockResizer = BlockResizer;
   exports2.BrBox = BrBox;
+  exports2.CheckListItem = CheckListItem;
   exports2.CodeBlock = CodeBlock;
   exports2.CodeLineBlock = CodeLineBlock;
   exports2.CodeTextDecorator = CodeTextDecorator;
@@ -129846,17 +130354,24 @@ ${data2.flowchartText}
   exports2.EventCallbacks = EventCallbacks;
   exports2.FILL_CHAR = FILL_CHAR;
   exports2.FileExtError = FileExtError;
+  exports2.FontBoldItem = FontBoldItem;
+  exports2.FontItalicItem = FontItalicItem;
+  exports2.FontStrikethroughItem = FontStrikethroughItem;
+  exports2.FontUnderlineItem = FontUnderlineItem;
   exports2.GroupOrder = GroupOrder;
   exports2.HeadingBlockScrollListener = HeadingBlockScrollListener;
   exports2.ImageBox = ImageBox;
   exports2.InlineBoxCommandProvider = InlineBoxCommandProvider;
   exports2.InputtingInsertion = InputtingInsertion;
+  exports2.InsertImageItem = InsertImageItem;
+  exports2.InsertLinkItem = InsertLinkItem;
   exports2.LayoutBlock = LayoutBlock;
   exports2.LayoutBlockCaptionInputHandler = LayoutBlockCaptionInputHandler;
   exports2.LocalDoc = LocalDoc;
   exports2.LogLevel = LogLevel;
   exports2.Logger = Logger$2;
   exports2.MIN_DISTANCE_THRESHOLD = MIN_DISTANCE_THRESHOLD$1;
+  exports2.MainToolbar = MainToolbar;
   exports2.ManualCloseDialog = ManualCloseDialog;
   exports2.ManualMenu = ManualMenu;
   exports2.ManualToolbar = ManualToolbar;
@@ -129875,8 +130390,11 @@ ${data2.flowchartText}
   exports2.OnesEditorToolbar = OnesEditorToolbar;
   exports2.OnesEditorTooltip = OnesEditorTooltip;
   exports2.OnesEditorVersionsDialog = OnesEditorVersionsDialog;
+  exports2.OrderedListItem = OrderedListItem;
+  exports2.ParagraphItem = ParagraphItem;
   exports2.PermissionError = PermissionError;
   exports2.Popup = Popup;
+  exports2.QuoteItem = QuoteItem;
   exports2.ReAuthToolbar = ReAuthToolbar;
   exports2.ReadonlyToolbar = ReadonlyToolbar;
   exports2.RemoteCarets = RemoteCarets;
@@ -129885,6 +130403,7 @@ ${data2.flowchartText}
   exports2.RemoteUsers = RemoteUsers;
   exports2.RequestReloadError = RequestReloadError;
   exports2.RichText = RichText;
+  exports2.SeparatorItem = SeparatorItem;
   exports2.ShareDBClientBase = ShareDBClientBase;
   exports2.ShareDBDoc = ShareDBDoc;
   exports2.ShareDBDocVersionsProvider = ShareDBDocVersionsProvider;
@@ -129899,9 +130418,10 @@ ${data2.flowchartText}
   exports2.TableShortcuts = TableShortcuts;
   exports2.TextBlock = TextBlock;
   exports2.TextBox = TextBox;
-  exports2.TextColorItem = TextColorItem;
+  exports2.TextColorItem = TextColorItem$1;
   exports2.TextStyleShortcuts = TextStyleShortcuts;
   exports2.TocEmbed = TocEmbed;
+  exports2.UnorderedListItem = UnorderedListItem;
   exports2.ZERO_WIDTH_SPACE_CHAR = ZERO_WIDTH_SPACE_CHAR;
   exports2.abbreviation = abbreviation;
   exports2.addAttribute = addAttribute;
@@ -130206,6 +130726,7 @@ ${data2.flowchartText}
   exports2.getTextOpLength = getTextOpLength;
   exports2.getTextWidth = getTextWidth;
   exports2.getToolbar = getToolbar;
+  exports2.getToolbarDefaultItems = getToolbarDefaultItems;
   exports2.handleBlockElementUpdated = handleBlockElementUpdated$1;
   exports2.hasAltOnly = hasAltOnly;
   exports2.hasClass = hasClass;