@nkzw/mdx-editor 0.1.0

package/dist/plugins/table/TableNode.js

@@ -0,0 +1,208 @@
+import { jsx } from "react/jsx-runtime";
+import { DecoratorNode } from "lexical";
+import { noop } from "../../utils/fp.js";
+import { TableEditor } from "./TableEditor.js";
+const EMPTY_CELL = { type: "tableCell", children: [] };
+function coordinatesEmitter() {
+  let subscription = noop;
+  return {
+    publish: (coords) => {
+      subscription(coords);
+    },
+    subscribe: (cb) => {
+      subscription = cb;
+    }
+  };
+}
+class TableNode extends DecoratorNode {
+  /** @internal */
+  __mdastNode;
+  /** @internal */
+  focusEmitter = coordinatesEmitter();
+  /** @internal */
+  static getType() {
+    return "table";
+  }
+  /** @internal */
+  static clone(node) {
+    return new TableNode(structuredClone(node.__mdastNode), node.__key);
+  }
+  /** @internal */
+  static importJSON(serializedNode) {
+    return $createTableNode(serializedNode.mdastNode);
+  }
+  /** @internal */
+  static importDOM() {
+    return {
+      table: () => {
+        return {
+          conversion: $convertTableElement,
+          priority: 3
+        };
+      }
+    };
+  }
+  /** @internal */
+  exportJSON() {
+    return {
+      mdastNode: structuredClone(this.__mdastNode),
+      type: "table",
+      version: 1
+    };
+  }
+  /**
+   * Returns the mdast node that this node is constructed from.
+   */
+  getMdastNode() {
+    return this.__mdastNode;
+  }
+  /**
+   * Returns the number of rows in the table.
+   */
+  getRowCount() {
+    return this.__mdastNode.children.length;
+  }
+  /**
+   * Returns the number of columns in the table.
+   */
+  getColCount() {
+    return this.__mdastNode.children[0]?.children.length || 0;
+  }
+  /**
+   * Constructs a new {@link TableNode} with the specified MDAST table node as the object to edit.
+   * See {@link https://github.com/micromark/micromark-extension-gfm-table | micromark/micromark-extension-gfm-table} for more information on the MDAST table node.
+   */
+  constructor(mdastNode, key) {
+    super(key);
+    this.__mdastNode = mdastNode ?? { type: "table", children: [] };
+  }
+  /** @internal */
+  createDOM() {
+    return document.createElement("div");
+  }
+  /** @internal */
+  updateDOM() {
+    return false;
+  }
+  /** @internal */
+  updateCellContents(colIndex, rowIndex, children) {
+    const self = this.getWritable();
+    const table = self.__mdastNode;
+    const row = table.children[rowIndex];
+    const cells = row.children;
+    const cell = cells[colIndex];
+    const cellsClone = Array.from(cells);
+    const cellClone = { ...cell, children };
+    const rowClone = { ...row, children: cellsClone };
+    cellsClone[colIndex] = cellClone;
+    table.children[rowIndex] = rowClone;
+  }
+  insertColumnAt(colIndex) {
+    const self = this.getWritable();
+    const table = self.__mdastNode;
+    for (let rowIndex = 0; rowIndex < table.children.length; rowIndex++) {
+      const row = table.children[rowIndex];
+      const cells = row.children;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, children: cellsClone };
+      cellsClone.splice(colIndex, 0, structuredClone(EMPTY_CELL));
+      table.children[rowIndex] = rowClone;
+    }
+    if (table.align && table.align.length > 0) {
+      table.align.splice(colIndex, 0, "left");
+    }
+  }
+  deleteColumnAt(colIndex) {
+    const self = this.getWritable();
+    const table = self.__mdastNode;
+    for (let rowIndex = 0; rowIndex < table.children.length; rowIndex++) {
+      const row = table.children[rowIndex];
+      const cells = row.children;
+      const cellsClone = Array.from(cells);
+      const rowClone = { ...row, children: cellsClone };
+      cellsClone.splice(colIndex, 1);
+      table.children[rowIndex] = rowClone;
+    }
+  }
+  insertRowAt(y) {
+    const self = this.getWritable();
+    const table = self.__mdastNode;
+    const newRow = {
+      type: "tableRow",
+      children: Array.from({ length: this.getColCount() }, () => structuredClone(EMPTY_CELL))
+    };
+    table.children.splice(y, 0, newRow);
+  }
+  deleteRowAt(rowIndex) {
+    if (this.getRowCount() === 1) {
+      this.selectNext();
+      this.remove();
+    } else {
+      this.getWritable().__mdastNode.children.splice(rowIndex, 1);
+    }
+  }
+  addRowToBottom() {
+    this.insertRowAt(this.getRowCount());
+  }
+  addColumnToRight() {
+    this.insertColumnAt(this.getColCount());
+  }
+  setColumnAlign(colIndex, align) {
+    const self = this.getWritable();
+    const table = self.__mdastNode;
+    table.align ??= [];
+    table.align[colIndex] = align;
+  }
+  /** @internal */
+  decorate(parentEditor) {
+    return /* @__PURE__ */ jsx(TableEditor, { lexicalTable: this, mdastNode: this.__mdastNode, parentEditor });
+  }
+  /**
+   * Focuses the table cell at the specified coordinates.
+   * Pass `undefined` to remove the focus.
+   */
+  select(coords) {
+    this.focusEmitter.publish(coords ?? [0, 0]);
+  }
+  /** @internal */
+  isInline() {
+    return false;
+  }
+}
+function $isTableNode(node) {
+  return node instanceof TableNode;
+}
+function $createTableNode(mdastNode) {
+  return new TableNode(mdastNode);
+}
+function $convertTableElement(element) {
+  const rows = element.querySelectorAll("tr");
+  const children = Array.from(rows).map((row) => {
+    return {
+      type: "tableRow",
+      children: Array.from(row.querySelectorAll("td, th")).map((cell) => {
+        return {
+          type: "tableCell",
+          children: [
+            {
+              type: "text",
+              value: cell.textContent
+            }
+          ]
+        };
+      })
+    };
+  });
+  return {
+    node: new TableNode({
+      type: "table",
+      children
+    })
+  };
+}
+export {
+  $convertTableElement,
+  $createTableNode,
+  $isTableNode,
+  TableNode
+};

