tinacms 0.0.0-8eeb2df-20241010045955 → 0.0.0-a318f2f-20241010063440

package/dist/index.mjs

@@ -6,28 +6,29 @@ var __publicField = (obj, key, value) => {
 };
 import { z } from "zod";
 import * as React from "react";
-import React__default, { useState, useCallback, createContext, forwardRef, useContext, useEffect, useMemo, startTransition, useRef, createElement, Component } from "react";
+import React__default, { useState, useCallback, useEffect, useRef, createContext, forwardRef, useContext, useMemo, startTransition, createElement, Component } from "react";
 import { createPortal, findDOMNode } from "react-dom";
+import { withRef, cn as cn$1, withVariants, withProps, withCn, createPrimitiveElement } from "@udecode/cn";
 import { toggleList, ELEMENT_UL, ELEMENT_OL, ELEMENT_H1 as ELEMENT_H1$1, ELEMENT_H2 as ELEMENT_H2$1, ELEMENT_H3 as ELEMENT_H3$1, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6, ELEMENT_PARAGRAPH, ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK, ELEMENT_CODE_LINE, ELEMENT_CODE_SYNTAX, ELEMENT_LI, ELEMENT_LINK, MARK_CODE, MARK_UNDERLINE, MARK_STRIKETHROUGH, MARK_ITALIC, MARK_BOLD, ELEMENT_HR, ELEMENT_TABLE, ELEMENT_TR, ELEMENT_TD, ELEMENT_TH, unwrapList, ELEMENT_TODO_LI, createTrailingBlockPlugin, createAutoformatPlugin, createExitBreakPlugin, KEYS_HEADING, createResetNodePlugin, createHeadingPlugin, createParagraphPlugin, createBlockquotePlugin, createBoldPlugin, createItalicPlugin, createUnderlinePlugin, createCodePlugin, createListPlugin, createIndentListPlugin, createHorizontalRulePlugin, createNodeIdPlugin, createTablePlugin, getListItemEntry, useListToolbarButtonState, useListToolbarButton } from "@udecode/plate";
-import { useSelected, useReadOnly, ReactEditor } from "slate-react";
+import { PlateElement, isCollapsed, findNodePath, getPointAfter, insertNodes, ELEMENT_DEFAULT, focusEditor, getPointBefore, setNodes, isElement, PlateLeaf, createPluginFactory, useComposedRef, useEditorRef, createPointRef, insertText, moveSelection, toggleNodeType, useElement, useRemoveNodeButton, useEditorSelector, isSelectionExpanded, withHOC, normalizeEditor, getBlockAbove, queryNode, getParentNode, isType, someNode, isSelectionAtBlockStart, setElements, insertNode, getPluginType, isBlock, isBlockAboveEmpty, findNode, PlateContent, getNodeEntries, useEditorState, collapseSelection, useMarkToolbarButtonState, useMarkToolbarButton, insertEmptyElement, usePlateSelectors, useEventEditorSelectors, PortalBody, useFormInputProps, createPlugins, Plate } from "@udecode/plate-common";
 import { ELEMENT_SLASH_INPUT, createSlashPlugin } from "@udecode/plate-slash-command";
-import { cn as cn$1, withRef, withVariants, withCn, withProps, createPrimitiveElement } from "@udecode/cn";
-import { useComposedRef, useEditorRef, findNodePath, getPointBefore, createPointRef, insertText, moveSelection, PlateElement, toggleNodeType, PlateLeaf, isCollapsed, getPointAfter, insertNodes, ELEMENT_DEFAULT, focusEditor, setNodes, isElement, useElement, useRemoveNodeButton, useEditorSelector, isSelectionExpanded, withHOC, createPluginFactory, normalizeEditor, getBlockAbove, queryNode, getParentNode, isType, someNode, isSelectionAtBlockStart, setElements, insertNode, getPluginType, isBlock, isBlockAboveEmpty, findNode, PlateContent, useMarkToolbarButtonState, useMarkToolbarButton, useEditorState, getNodeEntries, collapseSelection, usePlateSelectors, useEventEditorSelectors, PortalBody, useFormInputProps, createPlugins, Plate } from "@udecode/plate-common";
-import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4 as ELEMENT_H4$1, ELEMENT_H5 as ELEMENT_H5$1, ELEMENT_H6 as ELEMENT_H6$1 } from "@udecode/plate-heading";
+import { useSelected, useReadOnly, ReactEditor } from "slate-react";
+import { useCodeBlockElementState, useCodeSyntaxLeaf, ELEMENT_CODE_BLOCK as ELEMENT_CODE_BLOCK$1 } from "@udecode/plate-code-block";
+import MonacoEditor, { loader, useMonaco } from "@monaco-editor/react";
+import { Combobox, ComboboxInput, ComboboxButton, Transition, ComboboxOptions, ComboboxOption, Popover as Popover$3, PopoverButton, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
 import { cva } from "class-variance-authority";
-import { Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, ChevronDown, PaintBucket, Quote, Check, ChevronRight, ChevronsUpDown, X, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Search, Settings, Strikethrough, Subscript, Superscript, Table, Text, Underline, Link2Off, Eye, Moon, SunMedium, Twitter } from "lucide-react";
-import { useComboboxContext, Combobox, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
+import { Eye, SquarePen, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, ChevronDown, PaintBucket, Quote, Check, ChevronRight, ChevronsUpDown, X, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Search, Settings, Strikethrough, Subscript, Superscript, Table, Text, Underline, Link2Off, Moon, SunMedium, Twitter } from "lucide-react";
+import mermaid from "mermaid";
+import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4 as ELEMENT_H4$1, ELEMENT_H5 as ELEMENT_H5$1, ELEMENT_H6 as ELEMENT_H6$1 } from "@udecode/plate-heading";
+import { useComboboxContext, Combobox as Combobox$1, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { useHTMLInputCursorState, useComboboxInput, filterWords } from "@udecode/plate-combobox";
-import { useCodeSyntaxLeaf, useCodeBlockElementState, ELEMENT_CODE_BLOCK as ELEMENT_CODE_BLOCK$1 } from "@udecode/plate-code-block";
-import MonacoEditor, { loader, useMonaco } from "@monaco-editor/react";
-import { Combobox as Combobox$1, ComboboxInput, ComboboxButton, Transition, ComboboxOptions, ComboboxOption, Popover as Popover$3, PopoverButton, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
+import { useTableCellElementState, useTableCellElement, useTableCellElementResizableState, useTableCellElementResizable, useTableBordersDropdownMenuContentState, useTableMergeState, TableProvider, useTableElementState, useTableElement, mergeTableCells, unmergeTableCells, ELEMENT_TABLE as ELEMENT_TABLE$1, getTableColumnCount, insertTable, deleteTable, insertTableColumn, deleteColumn, insertTableRow, deleteRow } from "@udecode/plate-table";
+import { ResizeHandle as ResizeHandle$1 } from "@udecode/plate-resizable";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { PopoverAnchor } from "@radix-ui/react-popover";
-import { useTableBordersDropdownMenuContentState, useTableMergeState, TableProvider, useTableElementState, useTableElement, mergeTableCells, unmergeTableCells, useTableCellElementState, useTableCellElement, useTableCellElementResizableState, useTableCellElementResizable, ELEMENT_TABLE as ELEMENT_TABLE$1, getTableColumnCount, insertTable, deleteTable, insertTableColumn, deleteColumn, insertTableRow, deleteRow } from "@udecode/plate-table";
 import { Slot } from "@radix-ui/react-slot";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { ResizeHandle as ResizeHandle$1 } from "@udecode/plate-resizable";
 import arrayMutators from "final-form-arrays";
 import setFieldData from "final-form-set-field-data";
 import { FORM_ERROR, createForm, getIn } from "final-form";
@@ -908,6 +909,20 @@ const useEditorContext = () => {
 const useTemplates = () => {
   return React__default.useContext(EditorContext);
 };
+const BlockquoteElement = withRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(
+      PlateElement,
+      {
+        asChild: true,
+        className: cn$1("my-1 border-l-2 pl-6 italic", className),
+        ref,
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement("blockquote", null, children)
+    );
+  }
+);
 function classNames$1(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -917,161 +932,681 @@ const uuid = () => {
     (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
   );
 };
-const RawMarkdown = () => {
+function ChevronDownIcon(props, svgRef) {
+  return /* @__PURE__ */ React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    ref: svgRef
+  }, props), /* @__PURE__ */ React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
+    clipRule: "evenodd"
+  }));
+}
+const ForwardRef = React.forwardRef(ChevronDownIcon);
+const ChevronDownIcon$1 = ForwardRef;
+const Autocomplete = ({
+  value,
+  onChange,
+  defaultQuery,
+  items: items2
+}) => {
+  const [query, setQuery] = React__default.useState(defaultQuery ?? "");
+  const filteredItems = React__default.useMemo(() => {
+    try {
+      const reFilter = new RegExp(query, "i");
+      const _items = items2.filter((item) => reFilter.test(item.label));
+      if (_items.length === 0)
+        return items2;
+      return _items;
+    } catch (err) {
+      return items2;
+    }
+  }, [items2, query]);
   return /* @__PURE__ */ React__default.createElement(
-    "svg",
+    Combobox,
     {
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: 0,
-      role: "img",
-      className: "h-5 w-5",
-      viewBox: "0 0 24 24",
-      height: "1em",
-      width: "1em",
-      xmlns: "http://www.w3.org/2000/svg"
+      value,
+      onChange,
+      as: "div",
+      className: "relative inline-block text-left z-20"
     },
-    /* @__PURE__ */ React__default.createElement("title", null),
-    /* @__PURE__ */ React__default.createElement("path", { d: "M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z" })
+    /* @__PURE__ */ React__default.createElement("div", { className: "mt-1" }, /* @__PURE__ */ React__default.createElement("div", { className: "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md sm:text-sm" }, /* @__PURE__ */ React__default.createElement(
+      ComboboxInput,
+      {
+        className: "w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300",
+        displayValue: (item) => (item == null ? void 0 : item.label) ?? "Plain Text",
+        onChange: (event) => setQuery(event.target.value),
+        onClick: (ev) => ev.stopPropagation()
+      }
+    ), /* @__PURE__ */ React__default.createElement(ComboboxButton, { className: "absolute inset-y-0 right-0 flex items-center pr-2" }, /* @__PURE__ */ React__default.createElement(
+      ChevronDownIcon$1,
+      {
+        className: "h-5 w-5 text-gray-400",
+        "aria-hidden": "true"
+      }
+    )))),
+    /* @__PURE__ */ React__default.createElement(
+      Transition,
+      {
+        enter: "transition ease-out duration-100",
+        enterFrom: "transform opacity-0 scale-95",
+        enterTo: "transform opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "transform opacity-100 scale-100",
+        leaveTo: "transform opacity-0 scale-95"
+      },
+      /* @__PURE__ */ React__default.createElement(ComboboxOptions, { className: "origin-top-right absolute right-0 mt-1 w-full max-h-[300px] overflow-y-auto rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" }, filteredItems.map((item) => /* @__PURE__ */ React__default.createElement(ComboboxOption, { key: item.key, value: item }, ({ focus }) => /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          className: classNames$1(
+            focus ? "bg-gray-100 text-gray-900" : "text-gray-700",
+            "block px-4 py-2 text-xs w-full text-right"
+          )
+        },
+        item.render(item)
+      ))))
+    )
   );
 };
