wysimark-lite 0.24.0 → 0.25.1

package/dist/index.mjs

@@ -3,17 +3,17 @@
 // src/index.tsx
 import {
   createRef,
-  useCallback as useCallback17,
+  useCallback as useCallback19,
   useImperativeHandle,
-  useRef as useRef13,
+  useRef as useRef15,
   useState as useState14
 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/entry/index.tsx
 import throttle3 from "lodash.throttle";
-import { useCallback as useCallback16, useRef as useRef12, useState as useState13 } from "react";
-import { Editor as Editor66, Transforms as Transforms49 } from "slate";
+import { useCallback as useCallback18, useRef as useRef14, useState as useState13 } from "react";
+import { Editor as Editor66, Transforms as Transforms48 } from "slate";
 import { ReactEditor as ReactEditor18, Slate as Slate2 } from "slate-react";
 
 // src/convert/parse/index.ts
@@ -87,17 +87,22 @@ function replace($0, $1) {
 // src/convert/parse/custom-gfm.ts
 import { gfm } from "micromark-extension-gfm";
 import { gfmToMarkdown } from "mdast-util-gfm";
+function wrapHandler(originalHandler) {
+  if (!originalHandler)
+    return void 0;
+  return function(token) {
+    if (!this.data) {
+      this.data = {};
+    }
+    return originalHandler.call(this, token);
+  };
+}
 function customRemarkGfm() {
   return function() {
     if (!this) {
       return;
     }
-    if (!this.data) {
-      this.data = {};
-    } else if (typeof this.data === "function") {
-      this.data();
-    }
-    const data = typeof this.data === "function" ? this.data() : this.data;
+    const data = this.data();
     const micromarkExtensions = data.micromarkExtensions || (data.micromarkExtensions = []);
     const fromMarkdownExtensions = data.fromMarkdownExtensions || (data.fromMarkdownExtensions = []);
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
@@ -105,29 +110,13 @@ function customRemarkGfm() {
     const patchedFromMarkdown = function() {
       const extension = gfmTableFromMarkdown();
       if (extension.enter) {
-        const originalEnterTable = extension.enter.table;
-        if (originalEnterTable) {
-          extension.enter.table = function(token) {
-            if (!this.data) {
-              this.data = {};
-            }
-            originalEnterTable.call(this, token);
-            this.data.inTable = true;
-          };
+        for (const key2 of Object.keys(extension.enter)) {
+          extension.enter[key2] = wrapHandler(extension.enter[key2]);
         }
       }
       if (extension.exit) {
-        const originalExitTable = extension.exit.table;
-        if (originalExitTable) {
-          extension.exit.table = function(token) {
-            if (!this.data) {
-              this.data = {};
-            }
-            originalExitTable.call(this, token);
-            if (this.data) {
-              this.data.inTable = void 0;
-            }
-          };
+        for (const key2 of Object.keys(extension.exit)) {
+          extension.exit[key2] = wrapHandler(extension.exit[key2]);
         }
       }
       return extension;
@@ -240,11 +229,12 @@ function isPlainSpace(segment) {
 }
 
 // src/convert/serialize/serialize-line/utils/mark-utils/mark-convert-utils.ts
-var MARK_KEY_TO_TOKEN = {
+var MARK_KEY_TO_OPEN_TOKEN = {
   bold: "**",
   italic: "_",
   // ins: "++",
   strike: "~~",
+  highlight: "<mark>",
   /**
    * IMPORTANT!
    *
@@ -256,25 +246,41 @@ var MARK_KEY_TO_TOKEN = {
    *
    * This is handled in the `serializeLine` code.
    */
-  code: "",
-  /**
-   * Highlight is handled specially in `serializeLine` using <mark> tags.
-   */
-  highlight: ""
+  code: ""
 };
-function convertMarkToSymbol(mark) {
-  if (mark in MARK_KEY_TO_TOKEN)
-    return MARK_KEY_TO_TOKEN[mark];
-  return "";
+var MARK_KEY_TO_CLOSE_TOKEN = {
+  bold: "**",
+  italic: "_",
+  // ins: "++",
+  strike: "~~",
+  highlight: "</mark>",
+  code: ""
+};
+function convertMarkToOpenSymbol(mark) {
+  if (mark in MARK_KEY_TO_OPEN_TOKEN)
+    return MARK_KEY_TO_OPEN_TOKEN[mark];
+  throw new Error(
+    `Could not find mark ${JSON.stringify(mark)} in MARK_KEY_TO_OPEN_TOKEN lookup`
+  );
+}
+function convertMarkToCloseSymbol(mark) {
+  if (mark in MARK_KEY_TO_CLOSE_TOKEN)
+    return MARK_KEY_TO_CLOSE_TOKEN[mark];
+  throw new Error(
+    `Could not find mark ${JSON.stringify(mark)} in MARK_KEY_TO_CLOSE_TOKEN lookup`
+  );
+}
+function convertMarksToOpenSymbols(marks) {
+  return marks.map(convertMarkToOpenSymbol).join("");
 }
-function convertMarksToSymbolsExceptCode(marks) {
-  return marks.map(convertMarkToSymbol).join("");
+function convertMarksToCloseSymbols(marks) {
+  return marks.map(convertMarkToCloseSymbol).join("");
 }
 
 // src/convert/serialize/serialize-line/utils/mark-utils/mark-get-utils.ts
 import { Text as SlateText } from "slate";
 function getMarksFromText(text) {
-  const { text: _, ...marks } = text;
+  const { text: _textContent, ...marks } = text;
   return Object.keys(marks);
 }
 function getMarksFromSegment(segment) {
@@ -325,6 +331,7 @@ var ORDERED_MARK_KEYS = [
   "italic",
   "underline",
   "strike",
+  "highlight",
   "code"
 ];
 function sortMarks(marks) {
@@ -559,6 +566,13 @@ function parseInlineImage(image) {
 }
 
 // src/convert/parse/parse-phrasing-content/parse-phrasing-content.ts
+function parseInlineHtml(htmlValue, marks) {
+  const markMatch = htmlValue.match(/^<mark>(.+?)<\/mark>$/s);
+  if (markMatch) {
+    return [{ text: markMatch[1], ...marks, highlight: true }];
+  }
+  return [{ text: htmlValue, code: true }];
+}
 function parsePhrasingContents(phrasingContents, marks = {}) {
   const segments = [];
   for (const phrasingContent of phrasingContents) {
@@ -581,13 +595,8 @@ function parsePhrasingContent(phrasingContent, marks = {}) {
       });
     case "footnoteReference":
       return [{ text: `[${phrasingContent.identifier}]` }];
-    case "html": {
-      const markMatch = phrasingContent.value.match(/^<mark>(.*)<\/mark>$/s);
-      if (markMatch) {
-        return [{ text: markMatch[1], ...marks, highlight: true }];
-      }
-      return [{ text: phrasingContent.value, code: true }];
-    }
+    case "html":
+      return parseInlineHtml(phrasingContent.value, marks);
     case "image":
       return parseInlineImage(phrasingContent);
     case "inlineCode": {
@@ -1372,19 +1381,11 @@ function serializeLine(inputSegments, leadingMarks = [], trailingMarks = []) {
       substrings.push(segment.text);
       continue;
     }
-    substrings.push(convertMarksToSymbolsExceptCode(leadingDiff.add));
-    const hasHighlightOpen = leadingDiff.add.includes("highlight");
-    if (hasHighlightOpen) {
-      substrings.push("<mark>");
-    }
+    substrings.push(convertMarksToOpenSymbols(leadingDiff.add));
     substrings.push(serializeSegment(segment));
     const nextMarks = getNextMarks(segments, i, trailingMarks);
     const trailingDiff = diffMarks(leadingDiff.nextOrderedMarks, nextMarks);
-    const hasHighlightClose = trailingDiff.remove.includes("highlight");
-    if (hasHighlightClose) {
-      substrings.push("</mark>");
-    }
-    substrings.push(convertMarksToSymbolsExceptCode(trailingDiff.remove));
+    substrings.push(convertMarksToCloseSymbols(trailingDiff.remove));
     leadingDiff = trailingDiff;
   }
   return substrings.join("");
@@ -1548,13 +1549,13 @@ function serializeElements(elements) {
   return replaceConsecutiveNewlines(replaceLeadingNewlines(joined)).trim();
 }
 function replaceLeadingNewlines(input) {
-  return input.replace(/^\n\n/g, "&nbsp;\n\n");
+  return input.replace(/^\n\n/g, "\\\n\n");
 }
 function replaceConsecutiveNewlines(input) {
   return input.replace(/(\n{4,})/g, (match) => {
     const newlineCount = match.length;
     const count = Math.floor((newlineCount - 2) / 2);
-    return "\n\n" + Array(count).fill("&nbsp;").join("\n\n") + "\n\n";
+    return "\n\n" + Array(count).fill("\\").join("\n\n") + "\n\n";
   });
 }
 
@@ -1612,7 +1613,11 @@ var translations = {
     imageSourceUrl: "URL",
     imageSourceFile: "\u30D5\u30A1\u30A4\u30EB",
     selectFile: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E",
-    uploading: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u4E2D..."
+    uploading: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u4E2D...",
+    saving: "\u4FDD\u5B58\u4E2D...",
+    uploadComplete: "\u30A2\u30C3\u30D7\u30ED\u30FC\u30C9\u5B8C\u4E86",
+    vaultPath: "\u4FDD\u5B58\u5148\u30D1\u30B9\uFF1A",
+    vaultPathHint: "vault\u5185\u306E\u4FDD\u5B58\u5148\u30D1\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"
   },
   en: {
     bold: "Bold",
@@ -1660,7 +1665,11 @@ var translations = {
     imageSourceUrl: "URL",
     imageSourceFile: "File",
     selectFile: "Select File",
-    uploading: "Uploading..."
+    uploading: "Uploading...",
+    saving: "Saving...",
+    uploadComplete: "Upload Complete",
+    vaultPath: "Save Path:",
+    vaultPathHint: "Enter the path within the vault to save the file"
   }
 };
 var getLanguage = () => {
@@ -1700,8 +1709,8 @@ function defined(value) {
 }
 
 // src/sink/editable/create-decorate.ts
-function createDecorate(originalFn, plugins) {
-  const fns = plugins.map((plugin) => plugin.editableProps?.decorate).filter(defined);
+function createDecorate(originalFn, plugins2) {
+  const fns = plugins2.map((plugin) => plugin.editableProps?.decorate).filter(defined);
   return function(entry) {
     const ranges = [];
     for (const fn of fns) {
@@ -1717,8 +1726,8 @@ function createDecorate(originalFn, plugins) {
 // src/sink/editable/create-editable.tsx
 import { Editable } from "slate-react";
 import { jsx } from "react/jsx-runtime";
-function createEditable(plugins) {
-  const fns = plugins.map((plugin) => plugin.renderEditable).filter(defined);
+function createEditable(plugins2) {
+  const fns = plugins2.map((plugin) => plugin.renderEditable).filter(defined);
   let CurrentRenderEditable = (props) => /* @__PURE__ */ jsx(Editable, { ...props });
   for (const fn of fns) {
     const PrevRenderEditable = CurrentRenderEditable;
@@ -1733,9 +1742,9 @@ function createEditable(plugins) {
 }
 
 // src/sink/editable/create-handler.ts
-function extractEditableFns(plugins, key2) {
+function extractEditableFns(plugins2, key2) {
   const fns = [];
-  for (const plugin of plugins) {
+  for (const plugin of plugins2) {
     const maybeFn = plugin.editableProps?.[key2];
     if (maybeFn)
       fns.push(maybeFn);
@@ -1751,26 +1760,26 @@ function createHandlerFn(fns, originalFn) {
     originalFn?.(event);
   };
 }
-var createOnKeyDown = (originalFn, plugins) => {
-  const fns = extractEditableFns(plugins, "onKeyDown");
+var createOnKeyDown = (originalFn, plugins2) => {
+  const fns = extractEditableFns(plugins2, "onKeyDown");
   return createHandlerFn(fns, originalFn);
 };
-var createOnKeyUp = (originalFn, plugins) => {
-  const fns = extractEditableFns(plugins, "onKeyUp");
+var createOnKeyUp = (originalFn, plugins2) => {
+  const fns = extractEditableFns(plugins2, "onKeyUp");
   return createHandlerFn(fns, originalFn);
 };
-var createOnPaste = (originalFn, plugins) => {
-  const fns = extractEditableFns(plugins, "onPaste");
+var createOnPaste = (originalFn, plugins2) => {
+  const fns = extractEditableFns(plugins2, "onPaste");
   return createHandlerFn(fns, originalFn);
 };
-var createOnDrop = (originalFn, plugins) => {
-  const fns = extractEditableFns(plugins, "onDrop");
+var createOnDrop = (originalFn, plugins2) => {
+  const fns = extractEditableFns(plugins2, "onDrop");
   return createHandlerFn(fns, originalFn);
 };
 
 // src/sink/editable/create-render-element.ts
-function createRenderElement(originalFn, plugins) {
-  const fns = plugins.map((plugin) => plugin.editableProps?.renderElement).filter(defined);
+function createRenderElement(originalFn, plugins2) {
+  const fns = plugins2.map((plugin) => plugin.editableProps?.renderElement).filter(defined);
   return function renderElement5(renderElementProps) {
     for (const fn of fns) {
       const result = fn(renderElementProps);
@@ -1788,11 +1797,11 @@ function createRenderElement(originalFn, plugins) {
 
 // src/sink/editable/create-render-leaf.ts
 import { cloneElement } from "react";
-function createRenderLeaf(originalFn, plugins) {
+function createRenderLeaf(originalFn, plugins2) {
   if (originalFn === void 0) {
     throw new Error(`renderLeaf was not defined on SinkEditable`);
   }
-  const fns = plugins.map((plugin) => plugin.editableProps?.renderLeaf).filter(defined).reverse();
+  const fns = plugins2.map((plugin) => plugin.editableProps?.renderLeaf).filter(defined).reverse();
   return function(renderLeafProps) {
     let value = originalFn({
       ...renderLeafProps,
@@ -1821,10 +1830,10 @@ function createRenderLeaf(originalFn, plugins) {
 }
 
 // src/sink/editable/create-render-placeholder.tsx
-function createRenderPlaceholder(originalFn, plugins) {
+function createRenderPlaceholder(originalFn, plugins2) {
   if (originalFn)
     return originalFn;
-  const fns = plugins.map((plugin) => plugin.editableProps?.renderPlaceholder).filter(defined);
+  const fns = plugins2.map((plugin) => plugin.editableProps?.renderPlaceholder).filter(defined);
   if (fns.length === 0)
     return void 0;
   return function(renderPlaceholderProps) {
@@ -1858,16 +1867,16 @@ function SinkEditable(originalProps) {
   useEffect(() => {
     Editor.normalize(editor, { force: true });
   }, []);
-  const { plugins } = editor.sink;
+  const { plugins: plugins2 } = editor.sink;
   const nextProps = useMemo(
     () => ({
       ...originalProps,
-      decorate: createDecorate(originalProps.decorate, plugins),
-      renderElement: createRenderElement(originalProps.renderElement, plugins),
-      renderLeaf: createRenderLeaf(originalProps.renderLeaf, plugins),
+      decorate: createDecorate(originalProps.decorate, plugins2),
+      renderElement: createRenderElement(originalProps.renderElement, plugins2),
+      renderLeaf: createRenderLeaf(originalProps.renderLeaf, plugins2),
       renderPlaceholder: createRenderPlaceholder(
         originalProps.renderPlaceholder,
-        plugins
+        plugins2
       ),
       /**
        * NOTE: We skip `onKeyUp` as it is deprecated. If somebody needs it in new
@@ -1875,35 +1884,38 @@ function SinkEditable(originalProps) {
        *
        * https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event
        */
-      onKeyDown: createOnKeyDown(originalProps.onKeyDown, plugins),
-      onKeyUp: createOnKeyUp(originalProps.onKeyUp, plugins),
-      onPaste: createOnPaste(originalProps.onPaste, plugins),
-      onDrop: createOnDrop(originalProps.onDrop, plugins)
+      onKeyDown: createOnKeyDown(originalProps.onKeyDown, plugins2),
+      onKeyUp: createOnKeyUp(originalProps.onKeyUp, plugins2),
+      onPaste: createOnPaste(originalProps.onPaste, plugins2),
+      onDrop: createOnDrop(originalProps.onDrop, plugins2)
     }),
     Object.values(originalProps)
   );
-  const NextEditable = useMemo(() => createEditable(plugins), [plugins]);
+  const NextEditable = useMemo(() => createEditable(plugins2), [plugins2]);
   return /* @__PURE__ */ jsx2(NextEditable, { ...nextProps });
 }
 
 // src/sink/editor/create-boolean-action.ts
-function createBooleanAction(editor, actionKey, plugins) {
+function createBooleanAction(editor, actionKey, plugins2) {
   const originalAction = editor[actionKey];
-  const actionPlugins = plugins.filter((plugin) => plugin.editor?.[actionKey]);
+  const actionPlugins = plugins2.filter((plugin) => plugin.editor?.[actionKey]);
   return function nextBooleanAction(node) {
     for (const plugin of actionPlugins) {
-      const result = plugin.editor?.[actionKey]?.(node);
+      const editorPlugin = plugin.editor;
+      const actionFn = editorPlugin?.[actionKey];
+      const result = actionFn?.(node);
       if (typeof result === "boolean")
         return result;
     }
-    return originalAction(node);
+    const origFn = originalAction;
+    return origFn(node);
   };
 }
 
 // src/sink/editor/create-void-action.ts
-function createVoidAction(editor, actionKey, plugins) {
+function createVoidAction(editor, actionKey, plugins2) {
   const originalAction = editor[actionKey];
-  const actionPlugins = plugins.filter((plugin) => plugin.editor?.[actionKey]);
+  const actionPlugins = plugins2.filter((plugin) => plugin.editor?.[actionKey]);
   return function nextVoidAction(...args) {
     let isHandled = false;
     const afterHandledCallbacks = [];
@@ -1927,10 +1939,10 @@ function createVoidAction(editor, actionKey, plugins) {
 function createWithSink(pluginFns) {
   return (originalEditor, options) => {
     const editor = originalEditor;
-    const plugins = pluginFns.map(
+    const plugins2 = pluginFns.map(
       (plugin) => plugin(editor, options, { createPolicy: (x) => x })
     );
-    editor.sink = { plugins };
+    editor.sink = { plugins: plugins2 };
     editor.isMaster = "isMaster" in editor ? editor.isMaster : () => false;
     editor.isSlave = "isSlave" in editor ? editor.isSlave : () => false;
     editor.isStandalone = "isStandalone" in editor ? editor.isStandalone : () => false;
@@ -1938,22 +1950,22 @@ function createWithSink(pluginFns) {
       /**
        * void
        */
-      normalizeNode: createVoidAction(editor, "normalizeNode", plugins),
-      deleteBackward: createVoidAction(editor, "deleteBackward", plugins),
-      deleteForward: createVoidAction(editor, "deleteForward", plugins),
-      deleteFragment: createVoidAction(editor, "deleteFragment", plugins),
-      insertBreak: createVoidAction(editor, "insertBreak", plugins),
-      insertFragment: createVoidAction(editor, "insertFragment", plugins),
-      insertNode: createVoidAction(editor, "insertNode", plugins),
-      insertText: createVoidAction(editor, "insertText", plugins),
+      normalizeNode: createVoidAction(editor, "normalizeNode", plugins2),
+      deleteBackward: createVoidAction(editor, "deleteBackward", plugins2),
+      deleteForward: createVoidAction(editor, "deleteForward", plugins2),
+      deleteFragment: createVoidAction(editor, "deleteFragment", plugins2),
+      insertBreak: createVoidAction(editor, "insertBreak", plugins2),
+      insertFragment: createVoidAction(editor, "insertFragment", plugins2),
+      insertNode: createVoidAction(editor, "insertNode", plugins2),
+      insertText: createVoidAction(editor, "insertText", plugins2),
       /**
        * boolean
        */
-      isInline: createBooleanAction(editor, "isInline", plugins),
-      isVoid: createBooleanAction(editor, "isVoid", plugins),
-      isMaster: createBooleanAction(editor, "isMaster", plugins),
-      isSlave: createBooleanAction(editor, "isSlave", plugins),
-      isStandalone: createBooleanAction(editor, "isStandalone", plugins)
+      isInline: createBooleanAction(editor, "isInline", plugins2),
+      isVoid: createBooleanAction(editor, "isVoid", plugins2),
+      isMaster: createBooleanAction(editor, "isMaster", plugins2),
+      isSlave: createBooleanAction(editor, "isSlave", plugins2),
+      isStandalone: createBooleanAction(editor, "isStandalone", plugins2)
     });
     return editor;
   };
@@ -2020,8 +2032,9 @@ function standardizeNodeMatcher(matchNode) {
     return (node) => Element4.isElement(node) && node.type === matchNode;
   if (Array.isArray(matchNode))
     return (node) => Element4.isElement(node) && matchNode.includes(node.type);
+  const exhaustiveCheck = matchNode;
   throw new Error(
-    `Expected matchNode to be a function, string or array but is ${matchNode}`
+    `Expected matchNode to be a function, string or array but is ${exhaustiveCheck}`
   );
 }
 
@@ -2191,13 +2204,13 @@ function forceNormalizePath(editor, path) {
   Editor8.withoutNormalizing(editor, () => {
     Transforms2.setNodes(
       editor,
-      // @ts-ignore
+      // @ts-expect-error - intentional dummy property for normalization
       { __DOESNT_MATTER_JUST_TO_START_NORMALIZING__: "123" },
       { at: path }
     );
     Transforms2.setNodes(
       editor,
-      // @ts-ignore
+      // @ts-expect-error - intentional dummy property for normalization
       { __DOESNT_MATTER_JUST_TO_START_NORMALIZING__: null },
       { at: path }
     );
@@ -2305,7 +2318,7 @@ function isUrl(s) {
   let url;
   try {
     url = new URL(s);
-  } catch (_) {
+  } catch {
     return false;
   }
   return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "mailto:";
@@ -2407,7 +2420,7 @@ function normalizeNode(editor, entry) {
 
 // src/anchor-plugin/render-element/anchor.tsx
 import { clsx } from "clsx";
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect3, useRef as useRef5 } from "react";
 import { useSelected, useSlate } from "slate-react";
 
 // src/use-layer/layers.tsx
@@ -2527,8 +2540,8 @@ var $ProgressBarFill = styled2("span")`
 `;
 
 // src/anchor-plugin/render-element/AnchorDialog.tsx
-import styled14 from "@emotion/styled";
-import { useCallback as useCallback4 } from "react";
+import styled15 from "@emotion/styled";
+import { useCallback as useCallback5, useState as useState4 } from "react";
 import { useSlateStatic as useSlateStatic4 } from "slate-react";
 
 // src/shared-overlays/components/CloseMask/index.tsx
@@ -2738,10 +2751,21 @@ function useAbsoluteReposition(elementLikeRecord, fn) {
 function positionInside(src, container, pos, { margin = 0 } = {}) {
   if (src == null)
     return { ...pos, left: -1024 };
-  const right = pos.left + src.width;
-  if (right <= container.right - margin)
-    return pos;
-  return { ...pos, left: container.right - src.width - margin };
+  const { top } = pos;
+  let { left } = pos;
+  const containerWidth = container.right - container.left - margin * 2;
+  if (src.width >= containerWidth) {
+    left = container.left + margin;
+  } else {
+    const right = left + src.width;
+    if (right > container.right - margin) {
+      left = container.right - src.width - margin;
+    }
+    if (left < container.left + margin) {
+      left = container.left + margin;
+    }
+  }
+  return { left, top };
 }
 
 // src/toolbar-plugin/styles/anchor-dialog-styles.ts
@@ -2779,8 +2803,9 @@ var $Panel = styled4(SinkReset)`
 
 // src/toolbar-plugin/styles/anchor-dialog-styles.ts
 var $AnchorDialog = styled5($Panel)`
-  padding: 1em;
   width: 24em;
+  padding: 0;
+  overflow: hidden;
 `;
 var $AnchorDialogInputLine = styled5("div")`
   display: flex;
@@ -2791,6 +2816,7 @@ var $AnchorDialogInput = styled5("input")`
   padding: 0.5em 0.75em;
   border-radius: 0.25em;
   color: var(--shade-700);
+  background: var(--shade-50);
   border: 1px solid var(--shade-300);
   font-size: 0.9375em;
   &:focus {
@@ -2855,6 +2881,7 @@ var $Menu = styled8($Panel)`
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   transition: all 200ms;
+  min-width: 12em;
   /**
    * Prevent clicks from stealing focus from the editor
    */
@@ -2884,9 +2911,10 @@ var $MenuItem = styled8("div")`
     }
   }
   .--title {
-    flex: 1 0;
+    flex: 1 1 auto;
     font-size: 0.875em;
     color: var(--shade-800);
+    white-space: nowrap;
   }
   .--hotkey {
     flex: 0 0;
@@ -3190,8 +3218,8 @@ function useTooltip({
 }
 
 // src/anchor-plugin/render-element/AnchorEditDialog.tsx
-import styled13 from "@emotion/styled";
-import { useCallback as useCallback3, useRef as useRef3, useState as useState3 } from "react";
+import styled14 from "@emotion/styled";
+import { useCallback as useCallback4, useRef as useRef4, useState as useState3 } from "react";
 import { Node as Node6 } from "slate";
 import { useSlateStatic as useSlateStatic3 } from "slate-react";
 
@@ -3223,6 +3251,7 @@ var $Textarea = styled12("input")`
   padding: 0.5em 0.75em;
   border-radius: 0.25em;
   color: var(--shade-700);
+  background: var(--shade-50);
   font-family: inherit;
   border: 1px solid var(--shade-300);
   font-size: 0.9375em;
@@ -3236,6 +3265,7 @@ var $Input = styled12("input")`
   padding: 0.5em 0.75em;
   border-radius: 0.25em;
   color: var(--shade-700);
+  background: var(--shade-50);
   border: 1px solid var(--shade-300);
   font-size: 0.9375em;
   &:focus {
@@ -3284,12 +3314,96 @@ var $CancelButton = styled12($BaseButton)`
   }
 `;
 
+// src/toolbar-plugin/components/dialog/DraggableHeader.tsx
+import { useRef as useRef3, useCallback as useCallback3 } from "react";
+import styled13 from "@emotion/styled";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var $DragHandle = styled13.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 0;
+  cursor: grab;
+  background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
+  border-bottom: 1px solid #ddd;
+  border-radius: 4px 4px 0 0;
+  user-select: none;
+  touch-action: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
+var $DragIndicator = styled13.div`
+  width: 32px;
+  height: 4px;
+  background: #ccc;
+  border-radius: 2px;
+`;
+function DraggableHeader({ onDrag }) {
+  const startPos = useRef3(null);
+  const handleStart = useCallback3((clientX, clientY) => {
+    startPos.current = { x: clientX, y: clientY };
+  }, []);
+  const handleMove = useCallback3((clientX, clientY) => {
+    if (!startPos.current)
+      return;
+    const deltaX = clientX - startPos.current.x;
+    const deltaY = clientY - startPos.current.y;
+    startPos.current = { x: clientX, y: clientY };
+    onDrag(deltaX, deltaY);
+  }, [onDrag]);
+  const handleEnd = useCallback3(() => {
+    startPos.current = null;
+  }, []);
+  const onMouseDown = useCallback3((e) => {
+    e.preventDefault();
+    handleStart(e.clientX, e.clientY);
+    const onMouseMove = (e2) => {
+      handleMove(e2.clientX, e2.clientY);
+    };
+    const onMouseUp = () => {
+      handleEnd();
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }, [handleStart, handleMove, handleEnd]);
+  const onTouchStart = useCallback3((e) => {
+    if (e.touches.length !== 1)
+      return;
+    const touch = e.touches[0];
+    handleStart(touch.clientX, touch.clientY);
+  }, [handleStart]);
+  const onTouchMove = useCallback3((e) => {
+    if (e.touches.length !== 1)
+      return;
+    const touch = e.touches[0];
+    handleMove(touch.clientX, touch.clientY);
+  }, [handleMove]);
+  const onTouchEnd = useCallback3(() => {
+    handleEnd();
+  }, [handleEnd]);
+  return /* @__PURE__ */ jsx11(
+    $DragHandle,
+    {
+      onMouseDown,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      children: /* @__PURE__ */ jsx11($DragIndicator, {})
+    }
+  );
+}
+
 // src/anchor-plugin/render-element/AnchorEditDialog.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
-var $AnchorEditDialog = styled13($Panel)`
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var $AnchorEditDialog = styled14($Panel)`
   position: absolute;
   width: 20em;
-  padding: 1em;
+  padding: 0;
+  overflow: hidden;
 `;
 function AnchorEditDialog({
   destAnchor,
@@ -3297,7 +3411,11 @@ function AnchorEditDialog({
   element
 }) {
   const dialog = useLayer("dialog");
-  const style = useAbsoluteReposition(
+  const [dragOffset, setDragOffset] = useState3({ x: 0, y: 0 });
+  const handleDrag = useCallback4((deltaX, deltaY) => {
+    setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
+  }, []);
+  const baseStyle = useAbsoluteReposition(
     { destAnchor, destStartEdge },
     ({ destAnchor: destAnchor2, destStartEdge: destStartEdge2 }) => {
       return {
@@ -3306,23 +3424,28 @@ function AnchorEditDialog({
       };
     }
   );
+  const style = {
+    ...baseStyle,
+    left: baseStyle.left + dragOffset.x,
+    top: baseStyle.top + dragOffset.y
+  };
   const editor = useSlateStatic3();
   const [href, setHref] = useState3(element.href);
   const [text, setText] = useState3(Node6.string(element));
   const [title, setTitle] = useState3(element.title || "");
-  const formRef = useRef3({ href, text, title });
+  const formRef = useRef4({ href, text, title });
   formRef.current = { href, text, title };
-  const handleHrefChange = useCallback3((e) => {
+  const handleHrefChange = useCallback4((e) => {
     setHref(e.target.value);
   }, []);
-  const handleTextChange = useCallback3((e) => {
+  const handleTextChange = useCallback4((e) => {
     setText(e.target.value);
   }, []);
-  const handleTitleChange = useCallback3((e) => {
+  const handleTitleChange = useCallback4((e) => {
     setTitle(e.target.value);
   }, []);
-  const openAnchorDialog = useCallback3(() => {
-    dialog.open(() => /* @__PURE__ */ jsx11(
+  const openAnchorDialog = useCallback4(() => {
+    dialog.open(() => /* @__PURE__ */ jsx12(
       AnchorDialog,
       {
         destAnchor,
@@ -3331,45 +3454,49 @@ function AnchorEditDialog({
       }
     ));
   }, [destAnchor, destStartEdge, element]);
-  const handleSubmit = useCallback3(() => {
+  const handleSubmit = useCallback4(() => {
     const { href: href2, text: text2, title: title2 } = formRef.current;
     editor.anchor.editLink({ href: href2, text: text2, title: title2 }, { at: element });
     openAnchorDialog();
   }, [openAnchorDialog]);
   return /* @__PURE__ */ jsxs5($AnchorEditDialog, { contentEditable: false, style, children: [
-    /* @__PURE__ */ jsxs5($FormGroup, { children: [
-      /* @__PURE__ */ jsx11($FormCaption, { children: t("linkUrl") }),
-      /* @__PURE__ */ jsx11($Input, { type: "text", value: href, onChange: handleHrefChange })
-    ] }),
-    /* @__PURE__ */ jsxs5($FormGroup, { children: [
-      /* @__PURE__ */ jsx11($FormCaption, { children: t("linkText") }),
-      /* @__PURE__ */ jsx11($Input, { type: "text", value: text, onChange: handleTextChange }),
-      /* @__PURE__ */ jsx11($FormHint, { children: t("linkTextHint") })
-    ] }),
-    /* @__PURE__ */ jsxs5($FormGroup, { children: [
-      /* @__PURE__ */ jsx11($FormCaption, { children: t("tooltipText") }),
-      /* @__PURE__ */ jsx11($Input, { type: "text", value: title, onChange: handleTitleChange }),
-      /* @__PURE__ */ jsx11($FormHint, { children: t("tooltipHint") })
-    ] }),
-    /* @__PURE__ */ jsx11($FormGroup, { children: /* @__PURE__ */ jsx11($PrimaryButton, { onClick: handleSubmit, children: t("apply") }) }),
-    /* @__PURE__ */ jsx11($FormGroup, { children: /* @__PURE__ */ jsx11($CancelButton, { onClick: openAnchorDialog, children: t("cancel") }) })
+    /* @__PURE__ */ jsx12(DraggableHeader, { onDrag: handleDrag }),
+    /* @__PURE__ */ jsxs5("div", { style: { padding: "1em" }, children: [
+      /* @__PURE__ */ jsxs5($FormGroup, { children: [
+        /* @__PURE__ */ jsx12($FormCaption, { children: t("linkUrl") }),
+        /* @__PURE__ */ jsx12($Textarea, { as: "textarea", value: href, onChange: handleHrefChange })
+      ] }),
+      /* @__PURE__ */ jsxs5($FormGroup, { children: [
+        /* @__PURE__ */ jsx12($FormCaption, { children: t("linkText") }),
+        /* @__PURE__ */ jsx12($Input, { type: "text", value: text, onChange: handleTextChange }),
+        /* @__PURE__ */ jsx12($FormHint, { children: t("linkTextHint") })
+      ] }),
+      /* @__PURE__ */ jsxs5($FormGroup, { children: [
+        /* @__PURE__ */ jsx12($FormCaption, { children: t("tooltipText") }),
+        /* @__PURE__ */ jsx12($Input, { type: "text", value: title, onChange: handleTitleChange }),
+        /* @__PURE__ */ jsx12($FormHint, { children: t("tooltipHint") })
+      ] }),
+      /* @__PURE__ */ jsx12($FormGroup, { children: /* @__PURE__ */ jsx12($PrimaryButton, { onClick: handleSubmit, children: t("apply") }) }),
+      /* @__PURE__ */ jsx12($FormGroup, { children: /* @__PURE__ */ jsx12($CancelButton, { onClick: openAnchorDialog, children: t("cancel") }) })
+    ] })
   ] });
 }
 
 // src/anchor-plugin/render-element/icons.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var ExternalLinkIcon = (props) => /* @__PURE__ */ jsx12(TablerIcon, { ...props, children: /* @__PURE__ */ jsx12("path", { d: "M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6M11 13l9-9M15 4h5v5" }) });
-var LinkOffIcon = (props) => /* @__PURE__ */ jsx12(TablerIcon, { ...props, children: /* @__PURE__ */ jsx12("path", { d: "m9 15 3-3m2-2 1-1M11 6l.463-.536a5 5 0 0 1 7.071 7.072L18 13M3 3l18 18M13 18l-.397.534a5.068 5.068 0 0 1-7.127 0 4.972 4.972 0 0 1 0-7.071L6 11" }) });
-var PencilIcon = (props) => /* @__PURE__ */ jsx12(TablerIcon, { ...props, children: /* @__PURE__ */ jsx12("path", { d: "M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4M13.5 6.5l4 4" }) });
+import { jsx as jsx13 } from "react/jsx-runtime";
+var ExternalLinkIcon = (props) => /* @__PURE__ */ jsx13(TablerIcon, { ...props, children: /* @__PURE__ */ jsx13("path", { d: "M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6M11 13l9-9M15 4h5v5" }) });
+var LinkOffIcon = (props) => /* @__PURE__ */ jsx13(TablerIcon, { ...props, children: /* @__PURE__ */ jsx13("path", { d: "m9 15 3-3m2-2 1-1M11 6l.463-.536a5 5 0 0 1 7.071 7.072L18 13M3 3l18 18M13 18l-.397.534a5.068 5.068 0 0 1-7.127 0 4.972 4.972 0 0 1 0-7.071L6 11" }) });
+var PencilIcon = (props) => /* @__PURE__ */ jsx13(TablerIcon, { ...props, children: /* @__PURE__ */ jsx13("path", { d: "M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4M13.5 6.5l4 4" }) });
+var CloseIcon = (props) => /* @__PURE__ */ jsx13(TablerIcon, { ...props, children: /* @__PURE__ */ jsx13("path", { d: "M18 6L6 18M6 6l12 12" }) });
 
 // src/anchor-plugin/render-element/AnchorDialog.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-var $AnchorDialog2 = styled14($Panel)`
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var $AnchorDialog2 = styled15($Panel)`
   position: absolute;
-  display: flex;
   width: 20em;
-  z-index: 10;
-  padding: 1em;
+  z-index: 1000;
+  padding: 0;
+  overflow: hidden;
   color: var(--shade-400);
 
   .--icons {
@@ -3465,7 +3592,11 @@ function AnchorDialog({
   const dialog = useLayer("dialog");
   const editor = useSlateStatic4();
   const url = parseUrl2(element.href);
-  const style = useAbsoluteReposition(
+  const [dragOffset, setDragOffset] = useState4({ x: 0, y: 0 });
+  const handleDrag = useCallback5((deltaX, deltaY) => {
+    setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
+  }, []);
+  const baseStyle = useAbsoluteReposition(
     { destAnchor, destStartEdge },
     ({ destAnchor: destAnchor2, destStartEdge: destStartEdge2 }) => {
       return {
@@ -3474,16 +3605,25 @@ function AnchorDialog({
       };
     }
   );
+  const style = {
+    ...baseStyle,
+    left: baseStyle.left + dragOffset.x,
+    top: baseStyle.top + dragOffset.y
+  };
   const removeTooltip = useTooltip({ title: "\u30EA\u30F3\u30AF\u3092\u524A\u9664" });
   const editTooltip = useTooltip({ title: "\u30EA\u30F3\u30AF\u3092\u7DE8\u96C6" });
-  const removeLink2 = useCallback4(() => {
+  const closeTooltip = useTooltip({ title: "\u9589\u3058\u308B" });
+  const closeDialog = useCallback5(() => {
+    dialog.close();
+  }, [dialog]);
+  const removeLink2 = useCallback5(() => {
     editor.anchor.removeLink({ at: element });
     dialog.close();
   }, [editor, dialog]);
-  const openEditDialog = useCallback4(() => {
+  const openEditDialog = useCallback5(() => {
     editTooltip.onMouseLeave();
     dialog.open(() => {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         AnchorEditDialog,
         {
           destAnchor,
@@ -3494,57 +3634,70 @@ function AnchorDialog({
     });
   }, [destAnchor, destStartEdge, element]);
   return /* @__PURE__ */ jsxs6($AnchorDialog2, { contentEditable: false, style, children: [
-    /* @__PURE__ */ jsxs6(
-      "a",
-      {
-        className: "--link",
-        href: element.href,
-        target: "_blank",
-        rel: "noreferrer",
-        children: [
-          /* @__PURE__ */ jsx13(ExternalLinkIcon, {}),
-          /* @__PURE__ */ jsxs6("div", { className: "--url", children: [
-            /* @__PURE__ */ jsx13("div", { className: "--hostname", children: url.hostname }),
-            url.pathname === "" || url.pathname === "/" ? null : /* @__PURE__ */ jsx13("div", { className: "--pathname", children: url.pathname }),
-            element.title == null || element.title === "" ? null : /* @__PURE__ */ jsx13("div", { className: "--tooltip", children: element.title })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs6("span", { className: "--icons", children: [
-      /* @__PURE__ */ jsx13(
-        "span",
+    /* @__PURE__ */ jsx14(DraggableHeader, { onDrag: handleDrag }),
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", padding: "1em" }, children: [
+      /* @__PURE__ */ jsxs6(
+        "a",
         {
-          className: "--icon",
-          onClick: removeLink2,
-          onMouseEnter: removeTooltip.onMouseEnter,
-          onMouseLeave: removeTooltip.onMouseLeave,
-          children: /* @__PURE__ */ jsx13(LinkOffIcon, {})
+          className: "--link",
+          href: element.href,
+          target: "_blank",
+          rel: "noreferrer",
+          children: [
+            /* @__PURE__ */ jsx14(ExternalLinkIcon, {}),
+            /* @__PURE__ */ jsxs6("div", { className: "--url", children: [
+              /* @__PURE__ */ jsx14("div", { className: "--hostname", children: url.hostname }),
+              url.pathname === "" || url.pathname === "/" ? null : /* @__PURE__ */ jsx14("div", { className: "--pathname", children: url.pathname }),
+              element.title == null || element.title === "" ? null : /* @__PURE__ */ jsx14("div", { className: "--tooltip", children: element.title })
+            ] })
+          ]
         }
       ),
-      /* @__PURE__ */ jsx13(
-        "span",
-        {
-          className: "--icon",
-          onMouseEnter: editTooltip.onMouseEnter,
-          onMouseLeave: editTooltip.onMouseLeave,
-          onClick: openEditDialog,
-          children: /* @__PURE__ */ jsx13(PencilIcon, {})
-        }
-      )
+      /* @__PURE__ */ jsxs6("span", { className: "--icons", children: [
+        /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: "--icon",
+            onClick: removeLink2,
+            onMouseEnter: removeTooltip.onMouseEnter,
+            onMouseLeave: removeTooltip.onMouseLeave,
+            children: /* @__PURE__ */ jsx14(LinkOffIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: "--icon",
+            onMouseEnter: editTooltip.onMouseEnter,
+            onMouseLeave: editTooltip.onMouseLeave,
+            onClick: openEditDialog,
+            children: /* @__PURE__ */ jsx14(PencilIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "span",
+          {
+            className: "--icon",
+            onClick: closeDialog,
+            onMouseEnter: closeTooltip.onMouseEnter,
+            onMouseLeave: closeTooltip.onMouseLeave,
+            children: /* @__PURE__ */ jsx14(CloseIcon, {})
+          }
+        )
+      ] })
     ] })
   ] });
 }
 
 // src/anchor-plugin/render-element/anchor.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function Anchor({
   element,
   attributes,
   children
 }) {
-  const startEdgeRef = useRef4(null);
-  const anchorRef = useRef4(null);
+  const startEdgeRef = useRef5(null);
+  const anchorRef = useRef5(null);
   const selected = useSelected();
   const editor = useSlate();
   const dialog = useLayer("dialog");
@@ -3556,7 +3709,7 @@ function Anchor({
     const hasSelection = editor.selection && editor.selection.anchor.offset !== editor.selection.focus.offset;
     if (selected && !hasSelection) {
       setTimeout(() => {
-        dialog.open(() => /* @__PURE__ */ jsx14(
+        dialog.open(() => /* @__PURE__ */ jsx15(
           AnchorDialog,
           {
             destAnchor: anchor,
@@ -3578,16 +3731,16 @@ function Anchor({
       ...attributes,
       ref: anchorRef,
       children: [
-        /* @__PURE__ */ jsx14($Edge, { ref: startEdgeRef, contentEditable: false }),
-        /* @__PURE__ */ jsx14("span", { children }),
-        /* @__PURE__ */ jsx14($Edge, { contentEditable: false })
+        /* @__PURE__ */ jsx15($Edge, { ref: startEdgeRef, contentEditable: false }),
+        /* @__PURE__ */ jsx15("span", { children }),
+        /* @__PURE__ */ jsx15($Edge, { contentEditable: false })
       ]
     }
   );
 }
 
 // src/anchor-plugin/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var AnchorPlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
     editor.anchor = createAnchorMethods(editor);
@@ -3604,7 +3757,7 @@ var AnchorPlugin = createPlugin(
         onPaste: curryOne(onPaste, editor),
         renderElement: ({ element, attributes, children }) => {
           if (element.type === "anchor") {
-            return /* @__PURE__ */ jsx15(Anchor, { element, attributes, children });
+            return /* @__PURE__ */ jsx16(Anchor, { element, attributes, children });
           }
         }
       }
@@ -3680,8 +3833,7 @@ import { ReactEditor as ReactEditor9 } from "slate-react";
 // src/image-plugin/methods/index.ts
 import { Editor as Editor20, Transforms as Transforms12 } from "slate";
 import { ReactEditor as ReactEditor3 } from "slate-react";
-function noop(editor) {
-  editor;
+function noop(_editor) {
 }
 function insertImageFromUrl(editor, url, alt, title) {
   const { selection } = editor;
@@ -3708,9 +3860,7 @@ function createImageMethods(editor) {
 }
 
 // src/image-plugin/normalize-node/index.ts
-function normalizeNode2(editor, entry) {
-  editor;
-  entry;
+function normalizeNode2(_editor, _entry) {
   return false;
 }
 
@@ -3718,20 +3868,20 @@ function normalizeNode2(editor, entry) {
 import { useSlateStatic as useSlateStatic9 } from "slate-react";
 
 // src/image-plugin/styles/image-block-styles.tsx
-import styled15 from "@emotion/styled";
-var $ImageBlock = styled15("div")`
+import styled16 from "@emotion/styled";
+var $ImageBlock = styled16("div")`
   display: block;
   margin: 1em 0;
 `;
 
 // src/image-plugin/render-element/image-with-controls/index.tsx
 import { clsx as clsx4 } from "clsx";
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { useSelected as useSelected2 } from "slate-react";
 
 // src/image-plugin/styles/image-with-controls-styles/image-with-controls-styles.tsx
-import styled16 from "@emotion/styled";
-var $ImageContainer = styled16("span")`
+import styled17 from "@emotion/styled";
+var $ImageContainer = styled17("span")`
   /**
    * In order for this container to wrap tightly (without space), it needs to be
    * an "inline-block". If it's just an "inline" we end up with spacing
@@ -3744,7 +3894,7 @@ var $ImageContainer = styled16("span")`
    */
   position: relative;
 `;
-var $Image = styled16("img")`
+var $Image = styled17("img")`
   /**
    * TODO:
    *
@@ -3810,7 +3960,7 @@ var $Image = styled16("img")`
 
 // src/image-plugin/render-element/image-with-controls/image-resize-controls/image-resize-control.tsx
 import { clsx as clsx2 } from "clsx";
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { Transforms as Transforms13 } from "slate";
 import { ReactEditor as ReactEditor5, useSlateStatic as useSlateStatic5 } from "slate-react";
 
@@ -3829,8 +3979,8 @@ function useResizeBrowser() {
 }
 
 // src/image-plugin/styles/image-with-controls-styles/image-resize-handle-styles.tsx
-import styled17 from "@emotion/styled";
-var $ImageResizeInvisibleHandle = styled17("span")`
+import styled18 from "@emotion/styled";
+var $ImageResizeInvisibleHandle = styled18("span")`
   position: absolute;
   display: block;
   /**
@@ -3858,7 +4008,7 @@ var $ImageResizeInvisibleHandle = styled17("span")`
     width: 1.25em;
   }
 `;
-var $ImageResizeHandle = styled17("span")`
+var $ImageResizeHandle = styled18("span")`
   position: absolute;
   display: block;
   background: var(--select-color);
@@ -4009,7 +4159,7 @@ function getEditorWidth(editor) {
 }
 
 // src/image-plugin/render-element/image-with-controls/image-resize-controls/image-resize-control.tsx
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function getImageBoundsFromSlateElement(editor, element) {
   const imageContainerDOMNode = ReactEditor5.toDOMNode(editor, element);
   const imgDOMNode = imageContainerDOMNode.querySelector("img");
@@ -4031,7 +4181,7 @@ function ImageResizeControl({
   const width = size.width;
   const maxWidth = Math.min(srcSize.width, editorWidth);
   const minWidth = Math.min(12, srcSize.width);
-  const onMouseDown = useCallback5(
+  const onMouseDown = useCallback6(
     (e) => {
       stopEvent(e);
       setIsDragging(true);
@@ -4065,7 +4215,7 @@ function ImageResizeControl({
     },
     [srcSize.width, srcSize.height, size.width, element]
   );
-  const onTouchStart = useCallback5(
+  const onTouchStart = useCallback6(
     (e) => {
       stopEvent(e);
       setIsDragging(true);
@@ -4105,24 +4255,24 @@ function ImageResizeControl({
     "--dragging": isDragging,
     "--small": width <= 64 || size.height <= 64
   });
-  return /* @__PURE__ */ jsx16(Fragment3, { children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(Fragment3, { children: /* @__PURE__ */ jsx17(
     $ImageResizeInvisibleHandle,
     {
       className,
       onMouseDown,
       onTouchStart,
       children: /* @__PURE__ */ jsxs8($ImageResizeHandle, { children: [
-        /* @__PURE__ */ jsx16("span", { className: "--bar --bar-left" }),
-        /* @__PURE__ */ jsx16("span", { className: "--bar --bar-center" }),
-        /* @__PURE__ */ jsx16("span", { className: "--bar --bar-right" })
+        /* @__PURE__ */ jsx17("span", { className: "--bar --bar-left" }),
+        /* @__PURE__ */ jsx17("span", { className: "--bar --bar-center" }),
+        /* @__PURE__ */ jsx17("span", { className: "--bar --bar-right" })
       ] })
     }
   ) });
 }
 
 // src/image-plugin/styles/image-with-controls-styles/image-size-status-styles.tsx
-import styled18 from "@emotion/styled";
-var $ImageSizeStatus = styled18("span")`
+import styled19 from "@emotion/styled";
+var $ImageSizeStatus = styled19("span")`
   position: absolute;
   /**
    * The status appears with a 1px gap from the outline.
@@ -4157,8 +4307,8 @@ function ImageSizeStatus({ size }) {
 }
 
 // src/image-plugin/styles/image-with-controls-styles/image-toolbar-styles.tsx
-import styled19 from "@emotion/styled";
-var $ImageToolbar = styled19("span")`
+import styled20 from "@emotion/styled";
+var $ImageToolbar = styled20("span")`
   position: absolute;
   /**
    * On top of the image +1 for space inside outline, +2 for outline,
@@ -4192,8 +4342,8 @@ var $ImageToolbar = styled19("span")`
 `;
 
 // src/image-plugin/styles/image-with-controls-styles/image-buttons-styles.tsx
-import styled20 from "@emotion/styled";
-var $ImageButtonGroup = styled20("span")`
+import styled21 from "@emotion/styled";
+var $ImageButtonGroup = styled21("span")`
   /* font-size: 0.75em; */
   border-radius: 0.5em;
   display: flex;
@@ -4207,7 +4357,7 @@ var $ImageButtonGroup = styled20("span")`
    */
   outline: 1px solid white;
 `;
-var $ImageButton = styled20("span")`
+var $ImageButton = styled21("span")`
   font-size: 0.75em;
   line-height: 2em;
   padding: 0 0.625em;
@@ -4265,10 +4415,10 @@ var $ImageButton = styled20("span")`
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-preset-buttons/image-preset-button.tsx
 import { clsx as clsx3 } from "clsx";
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 import { Transforms as Transforms14 } from "slate";
 import { ReactEditor as ReactEditor6, useSlateStatic as useSlateStatic6 } from "slate-react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ImagePresetButton({
   element,
   preset,
@@ -4282,7 +4432,7 @@ function ImagePresetButton({
     title: preset.title,
     hotkey: `${presetSize.width}x${presetSize.height}`
   });
-  const onClick = useCallback6(() => {
+  const onClick = useCallback7(() => {
     const path = ReactEditor6.findPath(editor, element);
     const nextSize = resizeInPreset(size, srcSize, preset);
     setSize(nextSize);
@@ -4295,7 +4445,7 @@ function ImagePresetButton({
     "--disabled": isDisabled,
     "--selected": !isDisabled && isSelected
   });
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     $ImageButton,
     {
       className,
@@ -4308,7 +4458,7 @@ function ImagePresetButton({
 }
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-preset-buttons/image-preset-button-group.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function ImagePresetButtonGroup({
   element,
   size,
@@ -4316,8 +4466,8 @@ function ImagePresetButtonGroup({
   srcSize,
   presets
 }) {
-  return /* @__PURE__ */ jsx18($ImageButtonGroup, { children: presets.map((preset, i) => {
-    return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19($ImageButtonGroup, { children: presets.map((preset, i) => {
+    return /* @__PURE__ */ jsx19(
       ImagePresetButton,
       {
         element,
@@ -4332,18 +4482,18 @@ function ImagePresetButtonGroup({
 }
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-type-buttons/block-image-type-button.tsx
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { useSlateStatic as useSlateStatic7 } from "slate-react";
 
 // src/image-plugin/render-element/icons.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var BlockIcon = (props) => /* @__PURE__ */ jsxs10(TablerIcon, { ...props, children: [
-  /* @__PURE__ */ jsx19("rect", { width: 6, height: 6, x: 4, y: 5, rx: 1 }),
-  /* @__PURE__ */ jsx19("path", { d: "M4 15h16M4 19h16" })
+  /* @__PURE__ */ jsx20("rect", { width: 6, height: 6, x: 4, y: 5, rx: 1 }),
+  /* @__PURE__ */ jsx20("path", { d: "M4 15h16M4 19h16" })
 ] });
 var InlineIcon = (props) => /* @__PURE__ */ jsxs10(TablerIcon, { ...props, children: [
-  /* @__PURE__ */ jsx19("rect", { width: 6, height: 6, x: 9, y: 5, rx: 1 }),
-  /* @__PURE__ */ jsx19("path", { d: "M4 7h1M4 11h1M19 7h1M19 11h1M4 15h16M4 19h16" })
+  /* @__PURE__ */ jsx20("rect", { width: 6, height: 6, x: 9, y: 5, rx: 1 }),
+  /* @__PURE__ */ jsx20("path", { d: "M4 7h1M4 11h1M19 7h1M19 11h1M4 15h16M4 19h16" })
 ] });
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-type-buttons/convert-to-inline-image.tsx
@@ -4377,7 +4527,7 @@ function convertToInlineImage(editor, element) {
 }
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-type-buttons/block-image-type-button.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function BlockImageTypeButton({
   element
 }) {
@@ -4386,25 +4536,25 @@ function BlockImageTypeButton({
     title: "Inline Image",
     hotkey: "In a line with text"
   });
-  const onClickInline = useCallback7(() => {
+  const onClickInline = useCallback8(() => {
     if (element.type !== "image-block")
       return;
     convertToInlineImage(editor, element);
   }, [editor, element]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     $ImageButton,
     {
       className: element.type === "image-inline" ? "--selected" : "",
       onClick: element.type === "image-inline" ? void 0 : onClickInline,
       onMouseEnter: tooltip.onMouseEnter,
       onMouseLeave: tooltip.onMouseLeave,
-      children: /* @__PURE__ */ jsx20(InlineIcon, {})
+      children: /* @__PURE__ */ jsx21(InlineIcon, {})
     }
   );
 }
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-type-buttons/inline-image-type-button.tsx
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 import { useSlateStatic as useSlateStatic8 } from "slate-react";
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-type-buttons/convert-to-block-image.tsx
@@ -4457,7 +4607,7 @@ function convertToBlockImage(editor, element) {
 }
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-type-buttons/inline-image-type-button.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function InlineImageTypeButton({
   element
 }) {
@@ -4466,36 +4616,36 @@ function InlineImageTypeButton({
     title: "Block Image",
     hotkey: "On a line by itself"
   });
-  const onClickBlock = useCallback8(() => {
+  const onClickBlock = useCallback9(() => {
     if (element.type !== "image-inline")
       return;
     convertToBlockImage(editor, element);
   }, [editor, element]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     $ImageButton,
     {
       className: element.type === "image-block" ? "--selected" : "",
       onClick: element.type === "image-block" ? void 0 : onClickBlock,
       onMouseEnter: tooltip.onMouseEnter,
       onMouseLeave: tooltip.onMouseLeave,
-      children: /* @__PURE__ */ jsx21(BlockIcon, {})
+      children: /* @__PURE__ */ jsx22(BlockIcon, {})
     }
   );
 }
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-type-buttons/image-type-button-group.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 function ImageTypeButtonGroup({
   element
 }) {
   return /* @__PURE__ */ jsxs11($ImageButtonGroup, { children: [
-    /* @__PURE__ */ jsx22(InlineImageTypeButton, { element }),
-    /* @__PURE__ */ jsx22(BlockImageTypeButton, { element })
+    /* @__PURE__ */ jsx23(InlineImageTypeButton, { element }),
+    /* @__PURE__ */ jsx23(BlockImageTypeButton, { element })
   ] });
 }
 
 // src/image-plugin/render-element/image-with-controls/image-toolbar/image-toolbar.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function ImageToolbar({
   element,
   size,
@@ -4504,8 +4654,8 @@ function ImageToolbar({
   presets
 }) {
   return /* @__PURE__ */ jsxs12($ImageToolbar, { children: [
-    /* @__PURE__ */ jsx23(ImageTypeButtonGroup, { element }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(ImageTypeButtonGroup, { element }),
+    /* @__PURE__ */ jsx24(
       ImagePresetButtonGroup,
       {
         element,
@@ -4519,15 +4669,15 @@ function ImageToolbar({
 }
 
 // src/image-plugin/render-element/image-with-controls/index.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function ImageWithControls({
   element,
   presets
 }) {
   const url = element.url;
   const selected = useSelected2();
-  const [isDragging, setIsDragging] = useState4(false);
-  const [size, setSize] = useState4(
+  const [isDragging, setIsDragging] = useState5(false);
+  const [size, setSize] = useState5(
     element.srcWidth && element.srcHeight && element.width && element.height ? { width: element.width, height: element.height } : null
   );
   const srcSize = element.srcWidth && element.srcHeight ? { width: element.srcWidth, height: element.srcHeight } : null;
@@ -4538,8 +4688,8 @@ function ImageWithControls({
     "--small": size && (size.width <= 64 || size.height <= 64)
   });
   return /* @__PURE__ */ jsxs13($ImageContainer, { className, children: [
-    /* @__PURE__ */ jsx24($Image, { src: url, width: size?.width, height: size?.height }),
-    showControls ? /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25($Image, { src: url, width: size?.width, height: size?.height }),
+    showControls ? /* @__PURE__ */ jsx25(
       ImageToolbar,
       {
         element,
@@ -4549,8 +4699,8 @@ function ImageWithControls({
         presets
       }
     ) : null,
-    isDragging && size ? /* @__PURE__ */ jsx24(ImageSizeStatus, { size }) : null,
-    showControls ? /* @__PURE__ */ jsx24(
+    isDragging && size ? /* @__PURE__ */ jsx25(ImageSizeStatus, { size }) : null,
+    showControls ? /* @__PURE__ */ jsx25(
       ImageResizeControl,
       {
         element,
@@ -4565,7 +4715,7 @@ function ImageWithControls({
 }
 
 // src/image-plugin/render-element/image-block.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function ImageBlock({
   element,
   attributes,
@@ -4573,7 +4723,7 @@ function ImageBlock({
 }) {
   const editor = useSlateStatic9();
   return /* @__PURE__ */ jsxs14("div", { ...attributes, children: [
-    /* @__PURE__ */ jsx25($ImageBlock, { contentEditable: false, children: /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26($ImageBlock, { contentEditable: false, children: /* @__PURE__ */ jsx26(
       ImageWithControls,
       {
         element,
@@ -4588,13 +4738,13 @@ function ImageBlock({
 import { useSlateStatic as useSlateStatic10 } from "slate-react";
 
 // src/image-plugin/styles/image-inline-styles.tsx
-import styled21 from "@emotion/styled";
-var $ImageInline = styled21("span")`
+import styled22 from "@emotion/styled";
+var $ImageInline = styled22("span")`
   display: inline;
 `;
 
 // src/image-plugin/render-element/image-inline.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function ImageInline({
   element,
   attributes,
@@ -4602,7 +4752,7 @@ function ImageInline({
 }) {
   const editor = useSlateStatic10();
   return /* @__PURE__ */ jsxs15("span", { ...attributes, style: { display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx26($ImageInline, { contentEditable: false, children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27($ImageInline, { contentEditable: false, children: /* @__PURE__ */ jsx27(
       ImageWithControls,
       {
         element,
@@ -4614,7 +4764,7 @@ function ImageInline({
 }
 
 // src/image-plugin/render-element/index.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function renderElement({
   element,
   attributes,
@@ -4622,9 +4772,9 @@ function renderElement({
 }) {
   switch (element.type) {
     case "image-block":
-      return /* @__PURE__ */ jsx27(ImageBlock, { element, attributes, children });
+      return /* @__PURE__ */ jsx28(ImageBlock, { element, attributes, children });
     case "image-inline":
-      return /* @__PURE__ */ jsx27(ImageInline, { element, attributes, children });
+      return /* @__PURE__ */ jsx28(ImageInline, { element, attributes, children });
   }
 }
 
@@ -4762,8 +4912,8 @@ var ImagePlugin = (
 import { Editor as Editor25, Element as Element11, Transforms as Transforms18 } from "slate";
 
 // src/block-quote-plugin/styles.tsx
-import styled22 from "@emotion/styled";
-var $BlockQuote = styled22("blockquote")`
+import styled23 from "@emotion/styled";
+var $BlockQuote = styled23("blockquote")`
   position: relative;
   margin-top: 1em;
   margin-bottom: 1em;
@@ -4773,7 +4923,7 @@ var $BlockQuote = styled22("blockquote")`
 `;
 
 // src/block-quote-plugin/index.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function matchBlockQuoteSafe(node) {
   return Element11.isElement(node) && /**
    * TODO:
@@ -4886,7 +5036,7 @@ var BlockQuotePlugin = createPlugin(
       editableProps: {
         renderElement: ({ element, attributes, children }) => {
           if (element.type === "block-quote") {
-            return /* @__PURE__ */ jsx28($BlockQuote, { ...attributes, children });
+            return /* @__PURE__ */ jsx29($BlockQuote, { ...attributes, children });
           }
         },
         onKeyDown: createHotkeyHandler({
@@ -5034,6 +5184,17 @@ var tokenStyles = {
   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 Node9, Transforms as Transforms20 } from "slate";
 function normalizeNode3(editor, entry) {
@@ -5078,12 +5239,16 @@ function normalizeNode3(editor, entry) {
 }
 
 // src/code-block-plugin/render-element/CodeBlock.tsx
-import { useCallback as useCallback9, useState as useState5 } from "react";
-import { useSelected as useSelected3, useSlateStatic as useSlateStatic11 } from "slate-react";
+import { useCallback as useCallback10, useRef as useRef6 } from "react";
+import { useSelected as useSelected3 } from "slate-react";
+
+// src/code-block-plugin/icons/ChevronDownIcon.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+var ChevronDownIcon = (props) => /* @__PURE__ */ jsx30(TablerIcon, { ...props, children: /* @__PURE__ */ jsx30("path", { d: "m6 9 6 6 6-6" }) });
 
 // src/code-block-plugin/styles.ts
-import styled23 from "@emotion/styled";
-var $CodeBlock = styled23("div")`
+import styled24 from "@emotion/styled";
+var $CodeBlock = styled24("div")`
   position: relative;
   background: var(--code-block-bgcolor);
   margin: 1em 0;
@@ -5103,12 +5268,12 @@ var $CodeBlock = styled23("div")`
    */
   overflow-x: hidden;
 `;
-var $CodeBlockScroller = styled23("div")`
+var $CodeBlockScroller = styled24("div")`
   padding: 2.25em 1em 1.5em 1em;
   border-radius: 0.5em;
   overflow-x: auto;
 `;
-var $CodeBlockLanguage = styled23("span")`
+var $CodeBlockLanguage = styled24("span")`
   cursor: pointer;
   position: absolute;
   top: 0.25em;
@@ -5135,7 +5300,7 @@ var $CodeBlockLanguage = styled23("span")`
     background: var(--shade-300);
   }
 `;
-var $CodeBlockLine = styled23("div")`
+var $CodeBlockLine = styled24("div")`
   white-space: pre;
   line-height: 1.5em;
   counter-increment: line;
@@ -5161,70 +5326,50 @@ var $CodeBlockLine = styled23("div")`
 `;
 
 // src/code-block-plugin/render-element/CodeBlock.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 function CodeBlock({
   element,
   attributes,
   children
 }) {
-  const editor = useSlateStatic11();
+  const ref = useRef6(null);
   const selected = useSelected3();
-  const [isEditing, setIsEditing] = useState5(false);
-  const [inputValue, setInputValue] = useState5(element.language);
-  const handleClick = useCallback9(() => {
-    setInputValue(element.language);
-    setIsEditing(true);
-  }, [element.language]);
-  const handleBlur = useCallback9(() => {
-    setIsEditing(false);
-    if (inputValue !== element.language) {
-      editor.codeBlock.setCodeBlockLanguage(inputValue || "text", { at: element });
-    }
-  }, [editor, element, inputValue]);
-  const handleKeyDown = useCallback9((e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      e.target.blur();
-    } else if (e.key === "Escape") {
-      setInputValue(element.language);
-      setIsEditing(false);
-    }
-  }, [element.language]);
-  return /* @__PURE__ */ jsxs16($CodeBlock, { className: selected ? "--selected" : "", ...attributes, children: [
-    /* @__PURE__ */ jsx29($CodeBlockLanguage, { contentEditable: false, children: isEditing ? /* @__PURE__ */ jsx29(
-      "input",
-      {
-        type: "text",
-        value: inputValue,
-        onChange: (e) => setInputValue(e.target.value),
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        autoFocus: true,
-        style: {
-          width: "100%",
-          border: "none",
-          background: "transparent",
-          font: "inherit",
-          color: "inherit",
-          padding: 0,
-          outline: "none",
-          textAlign: "right"
+  const dropdown = useLayer("code-block-dropdown");
+  const onClick = useCallback10(() => {
+    if (dropdown.layer)
+      dropdown.close();
+    const dest = ref.current;
+    if (dest === null)
+      return;
+    const items = LanguageList.map((language) => {
+      return {
+        icon: () => /* @__PURE__ */ jsx31("span", {}),
+        title: language,
+        action: (editor) => {
+          editor.codeBlock.setCodeBlockLanguage(language, { at: element });
         }
-      }
-    ) : /* @__PURE__ */ jsx29("span", { onClick: handleClick, style: { cursor: "pointer", width: "100%" }, children: element.language || "text" }) }),
-    /* @__PURE__ */ jsx29($CodeBlockScroller, { children })
+      };
+    });
+    dropdown.open(() => /* @__PURE__ */ jsx31(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__ */ jsx31("span", { children: element.language }),
+      /* @__PURE__ */ jsx31(ChevronDownIcon, {})
+    ] }),
+    /* @__PURE__ */ jsx31($CodeBlockScroller, { children })
   ] });
 }
 
 // src/code-block-plugin/render-element/CodeBlockLine.tsx
 import { useSelected as useSelected4 } from "slate-react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function CodeBlockLine({
   attributes,
   children
 }) {
   const selected = useSelected4();
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     $CodeBlockLine,
     {
       className: selected ? "--selected" : "",
@@ -5236,21 +5381,21 @@ function CodeBlockLine({
 }
 
 // src/code-block-plugin/render-element/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function renderElement2({
   element,
   attributes,
   children
 }) {
   if (element.type === "code-block") {
-    return /* @__PURE__ */ jsx31(CodeBlock, { element, attributes, children });
+    return /* @__PURE__ */ jsx33(CodeBlock, { element, attributes, children });
   } else if (element.type === "code-block-line") {
-    return /* @__PURE__ */ jsx31(CodeBlockLine, { element, attributes, children });
+    return /* @__PURE__ */ jsx33(CodeBlockLine, { element, attributes, children });
   }
 }
 
 // src/code-block-plugin/index.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var CodeBlockPlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
     editor.codeBlock = createCodeBlockMethods(editor);
@@ -5308,7 +5453,7 @@ var CodeBlockPlugin = createPlugin(
           if (style === null) {
             return children;
           } else {
-            return /* @__PURE__ */ jsx32("span", { style, children });
+            return /* @__PURE__ */ jsx34("span", { style, children });
           }
         }
       }
@@ -5320,8 +5465,8 @@ var CodeBlockPlugin = createPlugin(
 import { Transforms as Transforms22 } from "slate";
 
 // src/html-block-plugin/styles.ts
-import styled24 from "@emotion/styled";
-var $HtmlBlock = styled24("div")`
+import styled25 from "@emotion/styled";
+var $HtmlBlock = styled25("div")`
   position: relative;
   background-color: var(--shade-100);
   border: 1px solid var(--shade-300);
@@ -5340,7 +5485,7 @@ var $HtmlBlock = styled24("div")`
     outline: 2px solid var(--select-color);
   }
 `;
-var $HtmlBlockLabel = styled24("span")`
+var $HtmlBlockLabel = styled25("span")`
   position: absolute;
   top: 0.25em;
   right: 0.5em;
@@ -5351,21 +5496,21 @@ var $HtmlBlockLabel = styled24("span")`
 `;
 
 // src/html-block-plugin/render-element.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
 function HtmlBlock({
   attributes,
   children,
   element
 }) {
   return /* @__PURE__ */ jsxs17($HtmlBlock, { ...attributes, contentEditable: false, children: [
-    /* @__PURE__ */ jsx33($HtmlBlockLabel, { children: "HTML" }),
-    /* @__PURE__ */ jsx33("div", { children: unescapeUrlSlashes(element.html) }),
+    /* @__PURE__ */ jsx35($HtmlBlockLabel, { children: "HTML" }),
+    /* @__PURE__ */ jsx35("div", { children: unescapeUrlSlashes(element.html) }),
     children
   ] });
 }
 
 // src/html-block-plugin/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var HtmlBlockPlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
     function onDelete() {
@@ -5399,7 +5544,7 @@ var HtmlBlockPlugin = createPlugin(
       editableProps: {
         renderElement: ({ element, attributes, children }) => {
           if (element.type === "html-block") {
-            return /* @__PURE__ */ jsx34(HtmlBlock, { element, attributes, children });
+            return /* @__PURE__ */ jsx36(HtmlBlock, { element, attributes, children });
           }
         }
       }
@@ -5473,8 +5618,8 @@ import { clsx as clsx5 } from "clsx";
 import { useSelected as useSelected5 } from "slate-react";
 
 // src/collapsible-paragraph-plugin/render-element/styles.ts
-import styled25 from "@emotion/styled";
-var $Paragraph = styled25("p")`
+import styled26 from "@emotion/styled";
+var $Paragraph = styled26("p")`
   padding: 0;
   margin: 0;
   &:first-child {
@@ -5513,7 +5658,7 @@ function getIsEmpty(element) {
 }
 
 // src/collapsible-paragraph-plugin/render-element/paragraph.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Paragraph({
   element,
   attributes,
@@ -5521,7 +5666,7 @@ function Paragraph({
 }) {
   const selected = useSelected5();
   const isEmpty = getIsEmpty(element);
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx37(
     $Paragraph,
     {
       ...attributes,
@@ -5536,7 +5681,7 @@ function Paragraph({
 }
 
 // src/collapsible-paragraph-plugin/index.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var CollapsibleParagraphPlugin = createPlugin((editor) => {
   const { insertBreak: insertBreak3 } = editor;
   editor.insertBreak = () => {
@@ -5583,7 +5728,7 @@ var CollapsibleParagraphPlugin = createPlugin((editor) => {
       renderElement: ({ element, attributes, children }) => {
         switch (element.type) {
           case "paragraph": {
-            return /* @__PURE__ */ jsx36(Paragraph, { element, attributes, children });
+            return /* @__PURE__ */ jsx38(Paragraph, { element, attributes, children });
           }
         }
       },
@@ -5749,21 +5894,21 @@ function convertElements(editor, matchForToggle, targetElement, allowToggle) {
   const { selection } = editor;
   if (!selection)
     return false;
+  let savedAnchorOffset = -1;
+  let savedFocusOffset = -1;
+  const isCollapsed2 = Range5.isCollapsed(selection);
   const entries = Array.from(
     Editor33.nodes(editor, {
       match: (node) => Element20.isElement(node) && editor.convertElement.isConvertibleElement(node)
     })
   );
-  if (entries.length === 0)
-    return false;
-  let savedAnchorOffset = -1;
-  let savedFocusOffset = -1;
-  let isCollapsed2 = Range5.isCollapsed(selection);
   if (entries.length > 0) {
     const [, firstPath] = entries[0];
     savedAnchorOffset = getOffsetInElement(editor, selection.anchor, firstPath);
     savedFocusOffset = getOffsetInElement(editor, selection.focus, firstPath);
   }
+  if (entries.length === 0)
+    return false;
   const allPaths = [];
   Editor33.withoutNormalizing(editor, () => {
     for (let i = entries.length - 1; i >= 0; i--) {
@@ -5934,7 +6079,7 @@ function createHeadingMethods(editor) {
 
 // src/heading-plugin/styles.ts
 import { css } from "@emotion/react";
-import styled26 from "@emotion/styled";
+import styled27 from "@emotion/styled";
 var headingStyles = css`
   margin-top: 1em;
   &:first-child {
@@ -5942,34 +6087,34 @@ var headingStyles = css`
   }
   font-weight: bold;
 `;
-var $H1 = styled26("h1")`
+var $H1 = styled27("h1")`
   ${headingStyles}
   font-size: 2.25em;
   letter-spacing: -0.01em;
 `;
-var $H2 = styled26("h2")`
+var $H2 = styled27("h2")`
   ${headingStyles}
   font-size: 1.5em;
 `;
-var $H3 = styled26("h3")`
+var $H3 = styled27("h3")`
   ${headingStyles}
   font-size: 1.25em;
 `;
-var $H4 = styled26("h4")`
+var $H4 = styled27("h4")`
   ${headingStyles}
   font-size: 1em;
 `;
-var $H5 = styled26("h5")`
+var $H5 = styled27("h5")`
   ${headingStyles}
   font-size: 1em;
 `;
-var $H6 = styled26("h6")`
+var $H6 = styled27("h6")`
   ${headingStyles}
   font-size: 1em;
 `;
 
 // src/heading-plugin/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var HeadingPlugin = createPlugin(
   (editor) => {
     editor.convertElement.addConvertElementType("heading");
@@ -6000,17 +6145,17 @@ var HeadingPlugin = createPlugin(
           if (element.type === "heading") {
             switch (element.level) {
               case 1:
-                return /* @__PURE__ */ jsx37($H1, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H1, { ...attributes, children });
               case 2:
-                return /* @__PURE__ */ jsx37($H2, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H2, { ...attributes, children });
               case 3:
-                return /* @__PURE__ */ jsx37($H3, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H3, { ...attributes, children });
               case 4:
-                return /* @__PURE__ */ jsx37($H4, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H4, { ...attributes, children });
               case 5:
-                return /* @__PURE__ */ jsx37($H5, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H5, { ...attributes, children });
               case 6:
-                return /* @__PURE__ */ jsx37($H6, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H6, { ...attributes, children });
               default: {
                 const exhaustiveCheck = element.level;
                 throw new Error(
@@ -6036,8 +6181,8 @@ var HeadingPlugin = createPlugin(
 import { useSelected as useSelected6 } from "slate-react";
 
 // src/horizontal-rule-plugin/styles.tsx
-import styled27 from "@emotion/styled";
-var $HorizontalRule = styled27("hr")`
+import styled28 from "@emotion/styled";
+var $HorizontalRule = styled28("hr")`
   position: relative;
   height: 1em;
   /* background-color: var(--hr-color); */
@@ -6070,7 +6215,7 @@ var $HorizontalRule = styled27("hr")`
 `;
 
 // src/horizontal-rule-plugin/horizontal-rule.tsx
-import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
 function HorizontalRule({
   attributes,
   children
@@ -6078,7 +6223,7 @@ function HorizontalRule({
   const selected = useSelected6();
   return /* @__PURE__ */ jsxs18("div", { ...attributes, draggable: true, children: [
     children,
-    /* @__PURE__ */ jsx38("div", { contentEditable: false, children: /* @__PURE__ */ jsx38($HorizontalRule, { className: selected ? "--selected" : "" }) })
+    /* @__PURE__ */ jsx40("div", { contentEditable: false, children: /* @__PURE__ */ jsx40($HorizontalRule, { className: selected ? "--selected" : "" }) })
   ] });
 }
 
@@ -6096,7 +6241,7 @@ function createHorizontalRuleMethods(editor) {
 }
 
 // src/horizontal-rule-plugin/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var HorizontalRulePlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
     editor.horizontalRule = createHorizontalRuleMethods(editor);
@@ -6111,7 +6256,7 @@ var HorizontalRulePlugin = createPlugin(
       editableProps: {
         renderElement: (props) => {
           if (props.element.type === "horizontal-rule") {
-            return /* @__PURE__ */ jsx39(HorizontalRule, { ...props });
+            return /* @__PURE__ */ jsx41(HorizontalRule, { ...props });
           }
         },
         onKeyDown: createHotkeyHandler({
@@ -6123,8 +6268,8 @@ var HorizontalRulePlugin = createPlugin(
 );
 
 // src/inline-code-plugin/styles.ts
-import styled28 from "@emotion/styled";
-var $InlineCode = styled28("code")`
+import styled29 from "@emotion/styled";
+var $InlineCode = styled29("code")`
   color: var(--shade-600);
   background-color: var(--inline-code-bgcolor);
   border: 1px solid var(--inline-code-border-color);
@@ -6146,7 +6291,7 @@ var $InlineCode = styled28("code")`
   font-size: 0.75em;
   vertical-align: baseline;
 `;
-var $InvisibleSpan = styled28("span")`
+var $InvisibleSpan = styled29("span")`
   display: inline-block;
   opacity: 0;
   width: 1px;
@@ -6154,7 +6299,7 @@ var $InvisibleSpan = styled28("span")`
 `;
 
 // src/inline-code-plugin/index.tsx
-import { jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
 var InlineCodePlugin = createPlugin(
   (editor) => {
     if (!editor.marksPlugin)
@@ -6174,9 +6319,9 @@ var InlineCodePlugin = createPlugin(
                * Disable spellCheck because it's computer code usually.
                */
               /* @__PURE__ */ jsxs19($InlineCode, { spellCheck: false, children: [
-                /* @__PURE__ */ jsx40($InvisibleSpan, { contentEditable: false, children: "|" }),
+                /* @__PURE__ */ jsx42($InvisibleSpan, { contentEditable: false, children: "|" }),
                 children,
-                /* @__PURE__ */ jsx40($InvisibleSpan, { contentEditable: false, children: "|" })
+                /* @__PURE__ */ jsx42($InvisibleSpan, { contentEditable: false, children: "|" })
               ] })
             );
           } else {
@@ -6390,16 +6535,16 @@ function normalizeNode5(editor, entry) {
 // src/list-plugin/render-element/ordered-list-item.tsx
 import { clsx as clsx6 } from "clsx";
 import { useEffect as useEffect5 } from "react";
-import { ReactEditor as ReactEditor10, useSlateStatic as useSlateStatic12 } from "slate-react";
+import { ReactEditor as ReactEditor10, useSlateStatic as useSlateStatic11 } from "slate-react";
 
 // src/list-plugin/render-element/styles.ts
-import styled29 from "@emotion/styled";
-var $ListItem = styled29("li")`
+import styled30 from "@emotion/styled";
+var $ListItem = styled30("li")`
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   list-style-position: outside;
 `;
-var $UnorderedListItem = styled29($ListItem)`
+var $UnorderedListItem = styled30($ListItem)`
   position: relative;
   list-style-type: none;
   .--list-item-icon {
@@ -6410,7 +6555,7 @@ var $UnorderedListItem = styled29($ListItem)`
     color: var(--shade-600);
   }
 `;
-var $OrderedListItem = styled29($ListItem)`
+var $OrderedListItem = styled30($ListItem)`
   position: relative;
   list-style-type: none;
   counter-increment: var(--list-item-var);
@@ -6436,7 +6581,7 @@ var $OrderedListItem = styled29($ListItem)`
     font-variant-numeric: tabular-nums;
   }
 `;
-var $TaskListItem = styled29($ListItem)`
+var $TaskListItem = styled30($ListItem)`
   position: relative;
   list-style-type: none;
   .--list-item-icon {
@@ -6453,13 +6598,13 @@ var $TaskListItem = styled29($ListItem)`
 `;
 
 // src/list-plugin/render-element/ordered-list-item.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function OrderedListItem({
   element,
   attributes,
   children
 }) {
-  const editor = useSlateStatic12();
+  const editor = useSlateStatic11();
   useEffect5(() => {
     const path = ReactEditor10.findPath(editor, element);
     normalizeOrderedFirstAtDepth(editor, [element, path]);
@@ -6469,15 +6614,15 @@ function OrderedListItem({
     "--list-item-var": `list-item-depth-${element.depth}`
   };
   const className = clsx6({ "--first-at-depth": element.__firstAtDepth });
-  return /* @__PURE__ */ jsx41($OrderedListItem, { ...attributes, className, style, children });
+  return /* @__PURE__ */ jsx43($OrderedListItem, { ...attributes, className, style, children });
 }
 
 // src/list-plugin/render-element/task-list-item.tsx
-import { useCallback as useCallback10 } from "react";
-import { useSlateStatic as useSlateStatic13 } from "slate-react";
+import { useCallback as useCallback11 } from "react";
+import { useSlateStatic as useSlateStatic12 } from "slate-react";
 
 // src/list-plugin/render-element/list-icons.tsx
-import { jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
 var UncheckedIcon = (props) => /* @__PURE__ */ jsxs20(
   "svg",
   {
@@ -6492,8 +6637,8 @@ var UncheckedIcon = (props) => /* @__PURE__ */ jsxs20(
     viewBox: "0 0 24 24",
     ...props,
     children: [
-      /* @__PURE__ */ jsx42("path", { d: "M0 0h24v24H0z", stroke: "none" }),
-      /* @__PURE__ */ jsx42("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 })
+      /* @__PURE__ */ jsx44("path", { d: "M0 0h24v24H0z", stroke: "none" }),
+      /* @__PURE__ */ jsx44("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 })
     ]
   }
 );
@@ -6512,13 +6657,13 @@ var CheckedIcon = (props) => /* @__PURE__ */ jsxs20(
     viewBox: "0 0 24 24",
     ...props,
     children: [
-      /* @__PURE__ */ jsx42("path", { d: "M0 0h24v24H0z", stroke: "none" }),
-      /* @__PURE__ */ jsx42("path", { d: "m9 11 3 3 8-8", className: "--checkmark" }),
-      /* @__PURE__ */ jsx42("path", { d: "M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9" })
+      /* @__PURE__ */ jsx44("path", { d: "M0 0h24v24H0z", stroke: "none" }),
+      /* @__PURE__ */ jsx44("path", { d: "m9 11 3 3 8-8", className: "--checkmark" }),
+      /* @__PURE__ */ jsx44("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__ */ jsx42(
+var BulletIcon = (props) => /* @__PURE__ */ jsx44(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6527,30 +6672,30 @@ var BulletIcon = (props) => /* @__PURE__ */ jsx42(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx42("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__ */ jsx44("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 jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
 function TaskListItem({
   element,
   attributes,
   children
 }) {
-  const editor = useSlateStatic13();
-  const toggle = useCallback10(() => {
+  const editor = useSlateStatic12();
+  const toggle = useCallback11(() => {
     editor.list.toggleTaskListItem({ at: element });
   }, [editor, element]);
   const marginLeft = `${2 + element.depth * 2}em`;
   return /* @__PURE__ */ jsxs21($TaskListItem, { ...attributes, style: { marginLeft }, children: [
-    /* @__PURE__ */ jsx43("div", { className: "--list-item-icon", contentEditable: false, children: element.checked ? /* @__PURE__ */ jsx43(CheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) : /* @__PURE__ */ jsx43(UncheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) }),
+    /* @__PURE__ */ jsx45("div", { className: "--list-item-icon", contentEditable: false, children: element.checked ? /* @__PURE__ */ jsx45(CheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) : /* @__PURE__ */ jsx45(UncheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) }),
     children
   ] });
 }
 
 // src/list-plugin/render-element/unordered-list-item.tsx
-import { jsx as jsx44, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
 function UnorderedListItem({
   element,
   attributes,
@@ -6558,13 +6703,13 @@ function UnorderedListItem({
 }) {
   const marginLeft = `${2 + element.depth * 2}em`;
   return /* @__PURE__ */ jsxs22($UnorderedListItem, { ...attributes, style: { marginLeft }, children: [
-    /* @__PURE__ */ jsx44("div", { className: "--list-item-icon", contentEditable: false, children: /* @__PURE__ */ jsx44(BulletIcon, {}) }),
+    /* @__PURE__ */ jsx46("div", { className: "--list-item-icon", contentEditable: false, children: /* @__PURE__ */ jsx46(BulletIcon, {}) }),
     children
   ] });
 }
 
 // src/list-plugin/render-element/index.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function renderElement3({
   element,
   attributes,
@@ -6572,11 +6717,11 @@ function renderElement3({
 }) {
   switch (element.type) {
     case "ordered-list-item":
-      return /* @__PURE__ */ jsx45(OrderedListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx47(OrderedListItem, { element, attributes, children });
     case "unordered-list-item":
-      return /* @__PURE__ */ jsx45(UnorderedListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx47(UnorderedListItem, { element, attributes, children });
     case "task-list-item":
-      return /* @__PURE__ */ jsx45(TaskListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx47(TaskListItem, { element, attributes, children });
   }
 }
 
@@ -6683,7 +6828,7 @@ function toggleMark(editor, markKey, unsetKey, { at = editor.selection } = {}) {
         [validMarkKey]: true
       };
     } else {
-      const { [validMarkKey]: _, ...remainingMarks } = editor.activeMarks || {};
+      const { [validMarkKey]: _unused, ...remainingMarks } = editor.activeMarks || {};
       editor.activeMarks = remainingMarks;
     }
   }
@@ -6711,8 +6856,8 @@ function createMarksMethods(editor) {
 }
 
 // src/marks-plugin/styles.tsx
-import styled30 from "@emotion/styled";
-var $MarksSpan = styled30("span")`
+import styled31 from "@emotion/styled";
+var $MarksSpan = styled31("span")`
   &.--bold {
     font-weight: bold;
   }
@@ -6733,12 +6878,12 @@ var $MarksSpan = styled30("span")`
     text-decoration: underline line-through;
   }
   &.--highlight {
-    background-color: #ffeb3b;
+    background-color: #ffff00;
   }
 `;
 
 // src/marks-plugin/index.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var MarksPlugin = createPlugin((editor) => {
   editor.marksPlugin = createMarksMethods(editor);
   editor.activeMarks = {};
@@ -6747,7 +6892,8 @@ var MarksPlugin = createPlugin((editor) => {
     "mod+i": editor.marksPlugin.toggleItalic,
     "mod+u": editor.marksPlugin.toggleUnderline,
     "super+0": editor.marksPlugin.removeMarks,
-    "super+k": editor.marksPlugin.toggleStrike
+    "super+k": editor.marksPlugin.toggleStrike,
+    "mod+h": editor.marksPlugin.toggleHighlight
   });
   const { insertText: defaultInsertText } = editor;
   editor.insertText = (text) => {
@@ -6778,7 +6924,7 @@ var MarksPlugin = createPlugin((editor) => {
     name: "marks",
     editableProps: {
       renderLeaf: ({ leaf, children }) => {
-        return /* @__PURE__ */ jsx46(
+        return /* @__PURE__ */ jsx48(
           $MarksSpan,
           {
             className: clsx7({
@@ -6851,7 +6997,7 @@ var NormalizeAfterDeletePlugin = createPlugin((editor) => {
 import { Element as Element23 } from "slate";
 
 // src/table-plugin/delete-fragment/index.ts
-import { Editor as Editor46, Path as Path12, Transforms as Transforms32 } from "slate";
+import { Editor as Editor46, Path as Path12, Transforms as Transforms31 } from "slate";
 
 // src/table-plugin/delete-fragment/get-reversed-delete-safe-ranges.ts
 import { Editor as Editor45, Path as Path11 } from "slate";
@@ -6906,15 +7052,15 @@ function deleteFragmentWithProtectedTypes(editor, protectedTypes) {
   );
   Editor46.withoutNormalizing(editor, () => {
     for (const range of reversedRanges) {
-      Transforms32.delete(editor, { at: range });
+      Transforms31.delete(editor, { at: range });
     }
-    Transforms32.collapse(editor, { edge: "start" });
+    Transforms31.collapse(editor, { edge: "start" });
   });
   return true;
 }
 
 // src/table-plugin/methods/index.ts
-import { Transforms as Transforms41 } from "slate";
+import { Transforms as Transforms40 } from "slate";
 
 // src/table-plugin/methods/get-table-info.ts
 function getTableInfo(editor, { at = editor.selection } = {}) {
@@ -6952,7 +7098,7 @@ function getTableInfo(editor, { at = editor.selection } = {}) {
 }
 
 // src/table-plugin/methods/insert-column.ts
-import { Editor as Editor47, Transforms as Transforms33 } from "slate";
+import { Editor as Editor47, Transforms as Transforms32 } from "slate";
 
 // src/table-plugin/methods/utils.ts
 function createCell(index, children = [
@@ -6978,9 +7124,9 @@ function insertColumn(editor, { offset = 0, at = editor.selection } = {}) {
     const { columns } = tableElement;
     const nextColumns = [...columns];
     nextColumns.splice(nextCellIndex, 0, columns[nextCellIndex]);
-    Transforms33.setNodes(editor, { columns: nextColumns }, { at: tablePath });
+    Transforms32.setNodes(editor, { columns: nextColumns }, { at: tablePath });
     tableElement.children.forEach((rowElement, i) => {
-      Transforms33.insertNodes(editor, createCell(nextCellIndex), {
+      Transforms32.insertNodes(editor, createCell(nextCellIndex), {
         at: [...tablePath, i, nextCellIndex]
       });
     });
@@ -6989,7 +7135,7 @@ function insertColumn(editor, { offset = 0, at = editor.selection } = {}) {
 }
 
 // src/table-plugin/methods/insert-row.ts
-import { Transforms as Transforms34 } from "slate";
+import { Transforms as Transforms33 } from "slate";
 function createRow(columnCount) {
   return {
     type: "table-row",
@@ -7001,7 +7147,7 @@ function insertRow(editor, { at = editor.selection, offset = 0 } = {}) {
   if (!t2)
     return false;
   const nextRowElement = createRow(t2.tableElement.columns.length);
-  Transforms34.insertNodes(editor, nextRowElement, {
+  Transforms33.insertNodes(editor, nextRowElement, {
     at: [...t2.tablePath, t2.rowIndex + offset]
   });
   return true;
@@ -7011,7 +7157,7 @@ function insertRowBelow(editor, { at } = {}) {
 }
 
 // src/table-plugin/methods/insert-table.ts
-import { Editor as Editor49, Element as Element22, Path as Path13, Transforms as Transforms35 } from "slate";
+import { Editor as Editor49, Element as Element22, Path as Path13, Transforms as Transforms34 } from "slate";
 function createRange(size) {
   return [...Array(size).keys()];
 }
@@ -7045,17 +7191,17 @@ function insertRootElement2(editor, element, { at = editor.selection } = {}) {
   if (entry == null) {
     const selection = editor.selection;
     Editor49.withoutNormalizing(editor, () => {
-      Transforms35.insertNodes(editor, element, { at });
+      Transforms34.insertNodes(editor, element, { at });
       if (selection) {
-        Transforms35.select(editor, selection);
-        Transforms35.move(editor);
+        Transforms34.select(editor, selection);
+        Transforms34.move(editor);
       }
     });
   } else {
     const nextPath = Path13.next(entry[1]);
     Editor49.withoutNormalizing(editor, () => {
-      Transforms35.insertNodes(editor, element, { at: nextPath });
-      Transforms35.select(editor, Editor49.start(editor, nextPath));
+      Transforms34.insertNodes(editor, element, { at: nextPath });
+      Transforms34.select(editor, Editor49.start(editor, nextPath));
     });
   }
   return true;
@@ -7072,7 +7218,7 @@ function selectElementBelow(editor, t2) {
   try {
     selectStartOfElement(editor, Path14.next(tablePath));
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 }
@@ -7085,7 +7231,7 @@ function selectElementAbove(editor, t2) {
   try {
     selectEndOfElement(editor, Path14.previous(tablePath));
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 }
@@ -7135,15 +7281,15 @@ function up(editor) {
 }
 
 // src/table-plugin/methods/remove-column.ts
-import { Editor as Editor52, Transforms as Transforms37 } from "slate";
+import { Editor as Editor52, Transforms as Transforms36 } from "slate";
 
 // src/table-plugin/methods/remove-table.ts
-import { Transforms as Transforms36 } from "slate";
+import { Transforms as Transforms35 } from "slate";
 function removeTable(editor) {
   const t2 = editor.tablePlugin.getTableInfo();
   if (t2 === void 0)
     return false;
-  Transforms36.removeNodes(editor, { at: t2.tablePath });
+  Transforms35.removeNodes(editor, { at: t2.tablePath });
   return true;
 }
 
@@ -7159,9 +7305,9 @@ function removeColumn(editor, { at = editor.selection } = {}) {
   Editor52.withoutNormalizing(editor, () => {
     const columns = [...tableElement.columns];
     columns.splice(cellIndex, 1);
-    Transforms37.setNodes(editor, { columns }, { at: tablePath });
+    Transforms36.setNodes(editor, { columns }, { at: tablePath });
     tableElement.children.forEach((rowElement, rowIndex2) => {
-      Transforms37.removeNodes(editor, {
+      Transforms36.removeNodes(editor, {
         at: [...tablePath, rowIndex2, cellIndex]
       });
     });
@@ -7170,12 +7316,12 @@ function removeColumn(editor, { at = editor.selection } = {}) {
       rowIndex,
       Math.min(cellIndex, cellCount - 2)
     ]);
-    Transforms37.select(editor, selection);
+    Transforms36.select(editor, selection);
   });
 }
 
 // src/table-plugin/methods/remove-row.ts
-import { Editor as Editor53, Transforms as Transforms38 } from "slate";
+import { Editor as Editor53, Transforms as Transforms37 } from "slate";
 function removeRow(editor, { at = editor.selection } = {}) {
   const t2 = getTableInfo(editor, { at });
   if (t2 === void 0)
@@ -7185,8 +7331,8 @@ function removeRow(editor, { at = editor.selection } = {}) {
     return true;
   }
   Editor53.withoutNormalizing(editor, () => {
-    Transforms38.removeNodes(editor, { at: t2.rowPath });
-    Transforms38.select(
+    Transforms37.removeNodes(editor, { at: t2.rowPath });
+    Transforms37.select(
       editor,
       Editor53.start(editor, [
         ...t2.tablePath,
@@ -7199,7 +7345,7 @@ function removeRow(editor, { at = editor.selection } = {}) {
 }
 
 // src/table-plugin/methods/setTableColumnAlign.ts
-import { Transforms as Transforms39 } from "slate";
+import { Transforms as Transforms38 } from "slate";
 function setTableColumnAlign(editor, options) {
   const t2 = getTableInfo(editor);
   if (t2 === void 0)
@@ -7207,12 +7353,12 @@ function setTableColumnAlign(editor, options) {
   const { tableElement, tablePath, cellIndex } = t2;
   const nextColumns = tableElement.columns.slice();
   nextColumns.splice(cellIndex, 1, { align: options.align });
-  Transforms39.setNodes(editor, { columns: nextColumns }, { at: tablePath });
+  Transforms38.setNodes(editor, { columns: nextColumns }, { at: tablePath });
   return true;
 }
 
 // src/table-plugin/methods/tab.ts
-import { Path as Path15, Transforms as Transforms40 } from "slate";
+import { Path as Path15, Transforms as Transforms39 } from "slate";
 function tabForward(editor) {
   const t2 = getTableInfo(editor);
   if (!t2)
@@ -7227,7 +7373,7 @@ function tabForward(editor) {
     return true;
   }
   const nextPath = Path15.next(tablePath);
-  Transforms40.insertNodes(
+  Transforms39.insertNodes(
     editor,
     { type: "paragraph", children: [{ text: "" }] },
     { at: nextPath }
@@ -7291,12 +7437,12 @@ function selectCell(editor, { at = editor.selection } = {}) {
   if (t2 === void 0)
     return false;
   const { cellPath } = t2;
-  Transforms41.select(editor, cellPath);
+  Transforms40.select(editor, cellPath);
   return true;
 }
 
 // src/table-plugin/normalize/normalize-table.ts
-import { Transforms as Transforms42 } from "slate";
+import { Transforms as Transforms41 } from "slate";
 function normalizeTableIndexes(editor, entry) {
   let isTransformed = false;
   const rowElements = entry[0].children;
@@ -7304,7 +7450,7 @@ function normalizeTableIndexes(editor, entry) {
     const cellElements = rowElement.children;
     cellElements.forEach((cellElement, x) => {
       if (cellElement.x !== x || cellElement.y !== y) {
-        Transforms42.setNodes(editor, { x, y }, { at: [...entry[1], y, x] });
+        Transforms41.setNodes(editor, { x, y }, { at: [...entry[1], y, x] });
         isTransformed = true;
       }
     });
@@ -7313,14 +7459,14 @@ function normalizeTableIndexes(editor, entry) {
 }
 
 // src/table-plugin/normalize/normalize-table-cell.ts
-import { Editor as Editor58, Transforms as Transforms43 } from "slate";
+import { Editor as Editor58, Transforms as Transforms42 } from "slate";
 function normalizeTableCell(editor, entry) {
   const [node, path] = entry;
   if (node.children.length === 1 && node.children[0].type === "table-content") {
     return false;
   }
   Editor58.withoutNormalizing(editor, () => {
-    Transforms43.insertNodes(
+    Transforms42.insertNodes(
       editor,
       {
         type: "table-content",
@@ -7329,9 +7475,9 @@ function normalizeTableCell(editor, entry) {
       { at: [...entry[1], 0] }
     );
     for (let i = node.children.length; i >= 0; i--) {
-      Transforms43.mergeNodes(editor, { at: [...path, i] });
+      Transforms42.mergeNodes(editor, { at: [...path, i] });
     }
-    Transforms43.delete(editor, {
+    Transforms42.delete(editor, {
       at: { path: [...path, 0, 0], offset: 0 },
       unit: "character"
     });
@@ -7341,14 +7487,14 @@ function normalizeTableCell(editor, entry) {
 
 // src/table-plugin/render-element/table.tsx
 import { useEffect as useEffect6 } from "react";
-import { ReactEditor as ReactEditor12, useSelected as useSelected7, useSlateStatic as useSlateStatic14 } from "slate-react";
+import { ReactEditor as ReactEditor12, useSelected as useSelected7, useSlateStatic as useSlateStatic13 } from "slate-react";
 
 // src/table-plugin/render-element/styles/index.ts
-import styled32 from "@emotion/styled";
+import styled33 from "@emotion/styled";
 
 // src/table-plugin/render-element/styles/table-menu-styles.ts
-import styled31 from "@emotion/styled";
-var $BaseMenu = styled31("div")`
+import styled32 from "@emotion/styled";
+var $BaseMenu = styled32("div")`
   position: absolute;
   /**
    * very slightly shaded
@@ -7373,7 +7519,7 @@ var $BaseMenu = styled31("div")`
     }
   }
 `;
-var $ColumnMenu = styled31($BaseMenu)`
+var $ColumnMenu = styled32($BaseMenu)`
   cursor: pointer;
   /**
    * hangs out on top
@@ -7384,7 +7530,7 @@ var $ColumnMenu = styled31($BaseMenu)`
   height: 3em;
   top: -3em;
 `;
-var $RowMenu = styled31($BaseMenu)`
+var $RowMenu = styled32($BaseMenu)`
   /**
    * hangs out on left
    */
@@ -7393,7 +7539,7 @@ var $RowMenu = styled31($BaseMenu)`
   width: 3em;
   left: -3em;
 `;
-var $MenuTile = styled31("div")`
+var $MenuTile = styled32("div")`
   position: absolute;
   background: rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.05);
@@ -7406,7 +7552,7 @@ var $MenuTile = styled31("div")`
   right: 0;
   bottom: 0;
 `;
-var $ColumnMenuTile = styled31($MenuTile)`
+var $ColumnMenuTile = styled32($MenuTile)`
   top: 50%;
   border-bottom: none;
   border-right: none;
@@ -7433,7 +7579,7 @@ var $ColumnMenuTile = styled31($MenuTile)`
   /* border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em; */
 `;
-var $RowMenuTile = styled31($MenuTile)`
+var $RowMenuTile = styled32($MenuTile)`
   left: 50%;
   border-right: none;
   border-bottom: none;
@@ -7460,7 +7606,7 @@ var $RowMenuTile = styled31($MenuTile)`
   /* border-top-left-radius: 0.5em;
   border-bottom-left-radius: 0.5em; */
 `;
-var $MenuButton = styled31("div")`
+var $MenuButton = styled32("div")`
   position: absolute;
   font-size: 1.5em;
   background: white;
@@ -7470,13 +7616,13 @@ var $MenuButton = styled31("div")`
     display: block;
   }
 `;
-var $AddMenuButton = styled31($MenuButton)`
+var $AddMenuButton = styled32($MenuButton)`
   color: #c0c0c0;
   &:hover {
     color: royalblue;
   }
 `;
-var $RemoveMenuButton = styled31($MenuButton)`
+var $RemoveMenuButton = styled32($MenuButton)`
   color: #c0c0c0;
   &:hover {
     color: firebrick;
@@ -7484,20 +7630,20 @@ var $RemoveMenuButton = styled31($MenuButton)`
 `;
 
 // src/table-plugin/render-element/styles/index.ts
-var $Table = styled32("table")`
+var $Table = styled33("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 = styled32("tr")`
+var $TableRow = styled33("tr")`
   position: relative;
   &:first-of-type {
     background: var(--table-head-bgcolor);
   }
 `;
-var $TableCell = styled32("td")`
+var $TableCell = styled33("td")`
   position: relative;
   border-width: 1px;
   border-style: solid;
@@ -7518,7 +7664,7 @@ var $TableCell = styled32("td")`
     border-right-color: var(--table-border-color);
   }
 `;
-var $TableContent = styled32("div")`
+var $TableContent = styled33("div")`
   /**
    * Smaller font inside a table than outside of it
    */
@@ -7539,19 +7685,19 @@ var TableContext = createContext2({
 });
 
 // src/table-plugin/render-element/table.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function Table({
   element,
   attributes,
   children
 }) {
-  const editor = useSlateStatic14();
+  const editor = useSlateStatic13();
   const isSelected = useSelected7();
   useEffect6(() => {
     const path = ReactEditor12.findPath(editor, element);
     normalizeTableIndexes(editor, [element, path]);
   }, []);
-  return /* @__PURE__ */ jsx47(TableContext.Provider, { value: { isSelected }, children: /* @__PURE__ */ jsx47($Table, { ...attributes, columns: element.columns, children: /* @__PURE__ */ jsx47("tbody", { children }) }) });
+  return /* @__PURE__ */ jsx49(TableContext.Provider, { value: { isSelected }, children: /* @__PURE__ */ jsx49($Table, { ...attributes, columns: element.columns, children: /* @__PURE__ */ jsx49("tbody", { children }) }) });
 }
 
 // src/table-plugin/render-element/table-cell/index.tsx
@@ -7559,12 +7705,12 @@ import { useContext as useContext2 } from "react";
 import { useSelected as useSelected8 } from "slate-react";
 
 // src/table-plugin/render-element/table-cell/column-menu/index.tsx
-import { useCallback as useCallback11, useRef as useRef5, useState as useState6 } from "react";
-import { useSlateStatic as useSlateStatic15 } from "slate-react";
+import { useCallback as useCallback12, useRef as useRef7, useState as useState6 } from "react";
+import { useSlateStatic as useSlateStatic14 } from "slate-react";
 
 // src/table-plugin/icons.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var PlusIcon = (props) => /* @__PURE__ */ jsx48(
+import { jsx as jsx50 } from "react/jsx-runtime";
+var PlusIcon = (props) => /* @__PURE__ */ jsx50(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7573,7 +7719,7 @@ var PlusIcon = (props) => /* @__PURE__ */ jsx48(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx48(
+    children: /* @__PURE__ */ jsx50(
       "path",
       {
         fillRule: "evenodd",
@@ -7583,7 +7729,7 @@ var PlusIcon = (props) => /* @__PURE__ */ jsx48(
     )
   }
 );
-var MinusIcon = (props) => /* @__PURE__ */ jsx48(
+var MinusIcon = (props) => /* @__PURE__ */ jsx50(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7592,7 +7738,7 @@ var MinusIcon = (props) => /* @__PURE__ */ jsx48(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx48(
+    children: /* @__PURE__ */ jsx50(
       "path",
       {
         fillRule: "evenodd",
@@ -7602,25 +7748,25 @@ var MinusIcon = (props) => /* @__PURE__ */ jsx48(
     )
   }
 );
-var BarsIcon = () => /* @__PURE__ */ jsx48(TablerIcon, { children: /* @__PURE__ */ jsx48("path", { d: "M4 6h16M4 12h16M4 18h16" }) });
-var AlignLeft = () => /* @__PURE__ */ jsx48(TablerIcon, { children: /* @__PURE__ */ jsx48("path", { d: "M4 6h16M4 12h10M4 18h14" }) });
-var AlignCenter = () => /* @__PURE__ */ jsx48(TablerIcon, { children: /* @__PURE__ */ jsx48("path", { d: "M4 6h16M8 12h8M6 18h12" }) });
-var AlignRight = () => /* @__PURE__ */ jsx48(TablerIcon, { children: /* @__PURE__ */ jsx48("path", { d: "M4 6h16M10 12h10M6 18h14" }) });
+var BarsIcon = () => /* @__PURE__ */ jsx50(TablerIcon, { children: /* @__PURE__ */ jsx50("path", { d: "M4 6h16M4 12h16M4 18h16" }) });
+var AlignLeft = () => /* @__PURE__ */ jsx50(TablerIcon, { children: /* @__PURE__ */ jsx50("path", { d: "M4 6h16M4 12h10M4 18h14" }) });
+var AlignCenter = () => /* @__PURE__ */ jsx50(TablerIcon, { children: /* @__PURE__ */ jsx50("path", { d: "M4 6h16M8 12h8M6 18h12" }) });
+var AlignRight = () => /* @__PURE__ */ jsx50(TablerIcon, { children: /* @__PURE__ */ jsx50("path", { d: "M4 6h16M10 12h10M6 18h14" }) });
 
 // src/table-plugin/render-element/table-cell/column-menu/index.tsx
-import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
 function ColumnMenu({ cellElement }) {
-  const editor = useSlateStatic15();
+  const editor = useSlateStatic14();
   const menu = useLayer("column-menu");
-  const buttonRef = useRef5(null);
+  const buttonRef = useRef7(null);
   const [hover, setHover] = useState6(false);
-  const onMouseEnter = useCallback11(() => {
+  const onMouseEnter = useCallback12(() => {
     setHover(true);
   }, []);
-  const onMouseLeave = useCallback11(() => {
+  const onMouseLeave = useCallback12(() => {
     setHover(false);
   }, []);
-  const onClick = useCallback11(() => {
+  const onClick = useCallback12(() => {
     if (menu.layer)
       menu.close();
     const dest = buttonRef.current;
@@ -7649,7 +7795,7 @@ function ColumnMenu({ cellElement }) {
         }
       }
     ];
-    menu.open(() => /* @__PURE__ */ jsx49(Menu, { dest, items, close: menu.close }));
+    menu.open(() => /* @__PURE__ */ jsx51(Menu, { dest, items, close: menu.close }));
   }, []);
   return /* @__PURE__ */ jsxs23(
     $ColumnMenu,
@@ -7660,9 +7806,9 @@ function ColumnMenu({ cellElement }) {
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ jsx49($ColumnMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx49(BarsIcon, {}) }),
+        /* @__PURE__ */ jsx51($ColumnMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx51(BarsIcon, {}) }),
         hover ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             $RemoveMenuButton,
             {
               style: {
@@ -7671,23 +7817,23 @@ function ColumnMenu({ cellElement }) {
                 marginLeft: "-0.5em"
               },
               onMouseDown: () => editor.tablePlugin.removeColumn({ at: cellElement }),
-              children: /* @__PURE__ */ jsx49(MinusIcon, {})
+              children: /* @__PURE__ */ jsx51(MinusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             $AddMenuButton,
             {
               style: { left: "-0.5em", top: 0 },
               onMouseDown: () => editor.tablePlugin.insertColumn({ at: cellElement }),
-              children: /* @__PURE__ */ jsx49(PlusIcon, {})
+              children: /* @__PURE__ */ jsx51(PlusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx51(
             $AddMenuButton,
             {
               style: { right: "-0.5em", top: 0 },
               onMouseDown: () => editor.tablePlugin.insertColumn({ at: cellElement, offset: 1 }),
-              children: /* @__PURE__ */ jsx49(PlusIcon, {})
+              children: /* @__PURE__ */ jsx51(PlusIcon, {})
             }
           )
         ] }) : null
@@ -7698,10 +7844,10 @@ function ColumnMenu({ cellElement }) {
 
 // src/table-plugin/render-element/table-cell/row-menu/index.tsx
 import { useState as useState7 } from "react";
-import { useSlateStatic as useSlateStatic16 } from "slate-react";
-import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useSlateStatic as useSlateStatic15 } from "slate-react";
+import { Fragment as Fragment5, jsx as jsx52, jsxs as jsxs24 } from "react/jsx-runtime";
 function RowMenu({ cellElement }) {
-  const editor = useSlateStatic16();
+  const editor = useSlateStatic15();
   const [hover, setHover] = useState7(false);
   return /* @__PURE__ */ jsxs24(
     $RowMenu,
@@ -7710,9 +7856,9 @@ function RowMenu({ cellElement }) {
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
       children: [
-        /* @__PURE__ */ jsx50($RowMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx50(BarsIcon, {}) }),
+        /* @__PURE__ */ jsx52($RowMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx52(BarsIcon, {}) }),
         hover ? /* @__PURE__ */ jsxs24(Fragment5, { children: [
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx52(
             $RemoveMenuButton,
             {
               style: {
@@ -7721,23 +7867,23 @@ function RowMenu({ cellElement }) {
                 marginTop: "-0.5em"
               },
               onMouseDown: () => editor.tablePlugin.removeRow({ at: cellElement }),
-              children: /* @__PURE__ */ jsx50(MinusIcon, {})
+              children: /* @__PURE__ */ jsx52(MinusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx52(
             $AddMenuButton,
             {
               style: { top: "-0.5em", left: "0.5em" },
               onMouseDown: () => editor.tablePlugin.insertRow({ at: cellElement }),
-              children: /* @__PURE__ */ jsx50(PlusIcon, {})
+              children: /* @__PURE__ */ jsx52(PlusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx52(
             $AddMenuButton,
             {
               style: { bottom: "-0.5em", left: "0.5em" },
               onMouseDown: () => editor.tablePlugin.insertRow({ at: cellElement, offset: 1 }),
-              children: /* @__PURE__ */ jsx50(PlusIcon, {})
+              children: /* @__PURE__ */ jsx52(PlusIcon, {})
             }
           )
         ] }) : null
@@ -7747,8 +7893,8 @@ function RowMenu({ cellElement }) {
 }
 
 // src/table-plugin/render-element/table-cell/table-menu/$table-menu.tsx
-import styled33 from "@emotion/styled";
-var $TableMenu = styled33("div")`
+import styled34 from "@emotion/styled";
+var $TableMenu = styled34("div")`
   position: absolute;
   /**
    * very slightly shaded
@@ -7781,7 +7927,7 @@ var $TableMenu = styled33("div")`
     }
   }
 `;
-var $TableMenuTile = styled33("div")`
+var $TableMenuTile = styled34("div")`
   position: absolute;
   left: 0;
   top: 0;
@@ -7792,13 +7938,13 @@ var $TableMenuTile = styled33("div")`
 `;
 
 // src/table-plugin/render-element/table-cell/table-menu/index.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function TableMenu() {
-  return /* @__PURE__ */ jsx51($TableMenu, { contentEditable: false, children: /* @__PURE__ */ jsx51($TableMenuTile, { className: "--table-menu-tile" }) });
+  return /* @__PURE__ */ jsx53($TableMenu, { contentEditable: false, children: /* @__PURE__ */ jsx53($TableMenuTile, { className: "--table-menu-tile" }) });
 }
 
 // src/table-plugin/render-element/table-cell/index.tsx
-import { jsx as jsx52, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs25 } from "react/jsx-runtime";
 function TableCell({
   element,
   attributes,
@@ -7818,34 +7964,34 @@ function TableCell({
       "data-y": element.y,
       children: [
         children,
-        showTableMenu ? /* @__PURE__ */ jsx52(TableMenu, {}) : null,
-        showRowMenu ? /* @__PURE__ */ jsx52(RowMenu, { cellElement: element }) : null,
-        showColumnMenu ? /* @__PURE__ */ jsx52(ColumnMenu, { cellElement: element }) : null
+        showTableMenu ? /* @__PURE__ */ jsx54(TableMenu, {}) : null,
+        showRowMenu ? /* @__PURE__ */ jsx54(RowMenu, { cellElement: element }) : null,
+        showColumnMenu ? /* @__PURE__ */ jsx54(ColumnMenu, { cellElement: element }) : null
       ]
     }
   );
 }
 
 // src/table-plugin/render-element/table-content.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function TableContent({
   attributes,
   children
 }) {
-  return /* @__PURE__ */ jsx53($TableContent, { ...attributes, children });
+  return /* @__PURE__ */ jsx55($TableContent, { ...attributes, children });
 }
 
 // src/table-plugin/render-element/table-row.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function TableRow({
   attributes,
   children
 }) {
-  return /* @__PURE__ */ jsx54($TableRow, { ...attributes, children });
+  return /* @__PURE__ */ jsx56($TableRow, { ...attributes, children });
 }
 
 // src/table-plugin/render-element/index.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function renderElement4({
   element,
   attributes,
@@ -7853,13 +7999,13 @@ function renderElement4({
 }) {
   switch (element.type) {
     case "table":
-      return /* @__PURE__ */ jsx55(Table, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(Table, { element, attributes, children });
     case "table-row":
-      return /* @__PURE__ */ jsx55(TableRow, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(TableRow, { element, attributes, children });
     case "table-cell":
-      return /* @__PURE__ */ jsx55(TableCell, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(TableCell, { element, attributes, children });
     case "table-content":
-      return /* @__PURE__ */ jsx55(TableContent, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(TableContent, { element, attributes, children });
   }
 }
 
@@ -8003,7 +8149,7 @@ var globalStyles = css2`
 `;
 
 // src/theme-plugin/index.tsx
-import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
 var ThemePlugin = createPlugin((editor) => {
   editor.theme = true;
   return {
@@ -8011,8 +8157,8 @@ var ThemePlugin = createPlugin((editor) => {
     editor: {},
     renderEditable: ({ attributes, Editable: Editable3 }) => {
       return /* @__PURE__ */ jsxs26(Fragment6, { children: [
-        /* @__PURE__ */ jsx56(Global, { styles: globalStyles }),
-        /* @__PURE__ */ jsx56(Editable3, { ...attributes })
+        /* @__PURE__ */ jsx58(Global, { styles: globalStyles }),
+        /* @__PURE__ */ jsx58(Editable3, { ...attributes })
       ] });
     },
     editableProps: {}
@@ -8021,27 +8167,27 @@ var ThemePlugin = createPlugin((editor) => {
 
 // src/toolbar-plugin/render-editable/index.tsx
 import { clsx as clsx10 } from "clsx";
-import { useCallback as useCallback15, useRef as useRef11 } from "react";
-import { Editor as Editor62, Transforms as Transforms45 } from "slate";
-import { ReactEditor as ReactEditor16, useFocused, useSlateStatic as useSlateStatic22 } from "slate-react";
+import { useCallback as useCallback17, useRef as useRef13 } from "react";
+import { Editor as Editor62, Transforms as Transforms44 } from "slate";
+import { ReactEditor as ReactEditor16, useFocused, useSlateStatic as useSlateStatic21 } from "slate-react";
 
 // src/toolbar-plugin/components/dialog/table-dialog.tsx
 import { clsx as clsx8 } from "clsx";
-import { useCallback as useCallback12, useRef as useRef6, useState as useState8 } from "react";
-import { ReactEditor as ReactEditor13, useSlateStatic as useSlateStatic17 } from "slate-react";
+import { useCallback as useCallback13, useRef as useRef8, useState as useState8 } from "react";
+import { ReactEditor as ReactEditor13, useSlateStatic as useSlateStatic16 } from "slate-react";
 
 // src/toolbar-plugin/styles/table-styles.ts
-import styled34 from "@emotion/styled";
-var $TableDialog = styled34($Panel)`
+import styled35 from "@emotion/styled";
+var $TableDialog = styled35($Panel)`
   padding: 0.5em;
 `;
-var $TableDialogGrid = styled34("div")`
+var $TableDialogGrid = styled35("div")`
   display: grid;
   grid-template-columns: repeat(5, 1.75em);
   grid-template-rows: 1.5em;
   /* grid-gap: 1px; */
 `;
-var $TableDialogGridCell = styled34("div")`
+var $TableDialogGridCell = styled35("div")`
   background: var(--shade-100);
   height: 1.5em;
   border-radius: 0.125em;
@@ -8054,7 +8200,7 @@ var $TableDialogGridCell = styled34("div")`
 `;
 
 // src/toolbar-plugin/components/dialog/table-dialog.tsx
-import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
 function createRange2(size) {
   return [...Array(size).keys()];
 }
@@ -8063,20 +8209,20 @@ function TableDialog({
   close
 }) {
   const [hover, setHover] = useState8({ x: 0, y: 0 });
-  const editor = useSlateStatic17();
-  const ref = useRef6(null);
+  const editor = useSlateStatic16();
+  const ref = useRef8(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 = useCallback12(
+  const hoverCell = useCallback13(
     (x, y) => {
       setHover({ x, y });
     },
     [setHover]
   );
-  const createTable2 = useCallback12(
+  const createTable2 = useCallback13(
     (x, y) => {
       editor.tablePlugin.insertTable(x, y);
       ReactEditor13.focus(editor);
@@ -8085,11 +8231,11 @@ function TableDialog({
     [editor]
   );
   return /* @__PURE__ */ jsxs27(Fragment7, { children: [
-    /* @__PURE__ */ jsx57(CloseMask, { close }),
-    /* @__PURE__ */ jsx57($TableDialog, { ref, style, children: /* @__PURE__ */ jsx57($TableDialogGrid, { onMouseLeave: () => hoverCell(0, 0), children: rows.map((y) => {
+    /* @__PURE__ */ jsx59(CloseMask, { close }),
+    /* @__PURE__ */ jsx59($TableDialog, { ref, style, children: /* @__PURE__ */ jsx59($TableDialogGrid, { onMouseLeave: () => hoverCell(0, 0), children: rows.map((y) => {
       return cols.map((x) => {
         const selected = x <= hover.x && y <= hover.y;
-        return /* @__PURE__ */ jsx57(
+        return /* @__PURE__ */ jsx59(
           $TableDialogGridCell,
           {
             className: clsx8({ "--selected": selected }),
@@ -8105,66 +8251,57 @@ function TableDialog({
 
 // src/toolbar-plugin/components/toolbar/toolbar.tsx
 import throttle2 from "lodash.throttle";
-import { useEffect as useEffect8, useRef as useRef10, useState as useState11 } from "react";
-import { useSlateStatic as useSlateStatic21 } from "slate-react";
+import { useEffect as useEffect8, useRef as useRef12, useState as useState11 } from "react";
+import { useSlateStatic as useSlateStatic20 } from "slate-react";
 
 // src/toolbar-plugin/icons.tsx
-import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
-var H = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M7 12h10M7 5v14M17 5v14M15 19h4M15 5h4M5 19h4M5 5h4" }) });
-var More = () => /* @__PURE__ */ jsx58(TablerIcon, { className: "--more-icon", width: "0.5em", viewBox: "0 0 12 24", children: /* @__PURE__ */ jsx58("path", { d: "m2 12 4 4 4-4" }) });
-var LinkPlus = () => /* @__PURE__ */ jsx58(TablerIcon, { width: "0.5em", viewBox: "6 0 12 24", children: /* @__PURE__ */ jsx58("path", { d: "M9 12h6M12 9v6" }) });
-var H1 = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M19 18v-8l-2 2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
-var H2 = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("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__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("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__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M8 18V6h2l6 9V6h2v12h-2l-6-9v9H8z" }) });
-var Bold = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("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__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M11 5h6M7 19h6M14 5l-4 14" }) });
+import { jsx as jsx60, jsxs as jsxs28 } from "react/jsx-runtime";
+var H = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M7 12h10M7 5v14M17 5v14M15 19h4M15 5h4M5 19h4M5 5h4" }) });
+var More = () => /* @__PURE__ */ jsx60(TablerIcon, { className: "--more-icon", width: "0.5em", viewBox: "0 0 12 24", children: /* @__PURE__ */ jsx60("path", { d: "m2 12 4 4 4-4" }) });
+var LinkPlus = () => /* @__PURE__ */ jsx60(TablerIcon, { width: "0.5em", viewBox: "6 0 12 24", children: /* @__PURE__ */ jsx60("path", { d: "M9 12h6M12 9v6" }) });
+var H1 = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M19 18v-8l-2 2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
+var H2 = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("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__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("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__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M8 18V6h2l6 9V6h2v12h-2l-6-9v9H8z" }) });
+var Bold = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("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__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M11 5h6M7 19h6M14 5l-4 14" }) });
 var Link = () => /* @__PURE__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("path", { d: "M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5" }),
-  /* @__PURE__ */ jsx58("path", { d: "M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5" })
+  /* @__PURE__ */ jsx60("path", { d: "M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5" }),
+  /* @__PURE__ */ jsx60("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__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("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 Quote = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("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__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("path", { d: "M10 9l4 3-4 3" }),
-  /* @__PURE__ */ jsx58("path", { d: "M16 9l4 3-4 3" })
+  /* @__PURE__ */ jsx60("path", { d: "M10 9l4 3-4 3" }),
+  /* @__PURE__ */ jsx60("path", { d: "M16 9l4 3-4 3" })
 ] });
-var BulletList = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01" }) });
+var BulletList = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01" }) });
 var Table2 = () => /* @__PURE__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 }),
-  /* @__PURE__ */ jsx58("path", { d: "M4 10h16M10 4v16" })
+  /* @__PURE__ */ jsx60("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 }),
+  /* @__PURE__ */ jsx60("path", { d: "M4 10h16M10 4v16" })
 ] });
-var Code = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "m7 8-4 4 4 4M17 8l4 4-4 4M14 4l-4 16" }) });
-var CodeBlock2 = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M9 8L5 12L9 16M15 8L19 12L15 16" }) });
+var Code = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "m7 8-4 4 4 4M17 8l4 4-4 4M14 4l-4 16" }) });
+var CodeBlock2 = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M9 8L5 12L9 16M15 8L19 12L15 16" }) });
 var Image = () => /* @__PURE__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("path", { d: "M15 8h.01" }),
-  /* @__PURE__ */ jsx58("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3 }),
-  /* @__PURE__ */ jsx58("path", { d: "m4 15 4-4a3 5 0 0 1 3 0l5 5" }),
-  /* @__PURE__ */ jsx58("path", { d: "m14 14 1-1a3 5 0 0 1 3 0l2 2" })
+  /* @__PURE__ */ jsx60("path", { d: "M15 8h.01" }),
+  /* @__PURE__ */ jsx60("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3 }),
+  /* @__PURE__ */ jsx60("path", { d: "m4 15 4-4a3 5 0 0 1 3 0l5 5" }),
+  /* @__PURE__ */ jsx60("path", { d: "m14 14 1-1a3 5 0 0 1 3 0l2 2" })
 ] });
-var Plus = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M12 5v14M5 12h14" }) });
-var Strikethrough = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("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__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M7 5v5a5 5 0 0 0 10 0V5M5 19h14" }) });
+var Plus = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M12 5v14M5 12h14" }) });
+var Strikethrough = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("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__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M7 5v5a5 5 0 0 0 10 0V5M5 19h14" }) });
 var ListCheck = () => /* @__PURE__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("path", { d: "m9 11 3 3 8-8" }),
-  /* @__PURE__ */ jsx58("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__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("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__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M4 6h16M8 12h12M12 18h8M7 12l-3-3M7 12l-3 3" }) });
-var DecreaseDepth = () => /* @__PURE__ */ jsx58(TablerIcon, { children: /* @__PURE__ */ jsx58("path", { d: "M4 6h16M8 12h12M12 18h8M4 12l3-3M4 12l3 3" }) });
-var Markdown = () => /* @__PURE__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("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__ */ jsx58("path", { d: "M7 15V9l2 2 2-2v6M14 9v6h4M14 13h2" })
-] });
-var VisualEditor = () => /* @__PURE__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("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__ */ jsx58("path", { d: "M8 8h8M8 12h8M8 16h5" }),
-  /* @__PURE__ */ jsx58("path", { d: "M16 16h1" })
+  /* @__PURE__ */ jsx60("path", { d: "m9 11 3 3 8-8" }),
+  /* @__PURE__ */ jsx60("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__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("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__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M4 6h16M8 12h12M12 18h8M7 12l-3-3M7 12l-3 3" }) });
+var DecreaseDepth = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M4 6h16M8 12h12M12 18h8M4 12l3-3M4 12l3 3" }) });
+var Close = () => /* @__PURE__ */ jsx60(TablerIcon, { children: /* @__PURE__ */ jsx60("path", { d: "M18 6L6 18M6 6l12 12" }) });
 var Highlight = () => /* @__PURE__ */ jsxs28(TablerIcon, { children: [
-  /* @__PURE__ */ jsx58("path", { d: "M3 19h4L17.5 8.5a2.828 2.828 0 1 0-4-4L3 15v4" }),
-  /* @__PURE__ */ jsx58("path", { d: "m12.5 5.5 4 4" }),
-  /* @__PURE__ */ jsx58("path", { d: "M3 21h7" }),
-  /* @__PURE__ */ jsx58("path", { d: "M18 19h3M19.5 17.5v3" })
+  /* @__PURE__ */ jsx60("path", { d: "M4 20h4l10.5-10.5a2.828 2.828 0 1 0-4-4L4 16v4" }),
+  /* @__PURE__ */ jsx60("path", { d: "M13.5 6.5l4 4" }),
+  /* @__PURE__ */ jsx60("path", { d: "m14 19 6-6M18 15l2 2M5 21h4" })
 ] });
 
 // src/toolbar-plugin/items/block-items.tsx
@@ -8173,17 +8310,15 @@ var listDepthItems = [
     icon: IncreaseDepth,
     title: t("increaseDepth"),
     hotkey: "tab",
-    action: (editor) => editor.list?.increaseDepth(),
-    active: (editor) => editor.list?.canIncreaseDepth() ?? false,
-    show: (editor) => !!editor.list
+    action: (editor) => editor.list.increaseDepth(),
+    active: (editor) => editor.list.canIncreaseDepth()
   },
   {
     icon: DecreaseDepth,
     title: t("decreaseDepth"),
     hotkey: "shift+tab",
-    action: (editor) => editor.list?.decreaseDepth(),
-    active: (editor) => editor.list?.canDecreaseDepth() ?? false,
-    show: (editor) => !!editor.list
+    action: (editor) => editor.list.decreaseDepth(),
+    active: (editor) => editor.list.canDecreaseDepth()
   }
 ];
 var blockItems = [
@@ -8228,33 +8363,51 @@ var compactBlockItems = [
 ];
 
 // src/toolbar-plugin/components/dialog/image-url-dialog.tsx
-import { useState as useState9, useRef as useRef7, useEffect as useEffect7 } from "react";
-import { useSlateStatic as useSlateStatic18 } from "slate-react";
+import { useState as useState9, useRef as useRef9, useEffect as useEffect7, useCallback as useCallback14 } from "react";
+import { useSlateStatic as useSlateStatic17 } from "slate-react";
 
 // src/toolbar-plugin/styles/file-dialog-styles.ts
-import styled35 from "@emotion/styled";
-var $FileDialog = styled35($Panel)`
-  padding: 1em;
+import styled36 from "@emotion/styled";
+var $FileDialog = styled36($Panel)`
   width: 18em;
+  padding: 0;
+  overflow: hidden;
 `;
 
 // src/toolbar-plugin/components/dialog/image-url-dialog.tsx
-import { Fragment as Fragment8, jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs29 } from "react/jsx-runtime";
 function ImageUrlDialog({
   dest,
   close
 }) {
-  const editor = useSlateStatic18();
-  const ref = useRef7(void 0);
-  const fileInputRef = useRef7(null);
+  const editor = useSlateStatic17();
+  const ref = useRef9(void 0);
+  const fileInputRef = useRef9(null);
+  const [dragOffset, setDragOffset] = useState9({ x: 0, y: 0 });
+  const handleDrag = useCallback14((deltaX, deltaY) => {
+    setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
+  }, []);
   const savedState = editor.wysimark?.imageDialogState;
   const hasOnImageChange = !!editor.wysimark?.onImageChange;
   const [url, setUrl] = useState9(savedState?.url ?? "");
   const [alt, setAlt] = useState9(savedState?.alt ?? "");
   const [title, setTitle] = useState9(savedState?.title ?? "");
+  const [titleManuallyEdited, setTitleManuallyEdited] = useState9(false);
   const [imageSource, setImageSource] = useState9(savedState?.imageSource ?? (hasOnImageChange ? "file" : "url"));
   const [isUploading, setIsUploading] = useState9(false);
   const [uploadedUrl, setUploadedUrl] = useState9(savedState?.uploadedUrl ?? "");
+  const [uploadedFileName, setUploadedFileName] = useState9("");
+  const handleAltChange = useCallback14((e) => {
+    const newAlt = e.target.value;
+    setAlt(newAlt);
+    if (!titleManuallyEdited) {
+      setTitle(newAlt);
+    }
+  }, [titleManuallyEdited]);
+  const handleTitleChange = useCallback14((e) => {
+    setTitle(e.target.value);
+    setTitleManuallyEdited(true);
+  }, []);
   useEffect7(() => {
     if (editor.wysimark) {
       editor.wysimark.imageDialogState = { url, alt, title, imageSource, uploadedUrl };
@@ -8265,12 +8418,12 @@ function ImageUrlDialog({
       editor.wysimark.imageDialogState = void 0;
     }
   };
-  const style = useAbsoluteReposition(
+  const baseStyle = useAbsoluteReposition(
     { src: ref, dest },
-    ({ src, dest: dest2 }) => {
+    ({ src, dest: dest2 }, viewport) => {
       return positionInside(
         src,
-        dest2,
+        viewport,
         {
           left: dest2.left - 16,
           top: dest2.top + dest2.height
@@ -8279,6 +8432,11 @@ function ImageUrlDialog({
       );
     }
   );
+  const style = {
+    ...baseStyle,
+    left: baseStyle.left + dragOffset.x,
+    top: baseStyle.top + dragOffset.y
+  };
   function handleSubmit(e) {
     e.preventDefault();
     const finalUrl = imageSource === "file" ? uploadedUrl : url;
@@ -8296,6 +8454,7 @@ function ImageUrlDialog({
     const file = e.target.files?.[0];
     if (!file || !editor.wysimark?.onImageChange)
       return;
+    setUploadedFileName(file.name);
     setIsUploading(true);
     try {
       const resultUrl = await editor.wysimark.onImageChange(file);
@@ -8311,198 +8470,196 @@ function ImageUrlDialog({
   }
   const isSubmitDisabled = imageSource === "file" ? uploadedUrl.trim() === "" || isUploading : url.trim() === "";
   return /* @__PURE__ */ jsxs29(Fragment8, { children: [
-    /* @__PURE__ */ jsx59(CloseMask, { close }),
-    /* @__PURE__ */ jsx59($FileDialog, { ref, style, children: /* @__PURE__ */ jsxs29("form", { onSubmit: handleSubmit, style: { padding: "8px" }, children: [
-      hasOnImageChange && /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "12px" }, children: [
-        /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", marginRight: "16px", cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx59(
+    /* @__PURE__ */ jsx61(CloseMask, { close }),
+    /* @__PURE__ */ jsxs29($FileDialog, { ref, style, children: [
+      /* @__PURE__ */ jsx61(DraggableHeader, { onDrag: handleDrag }),
+      /* @__PURE__ */ jsxs29("form", { onSubmit: (e) => void handleSubmit(e), style: { padding: "8px" }, children: [
+        hasOnImageChange && /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "12px" }, children: [
+          /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", marginRight: "16px", cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx61(
+              "input",
+              {
+                type: "radio",
+                name: "imageSource",
+                value: "file",
+                checked: imageSource === "file",
+                onChange: () => setImageSource("file"),
+                style: { marginRight: "4px" }
+              }
+            ),
+            t("imageSourceFile")
+          ] }),
+          /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx61(
+              "input",
+              {
+                type: "radio",
+                name: "imageSource",
+                value: "url",
+                checked: imageSource === "url",
+                onChange: () => setImageSource("url"),
+                style: { marginRight: "4px" }
+              }
+            ),
+            t("imageSourceUrl")
+          ] })
+        ] }),
+        imageSource === "url" ? /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx61("label", { style: { display: "block", marginBottom: "4px" }, children: t("imageUrlRequired") }),
+          /* @__PURE__ */ jsx61(
+            "input",
+            {
+              type: "text",
+              value: url,
+              onChange: (e) => setUrl(e.target.value),
+              style: {
+                width: "100%",
+                padding: "6px",
+                boxSizing: "border-box",
+                border: "1px solid var(--shade-300)",
+                borderRadius: "4px",
+                backgroundColor: "var(--shade-50)",
+                color: "var(--shade-700)"
+              },
+              placeholder: "https://example.com/image.jpg"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx61(
             "input",
             {
-              type: "radio",
-              name: "imageSource",
-              value: "file",
-              checked: imageSource === "file",
-              onChange: () => setImageSource("file"),
-              style: { marginRight: "4px" }
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/*",
+              onChange: (e) => void handleFileSelect(e),
+              style: { display: "none" }
             }
           ),
-          t("imageSourceFile")
+          /* @__PURE__ */ jsx61(
+            "button",
+            {
+              type: "button",
+              onClick: handleSelectFileClick,
+              disabled: isUploading,
+              style: {
+                padding: "8px 16px",
+                backgroundColor: isUploading ? "#ccc" : "#0078d4",
+                color: isUploading ? "#666" : "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: isUploading ? "not-allowed" : "pointer",
+                marginBottom: "8px",
+                fontWeight: "bold"
+              },
+              children: isUploading ? t("uploading") : t("selectFile")
+            }
+          ),
+          uploadedUrl && /* @__PURE__ */ jsxs29("div", { style: { marginTop: "8px", padding: "8px", backgroundColor: "var(--shade-100)", borderRadius: "4px" }, children: [
+            /* @__PURE__ */ jsxs29("div", { style: { color: "green", marginBottom: "4px" }, children: [
+              "\u2713 ",
+              t("uploadComplete")
+            ] }),
+            uploadedFileName && /* @__PURE__ */ jsx61("div", { style: { fontSize: "12px", color: "var(--shade-500)" }, children: uploadedFileName })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs29("label", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx61("label", { style: { display: "block", marginBottom: "4px" }, children: t("altText") }),
+          /* @__PURE__ */ jsx61(
             "input",
             {
-              type: "radio",
-              name: "imageSource",
-              value: "url",
-              checked: imageSource === "url",
-              onChange: () => setImageSource("url"),
-              style: { marginRight: "4px" }
+              type: "text",
+              value: alt,
+              onChange: handleAltChange,
+              style: {
+                width: "100%",
+                padding: "6px",
+                boxSizing: "border-box",
+                border: "1px solid var(--shade-300)",
+                borderRadius: "4px",
+                backgroundColor: "var(--shade-50)",
+                color: "var(--shade-700)"
+              },
+              placeholder: t("imageDescription")
             }
-          ),
-          t("imageSourceUrl")
-        ] })
-      ] }),
-      imageSource === "url" ? /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx59("label", { style: { display: "block", marginBottom: "4px" }, children: t("imageUrlRequired") }),
-        /* @__PURE__ */ jsx59(
-          "input",
-          {
-            type: "text",
-            value: url,
-            onChange: (e) => setUrl(e.target.value),
-            style: {
-              width: "100%",
-              padding: "6px",
-              boxSizing: "border-box",
-              border: "1px solid #ccc",
-              borderRadius: "4px"
-            },
-            placeholder: "https://example.com/image.jpg"
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx59(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            accept: "image/*",
-            onChange: handleFileSelect,
-            style: { display: "none" }
-          }
-        ),
-        /* @__PURE__ */ jsx59(
-          "button",
-          {
-            type: "button",
-            onClick: handleSelectFileClick,
-            disabled: isUploading,
-            style: {
-              padding: "8px 16px",
-              backgroundColor: isUploading ? "#ccc" : "#f0f0f0",
-              border: "1px solid #ccc",
-              borderRadius: "4px",
-              cursor: isUploading ? "not-allowed" : "pointer",
-              marginBottom: "8px"
-            },
-            children: isUploading ? t("uploading") : t("selectFile")
-          }
-        ),
-        uploadedUrl && /* @__PURE__ */ jsxs29("div", { style: { marginTop: "8px" }, children: [
-          /* @__PURE__ */ jsx59("label", { style: { display: "block", marginBottom: "4px" }, children: t("imageUrlRequired") }),
-          /* @__PURE__ */ jsx59(
+          )
+        ] }),
+        /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx61("label", { style: { display: "block", marginBottom: "4px" }, children: t("title") }),
+          /* @__PURE__ */ jsx61(
             "input",
             {
               type: "text",
-              value: uploadedUrl,
-              disabled: true,
+              value: title,
+              onChange: handleTitleChange,
               style: {
                 width: "100%",
                 padding: "6px",
                 boxSizing: "border-box",
-                border: "1px solid #ccc",
+                border: "1px solid var(--shade-300)",
                 borderRadius: "4px",
-                backgroundColor: "#f5f5f5",
-                color: "#666"
-              }
+                backgroundColor: "var(--shade-50)",
+                color: "var(--shade-700)"
+              },
+              placeholder: t("imageTitle")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs29("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx61(
+            "button",
+            {
+              type: "submit",
+              disabled: isSubmitDisabled,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                padding: "8px 16px",
+                backgroundColor: isSubmitDisabled ? "#ccc" : "#0078d4",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: isSubmitDisabled ? "not-allowed" : "pointer",
+                fontWeight: "bold"
+              },
+              children: t("register")
+            }
+          ),
+          /* @__PURE__ */ jsx61(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancel,
+              style: {
+                padding: "8px 16px",
+                backgroundColor: "var(--shade-100)",
+                color: "var(--shade-700)",
+                border: "1px solid var(--shade-300)",
+                borderRadius: "4px",
+                cursor: "pointer"
+              },
+              children: t("cancel")
             }
           )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx59("label", { style: { display: "block", marginBottom: "4px" }, children: t("altText") }),
-        /* @__PURE__ */ jsx59(
-          "input",
-          {
-            type: "text",
-            value: alt,
-            onChange: (e) => setAlt(e.target.value),
-            style: {
-              width: "100%",
-              padding: "6px",
-              boxSizing: "border-box",
-              border: "1px solid #ccc",
-              borderRadius: "4px"
-            },
-            placeholder: t("imageDescription")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx59("label", { style: { display: "block", marginBottom: "4px" }, children: t("title") }),
-        /* @__PURE__ */ jsx59(
-          "input",
-          {
-            type: "text",
-            value: title,
-            onChange: (e) => setTitle(e.target.value),
-            style: {
-              width: "100%",
-              padding: "6px",
-              boxSizing: "border-box",
-              border: "1px solid #ccc",
-              borderRadius: "4px"
-            },
-            placeholder: t("imageTitle")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs29("div", { style: { display: "flex", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx59(
-          "button",
-          {
-            type: "submit",
-            disabled: isSubmitDisabled,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              padding: "8px 16px",
-              backgroundColor: isSubmitDisabled ? "#ccc" : "#0078d4",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-              cursor: isSubmitDisabled ? "not-allowed" : "pointer",
-              fontWeight: "bold"
-            },
-            children: t("register")
-          }
-        ),
-        /* @__PURE__ */ jsx59(
-          "button",
-          {
-            type: "button",
-            onClick: handleCancel,
-            style: {
-              padding: "8px 16px",
-              backgroundColor: "#f0f0f0",
-              color: "#333",
-              border: "1px solid #ccc",
-              borderRadius: "4px",
-              cursor: "pointer"
-            },
-            children: t("cancel")
-          }
-        )
       ] })
-    ] }) })
+    ] })
   ] });
 }
 
 // src/toolbar-plugin/components/dialog/anchor-dialog.tsx
 import { isHotkey as isHotkey3 } from "is-hotkey";
 import {
-  useCallback as useCallback13,
+  useCallback as useCallback15,
   useMemo as useMemo2,
-  useRef as useRef8,
+  useRef as useRef10,
   useState as useState10
 } from "react";
 import { Editor as Editor59, Range as Range10 } from "slate";
-import { ReactEditor as ReactEditor14, useSlateStatic as useSlateStatic19 } from "slate-react";
+import { ReactEditor as ReactEditor14, useSlateStatic as useSlateStatic18 } from "slate-react";
 
 // src/toolbar-plugin/styles/dialog-shared-styles.ts
-import styled36 from "@emotion/styled";
-var $DialogButton = styled36("div")`
+import styled37 from "@emotion/styled";
+var $DialogButton = styled37("div")`
   /* Center vertically and horizontally */
   display: flex;
   align-items: center;
@@ -8527,7 +8684,7 @@ var $DialogButton = styled36("div")`
     stroke-width: 2px;
   }
 `;
-var $DialogHint = styled36("div")`
+var $DialogHint = styled37("div")`
   font-size: 0.875em;
   margin-top: 0.5em;
   color: var(--shade-500);
@@ -8535,15 +8692,19 @@ var $DialogHint = styled36("div")`
 `;
 
 // src/toolbar-plugin/components/dialog/anchor-dialog.tsx
-import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs30 } from "react/jsx-runtime";
 var isEnter = isHotkey3("enter");
 function AnchorDialog2({
   dest,
   close
 }) {
-  const editor = useSlateStatic19();
-  const ref = useRef8(null);
-  const style = useAbsoluteReposition(
+  const editor = useSlateStatic18();
+  const ref = useRef10(null);
+  const [dragOffset, setDragOffset] = useState10({ x: 0, y: 0 });
+  const handleDrag = useCallback15((deltaX, deltaY) => {
+    setDragOffset((prev) => ({ x: prev.x + deltaX, y: prev.y + deltaY }));
+  }, []);
+  const baseStyle = useAbsoluteReposition(
     { src: ref, dest },
     ({ src, dest: dest2 }, viewport) => {
       return positionInside(
@@ -8557,6 +8718,11 @@ function AnchorDialog2({
       );
     }
   );
+  const style = {
+    ...baseStyle,
+    left: baseStyle.left + dragOffset.x,
+    top: baseStyle.top + dragOffset.y
+  };
   const initialText = useMemo2(() => {
     const { selection } = editor;
     if (selection && !Range10.isCollapsed(selection)) {
@@ -8575,13 +8741,13 @@ function AnchorDialog2({
     ReactEditor14.focus(editor);
     close();
   };
-  const onChangeUrl = useCallback13(
+  const onChangeUrl = useCallback15(
     (e) => {
       setUrl(e.currentTarget.value);
     },
     [setUrl]
   );
-  const onChangeText = useCallback13(
+  const onChangeText = useCallback15(
     (e) => {
       const newText = e.currentTarget.value;
       setText(newText);
@@ -8591,7 +8757,7 @@ function AnchorDialog2({
     },
     [setText, setTitle, titleManuallyEdited]
   );
-  const onChangeTitle = useCallback13(
+  const onChangeTitle = useCallback15(
     (e) => {
       setTitle(e.currentTarget.value);
       setTitleManuallyEdited(true);
@@ -8606,46 +8772,50 @@ function AnchorDialog2({
     insertLink2();
   };
   return /* @__PURE__ */ jsxs30(Fragment9, { children: [
-    /* @__PURE__ */ jsx60(CloseMask, { close }),
+    /* @__PURE__ */ jsx62(CloseMask, { close }),
     /* @__PURE__ */ jsxs30($AnchorDialog, { ref, style, children: [
-      /* @__PURE__ */ jsx60($AnchorDialogInputLine, { children: /* @__PURE__ */ jsx60(
-        $AnchorDialogInput,
-        {
-          type: "text",
-          value: url,
-          autoFocus: true,
-          placeholder: t("linkUrl"),
-          onChange: onChangeUrl,
-          onKeyDown
-        }
-      ) }),
-      /* @__PURE__ */ jsx60($AnchorDialogInputLine, { style: { marginTop: "0.5em" }, children: /* @__PURE__ */ jsx60(
-        $AnchorDialogInput,
-        {
-          type: "text",
-          value: text,
-          placeholder: t("linkText"),
-          onChange: onChangeText,
-          onKeyDown
-        }
-      ) }),
-      /* @__PURE__ */ jsxs30($AnchorDialogInputLine, { style: { marginTop: "0.5em" }, children: [
-        /* @__PURE__ */ jsx60(
+      /* @__PURE__ */ jsx62(DraggableHeader, { onDrag: handleDrag }),
+      /* @__PURE__ */ jsxs30("div", { style: { padding: "0.75em" }, children: [
+        /* @__PURE__ */ jsx62($AnchorDialogInputLine, { children: /* @__PURE__ */ jsx62(
           $AnchorDialogInput,
           {
             type: "text",
-            value: title,
-            placeholder: t("tooltipText"),
-            onChange: onChangeTitle,
+            value: url,
+            autoFocus: true,
+            placeholder: t("linkUrl"),
+            onChange: onChangeUrl,
             onKeyDown
           }
-        ),
-        /* @__PURE__ */ jsxs30($DialogButton, { onClick: insertLink2, children: [
-          /* @__PURE__ */ jsx60(Link, {}),
-          /* @__PURE__ */ jsx60(LinkPlus, {})
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx60($DialogHint, { children: t("tooltipHint") })
+        ) }),
+        /* @__PURE__ */ jsx62($AnchorDialogInputLine, { style: { marginTop: "0.5em" }, children: /* @__PURE__ */ jsx62(
+          $AnchorDialogInput,
+          {
+            type: "text",
+            value: text,
+            placeholder: t("linkText"),
+            onChange: onChangeText,
+            onKeyDown
+          }
+        ) }),
+        /* @__PURE__ */ jsxs30($AnchorDialogInputLine, { style: { marginTop: "0.5em" }, children: [
+          /* @__PURE__ */ jsx62(
+            $AnchorDialogInput,
+            {
+              type: "text",
+              value: title,
+              placeholder: t("tooltipText"),
+              onChange: onChangeTitle,
+              onKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsxs30($DialogButton, { onClick: insertLink2, children: [
+            /* @__PURE__ */ jsx62(Link, {}),
+            /* @__PURE__ */ jsx62(LinkPlus, {})
+          ] }),
+          /* @__PURE__ */ jsx62($DialogButton, { onClick: close, style: { marginLeft: "0.25em", background: "var(--shade-400)" }, children: /* @__PURE__ */ jsx62(Close, {}) })
+        ] }),
+        /* @__PURE__ */ jsx62($DialogHint, { children: t("tooltipHint") })
+      ] })
     ] })
   ] });
 }
@@ -8735,9 +8905,10 @@ var primaryMarkItems = [
   {
     icon: Highlight,
     title: t("highlight"),
+    hotkey: "mod+h",
     action: (editor) => editor.marksPlugin.toggleHighlight(),
     active: (editor) => getMarks(editor).highlight,
-    show: (editor) => !editor.wysimark?.disableHighlight
+    show: (editor) => !editor.wysimark.disableHighlight
   }
 ];
 var expandedMarkItems = primaryMarkItems;
@@ -8756,22 +8927,20 @@ var listItems = [
     icon: BulletList,
     title: t("bulletList"),
     hotkey: "super+8",
-    action: (editor) => editor.list?.convertUnorderedList(true),
-    show: (editor) => !!editor.list
+    action: (editor) => editor.list.convertUnorderedList(true)
   },
   {
     icon: ListNumbers,
     title: t("numberedList"),
     hotkey: "super+7",
-    action: (editor) => editor.list?.convertOrderedList(true),
-    show: (editor) => !!editor.list
+    action: (editor) => editor.list.convertOrderedList(true)
   },
   {
     icon: ListCheck,
     title: t("checkList"),
     hotkey: "super+9",
-    action: (editor) => editor.list?.convertTaskList(true),
-    show: (editor) => !!editor.list && !editor.wysimark?.disableTaskList
+    action: (editor) => editor.list.convertTaskList(true),
+    show: (editor) => !editor.wysimark.disableTaskList
   }
 ];
 var expandedListItems = [...listItems, "divider", ...listDepthItems];
@@ -8780,13 +8949,12 @@ var compactListItems = [
     icon: ListNumbers,
     title: t("list"),
     more: true,
-    children: [...listItems, "divider", ...listDepthItems],
-    show: (editor) => !!editor.list
+    children: [...listItems, "divider", ...listDepthItems]
   }
 ];
 
 // src/toolbar-plugin/items/quote-items.tsx
-import { Editor as Editor61, Transforms as Transforms44 } from "slate";
+import { Editor as Editor61, Transforms as Transforms43 } from "slate";
 var quoteItemsList = [
   {
     icon: Quote,
@@ -8814,10 +8982,10 @@ var quoteItemsList = [
       const { selection } = editor;
       const codeBlockEntry = findElementUp(editor, "code-block");
       if (codeBlockEntry) {
-        const [codeBlock, path] = codeBlockEntry;
+        const [, path] = codeBlockEntry;
         const textContent = Editor61.string(editor, path);
-        Transforms44.removeNodes(editor, { at: path });
-        Transforms44.insertNodes(
+        Transforms43.removeNodes(editor, { at: path });
+        Transforms43.insertNodes(
           editor,
           {
             type: "paragraph",
@@ -8828,13 +8996,13 @@ var quoteItemsList = [
         return;
       }
       if (selection && JSON.stringify(selection.anchor.path) !== JSON.stringify(selection.focus.path)) {
-        editor.codeBlock?.createCodeBlock({ language: "text" });
+        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 = Editor61.string(editor, selection);
-        Transforms44.delete(editor);
-        Transforms44.insertNodes(
+        Transforms43.delete(editor);
+        Transforms43.insertNodes(
           editor,
           {
             type: "code-block",
@@ -8849,10 +9017,10 @@ var quoteItemsList = [
         );
         return;
       }
-      editor.codeBlock?.createCodeBlock({ language: "text" });
+      editor.codeBlock.createCodeBlock({ language: "text" });
     },
     active: (editor) => !!findElementUp(editor, "code-block"),
-    show: (editor) => !!editor.codeBlock && !editor.wysimark?.disableCodeBlock
+    show: (editor) => !editor.wysimark.disableCodeBlock
   }
 ];
 var expandedQuoteItems = quoteItemsList;
@@ -8865,38 +9033,6 @@ var compactQuoteItems = [
   }
 ];
 
-// 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 and toggleRawMode is available
-  show: (editor) => {
-    return editor.wysimark && typeof editor.wysimark.toggleRawMode === "function" && !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,
@@ -8907,10 +9043,7 @@ var largeItems = [
   "divider",
   ...expandedDialogItems,
   "divider",
-  ...expandedQuoteItems,
-  "divider",
-  rawModeItem,
-  visualModeItem
+  ...expandedQuoteItems
 ];
 var mediumItems = [
   ...compactBlockItems,
@@ -8921,10 +9054,7 @@ var mediumItems = [
   "divider",
   ...compactDialogItems,
   "divider",
-  ...expandedQuoteItems,
-  "divider",
-  rawModeItem,
-  visualModeItem
+  ...expandedQuoteItems
 ];
 var smallItems = [
   ...compactBlockItems,
@@ -8935,44 +9065,41 @@ var smallItems = [
   "divider",
   ...smallDialogItems,
   "divider",
-  ...compactQuoteItems,
-  "divider",
-  rawModeItem,
-  visualModeItem
+  ...compactQuoteItems
 ];
 var initialItems = smallItems;
 var itemSets = [largeItems, mediumItems, smallItems];
 
 // src/toolbar-plugin/components/toolbar/toolbar-button.tsx
 import { clsx as clsx9 } from "clsx";
-import { useCallback as useCallback14, useRef as useRef9 } from "react";
-import { ReactEditor as ReactEditor15, useSlate as useSlate2, useSlateStatic as useSlateStatic20 } from "slate-react";
-import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useCallback as useCallback16, useRef as useRef11 } from "react";
+import { ReactEditor as ReactEditor15, useSlate as useSlate2, useSlateStatic as useSlateStatic19 } from "slate-react";
+import { jsx as jsx63, jsxs as jsxs31 } from "react/jsx-runtime";
 function ToolbarButton({
   item
 }) {
-  const staticEditor = useSlateStatic20();
+  const staticEditor = useSlateStatic19();
   const editor = useSlate2();
   const isActive = item.active ? item.active(editor) : false;
-  const ref = useRef9(null);
+  const ref = useRef11(null);
   const tooltip = useTooltip({
     title: item.title,
     hotkey: () => item.hotkey ? formatHotkey(item.hotkey) : void 0
   });
   const menuLayer = useLayer("menu");
-  const openMenu = useCallback14(() => {
+  const openMenu = useCallback16(() => {
     const dest = ref.current;
     const items = item.children;
     const Component = item.Component;
     if (!dest)
       return;
     if (items) {
-      menuLayer.open(() => /* @__PURE__ */ jsx61(Menu, { dest, items, close: menuLayer.close }));
+      menuLayer.open(() => /* @__PURE__ */ jsx63(Menu, { dest, items, close: menuLayer.close }));
     } else if (Component) {
-      menuLayer.open(() => /* @__PURE__ */ jsx61(Component, { dest, close: menuLayer.close }));
+      menuLayer.open(() => /* @__PURE__ */ jsx63(Component, { dest, close: menuLayer.close }));
     }
   }, [item]);
-  const onClick = useCallback14(() => {
+  const onClick = useCallback16(() => {
     if (item.action) {
       item.action(staticEditor);
       ReactEditor15.focus(staticEditor);
@@ -8984,7 +9111,7 @@ function ToolbarButton({
       openMenu();
     }
   }, [menuLayer.layer, item]);
-  const onMouseEnter = useCallback14(
+  const onMouseEnter = useCallback16(
     (e) => {
       tooltip.onMouseEnter(e);
       if (menuLayer.layer)
@@ -9006,24 +9133,24 @@ function ToolbarButton({
         "--disabled": !isActive && r(item?.title)?.includes("Depth")
       }),
       children: [
-        /* @__PURE__ */ jsx61(item.icon, {}),
-        item.more ? /* @__PURE__ */ jsx61(More, {}) : null
+        /* @__PURE__ */ jsx63(item.icon, {}),
+        item.more ? /* @__PURE__ */ jsx63(More, {}) : null
       ]
     }
   );
 }
 
 // src/toolbar-plugin/components/toolbar/toolbar.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function ToolbarItem({ item }) {
-  const editor = useSlateStatic21();
+  const editor = useSlateStatic20();
   if (item === "divider") {
-    return /* @__PURE__ */ jsx62($ToolbarDividerContainer, { "data-item-type": "divider", children: /* @__PURE__ */ jsx62($ToolbarDivider, {}) });
+    return /* @__PURE__ */ jsx64($ToolbarDividerContainer, { "data-item-type": "divider", children: /* @__PURE__ */ jsx64($ToolbarDivider, {}) });
   }
   const show = item.show === void 0 ? true : item.show(editor);
   if (!show)
     return null;
-  return /* @__PURE__ */ jsx62(ToolbarButton, { item });
+  return /* @__PURE__ */ jsx64(ToolbarButton, { item });
 }
 function getWidths(toolbar) {
   const button = toolbar.querySelector(
@@ -9049,7 +9176,7 @@ function measureItemSetWidth(items, buttonWidth, dividerWidth) {
 }
 var WIDTH_BUFFER_PX = 48;
 function Toolbar() {
-  const ref = useRef10(null);
+  const ref = useRef12(null);
   const [items, setItems] = useState11(initialItems);
   useEffect8(() => {
     const refresh = throttle2(
@@ -9081,7 +9208,7 @@ function Toolbar() {
       window.removeEventListener("resize", refresh);
     };
   }, []);
-  return /* @__PURE__ */ jsx62($ToolbarContainer, { ref, children: /* @__PURE__ */ jsx62($Toolbar, { children: items.map((item, index) => /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx64($ToolbarContainer, { ref, children: /* @__PURE__ */ jsx64($Toolbar, { children: items.map((item, index) => /* @__PURE__ */ jsx64(
     ToolbarItem,
     {
       item
@@ -9091,21 +9218,21 @@ function Toolbar() {
 }
 
 // src/toolbar-plugin/render-editable/index.tsx
-import { jsx as jsx63, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
 function renderEditable({ attributes, Editable: Editable3 }) {
-  const outerContainerRef = useRef11(null);
-  const editor = useSlateStatic22();
+  const outerContainerRef = useRef13(null);
+  const editor = useSlateStatic21();
   const focused = useFocused();
-  const onClickOuterContainer = useCallback15(
+  const onClickOuterContainer = useCallback17(
     (e) => {
       if (e.target !== e.currentTarget)
         return;
-      Transforms45.select(editor, Editor62.end(editor, []));
+      Transforms44.select(editor, Editor62.end(editor, []));
       ReactEditor16.focus(editor);
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx63(Layers, { children: /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx65(Layers, { children: /* @__PURE__ */ jsxs32(
     $OuterContainer,
     {
       ref: outerContainerRef,
@@ -9117,8 +9244,8 @@ function renderEditable({ attributes, Editable: Editable3 }) {
       },
       onClick: onClickOuterContainer,
       children: [
-        /* @__PURE__ */ jsx63(Toolbar, {}),
-        /* @__PURE__ */ jsx63(
+        /* @__PURE__ */ jsx65(Toolbar, {}),
+        /* @__PURE__ */ jsx65(
           Editable3,
           {
             as: $Editable,
@@ -9150,7 +9277,7 @@ var ToolbarPlugin = createPlugin(
 );
 
 // src/trailing-block-plugin/index.tsx
-import { Editor as Editor63, Node as Node15, Path as Path16, Transforms as Transforms46 } from "slate";
+import { Editor as Editor63, Node as Node15, Path as Path16, Transforms as Transforms45 } from "slate";
 var TrailingBlockPlugin = createPlugin(
   (editor) => {
     editor.allowTrailingBlock = true;
@@ -9166,7 +9293,7 @@ var TrailingBlockPlugin = createPlugin(
             editor.children.length - 1
           );
           if (Editor63.hasBlocks(editor, lastElement) || Editor63.isVoid(editor, lastElement)) {
-            Transforms46.insertNodes(
+            Transforms45.insertNodes(
               editor,
               { type: "paragraph", children: [{ text: "" }] },
               {
@@ -9182,11 +9309,11 @@ var TrailingBlockPlugin = createPlugin(
 );
 
 // src/paste-markdown-plugin/methods/index.ts
-import { Transforms as Transforms47 } from "slate";
+import { Transforms as Transforms46 } from "slate";
 function pasteMarkdown(editor, markdown) {
   const escapedMarkdown = escapeUrlSlashes(markdown);
   const fragment = parse(escapedMarkdown);
-  Transforms47.insertNodes(editor, fragment);
+  Transforms46.insertNodes(editor, fragment);
 }
 function createPasteMarkdownMethods(editor) {
   return {
@@ -9218,7 +9345,7 @@ var PasteMarkdownPlugin = createPlugin(
 );
 
 // src/placeholder-plugin/index.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function renderPlaceholder(props) {
   const nextAttributes = {
     ...props.attributes,
@@ -9228,7 +9355,7 @@ function renderPlaceholder(props) {
       maxWidth: void 0
     }
   };
-  return /* @__PURE__ */ jsx64("span", { ...nextAttributes, children: props.children });
+  return /* @__PURE__ */ jsx66("span", { ...nextAttributes, children: props.children });
 }
 var PlaceholderPlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
@@ -9243,7 +9370,7 @@ var PlaceholderPlugin = createPlugin(
 );
 
 // src/entry/plugins.ts
-var defaultPlugins = [
+var plugins = [
   PasteMarkdownPlugin,
   ConvertElementPlugin,
   AnchorPlugin,
@@ -9267,11 +9394,12 @@ var defaultPlugins = [
 ];
 
 // src/entry/SinkEditable.tsx
-var { withSink, SinkEditable: SinkEditable2 } = createSink(defaultPlugins);
+var Sink = createSink(plugins);
+var { withSink, SinkEditable: SinkEditable2 } = Sink;
 
 // src/entry/useEditor.tsx
 import { useState as useState12 } from "react";
-import { createEditor, Editor as Editor65, Transforms as Transforms48 } from "slate";
+import { createEditor, Editor as Editor65, Transforms as Transforms47 } from "slate";
 import { withHistory } from "slate-history";
 import { withReact } from "slate-react";
 function useEditor({
@@ -9317,7 +9445,7 @@ function useEditor({
       const documentValue = parse(escapedMarkdown);
       editor2.children = documentValue;
       editor2.selection = null;
-      Transforms48.select(editor2, Editor65.start(editor2, [0]));
+      Transforms47.select(editor2, Editor65.start(editor2, [0]));
     };
     return nextEditor;
   });
@@ -9325,9 +9453,9 @@ function useEditor({
 }
 
 // src/entry/index.tsx
-import { jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs33 } from "react/jsx-runtime";
 function renderLeaf({ children, attributes }) {
-  return /* @__PURE__ */ jsx65("span", { ...attributes, children });
+  return /* @__PURE__ */ jsx67("span", { ...attributes, children });
 }
 function Editable2({
   editor,
@@ -9341,19 +9469,18 @@ function Editable2({
 }) {
   const [isRawMode, setIsRawMode] = useState13(false);
   const [rawText, setRawText] = useState13(value);
-  const ignoreNextChangeRef = useRef12(false);
-  const initialValueRef = useRef12(void 0);
-  const prevValueRef = useRef12(void 0);
-  const lastEmittedValueRef = useRef12(void 0);
-  const onThrottledSlateChange = useCallback16(
+  const ignoreNextChangeRef = useRef14(false);
+  const initialValueRef = useRef14(void 0);
+  const prevValueRef = useRef14(void 0);
+  const pendingRawTextRef = useRef14(null);
+  const onThrottledSlateChange = useCallback18(
     throttle3(
       () => {
-        const markdown = unescapeUrlSlashes(serialize(editor.children));
+        const markdown = serialize(editor.children);
         editor.wysimark.prevValue = {
           markdown,
           children: editor.children
         };
-        lastEmittedValueRef.current = markdown;
         onChange(markdown);
       },
       throttleInMs,
@@ -9361,53 +9488,45 @@ function Editable2({
     ),
     [editor, onChange, throttleInMs]
   );
-  const onSlateChange = useCallback16(
-    (nextValue) => {
-      if (ignoreNextChangeRef.current) {
-        ignoreNextChangeRef.current = false;
-        prevValueRef.current = nextValue;
-        return;
-      }
-      prevValueRef.current = nextValue;
-      onThrottledSlateChange();
-    },
-    [onThrottledSlateChange]
-  );
-  if (editor.wysimark.prevValue == null || initialValueRef.current == null) {
-    ignoreNextChangeRef.current = true;
-    const valueToProcess = isRawMode ? value : escapeUrlSlashes(value);
-    const children = parse(valueToProcess);
-    editor.children = children;
-    prevValueRef.current = initialValueRef.current = children;
-    editor.wysimark.prevValue = {
-      markdown: value,
-      // Store the original unescaped value
-      children
-    };
-    lastEmittedValueRef.current = value;
-  } else {
-    if (isRawMode) {
-      editor.wysimark.prevValue.markdown = value;
-      lastEmittedValueRef.current = value;
+  const onSlateChange = useCallback18(() => {
+    if (prevValueRef.current === editor.children) {
+      return;
+    }
+    prevValueRef.current = editor.children;
+    onThrottledSlateChange();
+  }, [onThrottledSlateChange]);
+  if (!isRawMode) {
+    const markdownToUse = pendingRawTextRef.current ?? value;
+    if (pendingRawTextRef.current !== null) {
+      pendingRawTextRef.current = null;
+    }
+    if (editor.wysimark.prevValue == null || initialValueRef.current == null) {
+      ignoreNextChangeRef.current = true;
+      const valueToProcess = escapeUrlSlashes(markdownToUse);
+      const children = parse(valueToProcess);
+      editor.children = children;
+      prevValueRef.current = initialValueRef.current = children;
+      editor.wysimark.prevValue = {
+        markdown: markdownToUse,
+        children
+      };
     } else {
-      const diffFromPrevValue = value !== editor.wysimark.prevValue.markdown;
-      const diffFromLastEmitted = value !== lastEmittedValueRef.current;
-      if (diffFromPrevValue && diffFromLastEmitted) {
+      if (markdownToUse !== editor.wysimark.prevValue.markdown) {
         ignoreNextChangeRef.current = true;
-        const valueToProcess = escapeUrlSlashes(value);
+        const valueToProcess = escapeUrlSlashes(markdownToUse);
         const documentValue = parse(valueToProcess);
         editor.children = documentValue;
         editor.selection = null;
-        Transforms49.select(editor, Editor66.start(editor, [0]));
+        Transforms48.select(editor, Editor66.start(editor, [0]));
       }
     }
   }
-  const onSinkeEditableMouseDown = useCallback16(() => {
+  const onSinkeEditableMouseDown = useCallback18(() => {
     if (navigator.userAgent.toLowerCase().includes("firefox")) {
       ReactEditor18.focus(editor);
     }
   }, [editor]);
-  const onBlur = useCallback16(() => {
+  const onBlur = useCallback18(() => {
     onThrottledSlateChange.flush();
   }, [onThrottledSlateChange]);
   const handleRawTextChange = (e) => {
@@ -9415,46 +9534,43 @@ function Editable2({
     setRawText(newText);
     onChange(newText);
   };
-  const applyRawTextToEditor = useCallback16(() => {
-    if (rawText !== editor.getMarkdown()) {
-      editor.setMarkdown(rawText);
-    }
-  }, [editor, rawText]);
-  const updateRawTextFromEditor = useCallback16(() => {
-    setRawText(value);
-  }, [value]);
-  const handleRawModeToggle = useCallback16(() => {
+  const updateRawTextFromEditor = useCallback18(() => {
+    const currentMarkdown = editor.getMarkdown();
+    setRawText(currentMarkdown);
+  }, [editor]);
+  const handleRawModeToggle = () => {
     if (isRawMode) {
-      applyRawTextToEditor();
+      pendingRawTextRef.current = rawText;
+      editor.wysimark.prevValue = void 0;
+      initialValueRef.current = void 0;
+      prevValueRef.current = void 0;
     } else {
       updateRawTextFromEditor();
     }
     setIsRawMode(!isRawMode);
-  }, [isRawMode, applyRawTextToEditor, updateRawTextFromEditor]);
-  editor.wysimark.isRawMode = isRawMode;
-  if (!editor.wysimark.disableRawMode) {
-    editor.wysimark.toggleRawMode = handleRawModeToggle;
-  }
+  };
   editor.wysimark.onImageChange = onImageChange;
+  editor.wysimark.onChange = onChange;
+  const disableRawMode = editor.wysimark.disableRawMode;
   return /* @__PURE__ */ jsxs33("div", { style: { position: "relative" }, children: [
-    isRawMode && /* @__PURE__ */ jsx65("div", { style: { position: "absolute", top: "5px", right: "25px", zIndex: 10 }, children: /* @__PURE__ */ jsx65(
+    !disableRawMode && /* @__PURE__ */ jsx67("div", { style: { position: "absolute", top: "5px", right: "25px", zIndex: 10 }, children: /* @__PURE__ */ jsx67(
       "div",
       {
         onClick: handleRawModeToggle,
         style: {
           background: "none",
-          border: "1px solid #4a90e2",
+          border: isRawMode ? "1px solid #4a90e2" : "1px solid transparent",
           cursor: "pointer",
           padding: "6px",
           borderRadius: "4px",
-          backgroundColor: "rgba(74, 144, 226, 0.1)",
-          boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
+          backgroundColor: isRawMode ? "rgba(74, 144, 226, 0.1)" : "transparent",
+          boxShadow: isRawMode ? "0 1px 3px rgba(0, 0, 0, 0.1)" : "none",
           transition: "all 0.2s ease-in-out",
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        title: t("switchToVisualEditor"),
+        title: isRawMode ? t("switchToVisualEditor") : t("switchToRawMarkdown"),
         role: "button",
         tabIndex: 0,
         onKeyDown: (e) => {
@@ -9463,10 +9579,54 @@ function Editable2({
             e.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsx65("span", { style: { color: "#4a90e2", fontSize: "1.25em" }, children: /* @__PURE__ */ jsx65(VisualEditor, {}) })
+        children: /* @__PURE__ */ jsxs33("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx67(
+            "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__ */ jsx67(
+            "path",
+            {
+              d: "M7 15V9L10 12L13 9V15",
+              stroke: isRawMode ? "#4a90e2" : "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx67(
+            "path",
+            {
+              d: "M16 9H18V15",
+              stroke: isRawMode ? "#4a90e2" : "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx67(
+            "path",
+            {
+              d: "M16 12H18",
+              stroke: isRawMode ? "#4a90e2" : "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ] })
       }
     ) }),
-    /* @__PURE__ */ jsx65("div", { style: { display: isRawMode ? "block" : "none", textAlign: "center" }, children: /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx67("div", { style: { display: isRawMode ? "block" : "none", textAlign: "center" }, children: /* @__PURE__ */ jsx67(
       "textarea",
       {
         value: unescapeUrlSlashes(rawText).replace(/&nbsp;/g, ""),
@@ -9475,9 +9635,7 @@ function Editable2({
         className,
         style: {
           width: "calc(100% - 60px)",
-          /* Full width minus 200px on each side */
           margin: "0 auto",
-          /* Center the textarea */
           minHeight: "200px",
           padding: "20px",
           fontFamily: "monospace",
@@ -9491,13 +9649,13 @@ function Editable2({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx65("div", { style: { display: isRawMode ? "none" : "block" }, children: /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx67("div", { style: { display: isRawMode ? "none" : "block" }, children: /* @__PURE__ */ jsx67(
       Slate2,
       {
         editor,
-        initialValue: initialValueRef.current ?? editor.children,
+        initialValue: initialValueRef.current,
         onChange: onSlateChange,
-        children: /* @__PURE__ */ jsx65(
+        children: /* @__PURE__ */ jsx67(
           SinkEditable2,
           {
             renderLeaf,
@@ -9514,13 +9672,13 @@ function Editable2({
 }
 
 // src/index.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function StandaloneEditor({
   standaloneOptions: { onChange, placeholder, className, ...options },
   standaloneMethodsRef
 }) {
   const [markdown, setMarkdown] = useState14(options.initialMarkdown || "");
-  const markdownRef = useRef13(markdown);
+  const markdownRef = useRef15(markdown);
   const editor = useEditor(options);
   markdownRef.current = markdown;
   useImperativeHandle(
@@ -9538,7 +9696,7 @@ function StandaloneEditor({
     },
     [markdownRef, setMarkdown]
   );
-  const onChangeEditable = useCallback17(
+  const onChangeEditable = useCallback19(
     (markdown2) => {
       markdownRef.current = markdown2;
       setMarkdown(markdown2);
@@ -9546,7 +9704,7 @@ function StandaloneEditor({
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx68(
     Editable2,
     {
       editor,
@@ -9561,7 +9719,7 @@ function createWysimark(containerElement, options) {
   const standaloneMethodsRef = createRef();
   const root = createRoot(containerElement);
   root.render(
-    /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx68(
       StandaloneEditor,
       {
         standaloneMethodsRef,
@@ -9573,7 +9731,7 @@ function createWysimark(containerElement, options) {
     unmount() {
       try {
         root.unmount();
-      } catch (e) {
+      } catch {
       }
     },
     getMarkdown() {