package/dist/plugins/table/index.js

@@ -0,0 +1,66 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { Signal, map } from "@mdxeditor/gurx";
+import { gfmTableToMarkdown, gfmTableFromMarkdown } from "mdast-util-gfm-table";
+import { gfmTable } from "micromark-extension-gfm-table";
+import { insertDecoratorNode$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$ } from "../core/index.js";
+import { LexicalTableVisitor } from "./LexicalTableVisitor.js";
+import { MdastTableVisitor } from "./MdastTableVisitor.js";
+import { $createTableNode, TableNode } from "./TableNode.js";
+import { $convertTableElement, $isTableNode } from "./TableNode.js";
+function seedTable(rows = 1, columns = 1) {
+  const table = {
+    type: "table",
+    children: []
+  };
+  for (let i = 0; i < rows; i++) {
+    const tableRow = {
+      type: "tableRow",
+      children: []
+    };
+    for (let j = 0; j < columns; j++) {
+      const cell = {
+        type: "tableCell",
+        children: []
+      };
+      tableRow.children.push(cell);
+    }
+    table.children.push(tableRow);
+  }
+  return table;
+}
+const insertTable$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertTable$,
+      map(({ rows, columns }) => {
+        return () => $createTableNode(seedTable(rows, columns));
+      })
+    ),
+    insertDecoratorNode$
+  );
+});
+const tablePlugin = realmPlugin({
+  init(realm, params) {
+    realm.pubIn({
+      // import
+      [addMdastExtension$]: gfmTableFromMarkdown(),
+      [addSyntaxExtension$]: gfmTable(),
+      [addImportVisitor$]: MdastTableVisitor,
+      // export
+      [addLexicalNode$]: TableNode,
+      [addExportVisitor$]: LexicalTableVisitor,
+      [addToMarkdownExtension$]: gfmTableToMarkdown({
+        tableCellPadding: params?.tableCellPadding ?? true,
+        tablePipeAlign: params?.tablePipeAlign ?? true
+      })
+    });
+  }
+});
+export {
+  $convertTableElement,
+  $createTableNode,
+  $isTableNode,
+  TableNode,
+  insertTable$,
+  tablePlugin
+};