-const borderAll = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    height: "48",
-    width: "48",
-    focusable: "false",
-    role: "img",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement("path", { d: "M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm10 13h5a1 1 0 0 0 1-1v-5h-6v6zm-2-6H5v5a1 1 0 0 0 1 1h5v-6zm2-2h6V6a1 1 0 0 0-1-1h-5v6zm-2-6H6a1 1 0 0 0-1 1v5h6V5z" })
-);
-const borderBottom = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    height: "48",
-    width: "48",
-    focusable: "false",
-    role: "img",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement("path", { d: "M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm-2 7a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm17-8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3z" })
-);
-const borderLeft = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    height: "48",
-    width: "48",
-    focusable: "false",
-    role: "img",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement("path", { d: "M6 21a1 1 0 1 0 0-2 1 1 0 0 1-1-1V6a1 1 0 0 1 1-1 1 1 0 0 0 0-2 3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm7-16a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm6 6a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm4-17a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zm-1 17a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" })
-);
-const borderNone = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    height: "48",
-    width: "48",
-    focusable: "false",
-    role: "img",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement("path", { d: "M14 4a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-9 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-6 10a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3z" })
-);
-const borderRight = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    height: "48",
-    width: "48",
-    focusable: "false",
-    role: "img",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement("path", { d: "M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm9 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM6 3a1 1 0 0 1 0 2 1 1 0 0 0-1 1 1 1 0 0 1-2 0 3 3 0 0 1 3-3zm1 17a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1V6a1 1 0 0 0-1-1 1 1 0 1 1 0-2 3 3 0 0 1 3 3v12a3 3 0 0 1-3 3z" })
-);
-const borderTop = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    height: "48",
-    width: "48",
-    focusable: "false",
-    role: "img",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement("path", { d: "M3 6a1 1 0 0 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3zm2 5a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-8 1a1 1 0 1 0 0-2 1 1 0 0 1-1-1 1 1 0 1 0-2 0 3 3 0 0 0 3 3zm11-1a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" })
-);
-const iconVariants = cva("", {
-  variants: {
-    variant: {
-      toolbar: "size-5",
-      menuItem: "mr-2 size-5"
-    },
-    size: {
-      sm: "mr-2 size-4",
-      md: "mr-2 size-6"
-    }
-  },
-  defaultVariants: {}
+loader.config({
+  paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs" }
 });
-const DoubleColumnOutlined = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    fill: "none",
-    height: "16",
-    viewBox: "0 0 16 16",
-    width: "16",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement(
-    "path",
-    {
-      clipRule: "evenodd",
-      d: "M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z",
-      fill: "#595E6F",
-      fillRule: "evenodd"
-    }
-  )
-);
-const ThreeColumnOutlined = (props) => /* @__PURE__ */ React__default.createElement(
-  "svg",
-  {
-    fill: "none",
-    height: "16",
-    viewBox: "0 0 16 16",
-    width: "16",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React__default.createElement(
-    "path",
-    {
-      clipRule: "evenodd",
-      d: "M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z",
-      fill: "#4C5161",
-      fillRule: "evenodd"
+let retryCount = 0;
+const retryFocus = (ref) => {
+  if (ref.current) {
+    ref.current.focus();
+  } else {
+    if (retryCount < 30) {
+      setTimeout(() => {
+        retryCount = retryCount + 1;
+        retryFocus(ref);
+      }, 100);
     }
-  )
-);
+  }
+};
+const MINIMUM_HEIGHT = 75;
+const CodeBlock = ({
+  attributes,
+  editor,
+  element,
+  language: restrictLanguage,
+  onChangeCallback,
+  defaultValue,
+  ...props
+}) => {
+  const [navigateAway, setNavigateAway] = React__default.useState(null);
+  const monaco = useMonaco();
+  const monacoEditorRef = React__default.useRef(null);
+  const selected = useSelected();
+  const [height, setHeight] = React__default.useState(MINIMUM_HEIGHT);
+  React__default.useEffect(() => {
+    if (selected && isCollapsed(editor.selection)) {
+      retryFocus(monacoEditorRef);
+    }
+  }, [selected, monacoEditorRef.current]);
+  const value = element.value || "";
+  if (typeof value !== "string") {
+    throw new Error("Element must be of type string for code block");
+  }
+  const language = restrictLanguage || element.lang;
+  const id = React__default.useMemo(() => uuid(), []);
+  const languages = React__default.useMemo(() => {
+    const defaultLangSet = { "": "plain text" };
+    if (!monaco)
+      return defaultLangSet;
+    return monaco.languages.getLanguages().reduce((ac, cv) => {
+      if (cv.id === "plaintext")
+        return ac;
+      return { ...ac, [cv.id]: cv.id };
+    }, defaultLangSet);
+  }, [monaco]);
+  React__default.useEffect(() => {
+    if (monaco) {
+      monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        // disable errors
+        noSemanticValidation: true,
+        noSyntaxValidation: true
+      });
+    }
+  }, [monaco]);
+  const items2 = Object.entries(languages).map(([key, label]) => ({
+    key,
+    label,
+    render: (item) => item.label
+  }));
+  const currentItem = React__default.useMemo(() => {
+    return items2.find((item) => item.key === language) ?? {
+      key: "",
+      label: "Plain Text"
+    };
+  }, [items2, language]);
+  React__default.useEffect(() => {
+    if (navigateAway) {
+      setNavigateAway(null);
+      switch (navigateAway) {
+        case "remove":
+          {
+            focusEditor(editor);
+            setNodes(
+              editor,
+              {
+                type: "p",
+                children: [{ text: "" }],
+                lang: void 0,
+                value: void 0
+              },
+              {
+                match: (n) => {
+                  if (isElement(n) && n.type === element.type) {
+                    return true;
+                  }
+                }
+              }
+            );
+          }
+          break;
+        case "insertNext":
+          {
+            insertNodes(
+              editor,
+              [
+                {
+                  type: ELEMENT_DEFAULT,
+                  children: [{ text: "" }],
+                  lang: void 0,
+                  value: void 0
+                }
+              ],
+              { select: true }
+            );
+            focusEditor(editor);
+          }
+          break;
+        case "up":
+          {
+            const path = findNodePath(editor, element);
+            if (!path) {
+              return;
+            }
+            const previousNodePath = getPointBefore(editor, path);
+            if (!previousNodePath) {
+              focusEditor(editor);
+              insertNodes(
+                editor,
+                [
+                  {
+                    type: ELEMENT_DEFAULT,
+                    children: [{ text: "" }],
+                    lang: void 0,
+                    value: void 0
+                  }
+                ],
+                // Insert a new node at the current path, resulting in the code_block
+                // moving down one block
+                { at: path, select: true }
+              );
+              return;
+            }
+            focusEditor(editor, previousNodePath);
+          }
+          break;
+        case "down": {
+          const path = findNodePath(editor, element);
+          if (!path) {
+            return;
+          }
+          const nextNodePath = getPointAfter(editor, path);
+          if (!nextNodePath) {
+            insertNodes(
+              editor,
+              [
+                {
+                  type: ELEMENT_DEFAULT,
+                  children: [{ text: "" }],
+                  lang: void 0,
+                  value: void 0
+                }
+              ],
+              { select: true }
+            );
+            focusEditor(editor);
+          } else {
+            focusEditor(editor, nextNodePath);
+          }
+          break;
+        }
+      }
+    }
+  }, [navigateAway]);
+  function handleEditorDidMount(monacoEditor, monaco2) {
+    monacoEditorRef.current = monacoEditor;
+    monacoEditor.onDidContentSizeChange(() => {
+      setHeight(
+        monacoEditor.getContentHeight() > MINIMUM_HEIGHT ? monacoEditor.getContentHeight() : MINIMUM_HEIGHT
+      );
+      monacoEditor.layout();
+    });
+    setNodes(editor, { value: defaultValue, lang: language });
+    monacoEditor.addCommand(monaco2.KeyMod.Shift | monaco2.KeyCode.Enter, () => {
+      if (monacoEditor.hasTextFocus()) {
+        setNavigateAway("insertNext");
+      }
+    });
+    monacoEditor.onKeyDown((l) => {
+      if (l.code === "ArrowUp") {
+        const selection = monacoEditor.getSelection();
+        if (selection.endLineNumber === 1 && selection.startLineNumber === 1) {
+          setNavigateAway("up");
+        }
+      }
+      if (l.code === "ArrowDown") {
+        const selection = monacoEditor.getSelection();
+        const totalLines = monacoEditor.getModel().getLineCount();
+        if (selection.endLineNumber === totalLines && selection.startLineNumber === totalLines) {
+          setNavigateAway("down");
+        }
+      }
+      if (l.code === "Backspace") {
+        const selection = monacoEditor.getSelection();
+        if (selection.endColumn === 1 && selection.endLineNumber === 1 && selection.positionColumn === 1 && selection.positionLineNumber === 1 && selection.selectionStartColumn === 1 && selection.selectionStartLineNumber === 1 && selection.startColumn === 1 && selection.startLineNumber === 1) {
+          setNavigateAway("remove");
+        }
+      }
+    });
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ...attributes,
+      className: "relative mb-2 mt-0.5 rounded-lg shadow-md p-2 border-gray-200 border"
+    },
+    /* @__PURE__ */ React__default.createElement("style", null, `.monaco-editor .editor-widget {
+          display: none !important;
+          visibility: hidden !important;
+        }`),
+    props.children,
+    /* @__PURE__ */ React__default.createElement("div", { contentEditable: false }, !restrictLanguage && /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-between pb-2" }, /* @__PURE__ */ React__default.createElement("div", null), /* @__PURE__ */ React__default.createElement(
+      Autocomplete,
+      {
+        items: items2,
+        value: currentItem,
+        defaultQuery: "plaintext",
+        onChange: (item) => setNodes(editor, { lang: item.key })
+      }
+    )), /* @__PURE__ */ React__default.createElement("div", { style: { height: `${height}px` } }, /* @__PURE__ */ React__default.createElement(
+      MonacoEditor,
+      {
+        path: id,
+        onMount: handleEditorDidMount,
+        options: {
+          scrollBeyondLastLine: false,
+          // automaticLayout: true,
+          tabSize: 2,
+          disableLayerHinting: true,
+          accessibilitySupport: "off",
+          codeLens: false,
+          wordWrap: "on",
+          minimap: {
+            enabled: false
+          },
+          fontSize: 14,
+          lineHeight: 2,
+          formatOnPaste: true,
+          lineNumbers: "off",
+          formatOnType: true,
+          fixedOverflowWidgets: true,
+          // Takes too much horizontal space for iframe
+          folding: false,
+          renderLineHighlight: "none",
+          scrollbar: {
+            verticalScrollbarSize: 1,
+            horizontalScrollbarSize: 1,
+            // https://github.com/microsoft/monaco-editor/issues/2007#issuecomment-644425664
+            alwaysConsumeMouseWheel: false
+          }
+        },
+        language: String(language),
+        value: String(element.value),
+        onChange: (value2) => {
+          onChangeCallback == null ? void 0 : onChangeCallback(value2);
+          setNodes(editor, { value: value2, lang: language });
+        }
+      }
+    )))
+  );
+};
+const CodeBlockElement = withRef(
+  ({ className, ...props }, ref) => {
+    const { element } = props;
+    const state = useCodeBlockElementState({ element });
+    return /* @__PURE__ */ React__default.createElement(
+      PlateElement,
+      {
+        className: cn$1("relative py-1", state.className, className),
+        ref,
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement(CodeBlock, { ...props })
+    );
+  }
+);
+const CodeLeaf = withRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(
+      PlateLeaf,
+      {
+        asChild: true,
+        className: cn$1(
+          "whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm",
+          className
+        ),
+        ref,
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement("code", null, children)
+    );
+  }
+);
+const CodeLineElement = withRef((props, ref) => /* @__PURE__ */ React__default.createElement(PlateElement, { ref, ...props }));
+const CodeSyntaxLeaf = withRef(
+  ({ children, ...props }, ref) => {
+    const { leaf } = props;
+    const { tokenProps } = useCodeSyntaxLeaf({ leaf });
+    return /* @__PURE__ */ React__default.createElement(PlateLeaf, { ref, ...props }, /* @__PURE__ */ React__default.createElement("span", { ...tokenProps }, children));
+  }
+);
+const listVariants = cva("m-0 ps-6", {
+  variants: {
+    variant: {
+      ol: "list-decimal",
+      ul: "list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]"
+    }
+  }
+});
+const ListElementVariants = withVariants(PlateElement, listVariants, [
+  "variant"
+]);
+const ListElement = withRef(
+  ({ children, variant = "ul", ...props }, ref) => {
+    const Component2 = variant;
+    return /* @__PURE__ */ React__default.createElement(ListElementVariants, { asChild: true, ref, variant, ...props }, /* @__PURE__ */ React__default.createElement(Component2, null, children));
+  }
+);
+const ELEMENT_MERMAID = "mermaid";
+const createMermaidPlugin = createPluginFactory({
+  isElement: true,
+  isVoid: true,
+  isInline: false,
+  key: ELEMENT_MERMAID
+});
+const MermaidElementWithRef = ({ config }) => {
+  const mermaidRef = useRef(null);
+  useEffect(() => {
+    if (mermaidRef.current) {
+      mermaid.initialize({ startOnLoad: true });
+      mermaid.run();
+    }
+  }, [config]);
+  return /* @__PURE__ */ React__default.createElement("div", { contentEditable: false, className: "border-border border-b" }, /* @__PURE__ */ React__default.createElement("div", { ref: mermaidRef }, /* @__PURE__ */ React__default.createElement("pre", { className: "mermaid not-tina-prose" }, config)));
+};
+const Bubble = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "bg-blue-600 rounded-full p-2 transition-transform duration-200 ease-in-out hover:scale-110" }, children);
+};
+const ErrorMsg = ({ error }) => {
+  if (error) {
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        contentEditable: false,
+        className: "font-mono bg-red-600 text-white p-2 rounded-md cursor-default"
+      },
+      error
+    );
+  }
+  return null;
+};
+const DEFAULT_MERMAID_CONFIG = `%% This won't render without implementing a rendering engine (e.g. mermaid on npm)
+flowchart TD
+    id1(this is an example flow diagram) 
+    --> id2(modify me to see changes!)
+    id2 
+    --> id3(Click the top button to preview the changes)
+    --> id4(Learn about mermaid diagrams @ mermaid.js.org)`;
+const MermaidElement = withRef(
+  ({ children, nodeProps, element, ...props }, ref) => {
+    const [mermaidConfig, setMermaidConfig] = useState(
+      element.value || DEFAULT_MERMAID_CONFIG
+    );
+    const [isEditing, setIsEditing] = useState(
+      mermaidConfig === DEFAULT_MERMAID_CONFIG || false
+    );
+    const [mermaidError, setMermaidError] = useState(null);
+    const node = {
+      type: ELEMENT_MERMAID,
+      value: mermaidConfig,
+      children: [{ type: "text", text: "" }]
+    };
+    useEffect(() => {
+      if (mermaid.parse(mermaidConfig, { suppressErrors: false })) {
+        setMermaidError(null);
+      }
+    }, [mermaidConfig]);
+    mermaid.parseError = (err) => {
+      setMermaidError(
+        String(err.message) || "An error occurred while parsing the diagram."
+      );
+    };
+    return /* @__PURE__ */ React__default.createElement(PlateElement, { element, ref, ...props }, /* @__PURE__ */ React__default.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__default.createElement("div", { className: "absolute top-2 right-2 z-10 space-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out" }, /* @__PURE__ */ React__default.createElement(Bubble, null, isEditing ? /* @__PURE__ */ React__default.createElement(
+      Eye,
+      {
+        className: "w-5 h-5 fill-white cursor-pointer",
+        onClick: () => {
+          setIsEditing(!isEditing);
+        }
+      }
+    ) : /* @__PURE__ */ React__default.createElement(
+      SquarePen,
+      {
+        className: "w-5 h-5 fill-white cursor-pointer",
+        onClick: () => {
+          setIsEditing(!isEditing);
+        }
+      }
+    ))), isEditing ? /* @__PURE__ */ React__default.createElement(
+      CodeBlock,
+      {
+        children: "",
+        language: "yaml",
+        ...props,
+        element: node,
+        defaultValue: mermaidConfig,
+        onChangeCallback: (value) => setMermaidConfig(value)
+      }
+    ) : /* @__PURE__ */ React__default.createElement(MermaidElementWithRef, { config: mermaidConfig })), children, /* @__PURE__ */ React__default.createElement(ErrorMsg, { error: mermaidError }));
+  }
+);
+const RawMarkdown = () => {
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: 0,
+      role: "img",
+      className: "h-5 w-5",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement("title", null),
+    /* @__PURE__ */ React__default.createElement("path", { d: "M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z" })
+  );
+};
+const MermaidIcon = () => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 491 491",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    strokeLinejoin: "round",
+    strokeMiterlimit: 2
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" }),
+  /* @__PURE__ */ React__default.createElement(
+    "path",
+    {
+      d: "M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z",
+      fill: "white",
+      fillRule: "nonzero"
+    }
+  )
+);
+const borderAll = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    height: "48",
+    width: "48",
+    focusable: "false",
+    role: "img",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6zm10 13h5a1 1 0 0 0 1-1v-5h-6v6zm-2-6H5v5a1 1 0 0 0 1 1h5v-6zm2-2h6V6a1 1 0 0 0-1-1h-5v6zm-2-6H6a1 1 0 0 0-1 1v5h6V5z" })
+);
+const borderBottom = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    height: "48",
+    width: "48",
+    focusable: "false",
+    role: "img",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm-2 7a1 1 0 1 1 2 0 1 1 0 0 0 1 1h12a1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm17-8a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3z" })
+);
+const borderLeft = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    height: "48",
+    width: "48",
+    focusable: "false",
+    role: "img",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M6 21a1 1 0 1 0 0-2 1 1 0 0 1-1-1V6a1 1 0 0 1 1-1 1 1 0 0 0 0-2 3 3 0 0 0-3 3v12a3 3 0 0 0 3 3zm7-16a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm6 6a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm4-17a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zm-1 17a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" })
+);
+const borderNone = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    height: "48",
+    width: "48",
+    focusable: "false",
+    role: "img",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M14 4a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-9 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-6 10a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zM7 4a1 1 0 0 0-1-1 3 3 0 0 0-3 3 1 1 0 0 0 2 0 1 1 0 0 1 1-1 1 1 0 0 0 1-1zm11-1a1 1 0 1 0 0 2 1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3zM7 20a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 1 1 2 0 3 3 0 0 1-3 3z" })
+);
+const borderRight = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    height: "48",
+    width: "48",
+    focusable: "false",
+    role: "img",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M13 5a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2h2zm-8 6a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm9 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM6 3a1 1 0 0 1 0 2 1 1 0 0 0-1 1 1 1 0 0 1-2 0 3 3 0 0 1 3-3zm1 17a1 1 0 0 1-1 1 3 3 0 0 1-3-3 1 1 0 1 1 2 0 1 1 0 0 0 1 1 1 1 0 0 1 1 1zm11 1a1 1 0 1 1 0-2 1 1 0 0 0 1-1V6a1 1 0 0 0-1-1 1 1 0 1 1 0-2 3 3 0 0 1 3 3v12a3 3 0 0 1-3 3z" })
+);
+const borderTop = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    height: "48",
+    width: "48",
+    focusable: "false",
+    role: "img",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M3 6a1 1 0 0 0 2 0 1 1 0 0 1 1-1h12a1 1 0 0 1 1 1 1 1 0 1 0 2 0 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3zm2 5a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0v-2zm14 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0v-2zm-5 9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zm-8 1a1 1 0 1 0 0-2 1 1 0 0 1-1-1 1 1 0 1 0-2 0 3 3 0 0 0 3 3zm11-1a1 1 0 0 0 1 1 3 3 0 0 0 3-3 1 1 0 1 0-2 0 1 1 0 0 1-1 1 1 1 0 0 0-1 1z" })
+);
+const iconVariants = cva("", {
+  variants: {
+    variant: {
+      toolbar: "size-5",
+      menuItem: "mr-2 size-5"
+    },
+    size: {
+      sm: "mr-2 size-4",
+      md: "mr-2 size-6"
+    }
+  },
+  defaultVariants: {}
+});
+const DoubleColumnOutlined = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z",
+      fill: "#595E6F",
+      fillRule: "evenodd"
+    }
+  )
+);
+const ThreeColumnOutlined = (props) => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React__default.createElement(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z",
+      fill: "#4C5161",
+      fillRule: "evenodd"
+    }
+  )
+);
 const RightSideDoubleColumnOutlined = (props) => /* @__PURE__ */ React__default.createElement(
   "svg",
   {
@@ -1175,6 +1710,7 @@ const Icons = {
   clear: X,
   close: X,
   // code: Code2,
+  paint: PaintBucket,
   codeblock: FileCode,
   color: Baseline,
   column: RectangleVertical,
@@ -1200,6 +1736,7 @@ const Icons = {
   lineHeight: WrapText,
   // link: Link2,
   minus: Minus,
+  mermaid: MermaidIcon,
   more: MoreHorizontal,
   // ol: ListOrdered,
   outdent: Outdent,
@@ -1232,186 +1769,29 @@ const Icons = {
   code: CodeIcon,
   codeBlock: CodeBlockIcon,
   bold: BoldIcon,
-  italic: ItalicIcon,
-  raw: RawMarkdown,
-  // www
-  gitHub: (props) => /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 438.549 438.549", ...props }, /* @__PURE__ */ React__default.createElement(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-    }
-  )),
-  logo: (props) => /* @__PURE__ */ React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React__default.createElement(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
-    }
-  )),
-  moon: Moon,
-  sun: SunMedium,
-  twitter: Twitter
-};
-function UnorderedListIcon(props) {
-  const title = props.title || "format list bulleted";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      className: "h-5 w-5",
-      height: "24",
-      width: "24",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement("path", { d: "M7 5h14v2H7V5z", fill: "currentColor" }), /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M4 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
-        fill: "currentColor"
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M7 11h14v2H7v-2zm0 6h14v2H7v-2zm-3 2.5c.82 0 1.5-.68 1.5-1.5s-.67-1.5-1.5-1.5-1.5.68-1.5 1.5.68 1.5 1.5 1.5z",
-        fill: "currentColor"
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M4 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
-        fill: "currentColor"
-      }
-    ))
-  );
-}
-function HeadingIcon(props) {
-  const title = props.title || "format size";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      height: "24",
-      width: "24",
-      className: "h-5 w-5",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z",
-        fill: "currentColor"
-      }
-    ))
-  );
-}
-function OrderedListIcon(props) {
-  const title = props.title || "format list numbered";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      className: "h-5 w-5",
-      height: "24",
-      width: "24",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z",
-        fill: "currentColor"
-      }
-    ))
-  );
-}
-function QuoteIcon(props) {
-  const title = props.title || "format quote";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      height: "24",
-      className: "h-5 w-5",
-      width: "24",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z",
-        fill: "currentColor"
-      }
-    ))
-  );
-}
-function LinkIcon(props) {
-  const title = props.title || "insert link";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      height: "24",
-      className: "h-5 w-5",
-      width: "24",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z",
-        fill: "currentColor"
-      }
-    ))
-  );
-}
-function CodeIcon(props) {
-  const title = props.title || "code";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
+  italic: ItalicIcon,
+  raw: RawMarkdown,
+  // www
+  gitHub: (props) => /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 438.549 438.549", ...props }, /* @__PURE__ */ React__default.createElement(
+    "path",
     {
-      className: "h-5 w-5",
-      height: "24",
-      width: "24",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z",
-        fill: "currentColor"
-      }
-    ))
-  );
-}
-function CodeBlockIcon(props) {
-  const title = props.title || "code-block";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
+      fill: "currentColor",
+      d: "M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+    }
+  )),
+  logo: (props) => /* @__PURE__ */ React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React__default.createElement(
+    "path",
     {
-      className: "h-5 w-5",
-      stroke: "currentColor",
       fill: "currentColor",
-      strokeWidth: 0,
-      viewBox: "0 0 16 16",
-      height: "1em",
-      width: "1em",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" }),
-    /* @__PURE__ */ React__default.createElement("path", { d: "M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z" })
-  );
-}
-function ImageIcon(props) {
-  const title = props.title || "image";
+      d: "M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
+    }
+  )),
+  moon: Moon,
+  sun: SunMedium,
+  twitter: Twitter
+};
+function UnorderedListIcon(props) {
+  const title = props.title || "format list bulleted";
   return /* @__PURE__ */ React__default.createElement(
     "svg",
     {
@@ -1422,765 +1802,622 @@ function ImageIcon(props) {
       xmlns: "http://www.w3.org/2000/svg"
     },
     /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement("path", { d: "M7 5h14v2H7V5z", fill: "currentColor" }), /* @__PURE__ */ React__default.createElement(
       "path",
       {
-        d: "M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z",
+        d: "M4 7.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
         fill: "currentColor"
       }
-    ))
-  );
-}
-function BoldIcon(props) {
-  const title = props.title || "format bold";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      className: "h-5 w-5",
-      height: "24",
-      width: "24",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       "path",
       {
-        d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z",
+        d: "M7 11h14v2H7v-2zm0 6h14v2H7v-2zm-3 2.5c.82 0 1.5-.68 1.5-1.5s-.67-1.5-1.5-1.5-1.5.68-1.5 1.5.68 1.5 1.5 1.5z",
         fill: "currentColor"
       }
-    ))
-  );
-}
-function ItalicIcon(props) {
-  const title = props.title || "format italic";
-  return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      className: "h-5 w-5",
-      height: "24",
-      width: "24",
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg"
-    },
-    /* @__PURE__ */ React__default.createElement("title", null, title),
-    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       "path",
       {
-        d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z",
+        d: "M4 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
         fill: "currentColor"
       }
     ))
   );
 }
