wysimark-lite 0.16.3 → 0.17.0

package/dist/index.mjs

@@ -1,17 +1,17 @@
 // src/index.tsx
 import {
   createRef,
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useImperativeHandle,
-  useRef as useRef13,
+  useRef as useRef14,
   useState as useState13
 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/entry/index.tsx
 import throttle3 from "lodash.throttle";
-import { useCallback as useCallback15, useRef as useRef12, useState as useState12 } from "react";
-import { Editor as Editor59, Transforms as Transforms41 } from "slate";
+import { useCallback as useCallback16, useRef as useRef13, useState as useState12 } from "react";
+import { Editor as Editor63, Transforms as Transforms45 } from "slate";
 import { ReactEditor as ReactEditor17, Slate as Slate2 } from "slate-react";
 
 // src/convert/parse/index.ts
@@ -183,6 +183,21 @@ function parseBlockquote(content) {
   return [{ type: "block-quote", children: parseContents(content.children) }];
 }
 
+// src/convert/parse/parse-code-block.ts
+function parseCodeBlock(content) {
+  const codeLines = content.value.split("\n");
+  return [
+    {
+      type: "code-block",
+      language: content.lang || "text",
+      children: codeLines.map((codeLine) => ({
+        type: "code-block-line",
+        children: [{ text: codeLine }]
+      }))
+    }
+  ];
+}
+
 // src/convert/parse/parse-footnote-definition.ts
 function parseFootnoteDefinition(footnote) {
   return [
@@ -618,8 +633,12 @@ function parseHeading(content) {
 function parseHTML(content) {
   return [
     {
-      type: "paragraph",
-      children: [{ text: content.value }]
+      type: "code-block",
+      language: "html",
+      children: content.value.split("\n").map((line) => ({
+        type: "code-block-line",
+        children: [{ text: line }]
+      }))
     }
   ];
 }
@@ -789,7 +808,7 @@ function parseContent(content) {
     case "blockquote":
       return parseBlockquote(content);
     case "code":
-      return [];
+      return parseCodeBlock(content);
     case "definition":
       throw new Error(`The type "definition" should not exist. See comments`);
     case "footnoteDefinition":
@@ -876,6 +895,37 @@ function normalizeElementListDepths(elements) {
   return normalizedElements;
 }
 
+// src/convert/serialize/serialize-code-block/serialize-code-line.ts
+function serializeCodeLine(codeLine) {
+  if (codeLine.type !== "code-block-line")
+    throw new Error(
+      `Expected all children of code-block to be a codeline but is ${JSON.stringify(
+        codeLine,
+        null,
+        2
+      )}`
+    );
+  return codeLine.children.map((segment) => segment.text).join("");
+}
+
+// src/convert/serialize/serialize-code-block/index.ts
+function serializeCodeBlock(codeBlock) {
+  const lines = [];
+  let backticks = 3;
+  for (const codeLine of codeBlock.children) {
+    const lineOfCode = serializeCodeLine(codeLine);
+    const match = lineOfCode.match(/^([`]+)/);
+    if (match)
+      backticks = Math.max(backticks, match[1].length + 1);
+    lines.push(lineOfCode);
+  }
+  lines.unshift(`${"`".repeat(backticks)}${codeBlock.language}`);
+  lines.push(`${"`".repeat(backticks)}`);
+  return `${lines.join("\n")}
+
+`;
+}
+
 // src/convert/serialize/serialize-image-shared/serialize-generic-image-url.ts
 function serializeGenericImageUrl(image) {
   return image.url;
@@ -1442,6 +1492,12 @@ function serializeElement(element, orders) {
     }
     case "image-block":
       return serializeImageBlock(element);
+    case "code-block":
+      return serializeCodeBlock(element);
+    case "code-block-line":
+      throw new Error(
+        `Code block line elements should only be present as children of code-block which should be handled by serializeCodeBlock. Got code-block-line may indicate an error in normalization.`
+      );
   }
   assertUnreachable(element);
 }
@@ -1514,19 +1570,22 @@ var translations = {
     tooltipHint: "\u30DE\u30A6\u30B9\u30DB\u30D0\u30FC\u6642\u306B\u8868\u793A\u3055\u308C\u308B\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7",
     apply: "\u9069\u7528",
     cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB",
-    insertLink: "\u30EA\u30F3\u30AF\u306E\u633F\u5165",
+    insertLink: "\u30EA\u30F3\u30AF",
     quote: "\u5F15\u7528",
-    insertTable: "\u8868\u306E\u633F\u5165",
-    insertImage: "\u753B\u50CF\u306E\u633F\u5165",
-    insertImageFromUrl: "URL\u304B\u3089\u753B\u50CF\u3092\u633F\u5165",
+    insertTable: "\u8868",
+    insertImage: "\u753B\u50CF",
+    insertImageFromUrl: "\u753B\u50CF",
     insert: "\u633F\u5165",
+    format: "\u66F8\u5F0F",
     imageUrlRequired: "\u753B\u50CFURL\uFF08\u5FC5\u9808\uFF09\uFF1A",
     altText: "\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8\uFF1A",
-    title: "\u30BF\u30A4\u30C8\u30EB\uFF1A",
+    title: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\uFF1A",
     imageDescription: "\u753B\u50CF\u306E\u8AAC\u660E",
-    imageTitle: "\u753B\u50CF\u306E\u30BF\u30A4\u30C8\u30EB",
+    imageTitle: "\u753B\u50CF\u306E\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7",
     switchToVisualEditor: "\u30D3\u30B8\u30E5\u30A2\u30EB\u30A8\u30C7\u30A3\u30BF\u306B\u5207\u308A\u66FF\u3048",
-    switchToRawMarkdown: "\u30DE\u30FC\u30AF\u30C0\u30A6\u30F3\u8868\u793A\u306B\u5207\u308A\u66FF\u3048"
+    switchToRawMarkdown: "\u30DE\u30FC\u30AF\u30C0\u30A6\u30F3\u8868\u793A\u306B\u5207\u308A\u66FF\u3048",
+    codeBlock: "\u30B3\u30FC\u30C9\u30D6\u30ED\u30C3\u30AF",
+    increaseQuoteDepth: "\u5F15\u7528\u3092\u91CD\u306D\u308B"
   },
   en: {
     bold: "Bold",
@@ -1551,19 +1610,22 @@ var translations = {
     tooltipHint: "Tooltip shown on mouse hover",
     apply: "Apply",
     cancel: "Cancel",
-    insertLink: "Insert Link",
+    insertLink: "Link",
     quote: "Quote",
-    insertTable: "Insert Table",
-    insertImage: "Insert Image",
-    insertImageFromUrl: "Insert Image from URL",
+    insertTable: "Table",
+    insertImage: "Image",
+    insertImageFromUrl: "Image",
     insert: "Insert",
+    format: "Format",
     imageUrlRequired: "Image URL (required):",
     altText: "Alt Text:",
-    title: "Title:",
+    title: "tooltip:",
     imageDescription: "Description of the image",
-    imageTitle: "Image title",
+    imageTitle: "tooltip",
     switchToVisualEditor: "Switch to visual editor",
-    switchToRawMarkdown: "Switch to raw markdown"
+    switchToRawMarkdown: "Switch to raw markdown",
+    codeBlock: "Code Block",
+    increaseQuoteDepth: "Increase Quote Depth"
   }
 };
 var getLanguage = () => {
@@ -1674,7 +1736,7 @@ var createOnDrop = (originalFn, plugins2) => {
 // src/sink/editable/create-render-element.ts
 function createRenderElement(originalFn, plugins2) {
   const fns = plugins2.map((plugin) => plugin.editableProps?.renderElement).filter(defined);
-  return function renderElement4(renderElementProps) {
+  return function renderElement5(renderElementProps) {
     for (const fn of fns) {
       const result = fn(renderElementProps);
       if (result)
@@ -4613,8 +4675,9 @@ function matchBlockQuoteSafe(node) {
    * Element.isElement(node) && !Element.isInline(node) &&
    * !Element.isDependant(node)
    */
-  (node.type === "paragraph" || node.type === "table" || node.type === "horizontal-rule" || node.type === "task-list-item" || node.type === "unordered-list-item" || node.type === "ordered-list-item" || node.type === "heading");
+  (node.type === "paragraph" || node.type === "code-block" || node.type === "table" || node.type === "horizontal-rule" || node.type === "task-list-item" || node.type === "unordered-list-item" || node.type === "ordered-list-item" || node.type === "heading");
 }
+var MAX_DEPTH = 2;
 var BlockQuotePlugin = createPlugin(
   (editor) => {
     editor.supportsBlockQuote = true;
@@ -4636,6 +4699,64 @@ var BlockQuotePlugin = createPlugin(
           match: (n) => Element11.isElement(n) && n.type === "block-quote"
         });
         return !!match;
+      },
+      increaseDepth: () => {
+        const [match] = Editor24.nodes(editor, {
+          match: (n) => Element11.isElement(n) && n.type === "block-quote"
+        });
+        if (!match)
+          return;
+        if (!editor.blockQuotePlugin.canIncreaseDepth())
+          return;
+        const [, path] = match;
+        Transforms17.select(editor, path);
+        Transforms17.wrapNodes(
+          editor,
+          { type: "block-quote", children: [] },
+          { at: path, split: false }
+        );
+      },
+      decreaseDepth: () => {
+        const [match] = Editor24.nodes(editor, {
+          match: (n) => Element11.isElement(n) && n.type === "block-quote"
+        });
+        if (!match)
+          return;
+        if (!editor.blockQuotePlugin.canDecreaseDepth())
+          return;
+        const [node, path] = match;
+        const children = node.children;
+        if (children.length === 1 && Element11.isElement(children[0]) && children[0].type === "block-quote") {
+          Transforms17.unwrapNodes(editor, {
+            at: [...path, 0],
+            // Path to the nested block-quote
+            match: (n) => Element11.isElement(n) && n.type === "block-quote"
+          });
+        }
+      },
+      canIncreaseDepth: () => {
+        const [match] = Editor24.nodes(editor, {
+          match: (n) => Element11.isElement(n) && n.type === "block-quote"
+        });
+        if (!match)
+          return false;
+        const [node] = match;
+        let depth = 0;
+        let current = node;
+        while (current.children.length === 1 && Element11.isElement(current.children[0]) && current.children[0] && current.children[0] && current.children[0].type === "block-quote") {
+          depth++;
+          current = current.children[0];
+        }
+        return depth < MAX_DEPTH;
+      },
+      canDecreaseDepth: () => {
+        const [match] = Editor24.nodes(editor, {
+          match: (n) => Element11.isElement(n) && n.type === "block-quote"
+        });
+        if (!match)
+          return false;
+        const [node] = match;
+        return node.children.length === 1 && Element11.isElement(node.children[0]) && node.children[0] && node.children[0].type === "block-quote";
       }
     };
     return {
@@ -4670,23 +4791,435 @@ var BlockQuotePlugin = createPlugin(
   }
 );
 
+// src/code-block-plugin/index.tsx
+import { Editor as Editor27, Element as Element15, Transforms as Transforms20 } from "slate";
+
+// src/code-block-plugin/decorate.tsx
+import { languages, tokenize } from "prismjs";
+import { Element as Element12, Node as Node6 } from "slate";
+function getLineOffsets(lines) {
+  let offset = 0;
+  const lineOffsets = [];
+  for (const line of lines) {
+    lineOffsets.push(offset);
+    offset = offset + line.length;
+  }
+  return lineOffsets;
+}
+function decorate(nodeEntry) {
+  const [node, path] = nodeEntry;
+  if (!Element12.isElement(node))
+    return [];
+  if (node.type !== "code-block")
+    return [];
+  const lang = languages[node.language];
+  if (lang === void 0)
+    return [];
+  const codeLineElements = node.children;
+  const textLines = codeLineElements.map((node2) => `${Node6.string(node2)}
+`);
+  const text = textLines.join("");
+  const lineOffsets = getLineOffsets(textLines);
+  function getPointFromOffset(offset2) {
+    for (let i = lineOffsets.length; i >= 0; i--) {
+      const lineOffset = lineOffsets[i];
+      if (lineOffset <= offset2) {
+        return {
+          path: [...path, i],
+          offset: offset2 - lineOffset
+        };
+      }
+    }
+    throw new Error("This shouldn't happen and indicates a bug in the logic");
+  }
+  const ranges = [];
+  const tokens = tokenize(text, lang);
+  let offset = 0;
+  for (const token of tokens) {
+    if (typeof token === "string") {
+      offset += token.length;
+    } else {
+      const anchor = getPointFromOffset(offset);
+      const focus = getPointFromOffset(offset + token.length);
+      ranges.push({
+        anchor,
+        focus,
+        prismToken: token.type
+      });
+      offset += token.length;
+    }
+  }
+  return ranges;
+}
+
+// src/code-block-plugin/methods/createCodeBlock.ts
+function createCodeBlock(editor, { language }) {
+  insertRootElement(editor, {
+    type: "code-block",
+    language,
+    children: [{ type: "code-block-line", children: [{ text: "" }] }]
+  });
+}
+
+// src/code-block-plugin/methods/setCodeBlockLanguage.ts
+import { Element as Element13, Transforms as Transforms18 } from "slate";
+function setCodeBlockLanguage(editor, language, options = {}) {
+  const entry = findElementUp(
+    editor,
+    (el) => Element13.isElement(el) && el.type === "code-block",
+    { at: options.at }
+  );
+  if (!entry)
+    return false;
+  Transforms18.setNodes(editor, { language }, { at: entry[1] });
+  return true;
+}
+
+// src/code-block-plugin/methods/index.ts
+function createCodeBlockMethods(editor) {
+  return {
+    createCodeBlock: curryOne(createCodeBlock, editor),
+    setCodeBlockLanguage: curryOne(setCodeBlockLanguage, editor)
+  };
+}
+
+// src/code-block-plugin/prism-theme.ts
+var commentStyle = { color: "#999988", fontStyle: "italic" };
+var dimStyle = { opacity: "0.7" };
+var stringStyle = { color: "#e3116c" };
+var operatorStyle = { color: "#393a34" };
+var valueStyle = { color: "#36acaa" };
+var keywordStyle = { color: "#00a4db" };
+var functionStyle = { color: "#9a050f" };
+var tagStyle = { color: "#00009f" };
+var boldStyle = { fontWeight: "bold" };
+var italicStyle = { fontStyle: "italic" };
+var tokenStyles = {
+  comment: commentStyle,
+  prolog: commentStyle,
+  doctype: commentStyle,
+  cdata: commentStyle,
+  namespace: dimStyle,
+  string: stringStyle,
+  "attr-value": stringStyle,
+  puncutation: operatorStyle,
+  operator: operatorStyle,
+  entity: valueStyle,
+  url: valueStyle,
+  symbol: valueStyle,
+  number: valueStyle,
+  boolean: valueStyle,
+  variable: valueStyle,
+  constant: valueStyle,
+  property: valueStyle,
+  regex: valueStyle,
+  insert: valueStyle,
+  atrule: keywordStyle,
+  keyword: keywordStyle,
+  "attr-name": keywordStyle,
+  function: { ...functionStyle, ...boldStyle },
+  delete: functionStyle,
+  tag: tagStyle,
+  selector: tagStyle,
+  important: boldStyle,
+  bold: boldStyle,
+  italic: italicStyle
+};
+
+// src/code-block-plugin/types.tsx
+var LanguageList = [
+  "text",
+  "html",
+  "css",
+  "svg",
+  "javascript",
+  "java",
+  "c"
+];
+
+// src/code-block-plugin/normalizeNode.tsx
+import { Element as Element14, Node as Node7, Transforms as Transforms19 } from "slate";
+function normalizeNode3(editor, entry) {
+  if (!Element14.isElement(entry[0]))
+    return false;
+  if (entry[0].type === "code-block-line") {
+    for (const [child, path] of Node7.children(editor, entry[1])) {
+      if (!Element14.isElement(child))
+        continue;
+      if (editor.isVoid(child)) {
+        Transforms19.removeNodes(editor, { at: path });
+        return true;
+      } else {
+        Transforms19.unwrapNodes(editor, { at: path });
+        return true;
+      }
+    }
+  }
+  if (entry[0].type === "code-block") {
+    for (const [child, path] of Node7.children(editor, entry[1])) {
+      if (!Element14.isElement(child))
+        continue;
+      if (child.type === "code-block-line")
+        continue;
+      if (child.type === "code-block") {
+        Transforms19.unwrapNodes(editor, { at: path });
+        return true;
+      } else if (editor.isVoid(child)) {
+        Transforms19.removeNodes(editor, { at: path });
+        return true;
+      } else {
+        Transforms19.removeNodes(editor, { at: path });
+        Transforms19.insertNodes(editor, {
+          type: "code-block-line",
+          children: [{ text: Node7.string(child) }]
+        });
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// src/code-block-plugin/render-element/CodeBlock.tsx
+import { useCallback as useCallback9, useRef as useRef5 } from "react";
+import { useSelected as useSelected3 } from "slate-react";
+
+// src/code-block-plugin/icons/ChevronDownIcon.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var ChevronDownIcon = (props) => /* @__PURE__ */ jsx29(TablerIcon, { ...props, children: /* @__PURE__ */ jsx29("path", { d: "m6 9 6 6 6-6" }) });
+
+// src/code-block-plugin/styles.ts
+import styled23 from "@emotion/styled";
+var $CodeBlock = styled23("div")`
+  position: relative;
+  background: var(--code-block-bgcolor);
+  margin: 1em 0;
+  border-radius: 0.5em;
+  border: 1px solid var(--code-block-border-color);
+  /**
+   * DO NOT REMOVE: Code for adding line numbering if enabled. See $CodeBlockLine
+  * for more details.
+   * counter-reset: line;
+   */
+  &.--selected {
+    outline: 2px solid var(--select-color);
+  }
+  /**
+   * NOTE: Required to make the border radius work on the first and last lines.
+   * Otherwise they will be square.
+   */
+  overflow-x: hidden;
+`;
+var $CodeBlockScroller = styled23("div")`
+  padding: 2.25em 1em 1.5em 1em;
+  border-radius: 0.5em;
+  overflow-x: auto;
+`;
+var $CodeBlockLanguage = styled23("span")`
+  cursor: pointer;
+  position: absolute;
+  top: 0.25em;
+  right: 0.25em;
+  width: 8em;
+  display: flex;
+  font-size: 0.75em;
+  color: var(--shade-700);
+  background: var(--shade-200);
+  padding: 0.25em 0.5em;
+  border-radius: 0.5em;
+  align-items: center;
+  gap: 0.25em;
+  span {
+    text-align: right;
+    flex: 1 1 auto;
+  }
+  svg {
+    flex: 0 0 auto;
+    position: relative;
+  }
+  &:hover {
+    color: var(--shade-800);
+    background: var(--shade-300);
+  }
+`;
+var $CodeBlockLine = styled23("div")`
+  white-space: pre;
+  line-height: 1.5em;
+  counter-increment: line;
+  font-family: "andale mono", AndaleMono, monospace;
+  font-size: 0.875em;
+  &.--selected {
+    background-color: var(--shade-100);
+  }
+  /*
+    DO NOT REMOVE: Code for adding line numbering.
+    TODO: Make optional in future.
+    */
+  /* &:before {
+    content: counter(line);
+    color: rgba(0, 0, 0, 0.25);
+    border-right: 1px solid rgba(0, 0, 0, 0.05);
+    margin-right: 1em;
+    padding: 0em 1em 0 0;
+    text-align: right;
+    display: inline-block;
+    width: 2em;
+  } */
+`;
+
+// src/code-block-plugin/render-element/CodeBlock.tsx
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+function CodeBlock({
+  element,
+  attributes,
+  children
+}) {
+  const ref = useRef5(null);
+  const selected = useSelected3();
+  const dropdown = useLayer("code-block-dropdown");
+  const onClick = useCallback9(() => {
+    if (dropdown.layer)
+      dropdown.close();
+    const dest = ref.current;
+    if (dest === null)
+      return;
+    const items = LanguageList.map((language) => {
+      return {
+        icon: () => /* @__PURE__ */ jsx30("span", {}),
+        title: language,
+        action: (editor) => {
+          editor.codeBlock.setCodeBlockLanguage(language, { at: element });
+        }
+      };
+    });
+    dropdown.open(() => /* @__PURE__ */ jsx30(Menu, { dest, items, close: dropdown.close }));
+  }, [element]);
+  return /* @__PURE__ */ jsxs16($CodeBlock, { className: selected ? "--selected" : "", ...attributes, children: [
+    /* @__PURE__ */ jsxs16($CodeBlockLanguage, { contentEditable: false, onClick, ref, children: [
+      /* @__PURE__ */ jsx30("span", { children: element.language }),
+      /* @__PURE__ */ jsx30(ChevronDownIcon, {})
+    ] }),
+    /* @__PURE__ */ jsx30($CodeBlockScroller, { children })
+  ] });
+}
+
+// src/code-block-plugin/render-element/CodeBlockLine.tsx
+import { useSelected as useSelected4 } from "slate-react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function CodeBlockLine({
+  attributes,
+  children
+}) {
+  const selected = useSelected4();
+  return /* @__PURE__ */ jsx31(
+    $CodeBlockLine,
+    {
+      className: selected ? "--selected" : "",
+      ...attributes,
+      spellCheck: "false",
+      children
+    }
+  );
+}
+
+// src/code-block-plugin/render-element/index.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+function renderElement2({
+  element,
+  attributes,
+  children
+}) {
+  if (element.type === "code-block") {
+    return /* @__PURE__ */ jsx32(CodeBlock, { element, attributes, children });
+  } else if (element.type === "code-block-line") {
+    return /* @__PURE__ */ jsx32(CodeBlockLine, { element, attributes, children });
+  }
+}
+
+// src/code-block-plugin/index.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+var CodeBlockPlugin = createPlugin(
+  (editor, _options, { createPolicy }) => {
+    editor.codeBlock = createCodeBlockMethods(editor);
+    function onDelete() {
+      const { selection } = editor;
+      if (!isCollapsed(selection))
+        return false;
+      const codeBlockEntry = findElementUp(editor, "code-block");
+      if (codeBlockEntry == null)
+        return false;
+      const codeBlockText = Editor27.string(editor, codeBlockEntry[1]);
+      if (codeBlockText === "") {
+        Transforms20.removeNodes(editor, { at: codeBlockEntry[1] });
+        return true;
+      }
+      return false;
+    }
+    return createPolicy({
+      name: "code-block",
+      editor: {
+        deleteBackward: onDelete,
+        deleteForward: onDelete,
+        isInline(element) {
+          if (element.type === "code-block" || element.type === "code-block-line")
+            return false;
+        },
+        isVoid(element) {
+          if (element.type === "code-block" || element.type == "code-block-line")
+            return false;
+        },
+        isMaster(element) {
+          if (element.type === "code-block")
+            return true;
+        },
+        normalizeNode: curryOne(normalizeNode3, editor)
+      },
+      editableProps: {
+        decorate,
+        onKeyDown: createHotkeyHandler({
+          "super+`": () => editor.codeBlock.createCodeBlock({ language: "text" }),
+          "mod+a": () => {
+            const entry = findElementUp(
+              editor,
+              (el) => Element15.isElement(el) && el.type === "code-block"
+            );
+            if (!entry)
+              return false;
+            Transforms20.select(editor, entry[1]);
+            return true;
+          }
+        }),
+        renderElement: renderElement2,
+        renderLeaf: ({ leaf, children }) => {
+          const style = leaf.prismToken ? tokenStyles[leaf.prismToken] || null : null;
+          if (style === null) {
+            return children;
+          } else {
+            return /* @__PURE__ */ jsx33("span", { style, children });
+          }
+        }
+      }
+    });
+  }
+);
+
 // src/collapsible-paragraph-plugin/index.tsx
-import { Editor as Editor28 } from "slate";
+import { Editor as Editor31 } from "slate";
 
 // src/collapsible-paragraph-plugin/normalize-node/index.ts
-import { Element as Element14 } from "slate";
+import { Element as Element18 } from "slate";
 
 // src/collapsible-paragraph-plugin/normalize-node/normalize-sibling-paragraphs.ts
-import { Element as Element12, Transforms as Transforms18 } from "slate";
+import { Element as Element16, Transforms as Transforms21 } from "slate";
 function isParagraph(node) {
-  return Element12.isElement(node) && node.type === "paragraph";
+  return Element16.isElement(node) && node.type === "paragraph";
 }
 function normalizeSiblingParagraphs(editor, entry) {
   return normalizeSiblings(editor, entry, (a, b) => {
     if (!isParagraph(a[0]) || !isParagraph(b[0]))
       return false;
     if (a[0].__collapsible && b[0].__collapsible) {
-      Transforms18.removeNodes(editor, { at: a[1] });
+      Transforms21.removeNodes(editor, { at: a[1] });
       return true;
     }
     return false;
@@ -4694,9 +5227,9 @@ function normalizeSiblingParagraphs(editor, entry) {
 }
 
 // src/collapsible-paragraph-plugin/normalize-node/normalize-sibling-walls.ts
-import { Element as Element13, Transforms as Transforms19 } from "slate";
+import { Element as Element17, Transforms as Transforms22 } from "slate";
 function isWall(editor, node) {
-  if (!Element13.isElement(node))
+  if (!Element17.isElement(node))
     return false;
   return editor.isVoid(node) || editor.isMaster(node);
 }
@@ -4706,7 +5239,7 @@ function normalizeSiblingWalls(editor, entry) {
   return normalizeSiblings(editor, entry, (a, b) => {
     if (!isWall(editor, a[0]) || !isWall(editor, b[0]))
       return false;
-    Transforms19.insertNodes(
+    Transforms22.insertNodes(
       editor,
       {
         type: "paragraph",
@@ -4720,9 +5253,9 @@ function normalizeSiblingWalls(editor, entry) {
 }
 
 // src/collapsible-paragraph-plugin/normalize-node/index.ts
-function normalizeNode3(editor, entry) {
+function normalizeNode4(editor, entry) {
   const [node, path] = entry;
-  if (!Element14.isElement(node))
+  if (!Element18.isElement(node))
     return false;
   if (normalizeSiblingWalls(editor, [node, path]))
     return true;
@@ -4733,11 +5266,11 @@ function normalizeNode3(editor, entry) {
 
 // src/collapsible-paragraph-plugin/render-element/paragraph.tsx
 import { clsx as clsx5 } from "clsx";
-import { useSelected as useSelected3 } from "slate-react";
+import { useSelected as useSelected5 } from "slate-react";
 
 // src/collapsible-paragraph-plugin/render-element/styles.ts
-import styled23 from "@emotion/styled";
-var $Paragraph = styled23("p")`
+import styled24 from "@emotion/styled";
+var $Paragraph = styled24("p")`
   padding: 0;
   margin: 1em 0;
   &:first-child {
@@ -4770,21 +5303,21 @@ var $Paragraph = styled23("p")`
 `;
 
 // src/collapsible-paragraph-plugin/render-element/utils.ts
-import { Node as Node8 } from "slate";
+import { Node as Node10 } from "slate";
 function getIsEmpty(element) {
-  return element.children.length === 1 && Node8.string(element.children[0]).length === 0;
+  return element.children.length === 1 && Node10.string(element.children[0]).length === 0;
 }
 
 // src/collapsible-paragraph-plugin/render-element/paragraph.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Paragraph({
   element,
   attributes,
   children
 }) {
-  const selected = useSelected3();
+  const selected = useSelected5();
   const isEmpty = getIsEmpty(element);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx34(
     $Paragraph,
     {
       ...attributes,
@@ -4799,13 +5332,13 @@ function Paragraph({
 }
 
 // src/collapsible-paragraph-plugin/index.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var CollapsibleParagraphPlugin = createPlugin((editor) => {
   const { insertBreak: insertBreak3 } = editor;
   editor.insertBreak = () => {
     const { selection } = editor;
     if (selection && selection.anchor.path[0] === selection.focus.path[0]) {
-      const text = Editor28.string(editor, [selection.anchor.path[0]]);
+      const text = Editor31.string(editor, [selection.anchor.path[0]]);
       if (text.match(/\n$/) || text.match(/\n\n/)) {
         insertBreak3();
       } else {
@@ -4835,13 +5368,13 @@ var CollapsibleParagraphPlugin = createPlugin((editor) => {
   return {
     name: "collapsible-paragraph",
     editor: {
-      normalizeNode: curryOne(normalizeNode3, editor)
+      normalizeNode: curryOne(normalizeNode4, editor)
     },
     editableProps: {
       renderElement: ({ element, attributes, children }) => {
         switch (element.type) {
           case "paragraph": {
-            return /* @__PURE__ */ jsx30(Paragraph, { element, attributes, children });
+            return /* @__PURE__ */ jsx35(Paragraph, { element, attributes, children });
           }
         }
       },
@@ -4862,24 +5395,24 @@ function addConvertElementType(editor, type) {
 }
 
 // src/convert-element-plugin/methods/convert-elements.ts
-import { Editor as Editor29, Element as Element16 } from "slate";
+import { Editor as Editor32, Element as Element20 } from "slate";
 function convertElements(editor, matchForToggle, targetElement, allowToggle) {
   const entries = Array.from(
-    Editor29.nodes(editor, {
-      match: (node) => Element16.isElement(node) && editor.convertElement.isConvertibleElement(node)
+    Editor32.nodes(editor, {
+      match: (node) => Element20.isElement(node) && editor.convertElement.isConvertibleElement(node)
     })
   );
   if (entries.length === 0)
     return false;
   const shouldToggle = allowToggle && entries.every((entry) => matchForToggle(entry[0]));
   if (shouldToggle) {
-    Editor29.withoutNormalizing(editor, () => {
+    Editor32.withoutNormalizing(editor, () => {
       for (const entry of entries) {
         rewrapElement(editor, { type: "paragraph" }, entry[1]);
       }
     });
   } else {
-    Editor29.withoutNormalizing(editor, () => {
+    Editor32.withoutNormalizing(editor, () => {
       for (const entry of entries) {
         rewrapElement(editor, targetElement, entry[1]);
       }
@@ -4915,32 +5448,32 @@ var ConvertElementPlugin = createPlugin((editor) => {
 });
 
 // src/heading-plugin/insert-break.ts
-import { Editor as Editor30, Path as Path7, Range as Range4, Transforms as Transforms20 } from "slate";
+import { Editor as Editor33, Path as Path8, Range as Range5, Transforms as Transforms23 } from "slate";
 function insertBreak(editor) {
   const entry = findElementUp(editor, "heading");
   if (!entry)
     return false;
   if (!editor.selection)
     return false;
-  if (Range4.isExpanded(editor.selection))
+  if (Range5.isExpanded(editor.selection))
     return false;
-  if (!Editor30.isEnd(editor, editor.selection.anchor, entry[1]))
+  if (!Editor33.isEnd(editor, editor.selection.anchor, entry[1]))
     return false;
-  const nextPath = Path7.next(entry[1]);
-  Transforms20.insertNodes(
+  const nextPath = Path8.next(entry[1]);
+  Transforms23.insertNodes(
     editor,
     { type: "paragraph", children: [{ text: "" }] },
     { at: nextPath }
   );
-  Transforms20.select(editor, {
-    anchor: Editor30.start(editor, nextPath),
-    focus: Editor30.start(editor, nextPath)
+  Transforms23.select(editor, {
+    anchor: Editor33.start(editor, nextPath),
+    focus: Editor33.start(editor, nextPath)
   });
   return true;
 }
 
 // src/heading-plugin/methods/index.ts
-import { Editor as Editor31 } from "slate";
+import { Editor as Editor34 } from "slate";
 function convertHeading(editor, level, allowToggle) {
   editor.convertElement.convertElements(
     (element) => element.type === "heading" && element.level == level,
@@ -4949,7 +5482,7 @@ function convertHeading(editor, level, allowToggle) {
   );
 }
 function isHeadingActive(editor, level) {
-  const [match] = Editor31.nodes(editor, {
+  const [match] = Editor34.nodes(editor, {
     match: (n) => {
       return "type" in n && "level" in n && n.type === "heading" && n.level === level;
     }
@@ -4965,7 +5498,7 @@ function createHeadingMethods(editor) {
 
 // src/heading-plugin/styles.ts
 import { css } from "@emotion/react";
-import styled24 from "@emotion/styled";
+import styled25 from "@emotion/styled";
 var headingStyles = css`
   margin-top: 1em;
   &:first-child {
@@ -4973,34 +5506,34 @@ var headingStyles = css`
   }
   font-weight: bold;
 `;
-var $H1 = styled24("h1")`
+var $H1 = styled25("h1")`
   ${headingStyles}
   font-size: 2.25em;
   letter-spacing: -0.01em;
 `;
-var $H2 = styled24("h2")`
+var $H2 = styled25("h2")`
   ${headingStyles}
   font-size: 1.5em;
 `;
-var $H3 = styled24("h3")`
+var $H3 = styled25("h3")`
   ${headingStyles}
   font-size: 1.25em;
 `;
-var $H4 = styled24("h4")`
+var $H4 = styled25("h4")`
   ${headingStyles}
   font-size: 1em;
 `;
-var $H5 = styled24("h5")`
+var $H5 = styled25("h5")`
   ${headingStyles}
   font-size: 1em;
 `;
-var $H6 = styled24("h6")`
+var $H6 = styled25("h6")`
   ${headingStyles}
   font-size: 1em;
 `;
 
 // src/heading-plugin/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var HeadingPlugin = createPlugin(
   (editor) => {
     editor.convertElement.addConvertElementType("heading");
@@ -5031,17 +5564,17 @@ var HeadingPlugin = createPlugin(
           if (element.type === "heading") {
             switch (element.level) {
               case 1:
-                return /* @__PURE__ */ jsx31($H1, { ...attributes, children });
+                return /* @__PURE__ */ jsx36($H1, { ...attributes, children });
               case 2:
-                return /* @__PURE__ */ jsx31($H2, { ...attributes, children });
+                return /* @__PURE__ */ jsx36($H2, { ...attributes, children });
               case 3:
-                return /* @__PURE__ */ jsx31($H3, { ...attributes, children });
+                return /* @__PURE__ */ jsx36($H3, { ...attributes, children });
               case 4:
-                return /* @__PURE__ */ jsx31($H4, { ...attributes, children });
+                return /* @__PURE__ */ jsx36($H4, { ...attributes, children });
               case 5:
-                return /* @__PURE__ */ jsx31($H5, { ...attributes, children });
+                return /* @__PURE__ */ jsx36($H5, { ...attributes, children });
               case 6:
-                return /* @__PURE__ */ jsx31($H6, { ...attributes, children });
+                return /* @__PURE__ */ jsx36($H6, { ...attributes, children });
               default:
                 throw new Error(
                   `Expected element.level to be 1-6 but got ${element.level}`
@@ -5062,11 +5595,11 @@ var HeadingPlugin = createPlugin(
 );
 
 // src/horizontal-rule-plugin/horizontal-rule.tsx
-import { useSelected as useSelected4 } from "slate-react";
+import { useSelected as useSelected6 } from "slate-react";
 
 // src/horizontal-rule-plugin/styles.tsx
-import styled25 from "@emotion/styled";
-var $HorizontalRule = styled25("hr")`
+import styled26 from "@emotion/styled";
+var $HorizontalRule = styled26("hr")`
   position: relative;
   height: 1em;
   /* background-color: var(--hr-color); */
@@ -5099,15 +5632,15 @@ var $HorizontalRule = styled25("hr")`
 `;
 
 // src/horizontal-rule-plugin/horizontal-rule.tsx
-import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
 function HorizontalRule({
   attributes,
   children
 }) {
-  const selected = useSelected4();
-  return /* @__PURE__ */ jsxs16("div", { ...attributes, draggable: true, children: [
+  const selected = useSelected6();
+  return /* @__PURE__ */ jsxs17("div", { ...attributes, draggable: true, children: [
     children,
-    /* @__PURE__ */ jsx32("div", { contentEditable: false, children: /* @__PURE__ */ jsx32($HorizontalRule, { className: selected ? "--selected" : "" }) })
+    /* @__PURE__ */ jsx37("div", { contentEditable: false, children: /* @__PURE__ */ jsx37($HorizontalRule, { className: selected ? "--selected" : "" }) })
   ] });
 }
 
@@ -5125,7 +5658,7 @@ function createHorizontalRuleMethods(editor) {
 }
 
 // src/horizontal-rule-plugin/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var HorizontalRulePlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
     editor.horizontalRule = createHorizontalRuleMethods(editor);
@@ -5140,7 +5673,7 @@ var HorizontalRulePlugin = createPlugin(
       editableProps: {
         renderElement: (props) => {
           if (props.element.type === "horizontal-rule") {
-            return /* @__PURE__ */ jsx33(HorizontalRule, { ...props });
+            return /* @__PURE__ */ jsx38(HorizontalRule, { ...props });
           }
         },
         onKeyDown: createHotkeyHandler({
@@ -5152,8 +5685,8 @@ var HorizontalRulePlugin = createPlugin(
 );
 
 // src/inline-code-plugin/styles.ts
-import styled26 from "@emotion/styled";
-var $InlineCode = styled26("code")`
+import styled27 from "@emotion/styled";
+var $InlineCode = styled27("code")`
   color: var(--shade-600);
   background-color: var(--inline-code-bgcolor);
   border: 1px solid var(--inline-code-border-color);
@@ -5175,7 +5708,7 @@ var $InlineCode = styled26("code")`
   font-size: 0.75em;
   vertical-align: baseline;
 `;
-var $InvisibleSpan = styled26("span")`
+var $InvisibleSpan = styled27("span")`
   display: inline-block;
   opacity: 0;
   width: 1px;
@@ -5183,7 +5716,7 @@ var $InvisibleSpan = styled26("span")`
 `;
 
 // src/inline-code-plugin/index.tsx
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
 var InlineCodePlugin = createPlugin(
   (editor) => {
     if (!editor.marksPlugin)
@@ -5202,10 +5735,10 @@ var InlineCodePlugin = createPlugin(
               /**
                * Disable spellCheck because it's computer code usually.
                */
-              /* @__PURE__ */ jsxs17($InlineCode, { spellCheck: false, children: [
-                /* @__PURE__ */ jsx34($InvisibleSpan, { contentEditable: false, children: "|" }),
+              /* @__PURE__ */ jsxs18($InlineCode, { spellCheck: false, children: [
+                /* @__PURE__ */ jsx39($InvisibleSpan, { contentEditable: false, children: "|" }),
                 children,
-                /* @__PURE__ */ jsx34($InvisibleSpan, { contentEditable: false, children: "|" })
+                /* @__PURE__ */ jsx39($InvisibleSpan, { contentEditable: false, children: "|" })
               ] })
             );
           } else {
@@ -5221,7 +5754,7 @@ var InlineCodePlugin = createPlugin(
 );
 
 // src/list-plugin/index.tsx
-import { Editor as Editor36, Path as Path8 } from "slate";
+import { Editor as Editor39, Path as Path9 } from "slate";
 
 // src/list-plugin/methods/convert-list-item.ts
 function convertOrderedList(editor, allowToggle) {
@@ -5263,7 +5796,7 @@ function convertUnorderedList(editor, allowToggle) {
 }
 
 // src/list-plugin/methods/depth.ts
-var MAX_DEPTH = 2;
+var MAX_DEPTH2 = 2;
 function getListDepth(editor) {
   const listItem = findElementUp(editor, isListItem);
   if (!listItem)
@@ -5274,7 +5807,7 @@ function canIncreaseDepth(editor) {
   if (!isStartOfElement(editor, isListItem))
     return false;
   const depth = getListDepth(editor);
-  return depth < MAX_DEPTH;
+  return depth < MAX_DEPTH2;
 }
 function canDecreaseDepth(editor) {
   if (!isStartOfElement(editor, isListItem))
@@ -5305,36 +5838,36 @@ function indent(editor) {
 }
 
 // src/list-plugin/methods/insert-break.ts
-import { Editor as Editor32, Transforms as Transforms21 } from "slate";
+import { Editor as Editor35, Transforms as Transforms24 } from "slate";
 function insertBreak2(editor) {
   const entry = findElementUp(editor, isListItem);
   if (!entry)
     return false;
   const [element, path] = entry;
-  if (Editor32.isEmpty(editor, element)) {
+  if (Editor35.isEmpty(editor, element)) {
     if (element.depth > 0) {
-      Transforms21.setNodes(editor, { depth: element.depth - 1 }, { at: path });
+      Transforms24.setNodes(editor, { depth: element.depth - 1 }, { at: path });
       return true;
     } else {
       rewrapElement(editor, { type: "paragraph" }, path);
       return true;
     }
   }
-  Transforms21.splitNodes(editor, { always: true });
+  Transforms24.splitNodes(editor, { always: true });
   const nextEntry = findElementUp(editor, isListItem);
   if (!nextEntry)
     return true;
   if (nextEntry[0].type === "task-list-item" && nextEntry[0].checked === true) {
-    Transforms21.setNodes(editor, { checked: false }, { at: nextEntry[1] });
+    Transforms24.setNodes(editor, { checked: false }, { at: nextEntry[1] });
   }
   return true;
 }
 
 // src/list-plugin/methods/outdent.ts
-import { Editor as Editor33 } from "slate";
+import { Editor as Editor36 } from "slate";
 function outdent(editor) {
   const entries = Array.from(
-    Editor33.nodes(editor, {
+    Editor36.nodes(editor, {
       match: isListItem
     })
   );
@@ -5352,7 +5885,7 @@ function outdent(editor) {
 }
 
 // src/list-plugin/methods/toggleTaskListItem.ts
-import { Transforms as Transforms22 } from "slate";
+import { Transforms as Transforms25 } from "slate";
 function toggleTaskListItem(editor, { at = editor.selection } = {}) {
   const taskListItem = findElementUp(
     editor,
@@ -5362,7 +5895,7 @@ function toggleTaskListItem(editor, { at = editor.selection } = {}) {
   if (!taskListItem)
     return false;
   const nextChecked = !taskListItem[0].checked;
-  Transforms22.setNodes(
+  Transforms25.setNodes(
     editor,
     { checked: nextChecked },
     { at: taskListItem[1] }
@@ -5388,20 +5921,20 @@ function createListMethods(editor) {
 }
 
 // src/list-plugin/normalize-node/normalize-ordered-first-at-depth.ts
-import { Element as Element17, Transforms as Transforms23 } from "slate";
+import { Element as Element21, Transforms as Transforms26 } from "slate";
 var isOrderedListItem = createIsElementType([
   "ordered-list-item"
 ]);
 function normalizeOrderedFirstAtDepth(editor, entry) {
   const [node, path] = entry;
-  if (!Element17.isElement(node))
+  if (!Element21.isElement(node))
     return false;
   return normalizeSiblings(editor, [node, path], (a, b) => {
     if (!isOrderedListItem(b[0]))
       return false;
     const __firstAtDepth = isOrderedListItem(a[0]) ? b[0].depth > a[0].depth : isListItem(a[0]) ? b[0].depth > a[0].depth : true;
     if (b[0].__firstAtDepth !== __firstAtDepth) {
-      Transforms23.setNodes(editor, { __firstAtDepth }, { at: b[1] });
+      Transforms26.setNodes(editor, { __firstAtDepth }, { at: b[1] });
       return true;
     }
     return false;
@@ -5409,7 +5942,7 @@ function normalizeOrderedFirstAtDepth(editor, entry) {
 }
 
 // src/list-plugin/normalize-node/index.ts
-function normalizeNode4(editor, entry) {
+function normalizeNode5(editor, entry) {
   const [node] = entry;
   if (!isListItem(node))
     return false;
@@ -5422,14 +5955,14 @@ import { useEffect as useEffect5 } from "react";
 import { ReactEditor as ReactEditor9, useSlateStatic as useSlateStatic11 } from "slate-react";
 
 // src/list-plugin/render-element/styles.ts
-import styled27 from "@emotion/styled";
-var $ListItem = styled27("li")`
+import styled28 from "@emotion/styled";
+var $ListItem = styled28("li")`
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   list-style-position: outside;
   margin-left: calc(2em + var(--list-item-depth) * 2em);
 `;
-var $UnorderedListItem = styled27($ListItem)`
+var $UnorderedListItem = styled28($ListItem)`
   position: relative;
   list-style-type: none;
   .--list-item-icon {
@@ -5440,7 +5973,7 @@ var $UnorderedListItem = styled27($ListItem)`
     color: var(--shade-600);
   }
 `;
-var $OrderedListItem = styled27($ListItem)`
+var $OrderedListItem = styled28($ListItem)`
   position: relative;
   list-style-type: none;
   counter-increment: var(--list-item-var);
@@ -5466,7 +5999,7 @@ var $OrderedListItem = styled27($ListItem)`
     font-variant-numeric: tabular-nums;
   }
 `;
-var $TaskListItem = styled27($ListItem)`
+var $TaskListItem = styled28($ListItem)`
   position: relative;
   list-style-type: none;
   .--list-item-icon {
@@ -5483,7 +6016,7 @@ var $TaskListItem = styled27($ListItem)`
 `;
 
 // src/list-plugin/render-element/ordered-list-item.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function OrderedListItem({
   element,
   attributes,
@@ -5499,16 +6032,16 @@ function OrderedListItem({
     "--list-item-var": `list-item-depth-${element.depth}`
   };
   const className = clsx6({ "--first-at-depth": element.__firstAtDepth });
-  return /* @__PURE__ */ jsx35($OrderedListItem, { ...attributes, className, style, children });
+  return /* @__PURE__ */ jsx40($OrderedListItem, { ...attributes, className, style, children });
 }
 
 // src/list-plugin/render-element/task-list-item.tsx
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback10 } from "react";
 import { useSlateStatic as useSlateStatic12 } from "slate-react";
 
 // src/list-plugin/render-element/list-icons.tsx
-import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
-var UncheckedIcon = (props) => /* @__PURE__ */ jsxs18(
+import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
+var UncheckedIcon = (props) => /* @__PURE__ */ jsxs19(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5522,12 +6055,12 @@ var UncheckedIcon = (props) => /* @__PURE__ */ jsxs18(
     viewBox: "0 0 24 24",
     ...props,
     children: [
-      /* @__PURE__ */ jsx36("path", { d: "M0 0h24v24H0z", stroke: "none" }),
-      /* @__PURE__ */ jsx36("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 })
+      /* @__PURE__ */ jsx41("path", { d: "M0 0h24v24H0z", stroke: "none" }),
+      /* @__PURE__ */ jsx41("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 })
     ]
   }
 );
-var CheckedIcon = (props) => /* @__PURE__ */ jsxs18(
+var CheckedIcon = (props) => /* @__PURE__ */ jsxs19(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5542,13 +6075,13 @@ var CheckedIcon = (props) => /* @__PURE__ */ jsxs18(
     viewBox: "0 0 24 24",
     ...props,
     children: [
-      /* @__PURE__ */ jsx36("path", { d: "M0 0h24v24H0z", stroke: "none" }),
-      /* @__PURE__ */ jsx36("path", { d: "m9 11 3 3 8-8", className: "--checkmark" }),
-      /* @__PURE__ */ jsx36("path", { d: "M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9" })
+      /* @__PURE__ */ jsx41("path", { d: "M0 0h24v24H0z", stroke: "none" }),
+      /* @__PURE__ */ jsx41("path", { d: "m9 11 3 3 8-8", className: "--checkmark" }),
+      /* @__PURE__ */ jsx41("path", { d: "M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9" })
     ]
   }
 );
-var BulletIcon = (props) => /* @__PURE__ */ jsx36(
+var BulletIcon = (props) => /* @__PURE__ */ jsx41(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5557,56 +6090,56 @@ var BulletIcon = (props) => /* @__PURE__ */ jsx36(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx36("path", { d: "M12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5z" })
+    children: /* @__PURE__ */ jsx41("path", { d: "M12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5z" })
   }
 );
 
 // src/list-plugin/render-element/task-list-item.tsx
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
 function TaskListItem({
   element,
   attributes,
   children
 }) {
   const editor = useSlateStatic12();
-  const toggle = useCallback9(() => {
+  const toggle = useCallback10(() => {
     editor.list.toggleTaskListItem({ at: element });
   }, [editor, element]);
   const style = { "--list-item-depth": element.depth };
-  return /* @__PURE__ */ jsxs19($TaskListItem, { ...attributes, style, children: [
-    /* @__PURE__ */ jsx37("div", { className: "--list-item-icon", contentEditable: false, children: element.checked ? /* @__PURE__ */ jsx37(CheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) : /* @__PURE__ */ jsx37(UncheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) }),
+  return /* @__PURE__ */ jsxs20($TaskListItem, { ...attributes, style, children: [
+    /* @__PURE__ */ jsx42("div", { className: "--list-item-icon", contentEditable: false, children: element.checked ? /* @__PURE__ */ jsx42(CheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) : /* @__PURE__ */ jsx42(UncheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) }),
     children
   ] });
 }
 
 // src/list-plugin/render-element/unordered-list-item.tsx
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
 function UnorderedListItem({
   element,
   attributes,
   children
 }) {
   const style = { "--list-item-depth": element.depth };
-  return /* @__PURE__ */ jsxs20($UnorderedListItem, { ...attributes, style, children: [
-    /* @__PURE__ */ jsx38("div", { className: "--list-item-icon", contentEditable: false, children: /* @__PURE__ */ jsx38(BulletIcon, {}) }),
+  return /* @__PURE__ */ jsxs21($UnorderedListItem, { ...attributes, style, children: [
+    /* @__PURE__ */ jsx43("div", { className: "--list-item-icon", contentEditable: false, children: /* @__PURE__ */ jsx43(BulletIcon, {}) }),
     children
   ] });
 }
 
 // src/list-plugin/render-element/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-function renderElement2({
+import { jsx as jsx44 } from "react/jsx-runtime";
+function renderElement3({
   element,
   attributes,
   children
 }) {
   switch (element.type) {
     case "ordered-list-item":
-      return /* @__PURE__ */ jsx39(OrderedListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx44(OrderedListItem, { element, attributes, children });
     case "unordered-list-item":
-      return /* @__PURE__ */ jsx39(UnorderedListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx44(UnorderedListItem, { element, attributes, children });
     case "task-list-item":
-      return /* @__PURE__ */ jsx39(TaskListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx44(TaskListItem, { element, attributes, children });
   }
 }
 
@@ -5631,7 +6164,7 @@ var ListPlugin = createPlugin(
     return createPolicy({
       name: "list",
       editor: {
-        normalizeNode: (entry) => normalizeNode4(editor, entry),
+        normalizeNode: (entry) => normalizeNode5(editor, entry),
         insertBreak: list.insertBreak,
         deleteBackward: (unit) => {
           if (unit !== "character")
@@ -5642,12 +6175,12 @@ var ListPlugin = createPlugin(
           if (!listItem)
             return false;
           const listItemPath = listItem[1];
-          if (!Path8.hasPrevious(listItemPath)) {
+          if (!Path9.hasPrevious(listItemPath)) {
             editor.collapsibleParagraph.convertParagraph();
             return true;
           }
-          const prevElementPath = Path8.previous(listItemPath);
-          const prevElementEntry = Editor36.node(editor, prevElementPath);
+          const prevElementPath = Path9.previous(listItemPath);
+          const prevElementEntry = Editor39.node(editor, prevElementPath);
           if (isListItem(prevElementEntry[0]))
             return false;
           editor.collapsibleParagraph.convertParagraph();
@@ -5655,9 +6188,9 @@ var ListPlugin = createPlugin(
         }
       },
       editableProps: {
-        renderElement: renderElement2,
+        renderElement: renderElement3,
         onKeyDown(e) {
-          if (!Editor36.nodes(editor, { match: isListItem }))
+          if (!Editor39.nodes(editor, { match: isListItem }))
             return false;
           return hotkeyHandler(e);
         }
@@ -5668,15 +6201,15 @@ var ListPlugin = createPlugin(
 
 // src/marks-plugin/index.tsx
 import { clsx as clsx7 } from "clsx";
-import { Editor as Editor39, Point as Point2, Range as Range6 } from "slate";
+import { Editor as Editor42, Point as Point2, Range as Range7 } from "slate";
 
 // src/marks-plugin/methods/removeMarks.ts
-import { Editor as Editor37, Text as Text4, Transforms as Transforms24 } from "slate";
+import { Editor as Editor40, Text as Text4, Transforms as Transforms27 } from "slate";
 function removeMarks(editor, { at = editor.selection } = {}) {
   if (at == null)
     return;
   const nodeEntries = [
-    ...Editor37.nodes(editor, {
+    ...Editor40.nodes(editor, {
       match: (n) => Text4.isText(n),
       at
     })
@@ -5689,7 +6222,7 @@ function removeMarks(editor, { at = editor.selection } = {}) {
       setter[key2] = null;
     }
   }
-  Transforms24.setNodes(editor, setter, {
+  Transforms27.setNodes(editor, setter, {
     match: (n) => Text4.isText(n),
     split: true,
     at
@@ -5697,14 +6230,14 @@ function removeMarks(editor, { at = editor.selection } = {}) {
 }
 
 // src/marks-plugin/methods/toggle-mark.ts
-import { Editor as Editor38, Point, Range as Range5 } from "slate";
+import { Editor as Editor41, Point, Range as Range6 } from "slate";
 function toggleMark(editor, markKey, unsetKey, { at = editor.selection } = {}) {
   if (at == null)
     return;
-  const point = Range5.isRange(at) ? at.focus : at;
-  const isAtLineEnd = Point.isPoint(point) && (Editor38.after(editor, point) === null || Editor38.isEnd(editor, point, Editor38.end(editor, [])));
+  const point = Range6.isRange(at) ? at.focus : at;
+  const isAtLineEnd = Point.isPoint(point) && (Editor41.after(editor, point) === null || Editor41.isEnd(editor, point, Editor41.end(editor, [])));
   const validMarkKey = markKey;
-  const marks = Editor38.marks(editor) || {};
+  const marks = Editor41.marks(editor) || {};
   const isActive = marks[validMarkKey] === true;
   if (isAtLineEnd) {
     if (!isActive) {
@@ -5718,12 +6251,12 @@ function toggleMark(editor, markKey, unsetKey, { at = editor.selection } = {}) {
     }
   }
   if (isActive) {
-    Editor38.removeMark(editor, validMarkKey);
+    Editor41.removeMark(editor, validMarkKey);
   } else {
-    Editor38.addMark(editor, validMarkKey, true);
+    Editor41.addMark(editor, validMarkKey, true);
   }
   if (typeof unsetKey === "string") {
-    Editor38.removeMark(editor, unsetKey);
+    Editor41.removeMark(editor, unsetKey);
   }
 }
 
@@ -5740,8 +6273,8 @@ function createMarksMethods(editor) {
 }
 
 // src/marks-plugin/styles.tsx
-import styled28 from "@emotion/styled";
-var $MarksSpan = styled28("span")`
+import styled29 from "@emotion/styled";
+var $MarksSpan = styled29("span")`
   &.--bold {
     font-weight: bold;
   }
@@ -5764,7 +6297,7 @@ var $MarksSpan = styled28("span")`
 `;
 
 // src/marks-plugin/index.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var MarksPlugin = createPlugin((editor) => {
   editor.marksPlugin = createMarksMethods(editor);
   editor.activeMarks = {};
@@ -5791,9 +6324,9 @@ var MarksPlugin = createPlugin((editor) => {
   editor.marksPlugin.removeMarks = () => {
     removeMarks2();
     if (editor.selection) {
-      const point = Range6.isRange(editor.selection) ? editor.selection.focus : editor.selection;
+      const point = Range7.isRange(editor.selection) ? editor.selection.focus : editor.selection;
       if (Point2.isPoint(point)) {
-        const isAtLineEnd = Editor39.after(editor, point) === null || Editor39.isEnd(editor, point, Editor39.end(editor, []));
+        const isAtLineEnd = Editor42.after(editor, point) === null || Editor42.isEnd(editor, point, Editor42.end(editor, []));
         if (isAtLineEnd) {
           editor.activeMarks = {};
         }
@@ -5804,7 +6337,7 @@ var MarksPlugin = createPlugin((editor) => {
     name: "marks",
     editableProps: {
       renderLeaf: ({ leaf, children }) => {
-        return /* @__PURE__ */ jsx40(
+        return /* @__PURE__ */ jsx45(
           $MarksSpan,
           {
             className: clsx7({
@@ -5827,11 +6360,11 @@ var MarksPlugin = createPlugin((editor) => {
 });
 
 // src/normalize-after-delete-plugin/index.tsx
-import { Editor as Editor40, Point as Point3 } from "slate";
+import { Editor as Editor43, Point as Point3 } from "slate";
 function forceNormalizeNearestElement(editor) {
   if (!editor.selection)
     return;
-  const entry = Editor40.parent(editor, editor.selection);
+  const entry = Editor43.parent(editor, editor.selection);
   forceNormalizePath(editor, entry[1]);
 }
 var NormalizeAfterDeletePlugin = createPlugin((editor) => {
@@ -5842,9 +6375,9 @@ var NormalizeAfterDeletePlugin = createPlugin((editor) => {
       deleteBackward() {
         if (!editor.selection)
           return false;
-        const entry = Editor40.parent(editor, editor.selection);
+        const entry = Editor43.parent(editor, editor.selection);
         const isStart = Point3.equals(
-          Editor40.start(editor, entry[1]),
+          Editor43.start(editor, entry[1]),
           editor.selection.anchor
         );
         if (!isStart)
@@ -5856,9 +6389,9 @@ var NormalizeAfterDeletePlugin = createPlugin((editor) => {
       deleteForward() {
         if (!editor.selection)
           return false;
-        const entry = Editor40.parent(editor, editor.selection);
+        const entry = Editor43.parent(editor, editor.selection);
         const isEnd = Point3.equals(
-          Editor40.end(editor, entry[1]),
+          Editor43.end(editor, entry[1]),
           editor.selection.anchor
         );
         if (!isEnd)
@@ -5873,15 +6406,15 @@ var NormalizeAfterDeletePlugin = createPlugin((editor) => {
 });
 
 // src/table-plugin/index.tsx
-import { Element as Element19 } from "slate";
+import { Element as Element23 } from "slate";
 
 // src/table-plugin/delete-fragment/index.ts
-import { Editor as Editor42, Path as Path10, Transforms as Transforms26 } from "slate";
+import { Editor as Editor45, Path as Path11, Transforms as Transforms29 } from "slate";
 
 // src/table-plugin/delete-fragment/get-reversed-delete-safe-ranges.ts
-import { Editor as Editor41, Path as Path9 } from "slate";
+import { Editor as Editor44, Path as Path10 } from "slate";
 function getReversedDeleteSafeRanges(editor, deleteRange, protectedTypes) {
-  const positions = [...Editor41.positions(editor, { at: deleteRange })];
+  const positions = [...Editor44.positions(editor, { at: deleteRange })];
   const deleteSafeRanges = [];
   let startPos, prevPos, startTdPath;
   startPos = prevPos = positions[0];
@@ -5892,7 +6425,7 @@ function getReversedDeleteSafeRanges(editor, deleteRange, protectedTypes) {
     const tdPath = findElementUpPath(editor, protectedTypes, {
       at: pos
     });
-    if (startTdPath && tdPath && Path9.equals(startTdPath, tdPath) || startTdPath == void 0 && tdPath == void 0) {
+    if (startTdPath && tdPath && Path10.equals(startTdPath, tdPath) || startTdPath == void 0 && tdPath == void 0) {
       prevPos = pos;
     } else {
       const range2 = { anchor: startPos, focus: prevPos };
@@ -5911,7 +6444,7 @@ function getReversedDeleteSafeRanges(editor, deleteRange, protectedTypes) {
 function deleteFragmentWithProtectedTypes(editor, protectedTypes) {
   if (editor.selection == null)
     return false;
-  const [start, end] = Editor42.edges(editor, editor.selection);
+  const [start, end] = Editor45.edges(editor, editor.selection);
   const startProtectedPath = findElementUpPath(editor, protectedTypes, {
     at: start
   });
@@ -5921,7 +6454,7 @@ function deleteFragmentWithProtectedTypes(editor, protectedTypes) {
   if (!startProtectedPath && !endProtectedPath) {
     return false;
   }
-  if (startProtectedPath && endProtectedPath && Path10.equals(startProtectedPath, endProtectedPath)) {
+  if (startProtectedPath && endProtectedPath && Path11.equals(startProtectedPath, endProtectedPath)) {
     return false;
   }
   const reversedRanges = getReversedDeleteSafeRanges(
@@ -5929,17 +6462,17 @@ function deleteFragmentWithProtectedTypes(editor, protectedTypes) {
     editor.selection,
     protectedTypes
   );
-  Editor42.withoutNormalizing(editor, () => {
+  Editor45.withoutNormalizing(editor, () => {
     for (const range of reversedRanges) {
-      Transforms26.delete(editor, { at: range });
+      Transforms29.delete(editor, { at: range });
     }
-    Transforms26.collapse(editor, { edge: "start" });
+    Transforms29.collapse(editor, { edge: "start" });
   });
   return true;
 }
 
 // src/table-plugin/methods/index.ts
-import { Transforms as Transforms34 } from "slate";
+import { Transforms as Transforms37 } from "slate";
 
 // src/table-plugin/methods/get-table-info.ts
 function getTableInfo(editor, { at = editor.selection } = {}) {
@@ -5977,7 +6510,7 @@ function getTableInfo(editor, { at = editor.selection } = {}) {
 }
 
 // src/table-plugin/methods/insert-column.ts
-import { Editor as Editor43, Transforms as Transforms27 } from "slate";
+import { Editor as Editor46, Transforms as Transforms30 } from "slate";
 
 // src/table-plugin/methods/utils.ts
 function createCell(index, children = [
@@ -5999,13 +6532,13 @@ function insertColumn(editor, { offset = 0, at = editor.selection } = {}) {
     return false;
   const { tableElement, tablePath, cellIndex } = t2;
   const nextCellIndex = cellIndex + offset;
-  Editor43.withoutNormalizing(editor, () => {
+  Editor46.withoutNormalizing(editor, () => {
     const { columns } = tableElement;
     const nextColumns = [...columns];
     nextColumns.splice(nextCellIndex, 0, columns[nextCellIndex]);
-    Transforms27.setNodes(editor, { columns: nextColumns }, { at: tablePath });
+    Transforms30.setNodes(editor, { columns: nextColumns }, { at: tablePath });
     tableElement.children.forEach((rowElement, i) => {
-      Transforms27.insertNodes(editor, createCell(nextCellIndex), {
+      Transforms30.insertNodes(editor, createCell(nextCellIndex), {
         at: [...tablePath, i, nextCellIndex]
       });
     });
@@ -6014,7 +6547,7 @@ function insertColumn(editor, { offset = 0, at = editor.selection } = {}) {
 }
 
 // src/table-plugin/methods/insert-row.ts
-import { Transforms as Transforms28 } from "slate";
+import { Transforms as Transforms31 } from "slate";
 function createRow(columnCount) {
   return {
     type: "table-row",
@@ -6026,7 +6559,7 @@ function insertRow(editor, { at = editor.selection, offset = 0 } = {}) {
   if (!t2)
     return false;
   const nextRowElement = createRow(t2.tableElement.columns.length);
-  Transforms28.insertNodes(editor, nextRowElement, {
+  Transforms31.insertNodes(editor, nextRowElement, {
     at: [...t2.tablePath, t2.rowIndex + offset]
   });
   return true;
@@ -6036,7 +6569,7 @@ function insertRowBelow(editor, { at } = {}) {
 }
 
 // src/table-plugin/methods/insert-table.ts
-import { Editor as Editor45, Element as Element18, Path as Path11, Transforms as Transforms29 } from "slate";
+import { Editor as Editor48, Element as Element22, Path as Path12, Transforms as Transforms32 } from "slate";
 function createRange(size) {
   return [...Array(size).keys()];
 }
@@ -6065,29 +6598,29 @@ function insertRootElement2(editor, element, { at = editor.selection } = {}) {
     return false;
   const entry = findElementUp(
     editor,
-    (node) => Element18.isElement(node) && editor.isMaster(node)
+    (node) => Element22.isElement(node) && editor.isMaster(node)
   );
   if (entry == null) {
     const selection = editor.selection;
-    Editor45.withoutNormalizing(editor, () => {
-      Transforms29.insertNodes(editor, element, { at });
+    Editor48.withoutNormalizing(editor, () => {
+      Transforms32.insertNodes(editor, element, { at });
       if (selection) {
-        Transforms29.select(editor, selection);
-        Transforms29.move(editor);
+        Transforms32.select(editor, selection);
+        Transforms32.move(editor);
       }
     });
   } else {
-    const nextPath = Path11.next(entry[1]);
-    Editor45.withoutNormalizing(editor, () => {
-      Transforms29.insertNodes(editor, element, { at: nextPath });
-      Transforms29.select(editor, Editor45.start(editor, nextPath));
+    const nextPath = Path12.next(entry[1]);
+    Editor48.withoutNormalizing(editor, () => {
+      Transforms32.insertNodes(editor, element, { at: nextPath });
+      Transforms32.select(editor, Editor48.start(editor, nextPath));
     });
   }
   return true;
 }
 
 // src/table-plugin/methods/navigation/select-element.ts
-import { Path as Path12 } from "slate";
+import { Path as Path13 } from "slate";
 function selectElementBelow(editor, t2) {
   const { cellIndex, rowIndex, rowCount, tablePath } = t2;
   if (rowIndex < rowCount - 1) {
@@ -6095,7 +6628,7 @@ function selectElementBelow(editor, t2) {
     return true;
   }
   try {
-    selectStartOfElement(editor, Path12.next(tablePath));
+    selectStartOfElement(editor, Path13.next(tablePath));
     return true;
   } catch (e) {
     return false;
@@ -6108,7 +6641,7 @@ function selectElementAbove(editor, t2) {
     return true;
   }
   try {
-    selectEndOfElement(editor, Path12.previous(tablePath));
+    selectEndOfElement(editor, Path13.previous(tablePath));
     return true;
   } catch (e) {
     return false;
@@ -6160,15 +6693,15 @@ function up(editor) {
 }
 
 // src/table-plugin/methods/remove-column.ts
-import { Editor as Editor48, Transforms as Transforms31 } from "slate";
+import { Editor as Editor51, Transforms as Transforms34 } from "slate";
 
 // src/table-plugin/methods/remove-table.ts
-import { Transforms as Transforms30 } from "slate";
+import { Transforms as Transforms33 } from "slate";
 function removeTable(editor) {
   const t2 = editor.tablePlugin.getTableInfo();
   if (t2 === void 0)
     return false;
-  Transforms30.removeNodes(editor, { at: t2.tablePath });
+  Transforms33.removeNodes(editor, { at: t2.tablePath });
   return true;
 }
 
@@ -6181,26 +6714,26 @@ function removeColumn(editor, { at = editor.selection } = {}) {
   if (cellCount === 1) {
     return removeTable(editor);
   }
-  Editor48.withoutNormalizing(editor, () => {
+  Editor51.withoutNormalizing(editor, () => {
     const columns = [...tableElement.columns];
     columns.splice(cellIndex, 1);
-    Transforms31.setNodes(editor, { columns }, { at: tablePath });
+    Transforms34.setNodes(editor, { columns }, { at: tablePath });
     tableElement.children.forEach((rowElement, rowIndex2) => {
-      Transforms31.removeNodes(editor, {
+      Transforms34.removeNodes(editor, {
         at: [...tablePath, rowIndex2, cellIndex]
       });
     });
-    const selection = Editor48.start(editor, [
+    const selection = Editor51.start(editor, [
       ...tablePath,
       rowIndex,
       Math.min(cellIndex, cellCount - 2)
     ]);
-    Transforms31.select(editor, selection);
+    Transforms34.select(editor, selection);
   });
 }
 
 // src/table-plugin/methods/remove-row.ts
-import { Editor as Editor49, Transforms as Transforms32 } from "slate";
+import { Editor as Editor52, Transforms as Transforms35 } from "slate";
 function removeRow(editor, { at = editor.selection } = {}) {
   const t2 = getTableInfo(editor, { at });
   if (t2 === void 0)
@@ -6209,11 +6742,11 @@ function removeRow(editor, { at = editor.selection } = {}) {
     removeTable(editor);
     return true;
   }
-  Editor49.withoutNormalizing(editor, () => {
-    Transforms32.removeNodes(editor, { at: t2.rowPath });
-    Transforms32.select(
+  Editor52.withoutNormalizing(editor, () => {
+    Transforms35.removeNodes(editor, { at: t2.rowPath });
+    Transforms35.select(
       editor,
-      Editor49.start(editor, [
+      Editor52.start(editor, [
         ...t2.tablePath,
         Math.min(t2.rowIndex, t2.rowCount - 2),
         t2.cellIndex
@@ -6224,7 +6757,7 @@ function removeRow(editor, { at = editor.selection } = {}) {
 }
 
 // src/table-plugin/methods/setTableColumnAlign.ts
-import { Transforms as Transforms33 } from "slate";
+import { Transforms as Transforms36 } from "slate";
 function setTableColumnAlign(editor, options) {
   const t2 = getTableInfo(editor);
   if (t2 === void 0)
@@ -6232,7 +6765,7 @@ function setTableColumnAlign(editor, options) {
   const { tableElement, tablePath, cellIndex } = t2;
   const nextColumns = tableElement.columns.slice();
   nextColumns.splice(cellIndex, 1, { align: options.align });
-  Transforms33.setNodes(editor, { columns: nextColumns }, { at: tablePath });
+  Transforms36.setNodes(editor, { columns: nextColumns }, { at: tablePath });
   return true;
 }
 
@@ -6292,12 +6825,12 @@ function selectCell(editor, { at = editor.selection } = {}) {
   if (t2 === void 0)
     return false;
   const { cellPath } = t2;
-  Transforms34.select(editor, cellPath);
+  Transforms37.select(editor, cellPath);
   return true;
 }
 
 // src/table-plugin/normalize/normalize-table.ts
-import { Transforms as Transforms35 } from "slate";
+import { Transforms as Transforms38 } from "slate";
 function normalizeTableIndexes(editor, entry) {
   let isTransformed = false;
   const rowElements = entry[0].children;
@@ -6305,7 +6838,7 @@ function normalizeTableIndexes(editor, entry) {
     const cellElements = rowElement.children;
     cellElements.forEach((cellElement, x) => {
       if (cellElement.x !== x || cellElement.y !== y) {
-        Transforms35.setNodes(editor, { x, y }, { at: [...entry[1], y, x] });
+        Transforms38.setNodes(editor, { x, y }, { at: [...entry[1], y, x] });
         isTransformed = true;
       }
     });
@@ -6314,14 +6847,14 @@ function normalizeTableIndexes(editor, entry) {
 }
 
 // src/table-plugin/normalize/normalize-table-cell.ts
-import { Editor as Editor53, Transforms as Transforms36 } from "slate";
+import { Editor as Editor56, Transforms as Transforms39 } from "slate";
 function normalizeTableCell(editor, entry) {
   const [node, path] = entry;
   if (node.children.length === 1 && node.children[0].type === "table-content") {
     return false;
   }
-  Editor53.withoutNormalizing(editor, () => {
-    Transforms36.insertNodes(
+  Editor56.withoutNormalizing(editor, () => {
+    Transforms39.insertNodes(
       editor,
       {
         type: "table-content",
@@ -6330,9 +6863,9 @@ function normalizeTableCell(editor, entry) {
       { at: [...entry[1], 0] }
     );
     for (let i = node.children.length; i >= 0; i--) {
-      Transforms36.mergeNodes(editor, { at: [...path, i] });
+      Transforms39.mergeNodes(editor, { at: [...path, i] });
     }
-    Transforms36.delete(editor, {
+    Transforms39.delete(editor, {
       at: { path: [...path, 0, 0], offset: 0 },
       unit: "character"
     });
@@ -6342,14 +6875,14 @@ function normalizeTableCell(editor, entry) {
 
 // src/table-plugin/render-element/table.tsx
 import { useEffect as useEffect6 } from "react";
-import { ReactEditor as ReactEditor11, useSelected as useSelected5, useSlateStatic as useSlateStatic13 } from "slate-react";
+import { ReactEditor as ReactEditor11, useSelected as useSelected7, useSlateStatic as useSlateStatic13 } from "slate-react";
 
 // src/table-plugin/render-element/styles/index.ts
-import styled30 from "@emotion/styled";
+import styled31 from "@emotion/styled";
 
 // src/table-plugin/render-element/styles/table-menu-styles.ts
-import styled29 from "@emotion/styled";
-var $BaseMenu = styled29("div")`
+import styled30 from "@emotion/styled";
+var $BaseMenu = styled30("div")`
   position: absolute;
   /**
    * very slightly shaded
@@ -6374,7 +6907,7 @@ var $BaseMenu = styled29("div")`
     }
   }
 `;
-var $ColumnMenu = styled29($BaseMenu)`
+var $ColumnMenu = styled30($BaseMenu)`
   cursor: pointer;
   /**
    * hangs out on top
@@ -6385,7 +6918,7 @@ var $ColumnMenu = styled29($BaseMenu)`
   height: 3em;
   top: -3em;
 `;
-var $RowMenu = styled29($BaseMenu)`
+var $RowMenu = styled30($BaseMenu)`
   /**
    * hangs out on left
    */
@@ -6394,7 +6927,7 @@ var $RowMenu = styled29($BaseMenu)`
   width: 3em;
   left: -3em;
 `;
-var $MenuTile = styled29("div")`
+var $MenuTile = styled30("div")`
   position: absolute;
   background: rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.05);
@@ -6407,7 +6940,7 @@ var $MenuTile = styled29("div")`
   right: 0;
   bottom: 0;
 `;
-var $ColumnMenuTile = styled29($MenuTile)`
+var $ColumnMenuTile = styled30($MenuTile)`
   top: 50%;
   border-bottom: none;
   border-right: none;
@@ -6434,7 +6967,7 @@ var $ColumnMenuTile = styled29($MenuTile)`
   /* border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em; */
 `;
-var $RowMenuTile = styled29($MenuTile)`
+var $RowMenuTile = styled30($MenuTile)`
   left: 50%;
   border-right: none;
   border-bottom: none;
@@ -6461,7 +6994,7 @@ var $RowMenuTile = styled29($MenuTile)`
   /* border-top-left-radius: 0.5em;
   border-bottom-left-radius: 0.5em; */
 `;
-var $MenuButton = styled29("div")`
+var $MenuButton = styled30("div")`
   position: absolute;
   font-size: 1.5em;
   background: white;
@@ -6471,13 +7004,13 @@ var $MenuButton = styled29("div")`
     display: block;
   }
 `;
-var $AddMenuButton = styled29($MenuButton)`
+var $AddMenuButton = styled30($MenuButton)`
   color: #c0c0c0;
   &:hover {
     color: royalblue;
   }
 `;
-var $RemoveMenuButton = styled29($MenuButton)`
+var $RemoveMenuButton = styled30($MenuButton)`
   color: #c0c0c0;
   &:hover {
     color: firebrick;
@@ -6485,20 +7018,20 @@ var $RemoveMenuButton = styled29($MenuButton)`
 `;
 
 // src/table-plugin/render-element/styles/index.ts
-var $Table = styled30("table")`
+var $Table = styled31("table")`
   border-collapse: collapse;
   margin: 1em 0;
   ${({ columns }) => columns.map(
   (column, index) => `td:nth-of-type(${index + 1}) { text-align: ${column.align}; }`
 ).join("\n")}
 `;
-var $TableRow = styled30("tr")`
+var $TableRow = styled31("tr")`
   position: relative;
   &:first-of-type {
     background: var(--table-head-bgcolor);
   }
 `;
-var $TableCell = styled30("td")`
+var $TableCell = styled31("td")`
   position: relative;
   border-width: 1px;
   border-style: solid;
@@ -6519,7 +7052,7 @@ var $TableCell = styled30("td")`
     border-right-color: var(--table-border-color);
   }
 `;
-var $TableContent = styled30("div")`
+var $TableContent = styled31("div")`
   /**
    * Smaller font inside a table than outside of it
    */
@@ -6540,32 +7073,32 @@ var TableContext = createContext2({
 });
 
 // src/table-plugin/render-element/table.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function Table({
   element,
   attributes,
   children
 }) {
   const editor = useSlateStatic13();
-  const isSelected = useSelected5();
+  const isSelected = useSelected7();
   useEffect6(() => {
     const path = ReactEditor11.findPath(editor, element);
     normalizeTableIndexes(editor, [element, path]);
   }, []);
-  return /* @__PURE__ */ jsx41(TableContext.Provider, { value: { isSelected }, children: /* @__PURE__ */ jsx41($Table, { ...attributes, columns: element.columns, children: /* @__PURE__ */ jsx41("tbody", { children }) }) });
+  return /* @__PURE__ */ jsx46(TableContext.Provider, { value: { isSelected }, children: /* @__PURE__ */ jsx46($Table, { ...attributes, columns: element.columns, children: /* @__PURE__ */ jsx46("tbody", { children }) }) });
 }
 
 // src/table-plugin/render-element/table-cell/index.tsx
 import { useContext as useContext2 } from "react";
-import { useSelected as useSelected6 } from "slate-react";
+import { useSelected as useSelected8 } from "slate-react";
 
 // src/table-plugin/render-element/table-cell/column-menu/index.tsx
-import { useCallback as useCallback10, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback11, useRef as useRef6, useState as useState5 } from "react";
 import { useSlateStatic as useSlateStatic14 } from "slate-react";
 
 // src/table-plugin/icons.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-var PlusIcon = (props) => /* @__PURE__ */ jsx42(
+import { jsx as jsx47 } from "react/jsx-runtime";
+var PlusIcon = (props) => /* @__PURE__ */ jsx47(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6574,7 +7107,7 @@ var PlusIcon = (props) => /* @__PURE__ */ jsx42(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx42(
+    children: /* @__PURE__ */ jsx47(
       "path",
       {
         fillRule: "evenodd",
@@ -6584,7 +7117,7 @@ var PlusIcon = (props) => /* @__PURE__ */ jsx42(
     )
   }
 );
-var MinusIcon = (props) => /* @__PURE__ */ jsx42(
+var MinusIcon = (props) => /* @__PURE__ */ jsx47(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6593,7 +7126,7 @@ var MinusIcon = (props) => /* @__PURE__ */ jsx42(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx42(
+    children: /* @__PURE__ */ jsx47(
       "path",
       {
         fillRule: "evenodd",
@@ -6603,25 +7136,25 @@ var MinusIcon = (props) => /* @__PURE__ */ jsx42(
     )
   }
 );
-var BarsIcon = () => /* @__PURE__ */ jsx42(TablerIcon, { children: /* @__PURE__ */ jsx42("path", { d: "M4 6h16M4 12h16M4 18h16" }) });
-var AlignLeft = () => /* @__PURE__ */ jsx42(TablerIcon, { children: /* @__PURE__ */ jsx42("path", { d: "M4 6h16M4 12h10M4 18h14" }) });
-var AlignCenter = () => /* @__PURE__ */ jsx42(TablerIcon, { children: /* @__PURE__ */ jsx42("path", { d: "M4 6h16M8 12h8M6 18h12" }) });
-var AlignRight = () => /* @__PURE__ */ jsx42(TablerIcon, { children: /* @__PURE__ */ jsx42("path", { d: "M4 6h16M10 12h10M6 18h14" }) });
+var BarsIcon = () => /* @__PURE__ */ jsx47(TablerIcon, { children: /* @__PURE__ */ jsx47("path", { d: "M4 6h16M4 12h16M4 18h16" }) });
+var AlignLeft = () => /* @__PURE__ */ jsx47(TablerIcon, { children: /* @__PURE__ */ jsx47("path", { d: "M4 6h16M4 12h10M4 18h14" }) });
+var AlignCenter = () => /* @__PURE__ */ jsx47(TablerIcon, { children: /* @__PURE__ */ jsx47("path", { d: "M4 6h16M8 12h8M6 18h12" }) });
+var AlignRight = () => /* @__PURE__ */ jsx47(TablerIcon, { children: /* @__PURE__ */ jsx47("path", { d: "M4 6h16M10 12h10M6 18h14" }) });
 
 // src/table-plugin/render-element/table-cell/column-menu/index.tsx
-import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
 function ColumnMenu({ cellElement }) {
   const editor = useSlateStatic14();
   const menu = useLayer("column-menu");
-  const buttonRef = useRef5(null);
+  const buttonRef = useRef6(null);
   const [hover, setHover] = useState5(false);
-  const onMouseEnter = useCallback10(() => {
+  const onMouseEnter = useCallback11(() => {
     setHover(true);
   }, []);
-  const onMouseLeave = useCallback10(() => {
+  const onMouseLeave = useCallback11(() => {
     setHover(false);
   }, []);
-  const onClick = useCallback10(() => {
+  const onClick = useCallback11(() => {
     if (menu.layer)
       menu.close();
     const dest = buttonRef.current;
@@ -6650,9 +7183,9 @@ function ColumnMenu({ cellElement }) {
         }
       }
     ];
-    menu.open(() => /* @__PURE__ */ jsx43(Menu, { dest, items, close: menu.close }));
+    menu.open(() => /* @__PURE__ */ jsx48(Menu, { dest, items, close: menu.close }));
   }, []);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     $ColumnMenu,
     {
       ref: buttonRef,
@@ -6661,9 +7194,9 @@ function ColumnMenu({ cellElement }) {
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ jsx43($ColumnMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx43(BarsIcon, {}) }),
-        hover ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
-          /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx48($ColumnMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx48(BarsIcon, {}) }),
+        hover ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
+          /* @__PURE__ */ jsx48(
             $RemoveMenuButton,
             {
               style: {
@@ -6672,23 +7205,23 @@ function ColumnMenu({ cellElement }) {
                 marginLeft: "-0.5em"
               },
               onMouseDown: () => editor.tablePlugin.removeColumn({ at: cellElement }),
-              children: /* @__PURE__ */ jsx43(MinusIcon, {})
+              children: /* @__PURE__ */ jsx48(MinusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx48(
             $AddMenuButton,
             {
               style: { left: "-0.5em", top: 0 },
               onMouseDown: () => editor.tablePlugin.insertColumn({ at: cellElement }),
-              children: /* @__PURE__ */ jsx43(PlusIcon, {})
+              children: /* @__PURE__ */ jsx48(PlusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsx48(
             $AddMenuButton,
             {
               style: { right: "-0.5em", top: 0 },
               onMouseDown: () => editor.tablePlugin.insertColumn({ at: cellElement, offset: 1 }),
-              children: /* @__PURE__ */ jsx43(PlusIcon, {})
+              children: /* @__PURE__ */ jsx48(PlusIcon, {})
             }
           )
         ] }) : null
@@ -6700,20 +7233,20 @@ function ColumnMenu({ cellElement }) {
 // src/table-plugin/render-element/table-cell/row-menu/index.tsx
 import { useState as useState6 } from "react";
 import { useSlateStatic as useSlateStatic15 } from "slate-react";
-import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
 function RowMenu({ cellElement }) {
   const editor = useSlateStatic15();
   const [hover, setHover] = useState6(false);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     $RowMenu,
     {
       contentEditable: false,
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
       children: [
-        /* @__PURE__ */ jsx44($RowMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx44(BarsIcon, {}) }),
-        hover ? /* @__PURE__ */ jsxs22(Fragment5, { children: [
-          /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx49($RowMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx49(BarsIcon, {}) }),
+        hover ? /* @__PURE__ */ jsxs23(Fragment5, { children: [
+          /* @__PURE__ */ jsx49(
             $RemoveMenuButton,
             {
               style: {
@@ -6722,23 +7255,23 @@ function RowMenu({ cellElement }) {
                 marginTop: "-0.5em"
               },
               onMouseDown: () => editor.tablePlugin.removeRow({ at: cellElement }),
-              children: /* @__PURE__ */ jsx44(MinusIcon, {})
+              children: /* @__PURE__ */ jsx49(MinusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx49(
             $AddMenuButton,
             {
               style: { top: "-0.5em", left: "0.5em" },
               onMouseDown: () => editor.tablePlugin.insertRow({ at: cellElement }),
-              children: /* @__PURE__ */ jsx44(PlusIcon, {})
+              children: /* @__PURE__ */ jsx49(PlusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx49(
             $AddMenuButton,
             {
               style: { bottom: "-0.5em", left: "0.5em" },
               onMouseDown: () => editor.tablePlugin.insertRow({ at: cellElement, offset: 1 }),
-              children: /* @__PURE__ */ jsx44(PlusIcon, {})
+              children: /* @__PURE__ */ jsx49(PlusIcon, {})
             }
           )
         ] }) : null
@@ -6748,8 +7281,8 @@ function RowMenu({ cellElement }) {
 }
 
 // src/table-plugin/render-element/table-cell/table-menu/$table-menu.tsx
-import styled31 from "@emotion/styled";
-var $TableMenu = styled31("div")`
+import styled32 from "@emotion/styled";
+var $TableMenu = styled32("div")`
   position: absolute;
   /**
    * very slightly shaded
@@ -6782,7 +7315,7 @@ var $TableMenu = styled31("div")`
     }
   }
 `;
-var $TableMenuTile = styled31("div")`
+var $TableMenuTile = styled32("div")`
   position: absolute;
   left: 0;
   top: 0;
@@ -6793,24 +7326,24 @@ var $TableMenuTile = styled31("div")`
 `;
 
 // src/table-plugin/render-element/table-cell/table-menu/index.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function TableMenu() {
-  return /* @__PURE__ */ jsx45($TableMenu, { contentEditable: false, children: /* @__PURE__ */ jsx45($TableMenuTile, { className: "--table-menu-tile" }) });
+  return /* @__PURE__ */ jsx50($TableMenu, { contentEditable: false, children: /* @__PURE__ */ jsx50($TableMenuTile, { className: "--table-menu-tile" }) });
 }
 
 // src/table-plugin/render-element/table-cell/index.tsx
-import { jsx as jsx46, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs24 } from "react/jsx-runtime";
 function TableCell({
   element,
   attributes,
   children
 }) {
   const tableContext = useContext2(TableContext);
-  const selected = useSelected6();
+  const selected = useSelected8();
   const showTableMenu = tableContext.isSelected && element.x === 0 && element.y === 0;
   const showRowMenu = tableContext.isSelected && element.x === 0;
   const showColumnMenu = tableContext.isSelected && element.y === 0;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     $TableCell,
     {
       className: selected ? "--selected" : "",
@@ -6819,48 +7352,48 @@ function TableCell({
       "data-y": element.y,
       children: [
         children,
-        showTableMenu ? /* @__PURE__ */ jsx46(TableMenu, {}) : null,
-        showRowMenu ? /* @__PURE__ */ jsx46(RowMenu, { cellElement: element }) : null,
-        showColumnMenu ? /* @__PURE__ */ jsx46(ColumnMenu, { cellElement: element }) : null
+        showTableMenu ? /* @__PURE__ */ jsx51(TableMenu, {}) : null,
+        showRowMenu ? /* @__PURE__ */ jsx51(RowMenu, { cellElement: element }) : null,
+        showColumnMenu ? /* @__PURE__ */ jsx51(ColumnMenu, { cellElement: element }) : null
       ]
     }
   );
 }
 
 // src/table-plugin/render-element/table-content.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function TableContent({
   attributes,
   children
 }) {
-  return /* @__PURE__ */ jsx47($TableContent, { ...attributes, children });
+  return /* @__PURE__ */ jsx52($TableContent, { ...attributes, children });
 }
 
 // src/table-plugin/render-element/table-row.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function TableRow({
   attributes,
   children
 }) {
-  return /* @__PURE__ */ jsx48($TableRow, { ...attributes, children });
+  return /* @__PURE__ */ jsx53($TableRow, { ...attributes, children });
 }
 
 // src/table-plugin/render-element/index.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
-function renderElement3({
+import { jsx as jsx54 } from "react/jsx-runtime";
+function renderElement4({
   element,
   attributes,
   children
 }) {
   switch (element.type) {
     case "table":
-      return /* @__PURE__ */ jsx49(Table, { element, attributes, children });
+      return /* @__PURE__ */ jsx54(Table, { element, attributes, children });
     case "table-row":
-      return /* @__PURE__ */ jsx49(TableRow, { element, attributes, children });
+      return /* @__PURE__ */ jsx54(TableRow, { element, attributes, children });
     case "table-cell":
-      return /* @__PURE__ */ jsx49(TableCell, { element, attributes, children });
+      return /* @__PURE__ */ jsx54(TableCell, { element, attributes, children });
     case "table-content":
-      return /* @__PURE__ */ jsx49(TableContent, { element, attributes, children });
+      return /* @__PURE__ */ jsx54(TableContent, { element, attributes, children });
   }
 }
 
@@ -6889,7 +7422,7 @@ var TablePlugin = createPlugin(
         },
         normalizeNode: (entry) => {
           const [node] = entry;
-          if (!Element19.isElement(node))
+          if (!Element23.isElement(node))
             return false;
           switch (node.type) {
             case "table":
@@ -6908,7 +7441,7 @@ var TablePlugin = createPlugin(
         }
       },
       editableProps: {
-        renderElement: renderElement3,
+        renderElement: renderElement4,
         onKeyDown: createHotkeyHandler({
           /**
            * navigation
@@ -6999,16 +7532,16 @@ var globalStyles = css2`
 `;
 
 // src/theme-plugin/index.tsx
-import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs25 } from "react/jsx-runtime";
 var ThemePlugin = createPlugin((editor) => {
   editor.theme = true;
   return {
     name: "theme",
     editor: {},
     renderEditable: ({ attributes, Editable: Editable3 }) => {
-      return /* @__PURE__ */ jsxs24(Fragment6, { children: [
-        /* @__PURE__ */ jsx50(Global, { styles: globalStyles }),
-        /* @__PURE__ */ jsx50(Editable3, { ...attributes })
+      return /* @__PURE__ */ jsxs25(Fragment6, { children: [
+        /* @__PURE__ */ jsx55(Global, { styles: globalStyles }),
+        /* @__PURE__ */ jsx55(Editable3, { ...attributes })
       ] });
     },
     editableProps: {}
@@ -7017,27 +7550,27 @@ var ThemePlugin = createPlugin((editor) => {
 
 // src/toolbar-plugin/render-editable/index.tsx
 import { clsx as clsx10 } from "clsx";
-import { useCallback as useCallback14, useRef as useRef11 } from "react";
-import { Editor as Editor55, Transforms as Transforms37 } from "slate";
+import { useCallback as useCallback15, useRef as useRef12 } from "react";
+import { Editor as Editor59, Transforms as Transforms41 } from "slate";
 import { ReactEditor as ReactEditor15, useFocused, useSlateStatic as useSlateStatic21 } from "slate-react";
 
 // src/toolbar-plugin/components/dialog/table-dialog.tsx
 import { clsx as clsx8 } from "clsx";
-import { useCallback as useCallback11, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback12, useRef as useRef7, useState as useState7 } from "react";
 import { ReactEditor as ReactEditor12, useSlateStatic as useSlateStatic16 } from "slate-react";
 
 // src/toolbar-plugin/styles/table-styles.ts
-import styled32 from "@emotion/styled";
-var $TableDialog = styled32($Panel)`
+import styled33 from "@emotion/styled";
+var $TableDialog = styled33($Panel)`
   padding: 0.5em;
 `;
-var $TableDialogGrid = styled32("div")`
+var $TableDialogGrid = styled33("div")`
   display: grid;
   grid-template-columns: repeat(5, 1.75em);
   grid-template-rows: 1.5em;
   /* grid-gap: 1px; */
 `;
-var $TableDialogGridCell = styled32("div")`
+var $TableDialogGridCell = styled33("div")`
   background: var(--shade-100);
   height: 1.5em;
   border-radius: 0.125em;
@@ -7050,7 +7583,7 @@ var $TableDialogGridCell = styled32("div")`
 `;
 
 // src/toolbar-plugin/components/dialog/table-dialog.tsx
-import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs26 } from "react/jsx-runtime";
 function createRange2(size) {
   return [...Array(size).keys()];
 }
@@ -7060,19 +7593,19 @@ function TableDialog({
 }) {
   const [hover, setHover] = useState7({ x: 0, y: 0 });
   const editor = useSlateStatic16();
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   const style = useAbsoluteReposition({ src: ref, dest }, ({ dest: dest2 }) => {
     return { left: dest2.left - 8, top: dest2.top + dest2.height };
   });
   const rows = createRange2(5).map((i) => i + 1);
   const cols = createRange2(5).map((i) => i + 1);
-  const hoverCell = useCallback11(
+  const hoverCell = useCallback12(
     (x, y) => {
       setHover({ x, y });
     },
     [setHover]
   );
-  const createTable2 = useCallback11(
+  const createTable2 = useCallback12(
     (x, y) => {
       editor.tablePlugin.insertTable(x, y);
       ReactEditor12.focus(editor);
@@ -7080,12 +7613,12 @@ function TableDialog({
     },
     [editor]
   );
-  return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-    /* @__PURE__ */ jsx51(CloseMask, { close }),
-    /* @__PURE__ */ jsx51($TableDialog, { ref, style, children: /* @__PURE__ */ jsx51($TableDialogGrid, { onMouseLeave: () => hoverCell(0, 0), children: rows.map((y) => {
+  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    /* @__PURE__ */ jsx56(CloseMask, { close }),
+    /* @__PURE__ */ jsx56($TableDialog, { ref, style, children: /* @__PURE__ */ jsx56($TableDialogGrid, { onMouseLeave: () => hoverCell(0, 0), children: rows.map((y) => {
       return cols.map((x) => {
         const selected = x <= hover.x && y <= hover.y;
-        return /* @__PURE__ */ jsx51(
+        return /* @__PURE__ */ jsx56(
           $TableDialogGridCell,
           {
             className: clsx8({ "--selected": selected }),
@@ -7101,53 +7634,67 @@ function TableDialog({
 
 // src/toolbar-plugin/components/toolbar/toolbar.tsx
 import throttle2 from "lodash.throttle";
-import { useEffect as useEffect7, useRef as useRef10, useState as useState10 } from "react";
+import { useEffect as useEffect7, useRef as useRef11, useState as useState10 } from "react";
 import { useSlateStatic as useSlateStatic20 } from "slate-react";
 
 // src/toolbar-plugin/icons.tsx
-import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
-var H = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M7 12h10M7 5v14M17 5v14M15 19h4M15 5h4M5 19h4M5 5h4" }) });
-var More = () => /* @__PURE__ */ jsx52(TablerIcon, { className: "--more-icon", width: "0.5em", viewBox: "0 0 12 24", children: /* @__PURE__ */ jsx52("path", { d: "m2 12 4 4 4-4" }) });
-var LinkPlus = () => /* @__PURE__ */ jsx52(TablerIcon, { width: "0.5em", viewBox: "6 0 12 24", children: /* @__PURE__ */ jsx52("path", { d: "M9 12h6M12 9v6" }) });
-var H1 = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M19 18v-8l-2 2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
-var H2 = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M17 12a2 2 0 1 1 4 0c0 .591-.417 1.318-.816 1.858L17 18.001h4M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
-var H3 = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M19 14a2 2 0 1 0-2-2M17 16a2 2 0 1 0 2-2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
-var Normal = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M8 18V6h2l6 9V6h2v12h-2l-6-9v9H8z" }) });
-var Bold = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7H7zM13 12h1a3.5 3.5 0 0 1 0 7H7v-7" }) });
-var Italic = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M11 5h6M7 19h6M14 5l-4 14" }) });
-var Link = () => /* @__PURE__ */ jsxs26(TablerIcon, { children: [
-  /* @__PURE__ */ jsx52("path", { d: "M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5" }),
-  /* @__PURE__ */ jsx52("path", { d: "M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5" })
+import { jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
+var H = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M7 12h10M7 5v14M17 5v14M15 19h4M15 5h4M5 19h4M5 5h4" }) });
+var More = () => /* @__PURE__ */ jsx57(TablerIcon, { className: "--more-icon", width: "0.5em", viewBox: "0 0 12 24", children: /* @__PURE__ */ jsx57("path", { d: "m2 12 4 4 4-4" }) });
+var LinkPlus = () => /* @__PURE__ */ jsx57(TablerIcon, { width: "0.5em", viewBox: "6 0 12 24", children: /* @__PURE__ */ jsx57("path", { d: "M9 12h6M12 9v6" }) });
+var H1 = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M19 18v-8l-2 2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
+var H2 = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M17 12a2 2 0 1 1 4 0c0 .591-.417 1.318-.816 1.858L17 18.001h4M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
+var H3 = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M19 14a2 2 0 1 0-2-2M17 16a2 2 0 1 0 2-2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
+var Normal = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M8 18V6h2l6 9V6h2v12h-2l-6-9v9H8z" }) });
+var Bold = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7H7zM13 12h1a3.5 3.5 0 0 1 0 7H7v-7" }) });
+var Italic = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M11 5h6M7 19h6M14 5l-4 14" }) });
+var Link = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("path", { d: "M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5" }),
+  /* @__PURE__ */ jsx57("path", { d: "M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5" })
+] });
+var Quote = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M10 11H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4.333-4 5M19 11h-4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4.333-4 5" }) });
+var DoubleQuote = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("path", { d: "M10 9l4 3-4 3" }),
+  /* @__PURE__ */ jsx57("path", { d: "M16 9l4 3-4 3" })
 ] });
-var Quote = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M10 11H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4.333-4 5M19 11h-4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4.333-4 5" }) });
-var BulletList = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01" }) });
-var Table2 = () => /* @__PURE__ */ jsxs26(TablerIcon, { children: [
-  /* @__PURE__ */ jsx52("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 }),
-  /* @__PURE__ */ jsx52("path", { d: "M4 10h16M10 4v16" })
+var BulletList = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01" }) });
+var Table2 = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 }),
+  /* @__PURE__ */ jsx57("path", { d: "M4 10h16M10 4v16" })
 ] });
-var Code = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "m7 8-4 4 4 4M17 8l4 4-4 4M14 4l-4 16" }) });
-var Image = () => /* @__PURE__ */ jsxs26(TablerIcon, { children: [
-  /* @__PURE__ */ jsx52("path", { d: "M15 8h.01" }),
-  /* @__PURE__ */ jsx52("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3 }),
-  /* @__PURE__ */ jsx52("path", { d: "m4 15 4-4a3 5 0 0 1 3 0l5 5" }),
-  /* @__PURE__ */ jsx52("path", { d: "m14 14 1-1a3 5 0 0 1 3 0l2 2" })
+var Code = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "m7 8-4 4 4 4M17 8l4 4-4 4M14 4l-4 16" }) });
+var CodeBlock2 = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M9 8L5 12L9 16M15 8L19 12L15 16" }) });
+var Image = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("path", { d: "M15 8h.01" }),
+  /* @__PURE__ */ jsx57("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3 }),
+  /* @__PURE__ */ jsx57("path", { d: "m4 15 4-4a3 5 0 0 1 3 0l5 5" }),
+  /* @__PURE__ */ jsx57("path", { d: "m14 14 1-1a3 5 0 0 1 3 0l2 2" })
 ] });
-var PhotoUp = () => /* @__PURE__ */ jsxs26(TablerIcon, { children: [
-  /* @__PURE__ */ jsx52("path", { stroke: "none", d: "M0 0h24v24H0z" }),
-  /* @__PURE__ */ jsx52("path", { d: "M15 8h.01M12.5 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v6.5" }),
-  /* @__PURE__ */ jsx52("path", { d: "m3 16 5-5c.928-.893 2.072-.893 3 0l3.5 3.5" }),
-  /* @__PURE__ */ jsx52("path", { d: "m14 14 1-1c.679-.653 1.473-.829 2.214-.526M19 22v-6M22 19l-3-3-3 3" })
+var PhotoUp = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+  /* @__PURE__ */ jsx57("path", { d: "M15 8h.01M12.5 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v6.5" }),
+  /* @__PURE__ */ jsx57("path", { d: "m3 16 5-5c.928-.893 2.072-.893 3 0l3.5 3.5" }),
+  /* @__PURE__ */ jsx57("path", { d: "m14 14 1-1c.679-.653 1.473-.829 2.214-.526M19 22v-6M22 19l-3-3-3 3" })
 ] });
-var Plus = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M12 5v14M5 12h14" }) });
-var Strikethrough = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M5 12h14M16 6.5A4 2 0 0 0 12 5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1-4-1.5" }) });
-var Underline = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M7 5v5a5 5 0 0 0 10 0V5M5 19h14" }) });
-var ListCheck = () => /* @__PURE__ */ jsxs26(TablerIcon, { children: [
-  /* @__PURE__ */ jsx52("path", { d: "m9 11 3 3 8-8" }),
-  /* @__PURE__ */ jsx52("path", { d: "M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9" })
+var Plus = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M12 5v14M5 12h14" }) });
+var Strikethrough = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M5 12h14M16 6.5A4 2 0 0 0 12 5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1-4-1.5" }) });
+var Underline = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M7 5v5a5 5 0 0 0 10 0V5M5 19h14" }) });
+var ListCheck = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("path", { d: "m9 11 3 3 8-8" }),
+  /* @__PURE__ */ jsx57("path", { d: "M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9" })
+] });
+var ListNumbers = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M11 6h9M11 12h9M12 18h8M4 16a2 2 0 1 1 4 0c0 .591-.5 1-1 1.5L4 20h4M6 10V4L4 6" }) });
+var IncreaseDepth = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M4 6h16M8 12h12M12 18h8M7 12l-3-3M7 12l-3 3" }) });
+var DecreaseDepth = () => /* @__PURE__ */ jsx57(TablerIcon, { children: /* @__PURE__ */ jsx57("path", { d: "M4 6h16M8 12h12M12 18h8M4 12l3-3M4 12l3 3" }) });
+var Markdown = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("path", { d: "M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" }),
+  /* @__PURE__ */ jsx57("path", { d: "M7 15V9l2 2 2-2v6M14 9v6h4M14 13h2" })
+] });
+var VisualEditor = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
+  /* @__PURE__ */ jsx57("path", { d: "M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" }),
+  /* @__PURE__ */ jsx57("path", { d: "M8 8h8M8 12h8M8 16h5" }),
+  /* @__PURE__ */ jsx57("path", { d: "M16 16h1" })
 ] });
-var ListNumbers = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M11 6h9M11 12h9M12 18h8M4 16a2 2 0 1 1 4 0c0 .591-.5 1-1 1.5L4 20h4M6 10V4L4 6" }) });
-var IncreaseDepth = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M4 6h16M8 12h12M12 18h8M7 12l-3-3M7 12l-3 3" }) });
-var DecreaseDepth = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M4 6h16M8 12h12M12 18h8M4 12l3-3M4 12l3 3" }) });
 
 // src/toolbar-plugin/items/block-items.tsx
 var listDepthItems = [
@@ -7197,37 +7744,35 @@ var blockItems = [
     active: (editor) => editor.heading.isHeadingActive(3)
   }
 ];
-var expandedBlockItems = [...blockItems, "divider", ...listDepthItems];
+var expandedBlockItems = [...blockItems];
 var compactBlockItems = [
   {
     icon: H,
     title: t("paragraphStyle"),
     more: true,
     children: blockItems
-  },
-  "divider",
-  ...listDepthItems
+  }
 ];
 
 // src/toolbar-plugin/components/dialog/image-url-dialog.tsx
-import { useState as useState8, useRef as useRef7 } from "react";
+import { useState as useState8, useRef as useRef8 } from "react";
 import { useSlateStatic as useSlateStatic17 } from "slate-react";
 
 // src/toolbar-plugin/styles/file-dialog-styles.ts
-import styled33 from "@emotion/styled";
-var $FileDialog = styled33($Panel)`
+import styled34 from "@emotion/styled";
+var $FileDialog = styled34($Panel)`
   padding: 1em;
   width: 18em;
 `;
 
 // src/toolbar-plugin/components/dialog/image-url-dialog.tsx
-import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
 function ImageUrlDialog({
   dest,
   close
 }) {
   const editor = useSlateStatic17();
-  const ref = useRef7(void 0);
+  const ref = useRef8(void 0);
   const [url, setUrl] = useState8("");
   const [alt, setAlt] = useState8("");
   const [title, setTitle] = useState8("");
@@ -7252,12 +7797,12 @@ function ImageUrlDialog({
     editor.image.insertImageFromUrl(url, alt, title);
     close();
   }
-  return /* @__PURE__ */ jsxs27(Fragment8, { children: [
-    /* @__PURE__ */ jsx53(CloseMask, { close }),
-    /* @__PURE__ */ jsx53($FileDialog, { ref, style, children: /* @__PURE__ */ jsxs27("form", { onSubmit: handleSubmit, style: { padding: "8px" }, children: [
-      /* @__PURE__ */ jsxs27("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx53("label", { style: { display: "block", marginBottom: "4px" }, children: t("imageUrlRequired") }),
-        /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
+    /* @__PURE__ */ jsx58(CloseMask, { close }),
+    /* @__PURE__ */ jsx58($FileDialog, { ref, style, children: /* @__PURE__ */ jsxs28("form", { onSubmit: handleSubmit, style: { padding: "8px" }, children: [
+      /* @__PURE__ */ jsxs28("div", { style: { marginBottom: "8px" }, children: [
+        /* @__PURE__ */ jsx58("label", { style: { display: "block", marginBottom: "4px" }, children: t("imageUrlRequired") }),
+        /* @__PURE__ */ jsx58(
           "input",
           {
             type: "text",
@@ -7275,9 +7820,9 @@ function ImageUrlDialog({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs27("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx53("label", { style: { display: "block", marginBottom: "4px" }, children: t("altText") }),
-        /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsxs28("div", { style: { marginBottom: "8px" }, children: [
+        /* @__PURE__ */ jsx58("label", { style: { display: "block", marginBottom: "4px" }, children: t("altText") }),
+        /* @__PURE__ */ jsx58(
           "input",
           {
             type: "text",
@@ -7294,9 +7839,9 @@ function ImageUrlDialog({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs27("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx53("label", { style: { display: "block", marginBottom: "4px" }, children: t("title") }),
-        /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsxs28("div", { style: { marginBottom: "8px" }, children: [
+        /* @__PURE__ */ jsx58("label", { style: { display: "block", marginBottom: "4px" }, children: t("title") }),
+        /* @__PURE__ */ jsx58(
           "input",
           {
             type: "text",
@@ -7313,7 +7858,7 @@ function ImageUrlDialog({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs27(
+      /* @__PURE__ */ jsxs28(
         "button",
         {
           type: "submit",
@@ -7329,7 +7874,7 @@ function ImageUrlDialog({
             fontWeight: "bold"
           },
           children: [
-            /* @__PURE__ */ jsx53("span", { style: { marginRight: "8px" }, children: /* @__PURE__ */ jsx53(PhotoUp, {}) }),
+            /* @__PURE__ */ jsx58("span", { style: { marginRight: "8px" }, children: /* @__PURE__ */ jsx58(PhotoUp, {}) }),
             t("insertImage")
           ]
         }
@@ -7338,46 +7883,18 @@ function ImageUrlDialog({
   ] });
 }
 
-// src/toolbar-plugin/items/dialogItems.tsx
-var dialogItems = [
-  {
-    icon: Table2,
-    title: t("insertTable"),
-    more: true,
-    Component: TableDialog
-  },
-  {
-    icon: Image,
-    title: t("insertImageFromUrl"),
-    more: true,
-    Component: ImageUrlDialog
-  }
-];
-var expandedDialogItems = dialogItems;
-var compactDialogItems = [
-  {
-    icon: Plus,
-    title: t("insert"),
-    more: true,
-    children: dialogItems
-  }
-];
-
-// src/toolbar-plugin/items/dropdownItems.tsx
-var dropdownItems = [];
-
 // src/toolbar-plugin/components/dialog/anchor-dialog.tsx
 import { isHotkey as isHotkey3 } from "is-hotkey";
 import {
-  useCallback as useCallback12,
-  useRef as useRef8,
+  useCallback as useCallback13,
+  useRef as useRef9,
   useState as useState9
 } from "react";
 import { ReactEditor as ReactEditor13, useSlateStatic as useSlateStatic18 } from "slate-react";
 
 // src/toolbar-plugin/styles/dialog-shared-styles.ts
-import styled34 from "@emotion/styled";
-var $DialogButton = styled34("div")`
+import styled35 from "@emotion/styled";
+var $DialogButton = styled35("div")`
   /* Center vertically and horizontally */
   display: flex;
   align-items: center;
@@ -7402,7 +7919,7 @@ var $DialogButton = styled34("div")`
     stroke-width: 2px;
   }
 `;
-var $DialogHint = styled34("div")`
+var $DialogHint = styled35("div")`
   font-size: 0.875em;
   margin-top: 0.5em;
   color: var(--shade-500);
@@ -7410,14 +7927,14 @@ var $DialogHint = styled34("div")`
 `;
 
 // src/toolbar-plugin/components/dialog/anchor-dialog.tsx
-import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
 var isEnter = isHotkey3("enter");
 function AnchorDialog2({
   dest,
   close
 }) {
   const editor = useSlateStatic18();
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   const style = useAbsoluteReposition(
     { src: ref, dest },
     ({ src, dest: dest2 }, viewport) => {
@@ -7438,7 +7955,7 @@ function AnchorDialog2({
     ReactEditor13.focus(editor);
     close();
   };
-  const onChangeInput = useCallback12(
+  const onChangeInput = useCallback13(
     (e) => {
       setUrl(e.currentTarget.value);
     },
@@ -7451,11 +7968,11 @@ function AnchorDialog2({
     e.stopPropagation();
     insertLink2();
   };
-  return /* @__PURE__ */ jsxs28(Fragment9, { children: [
-    /* @__PURE__ */ jsx54(CloseMask, { close }),
-    /* @__PURE__ */ jsxs28($AnchorDialog, { ref, style, children: [
-      /* @__PURE__ */ jsxs28($AnchorDialogInputLine, { children: [
-        /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+    /* @__PURE__ */ jsx59(CloseMask, { close }),
+    /* @__PURE__ */ jsxs29($AnchorDialog, { ref, style, children: [
+      /* @__PURE__ */ jsxs29($AnchorDialogInputLine, { children: [
+        /* @__PURE__ */ jsx59(
           $AnchorDialogInput,
           {
             type: "text",
@@ -7465,29 +7982,52 @@ function AnchorDialog2({
             onKeyDown
           }
         ),
-        /* @__PURE__ */ jsxs28($DialogButton, { onClick: insertLink2, children: [
-          /* @__PURE__ */ jsx54(Link, {}),
-          /* @__PURE__ */ jsx54(LinkPlus, {})
+        /* @__PURE__ */ jsxs29($DialogButton, { onClick: insertLink2, children: [
+          /* @__PURE__ */ jsx59(Link, {}),
+          /* @__PURE__ */ jsx59(LinkPlus, {})
         ] })
       ] }),
-      /* @__PURE__ */ jsx54($DialogHint, { children: "Enter URL of link" })
+      /* @__PURE__ */ jsx59($DialogHint, { children: "Enter URL of link" })
     ] })
   ] });
 }
 
-// src/toolbar-plugin/items/linkItem.tsx
-var linkItem = {
-  icon: Link,
-  title: t("insertLink"),
-  more: true,
-  hotkey: "mod+k",
-  Component: AnchorDialog2
-};
+// src/toolbar-plugin/items/dialogItems.tsx
+var dialogItems = [
+  {
+    icon: Link,
+    title: t("insertLink"),
+    more: true,
+    hotkey: "mod+k",
+    Component: AnchorDialog2
+  },
+  {
+    icon: Table2,
+    title: t("insertTable"),
+    more: true,
+    Component: TableDialog
+  },
+  {
+    icon: Image,
+    title: t("insertImageFromUrl"),
+    more: true,
+    Component: ImageUrlDialog
+  }
+];
+var expandedDialogItems = dialogItems;
+var compactDialogItems = [
+  {
+    icon: Plus,
+    title: t("insert"),
+    more: true,
+    children: dialogItems
+  }
+];
 
 // src/toolbar-plugin/items/mark-items.tsx
-import { Editor as Editor54 } from "slate";
+import { Editor as Editor57 } from "slate";
 function getMarks(editor) {
-  const marks = Editor54.marks(editor);
+  const marks = Editor57.marks(editor);
   return {
     bold: marks?.bold || false,
     italic: marks?.italic || false,
@@ -7534,7 +8074,14 @@ var primaryMarkItems = [
   }
 ];
 var expandedMarkItems = primaryMarkItems;
-var compactMarkItems = primaryMarkItems;
+var compactMarkItems = [
+  {
+    icon: Bold,
+    title: t("format"),
+    more: true,
+    children: primaryMarkItems
+  }
+];
 
 // src/toolbar-plugin/items/list-items.tsx
 var listItems = [
@@ -7557,18 +8104,19 @@ var listItems = [
     action: (editor) => editor.list.convertTaskList(true)
   }
 ];
-var expandedListItems = listItems;
+var expandedListItems = [...listItems, "divider", ...listDepthItems];
 var compactListItems = [
   {
     icon: ListNumbers,
     title: t("list"),
     more: true,
-    children: listItems
+    children: [...listItems, "divider", ...listDepthItems]
   }
 ];
 
 // src/toolbar-plugin/items/quote-items.tsx
-var quoteItems = [
+import { Editor as Editor58, Transforms as Transforms40 } from "slate";
+var quoteItemsList = [
   {
     icon: Quote,
     title: t("quote"),
@@ -7581,9 +8129,102 @@ var quoteItems = [
       }
     },
     active: (editor) => editor.blockQuotePlugin.isActive()
+  },
+  {
+    icon: DoubleQuote,
+    title: t("increaseQuoteDepth"),
+    action: (editor) => editor.blockQuotePlugin.increaseDepth(),
+    active: (editor) => editor.blockQuotePlugin.canIncreaseDepth()
+  },
+  {
+    icon: CodeBlock2,
+    title: t("codeBlock"),
+    action: (editor) => {
+      const { selection } = editor;
+      const codeBlockEntry = findElementUp(editor, "code-block");
+      if (codeBlockEntry) {
+        const [codeBlock, path] = codeBlockEntry;
+        const textContent = Editor58.string(editor, path);
+        Transforms40.removeNodes(editor, { at: path });
+        Transforms40.insertNodes(
+          editor,
+          {
+            type: "paragraph",
+            children: [{ text: textContent }]
+          },
+          { at: path }
+        );
+        return;
+      }
+      if (selection && JSON.stringify(selection.anchor.path) !== JSON.stringify(selection.focus.path)) {
+        editor.codeBlock.createCodeBlock({ language: "text" });
+        return;
+      }
+      if (selection && (selection.anchor.offset !== selection.focus.offset || JSON.stringify(selection.anchor.path) !== JSON.stringify(selection.focus.path))) {
+        const selectedText = Editor58.string(editor, selection);
+        Transforms40.delete(editor);
+        Transforms40.insertNodes(
+          editor,
+          {
+            type: "code-block",
+            language: "text",
+            children: [
+              {
+                type: "code-block-line",
+                children: [{ text: selectedText }]
+              }
+            ]
+          }
+        );
+        return;
+      }
+      editor.codeBlock.createCodeBlock({ language: "text" });
+    },
+    active: (editor) => !!findElementUp(editor, "code-block")
+  }
+];
+var expandedQuoteItems = quoteItemsList;
+var compactQuoteItems = [
+  {
+    icon: Quote,
+    title: t("quote"),
+    more: true,
+    children: quoteItemsList
   }
 ];
 
+// src/toolbar-plugin/items/raw-mode-item.tsx
+var rawModeItem = {
+  icon: Markdown,
+  title: t("switchToRawMarkdown"),
+  action: (editor) => {
+    if (editor.wysimark && typeof editor.wysimark.toggleRawMode === "function") {
+      editor.wysimark.toggleRawMode();
+    }
+  },
+  // Only show in the toolbar when not in Raw mode
+  show: (editor) => {
+    return editor.wysimark && !editor.wysimark.isRawMode;
+  },
+  active: () => false
+  // Never show as active in the toolbar
+};
+var visualModeItem = {
+  icon: VisualEditor,
+  title: t("switchToVisualEditor"),
+  action: (editor) => {
+    if (editor.wysimark && typeof editor.wysimark.toggleRawMode === "function") {
+      editor.wysimark.toggleRawMode();
+    }
+  },
+  // Only show in the toolbar when in Raw mode
+  show: (editor) => {
+    return !!(editor.wysimark && editor.wysimark.isRawMode);
+  },
+  active: () => false
+  // Never show as active in the toolbar
+};
+
 // src/toolbar-plugin/items/index.tsx
 var largeItems = [
   ...expandedBlockItems,
@@ -7592,11 +8233,12 @@ var largeItems = [
   "divider",
   ...expandedMarkItems,
   "divider",
-  linkItem,
-  ...quoteItems,
-  ...dropdownItems,
+  ...expandedQuoteItems,
+  "divider",
+  ...expandedDialogItems,
   "divider",
-  ...expandedDialogItems
+  rawModeItem,
+  visualModeItem
 ];
 var mediumItems = [
   ...compactBlockItems,
@@ -7605,11 +8247,12 @@ var mediumItems = [
   "divider",
   ...expandedMarkItems,
   "divider",
-  linkItem,
-  ...quoteItems,
-  ...dropdownItems,
+  ...expandedQuoteItems,
+  "divider",
+  ...compactDialogItems,
   "divider",
-  ...compactDialogItems
+  rawModeItem,
+  visualModeItem
 ];
 var smallItems = [
   ...compactBlockItems,
@@ -7618,45 +8261,46 @@ var smallItems = [
   "divider",
   ...compactMarkItems,
   "divider",
-  linkItem,
-  ...quoteItems,
-  ...dropdownItems,
+  ...compactQuoteItems,
   "divider",
-  ...compactDialogItems
+  ...compactDialogItems,
+  "divider",
+  rawModeItem,
+  visualModeItem
 ];
 var initialItems = [...expandedBlockItems, "divider"];
 var itemSets = [largeItems, mediumItems, smallItems];
 
 // src/toolbar-plugin/components/toolbar/toolbar-button.tsx
 import { clsx as clsx9 } from "clsx";
-import { useCallback as useCallback13, useRef as useRef9 } from "react";
+import { useCallback as useCallback14, useRef as useRef10 } from "react";
 import { ReactEditor as ReactEditor14, useSlate as useSlate2, useSlateStatic as useSlateStatic19 } from "slate-react";
-import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
 function ToolbarButton({
   item
 }) {
   const staticEditor = useSlateStatic19();
   const editor = useSlate2();
   const isActive = item.active ? item.active(editor) : false;
-  const ref = useRef9(null);
+  const ref = useRef10(null);
   const tooltip = useTooltip({
     title: item.title,
     hotkey: () => item.hotkey ? formatHotkey(item.hotkey) : void 0
   });
   const menuLayer = useLayer("menu");
-  const openMenu = useCallback13(() => {
+  const openMenu = useCallback14(() => {
     const dest = ref.current;
     const items = item.children;
     const Component = item.Component;
     if (!dest)
       return;
     if (items) {
-      menuLayer.open(() => /* @__PURE__ */ jsx55(Menu, { dest, items, close: menuLayer.close }));
+      menuLayer.open(() => /* @__PURE__ */ jsx60(Menu, { dest, items, close: menuLayer.close }));
     } else if (Component) {
-      menuLayer.open(() => /* @__PURE__ */ jsx55(Component, { dest, close: menuLayer.close }));
+      menuLayer.open(() => /* @__PURE__ */ jsx60(Component, { dest, close: menuLayer.close }));
     }
   }, [item]);
-  const onClick = useCallback13(() => {
+  const onClick = useCallback14(() => {
     if (item.action) {
       item.action(staticEditor);
       ReactEditor14.focus(staticEditor);
@@ -7668,7 +8312,7 @@ function ToolbarButton({
       openMenu();
     }
   }, [menuLayer.layer, item]);
-  const onMouseEnter = useCallback13(
+  const onMouseEnter = useCallback14(
     (e) => {
       tooltip.onMouseEnter(e);
       if (menuLayer.layer)
@@ -7676,7 +8320,7 @@ function ToolbarButton({
     },
     [menuLayer.layer]
   );
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     $ToolbarButton,
     {
       "data-item-type": "button",
@@ -7690,24 +8334,24 @@ function ToolbarButton({
         "--disabled": !isActive && r(item?.title)?.includes("Depth")
       }),
       children: [
-        /* @__PURE__ */ jsx55(item.icon, {}),
-        item.more ? /* @__PURE__ */ jsx55(More, {}) : null
+        /* @__PURE__ */ jsx60(item.icon, {}),
+        item.more ? /* @__PURE__ */ jsx60(More, {}) : null
       ]
     }
   );
 }
 
 // src/toolbar-plugin/components/toolbar/toolbar.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function ToolbarItem({ item }) {
   const editor = useSlateStatic20();
   if (item === "divider") {
-    return /* @__PURE__ */ jsx56($ToolbarDividerContainer, { "data-item-type": "divider", children: /* @__PURE__ */ jsx56($ToolbarDivider, {}) });
+    return /* @__PURE__ */ jsx61($ToolbarDividerContainer, { "data-item-type": "divider", children: /* @__PURE__ */ jsx61($ToolbarDivider, {}) });
   }
   const show = item.show === void 0 ? true : item.show(editor);
   if (!show)
     return null;
-  return /* @__PURE__ */ jsx56(ToolbarButton, { item });
+  return /* @__PURE__ */ jsx61(ToolbarButton, { item });
 }
 function getWidths(toolbar) {
   const button = toolbar.querySelector(
@@ -7732,7 +8376,7 @@ function measureItemSetWidth(items, buttonWidth, dividerWidth) {
   return width;
 }
 function Toolbar() {
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   const [items, setItems] = useState10(initialItems);
   useEffect7(() => {
     const refresh = throttle2(
@@ -7763,7 +8407,7 @@ function Toolbar() {
       window.removeEventListener("resize", refresh);
     };
   }, []);
-  return /* @__PURE__ */ jsx56($ToolbarContainer, { ref, children: /* @__PURE__ */ jsx56($Toolbar, { children: items.map((item, index) => /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx61($ToolbarContainer, { ref, children: /* @__PURE__ */ jsx61($Toolbar, { children: items.map((item, index) => /* @__PURE__ */ jsx61(
     ToolbarItem,
     {
       item
@@ -7773,21 +8417,21 @@ function Toolbar() {
 }
 
 // src/toolbar-plugin/render-editable/index.tsx
-import { jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs31 } from "react/jsx-runtime";
 function renderEditable({ attributes, Editable: Editable3 }) {
-  const outerContainerRef = useRef11(null);
+  const outerContainerRef = useRef12(null);
   const editor = useSlateStatic21();
   const focused = useFocused();
-  const onClickOuterContainer = useCallback14(
+  const onClickOuterContainer = useCallback15(
     (e) => {
       if (e.target !== e.currentTarget)
         return;
-      Transforms37.select(editor, Editor55.end(editor, []));
+      Transforms41.select(editor, Editor59.end(editor, []));
       ReactEditor15.focus(editor);
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx57(Layers, { children: /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx62(Layers, { children: /* @__PURE__ */ jsxs31(
     $OuterContainer,
     {
       ref: outerContainerRef,
@@ -7799,8 +8443,8 @@ function renderEditable({ attributes, Editable: Editable3 }) {
       },
       onClick: onClickOuterContainer,
       children: [
-        /* @__PURE__ */ jsx57(Toolbar, {}),
-        /* @__PURE__ */ jsx57(
+        /* @__PURE__ */ jsx62(Toolbar, {}),
+        /* @__PURE__ */ jsx62(
           Editable3,
           {
             as: $Editable,
@@ -7832,7 +8476,7 @@ var ToolbarPlugin = createPlugin(
 );
 
 // src/trailing-block-plugin/index.tsx
-import { Editor as Editor56, Node as Node10, Path as Path13, Transforms as Transforms38 } from "slate";
+import { Editor as Editor60, Node as Node12, Path as Path14, Transforms as Transforms42 } from "slate";
 var TrailingBlockPlugin = createPlugin(
   (editor) => {
     editor.allowTrailingBlock = true;
@@ -7840,19 +8484,19 @@ var TrailingBlockPlugin = createPlugin(
       name: "trailing-block",
       editor: {
         normalizeNode: (entry) => {
-          if (!Editor56.isEditor(entry[0]))
+          if (!Editor60.isEditor(entry[0]))
             return false;
           const lastPath = [editor.children.length - 1];
-          const lastElement = Node10.child(
+          const lastElement = Node12.child(
             editor,
             editor.children.length - 1
           );
-          if (Editor56.hasBlocks(editor, lastElement) || Editor56.isVoid(editor, lastElement)) {
-            Transforms38.insertNodes(
+          if (Editor60.hasBlocks(editor, lastElement) || Editor60.isVoid(editor, lastElement)) {
+            Transforms42.insertNodes(
               editor,
               { type: "paragraph", children: [{ text: "" }] },
               {
-                at: Path13.next(lastPath)
+                at: Path14.next(lastPath)
               }
             );
           }
@@ -7864,11 +8508,11 @@ var TrailingBlockPlugin = createPlugin(
 );
 
 // src/paste-markdown-plugin/methods/index.ts
-import { Transforms as Transforms39 } from "slate";
+import { Transforms as Transforms43 } from "slate";
 function pasteMarkdown(editor, markdown) {
   const escapedMarkdown = escapeUrlSlashes(markdown);
   const fragment = parse(escapedMarkdown);
-  Transforms39.insertNodes(editor, fragment);
+  Transforms43.insertNodes(editor, fragment);
 }
 function createPasteMarkdownMethods(editor) {
   return {
@@ -7900,7 +8544,7 @@ var PasteMarkdownPlugin = createPlugin(
 );
 
 // src/placeholder-plugin/index.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function renderPlaceholder(props) {
   const nextAttributes = {
     ...props.attributes,
@@ -7910,7 +8554,7 @@ function renderPlaceholder(props) {
       maxWidth: void 0
     }
   };
-  return /* @__PURE__ */ jsx58("span", { ...nextAttributes, children: props.children });
+  return /* @__PURE__ */ jsx63("span", { ...nextAttributes, children: props.children });
 }
 var PlaceholderPlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
@@ -7933,6 +8577,7 @@ var plugins = [
   MarksPlugin,
   InlineCodePlugin,
   BlockQuotePlugin,
+  CodeBlockPlugin,
   TablePlugin,
   HorizontalRulePlugin,
   TrailingBlockPlugin,
@@ -7952,7 +8597,7 @@ var { withSink, SinkEditable: SinkEditable2 } = Sink;
 
 // src/entry/useEditor.tsx
 import { useState as useState11 } from "react";
-import { createEditor, Editor as Editor58, Transforms as Transforms40 } from "slate";
+import { createEditor, Editor as Editor62, Transforms as Transforms44 } from "slate";
 import { withHistory } from "slate-history";
 import { withReact } from "slate-react";
 function useEditor({
@@ -7988,7 +8633,7 @@ function useEditor({
       const documentValue = parse(escapedMarkdown);
       editor2.children = documentValue;
       editor2.selection = null;
-      Transforms40.select(editor2, Editor58.start(editor2, [0]));
+      Transforms44.select(editor2, Editor62.start(editor2, [0]));
     };
     return nextEditor;
   });
@@ -7996,9 +8641,9 @@ function useEditor({
 }
 
 // src/entry/index.tsx
-import { jsx as jsx59, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs32 } from "react/jsx-runtime";
 function renderLeaf({ children, attributes }) {
-  return /* @__PURE__ */ jsx59("span", { ...attributes, children });
+  return /* @__PURE__ */ jsx64("span", { ...attributes, children });
 }
 function Editable2({
   editor,
@@ -8011,10 +8656,10 @@ function Editable2({
 }) {
   const [isRawMode, setIsRawMode] = useState12(false);
   const [rawText, setRawText] = useState12(value);
-  const ignoreNextChangeRef = useRef12(false);
-  const initialValueRef = useRef12(void 0);
-  const prevValueRef = useRef12(void 0);
-  const onThrottledSlateChange = useCallback15(
+  const ignoreNextChangeRef = useRef13(false);
+  const initialValueRef = useRef13(void 0);
+  const prevValueRef = useRef13(void 0);
+  const onThrottledSlateChange = useCallback16(
     throttle3(
       () => {
         const markdown = serialize(editor.children);
@@ -8029,7 +8674,7 @@ function Editable2({
     ),
     [editor, onChange, throttleInMs]
   );
-  const onSlateChange = useCallback15(() => {
+  const onSlateChange = useCallback16(() => {
     if (prevValueRef.current === editor.children) {
       return;
     }
@@ -8053,15 +8698,15 @@ function Editable2({
       const documentValue = parse(valueToProcess);
       editor.children = documentValue;
       editor.selection = null;
-      Transforms41.select(editor, Editor59.start(editor, [0]));
+      Transforms45.select(editor, Editor63.start(editor, [0]));
     }
   }
-  const onSinkeEditableMouseDown = useCallback15(() => {
+  const onSinkeEditableMouseDown = useCallback16(() => {
     if (navigator.userAgent.toLowerCase().includes("firefox")) {
       ReactEditor17.focus(editor);
     }
   }, [editor]);
-  const onBlur = useCallback15(() => {
+  const onBlur = useCallback16(() => {
     onThrottledSlateChange.flush();
   }, [onThrottledSlateChange]);
   const handleRawTextChange = (e) => {
@@ -8069,42 +8714,44 @@ function Editable2({
     setRawText(newText);
     onChange(newText);
   };
-  const applyRawTextToEditor = useCallback15(() => {
+  const applyRawTextToEditor = useCallback16(() => {
     if (rawText !== editor.getMarkdown()) {
       editor.setMarkdown(rawText);
     }
   }, [editor, rawText]);
-  const updateRawTextFromEditor = useCallback15(() => {
+  const updateRawTextFromEditor = useCallback16(() => {
     const currentMarkdown = editor.getMarkdown();
     setRawText(currentMarkdown);
   }, [editor]);
-  const handleRawModeToggle = () => {
+  const handleRawModeToggle = useCallback16(() => {
     if (isRawMode) {
       applyRawTextToEditor();
     } else {
       updateRawTextFromEditor();
     }
     setIsRawMode(!isRawMode);
-  };
-  return /* @__PURE__ */ jsxs31("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx59("div", { style: { position: "absolute", top: "5px", right: "25px", zIndex: 10 }, children: /* @__PURE__ */ jsx59(
+  }, [isRawMode, applyRawTextToEditor, updateRawTextFromEditor]);
+  editor.wysimark.isRawMode = isRawMode;
+  editor.wysimark.toggleRawMode = handleRawModeToggle;
+  return /* @__PURE__ */ jsxs32("div", { style: { position: "relative" }, children: [
+    isRawMode && /* @__PURE__ */ jsx64("div", { style: { position: "absolute", top: "5px", right: "25px", zIndex: 10 }, children: /* @__PURE__ */ jsx64(
       "div",
       {
         onClick: handleRawModeToggle,
         style: {
           background: "none",
-          border: isRawMode ? "1px solid #4a90e2" : "1px solid transparent",
+          border: "1px solid #4a90e2",
           cursor: "pointer",
           padding: "6px",
           borderRadius: "4px",
-          backgroundColor: isRawMode ? "rgba(74, 144, 226, 0.1)" : "transparent",
-          boxShadow: isRawMode ? "0 1px 3px rgba(0, 0, 0, 0.1)" : "none",
+          backgroundColor: "rgba(74, 144, 226, 0.1)",
+          boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
           transition: "all 0.2s ease-in-out",
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        title: isRawMode ? t("switchToVisualEditor") : t("switchToRawMarkdown"),
+        title: t("switchToVisualEditor"),
         role: "button",
         tabIndex: 0,
         onKeyDown: (e) => {
@@ -8113,54 +8760,10 @@ function Editable2({
             e.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsxs31("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-          /* @__PURE__ */ jsx59(
-            "rect",
-            {
-              x: "3",
-              y: "3",
-              width: "18",
-              height: "18",
-              rx: "2",
-              stroke: isRawMode ? "#4a90e2" : "currentColor",
-              strokeWidth: "1.5",
-              fill: isRawMode ? "rgba(74, 144, 226, 0.05)" : "transparent"
-            }
-          ),
-          /* @__PURE__ */ jsx59(
-            "path",
-            {
-              d: "M7 15V9L10 12L13 9V15",
-              stroke: isRawMode ? "#4a90e2" : "currentColor",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ),
-          /* @__PURE__ */ jsx59(
-            "path",
-            {
-              d: "M16 9H18V15",
-              stroke: isRawMode ? "#4a90e2" : "currentColor",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          ),
-          /* @__PURE__ */ jsx59(
-            "path",
-            {
-              d: "M16 12H18",
-              stroke: isRawMode ? "#4a90e2" : "currentColor",
-              strokeWidth: "1.5",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        ] })
+        children: /* @__PURE__ */ jsx64("span", { style: { color: "#4a90e2", fontSize: "1.25em" }, children: /* @__PURE__ */ jsx64(VisualEditor, {}) })
       }
     ) }),
-    /* @__PURE__ */ jsx59("div", { style: { display: isRawMode ? "block" : "none", textAlign: "center" }, children: /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx64("div", { style: { display: isRawMode ? "block" : "none", textAlign: "center" }, children: /* @__PURE__ */ jsx64(
       "textarea",
       {
         value: unescapeUrlSlashes(rawText).replace(/&nbsp;/g, ""),
@@ -8185,13 +8788,13 @@ function Editable2({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx59("div", { style: { display: isRawMode ? "none" : "block" }, children: /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx64("div", { style: { display: isRawMode ? "none" : "block" }, children: /* @__PURE__ */ jsx64(
       Slate2,
       {
         editor,
         value: initialValueRef.current,
         onChange: onSlateChange,
-        children: /* @__PURE__ */ jsx59(
+        children: /* @__PURE__ */ jsx64(
           SinkEditable2,
           {
             renderLeaf,
@@ -8208,13 +8811,13 @@ function Editable2({
 }
 
 // src/index.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function StandaloneEditor({
   standaloneOptions: { onChange, placeholder, className, ...options },
   standaloneMethodsRef
 }) {
   const [markdown, setMarkdown] = useState13(options.initialMarkdown || "");
-  const markdownRef = useRef13(markdown);
+  const markdownRef = useRef14(markdown);
   const editor = useEditor(options);
   markdownRef.current = markdown;
   useImperativeHandle(
@@ -8232,7 +8835,7 @@ function StandaloneEditor({
     },
     [markdownRef, setMarkdown]
   );
-  const onChangeEditable = useCallback16(
+  const onChangeEditable = useCallback17(
     (markdown2) => {
       markdownRef.current = markdown2;
       setMarkdown(markdown2);
@@ -8240,7 +8843,7 @@ function StandaloneEditor({
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx65(
     Editable2,
     {
       editor,
@@ -8255,7 +8858,7 @@ function createWysimark(containerElement, options) {
   const standaloneMethodsRef = createRef();
   const root = createRoot(containerElement);
   root.render(
-    /* @__PURE__ */ jsx60(
+    /* @__PURE__ */ jsx65(
       StandaloneEditor,
       {
         standaloneMethodsRef,