package/dist/plugins/thematic-break/LexicalThematicBreakVisitor.js

@@ -0,0 +1,10 @@
+import { $isHorizontalRuleNode } from "@lexical/extension";
+const LexicalThematicBreakVisitor = {
+  testLexicalNode: $isHorizontalRuleNode,
+  visitLexicalNode({ actions }) {
+    actions.addAndStepInto("thematicBreak");
+  }
+};
+export {
+  LexicalThematicBreakVisitor
+};

package/dist/plugins/thematic-break/MdastThematicBreakVisitor.js

@@ -0,0 +1,10 @@
+import { $createHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode.js";
+const MdastThematicBreakVisitor = {
+  testNode: "thematicBreak",
+  visitNode({ actions }) {
+    actions.addAndStepInto($createHorizontalRuleNode());
+  }
+};
+export {
+  MdastThematicBreakVisitor
+};

package/dist/plugins/thematic-break/index.js

@@ -0,0 +1,27 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { INSERT_HORIZONTAL_RULE_COMMAND, HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode.js";
+import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin.js";
+import { Action, withLatestFrom } from "@mdxeditor/gurx";
+import { activeEditor$, addComposerChild$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
+import { LexicalThematicBreakVisitor } from "./LexicalThematicBreakVisitor.js";
+import { MdastThematicBreakVisitor } from "./MdastThematicBreakVisitor.js";
+const insertThematicBreak$ = Action((r) => {
+  r.sub(r.pipe(insertThematicBreak$, withLatestFrom(activeEditor$)), ([, theEditor]) => {
+    theEditor?.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
+  });
+});
+const thematicBreakPlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      [addActivePlugin$]: "thematicBreak",
+      [addImportVisitor$]: MdastThematicBreakVisitor,
+      [addLexicalNode$]: HorizontalRuleNode,
+      [addExportVisitor$]: LexicalThematicBreakVisitor,
+      [addComposerChild$]: HorizontalRulePlugin
+    });
+  }
+});
+export {
+  insertThematicBreak$,
+  thematicBreakPlugin
+};