-function PlusIcon({ className = "" }) {
+function HeadingIcon(props) {
+  const title = props.title || "format size";
   return /* @__PURE__ */ React__default.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      className: `h-4 w-4 ${className}`,
-      viewBox: "0 0 20 20",
-      fill: "currentColor"
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "path",
-      {
-        fillRule: "evenodd",
-        d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z",
-        clipRule: "evenodd"
-      }
-    )
-  );
-}
-const InlineComboboxContext = createContext(
-  null
-);
-const defaultFilter = ({ keywords = [], value }, search) => [value, ...keywords].some((keyword) => filterWords(keyword, search));
-const InlineCombobox = ({
-  children,
-  element,
-  filter = defaultFilter,
-  hideWhenNoValue = false,
-  setValue: setValueProp,
-  showTrigger = true,
-  trigger,
-  value: valueProp
-}) => {
-  const editor = useEditorRef();
-  const inputRef = React__default.useRef(null);
-  const cursorState = useHTMLInputCursorState(inputRef);
-  const [valueState, setValueState] = useState("");
-  const hasValueProp = valueProp !== void 0;
-  const value = hasValueProp ? valueProp : valueState;
-  const setValue = useCallback(
-    (newValue) => {
-      setValueProp == null ? void 0 : setValueProp(newValue);
-      if (!hasValueProp) {
-        setValueState(newValue);
-      }
-    },
-    [setValueProp, hasValueProp]
-  );
-  const [insertPoint, setInsertPoint] = useState(null);
-  useEffect(() => {
-    const path = findNodePath(editor, element);
-    if (!path)
-      return;
-    const point = getPointBefore(editor, path);
-    if (!point)
-      return;
-    const pointRef = createPointRef(editor, point);
-    setInsertPoint(pointRef);
-    return () => {
-      pointRef.unref();
-    };
-  }, [editor, element]);
-  const { props: inputProps, removeInput } = useComboboxInput({
-    cancelInputOnBlur: false,
-    cursorState,
-    onCancelInput: (cause) => {
-      if (cause !== "backspace") {
-        insertText(editor, trigger + value, {
-          at: (insertPoint == null ? void 0 : insertPoint.current) ?? void 0
-        });
-      }
-      if (cause === "arrowLeft" || cause === "arrowRight") {
-        moveSelection(editor, {
-          distance: 1,
-          reverse: cause === "arrowLeft"
-        });
-      }
-    },
-    ref: inputRef
-  });
-  const [hasEmpty, setHasEmpty] = useState(false);
-  const contextValue = useMemo(
-    () => ({
-      filter,
-      inputProps,
-      inputRef,
-      removeInput,
-      setHasEmpty,
-      showTrigger,
-      trigger
-    }),
-    [
-      trigger,
-      showTrigger,
-      filter,
-      inputRef,
-      inputProps,
-      removeInput,
-      setHasEmpty
-    ]
-  );
-  const store = useComboboxStore({
-    setValue: (newValue) => startTransition(() => setValue(newValue))
-  });
-  const items2 = store.useState("items");
-  useEffect(() => {
-    if (!store.getState().activeId) {
-      store.setActiveId(store.first());
-    }
-  }, [items2, store]);
-  return /* @__PURE__ */ React__default.createElement("span", { contentEditable: false }, /* @__PURE__ */ React__default.createElement(
-    ComboboxProvider,
-    {
-      open: (items2.length > 0 || hasEmpty) && (!hideWhenNoValue || value.length > 0),
-      store
-    },
-    /* @__PURE__ */ React__default.createElement(InlineComboboxContext.Provider, { value: contextValue }, children)
-  ));
-};
-const InlineComboboxInput = forwardRef(({ className, ...props }, propRef) => {
-  const {
-    inputProps,
-    inputRef: contextRef,
-    showTrigger,
-    trigger
-  } = useContext(InlineComboboxContext);
-  const store = useComboboxContext();
-  const value = store.useState("value");
-  const ref = useComposedRef(propRef, contextRef);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, showTrigger && trigger, /* @__PURE__ */ React__default.createElement("span", { className: "relative min-h-[1lh]" }, /* @__PURE__ */ React__default.createElement(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: "invisible overflow-hidden text-nowrap"
-    },
-    value || "​"
-  ), /* @__PURE__ */ React__default.createElement(
-    Combobox,
-    {
-      autoSelect: true,
-      className: cn$1(
-        "absolute left-0 top-0 size-full bg-transparent outline-none",
-        className
-      ),
-      ref,
-      value,
-      ...inputProps,
-      ...props
-    }
-  )));
-});
-InlineComboboxInput.displayName = "InlineComboboxInput";
-const InlineComboboxContent = ({
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ React__default.createElement(Portal, null, /* @__PURE__ */ React__default.createElement(
-    ComboboxPopover,
+    "svg",
     {
-      className: cn$1(
-        "z-[9999999] max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-white shadow-md",
-        className
-      ),
-      ...props
-    }
-  ));
-};
-const comboboxItemVariants = cva(
-  "relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-  {
-    defaultVariants: {
-      interactive: true
+      height: "24",
+      width: "24",
+      className: "h-5 w-5",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
     },
-    variants: {
-      interactive: {
-        false: "",
-        true: "cursor-pointer transition-colors hover:bg-blue-500 hover:text-black data-[active-item=true]:bg-orange-400 data-[active-item=true]:text-black"
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
+      {
+        d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z",
+        fill: "currentColor"
       }
-    }
-  }
-);
-const InlineComboboxItem = ({
-  className,
-  keywords,
-  onClick,
-  ...props
-}) => {
-  const { value } = props;
-  const { filter, removeInput } = useContext(InlineComboboxContext);
-  const store = useComboboxContext();
-  const search = filter && store.useState("value");
-  const visible = useMemo(
-    () => !filter || filter({ keywords, value }, search),
-    [filter, value, keywords, search]
+    ))
   );
