wysimark-lite 0.23.0 → 0.25.0

package/dist/index.mjs

@@ -3,16 +3,16 @@
 // 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 { 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";
 
@@ -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 convertMarksToSymbolsExceptCode(marks) {
-  return marks.map(convertMarkToSymbol).join("");
+function convertMarksToOpenSymbols(marks) {
+  return marks.map(convertMarkToOpenSymbol).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": {
@@ -642,12 +651,9 @@ function parseHeading(content) {
 function parseHTML(content) {
   return [
     {
-      type: "code-block",
-      language: "html",
-      children: content.value.split("\n").map((line) => ({
-        type: "code-block-line",
-        children: [{ text: line }]
-      }))
+      type: "html-block",
+      html: content.value,
+      children: [{ text: "" }]
     }
   ];
 }
@@ -1375,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("");
@@ -1516,6 +1514,10 @@ function serializeElement(element, orders) {
       throw new Error(
         `Code block line elements should only be present as children of code-block which should be handled by serializeCodeBlock. Got code-block-line may indicate an error in normalization.`
       );
+    case "html-block":
+      return `${element.html}
+
+`;
   }
   assertUnreachable(element);
 }
@@ -1547,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";
   });
 }
 
@@ -1611,7 +1613,10 @@ 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...",
+    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",
@@ -1659,7 +1664,10 @@ var translations = {
     imageSourceUrl: "URL",
     imageSourceFile: "File",
     selectFile: "Select File",
-    uploading: "Uploading..."
+    uploading: "Uploading...",
+    saving: "Saving...",
+    vaultPath: "Save Path:",
+    vaultPathHint: "Enter the path within the vault to save the file"
   }
 };
 var getLanguage = () => {
@@ -1699,8 +1707,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) {
@@ -1716,8 +1724,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;
@@ -1732,9 +1740,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);
@@ -1750,26 +1758,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);
@@ -1787,11 +1795,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,
@@ -1820,10 +1828,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) {
@@ -1857,16 +1865,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
@@ -1874,35 +1882,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 = [];
@@ -1926,10 +1937,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;
@@ -1937,22 +1948,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;
   };