package/dist/plugins/toolbar/components/BlockTypeSelect.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { $createParagraphNode } from "lexical";
+import { convertSelectionToNode$, currentBlockType$, activePlugins$, useTranslation } from "../../core/index.js";
+import { allowedHeadingLevels$ } from "../../headings/index.js";
+import { Select } from "../primitives/select.js";
+const BlockTypeSelect = () => {
+  const convertSelectionToNode = usePublisher(convertSelectionToNode$);
+  const currentBlockType = useCellValue(currentBlockType$);
+  const activePlugins = useCellValue(activePlugins$);
+  const hasQuote = activePlugins.includes("quote");
+  const hasHeadings = activePlugins.includes("headings");
+  const t = useTranslation();
+  if (!hasQuote && !hasHeadings) {
+    return null;
+  }
+  const items = [
+    { label: t("toolbar.blockTypes.paragraph", "Paragraph"), value: "paragraph" }
+  ];
+  if (hasQuote) {
+    items.push({ label: t("toolbar.blockTypes.quote", "Quote"), value: "quote" });
+  }
+  if (hasHeadings) {
+    const allowedHeadingLevels = useCellValue(allowedHeadingLevels$);
+    items.push(
+      ...allowedHeadingLevels.map(
+        (n) => ({ label: t("toolbar.blockTypes.heading", "Heading {{level}}", { level: n }), value: `h${n}` })
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      value: currentBlockType,
+      onChange: (blockType) => {
+        switch (blockType) {
+          case "quote":
+            convertSelectionToNode(() => $createQuoteNode());
+            break;
+          case "paragraph":
+            convertSelectionToNode(() => $createParagraphNode());
+            break;
+          case "":
+            break;
+          default:
+            if (blockType.startsWith("h")) {
+              convertSelectionToNode(() => $createHeadingNode(blockType));
+            } else {
+              throw new Error(`Unknown block type: ${blockType}`);
+            }
+        }
+      },
+      triggerTitle: t("toolbar.blockTypeSelect.selectBlockTypeTooltip", "Select block type"),
+      placeholder: t("toolbar.blockTypeSelect.placeholder", "Block type"),
+      items
+    }
+  );
+};
+export {
+  BlockTypeSelect
+};

package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation, currentFormat$, iconComponentFor$, applyFormat$ } from "../../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+import { IS_BOLD, IS_ITALIC, IS_UNDERLINE, IS_STRIKETHROUGH, IS_SUPERSCRIPT, IS_SUBSCRIPT } from "../../../FormatConstants.js";
+import { ToggleSingleGroupWithItem } from "../primitives/toolbar.js";
+import styles from "../../../styles/ui.module.css.js";
+const FormatButton = ({ format, addTitle, removeTitle, icon, formatName }) => {
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
+  const applyFormat = usePublisher(applyFormat$);
+  const active = (currentFormat & format) !== 0;
+  return /* @__PURE__ */ jsx(
+    ToggleSingleGroupWithItem,
+    {
+      title: active ? removeTitle : addTitle,
+      on: active,
+      onValueChange: () => {
+        applyFormat(formatName);
+      },
+      children: iconComponentFor(icon)
+    }
+  );
+};
+const BoldItalicUnderlineToggles = ({ options }) => {
+  const t = useTranslation();
+  const showAllButtons = typeof options === "undefined";
+  return /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroupOfGroups, children: [
+    showAllButtons || options.includes("Bold") ? /* @__PURE__ */ jsx(
+      FormatButton,
+      {
+        format: IS_BOLD,
+        addTitle: t("toolbar.bold", "Bold"),
+        removeTitle: t("toolbar.removeBold", "Remove bold"),
+        icon: "format_bold",
+        formatName: "bold"
+      }
+    ) : null,
+    showAllButtons || options.includes("Italic") ? /* @__PURE__ */ jsx(
+      FormatButton,
+      {
+        format: IS_ITALIC,
+        addTitle: t("toolbar.italic", "Italic"),
+        removeTitle: t("toolbar.removeItalic", "Remove italic"),
+        icon: "format_italic",
+        formatName: "italic"
+      }
+    ) : null,
+    showAllButtons || options.includes("Underline") ? /* @__PURE__ */ jsx(
+      FormatButton,
+      {
+        format: IS_UNDERLINE,
+        addTitle: t("toolbar.underline", "Underline"),
+        removeTitle: t("toolbar.removeUnderline", "Remove underline"),
+        icon: "format_underlined",
+        formatName: "underline"
+      }
+    ) : null
+  ] });
+};
+const StrikeThroughSupSubToggles = ({ options }) => {
+  const t = useTranslation();
+  const showAllButtons = typeof options === "undefined";
+  return /* @__PURE__ */ jsxs("div", { className: styles.toolbarGroupOfGroups, children: [
+    showAllButtons || options.includes("Strikethrough") ? /* @__PURE__ */ jsx(
+      FormatButton,
+      {
+        format: IS_STRIKETHROUGH,
+        addTitle: t("toolbar.strikethrough", "Strikethrough"),
+        removeTitle: t("toolbar.removeStrikethrough", "Remove strikethrough"),
+        icon: "strikeThrough",
+        formatName: "strikethrough"
+      }
+    ) : null,
+    showAllButtons || options.includes("Sup") ? /* @__PURE__ */ jsx(
+      FormatButton,
+      {
+        format: IS_SUPERSCRIPT,
+        addTitle: t("toolbar.superscript", "Superscript"),
+        removeTitle: t("toolbar.removeSuperscript", "Remove superscript"),
+        icon: "superscript",
+        formatName: "superscript"
+      }
+    ) : null,
+    showAllButtons || options.includes("Sub") ? /* @__PURE__ */ jsx(
+      FormatButton,
+      {
+        format: IS_SUBSCRIPT,
+        addTitle: t("toolbar.subscript", "Subscript"),
+        removeTitle: t("toolbar.removeSubscript", "Remove subscript"),
+        icon: "subscript",
+        formatName: "subscript"
+      }
+    ) : null
+  ] });
+};
+export {
+  BoldItalicUnderlineToggles,
+  StrikeThroughSupSubToggles
+};