-  if (!visible)
-    return null;
+}
+function OrderedListIcon(props) {
+  const title = props.title || "format list numbered";
   return /* @__PURE__ */ React__default.createElement(
-    ComboboxItem,
+    "svg",
     {
-      className: cn$1(comboboxItemVariants(), className),
-      onClick: (event) => {
-        removeInput(true);
-        onClick == null ? void 0 : onClick(event);
-      },
-      ...props
-    }
+      className: "h-5 w-5",
+      height: "24",
+      width: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
+      {
+        d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z",
+        fill: "currentColor"
+      }
+    ))
   );
-};
-const InlineComboboxEmpty = ({
-  children,
-  className
-}) => {
-  const { setHasEmpty } = useContext(InlineComboboxContext);
-  const store = useComboboxContext();
-  const items2 = store.useState("items");
-  useEffect(() => {
-    setHasEmpty(true);
-    return () => {
-      setHasEmpty(false);
-    };
-  }, [setHasEmpty]);
-  if (items2.length > 0)
-    return null;
+}
+function QuoteIcon(props) {
+  const title = props.title || "format quote";
   return /* @__PURE__ */ React__default.createElement(
-    "div",
+    "svg",
     {
-      className: cn$1(comboboxItemVariants({ interactive: false }), className)
+      height: "24",
+      className: "h-5 w-5",
+      width: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
     },
-    children
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
+      {
+        d: "M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z",
+        fill: "currentColor"
+      }
+    ))
   );