@@ -2019,8 +2030,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}`
   );
 }
 
@@ -2190,13 +2202,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 }
     );
@@ -2304,7 +2316,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:";
@@ -2406,7 +2418,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
@@ -2526,8 +2538,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
@@ -2737,10 +2749,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
@@ -2778,8 +2801,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;
@@ -2790,6 +2814,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 {
@@ -2854,6 +2879,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
    */
@@ -2883,9 +2909,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;
@@ -3189,8 +3216,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";
 
@@ -3222,6 +3249,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;
@@ -3235,6 +3263,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 {
@@ -3283,12 +3312,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,
@@ -3296,7 +3409,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 {
@@ -3305,23 +3422,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,
@@ -3330,45 +3452,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 {
@@ -3464,7 +3590,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 {
@@ -3473,16 +3603,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,
@@ -3493,57 +3632,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");
@@ -3555,7 +3707,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,
@@ -3577,16 +3729,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);
@@ -3603,7 +3755,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 });
           }
         }
       }
@@ -3679,8 +3831,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;
@@ -3707,9 +3858,7 @@ function createImageMethods(editor) {
 }
 
 // src/image-plugin/normalize-node/index.ts
-function normalizeNode2(editor, entry) {
-  editor;
-  entry;
+function normalizeNode2(_editor, _entry) {
   return false;
 }
 
@@ -3717,20 +3866,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
@@ -3743,7 +3892,7 @@ var $ImageContainer = styled16("span")`
    */
   position: relative;
 `;
-var $Image = styled16("img")`
+var $Image = styled17("img")`
   /**
    * TODO:
    *
@@ -3809,7 +3958,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";
 
@@ -3828,8 +3977,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;
   /**
@@ -3857,7 +4006,7 @@ var $ImageResizeInvisibleHandle = styled17("span")`
     width: 1.25em;
   }
 `;
-var $ImageResizeHandle = styled17("span")`
+var $ImageResizeHandle = styled18("span")`
   position: absolute;
   display: block;
   background: var(--select-color);
@@ -4008,7 +4157,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");
@@ -4030,7 +4179,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);
@@ -4064,7 +4213,7 @@ function ImageResizeControl({
     },
     [srcSize.width, srcSize.height, size.width, element]
   );
-  const onTouchStart = useCallback5(
+  const onTouchStart = useCallback6(
     (e) => {
       stopEvent(e);
       setIsDragging(true);
@@ -4104,24 +4253,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.
@@ -4156,8 +4305,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,
@@ -4191,8 +4340,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;
@@ -4206,7 +4355,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;
@@ -4264,10 +4413,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,
@@ -4281,7 +4430,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);
@@ -4294,7 +4443,7 @@ function ImagePresetButton({
     "--disabled": isDisabled,
     "--selected": !isDisabled && isSelected
   });
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     $ImageButton,
     {
       className,
@@ -4307,7 +4456,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,
@@ -4315,8 +4464,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,
@@ -4331,18 +4480,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
@@ -4376,7 +4525,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
 }) {
@@ -4385,25 +4534,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
@@ -4456,7 +4605,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
 }) {
@@ -4465,36 +4614,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,
@@ -4503,8 +4652,8 @@ function ImageToolbar({
   presets
 }) {
   return /* @__PURE__ */ jsxs12($ImageToolbar, { children: [
-    /* @__PURE__ */ jsx23(ImageTypeButtonGroup, { element }),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(ImageTypeButtonGroup, { element }),
+    /* @__PURE__ */ jsx24(
       ImagePresetButtonGroup,
       {
         element,
@@ -4518,15 +4667,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;
@@ -4537,8 +4686,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,
@@ -4548,8 +4697,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,
@@ -4564,7 +4713,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,
@@ -4572,7 +4721,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,
@@ -4587,13 +4736,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,
@@ -4601,7 +4750,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,
@@ -4613,7 +4762,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,
@@ -4621,9 +4770,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 });
   }
 }
 
@@ -4761,8 +4910,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;
@@ -4772,7 +4921,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:
@@ -4885,7 +5034,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({
@@ -5033,6 +5182,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) {
@@ -5077,12 +5237,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;
@@ -5102,12 +5266,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;
@@ -5134,7 +5298,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;
@@ -5160,70 +5324,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" : "",
@@ -5235,21 +5379,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);
@@ -5307,7 +5451,98 @@ var CodeBlockPlugin = createPlugin(
           if (style === null) {
             return children;
           } else {
-            return /* @__PURE__ */ jsx32("span", { style, children });
+            return /* @__PURE__ */ jsx34("span", { style, children });
+          }
+        }
+      }
+    });
+  }
+);
+
+// src/html-block-plugin/index.tsx
+import { Transforms as Transforms22 } from "slate";
+
+// src/html-block-plugin/styles.ts
+import styled25 from "@emotion/styled";
+var $HtmlBlock = styled25("div")`
+  position: relative;
+  background-color: var(--shade-100);
+  border: 1px solid var(--shade-300);
+  border-radius: 0.5em;
+  padding: 2em 1em 1em 1em;
+  margin: 1em 0;
+  font-family: "andale mono", AndaleMono, monospace;
+  font-size: 0.875em;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--shade-700);
+  overflow-x: auto;
+
+  &.--selected {
+    outline: 2px solid var(--select-color);
+  }
+`;
+var $HtmlBlockLabel = styled25("span")`
+  position: absolute;
+  top: 0.25em;
+  right: 0.5em;
+  font-size: 0.625em;
+  color: var(--shade-500);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+// src/html-block-plugin/render-element.tsx
+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__ */ jsx35($HtmlBlockLabel, { children: "HTML" }),
+    /* @__PURE__ */ jsx35("div", { children: unescapeUrlSlashes(element.html) }),
+    children
+  ] });
+}
+
+// src/html-block-plugin/index.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var HtmlBlockPlugin = createPlugin(
+  (editor, _options, { createPolicy }) => {
+    function onDelete() {
+      const { selection } = editor;
+      if (!isCollapsed(selection))
+        return false;
+      const htmlBlockEntry = findElementUp(editor, "html-block");
+      if (htmlBlockEntry == null)
+        return false;
+      Transforms22.removeNodes(editor, { at: htmlBlockEntry[1] });
+      return true;
+    }
+    return createPolicy({
+      name: "html-block",
+      editor: {
+        deleteBackward: onDelete,
+        deleteForward: onDelete,
+        isInline(element) {
+          if (element.type === "html-block")
+            return false;
+        },
+        isVoid(element) {
+          if (element.type === "html-block")
+            return true;
+        },
+        isMaster(element) {
+          if (element.type === "html-block")
+            return true;
+        }
+      },
+      editableProps: {
+        renderElement: ({ element, attributes, children }) => {
+          if (element.type === "html-block") {
+            return /* @__PURE__ */ jsx36(HtmlBlock, { element, attributes, children });
           }
         }
       }
@@ -5322,7 +5557,7 @@ import { Editor as Editor32 } from "slate";
 import { Element as Element18 } from "slate";
 
 // src/collapsible-paragraph-plugin/normalize-node/normalize-sibling-paragraphs.ts
-import { Element as Element16, Transforms as Transforms22 } from "slate";
+import { Element as Element16, Transforms as Transforms23 } from "slate";
 function isParagraph(node) {
   return Element16.isElement(node) && node.type === "paragraph";
 }
@@ -5331,7 +5566,7 @@ function normalizeSiblingParagraphs(editor, entry) {
     if (!isParagraph(a[0]) || !isParagraph(b[0]))
       return false;
     if (a[0].__collapsible && b[0].__collapsible) {
-      Transforms22.removeNodes(editor, { at: a[1] });
+      Transforms23.removeNodes(editor, { at: a[1] });
       return true;
     }
     return false;
@@ -5339,7 +5574,7 @@ function normalizeSiblingParagraphs(editor, entry) {
 }
 
 // src/collapsible-paragraph-plugin/normalize-node/normalize-sibling-walls.ts
-import { Element as Element17, Transforms as Transforms23 } from "slate";
+import { Element as Element17, Transforms as Transforms24 } from "slate";
 function isWall(editor, node) {
   if (!Element17.isElement(node))
     return false;
@@ -5351,7 +5586,7 @@ function normalizeSiblingWalls(editor, entry) {
   return normalizeSiblings(editor, entry, (a, b) => {
     if (!isWall(editor, a[0]) || !isWall(editor, b[0]))
       return false;
-    Transforms23.insertNodes(
+    Transforms24.insertNodes(
       editor,
       {
         type: "paragraph",
@@ -5381,8 +5616,8 @@ import { clsx as clsx5 } from "clsx";
 import { useSelected as useSelected5 } from "slate-react";
 
 // src/collapsible-paragraph-plugin/render-element/styles.ts
-import styled24 from "@emotion/styled";
-var $Paragraph = styled24("p")`
+import styled26 from "@emotion/styled";
+var $Paragraph = styled26("p")`
   padding: 0;
   margin: 0;
   &:first-child {
@@ -5421,7 +5656,7 @@ function getIsEmpty(element) {
 }
 
 // src/collapsible-paragraph-plugin/render-element/paragraph.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Paragraph({
   element,
   attributes,
@@ -5429,7 +5664,7 @@ function Paragraph({
 }) {
   const selected = useSelected5();
   const isEmpty = getIsEmpty(element);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx37(
     $Paragraph,
     {
       ...attributes,
@@ -5444,7 +5679,7 @@ function Paragraph({
 }
 
 // src/collapsible-paragraph-plugin/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var CollapsibleParagraphPlugin = createPlugin((editor) => {
   const { insertBreak: insertBreak3 } = editor;
   editor.insertBreak = () => {
@@ -5491,7 +5726,7 @@ var CollapsibleParagraphPlugin = createPlugin((editor) => {
       renderElement: ({ element, attributes, children }) => {
         switch (element.type) {
           case "paragraph": {
-            return /* @__PURE__ */ jsx34(Paragraph, { element, attributes, children });
+            return /* @__PURE__ */ jsx38(Paragraph, { element, attributes, children });
           }
         }
       },
@@ -5512,7 +5747,7 @@ function addConvertElementType(editor, type) {
 }
 
 // src/convert-element-plugin/methods/convert-elements.ts
-import { Editor as Editor33, Element as Element20, Node as Node13, Point, Range as Range5, Transforms as Transforms24 } from "slate";
+import { Editor as Editor33, Element as Element20, Node as Node13, Point, Range as Range5, Transforms as Transforms25 } from "slate";
 function getOffsetInElement(editor, point, elementPath) {
   try {
     const elementStart = Editor33.start(editor, elementPath);
@@ -5547,7 +5782,7 @@ function restoreSelectionInElement(editor, elementPath, offset) {
       currentOffset += nodeLength;
     }
     const point = { path: targetPath, offset: targetOffset };
-    Transforms24.select(editor, { anchor: point, focus: point });
+    Transforms25.select(editor, { anchor: point, focus: point });
   } catch {
   }
 }
@@ -5618,16 +5853,16 @@ function splitElementAtSelectedLines(editor, element, path, selection) {
         ...element,
         children: [{ text: afterText }]
       };
-      Transforms24.insertNodes(editor, afterElement, {
+      Transforms25.insertNodes(editor, afterElement, {
         at: [...basePath, baseIndex + 1]
       });
     }
     const childrenCount = element.children.length;
     for (let j = childrenCount - 1; j >= 0; j--) {
-      Transforms24.removeNodes(editor, { at: [...path, j] });
+      Transforms25.removeNodes(editor, { at: [...path, j] });
     }
     if (beforeLines.length > 0) {
-      Transforms24.insertNodes(
+      Transforms25.insertNodes(
         editor,
         { text: beforeLines.join("\n") },
         { at: [...path, 0] }
@@ -5637,11 +5872,11 @@ function splitElementAtSelectedLines(editor, element, path, selection) {
         type: "paragraph",
         children: [{ text: selectedText }]
       };
-      Transforms24.insertNodes(editor, selectedElement, {
+      Transforms25.insertNodes(editor, selectedElement, {
         at: [...basePath, baseIndex + 1]
       });
     } else {
-      Transforms24.insertNodes(
+      Transforms25.insertNodes(
         editor,
         { text: selectedLines.join("\n") },
         { at: [...path, 0] }
@@ -5657,21 +5892,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--) {
@@ -5752,7 +5987,7 @@ function convertElements(editor, matchForToggle, targetElement, allowToggle) {
             }
             currentOffset += nodeLength;
           }
-          Transforms24.select(editor, {
+          Transforms25.select(editor, {
             anchor: { path: anchorPath, offset: anchorOffset },
             focus: { path: focusPath, offset: focusOffset }
           });
@@ -5792,7 +6027,7 @@ var ConvertElementPlugin = createPlugin((editor) => {
 });
 
 // src/heading-plugin/insert-break.ts
-import { Editor as Editor34, Path as Path9, Range as Range6, Transforms as Transforms25 } from "slate";
+import { Editor as Editor34, Path as Path9, Range as Range6, Transforms as Transforms26 } from "slate";
 function insertBreak(editor) {
   const entry = findElementUp(editor, "heading");
   if (!entry)
@@ -5804,12 +6039,12 @@ function insertBreak(editor) {
   if (!Editor34.isEnd(editor, editor.selection.anchor, entry[1]))
     return false;
   const nextPath = Path9.next(entry[1]);
-  Transforms25.insertNodes(
+  Transforms26.insertNodes(
     editor,
     { type: "paragraph", children: [{ text: "" }] },
     { at: nextPath }
   );
-  Transforms25.select(editor, {
+  Transforms26.select(editor, {
     anchor: Editor34.start(editor, nextPath),
     focus: Editor34.start(editor, nextPath)
   });
@@ -5842,7 +6077,7 @@ function createHeadingMethods(editor) {
 
 // src/heading-plugin/styles.ts
 import { css } from "@emotion/react";
-import styled25 from "@emotion/styled";
+import styled27 from "@emotion/styled";
 var headingStyles = css`
   margin-top: 1em;
   &:first-child {
@@ -5850,34 +6085,34 @@ var headingStyles = css`
   }
   font-weight: bold;
 `;
-var $H1 = styled25("h1")`
+var $H1 = styled27("h1")`
   ${headingStyles}
   font-size: 2.25em;
   letter-spacing: -0.01em;
 `;
-var $H2 = styled25("h2")`
+var $H2 = styled27("h2")`
   ${headingStyles}
   font-size: 1.5em;
 `;
-var $H3 = styled25("h3")`
+var $H3 = styled27("h3")`
   ${headingStyles}
   font-size: 1.25em;
 `;
-var $H4 = styled25("h4")`
+var $H4 = styled27("h4")`
   ${headingStyles}
   font-size: 1em;
 `;
-var $H5 = styled25("h5")`
+var $H5 = styled27("h5")`
   ${headingStyles}
   font-size: 1em;
 `;
-var $H6 = styled25("h6")`
+var $H6 = styled27("h6")`
   ${headingStyles}
   font-size: 1em;
 `;
 
 // src/heading-plugin/index.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var HeadingPlugin = createPlugin(
   (editor) => {
     editor.convertElement.addConvertElementType("heading");
@@ -5908,17 +6143,17 @@ var HeadingPlugin = createPlugin(
           if (element.type === "heading") {
             switch (element.level) {
               case 1:
-                return /* @__PURE__ */ jsx35($H1, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H1, { ...attributes, children });
               case 2:
-                return /* @__PURE__ */ jsx35($H2, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H2, { ...attributes, children });
               case 3:
-                return /* @__PURE__ */ jsx35($H3, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H3, { ...attributes, children });
               case 4:
-                return /* @__PURE__ */ jsx35($H4, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H4, { ...attributes, children });
               case 5:
-                return /* @__PURE__ */ jsx35($H5, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H5, { ...attributes, children });
               case 6:
-                return /* @__PURE__ */ jsx35($H6, { ...attributes, children });
+                return /* @__PURE__ */ jsx39($H6, { ...attributes, children });
               default: {
                 const exhaustiveCheck = element.level;
                 throw new Error(
@@ -5944,8 +6179,8 @@ var HeadingPlugin = createPlugin(
 import { useSelected as useSelected6 } from "slate-react";
 
 // src/horizontal-rule-plugin/styles.tsx
-import styled26 from "@emotion/styled";
-var $HorizontalRule = styled26("hr")`
+import styled28 from "@emotion/styled";
+var $HorizontalRule = styled28("hr")`
   position: relative;
   height: 1em;
   /* background-color: var(--hr-color); */
@@ -5978,15 +6213,15 @@ var $HorizontalRule = styled26("hr")`
 `;
 
 // src/horizontal-rule-plugin/horizontal-rule.tsx
-import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
 function HorizontalRule({
   attributes,
   children
 }) {
   const selected = useSelected6();
-  return /* @__PURE__ */ jsxs17("div", { ...attributes, draggable: true, children: [
+  return /* @__PURE__ */ jsxs18("div", { ...attributes, draggable: true, children: [
     children,
-    /* @__PURE__ */ jsx36("div", { contentEditable: false, children: /* @__PURE__ */ jsx36($HorizontalRule, { className: selected ? "--selected" : "" }) })
+    /* @__PURE__ */ jsx40("div", { contentEditable: false, children: /* @__PURE__ */ jsx40($HorizontalRule, { className: selected ? "--selected" : "" }) })
   ] });
 }
 
@@ -6004,7 +6239,7 @@ function createHorizontalRuleMethods(editor) {
 }
 
 // src/horizontal-rule-plugin/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var HorizontalRulePlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
     editor.horizontalRule = createHorizontalRuleMethods(editor);
@@ -6019,7 +6254,7 @@ var HorizontalRulePlugin = createPlugin(
       editableProps: {
         renderElement: (props) => {
           if (props.element.type === "horizontal-rule") {
-            return /* @__PURE__ */ jsx37(HorizontalRule, { ...props });
+            return /* @__PURE__ */ jsx41(HorizontalRule, { ...props });
           }
         },
         onKeyDown: createHotkeyHandler({
@@ -6031,8 +6266,8 @@ var HorizontalRulePlugin = createPlugin(
 );
 
 // src/inline-code-plugin/styles.ts
-import styled27 from "@emotion/styled";
-var $InlineCode = styled27("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);
@@ -6054,7 +6289,7 @@ var $InlineCode = styled27("code")`
   font-size: 0.75em;
   vertical-align: baseline;
 `;
-var $InvisibleSpan = styled27("span")`
+var $InvisibleSpan = styled29("span")`
   display: inline-block;
   opacity: 0;
   width: 1px;
@@ -6062,7 +6297,7 @@ var $InvisibleSpan = styled27("span")`
 `;
 
 // src/inline-code-plugin/index.tsx
-import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
 var InlineCodePlugin = createPlugin(
   (editor) => {
     if (!editor.marksPlugin)
@@ -6081,10 +6316,10 @@ var InlineCodePlugin = createPlugin(
               /**
                * Disable spellCheck because it's computer code usually.
                */
-              /* @__PURE__ */ jsxs18($InlineCode, { spellCheck: false, children: [
-                /* @__PURE__ */ jsx38($InvisibleSpan, { contentEditable: false, children: "|" }),
+              /* @__PURE__ */ jsxs19($InlineCode, { spellCheck: false, children: [
+                /* @__PURE__ */ jsx42($InvisibleSpan, { contentEditable: false, children: "|" }),
                 children,
-                /* @__PURE__ */ jsx38($InvisibleSpan, { contentEditable: false, children: "|" })
+                /* @__PURE__ */ jsx42($InvisibleSpan, { contentEditable: false, children: "|" })
               ] })
             );
           } else {
@@ -6184,7 +6419,7 @@ function indent(editor) {
 }
 
 // src/list-plugin/methods/insert-break.ts
-import { Editor as Editor36, Transforms as Transforms26 } from "slate";
+import { Editor as Editor36, Transforms as Transforms27 } from "slate";
 function insertBreak2(editor) {
   const entry = findElementUp(editor, isListItem);
   if (!entry)
@@ -6192,19 +6427,19 @@ function insertBreak2(editor) {
   const [element, path] = entry;
   if (Editor36.isEmpty(editor, element)) {
     if (element.depth > 0) {
-      Transforms26.setNodes(editor, { depth: element.depth - 1 }, { at: path });
+      Transforms27.setNodes(editor, { depth: element.depth - 1 }, { at: path });
       return true;
     } else {
       rewrapElement(editor, { type: "paragraph" }, path);
       return true;
     }
   }
-  Transforms26.splitNodes(editor, { always: true });
+  Transforms27.splitNodes(editor, { always: true });
   const nextEntry = findElementUp(editor, isListItem);
   if (!nextEntry)
     return true;
   if (nextEntry[0].type === "task-list-item" && nextEntry[0].checked === true) {
-    Transforms26.setNodes(editor, { checked: false }, { at: nextEntry[1] });
+    Transforms27.setNodes(editor, { checked: false }, { at: nextEntry[1] });
   }
   return true;
 }
@@ -6231,7 +6466,7 @@ function outdent(editor) {
 }
 
 // src/list-plugin/methods/toggleTaskListItem.ts
-import { Transforms as Transforms27 } from "slate";
+import { Transforms as Transforms28 } from "slate";
 function toggleTaskListItem(editor, { at = editor.selection } = {}) {
   const taskListItem = findElementUp(
     editor,
@@ -6241,7 +6476,7 @@ function toggleTaskListItem(editor, { at = editor.selection } = {}) {
   if (!taskListItem)
     return false;
   const nextChecked = !taskListItem[0].checked;
-  Transforms27.setNodes(
+  Transforms28.setNodes(
     editor,
     { checked: nextChecked },
     { at: taskListItem[1] }
@@ -6267,7 +6502,7 @@ function createListMethods(editor) {
 }
 
 // src/list-plugin/normalize-node/normalize-ordered-first-at-depth.ts
-import { Element as Element21, Transforms as Transforms28 } from "slate";
+import { Element as Element21, Transforms as Transforms29 } from "slate";
 var isOrderedListItem = createIsElementType([
   "ordered-list-item"
 ]);
@@ -6280,7 +6515,7 @@ function normalizeOrderedFirstAtDepth(editor, entry) {
       return false;
     const __firstAtDepth = isOrderedListItem(a[0]) ? b[0].depth > a[0].depth : isListItem(a[0]) ? b[0].depth > a[0].depth : true;
     if (b[0].__firstAtDepth !== __firstAtDepth) {
-      Transforms28.setNodes(editor, { __firstAtDepth }, { at: b[1] });
+      Transforms29.setNodes(editor, { __firstAtDepth }, { at: b[1] });
       return true;
     }
     return false;
@@ -6298,16 +6533,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 styled28 from "@emotion/styled";
-var $ListItem = styled28("li")`
+import styled30 from "@emotion/styled";
+var $ListItem = styled30("li")`
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   list-style-position: outside;
 `;
-var $UnorderedListItem = styled28($ListItem)`
+var $UnorderedListItem = styled30($ListItem)`
   position: relative;
   list-style-type: none;
   .--list-item-icon {
@@ -6318,7 +6553,7 @@ var $UnorderedListItem = styled28($ListItem)`
     color: var(--shade-600);
   }
 `;
-var $OrderedListItem = styled28($ListItem)`
+var $OrderedListItem = styled30($ListItem)`
   position: relative;
   list-style-type: none;
   counter-increment: var(--list-item-var);
@@ -6344,7 +6579,7 @@ var $OrderedListItem = styled28($ListItem)`
     font-variant-numeric: tabular-nums;
   }
 `;
-var $TaskListItem = styled28($ListItem)`
+var $TaskListItem = styled30($ListItem)`
   position: relative;
   list-style-type: none;
   .--list-item-icon {
@@ -6361,13 +6596,13 @@ var $TaskListItem = styled28($ListItem)`
 `;
 
 // src/list-plugin/render-element/ordered-list-item.tsx
-import { jsx as jsx39 } 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]);
@@ -6377,16 +6612,16 @@ function OrderedListItem({
     "--list-item-var": `list-item-depth-${element.depth}`
   };
   const className = clsx6({ "--first-at-depth": element.__firstAtDepth });
-  return /* @__PURE__ */ jsx39($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 jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
-var UncheckedIcon = (props) => /* @__PURE__ */ jsxs19(
+import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+var UncheckedIcon = (props) => /* @__PURE__ */ jsxs20(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6400,12 +6635,12 @@ var UncheckedIcon = (props) => /* @__PURE__ */ jsxs19(
     viewBox: "0 0 24 24",
     ...props,
     children: [
-      /* @__PURE__ */ jsx40("path", { d: "M0 0h24v24H0z", stroke: "none" }),
-      /* @__PURE__ */ jsx40("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 })
     ]
   }
 );
-var CheckedIcon = (props) => /* @__PURE__ */ jsxs19(
+var CheckedIcon = (props) => /* @__PURE__ */ jsxs20(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6420,13 +6655,13 @@ var CheckedIcon = (props) => /* @__PURE__ */ jsxs19(
     viewBox: "0 0 24 24",
     ...props,
     children: [
-      /* @__PURE__ */ jsx40("path", { d: "M0 0h24v24H0z", stroke: "none" }),
-      /* @__PURE__ */ jsx40("path", { d: "m9 11 3 3 8-8", className: "--checkmark" }),
-      /* @__PURE__ */ jsx40("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__ */ jsx40(
+var BulletIcon = (props) => /* @__PURE__ */ jsx44(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6435,44 +6670,44 @@ var BulletIcon = (props) => /* @__PURE__ */ jsx40(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx40("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 jsx41, jsxs as jsxs20 } 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__ */ jsxs20($TaskListItem, { ...attributes, style: { marginLeft }, children: [
-    /* @__PURE__ */ jsx41("div", { className: "--list-item-icon", contentEditable: false, children: element.checked ? /* @__PURE__ */ jsx41(CheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) : /* @__PURE__ */ jsx41(UncheckedIcon, { onClick: toggle, style: { cursor: "pointer" } }) }),
+  return /* @__PURE__ */ jsxs21($TaskListItem, { ...attributes, style: { marginLeft }, children: [
+    /* @__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 jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
 function UnorderedListItem({
   element,
   attributes,
   children
 }) {
   const marginLeft = `${2 + element.depth * 2}em`;
-  return /* @__PURE__ */ jsxs21($UnorderedListItem, { ...attributes, style: { marginLeft }, children: [
-    /* @__PURE__ */ jsx42("div", { className: "--list-item-icon", contentEditable: false, children: /* @__PURE__ */ jsx42(BulletIcon, {}) }),
+  return /* @__PURE__ */ jsxs22($UnorderedListItem, { ...attributes, style: { marginLeft }, children: [
+    /* @__PURE__ */ jsx46("div", { className: "--list-item-icon", contentEditable: false, children: /* @__PURE__ */ jsx46(BulletIcon, {}) }),
     children
   ] });
 }
 
 // src/list-plugin/render-element/index.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function renderElement3({
   element,
   attributes,
@@ -6480,11 +6715,11 @@ function renderElement3({
 }) {
   switch (element.type) {
     case "ordered-list-item":
-      return /* @__PURE__ */ jsx43(OrderedListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx47(OrderedListItem, { element, attributes, children });
     case "unordered-list-item":
-      return /* @__PURE__ */ jsx43(UnorderedListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx47(UnorderedListItem, { element, attributes, children });
     case "task-list-item":
-      return /* @__PURE__ */ jsx43(TaskListItem, { element, attributes, children });
+      return /* @__PURE__ */ jsx47(TaskListItem, { element, attributes, children });
   }
 }
 
@@ -6549,7 +6784,7 @@ import { clsx as clsx7 } from "clsx";
 import { Editor as Editor43, Point as Point3, Range as Range8 } from "slate";
 
 // src/marks-plugin/methods/removeMarks.ts
-import { Editor as Editor41, Text as Text4, Transforms as Transforms29 } from "slate";
+import { Editor as Editor41, Text as Text4, Transforms as Transforms30 } from "slate";
 function removeMarks(editor, { at = editor.selection } = {}) {
   if (at == null)
     return;
@@ -6567,7 +6802,7 @@ function removeMarks(editor, { at = editor.selection } = {}) {
       setter[key2] = null;
     }
   }
-  Transforms29.setNodes(editor, setter, {
+  Transforms30.setNodes(editor, setter, {
     match: (n) => Text4.isText(n),
     split: true,
     at
@@ -6591,7 +6826,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;
     }
   }
@@ -6619,8 +6854,8 @@ function createMarksMethods(editor) {
 }
 
 // src/marks-plugin/styles.tsx
-import styled29 from "@emotion/styled";
-var $MarksSpan = styled29("span")`
+import styled31 from "@emotion/styled";
+var $MarksSpan = styled31("span")`
   &.--bold {
     font-weight: bold;
   }
@@ -6641,12 +6876,12 @@ var $MarksSpan = styled29("span")`
     text-decoration: underline line-through;
   }
   &.--highlight {
-    background-color: #ffeb3b;
+    background-color: #ffff00;
   }
 `;
 
 // src/marks-plugin/index.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var MarksPlugin = createPlugin((editor) => {
   editor.marksPlugin = createMarksMethods(editor);
   editor.activeMarks = {};
@@ -6655,7 +6890,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) => {
@@ -6686,7 +6922,7 @@ var MarksPlugin = createPlugin((editor) => {
     name: "marks",
     editableProps: {
       renderLeaf: ({ leaf, children }) => {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx48(
           $MarksSpan,
           {
             className: clsx7({
@@ -6980,7 +7216,7 @@ function selectElementBelow(editor, t2) {
   try {
     selectStartOfElement(editor, Path14.next(tablePath));
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 }
@@ -6993,7 +7229,7 @@ function selectElementAbove(editor, t2) {
   try {
     selectEndOfElement(editor, Path14.previous(tablePath));
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 }
@@ -7249,14 +7485,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 styled31 from "@emotion/styled";
+import styled33 from "@emotion/styled";
 
 // src/table-plugin/render-element/styles/table-menu-styles.ts
-import styled30 from "@emotion/styled";
-var $BaseMenu = styled30("div")`
+import styled32 from "@emotion/styled";
+var $BaseMenu = styled32("div")`
   position: absolute;
   /**
    * very slightly shaded
@@ -7281,7 +7517,7 @@ var $BaseMenu = styled30("div")`
     }
   }
 `;
-var $ColumnMenu = styled30($BaseMenu)`
+var $ColumnMenu = styled32($BaseMenu)`
   cursor: pointer;
   /**
    * hangs out on top
@@ -7292,7 +7528,7 @@ var $ColumnMenu = styled30($BaseMenu)`
   height: 3em;
   top: -3em;
 `;
-var $RowMenu = styled30($BaseMenu)`
+var $RowMenu = styled32($BaseMenu)`
   /**
    * hangs out on left
    */
@@ -7301,7 +7537,7 @@ var $RowMenu = styled30($BaseMenu)`
   width: 3em;
   left: -3em;
 `;
-var $MenuTile = styled30("div")`
+var $MenuTile = styled32("div")`
   position: absolute;
   background: rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.05);
@@ -7314,7 +7550,7 @@ var $MenuTile = styled30("div")`
   right: 0;
   bottom: 0;
 `;
-var $ColumnMenuTile = styled30($MenuTile)`
+var $ColumnMenuTile = styled32($MenuTile)`
   top: 50%;
   border-bottom: none;
   border-right: none;
@@ -7341,7 +7577,7 @@ var $ColumnMenuTile = styled30($MenuTile)`
   /* border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em; */
 `;
-var $RowMenuTile = styled30($MenuTile)`
+var $RowMenuTile = styled32($MenuTile)`
   left: 50%;
   border-right: none;
   border-bottom: none;
@@ -7368,7 +7604,7 @@ var $RowMenuTile = styled30($MenuTile)`
   /* border-top-left-radius: 0.5em;
   border-bottom-left-radius: 0.5em; */
 `;
-var $MenuButton = styled30("div")`
+var $MenuButton = styled32("div")`
   position: absolute;
   font-size: 1.5em;
   background: white;
@@ -7378,13 +7614,13 @@ var $MenuButton = styled30("div")`
     display: block;
   }
 `;
-var $AddMenuButton = styled30($MenuButton)`
+var $AddMenuButton = styled32($MenuButton)`
   color: #c0c0c0;
   &:hover {
     color: royalblue;
   }
 `;
-var $RemoveMenuButton = styled30($MenuButton)`
+var $RemoveMenuButton = styled32($MenuButton)`
   color: #c0c0c0;
   &:hover {
     color: firebrick;
@@ -7392,20 +7628,20 @@ var $RemoveMenuButton = styled30($MenuButton)`
 `;
 
 // src/table-plugin/render-element/styles/index.ts
-var $Table = styled31("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 = styled31("tr")`
+var $TableRow = styled33("tr")`
   position: relative;
   &:first-of-type {
     background: var(--table-head-bgcolor);
   }
 `;
-var $TableCell = styled31("td")`
+var $TableCell = styled33("td")`
   position: relative;
   border-width: 1px;
   border-style: solid;
@@ -7426,7 +7662,7 @@ var $TableCell = styled31("td")`
     border-right-color: var(--table-border-color);
   }
 `;
-var $TableContent = styled31("div")`
+var $TableContent = styled33("div")`
   /**
    * Smaller font inside a table than outside of it
    */
@@ -7447,19 +7683,19 @@ var TableContext = createContext2({
 });
 
 // src/table-plugin/render-element/table.tsx
-import { jsx as jsx45 } 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__ */ jsx45(TableContext.Provider, { value: { isSelected }, children: /* @__PURE__ */ jsx45($Table, { ...attributes, columns: element.columns, children: /* @__PURE__ */ jsx45("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
@@ -7467,12 +7703,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 jsx46 } from "react/jsx-runtime";
-var PlusIcon = (props) => /* @__PURE__ */ jsx46(
+import { jsx as jsx50 } from "react/jsx-runtime";
+var PlusIcon = (props) => /* @__PURE__ */ jsx50(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7481,7 +7717,7 @@ var PlusIcon = (props) => /* @__PURE__ */ jsx46(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx46(
+    children: /* @__PURE__ */ jsx50(
       "path",
       {
         fillRule: "evenodd",
@@ -7491,7 +7727,7 @@ var PlusIcon = (props) => /* @__PURE__ */ jsx46(
     )
   }
 );
-var MinusIcon = (props) => /* @__PURE__ */ jsx46(
+var MinusIcon = (props) => /* @__PURE__ */ jsx50(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7500,7 +7736,7 @@ var MinusIcon = (props) => /* @__PURE__ */ jsx46(
     width: "1em",
     height: "1em",
     ...props,
-    children: /* @__PURE__ */ jsx46(
+    children: /* @__PURE__ */ jsx50(
       "path",
       {
         fillRule: "evenodd",
@@ -7510,25 +7746,25 @@ var MinusIcon = (props) => /* @__PURE__ */ jsx46(
     )
   }
 );
-var BarsIcon = () => /* @__PURE__ */ jsx46(TablerIcon, { children: /* @__PURE__ */ jsx46("path", { d: "M4 6h16M4 12h16M4 18h16" }) });
-var AlignLeft = () => /* @__PURE__ */ jsx46(TablerIcon, { children: /* @__PURE__ */ jsx46("path", { d: "M4 6h16M4 12h10M4 18h14" }) });
-var AlignCenter = () => /* @__PURE__ */ jsx46(TablerIcon, { children: /* @__PURE__ */ jsx46("path", { d: "M4 6h16M8 12h8M6 18h12" }) });
-var AlignRight = () => /* @__PURE__ */ jsx46(TablerIcon, { children: /* @__PURE__ */ jsx46("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 jsx47, jsxs as jsxs22 } 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;
@@ -7557,9 +7793,9 @@ function ColumnMenu({ cellElement }) {
         }
       }
     ];
-    menu.open(() => /* @__PURE__ */ jsx47(Menu, { dest, items, close: menu.close }));
+    menu.open(() => /* @__PURE__ */ jsx51(Menu, { dest, items, close: menu.close }));
   }, []);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     $ColumnMenu,
     {
       ref: buttonRef,
@@ -7568,9 +7804,9 @@ function ColumnMenu({ cellElement }) {
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ jsx47($ColumnMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx47(BarsIcon, {}) }),
-        hover ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
-          /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx51($ColumnMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx51(BarsIcon, {}) }),
+        hover ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
+          /* @__PURE__ */ jsx51(
             $RemoveMenuButton,
             {
               style: {
@@ -7579,23 +7815,23 @@ function ColumnMenu({ cellElement }) {
                 marginLeft: "-0.5em"
               },
               onMouseDown: () => editor.tablePlugin.removeColumn({ at: cellElement }),
-              children: /* @__PURE__ */ jsx47(MinusIcon, {})
+              children: /* @__PURE__ */ jsx51(MinusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx51(
             $AddMenuButton,
             {
               style: { left: "-0.5em", top: 0 },
               onMouseDown: () => editor.tablePlugin.insertColumn({ at: cellElement }),
-              children: /* @__PURE__ */ jsx47(PlusIcon, {})
+              children: /* @__PURE__ */ jsx51(PlusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx51(
             $AddMenuButton,
             {
               style: { right: "-0.5em", top: 0 },
               onMouseDown: () => editor.tablePlugin.insertColumn({ at: cellElement, offset: 1 }),
-              children: /* @__PURE__ */ jsx47(PlusIcon, {})
+              children: /* @__PURE__ */ jsx51(PlusIcon, {})
             }
           )
         ] }) : null
@@ -7606,21 +7842,21 @@ 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 jsx48, jsxs as jsxs23 } 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__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     $RowMenu,
     {
       contentEditable: false,
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
       children: [
-        /* @__PURE__ */ jsx48($RowMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx48(BarsIcon, {}) }),
-        hover ? /* @__PURE__ */ jsxs23(Fragment5, { children: [
-          /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx52($RowMenuTile, { className: "--tile", children: /* @__PURE__ */ jsx52(BarsIcon, {}) }),
+        hover ? /* @__PURE__ */ jsxs24(Fragment5, { children: [
+          /* @__PURE__ */ jsx52(
             $RemoveMenuButton,
             {
               style: {
@@ -7629,23 +7865,23 @@ function RowMenu({ cellElement }) {
                 marginTop: "-0.5em"
               },
               onMouseDown: () => editor.tablePlugin.removeRow({ at: cellElement }),
-              children: /* @__PURE__ */ jsx48(MinusIcon, {})
+              children: /* @__PURE__ */ jsx52(MinusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx52(
             $AddMenuButton,
             {
               style: { top: "-0.5em", left: "0.5em" },
               onMouseDown: () => editor.tablePlugin.insertRow({ at: cellElement }),
-              children: /* @__PURE__ */ jsx48(PlusIcon, {})
+              children: /* @__PURE__ */ jsx52(PlusIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx52(
             $AddMenuButton,
             {
               style: { bottom: "-0.5em", left: "0.5em" },
               onMouseDown: () => editor.tablePlugin.insertRow({ at: cellElement, offset: 1 }),
-              children: /* @__PURE__ */ jsx48(PlusIcon, {})
+              children: /* @__PURE__ */ jsx52(PlusIcon, {})
             }
           )
         ] }) : null
@@ -7655,8 +7891,8 @@ function RowMenu({ cellElement }) {
 }
 
 // src/table-plugin/render-element/table-cell/table-menu/$table-menu.tsx
-import styled32 from "@emotion/styled";
-var $TableMenu = styled32("div")`
+import styled34 from "@emotion/styled";
+var $TableMenu = styled34("div")`
   position: absolute;
   /**
    * very slightly shaded
@@ -7689,7 +7925,7 @@ var $TableMenu = styled32("div")`
     }
   }
 `;
-var $TableMenuTile = styled32("div")`
+var $TableMenuTile = styled34("div")`
   position: absolute;
   left: 0;
   top: 0;
@@ -7700,13 +7936,13 @@ var $TableMenuTile = styled32("div")`
 `;
 
 // src/table-plugin/render-element/table-cell/table-menu/index.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function TableMenu() {
-  return /* @__PURE__ */ jsx49($TableMenu, { contentEditable: false, children: /* @__PURE__ */ jsx49($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 jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs25 } from "react/jsx-runtime";
 function TableCell({
   element,
   attributes,
@@ -7717,7 +7953,7 @@ function TableCell({
   const showTableMenu = tableContext.isSelected && element.x === 0 && element.y === 0;
   const showRowMenu = tableContext.isSelected && element.x === 0;
   const showColumnMenu = tableContext.isSelected && element.y === 0;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     $TableCell,
     {
       className: selected ? "--selected" : "",
@@ -7726,34 +7962,34 @@ function TableCell({
       "data-y": element.y,
       children: [
         children,
-        showTableMenu ? /* @__PURE__ */ jsx50(TableMenu, {}) : null,
-        showRowMenu ? /* @__PURE__ */ jsx50(RowMenu, { cellElement: element }) : null,
-        showColumnMenu ? /* @__PURE__ */ jsx50(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 jsx51 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function TableContent({
   attributes,
   children
 }) {
-  return /* @__PURE__ */ jsx51($TableContent, { ...attributes, children });
+  return /* @__PURE__ */ jsx55($TableContent, { ...attributes, children });
 }
 
 // src/table-plugin/render-element/table-row.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function TableRow({
   attributes,
   children
 }) {
-  return /* @__PURE__ */ jsx52($TableRow, { ...attributes, children });
+  return /* @__PURE__ */ jsx56($TableRow, { ...attributes, children });
 }
 
 // src/table-plugin/render-element/index.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function renderElement4({
   element,
   attributes,
@@ -7761,13 +7997,13 @@ function renderElement4({
 }) {
   switch (element.type) {
     case "table":
-      return /* @__PURE__ */ jsx53(Table, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(Table, { element, attributes, children });
     case "table-row":
-      return /* @__PURE__ */ jsx53(TableRow, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(TableRow, { element, attributes, children });
     case "table-cell":
-      return /* @__PURE__ */ jsx53(TableCell, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(TableCell, { element, attributes, children });
     case "table-content":
-      return /* @__PURE__ */ jsx53(TableContent, { element, attributes, children });
+      return /* @__PURE__ */ jsx57(TableContent, { element, attributes, children });
   }
 }
 
@@ -7911,16 +8147,16 @@ var globalStyles = css2`
 `;
 
 // src/theme-plugin/index.tsx
-import { Fragment as Fragment6, jsx as jsx54, jsxs as jsxs25 } 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 {
     name: "theme",
     editor: {},
     renderEditable: ({ attributes, Editable: Editable3 }) => {
-      return /* @__PURE__ */ jsxs25(Fragment6, { children: [
-        /* @__PURE__ */ jsx54(Global, { styles: globalStyles }),
-        /* @__PURE__ */ jsx54(Editable3, { ...attributes })
+      return /* @__PURE__ */ jsxs26(Fragment6, { children: [
+        /* @__PURE__ */ jsx58(Global, { styles: globalStyles }),
+        /* @__PURE__ */ jsx58(Editable3, { ...attributes })
       ] });
     },
     editableProps: {}
@@ -7929,27 +8165,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 { useCallback as useCallback17, useRef as useRef13 } from "react";
 import { Editor as Editor62, Transforms as Transforms44 } from "slate";
-import { ReactEditor as ReactEditor16, useFocused, useSlateStatic as useSlateStatic22 } from "slate-react";
+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 styled33 from "@emotion/styled";
-var $TableDialog = styled33($Panel)`
+import styled35 from "@emotion/styled";
+var $TableDialog = styled35($Panel)`
   padding: 0.5em;
 `;
-var $TableDialogGrid = styled33("div")`
+var $TableDialogGrid = styled35("div")`
   display: grid;
   grid-template-columns: repeat(5, 1.75em);
   grid-template-rows: 1.5em;
   /* grid-gap: 1px; */
 `;
-var $TableDialogGridCell = styled33("div")`
+var $TableDialogGridCell = styled35("div")`
   background: var(--shade-100);
   height: 1.5em;
   border-radius: 0.125em;
@@ -7962,7 +8198,7 @@ var $TableDialogGridCell = styled33("div")`
 `;
 
 // src/toolbar-plugin/components/dialog/table-dialog.tsx
-import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs26 } 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()];
 }
@@ -7971,20 +8207,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);
@@ -7992,12 +8228,12 @@ function TableDialog({
     },
     [editor]
   );
-  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
-    /* @__PURE__ */ jsx55(CloseMask, { close }),
-    /* @__PURE__ */ jsx55($TableDialog, { ref, style, children: /* @__PURE__ */ jsx55($TableDialogGrid, { onMouseLeave: () => hoverCell(0, 0), children: rows.map((y) => {
+  return /* @__PURE__ */ jsxs27(Fragment7, { children: [
+    /* @__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__ */ jsx55(
+        return /* @__PURE__ */ jsx59(
           $TableDialogGridCell,
           {
             className: clsx8({ "--selected": selected }),
@@ -8013,66 +8249,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 jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
-var H = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M7 12h10M7 5v14M17 5v14M15 19h4M15 5h4M5 19h4M5 5h4" }) });
-var More = () => /* @__PURE__ */ jsx56(TablerIcon, { className: "--more-icon", width: "0.5em", viewBox: "0 0 12 24", children: /* @__PURE__ */ jsx56("path", { d: "m2 12 4 4 4-4" }) });
-var LinkPlus = () => /* @__PURE__ */ jsx56(TablerIcon, { width: "0.5em", viewBox: "6 0 12 24", children: /* @__PURE__ */ jsx56("path", { d: "M9 12h6M12 9v6" }) });
-var H1 = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M19 18v-8l-2 2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
-var H2 = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("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__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("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__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M8 18V6h2l6 9V6h2v12h-2l-6-9v9H8z" }) });
-var Bold = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("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__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M11 5h6M7 19h6M14 5l-4 14" }) });
-var Link = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("path", { d: "M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5" }),
-  /* @__PURE__ */ jsx56("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__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M10 11H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4.333-4 5M19 11h-4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v6c0 2.667-1.333 4.333-4 5" }) });
-var DoubleQuote = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("path", { d: "M10 9l4 3-4 3" }),
-  /* @__PURE__ */ jsx56("path", { d: "M16 9l4 3-4 3" })
+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__ */ 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 BulletList = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M9 6h11M9 12h11M9 18h11M5 6v.01M5 12v.01M5 18v.01" }) });
-var Table2 = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 }),
-  /* @__PURE__ */ jsx56("path", { d: "M4 10h16M10 4v16" })
+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__ */ jsx60("path", { d: "M10 9l4 3-4 3" }),
+  /* @__PURE__ */ jsx60("path", { d: "M16 9l4 3-4 3" })
 ] });
-var Code = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "m7 8-4 4 4 4M17 8l4 4-4 4M14 4l-4 16" }) });
-var CodeBlock2 = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M9 8L5 12L9 16M15 8L19 12L15 16" }) });
-var Image = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("path", { d: "M15 8h.01" }),
-  /* @__PURE__ */ jsx56("rect", { x: 4, y: 4, width: 16, height: 16, rx: 3 }),
-  /* @__PURE__ */ jsx56("path", { d: "m4 15 4-4a3 5 0 0 1 3 0l5 5" }),
-  /* @__PURE__ */ jsx56("path", { d: "m14 14 1-1a3 5 0 0 1 3 0l2 2" })
+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__ */ jsx60("rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 }),
+  /* @__PURE__ */ jsx60("path", { d: "M4 10h16M10 4v16" })
 ] });
-var Plus = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M12 5v14M5 12h14" }) });
-var Strikethrough = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("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__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M7 5v5a5 5 0 0 0 10 0V5M5 19h14" }) });
-var ListCheck = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("path", { d: "m9 11 3 3 8-8" }),
-  /* @__PURE__ */ jsx56("path", { d: "M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9" })
+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__ */ 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 ListNumbers = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("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__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M4 6h16M8 12h12M12 18h8M7 12l-3-3M7 12l-3 3" }) });
-var DecreaseDepth = () => /* @__PURE__ */ jsx56(TablerIcon, { children: /* @__PURE__ */ jsx56("path", { d: "M4 6h16M8 12h12M12 18h8M4 12l3-3M4 12l3 3" }) });
-var Markdown = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("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__ */ jsx56("path", { d: "M7 15V9l2 2 2-2v6M14 9v6h4M14 13h2" })
+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__ */ 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 VisualEditor = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("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__ */ jsx56("path", { d: "M8 8h8M8 12h8M8 16h5" }),
-  /* @__PURE__ */ jsx56("path", { d: "M16 16h1" })
-] });
-var Highlight = () => /* @__PURE__ */ jsxs27(TablerIcon, { children: [
-  /* @__PURE__ */ jsx56("path", { d: "M3 19h4L17.5 8.5a2.828 2.828 0 1 0-4-4L3 15v4" }),
-  /* @__PURE__ */ jsx56("path", { d: "m12.5 5.5 4 4" }),
-  /* @__PURE__ */ jsx56("path", { d: "M3 21h7" }),
-  /* @__PURE__ */ jsx56("path", { d: "M18 19h3M19.5 17.5v3" })
+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__ */ 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
@@ -8081,17 +8308,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 = [
@@ -8136,49 +8361,77 @@ 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 styled34 from "@emotion/styled";
-var $FileDialog = styled34($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 jsx57, jsxs as jsxs28 } 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 hasOnImageSave = !!editor.wysimark?.onImageSave;
   const [url, setUrl] = useState9(savedState?.url ?? "");
   const [alt, setAlt] = useState9(savedState?.alt ?? "");
   const [title, setTitle] = useState9(savedState?.title ?? "");
-  const [imageSource, setImageSource] = useState9(savedState?.imageSource ?? (hasOnImageChange ? "file" : "url"));
-  const [isUploading, setIsUploading] = useState9(false);
-  const [uploadedUrl, setUploadedUrl] = useState9(savedState?.uploadedUrl ?? "");
+  const [titleManuallyEdited, setTitleManuallyEdited] = useState9(false);
+  const [imageSource, setImageSource] = useState9(savedState?.imageSource ?? (hasOnImageSave ? "file" : "url"));
+  const [vaultPath, setVaultPath] = useState9(savedState?.vaultPath ?? "");
+  const [selectedFile, setSelectedFile] = useState9(savedState?.selectedFile);
+  const [isSaving, setIsSaving] = useState9(false);
+  const [previewUrl, setPreviewUrl] = useState9(null);
+  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 (selectedFile) {
+      const url2 = URL.createObjectURL(selectedFile);
+      setPreviewUrl(url2);
+      return () => URL.revokeObjectURL(url2);
+    } else {
+      setPreviewUrl(null);
+    }
+  }, [selectedFile]);
   useEffect7(() => {
     if (editor.wysimark) {
-      editor.wysimark.imageDialogState = { url, alt, title, imageSource, uploadedUrl };
+      editor.wysimark.imageDialogState = { url, alt, title, imageSource, vaultPath, selectedFile };
     }
-  }, [url, alt, title, imageSource, uploadedUrl]);
+  }, [url, alt, title, imageSource, vaultPath, selectedFile]);
   const clearState = () => {
     if (editor.wysimark) {
       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
@@ -8187,230 +8440,291 @@ function ImageUrlDialog({
       );
     }
   );
-  function handleSubmit(e) {
+  const style = {
+    ...baseStyle,
+    left: baseStyle.left + dragOffset.x,
+    top: baseStyle.top + dragOffset.y
+  };
+  async function handleSubmit(e) {
     e.preventDefault();
-    const finalUrl = imageSource === "file" ? uploadedUrl : url;
-    if (finalUrl.trim() === "")
-      return;
-    editor.image.insertImageFromUrl(finalUrl, alt, title);
-    clearState();
-    close();
+    if (imageSource === "file" && selectedFile && editor.wysimark?.onImageSave) {
+      if (vaultPath.trim() === "")
+        return;
+      setIsSaving(true);
+      try {
+        const resultPath = await editor.wysimark.onImageSave(selectedFile, vaultPath);
+        editor.image.insertImageFromUrl(resultPath, alt, title);
+        clearState();
+        close();
+      } finally {
+        setIsSaving(false);
+      }
+    } else if (imageSource === "url") {
+      if (url.trim() === "")
+        return;
+      editor.image.insertImageFromUrl(url, alt, title);
+      clearState();
+      close();
+    }
   }
   function handleCancel() {
     clearState();
     close();
   }
-  async function handleFileSelect(e) {
+  function handleFileSelect(e) {
     const file = e.target.files?.[0];
-    if (!file || !editor.wysimark?.onImageChange)
+    if (!file)
       return;
-    setIsUploading(true);
-    try {
-      const resultUrl = await editor.wysimark.onImageChange(file);
-      setUploadedUrl(resultUrl);
-    } catch (error) {
-      console.error("Failed to upload image:", error);
-    } finally {
-      setIsUploading(false);
+    setSelectedFile(file);
+    if (!vaultPath) {
+      setVaultPath(`attachments/${file.name}`);
     }
   }
   function handleSelectFileClick() {
     fileInputRef.current?.click();
   }
-  const isSubmitDisabled = imageSource === "file" ? uploadedUrl.trim() === "" || isUploading : url.trim() === "";
-  return /* @__PURE__ */ jsxs28(Fragment8, { children: [
-    /* @__PURE__ */ jsx57(CloseMask, { close }),
-    /* @__PURE__ */ jsx57($FileDialog, { ref, style, children: /* @__PURE__ */ jsxs28("form", { onSubmit: handleSubmit, style: { padding: "8px" }, children: [
-      hasOnImageChange && /* @__PURE__ */ jsxs28("div", { style: { marginBottom: "12px" }, children: [
-        /* @__PURE__ */ jsxs28("label", { style: { display: "inline-flex", alignItems: "center", marginRight: "16px", cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx57(
+  const isSubmitDisabled = imageSource === "file" ? !selectedFile || vaultPath.trim() === "" || isSaving : url.trim() === "";
+  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    /* @__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: [
+        hasOnImageSave && /* @__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: handleFileSelect,
+              style: { display: "none" }
             }
           ),
-          t("imageSourceFile")
-        ] }),
-        /* @__PURE__ */ jsxs28("label", { style: { display: "inline-flex", alignItems: "center", cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx57(
-            "input",
+          /* @__PURE__ */ jsx61(
+            "button",
             {
-              type: "radio",
-              name: "imageSource",
-              value: "url",
-              checked: imageSource === "url",
-              onChange: () => setImageSource("url"),
-              style: { marginRight: "4px" }
+              type: "button",
+              onClick: handleSelectFileClick,
+              disabled: isSaving,
+              style: {
+                padding: "8px 16px",
+                backgroundColor: isSaving ? "#ccc" : "#0078d4",
+                color: isSaving ? "#666" : "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: isSaving ? "not-allowed" : "pointer",
+                marginBottom: "8px",
+                fontWeight: "bold"
+              },
+              children: t("selectFile")
             }
           ),
-          t("imageSourceUrl")
-        ] })
-      ] }),
-      imageSource === "url" ? /* @__PURE__ */ jsxs28("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx57("label", { style: { display: "block", marginBottom: "4px" }, children: t("imageUrlRequired") }),
-        /* @__PURE__ */ jsx57(
-          "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__ */ jsxs28("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx57(
-          "input",
-          {
-            ref: fileInputRef,
-            type: "file",
-            accept: "image/*",
-            onChange: handleFileSelect,
-            style: { display: "none" }
-          }
-        ),
-        /* @__PURE__ */ jsx57(
-          "button",
-          {
-            type: "button",
-            onClick: handleSelectFileClick,
-            disabled: isUploading,
-            style: {
-              padding: "8px 16px",
-              backgroundColor: isUploading ? "#ccc" : "#f0f0f0",
-              border: "1px solid #ccc",
+          selectedFile && /* @__PURE__ */ jsxs29("div", { style: { marginTop: "8px" }, children: [
+            /* @__PURE__ */ jsxs29("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "8px",
+              backgroundColor: "var(--shade-100)",
               borderRadius: "4px",
-              cursor: isUploading ? "not-allowed" : "pointer",
               marginBottom: "8px"
-            },
-            children: isUploading ? t("uploading") : t("selectFile")
-          }
-        ),
-        uploadedUrl && /* @__PURE__ */ jsxs28("div", { style: { marginTop: "8px" }, children: [
-          /* @__PURE__ */ jsx57("label", { style: { display: "block", marginBottom: "4px" }, children: t("imageUrlRequired") }),
-          /* @__PURE__ */ jsx57(
+            }, children: [
+              previewUrl && /* @__PURE__ */ jsx61(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: "Preview",
+                  style: {
+                    maxWidth: "60px",
+                    maxHeight: "60px",
+                    objectFit: "contain",
+                    borderRadius: "4px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs29("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx61("div", { style: {
+                  fontWeight: "bold",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }, children: selectedFile.name }),
+                /* @__PURE__ */ jsxs29("div", { style: { fontSize: "12px", color: "var(--shade-500)" }, children: [
+                  (selectedFile.size / 1024).toFixed(1),
+                  " KB"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx61("label", { style: { display: "block", marginBottom: "4px" }, children: t("vaultPath") }),
+            /* @__PURE__ */ jsx61(
+              "input",
+              {
+                type: "text",
+                value: vaultPath,
+                onChange: (e) => setVaultPath(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: "attachments/image.png"
+              }
+            ),
+            /* @__PURE__ */ jsx61("div", { style: { fontSize: "12px", color: "var(--shade-500)", marginTop: "4px" }, children: t("vaultPathHint") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx61("label", { style: { display: "block", marginBottom: "4px" }, children: t("altText") }),
+          /* @__PURE__ */ jsx61(
             "input",
             {
               type: "text",
-              value: uploadedUrl,
-              disabled: true,
+              value: alt,
+              onChange: handleAltChange,
               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("imageDescription")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx61("label", { style: { display: "block", marginBottom: "4px" }, children: t("title") }),
+          /* @__PURE__ */ jsx61(
+            "input",
+            {
+              type: "text",
+              value: title,
+              onChange: handleTitleChange,
+              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("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: isSaving ? t("saving") : 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__ */ jsxs28("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx57("label", { style: { display: "block", marginBottom: "4px" }, children: t("altText") }),
-        /* @__PURE__ */ jsx57(
-          "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__ */ jsxs28("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx57("label", { style: { display: "block", marginBottom: "4px" }, children: t("title") }),
-        /* @__PURE__ */ jsx57(
-          "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__ */ jsxs28("div", { style: { display: "flex", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx57(
-          "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__ */ jsx57(
-          "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 styled35 from "@emotion/styled";
-var $DialogButton = styled35("div")`
+import styled37 from "@emotion/styled";
+var $DialogButton = styled37("div")`
   /* Center vertically and horizontally */
   display: flex;
   align-items: center;
@@ -8435,7 +8749,7 @@ var $DialogButton = styled35("div")`
     stroke-width: 2px;
   }
 `;
-var $DialogHint = styled35("div")`
+var $DialogHint = styled37("div")`
   font-size: 0.875em;
   margin-top: 0.5em;
   color: var(--shade-500);
@@ -8443,15 +8757,19 @@ var $DialogHint = styled35("div")`
 `;
 
 // src/toolbar-plugin/components/dialog/anchor-dialog.tsx
-import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs29 } 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(
@@ -8465,6 +8783,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)) {
@@ -8483,13 +8806,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);
@@ -8499,7 +8822,7 @@ function AnchorDialog2({
     },
     [setText, setTitle, titleManuallyEdited]
   );
-  const onChangeTitle = useCallback13(
+  const onChangeTitle = useCallback15(
     (e) => {
       setTitle(e.currentTarget.value);
       setTitleManuallyEdited(true);
@@ -8513,47 +8836,51 @@ function AnchorDialog2({
     e.stopPropagation();
     insertLink2();
   };
-  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
-    /* @__PURE__ */ jsx58(CloseMask, { close }),
-    /* @__PURE__ */ jsxs29($AnchorDialog, { ref, style, children: [
-      /* @__PURE__ */ jsx58($AnchorDialogInputLine, { children: /* @__PURE__ */ jsx58(
-        $AnchorDialogInput,
-        {
-          type: "text",
-          value: url,
-          autoFocus: true,
-          placeholder: t("linkUrl"),
-          onChange: onChangeUrl,
-          onKeyDown
-        }
-      ) }),
-      /* @__PURE__ */ jsx58($AnchorDialogInputLine, { style: { marginTop: "0.5em" }, children: /* @__PURE__ */ jsx58(
-        $AnchorDialogInput,
-        {
-          type: "text",
-          value: text,
-          placeholder: t("linkText"),
-          onChange: onChangeText,
-          onKeyDown
-        }
-      ) }),
-      /* @__PURE__ */ jsxs29($AnchorDialogInputLine, { style: { marginTop: "0.5em" }, children: [
-        /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+    /* @__PURE__ */ jsx62(CloseMask, { close }),
+    /* @__PURE__ */ jsxs30($AnchorDialog, { ref, style, children: [
+      /* @__PURE__ */ jsx62(DraggableHeader, { onDrag: handleDrag }),
+      /* @__PURE__ */ jsxs30("div", { style: { padding: "0.75em" }, children: [
+        /* @__PURE__ */ jsx62($AnchorDialogInputLine, { children: /* @__PURE__ */ jsx62(
+          $AnchorDialogInput,
+          {
+            type: "text",
+            value: url,
+            autoFocus: true,
+            placeholder: t("linkUrl"),
+            onChange: onChangeUrl,
+            onKeyDown
+          }
+        ) }),
+        /* @__PURE__ */ jsx62($AnchorDialogInputLine, { style: { marginTop: "0.5em" }, children: /* @__PURE__ */ jsx62(
           $AnchorDialogInput,
           {
             type: "text",
-            value: title,
-            placeholder: t("tooltipText"),
-            onChange: onChangeTitle,
+            value: text,
+            placeholder: t("linkText"),
+            onChange: onChangeText,
             onKeyDown
           }
-        ),
-        /* @__PURE__ */ jsxs29($DialogButton, { onClick: insertLink2, children: [
-          /* @__PURE__ */ jsx58(Link, {}),
-          /* @__PURE__ */ jsx58(LinkPlus, {})
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx58($DialogHint, { children: t("tooltipHint") })
+        ) }),
+        /* @__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") })
+      ] })
     ] })
   ] });
 }
@@ -8643,9 +8970,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;
@@ -8664,22 +8992,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];
@@ -8688,8 +9014,7 @@ var compactListItems = [
     icon: ListNumbers,
     title: t("list"),
     more: true,
-    children: [...listItems, "divider", ...listDepthItems],
-    show: (editor) => !!editor.list
+    children: [...listItems, "divider", ...listDepthItems]
   }
 ];
 
@@ -8722,7 +9047,7 @@ 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);
         Transforms43.removeNodes(editor, { at: path });
         Transforms43.insertNodes(
@@ -8736,7 +9061,7 @@ 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))) {
@@ -8757,10 +9082,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;
@@ -8773,38 +9098,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,
@@ -8815,10 +9108,7 @@ var largeItems = [
   "divider",
   ...expandedDialogItems,
   "divider",
-  ...expandedQuoteItems,
-  "divider",
-  rawModeItem,
-  visualModeItem
+  ...expandedQuoteItems
 ];
 var mediumItems = [
   ...compactBlockItems,
@@ -8829,10 +9119,7 @@ var mediumItems = [
   "divider",
   ...compactDialogItems,
   "divider",
-  ...expandedQuoteItems,
-  "divider",
-  rawModeItem,
-  visualModeItem
+  ...expandedQuoteItems
 ];
 var smallItems = [
   ...compactBlockItems,
@@ -8843,44 +9130,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 jsx59, jsxs as jsxs30 } 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__ */ jsx59(Menu, { dest, items, close: menuLayer.close }));
+      menuLayer.open(() => /* @__PURE__ */ jsx63(Menu, { dest, items, close: menuLayer.close }));
     } else if (Component) {
-      menuLayer.open(() => /* @__PURE__ */ jsx59(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);
@@ -8892,7 +9176,7 @@ function ToolbarButton({
       openMenu();
     }
   }, [menuLayer.layer, item]);
-  const onMouseEnter = useCallback14(
+  const onMouseEnter = useCallback16(
     (e) => {
       tooltip.onMouseEnter(e);
       if (menuLayer.layer)
@@ -8900,7 +9184,7 @@ function ToolbarButton({
     },
     [menuLayer.layer]
   );
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     $ToolbarButton,
     {
       "data-item-type": "button",
@@ -8914,24 +9198,24 @@ function ToolbarButton({
         "--disabled": !isActive && r(item?.title)?.includes("Depth")
       }),
       children: [
-        /* @__PURE__ */ jsx59(item.icon, {}),
-        item.more ? /* @__PURE__ */ jsx59(More, {}) : null
+        /* @__PURE__ */ jsx63(item.icon, {}),
+        item.more ? /* @__PURE__ */ jsx63(More, {}) : null
       ]
     }
   );
 }
 
 // src/toolbar-plugin/components/toolbar/toolbar.tsx
-import { jsx as jsx60 } 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__ */ jsx60($ToolbarDividerContainer, { "data-item-type": "divider", children: /* @__PURE__ */ jsx60($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__ */ jsx60(ToolbarButton, { item });
+  return /* @__PURE__ */ jsx64(ToolbarButton, { item });
 }
 function getWidths(toolbar) {
   const button = toolbar.querySelector(
@@ -8957,7 +9241,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(
@@ -8989,7 +9273,7 @@ function Toolbar() {
       window.removeEventListener("resize", refresh);
     };
   }, []);
-  return /* @__PURE__ */ jsx60($ToolbarContainer, { ref, children: /* @__PURE__ */ jsx60($Toolbar, { children: items.map((item, index) => /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx64($ToolbarContainer, { ref, children: /* @__PURE__ */ jsx64($Toolbar, { children: items.map((item, index) => /* @__PURE__ */ jsx64(
     ToolbarItem,
     {
       item
@@ -8999,12 +9283,12 @@ function Toolbar() {
 }
 
 // src/toolbar-plugin/render-editable/index.tsx
-import { jsx as jsx61, jsxs as jsxs31 } 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;
@@ -9013,7 +9297,7 @@ function renderEditable({ attributes, Editable: Editable3 }) {
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx61(Layers, { children: /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx65(Layers, { children: /* @__PURE__ */ jsxs32(
     $OuterContainer,
     {
       ref: outerContainerRef,
@@ -9025,8 +9309,8 @@ function renderEditable({ attributes, Editable: Editable3 }) {
       },
       onClick: onClickOuterContainer,
       children: [
-        /* @__PURE__ */ jsx61(Toolbar, {}),
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx65(Toolbar, {}),
+        /* @__PURE__ */ jsx65(
           Editable3,
           {
             as: $Editable,
@@ -9126,7 +9410,7 @@ var PasteMarkdownPlugin = createPlugin(
 );
 
 // src/placeholder-plugin/index.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function renderPlaceholder(props) {
   const nextAttributes = {
     ...props.attributes,
@@ -9136,7 +9420,7 @@ function renderPlaceholder(props) {
       maxWidth: void 0
     }
   };
-  return /* @__PURE__ */ jsx62("span", { ...nextAttributes, children: props.children });
+  return /* @__PURE__ */ jsx66("span", { ...nextAttributes, children: props.children });
 }
 var PlaceholderPlugin = createPlugin(
   (editor, _options, { createPolicy }) => {
@@ -9151,7 +9435,7 @@ var PlaceholderPlugin = createPlugin(
 );
 
 // src/entry/plugins.ts
-var defaultPlugins = [
+var plugins = [
   PasteMarkdownPlugin,
   ConvertElementPlugin,
   AnchorPlugin,
@@ -9160,6 +9444,7 @@ var defaultPlugins = [
   InlineCodePlugin,
   BlockQuotePlugin,
   CodeBlockPlugin,
+  HtmlBlockPlugin,
   TablePlugin,
   HorizontalRulePlugin,
   TrailingBlockPlugin,
@@ -9174,7 +9459,8 @@ 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";
@@ -9232,9 +9518,9 @@ function useEditor({
 }
 
 // src/entry/index.tsx
-import { jsx as jsx63, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs33 } from "react/jsx-runtime";
 function renderLeaf({ children, attributes }) {
-  return /* @__PURE__ */ jsx63("span", { ...attributes, children });
+  return /* @__PURE__ */ jsx67("span", { ...attributes, children });
 }
 function Editable2({
   editor,
@@ -9248,11 +9534,11 @@ 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 = serialize(editor.children);
@@ -9260,7 +9546,6 @@ function Editable2({
           markdown,
           children: editor.children
         };
-        lastEmittedValueRef.current = markdown;
         onChange(markdown);
       },
       throttleInMs,
@@ -9268,40 +9553,32 @@ 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;
@@ -9309,12 +9586,12 @@ function Editable2({
       }
     }
   }
-  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) => {
@@ -9322,46 +9599,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;
-  return /* @__PURE__ */ jsxs32("div", { style: { position: "relative" }, children: [
-    isRawMode && /* @__PURE__ */ jsx63("div", { style: { position: "absolute", top: "5px", right: "25px", zIndex: 10 }, children: /* @__PURE__ */ jsx63(
+  editor.wysimark.onChange = onChange;
+  const disableRawMode = editor.wysimark.disableRawMode;
+  return /* @__PURE__ */ jsxs33("div", { style: { position: "relative" }, children: [
+    !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) => {
@@ -9370,10 +9644,54 @@ function Editable2({
             e.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsx63("span", { style: { color: "#4a90e2", fontSize: "1.25em" }, children: /* @__PURE__ */ jsx63(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__ */ jsx63("div", { style: { display: isRawMode ? "block" : "none", textAlign: "center" }, children: /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx67("div", { style: { display: isRawMode ? "block" : "none", textAlign: "center" }, children: /* @__PURE__ */ jsx67(
       "textarea",
       {
         value: unescapeUrlSlashes(rawText).replace(/&nbsp;/g, ""),
@@ -9382,9 +9700,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",
@@ -9398,13 +9714,13 @@ function Editable2({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx63("div", { style: { display: isRawMode ? "none" : "block" }, children: /* @__PURE__ */ jsx63(
+    /* @__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__ */ jsx63(
+        children: /* @__PURE__ */ jsx67(
           SinkEditable2,
           {
             renderLeaf,
@@ -9421,13 +9737,13 @@ function Editable2({
 }
 
 // src/index.tsx
-import { jsx as jsx64 } 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(
@@ -9445,7 +9761,7 @@ function StandaloneEditor({
     },
     [markdownRef, setMarkdown]
   );
-  const onChangeEditable = useCallback17(
+  const onChangeEditable = useCallback19(
     (markdown2) => {
       markdownRef.current = markdown2;
       setMarkdown(markdown2);
@@ -9453,7 +9769,7 @@ function StandaloneEditor({
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx68(
     Editable2,
     {
       editor,
@@ -9468,7 +9784,7 @@ function createWysimark(containerElement, options) {
   const standaloneMethodsRef = createRef();
   const root = createRoot(containerElement);
   root.render(
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx68(
       StandaloneEditor,
       {
         standaloneMethodsRef,
@@ -9480,7 +9796,7 @@ function createWysimark(containerElement, options) {
     unmount() {
       try {
         root.unmount();
-      } catch (e) {
+      } catch {
       }
     },
     getMarkdown() {