package/dist/plugins/toolbar/components/ChangeAdmonitionType.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { editorInFocus$, rootEditor$, useTranslation } from "../../core/index.js";
+import { Select } from "../primitives/select.js";
+import { ADMONITION_TYPES } from "../../../directive-editors/AdmonitionDirectiveDescriptor.js";
+import { useCellValues } from "@mdxeditor/gurx";
+function admonitionLabelsMap(t) {
+  return {
+    note: t("admonitions.note", "Note"),
+    tip: t("admonitions.tip", "Tip"),
+    danger: t("admonitions.danger", "Danger"),
+    info: t("admonitions.info", "Info"),
+    caution: t("admonitions.caution", "Caution")
+  };
+}
+const ChangeAdmonitionType = () => {
+  const [editorInFocus, rootEditor] = useCellValues(editorInFocus$, rootEditor$);
+  const admonitionNode = editorInFocus.rootNode;
+  const t = useTranslation();
+  const labels = admonitionLabelsMap(t);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      value: admonitionNode.getMdastNode().name,
+      onChange: (name) => {
+        rootEditor?.update(() => {
+          admonitionNode.setMdastNode({ ...admonitionNode.getMdastNode(), name });
+          setTimeout(() => {
+            rootEditor.update(() => {
+              admonitionNode.getLatest().select();
+            });
+          }, 80);
+        });
+      },
+      triggerTitle: t("admonitions.changeType", "Select admonition type"),
+      placeholder: t("admonitions.placeholder", "Admonition type"),
+      items: ADMONITION_TYPES.map((type) => ({ label: labels[type], value: type }))
+    }
+  );
+};
+export {
+  ChangeAdmonitionType,
+  admonitionLabelsMap
+};

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCellValues } from "@mdxeditor/gurx";
+import styles from "../../../styles/ui.module.css.js";
+import { $isCodeBlockNode } from "../../codeblock/CodeBlockNode.js";
+import { codeBlockLanguages$, getCodeBlockLanguageSelectData, EMPTY_VALUE } from "../../codemirror/index.js";
+import { editorInFocus$, activeEditor$, useTranslation } from "../../core/index.js";
+import { Select } from "../primitives/select.js";
+const ChangeCodeMirrorLanguage = () => {
+  const [editorInFocus, theEditor, codeBlockLanguages] = useCellValues(editorInFocus$, activeEditor$, codeBlockLanguages$);
+  const codeBlockNode = $isCodeBlockNode(editorInFocus.rootNode) ? editorInFocus.rootNode : null;
+  const t = useTranslation();
+  if (!codeBlockNode) {
+    return null;
+  }
+  const rawLanguage = codeBlockNode.getLanguage();
+  const { value: currentLanguage, items } = getCodeBlockLanguageSelectData(codeBlockLanguages, rawLanguage);
+  return /* @__PURE__ */ jsxs("div", { className: styles.selectWithLabel, children: [
+    /* @__PURE__ */ jsx("label", { children: t("codeBlock.language", "Code block language") }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: currentLanguage || EMPTY_VALUE,
+        onChange: (language) => {
+          theEditor?.update(() => {
+            codeBlockNode.setLanguage(language === EMPTY_VALUE ? "" : language);
+            setTimeout(() => {
+              theEditor.update(() => {
+                codeBlockNode.getLatest().select();
+              });
+            });
+          });
+        },
+        triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
+        placeholder: t("codeBlock.language", "Code block language"),
+        items
+      }
+    )
+  ] });
+};
+export {
+  ChangeCodeMirrorLanguage
+};