-};
-const rules = [
-  {
-    icon: Icons.h1,
-    onSelect: (editor) => {
-      toggleNodeType(editor, { activeType: ELEMENT_H1 });
-    },
-    value: "Heading 1"
-  },
-  {
-    icon: Icons.h2,
-    onSelect: (editor) => {
-      toggleNodeType(editor, { activeType: ELEMENT_H2 });
-    },
-    value: "Heading 2"
-  },
-  {
-    icon: Icons.h3,
-    onSelect: (editor) => {
-      toggleNodeType(editor, { activeType: ELEMENT_H3 });
-    },
-    value: "Heading 3"
-  },
-  {
-    icon: Icons.ul,
-    keywords: ["ul", "unordered list"],
-    onSelect: (editor) => {
-      toggleList(editor, { type: ELEMENT_UL });
-    },
-    value: "Bulleted list"
-  },
-  {
-    icon: Icons.ol,
-    keywords: ["ol", "ordered list"],
-    onSelect: (editor) => {
-      toggleList(editor, { type: ELEMENT_OL });
+}
+function LinkIcon(props) {
+  const title = props.title || "insert link";
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      height: "24",
+      className: "h-5 w-5",
+      width: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
     },
-    value: "Numbered list"
-  }
-];
-const SlashInputElement = withRef(
-  ({ className, ...props }, ref) => {
-    const { children, editor, element } = props;
-    return /* @__PURE__ */ React__default.createElement(
-      PlateElement,
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
       {
-        as: "span",
-        "data-slate-value": element.value,
-        ref,
-        ...props
-      },
-      /* @__PURE__ */ React__default.createElement(InlineCombobox, { element, trigger: "/" }, /* @__PURE__ */ React__default.createElement(InlineComboboxInput, null), /* @__PURE__ */ React__default.createElement(InlineComboboxContent, null, /* @__PURE__ */ React__default.createElement(InlineComboboxEmpty, null, "No matching commands found"), rules.map(({ icon: Icon, keywords, onSelect, value }) => /* @__PURE__ */ React__default.createElement(
-        InlineComboboxItem,
-        {
-          key: value,
-          keywords,
-          onClick: () => onSelect(editor),
-          value
-        },
-        /* @__PURE__ */ React__default.createElement(Icon, { "aria-hidden": true, className: "mr-2 size-4" }),
-        value
-      )))),
-      children
-    );
-  }
-);
-const listVariants = cva("m-0 ps-6", {
-  variants: {
-    variant: {
-      ol: "list-decimal",
-      ul: "list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]"
-    }
-  }
-});
-const ListElementVariants = withVariants(PlateElement, listVariants, [
-  "variant"
-]);
-const ListElement = withRef(
-  ({ children, variant = "ul", ...props }, ref) => {
-    const Component2 = variant;
-    return /* @__PURE__ */ React__default.createElement(ListElementVariants, { asChild: true, ref, variant, ...props }, /* @__PURE__ */ React__default.createElement(Component2, null, children));
-  }
-);
-const BlockquoteElement = withRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ React__default.createElement(
-      PlateElement,
+        d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z",
+        fill: "currentColor"
+      }
+    ))
+  );
+}
+function CodeIcon(props) {
+  const title = props.title || "code";
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      className: "h-5 w-5",
+      height: "24",
+      width: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
       {
-        asChild: true,
-        className: cn$1("my-1 border-l-2 pl-6 italic", className),
-        ref,
-        ...props
-      },
-      /* @__PURE__ */ React__default.createElement("blockquote", null, children)
-    );
-  }
-);
-const CodeLeaf = withRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ React__default.createElement(
-      PlateLeaf,
+        d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z",
+        fill: "currentColor"
+      }
+    ))
+  );
+}
+function CodeBlockIcon(props) {
+  const title = props.title || "code-block";
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      className: "h-5 w-5",
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: 0,
+      viewBox: "0 0 16 16",
+      height: "1em",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" }),
+    /* @__PURE__ */ React__default.createElement("path", { d: "M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z" })
+  );
+}
+function ImageIcon(props) {
+  const title = props.title || "image";
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      className: "h-5 w-5",
+      height: "24",
+      width: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
       {
-        asChild: true,
-        className: cn$1(
-          "whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm",
-          className
-        ),
-        ref,
-        ...props
-      },
-      /* @__PURE__ */ React__default.createElement("code", null, children)
-    );
-  }
-);
-const CodeLineElement = withRef((props, ref) => /* @__PURE__ */ React__default.createElement(PlateElement, { ref, ...props }));
-const CodeSyntaxLeaf = withRef(
-  ({ children, ...props }, ref) => {
-    const { leaf } = props;
-    const { tokenProps } = useCodeSyntaxLeaf({ leaf });
-    return /* @__PURE__ */ React__default.createElement(PlateLeaf, { ref, ...props }, /* @__PURE__ */ React__default.createElement("span", { ...tokenProps }, children));
-  }
-);
-function ChevronDownIcon(props, svgRef) {
-  return /* @__PURE__ */ React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    ref: svgRef
-  }, props), /* @__PURE__ */ React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
-    clipRule: "evenodd"
-  }));
+        d: "M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z",
+        fill: "currentColor"
+      }
+    ))
+  );
 }
-const ForwardRef = React.forwardRef(ChevronDownIcon);
-const ChevronDownIcon$1 = ForwardRef;
-const Autocomplete = ({
-  value,
-  onChange,
-  defaultQuery,
-  items: items2
-}) => {
-  const [query, setQuery] = React__default.useState(defaultQuery ?? "");
-  const filteredItems = React__default.useMemo(() => {
-    try {
-      const reFilter = new RegExp(query, "i");
-      const _items = items2.filter((item) => reFilter.test(item.label));
-      if (_items.length === 0)
-        return items2;
-      return _items;
-    } catch (err) {
-      return items2;
-    }
-  }, [items2, query]);
+function BoldIcon(props) {
+  const title = props.title || "format bold";
   return /* @__PURE__ */ React__default.createElement(
-    Combobox$1,
+    "svg",
     {
-      value,
-      onChange,
-      as: "div",
-      className: "relative inline-block text-left z-20"
+      className: "h-5 w-5",
+      height: "24",
+      width: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "mt-1" }, /* @__PURE__ */ React__default.createElement("div", { className: "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md sm:text-sm" }, /* @__PURE__ */ React__default.createElement(
-      ComboboxInput,
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
       {
-        className: "w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300",
-        displayValue: (item) => (item == null ? void 0 : item.label) ?? "Plain Text",
-        onChange: (event) => setQuery(event.target.value),
-        onClick: (ev) => ev.stopPropagation()
+        d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z",
+        fill: "currentColor"
       }
-    ), /* @__PURE__ */ React__default.createElement(ComboboxButton, { className: "absolute inset-y-0 right-0 flex items-center pr-2" }, /* @__PURE__ */ React__default.createElement(
-      ChevronDownIcon$1,
+    ))
+  );
+}
+function ItalicIcon(props) {
+  const title = props.title || "format italic";
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      className: "h-5 w-5",
+      height: "24",
+      width: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement("title", null, title),
+    /* @__PURE__ */ React__default.createElement("g", { fill: "none" }, /* @__PURE__ */ React__default.createElement(
+      "path",
       {
-        className: "h-5 w-5 text-gray-400",
-        "aria-hidden": "true"
+        d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z",
+        fill: "currentColor"
       }
-    )))),
+    ))
+  );
+}
+function PlusIcon({ className = "" }) {
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: `h-4 w-4 ${className}`,
+      viewBox: "0 0 20 20",
+      fill: "currentColor"
+    },
     /* @__PURE__ */ React__default.createElement(
-      Transition,
+      "path",
       {
-        enter: "transition ease-out duration-100",
-        enterFrom: "transform opacity-0 scale-95",
-        enterTo: "transform opacity-100 scale-100",
-        leave: "transition ease-in duration-75",
-        leaveFrom: "transform opacity-100 scale-100",
-        leaveTo: "transform opacity-0 scale-95"
-      },
-      /* @__PURE__ */ React__default.createElement(ComboboxOptions, { className: "origin-top-right absolute right-0 mt-1 w-full max-h-[300px] overflow-y-auto rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" }, filteredItems.map((item) => /* @__PURE__ */ React__default.createElement(ComboboxOption, { key: item.key, value: item }, ({ focus }) => /* @__PURE__ */ React__default.createElement(
-        "button",
-        {
-          className: classNames$1(
-            focus ? "bg-gray-100 text-gray-900" : "text-gray-700",
-            "block px-4 py-2 text-xs w-full text-right"
-          )
-        },
-        item.render(item)
-      ))))
+        fillRule: "evenodd",
+        d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z",
+        clipRule: "evenodd"
+      }
     )
   );
-};
-loader.config({
-  paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs" }
-});
-let retryCount = 0;
-const retryFocus = (ref) => {
-  if (ref.current) {
-    ref.current.focus();
-  } else {
-    if (retryCount < 30) {
-      setTimeout(() => {
-        retryCount = retryCount + 1;
-        retryFocus(ref);
-      }, 100);
+}
+const InlineComboboxContext = createContext(
+  null
+);
+const defaultFilter = ({ keywords = [], value }, search) => [value, ...keywords].some((keyword) => filterWords(keyword, search));
+const InlineCombobox = ({
+  children,
+  element,
+  filter = defaultFilter,
+  hideWhenNoValue = false,
+  setValue: setValueProp,
+  showTrigger = true,
+  trigger,
+  value: valueProp
+}) => {
+  const editor = useEditorRef();
+  const inputRef = React__default.useRef(null);
+  const cursorState = useHTMLInputCursorState(inputRef);
+  const [valueState, setValueState] = useState("");
+  const hasValueProp = valueProp !== void 0;
+  const value = hasValueProp ? valueProp : valueState;
+  const setValue = useCallback(
+    (newValue) => {
+      setValueProp == null ? void 0 : setValueProp(newValue);
+      if (!hasValueProp) {
+        setValueState(newValue);
+      }
+    },
+    [setValueProp, hasValueProp]
+  );
+  const [insertPoint, setInsertPoint] = useState(null);
+  useEffect(() => {
+    const path = findNodePath(editor, element);
+    if (!path)
+      return;
+    const point = getPointBefore(editor, path);
+    if (!point)
+      return;
+    const pointRef = createPointRef(editor, point);
+    setInsertPoint(pointRef);
+    return () => {
+      pointRef.unref();
+    };
+  }, [editor, element]);
+  const { props: inputProps, removeInput } = useComboboxInput({
+    cancelInputOnBlur: false,
+    cursorState,
+    onCancelInput: (cause) => {
+      if (cause !== "backspace") {
+        insertText(editor, trigger + value, {
+          at: (insertPoint == null ? void 0 : insertPoint.current) ?? void 0
+        });
+      }
+      if (cause === "arrowLeft" || cause === "arrowRight") {
+        moveSelection(editor, {
+          distance: 1,
+          reverse: cause === "arrowLeft"
+        });
+      }
+    },
+    ref: inputRef
+  });
+  const [hasEmpty, setHasEmpty] = useState(false);
+  const contextValue = useMemo(
+    () => ({
+      filter,
+      inputProps,
+      inputRef,
+      removeInput,
+      setHasEmpty,
+      showTrigger,
+      trigger
+    }),
+    [
+      trigger,
+      showTrigger,
+      filter,
+      inputRef,
+      inputProps,
+      removeInput,
+      setHasEmpty
+    ]
+  );
+  const store = useComboboxStore({
+    setValue: (newValue) => startTransition(() => setValue(newValue))
+  });
+  const items2 = store.useState("items");
+  useEffect(() => {
+    if (!store.getState().activeId) {
+      store.setActiveId(store.first());
     }
-  }
+  }, [items2, store]);
+  return /* @__PURE__ */ React__default.createElement("span", { contentEditable: false }, /* @__PURE__ */ React__default.createElement(
+    ComboboxProvider,
+    {
+      open: (items2.length > 0 || hasEmpty) && (!hideWhenNoValue || value.length > 0),
+      store
+    },
+    /* @__PURE__ */ React__default.createElement(InlineComboboxContext.Provider, { value: contextValue }, children)
+  ));
 };
-const CodeBlock = ({
-  attributes,
-  editor,
-  element,
-  language: restrictLanguage,
+const InlineComboboxInput = forwardRef(({ className, ...props }, propRef) => {
+  const {
+    inputProps,
+    inputRef: contextRef,
+    showTrigger,
+    trigger
+  } = useContext(InlineComboboxContext);
+  const store = useComboboxContext();
+  const value = store.useState("value");
+  const ref = useComposedRef(propRef, contextRef);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, showTrigger && trigger, /* @__PURE__ */ React__default.createElement("span", { className: "relative min-h-[1lh]" }, /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "invisible overflow-hidden text-nowrap"
+    },
+    value || "​"
+  ), /* @__PURE__ */ React__default.createElement(
+    Combobox$1,
+    {
+      autoSelect: true,
+      className: cn$1(
+        "absolute left-0 top-0 size-full bg-transparent outline-none",
+        className
+      ),
+      ref,
+      value,
+      ...inputProps,
+      ...props
+    }
+  )));
+});
+InlineComboboxInput.displayName = "InlineComboboxInput";
+const InlineComboboxContent = ({
+  className,
   ...props
 }) => {
-  const [navigateAway, setNavigateAway] = React__default.useState(null);
-  const monaco = useMonaco();
-  const monacoEditorRef = React__default.useRef(null);
-  const selected = useSelected();
-  const [height, setHeight] = React__default.useState(28);
-  React__default.useEffect(() => {
-    if (selected && isCollapsed(editor.selection)) {
-      retryFocus(monacoEditorRef);
-    }
-  }, [selected, monacoEditorRef.current]);
-  const value = element.value || "";
-  if (typeof value !== "string") {
-    throw new Error("Element must be of type string for code block");
-  }
-  const language = restrictLanguage || element.lang;
-  const id = React__default.useMemo(() => uuid(), []);
-  const languages = React__default.useMemo(() => {
-    const defaultLangSet = { "": "plain text" };
-    if (!monaco)
-      return defaultLangSet;
-    return monaco.languages.getLanguages().reduce((ac, cv) => {
-      if (cv.id === "plaintext")
-        return ac;
-      return { ...ac, [cv.id]: cv.id };
-    }, defaultLangSet);
-  }, [monaco]);
-  React__default.useEffect(() => {
-    if (monaco) {
-      monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
-      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-        // disable errors
-        noSemanticValidation: true,
-        noSyntaxValidation: true
-      });
-    }
-  }, [monaco]);
-  const items2 = Object.entries(languages).map(([key, label]) => ({
-    key,
-    label,
-    render: (item) => item.label
-  }));
-  const currentItem = React__default.useMemo(() => {
-    return items2.find((item) => item.key === language) ?? {
-      key: "",
-      label: "Plain Text"
-    };
-  }, [items2, language]);
-  React__default.useEffect(() => {
-    if (navigateAway) {
-      setNavigateAway(null);
-      switch (navigateAway) {
-        case "remove":
-          {
-            focusEditor(editor);
-            setNodes(
-              editor,
-              {
-                type: "p",
-                children: [{ text: "" }],
-                lang: void 0,
-                value: void 0
-              },
-              {
-                match: (n) => {
-                  if (isElement(n) && n.type === element.type) {
-                    return true;
-                  }
-                }
-              }
-            );
-          }
-          break;
-        case "insertNext":
-          {
-            insertNodes(
-              editor,
-              [
-                {
-                  type: ELEMENT_DEFAULT,
-                  children: [{ text: "" }],
-                  lang: void 0,
-                  value: void 0
-                }
-              ],
-              { select: true }
-            );
-            focusEditor(editor);
-          }
-          break;
-        case "up":
-          {
-            const path = findNodePath(editor, element);
-            if (!path) {
-              return;
-            }
-            const previousNodePath = getPointBefore(editor, path);
-            if (!previousNodePath) {
-              focusEditor(editor);
-              insertNodes(
-                editor,
-                [
-                  {
-                    type: ELEMENT_DEFAULT,
-                    children: [{ text: "" }],
-                    lang: void 0,
-                    value: void 0
-                  }
-                ],
-                // Insert a new node at the current path, resulting in the code_block
-                // moving down one block
-                { at: path, select: true }
-              );
-              return;
-            }
-            focusEditor(editor, previousNodePath);
-          }
-          break;
-        case "down": {
-          const path = findNodePath(editor, element);
-          if (!path) {
-            return;
-          }
-          const nextNodePath = getPointAfter(editor, path);
-          if (!nextNodePath) {
-            insertNodes(
-              editor,
-              [
-                {
-                  type: ELEMENT_DEFAULT,
-                  children: [{ text: "" }],
-                  lang: void 0,
-                  value: void 0
-                }
-              ],
-              { select: true }
-            );
-            focusEditor(editor);
-          } else {
-            focusEditor(editor, nextNodePath);
-          }
-          break;
-        }
-      }
+  return /* @__PURE__ */ React__default.createElement(Portal, null, /* @__PURE__ */ React__default.createElement(
+    ComboboxPopover,
+    {
+      className: cn$1(
+        "z-[9999999] max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-white shadow-md",
+        className
+      ),
+      ...props
     }
-  }, [navigateAway]);
-  function handleEditorDidMount(monacoEditor, monaco2) {
-    monacoEditorRef.current = monacoEditor;
-    monacoEditor.onDidContentSizeChange(() => {
-      setHeight(monacoEditor.getContentHeight());
-      monacoEditor.layout();
-    });
-    monacoEditor.addCommand(monaco2.KeyMod.Shift | monaco2.KeyCode.Enter, () => {
-      if (monacoEditor.hasTextFocus()) {
-        setNavigateAway("insertNext");
-      }
-    });
-    monacoEditor.onKeyDown((l) => {
-      if (l.code === "ArrowUp") {
-        const selection = monacoEditor.getSelection();
-        if (selection.endLineNumber === 1 && selection.startLineNumber === 1) {
-          setNavigateAway("up");
-        }
-      }
-      if (l.code === "ArrowDown") {
-        const selection = monacoEditor.getSelection();
-        const totalLines = monacoEditor.getModel().getLineCount();
-        if (selection.endLineNumber === totalLines && selection.startLineNumber === totalLines) {
-          setNavigateAway("down");
-        }
-      }
-      if (l.code === "Backspace") {
-        const selection = monacoEditor.getSelection();
-        if (selection.endColumn === 1 && selection.endLineNumber === 1 && selection.positionColumn === 1 && selection.positionLineNumber === 1 && selection.selectionStartColumn === 1 && selection.selectionStartLineNumber === 1 && selection.startColumn === 1 && selection.startLineNumber === 1) {
-          setNavigateAway("remove");
-        }
+  ));
+};
+const comboboxItemVariants = cva(
+  "relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+  {
+    defaultVariants: {
+      interactive: true
+    },
+    variants: {
+      interactive: {
+        false: "",
+        true: "cursor-pointer transition-colors hover:bg-blue-500 hover:text-black data-[active-item=true]:bg-orange-400 data-[active-item=true]:text-black"
       }
-    });
+    }
   }
+);
+const InlineComboboxItem = ({
+  className,
+  keywords,
+  onClick,
+  ...props
+}) => {
+  const { value } = props;
+  const { filter, removeInput } = useContext(InlineComboboxContext);
+  const store = useComboboxContext();
+  const search = filter && store.useState("value");
+  const visible = useMemo(
+    () => !filter || filter({ keywords, value }, search),
+    [filter, value, keywords, search]
+  );
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ React__default.createElement(
+    ComboboxItem,
+    {
+      className: cn$1(comboboxItemVariants(), className),
+      onClick: (event) => {
+        removeInput(true);
+        onClick == null ? void 0 : onClick(event);
+      },
+      ...props
+    }
+  );
+};
+const InlineComboboxEmpty = ({
+  children,
+  className
+}) => {
+  const { setHasEmpty } = useContext(InlineComboboxContext);
+  const store = useComboboxContext();
+  const items2 = store.useState("items");
+  useEffect(() => {
+    setHasEmpty(true);
+    return () => {
+      setHasEmpty(false);
+    };
+  }, [setHasEmpty]);
+  if (items2.length > 0)
+    return null;
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      ...attributes,
-      className: "relative mb-2 mt-0.5 rounded-lg shadow-md p-2 border-gray-200 border"
+      className: cn$1(comboboxItemVariants({ interactive: false }), className)
     },
-    /* @__PURE__ */ React__default.createElement("style", null, `.monaco-editor .editor-widget {
-          display: none !important;
-          visibility: hidden !important;
-        }`),
-    props.children,
-    /* @__PURE__ */ React__default.createElement("div", { contentEditable: false }, !restrictLanguage && /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-between pb-2" }, /* @__PURE__ */ React__default.createElement("div", null), /* @__PURE__ */ React__default.createElement(
-      Autocomplete,
-      {
-        items: items2,
-        value: currentItem,
-        defaultQuery: "plaintext",
-        onChange: (item) => setNodes(editor, { lang: item.key })
-      }
-    )), /* @__PURE__ */ React__default.createElement("div", { style: { height: `${height}px` } }, /* @__PURE__ */ React__default.createElement(
-      MonacoEditor,
-      {
-        path: id,
-        onMount: handleEditorDidMount,
-        options: {
-          scrollBeyondLastLine: false,
-          // automaticLayout: true,
-          tabSize: 2,
-          disableLayerHinting: true,
-          accessibilitySupport: "off",
-          codeLens: false,
-          wordWrap: "on",
-          minimap: {
-            enabled: false
-          },
-          fontSize: 14,
-          lineHeight: 2,
-          formatOnPaste: true,
-          lineNumbers: "off",
-          formatOnType: true,
-          fixedOverflowWidgets: true,
-          // Takes too much horizontal space for iframe
-          folding: false,
-          renderLineHighlight: "none",
-          scrollbar: {
-            verticalScrollbarSize: 1,
-            horizontalScrollbarSize: 1,
-            // https://github.com/microsoft/monaco-editor/issues/2007#issuecomment-644425664
-            alwaysConsumeMouseWheel: false
-          }
-        },
-        language: String(language),
-        value: String(element.value),
-        onChange: (value2) => {
-          setNodes(editor, { value: value2, lang: language });
-        }
-      }
-    )))
+    children
   );
 };
-const CodeBlockElement = withRef(
+const rules = [
+  {
+    icon: Icons.h1,
+    onSelect: (editor) => {
+      toggleNodeType(editor, { activeType: ELEMENT_H1 });
+    },
+    value: "Heading 1"
+  },
+  {
+    icon: Icons.h2,
+    onSelect: (editor) => {
+      toggleNodeType(editor, { activeType: ELEMENT_H2 });
+    },
+    value: "Heading 2"
+  },
+  {
+    icon: Icons.h3,
+    onSelect: (editor) => {
+      toggleNodeType(editor, { activeType: ELEMENT_H3 });
+    },
+    value: "Heading 3"
+  },
+  {
+    icon: Icons.ul,
+    keywords: ["ul", "unordered list"],
+    onSelect: (editor) => {
+      toggleList(editor, { type: ELEMENT_UL });
+    },
+    value: "Bulleted list"
+  },
+  {
+    icon: Icons.ol,
+    keywords: ["ol", "ordered list"],
+    onSelect: (editor) => {
+      toggleList(editor, { type: ELEMENT_OL });
+    },
+    value: "Numbered list"
+  }
+];
+const SlashInputElement = withRef(
   ({ className, ...props }, ref) => {
-    const { element } = props;
-    const state = useCodeBlockElementState({ element });
+    const { children, editor, element } = props;
     return /* @__PURE__ */ React__default.createElement(
       PlateElement,
       {
-        className: cn$1("relative py-1", state.className, className),
+        as: "span",
+        "data-slate-value": element.value,
         ref,
         ...props
       },
-      /* @__PURE__ */ React__default.createElement(CodeBlock, { ...props })
+      /* @__PURE__ */ React__default.createElement(InlineCombobox, { element, trigger: "/" }, /* @__PURE__ */ React__default.createElement(InlineComboboxInput, null), /* @__PURE__ */ React__default.createElement(InlineComboboxContent, null, /* @__PURE__ */ React__default.createElement(InlineComboboxEmpty, null, "No matching commands found"), rules.map(({ icon: Icon, keywords, onSelect, value }) => /* @__PURE__ */ React__default.createElement(
+        InlineComboboxItem,
+        {
+          key: value,
+          keywords,
+          onClick: () => onSelect(editor),
+          value
+        },
+        /* @__PURE__ */ React__default.createElement(Icon, { "aria-hidden": true, className: "mr-2 size-4" }),
+        value
+      )))),
+      children
     );
   }
 );
+const TableCellElement = withRef(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {
+  var _a, _b, _c, _d;
+  const { element } = props;
+  const {
+    borders,
+    colIndex,
+    colSpan,
+    hovered,
+    hoveredLeft,
+    isSelectingCell,
+    readOnly,
+    rowIndex,
+    rowSize,
+    selected
+  } = useTableCellElementState();
+  const { props: cellProps } = useTableCellElement({ element: props.element });
+  const resizableState = useTableCellElementResizableState({
+    colIndex,
+    colSpan,
+    rowIndex
+  });
+  const { bottomProps, hiddenLeft, leftProps, rightProps } = useTableCellElementResizable(resizableState);
+  const Cell = isHeader ? "th" : "td";
+  return /* @__PURE__ */ React__default.createElement(
+    PlateElement,
+    {
+      asChild: true,
+      className: cn$1(
+        "relative h-full overflow-visible border-none bg-background p-0",
+        hideBorder && "before:border-none",
+        element.background ? "bg-[--cellBackground]" : "bg-background",
+        !hideBorder && cn$1(
+          isHeader && "text-left [&_>_*]:m-0",
+          "before:size-full",
+          selected && "before:z-10 before:bg-muted",
+          "before:absolute before:box-border before:select-none before:content-['']",
+          borders && cn$1(
+            ((_a = borders.bottom) == null ? void 0 : _a.size) && `before:border-b before:border-b-border`,
+            ((_b = borders.right) == null ? void 0 : _b.size) && `before:border-r before:border-r-border`,
+            ((_c = borders.left) == null ? void 0 : _c.size) && `before:border-l before:border-l-border`,
+            ((_d = borders.top) == null ? void 0 : _d.size) && `before:border-t before:border-t-border`
+          )
+        ),
+        className
+      ),
+      ref,
+      ...cellProps,
+      ...props,
+      style: {
+        "--cellBackground": element.background,
+        ...style
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Cell, null, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "relative z-20 box-border h-full px-3 py-2",
+        style: {
+          minHeight: rowSize
+        }
+      },
+      children
+    ), !isSelectingCell && /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "group absolute top-0 size-full select-none",
+        contentEditable: false,
+        suppressContentEditableWarning: true
+      },
+      !readOnly && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        ResizeHandle$1,
+        {
+          ...rightProps,
+          className: "-top-3 right-[-5px] w-[10px]"
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        ResizeHandle$1,
+        {
+          ...bottomProps,
+          className: "bottom-[-5px] h-[10px]"
+        }
+      ), !hiddenLeft && /* @__PURE__ */ React__default.createElement(
+        ResizeHandle$1,
+        {
+          ...leftProps,
+          className: "-top-3 left-[-5px] w-[10px]"
+        }
+      ), hovered && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: cn$1(
+            "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
+            "right-[-1.5px]"
+          )
+        }
+      ), hoveredLeft && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: cn$1(
+            "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
+            "left-[-1.5px]"
+          )
+        }
+      ))
+    ))
+  );
+});
+TableCellElement.displayName = "TableCellElement";
+const TableCellHeaderElement = withProps(TableCellElement, {
+  isHeader: true
+});
 const buttonVariants$1 = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