package/dist/plugins/toolbar/components/CodeToggle.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { IS_CODE } from "../../../FormatConstants.js";
+import { currentFormat$, iconComponentFor$, applyFormat$, useTranslation } from "../../core/index.js";
+import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+const CodeToggle = () => {
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
+  const applyFormat = usePublisher(applyFormat$);
+  const t = useTranslation();
+  const codeIsOn = (currentFormat & IS_CODE) !== 0;
+  const title = codeIsOn ? t("toolbar.removeInlineCode", "Remove code format") : t("toolbar.inlineCode", "Inline code format");
+  return /* @__PURE__ */ jsx(
+    MultipleChoiceToggleGroup,
+    {
+      items: [{ title, contents: iconComponentFor("code"), active: codeIsOn, onChange: applyFormat.bind(null, "code") }]
+    }
+  );
+};
+export {
+  CodeToggle
+};

package/dist/plugins/toolbar/components/CreateLink.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { ButtonWithTooltip } from "../primitives/toolbar.js";
+import { openLinkEditDialog$ } from "../../link-dialog/index.js";
+import { usePublisher, useCellValue } from "@mdxeditor/gurx";
+import { iconComponentFor$, useTranslation } from "../../core/index.js";
+const CreateLink = () => {
+  const openLinkDialog = usePublisher(openLinkEditDialog$);
+  const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      "aria-label": t("toolbar.link", "Create link"),
+      title: t("toolbar.link", "Create link"),
+      onClick: (_) => {
+        openLinkDialog();
+      },
+      children: iconComponentFor("link")
+    }
+  );
+};
+export {
+  CreateLink
+};

package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.js

@@ -0,0 +1,42 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { viewMode$, iconComponentFor$, useTranslation } from "../../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+import styles from "../../../styles/ui.module.css.js";
+import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
+const DiffSourceToggleWrapper = ({
+  children,
+  SourceToolbar,
+  options = ["rich-text", "diff", "source"]
+}) => {
+  const [viewMode, iconComponentFor] = useCellValues(viewMode$, iconComponentFor$);
+  const changeViewMode = usePublisher(viewMode$);
+  const t = useTranslation();
+  const toggleGroupItems = [];
+  if (options.includes("rich-text")) {
+    toggleGroupItems.push({ title: t("toolbar.richText", "Rich text"), contents: iconComponentFor("rich_text"), value: "rich-text" });
+  }
+  if (options.includes("diff")) {
+    toggleGroupItems.push({ title: t("toolbar.diffMode", "Diff mode"), contents: iconComponentFor("difference"), value: "diff" });
+  }
+  if (options.includes("source")) {
+    toggleGroupItems.push({ title: t("toolbar.source", "Source mode"), contents: iconComponentFor("markdown"), value: "source" });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    viewMode === "rich-text" ? children : viewMode === "diff" ? /* @__PURE__ */ jsx("span", { className: styles.toolbarTitleMode, children: t("toolbar.diffMode", "Diff mode") }) : SourceToolbar ?? /* @__PURE__ */ jsx("span", { className: styles.toolbarTitleMode, children: t("toolbar.source", "Source mode") }),
+    /* @__PURE__ */ jsx("div", { className: styles.diffSourceToggleWrapper, children: /* @__PURE__ */ jsx(
+      SingleChoiceToggleGroup,
+      {
+        className: styles.diffSourceToggle,
+        ggClassName: styles.ggDiffSourceToggle,
+        value: viewMode,
+        items: toggleGroupItems,
+        onChange: (value) => {
+          changeViewMode(value === "" ? "rich-text" : value);
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  DiffSourceToggleWrapper
+};