@@ -2546,117 +2783,6 @@ const TableRowElement = withRef(({ children, hideBorder, ...props }, ref) => {
     /* @__PURE__ */ React__default.createElement("tr", null, children)
   );
 });
-const TableCellElement = withRef(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {
-  var _a, _b, _c, _d;
-  const { element } = props;
-  const {
-    borders,
-    colIndex,
-    colSpan,
-    hovered,
-    hoveredLeft,
-    isSelectingCell,
-    readOnly,
-    rowIndex,
-    rowSize,
-    selected
-  } = useTableCellElementState();
-  const { props: cellProps } = useTableCellElement({ element: props.element });
-  const resizableState = useTableCellElementResizableState({
-    colIndex,
-    colSpan,
-    rowIndex
-  });
-  const { bottomProps, hiddenLeft, leftProps, rightProps } = useTableCellElementResizable(resizableState);
-  const Cell = isHeader ? "th" : "td";
-  return /* @__PURE__ */ React__default.createElement(
-    PlateElement,
-    {
-      asChild: true,
-      className: cn$1(
-        "relative h-full overflow-visible border-none bg-background p-0",
-        hideBorder && "before:border-none",
-        element.background ? "bg-[--cellBackground]" : "bg-background",
-        !hideBorder && cn$1(
-          isHeader && "text-left [&_>_*]:m-0",
-          "before:size-full",
-          selected && "before:z-10 before:bg-muted",
-          "before:absolute before:box-border before:select-none before:content-['']",
-          borders && cn$1(
-            ((_a = borders.bottom) == null ? void 0 : _a.size) && `before:border-b before:border-b-border`,
-            ((_b = borders.right) == null ? void 0 : _b.size) && `before:border-r before:border-r-border`,
-            ((_c = borders.left) == null ? void 0 : _c.size) && `before:border-l before:border-l-border`,
-            ((_d = borders.top) == null ? void 0 : _d.size) && `before:border-t before:border-t-border`
-          )
-        ),
-        className
-      ),
-      ref,
-      ...cellProps,
-      ...props,
-      style: {
-        "--cellBackground": element.background,
-        ...style
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(Cell, null, /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: "relative z-20 box-border h-full px-3 py-2",
-        style: {
-          minHeight: rowSize
-        }
-      },
-      children
-    ), !isSelectingCell && /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: "group absolute top-0 size-full select-none",
-        contentEditable: false,
-        suppressContentEditableWarning: true
-      },
-      !readOnly && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-        ResizeHandle$1,
-        {
-          ...rightProps,
-          className: "-top-3 right-[-5px] w-[10px]"
-        }
-      ), /* @__PURE__ */ React__default.createElement(
-        ResizeHandle$1,
-        {
-          ...bottomProps,
-          className: "bottom-[-5px] h-[10px]"
-        }
-      ), !hiddenLeft && /* @__PURE__ */ React__default.createElement(
-        ResizeHandle$1,
-        {
-          ...leftProps,
-          className: "-top-3 left-[-5px] w-[10px]"
-        }
-      ), hovered && /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          className: cn$1(
-            "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
-            "right-[-1.5px]"
-          )
-        }
-      ), hoveredLeft && /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          className: cn$1(
-            "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
-            "left-[-1.5px]"
-          )
-        }
-      ))
-    ))
-  );
-});
-TableCellElement.displayName = "TableCellElement";
-const TableCellHeaderElement = withProps(TableCellElement, {
-  isHeader: true
-});
 const blockClasses = "mt-0.5";
 const headerClasses = "font-normal";
 const Components = () => {
@@ -2762,6 +2888,7 @@ const Components = () => {
         }
       )
     ),
+    [ELEMENT_MERMAID]: MermaidElement,
     [ELEMENT_BLOCKQUOTE]: BlockquoteElement,
     [ELEMENT_CODE_BLOCK]: CodeBlockElement,
     [ELEMENT_CODE_LINE]: CodeLineElement,
@@ -3256,7 +3383,9 @@ class Form {
                 {
                   type: "string",
                   label: "Caption",
-                  name: [templateName.replace(/\.props$/, ""), "caption"].join("."),
+                  name: [templateName.replace(/\.props$/, ""), "caption"].join(
+                    "."
+                  ),
                   component: "text"
                 }
               ]
@@ -13924,7 +14053,7 @@ const TooltipContent = withCn(
   withProps(TooltipPrimitive.Content, {
     sideOffset: 4
   }),
-  "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md"
+  "z-[9999] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md"
 );
 function withTooltip(Component2) {
   return React__default.forwardRef(function ExtendComponent({ tooltip, tooltipContentProps, tooltipProps, ...props }, ref) {
@@ -14050,30 +14179,42 @@ const FixedToolbar = withCn(
   Toolbar,
   "p-1 sticky left-0 top-0 z-50 w-full justify-between overflow-x-auto border border-border bg-background"
 );
-const MarkToolbarButton = withRef(({ clear, nodeType, ...rest }, ref) => {
-  const state = useMarkToolbarButtonState({ clear, nodeType });
-  const { props } = useMarkToolbarButton(state);
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, ...props, ...rest });
-});
-const IndentListToolbarButton = withRef(({ nodeType = ELEMENT_UL }, ref) => {
-  const editor = useEditorState();
-  const state = useListToolbarButtonState({ nodeType });
-  const { props } = useListToolbarButton(state);
-  return /* @__PURE__ */ React__default.createElement(
-    ToolbarButton,
-    {
-      ref,
-      tooltip: nodeType === ELEMENT_UL ? "Bulleted List" : "Numbered List",
-      ...props,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        toggleList(editor, { type: nodeType });
+const useResize = (ref, callback) => {
+  React__default.useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        callback(entry);
       }
-    },
-    nodeType === ELEMENT_UL ? /* @__PURE__ */ React__default.createElement(Icons.ul, null) : /* @__PURE__ */ React__default.createElement(Icons.ol, null)
-  );
-});
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => resizeObserver.disconnect();
+  }, [ref.current]);
+};
+const STANDARD_ICON_WIDTH = 32;
+const HEADING_ICON_WITH_TEXT = 127;
+const HEADING_ICON_ONLY = 58;
+const EMBED_ICON_WIDTH = 78;
+const CONTAINER_MD_BREAKPOINT = 448;
+const FLOAT_BUTTON_WIDTH = 25;
+const HEADING_LABEL = "Headings";
+const ToolbarContext = createContext(void 0);
+const ToolbarProvider = ({
+  tinaForm,
+  templates,
+  overrides,
+  children
+}) => {
+  return /* @__PURE__ */ React__default.createElement(ToolbarContext.Provider, { value: { tinaForm, templates, overrides } }, children);
+};
+const useToolbarContext = () => {
+  const context = useContext(ToolbarContext);
+  if (!context) {
+    throw new Error("useToolbarContext must be used within a ToolbarProvider");
+  }
+  return context;
+};
 const items$1 = [
   {
     description: "Paragraph",
@@ -14146,77 +14287,41 @@ function HeadingsMenu(props) {
   return /* @__PURE__ */ React__default.createElement(DropdownMenu, { modal: false, ...openState, ...props }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
     ToolbarButton,
     {
-      showArrow: true,
-      isDropdown: true,
-      pressed: openState.open,
-      tooltip: "Headings"
-    },
-    /* @__PURE__ */ React__default.createElement(SelectedItemIcon, { className: "size-5" }),
-    /* @__PURE__ */ React__default.createElement("span", { className: "@md/toolbar:flex hidden" }, selectedItemLabel)
-  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "min-w-0" }, /* @__PURE__ */ React__default.createElement(
-    DropdownMenuRadioGroup,
-    {
-      className: "flex flex-col gap-0.5",
-      onValueChange: (type) => {
-        toggleNodeType(editor, { activeType: type });
-        collapseSelection(editor);
-        focusEditor(editor);
-      },
-      value
-    },
-    items$1.filter((item) => {
-      if (userInTable) {
-        return !unsupportedItemsInTable.has(item.label);
-      }
-      return true;
-    }).map(({ icon: Icon, label, value: itemValue }) => /* @__PURE__ */ React__default.createElement(
-      DropdownMenuRadioItem,
-      {
-        className: "min-w-[180px]",
-        key: itemValue,
-        value: itemValue
-      },
-      /* @__PURE__ */ React__default.createElement(Icon, { className: "mr-2 size-5" }),
-      label
-    ))
-  )));
-}
-const LinkToolbarButton = withRef((rest, ref) => {
-  const state = useLinkToolbarButtonState();
-  const { props } = useLinkToolbarButton(state);
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...props, ...rest }, /* @__PURE__ */ React__default.createElement(Icons.link, null));
-});
-const useBlockQuoteToolbarButtonState = () => {
-  const editor = useEditorState();
-  const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_BLOCKQUOTE$1);
-  return {
-    pressed: isBlockActive()
-  };
-};
-const useBlockQuoteToolbarButton = (state) => {
-  const editor = useEditorState();
-  const onClick = () => {
-    toggleNodeType(editor, {
-      activeType: ELEMENT_BLOCKQUOTE$1
-    });
-  };
-  const onMouseDown = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  return {
-    props: {
-      onClick,
-      onMouseDown,
-      pressed: state.pressed
-    }
-  };
-};
-const QuoteToolbarButton = withRef(({ clear, ...rest }, ref) => {
-  const state = useBlockQuoteToolbarButtonState();
-  const { props } = useBlockQuoteToolbarButton(state);
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.quote, null));
-});
+      showArrow: true,
+      isDropdown: true,
+      pressed: openState.open,
+      tooltip: "Headings"
+    },
+    /* @__PURE__ */ React__default.createElement(SelectedItemIcon, { className: "size-5" }),
+    /* @__PURE__ */ React__default.createElement("span", { className: "@md/toolbar:flex hidden" }, selectedItemLabel)
+  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "min-w-0" }, /* @__PURE__ */ React__default.createElement(
+    DropdownMenuRadioGroup,
+    {
+      className: "flex flex-col gap-0.5",
+      onValueChange: (type) => {
+        toggleNodeType(editor, { activeType: type });
+        collapseSelection(editor);
+        focusEditor(editor);
+      },
+      value
+    },
+    items$1.filter((item) => {
+      if (userInTable) {
+        return !unsupportedItemsInTable.has(item.label);
+      }
+      return true;
+    }).map(({ icon: Icon, label, value: itemValue }) => /* @__PURE__ */ React__default.createElement(
+      DropdownMenuRadioItem,
+      {
+        className: "min-w-[180px]",
+        key: itemValue,
+        value: itemValue
+      },
+      /* @__PURE__ */ React__default.createElement(Icon, { className: "mr-2 size-5" }),
+      label
+    ))
+  )));
+}
 const useCodeBlockToolbarButtonState = () => {
   const editor = useEditorState();
   const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_CODE_BLOCK$1);
@@ -14278,101 +14383,67 @@ const ImageToolbarButton = withRef(({ clear, ...rest }, ref) => {
   const { props } = useImageToolbarButton(state);
   return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.image, null));
 });
-const useRawMarkdownToolbarButton = () => {
-  const { setRawMode } = useEditorContext();
+const IndentListToolbarButton = withRef(({ nodeType = ELEMENT_UL }, ref) => {
+  const editor = useEditorState();
+  const state = useListToolbarButtonState({ nodeType });
+  const { props } = useListToolbarButton(state);
+  return /* @__PURE__ */ React__default.createElement(
+    ToolbarButton,
+    {
+      ref,
+      tooltip: nodeType === ELEMENT_UL ? "Bulleted List" : "Numbered List",
+      ...props,
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        toggleList(editor, { type: nodeType });
+      }
+    },
+    nodeType === ELEMENT_UL ? /* @__PURE__ */ React__default.createElement(Icons.ul, null) : /* @__PURE__ */ React__default.createElement(Icons.ol, null)
+  );
+});
+const LinkToolbarButton = withRef((rest, ref) => {
+  const state = useLinkToolbarButtonState();
+  const { props } = useLinkToolbarButton(state);
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...props, ...rest }, /* @__PURE__ */ React__default.createElement(Icons.link, null));
+});
+const MarkToolbarButton = withRef(({ clear, nodeType, ...rest }, ref) => {
+  const state = useMarkToolbarButtonState({ clear, nodeType });
+  const { props } = useMarkToolbarButton(state);
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, ...props, ...rest });
+});
+const useMermaidToolbarButtonState = () => {
+  const editor = useEditorState();
+  const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_MERMAID);
+  return {
+    pressed: isBlockActive()
+  };
+};
+const useMermaidToolbarButton = (state) => {
+  const editor = useEditorState();
+  const onClick = () => {
+    insertEmptyElement(editor, ELEMENT_MERMAID, {
+      nextBlock: true,
+      select: true
+    });
+  };
   const onMouseDown = (e) => {
-    setRawMode(true);
+    e.preventDefault();
+    e.stopPropagation();
   };
   return {
     props: {
+      onClick,
       onMouseDown,
-      pressed: false
+      pressed: state.pressed
     }
   };
 };
-const RawMarkdownToolbarButton = withRef(({ clear, ...rest }, ref) => {
-  const { props } = useRawMarkdownToolbarButton();
-  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.raw, null));
+const MermaidToolbarButton = withRef(({ clear, ...rest }, ref) => {
+  const state = useMermaidToolbarButtonState();
+  const { props } = useMermaidToolbarButton(state);
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Mermaid", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.mermaid, null));
 });
-const ToolbarContext = createContext(void 0);
-const ToolbarProvider = ({
-  tinaForm,
-  templates,
-  overrides,
-  children
-}) => {
-  return /* @__PURE__ */ React__default.createElement(ToolbarContext.Provider, { value: { tinaForm, templates, overrides } }, children);
-};
-const useToolbarContext = () => {
-  const context = useContext(ToolbarContext);
-  if (!context) {
-    throw new Error("useToolbarContext must be used within a ToolbarProvider");
-  }
-  return context;
-};
-function TemplatesToolbarButton() {
-  const { templates } = useToolbarContext();
-  const editor = useEditorState();
-  return /* @__PURE__ */ React__default.createElement(EmbedButton, { templates, editor });
-}
-const EmbedButton = ({ editor, templates }) => {
-  const [open2, setOpen] = useState(false);
-  const [filteredTemplates, setFilteredTemplates] = useState(templates);
-  const filterChange = (e) => {
-    const filterText = e.target.value.toLowerCase();
-    setFilteredTemplates(
-      templates.filter(
-        (template) => template.name.toLowerCase().includes(filterText)
-      )
-    );
-  };
-  return /* @__PURE__ */ React__default.createElement(DropdownMenu, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { className: "inline-flex items-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-5 h-9 px-2 bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground my-1 justify-between pr-1" }, /* @__PURE__ */ React__default.createElement("span", { className: "flex" }, "Embed"), /* @__PURE__ */ React__default.createElement(
-    PlusIcon,
-    {
-      className: `origin-center transition-all ease-out duration-150 ${open2 ? "rotate-45" : ""}`
-    }
-  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { className: "max-h-48 overflow-y-auto" }, templates.length > 10 && /* @__PURE__ */ React__default.createElement(
-    "input",
-    {
-      type: "text",
-      placeholder: "Filter templates...",
-      className: "w-full p-2 border border-gray-300 rounded-md",
-      onChange: filterChange
-    }
-  ), /* @__PURE__ */ React__default.createElement(DropdownMenuSeparator, null), filteredTemplates.map((template) => /* @__PURE__ */ React__default.createElement(
-    DropdownMenuItem,
-    {
-      key: template.name,
-      onMouseDown: (e) => {
-        e.preventDefault();
-        close();
-        insertMDX(editor, template);
-      },
-      className: ""
-    },
-    template.label || template.name
-  ))));
-};
-const STANDARD_ICON_WIDTH = 32;
-const HEADING_ICON_WITH_TEXT = 127;
-const HEADING_ICON_ONLY = 58;
-const EMBED_ICON_WIDTH = 78;
-const CONTAINER_MD_BREAKPOINT = 448;
-const FLOAT_BUTTON_WIDTH = 25;
-const HEADING_LABEL = "Headings";
-const useResize = (ref, callback) => {
-  React__default.useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        callback(entry);
-      }
-    });
-    if (ref.current) {
-      resizeObserver.observe(ref.current);
-    }
-    return () => resizeObserver.disconnect();
-  }, [ref.current]);
-};
 function OverflowMenu({
   children,
   ...props
@@ -14390,6 +14461,53 @@ function OverflowMenu({
     /* @__PURE__ */ React__default.createElement(Icons.overflow, { className: "size-5" })
   )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { align: "start", className: "min-w-0 flex flex-grow" }, children));
 }
+const useBlockQuoteToolbarButtonState = () => {
+  const editor = useEditorState();
+  const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_BLOCKQUOTE$1);
+  return {
+    pressed: isBlockActive()
+  };
+};
+const useBlockQuoteToolbarButton = (state) => {
+  const editor = useEditorState();
+  const onClick = () => {
+    toggleNodeType(editor, {
+      activeType: ELEMENT_BLOCKQUOTE$1
+    });
+  };
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return {
+    props: {
+      onClick,
+      onMouseDown,
+      pressed: state.pressed
+    }
+  };
+};
+const QuoteToolbarButton = withRef(({ clear, ...rest }, ref) => {
+  const state = useBlockQuoteToolbarButtonState();
+  const { props } = useBlockQuoteToolbarButton(state);
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.quote, null));
+});
+const useRawMarkdownToolbarButton = () => {
+  const { setRawMode } = useEditorContext();
+  const onMouseDown = (e) => {
+    setRawMode(true);
+  };
+  return {
+    props: {
+      onMouseDown,
+      pressed: false
+    }
+  };
+};
+const RawMarkdownToolbarButton = withRef(({ clear, ...rest }, ref) => {
+  const { props } = useRawMarkdownToolbarButton();
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.raw, null));
+});
 function TableDropdownMenu(props) {
   const tableSelected = useEditorSelector(
     (editor2) => someNode(editor2, { match: { type: ELEMENT_TABLE$1 } }),
@@ -14492,6 +14610,49 @@ function TableDropdownMenu(props) {
     )))
   ));
 }
+function TemplatesToolbarButton() {
+  const { templates } = useToolbarContext();
+  const editor = useEditorState();
+  return /* @__PURE__ */ React__default.createElement(EmbedButton, { templates, editor });
+}
+const EmbedButton = ({ editor, templates }) => {
+  const [open2, setOpen] = useState(false);
+  const [filteredTemplates, setFilteredTemplates] = useState(templates);
+  const filterChange = (e) => {
+    const filterText = e.target.value.toLowerCase();
+    setFilteredTemplates(
+      templates.filter(
+        (template) => template.name.toLowerCase().includes(filterText)
+      )
+    );
+  };
+  return /* @__PURE__ */ React__default.createElement(DropdownMenu, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { className: "inline-flex items-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([data-icon])]:size-5 h-9 px-2 bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground my-1 justify-between pr-1" }, /* @__PURE__ */ React__default.createElement("span", { className: "flex" }, "Embed"), /* @__PURE__ */ React__default.createElement(
+    PlusIcon,
+    {
+      className: `origin-center transition-all ease-out duration-150 ${open2 ? "rotate-45" : ""}`
+    }
+  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent, { className: "max-h-48 overflow-y-auto" }, templates.length > 10 && /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Filter templates...",
+      className: "w-full p-2 border border-gray-300 rounded-md",
+      onChange: filterChange
+    }
+  ), /* @__PURE__ */ React__default.createElement(DropdownMenuSeparator, null), filteredTemplates.map((template) => /* @__PURE__ */ React__default.createElement(
+    DropdownMenuItem,
+    {
+      key: template.name,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        close();
+        insertMDX(editor, template);
+      },
+      className: ""
+    },
+    template.label || template.name
+  ))));
+};
 const toolbarItems = {
   heading: {
     label: HEADING_LABEL,
@@ -14544,6 +14705,11 @@ const toolbarItems = {
     width: () => STANDARD_ICON_WIDTH,
     Component: /* @__PURE__ */ React__default.createElement(CodeBlockToolbarButton, null)
   },
+  mermaid: {
+    label: "Mermaid",
+    width: () => STANDARD_ICON_WIDTH,
+    Component: /* @__PURE__ */ React__default.createElement(MermaidToolbarButton, null)
+  },
   table: {
     label: "Table",
     width: () => STANDARD_ICON_WIDTH,
@@ -14931,6 +15097,7 @@ const RichEditor = (props) => {
         createMdxBlockPlugin(),
         createMdxInlinePlugin(),
         createImgPlugin(),
+        createMermaidPlugin(),
         createInvalidMarkdownPlugin(),
         createLinkPlugin({
           options: {