tinacms 0.0.0-c5dad82-20241009225242 → 0.0.0-cff6c6a-20241023044614

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/plate"), require("slate-react"), require("@udecode/plate-slash-command"), require("@udecode/cn"), require("@udecode/plate-common"), require("@udecode/plate-heading"), require("class-variance-authority"), require("lucide-react"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-code-block"), require("@monaco-editor/react"), require("@headlessui/react"), require("@radix-ui/react-popover"), require("@udecode/plate-table"), require("@radix-ui/react-slot"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-separator"), require("@udecode/plate-resizable"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("react-dropzone"), require("clsx"), require("tailwind-merge"), require("cmdk"), require("is-hotkey"), require("slate"), require("lodash.get"), require("moment"), require("date-fns"), require("@udecode/plate-link"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@udecode/plate-block-quote"), require("@udecode/plate-floating"), require("@react-hook/window-size"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/plate", "slate-react", "@udecode/plate-slash-command", "@udecode/cn", "@udecode/plate-common", "@udecode/plate-heading", "class-variance-authority", "lucide-react", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-code-block", "@monaco-editor/react", "@headlessui/react", "@radix-ui/react-popover", "@udecode/plate-table", "@radix-ui/react-slot", "@radix-ui/react-dropdown-menu", "@radix-ui/react-separator", "@udecode/plate-resizable", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "react-color", "color-string", "react-dropzone", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@udecode/plate-block-quote", "@udecode/plate-floating", "@react-hook/window-size", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, zod, React, reactDom, plate, slateReact, plateSlashCommand, cn$1, plateCommon, plateHeading, classVarianceAuthority, lucideReact, react, plateCombobox, plateCodeBlock, MonacoEditor, react$1, PopoverPrimitive, plateTable, reactSlot, DropdownMenuPrimitive, SeparatorPrimitive, plateResizable, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, pkg$1, pkg, dropzone, clsx, tailwindMerge, cmdk, isHotkey, slate, get, moment, dateFns, plateLink, ToolbarPrimitive, TooltipPrimitive, plateParagraph, plateBlockQuote, plateFloating, windowSize, graphql, gql, schemaTools, yup, core, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate"), require("@udecode/plate-common"), require("@udecode/plate-slash-command"), require("slate-react"), require("@udecode/plate-code-block"), require("@monaco-editor/react"), require("@headlessui/react"), require("class-variance-authority"), require("lucide-react"), require("mermaid"), require("@udecode/plate-heading"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-table"), require("@udecode/plate-resizable"), require("@radix-ui/react-popover"), require("@radix-ui/react-slot"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-separator"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("react-dropzone"), require("clsx"), require("tailwind-merge"), require("cmdk"), require("is-hotkey"), require("slate"), require("lodash.get"), require("moment"), require("date-fns"), require("@udecode/plate-link"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@udecode/plate-block-quote"), require("@udecode/plate-floating"), require("@react-hook/window-size"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate", "@udecode/plate-common", "@udecode/plate-slash-command", "slate-react", "@udecode/plate-code-block", "@monaco-editor/react", "@headlessui/react", "class-variance-authority", "lucide-react", "mermaid", "@udecode/plate-heading", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-table", "@udecode/plate-resizable", "@radix-ui/react-popover", "@radix-ui/react-slot", "@radix-ui/react-dropdown-menu", "@radix-ui/react-separator", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "react-color", "color-string", "react-dropzone", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@udecode/plate-block-quote", "@udecode/plate-floating", "@react-hook/window-size", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, React, reactDom, cn$1, plate, plateCommon, plateSlashCommand, slateReact, plateCodeBlock, MonacoEditor, react, classVarianceAuthority, lucideReact, mermaid, plateHeading, react$1, plateCombobox, plateTable, plateResizable, PopoverPrimitive, reactSlot, DropdownMenuPrimitive, SeparatorPrimitive, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, pkg$1, pkg, dropzone, clsx, tailwindMerge, cmdk, isHotkey, slate, get, moment, dateFns, plateLink, ToolbarPrimitive, TooltipPrimitive, plateParagraph, plateBlockQuote, plateFloating, windowSize, graphql, gql, schemaTools, yup, core, reactRouterDom, mdx) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -882,6 +882,20 @@ var __publicField = (obj, key, value) => {
   const useTemplates = () => {
     return React.useContext(EditorContext);
   };
+  const BlockquoteElement = cn$1.withRef(
+    ({ children, className, ...props }, ref) => {
+      return /* @__PURE__ */ React.createElement(
+        plateCommon.PlateElement,
+        {
+          asChild: true,
+          className: cn$1.cn("my-1 border-l-2 pl-6 italic", className),
+          ref,
+          ...props
+        },
+        /* @__PURE__ */ React.createElement("blockquote", null, children)
+      );
+    }
+  );
   function classNames$1(...classes) {
     return classes.filter(Boolean).join(" ");
   }
@@ -891,1270 +905,1492 @@ var __publicField = (obj, key, value) => {
       (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
     );
   };
-  const RawMarkdown = () => {
+  function ChevronDownIcon(props, svgRef) {
+    return /* @__PURE__ */ React__namespace.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__namespace.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__namespace.forwardRef(ChevronDownIcon);
+  const ChevronDownIcon$1 = ForwardRef;
+  const Autocomplete = ({
+    value,
+    onChange,
+    defaultQuery,
+    items: items2
+  }) => {
+    const [query, setQuery] = React.useState(defaultQuery ?? "");
+    const filteredItems = React.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.createElement(
-      "svg",
+      react.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.createElement("title", null),
-      /* @__PURE__ */ React.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.createElement("div", { className: "mt-1" }, /* @__PURE__ */ React.createElement("div", { className: "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md sm:text-sm" }, /* @__PURE__ */ React.createElement(
+        react.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.createElement(react.ComboboxButton, { className: "absolute inset-y-0 right-0 flex items-center pr-2" }, /* @__PURE__ */ React.createElement(
+        ChevronDownIcon$1,
+        {
+          className: "h-5 w-5 text-gray-400",
+          "aria-hidden": "true"
+        }
+      )))),
+      /* @__PURE__ */ React.createElement(
+        react.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.createElement(react.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.createElement(react.ComboboxOption, { key: item.key, value: item }, ({ focus }) => /* @__PURE__ */ React.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.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.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.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.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.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.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.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.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.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.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.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.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 = classVarianceAuthority.cva("", {
-    variants: {
-      variant: {
-        toolbar: "size-5",
-        menuItem: "mr-2 size-5"
-      },
-      size: {
-        sm: "mr-2 size-4",
-        md: "mr-2 size-6"
-      }
-    },
-    defaultVariants: {}
+  MonacoEditor.loader.config({
+    paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs" }
   });
-  const DoubleColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ React.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.createElement(
-    "svg",
-    {
-      fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ React.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 RightSideDoubleColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        clipRule: "evenodd",
-        d: "M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z",
-        fill: "#595E6F",
-        fillRule: "evenodd"
-      }
-    )
-  );
-  const LeftSideDoubleColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        clipRule: "evenodd",
-        d: "M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z",
-        fill: "#595E6F",
-        fillRule: "evenodd"
-      }
-    )
-  );
-  const DoubleSideDoubleColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        clipRule: "evenodd",
-        d: "M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z",
-        fill: "#595E6F",
-        fillRule: "evenodd"
-      }
-    )
-  );
-  const Overflow = (props) => /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      className: "h-5 w-5",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(
-      "path",
-      {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: 2,
-        d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-      }
-    )
-  );
-  const Icons = {
-    add: lucideReact.Plus,
-    alignCenter: lucideReact.AlignCenter,
-    alignJustify: lucideReact.AlignJustify,
-    alignLeft: lucideReact.AlignLeft,
-    alignRight: lucideReact.AlignRight,
-    arrowDown: lucideReact.ChevronDown,
-    bg: lucideReact.PaintBucket,
-    blockquote: lucideReact.Quote,
-    // bold: Bold,
-    overflow: Overflow,
-    borderAll,
-    borderBottom,
-    borderLeft,
-    borderNone,
-    borderRight,
-    borderTop,
-    check: lucideReact.Check,
-    chevronRight: lucideReact.ChevronRight,
-    chevronsUpDown: lucideReact.ChevronsUpDown,
-    clear: lucideReact.X,
-    close: lucideReact.X,
-    // code: Code2,
-    codeblock: lucideReact.FileCode,
-    color: lucideReact.Baseline,
-    column: lucideReact.RectangleVertical,
-    combine: lucideReact.Combine,
-    ungroup: lucideReact.Ungroup,
-    comment: lucideReact.MessageSquare,
-    commentAdd: lucideReact.MessageSquarePlus,
-    delete: lucideReact.Trash,
-    dragHandle: lucideReact.GripVertical,
-    editing: lucideReact.Edit2,
-    emoji: lucideReact.Smile,
-    externalLink: lucideReact.ExternalLink,
-    h1: lucideReact.Heading1,
-    h2: lucideReact.Heading2,
-    h3: lucideReact.Heading3,
-    h4: lucideReact.Heading4,
-    h5: lucideReact.Heading5,
-    h6: lucideReact.Heading6,
-    // image: Image,
-    indent: lucideReact.Indent,
-    // italic: Italic,
-    kbd: lucideReact.Keyboard,
-    lineHeight: lucideReact.WrapText,
-    // link: Link2,
-    minus: lucideReact.Minus,
-    more: lucideReact.MoreHorizontal,
-    // ol: ListOrdered,
-    outdent: lucideReact.Outdent,
-    paragraph: lucideReact.Pilcrow,
-    refresh: lucideReact.RotateCcw,
-    row: lucideReact.RectangleHorizontal,
-    search: lucideReact.Search,
-    settings: lucideReact.Settings,
-    strikethrough: lucideReact.Strikethrough,
-    subscript: lucideReact.Subscript,
-    superscript: lucideReact.Superscript,
-    table: lucideReact.Table,
-    text: lucideReact.Text,
-    trash: lucideReact.Trash,
-    // ul: List,
-    underline: lucideReact.Underline,
-    unlink: lucideReact.Link2Off,
-    viewing: lucideReact.Eye,
-    doubleColumn: DoubleColumnOutlined,
-    doubleSideDoubleColumn: DoubleSideDoubleColumnOutlined,
-    threeColumn: ThreeColumnOutlined,
-    leftSideDoubleColumn: LeftSideDoubleColumnOutlined,
-    rightSideDoubleColumn: RightSideDoubleColumnOutlined,
-    heading: HeadingIcon,
-    link: LinkIcon,
-    quote: QuoteIcon,
-    image: ImageIcon,
-    ul: UnorderedListIcon,
-    ol: OrderedListIcon,
-    code: CodeIcon,
-    codeBlock: CodeBlockIcon,
-    bold: BoldIcon,
-    italic: ItalicIcon,
-    raw: RawMarkdown,
-    // www
-    gitHub: (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 438.549 438.549", ...props }, /* @__PURE__ */ React.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"
+    }
+  };
+  const MINIMUM_HEIGHT = 75;
+  const CodeBlock = ({
+    attributes,
+    editor,
+    element,
+    language: restrictLanguage,
+    onChangeCallback,
+    defaultValue,
+    ...props
+  }) => {
+    const [navigateAway, setNavigateAway] = React.useState(null);
+    const monaco = MonacoEditor.useMonaco();
+    const monacoEditorRef = React.useRef(null);
+    const selected = slateReact.useSelected();
+    const [height, setHeight] = React.useState(MINIMUM_HEIGHT);
+    React.useEffect(() => {
+      if (selected && plateCommon.isCollapsed(editor.selection)) {
+        retryFocus(monacoEditorRef);
       }
-    )),
-    logo: (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.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"
+    }, [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.useMemo(() => uuid(), []);
+    const languages = React.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.useEffect(() => {
+      if (monaco) {
+        monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+        monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+          // disable errors
+          noSemanticValidation: true,
+          noSyntaxValidation: true
+        });
       }
-    )),
-    moon: lucideReact.Moon,
-    sun: lucideReact.SunMedium,
-    twitter: lucideReact.Twitter
-  };
-  function UnorderedListIcon(props) {
-    const title = props.title || "format list bulleted";
-    return /* @__PURE__ */ React.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.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M7 5h14v2H7V5z", fill: "currentColor" }), /* @__PURE__ */ React.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.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"
+    }, [monaco]);
+    const items2 = Object.entries(languages).map(([key, label]) => ({
+      key,
+      label,
+      render: (item) => item.label
+    }));
+    const currentItem = React.useMemo(() => {
+      return items2.find((item) => item.key === language) ?? {
+        key: "",
+        label: "Plain Text"
+      };
+    }, [items2, language]);
+    React.useEffect(() => {
+      if (navigateAway) {
+        setNavigateAway(null);
+        switch (navigateAway) {
+          case "remove":
+            {
+              plateCommon.focusEditor(editor);
+              plateCommon.setNodes(
+                editor,
+                {
+                  type: "p",
+                  children: [{ text: "" }],
+                  lang: void 0,
+                  value: void 0
+                },
+                {
+                  match: (n) => {
+                    if (plateCommon.isElement(n) && n.type === element.type) {
+                      return true;
+                    }
+                  }
+                }
+              );
+            }
+            break;
+          case "insertNext":
+            {
+              plateCommon.insertNodes(
+                editor,
+                [
+                  {
+                    type: plateCommon.ELEMENT_DEFAULT,
+                    children: [{ text: "" }],
+                    lang: void 0,
+                    value: void 0
+                  }
+                ],
+                { select: true }
+              );
+              plateCommon.focusEditor(editor);
+            }
+            break;
+          case "up":
+            {
+              const path = plateCommon.findNodePath(editor, element);
+              if (!path) {
+                return;
+              }
+              const previousNodePath = plateCommon.getPointBefore(editor, path);
+              if (!previousNodePath) {
+                plateCommon.focusEditor(editor);
+                plateCommon.insertNodes(
+                  editor,
+                  [
+                    {
+                      type: plateCommon.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;
+              }
+              plateCommon.focusEditor(editor, previousNodePath);
+            }
+            break;
+          case "down": {
+            const path = plateCommon.findNodePath(editor, element);
+            if (!path) {
+              return;
+            }
+            const nextNodePath = plateCommon.getPointAfter(editor, path);
+            if (!nextNodePath) {
+              plateCommon.insertNodes(
+                editor,
+                [
+                  {
+                    type: plateCommon.ELEMENT_DEFAULT,
+                    children: [{ text: "" }],
+                    lang: void 0,
+                    value: void 0
+                  }
+                ],
+                { select: true }
+              );
+              plateCommon.focusEditor(editor);
+            } else {
+              plateCommon.focusEditor(editor, nextNodePath);
+            }
+            break;
+          }
         }
-      ), /* @__PURE__ */ React.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"
+      }
+    }, [navigateAway]);
+    function handleEditorDidMount(monacoEditor, monaco2) {
+      monacoEditorRef.current = monacoEditor;
+      monacoEditor.onDidContentSizeChange(() => {
+        setHeight(
+          monacoEditor.getContentHeight() > MINIMUM_HEIGHT ? monacoEditor.getContentHeight() : MINIMUM_HEIGHT
+        );
+        monacoEditor.layout();
+      });
+      plateCommon.setNodes(editor, { value: defaultValue, lang: language });
+      monacoEditor.addCommand(monaco2.KeyMod.Shift | monaco2.KeyCode.Enter, () => {
+        if (monacoEditor.hasTextFocus()) {
+          setNavigateAway("insertNext");
         }
-      ))
-    );
-  }
-  function HeadingIcon(props) {
-    const title = props.title || "format size";
-    return /* @__PURE__ */ React.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.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
-        "path",
-        {
-          d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z",
-          fill: "currentColor"
+      });
+      monacoEditor.onKeyDown((l) => {
+        if (l.code === "ArrowUp") {
+          const selection = monacoEditor.getSelection();
+          if (selection.endLineNumber === 1 && selection.startLineNumber === 1) {
+            setNavigateAway("up");
+          }
         }
-      ))
-    );
-  }
-  function OrderedListIcon(props) {
-    const title = props.title || "format list numbered";
-    return /* @__PURE__ */ React.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.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.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"
+        if (l.code === "ArrowDown") {
+          const selection = monacoEditor.getSelection();
+          const totalLines = monacoEditor.getModel().getLineCount();
+          if (selection.endLineNumber === totalLines && selection.startLineNumber === totalLines) {
+            setNavigateAway("down");
+          }
         }
-      ))
-    );
-  }
-  function QuoteIcon(props) {
-    const title = props.title || "format quote";
+        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.createElement(
-      "svg",
+      "div",
       {
-        height: "24",
-        className: "h-5 w-5",
-        width: "24",
-        viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
+        ...attributes,
+        className: "relative mb-2 mt-0.5 rounded-lg shadow-md p-2 border-gray-200 border"
       },
-      /* @__PURE__ */ React.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
-        "path",
+      /* @__PURE__ */ React.createElement("style", null, `.monaco-editor .editor-widget {
+          display: none !important;
+          visibility: hidden !important;
+        }`),
+      props.children,
+      /* @__PURE__ */ React.createElement("div", { contentEditable: false }, !restrictLanguage && /* @__PURE__ */ React.createElement("div", { className: "flex justify-between pb-2" }, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement(
+        Autocomplete,
         {
-          d: "M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z",
-          fill: "currentColor"
+          items: items2,
+          value: currentItem,
+          defaultQuery: "plaintext",
+          onChange: (item) => plateCommon.setNodes(editor, { lang: item.key })
         }
-      ))
-    );
-  }
-  function LinkIcon(props) {
-    const title = props.title || "insert link";
-    return /* @__PURE__ */ React.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.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
-        "path",
+      )), /* @__PURE__ */ React.createElement("div", { style: { height: `${height}px` } }, /* @__PURE__ */ React.createElement(
+        MonacoEditor,
         {
-          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"
+          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);
+            plateCommon.setNodes(editor, { value: value2, lang: language });
+          }
         }
-      ))
+      )))
     );
-  }
-  function CodeIcon(props) {
-    const title = props.title || "code";
-    return /* @__PURE__ */ React.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.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
-        "path",
+  };
+  const CodeBlockElement = cn$1.withRef(
+    ({ className, ...props }, ref) => {
+      const { element } = props;
+      const state = plateCodeBlock.useCodeBlockElementState({ element });
+      return /* @__PURE__ */ React.createElement(
+        plateCommon.PlateElement,
         {
-          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"
+          className: cn$1.cn("relative py-1", state.className, className),
+          ref,
+          ...props
+        },
+        /* @__PURE__ */ React.createElement(CodeBlock, { ...props })
+      );
+    }
+  );
+  const CodeLeaf = cn$1.withRef(
+    ({ children, className, ...props }, ref) => {
+      return /* @__PURE__ */ React.createElement(
+        plateCommon.PlateLeaf,
+        {
+          asChild: true,
+          className: cn$1.cn(
+            "whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm",
+            className
+          ),
+          ref,
+          ...props
+        },
+        /* @__PURE__ */ React.createElement("code", null, children)
+      );
+    }
+  );
+  const CodeLineElement = cn$1.withRef((props, ref) => /* @__PURE__ */ React.createElement(plateCommon.PlateElement, { ref, ...props }));
+  const CodeSyntaxLeaf = cn$1.withRef(
+    ({ children, ...props }, ref) => {
+      const { leaf } = props;
+      const { tokenProps } = plateCodeBlock.useCodeSyntaxLeaf({ leaf });
+      return /* @__PURE__ */ React.createElement(plateCommon.PlateLeaf, { ref, ...props }, /* @__PURE__ */ React.createElement("span", { ...tokenProps }, children));
+    }
+  );
+  const listVariants = classVarianceAuthority.cva("m-0 ps-6", {
+    variants: {
+      variant: {
+        ol: "list-decimal",
+        ul: "list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]"
+      }
+    }
+  });
+  const ListElementVariants = cn$1.withVariants(plateCommon.PlateElement, listVariants, [
+    "variant"
+  ]);
+  const ListElement = cn$1.withRef(
+    ({ children, variant = "ul", ...props }, ref) => {
+      const Component = variant;
+      return /* @__PURE__ */ React.createElement(ListElementVariants, { asChild: true, ref, variant, ...props }, /* @__PURE__ */ React.createElement(Component, null, children));
+    }
+  );
+  const ELEMENT_MERMAID = "mermaid";
+  const createMermaidPlugin = plateCommon.createPluginFactory({
+    isElement: true,
+    isVoid: true,
+    isInline: false,
+    key: ELEMENT_MERMAID
+  });
+  const MermaidElementWithRef = ({ config }) => {
+    const mermaidRef = React.useRef(null);
+    React.useEffect(() => {
+      if (mermaidRef.current) {
+        mermaid.initialize({ startOnLoad: true });
+        mermaid.init();
+      }
+    }, [config]);
+    return /* @__PURE__ */ React.createElement("div", { contentEditable: false, className: "border-border border-b" }, /* @__PURE__ */ React.createElement("div", { ref: mermaidRef }, /* @__PURE__ */ React.createElement("pre", { className: "mermaid not-tina-prose" }, config)));
+  };
+  const Bubble = ({ children }) => {
+    return /* @__PURE__ */ React.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.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 = cn$1.withRef(
+    ({ children, nodeProps, element, ...props }, ref) => {
+      const [mermaidConfig, setMermaidConfig] = React.useState(
+        element.value || DEFAULT_MERMAID_CONFIG
+      );
+      const [isEditing, setIsEditing] = React.useState(
+        mermaidConfig === DEFAULT_MERMAID_CONFIG || false
+      );
+      const [mermaidError, setMermaidError] = React.useState(null);
+      const node = {
+        type: ELEMENT_MERMAID,
+        value: mermaidConfig,
+        children: [{ type: "text", text: "" }]
+      };
+      React.useEffect(() => {
+        if (mermaid.parse(mermaidConfig)) {
+          setMermaidError(null);
         }
-      ))
-    );
-  }
-  function CodeBlockIcon(props) {
-    const title = props.title || "code-block";
-    return /* @__PURE__ */ React.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.createElement("title", null, title),
-      /* @__PURE__ */ React.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.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.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.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
-        "path",
+      }, [mermaidConfig]);
+      mermaid.parseError = (err) => {
+        setMermaidError(
+          String(err.message) || "An error occurred while parsing the diagram."
+        );
+      };
+      return /* @__PURE__ */ React.createElement(plateCommon.PlateElement, { element, ref, ...props }, /* @__PURE__ */ React.createElement("div", { className: "relative group" }, /* @__PURE__ */ React.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.createElement(Bubble, null, isEditing ? /* @__PURE__ */ React.createElement(
+        lucideReact.Eye,
         {
-          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"
+          className: "w-5 h-5 fill-white cursor-pointer",
+          onClick: () => {
+            setIsEditing(!isEditing);
+          }
         }
-      ))
-    );
-  }
-  function BoldIcon(props) {
-    const title = props.title || "format bold";
-    return /* @__PURE__ */ React.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.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
-        "path",
+      ) : /* @__PURE__ */ React.createElement(
+        lucideReact.SquarePen,
+        {
+          className: "w-5 h-5 fill-white cursor-pointer",
+          onClick: () => {
+            setIsEditing(!isEditing);
+          }
+        }
+      ))), isEditing ? /* @__PURE__ */ React.createElement(
+        CodeBlock,
         {
-          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"
+          children: "",
+          language: "yaml",
+          ...props,
+          element: node,
+          defaultValue: mermaidConfig,
+          onChangeCallback: (value) => setMermaidConfig(value)
         }
-      ))
-    );
-  }
-  function ItalicIcon(props) {
-    const title = props.title || "format italic";
+      ) : /* @__PURE__ */ React.createElement(MermaidElementWithRef, { config: mermaidConfig })), children, /* @__PURE__ */ React.createElement(ErrorMsg, { error: mermaidError }));
+    }
+  );
+  const RawMarkdown = () => {
     return /* @__PURE__ */ React.createElement(
       "svg",
       {
+        stroke: "currentColor",
+        fill: "currentColor",
+        strokeWidth: 0,
+        role: "img",
         className: "h-5 w-5",
-        height: "24",
-        width: "24",
         viewBox: "0 0 24 24",
+        height: "1em",
+        width: "1em",
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ React.createElement("title", null, title),
-      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
-        "path",
-        {
-          d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4h-8z",
-          fill: "currentColor"
-        }
-      ))
+      /* @__PURE__ */ React.createElement("title", null),
+      /* @__PURE__ */ React.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" })
     );
-  }
-  function PlusIcon({ className = "" }) {
-    return /* @__PURE__ */ React.createElement(
-      "svg",
+  };
+  const MermaidIcon = () => /* @__PURE__ */ React.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.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.createElement(
+      "path",
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: `h-4 w-4 ${className}`,
-        viewBox: "0 0 20 20",
-        fill: "currentColor"
-      },
-      /* @__PURE__ */ React.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 = React.createContext(
-    null
+        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 defaultFilter = ({ keywords = [], value }, search) => [value, ...keywords].some((keyword) => plateCombobox.filterWords(keyword, search));
-  const InlineCombobox = ({
-    children,
-    element,
-    filter = defaultFilter,
-    hideWhenNoValue = false,
-    setValue: setValueProp,
-    showTrigger = true,
-    trigger,
-    value: valueProp
-  }) => {
-    const editor = plateCommon.useEditorRef();
-    const inputRef = React.useRef(null);
-    const cursorState = plateCombobox.useHTMLInputCursorState(inputRef);
-    const [valueState, setValueState] = React.useState("");
-    const hasValueProp = valueProp !== void 0;
-    const value = hasValueProp ? valueProp : valueState;
-    const setValue = React.useCallback(
-      (newValue) => {
-        setValueProp == null ? void 0 : setValueProp(newValue);
-        if (!hasValueProp) {
-          setValueState(newValue);
-        }
-      },
-      [setValueProp, hasValueProp]
-    );
-    const [insertPoint, setInsertPoint] = React.useState(null);
-    React.useEffect(() => {
-      const path = plateCommon.findNodePath(editor, element);
-      if (!path)
-        return;
-      const point = plateCommon.getPointBefore(editor, path);
-      if (!point)
-        return;
-      const pointRef = plateCommon.createPointRef(editor, point);
-      setInsertPoint(pointRef);
-      return () => {
-        pointRef.unref();
-      };
-    }, [editor, element]);
-    const { props: inputProps, removeInput } = plateCombobox.useComboboxInput({
-      cancelInputOnBlur: false,
-      cursorState,
-      onCancelInput: (cause) => {
-        if (cause !== "backspace") {
-          plateCommon.insertText(editor, trigger + value, {
-            at: (insertPoint == null ? void 0 : insertPoint.current) ?? void 0
-          });
-        }
-        if (cause === "arrowLeft" || cause === "arrowRight") {
-          plateCommon.moveSelection(editor, {
-            distance: 1,
-            reverse: cause === "arrowLeft"
-          });
-        }
+  const borderAll = (props) => /* @__PURE__ */ React.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.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.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.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.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.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.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.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.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.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.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.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 = classVarianceAuthority.cva("", {
+    variants: {
+      variant: {
+        toolbar: "size-5",
+        menuItem: "mr-2 size-5"
       },
-      ref: inputRef
-    });
-    const [hasEmpty, setHasEmpty] = React.useState(false);
-    const contextValue = React.useMemo(
-      () => ({
-        filter,
-        inputProps,
-        inputRef,
-        removeInput,
-        setHasEmpty,
-        showTrigger,
-        trigger
-      }),
-      [
-        trigger,
-        showTrigger,
-        filter,
-        inputRef,
-        inputProps,
-        removeInput,
-        setHasEmpty
-      ]
-    );
-    const store = react.useComboboxStore({
-      setValue: (newValue) => React.startTransition(() => setValue(newValue))
-    });
-    const items2 = store.useState("items");
-    React.useEffect(() => {
-      if (!store.getState().activeId) {
-        store.setActiveId(store.first());
+      size: {
+        sm: "mr-2 size-4",
+        md: "mr-2 size-6"
+      }
+    },
+    defaultVariants: {}
+  });
+  const DoubleColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ React.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"
       }
-    }, [items2, store]);
-    return /* @__PURE__ */ React.createElement("span", { contentEditable: false }, /* @__PURE__ */ React.createElement(
-      react.ComboboxProvider,
+    )
+  );
+  const ThreeColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
       {
-        open: (items2.length > 0 || hasEmpty) && (!hideWhenNoValue || value.length > 0),
-        store
-      },
-      /* @__PURE__ */ React.createElement(InlineComboboxContext.Provider, { value: contextValue }, children)
-    ));
-  };
-  const InlineComboboxInput = React.forwardRef(({ className, ...props }, propRef) => {
-    const {
-      inputProps,
-      inputRef: contextRef,
-      showTrigger,
-      trigger
-    } = React.useContext(InlineComboboxContext);
-    const store = react.useComboboxContext();
-    const value = store.useState("value");
-    const ref = plateCommon.useComposedRef(propRef, contextRef);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, showTrigger && trigger, /* @__PURE__ */ React.createElement("span", { className: "relative min-h-[1lh]" }, /* @__PURE__ */ React.createElement(
-      "span",
+        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.createElement(
+    "svg",
+    {
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
       {
-        "aria-hidden": "true",
-        className: "invisible overflow-hidden text-nowrap"
-      },
-      value || "​"
-    ), /* @__PURE__ */ React.createElement(
-      react.Combobox,
+        clipRule: "evenodd",
+        d: "M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z",
+        fill: "#595E6F",
+        fillRule: "evenodd"
+      }
+    )
+  );
+  const LeftSideDoubleColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
       {
-        autoSelect: true,
-        className: cn$1.cn(
-          "absolute left-0 top-0 size-full bg-transparent outline-none",
-          className
-        ),
-        ref,
-        value,
-        ...inputProps,
-        ...props
+        clipRule: "evenodd",
+        d: "M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z",
+        fill: "#595E6F",
+        fillRule: "evenodd"
       }
-    )));
-  });
-  InlineComboboxInput.displayName = "InlineComboboxInput";
-  const InlineComboboxContent = ({
-    className,
-    ...props
-  }) => {
-    return /* @__PURE__ */ React.createElement(react.Portal, null, /* @__PURE__ */ React.createElement(
-      react.ComboboxPopover,
+    )
+  );
+  const DoubleSideDoubleColumnOutlined = (props) => /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
       {
-        className: cn$1.cn(
-          "z-[9999999] max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-white shadow-md",
-          className
-        ),
-        ...props
+        clipRule: "evenodd",
+        d: "M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z",
+        fill: "#595E6F",
+        fillRule: "evenodd"
       }
-    ));
-  };
-  const comboboxItemVariants = classVarianceAuthority.cva(
-    "relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+    )
+  );
+  const Overflow = (props) => /* @__PURE__ */ React.createElement(
+    "svg",
     {
-      defaultVariants: {
-        interactive: true
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "h-5 w-5",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+      }
+    )
+  );
+  const Icons = {
+    add: lucideReact.Plus,
+    alignCenter: lucideReact.AlignCenter,
+    alignJustify: lucideReact.AlignJustify,
+    alignLeft: lucideReact.AlignLeft,
+    alignRight: lucideReact.AlignRight,
+    arrowDown: lucideReact.ChevronDown,
+    bg: lucideReact.PaintBucket,
+    blockquote: lucideReact.Quote,
+    // bold: Bold,
+    overflow: Overflow,
+    borderAll,
+    borderBottom,
+    borderLeft,
+    borderNone,
+    borderRight,
+    borderTop,
+    check: lucideReact.Check,
+    chevronRight: lucideReact.ChevronRight,
+    chevronsUpDown: lucideReact.ChevronsUpDown,
+    clear: lucideReact.X,
+    close: lucideReact.X,
+    // code: Code2,
+    paint: lucideReact.PaintBucket,
+    codeblock: lucideReact.FileCode,
+    color: lucideReact.Baseline,
+    column: lucideReact.RectangleVertical,
+    combine: lucideReact.Combine,
+    ungroup: lucideReact.Ungroup,
+    comment: lucideReact.MessageSquare,
+    commentAdd: lucideReact.MessageSquarePlus,
+    delete: lucideReact.Trash,
+    dragHandle: lucideReact.GripVertical,
+    editing: lucideReact.Edit2,
+    emoji: lucideReact.Smile,
+    externalLink: lucideReact.ExternalLink,
+    h1: lucideReact.Heading1,
+    h2: lucideReact.Heading2,
+    h3: lucideReact.Heading3,
+    h4: lucideReact.Heading4,
+    h5: lucideReact.Heading5,
+    h6: lucideReact.Heading6,
+    // image: Image,
+    indent: lucideReact.Indent,
+    // italic: Italic,
+    kbd: lucideReact.Keyboard,
+    lineHeight: lucideReact.WrapText,
+    // link: Link2,
+    minus: lucideReact.Minus,
+    mermaid: MermaidIcon,
+    more: lucideReact.MoreHorizontal,
+    // ol: ListOrdered,
+    outdent: lucideReact.Outdent,
+    paragraph: lucideReact.Pilcrow,
+    refresh: lucideReact.RotateCcw,
+    row: lucideReact.RectangleHorizontal,
+    search: lucideReact.Search,
+    settings: lucideReact.Settings,
+    strikethrough: lucideReact.Strikethrough,
+    subscript: lucideReact.Subscript,
+    superscript: lucideReact.Superscript,
+    table: lucideReact.Table,
+    text: lucideReact.Text,
+    trash: lucideReact.Trash,
+    // ul: List,
+    underline: lucideReact.Underline,
+    unlink: lucideReact.Link2Off,
+    viewing: lucideReact.Eye,
+    doubleColumn: DoubleColumnOutlined,
+    doubleSideDoubleColumn: DoubleSideDoubleColumnOutlined,
+    threeColumn: ThreeColumnOutlined,
+    leftSideDoubleColumn: LeftSideDoubleColumnOutlined,
+    rightSideDoubleColumn: RightSideDoubleColumnOutlined,
+    heading: HeadingIcon,
+    link: LinkIcon,
+    quote: QuoteIcon,
+    image: ImageIcon,
+    ul: UnorderedListIcon,
+    ol: OrderedListIcon,
+    code: CodeIcon,
+    codeBlock: CodeBlockIcon,
+    bold: BoldIcon,
+    italic: ItalicIcon,
+    raw: RawMarkdown,
+    // www
+    gitHub: (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 438.549 438.549", ...props }, /* @__PURE__ */ React.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.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.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: lucideReact.Moon,
+    sun: lucideReact.SunMedium,
+    twitter: lucideReact.Twitter
+  };
+  function UnorderedListIcon(props) {
+    const title = props.title || "format list bulleted";
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        className: "h-5 w-5",
+        height: "24",
+        width: "24",
+        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.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement("path", { d: "M7 5h14v2H7V5z", fill: "currentColor" }), /* @__PURE__ */ React.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"
         }
-      }
-    }
-  );
-  const InlineComboboxItem = ({
-    className,
-    keywords,
-    onClick,
-    ...props
-  }) => {
-    const { value } = props;
-    const { filter, removeInput } = React.useContext(InlineComboboxContext);
-    const store = react.useComboboxContext();
-    const search = filter && store.useState("value");
-    const visible = React.useMemo(
-      () => !filter || filter({ keywords, value }, search),
-      [filter, value, keywords, search]
+      ), /* @__PURE__ */ React.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.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"
+        }
+      ))
     );
-    if (!visible)
-      return null;
+  }
+  function HeadingIcon(props) {
+    const title = props.title || "format size";
     return /* @__PURE__ */ React.createElement(
-      react.ComboboxItem,
+      "svg",
       {
-        className: cn$1.cn(comboboxItemVariants(), className),
-        onClick: (event) => {
-          removeInput(true);
-          onClick == null ? void 0 : onClick(event);
-        },
-        ...props
-      }
+        height: "24",
+        width: "24",
+        className: "h-5 w-5",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ React.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z",
+          fill: "currentColor"
+        }
+      ))
     );
-  };
-  const InlineComboboxEmpty = ({
-    children,
-    className
-  }) => {
-    const { setHasEmpty } = React.useContext(InlineComboboxContext);
-    const store = react.useComboboxContext();
-    const items2 = store.useState("items");
-    React.useEffect(() => {
-      setHasEmpty(true);
-      return () => {
-        setHasEmpty(false);
-      };
-    }, [setHasEmpty]);
-    if (items2.length > 0)
-      return null;
+  }
+  function OrderedListIcon(props) {
+    const title = props.title || "format list numbered";
     return /* @__PURE__ */ React.createElement(
-      "div",
+      "svg",
       {
-        className: cn$1.cn(comboboxItemVariants({ interactive: false }), className)
+        className: "h-5 w-5",
+        height: "24",
+        width: "24",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg"
       },
-      children
+      /* @__PURE__ */ React.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.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 rules = [
-    {
-      icon: Icons.h1,
-      onSelect: (editor) => {
-        plateCommon.toggleNodeType(editor, { activeType: plateHeading.ELEMENT_H1 });
-      },
-      value: "Heading 1"
-    },
-    {
-      icon: Icons.h2,
-      onSelect: (editor) => {
-        plateCommon.toggleNodeType(editor, { activeType: plateHeading.ELEMENT_H2 });
-      },
-      value: "Heading 2"
-    },
-    {
-      icon: Icons.h3,
-      onSelect: (editor) => {
-        plateCommon.toggleNodeType(editor, { activeType: plateHeading.ELEMENT_H3 });
-      },
-      value: "Heading 3"
-    },
-    {
-      icon: Icons.ul,
-      keywords: ["ul", "unordered list"],
-      onSelect: (editor) => {
-        plate.toggleList(editor, { type: plate.ELEMENT_UL });
+  }
+  function QuoteIcon(props) {
+    const title = props.title || "format quote";
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        height: "24",
+        className: "h-5 w-5",
+        width: "24",
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg"
       },
-      value: "Bulleted list"
-    },
-    {
-      icon: Icons.ol,
-      keywords: ["ol", "ordered list"],
-      onSelect: (editor) => {
-        plate.toggleList(editor, { type: plate.ELEMENT_OL });
+      /* @__PURE__ */ React.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.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.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 = cn$1.withRef(
-    ({ className, ...props }, ref) => {
-      const { children, editor, element } = props;
-      return /* @__PURE__ */ React.createElement(
-        plateCommon.PlateElement,
+      /* @__PURE__ */ React.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
+        "path",
         {
-          as: "span",
-          "data-slate-value": element.value,
-          ref,
-          ...props
-        },
-        /* @__PURE__ */ React.createElement(InlineCombobox, { element, trigger: "/" }, /* @__PURE__ */ React.createElement(InlineComboboxInput, null), /* @__PURE__ */ React.createElement(InlineComboboxContent, null, /* @__PURE__ */ React.createElement(InlineComboboxEmpty, null, "No matching commands found"), rules.map(({ icon: Icon, keywords, onSelect, value }) => /* @__PURE__ */ React.createElement(
-          InlineComboboxItem,
-          {
-            key: value,
-            keywords,
-            onClick: () => onSelect(editor),
-            value
-          },
-          /* @__PURE__ */ React.createElement(Icon, { "aria-hidden": true, className: "mr-2 size-4" }),
-          value
-        )))),
-        children
-      );
-    }
-  );
-  const listVariants = classVarianceAuthority.cva("m-0 ps-6", {
-    variants: {
-      variant: {
-        ol: "list-decimal",
-        ul: "list-disc [&_ul]:list-[circle] [&_ul_ul]:list-[square]"
-      }
-    }
-  });
-  const ListElementVariants = cn$1.withVariants(plateCommon.PlateElement, listVariants, [
-    "variant"
-  ]);
-  const ListElement = cn$1.withRef(
-    ({ children, variant = "ul", ...props }, ref) => {
-      const Component = variant;
-      return /* @__PURE__ */ React.createElement(ListElementVariants, { asChild: true, ref, variant, ...props }, /* @__PURE__ */ React.createElement(Component, null, children));
-    }
-  );
-  const BlockquoteElement = cn$1.withRef(
-    ({ children, className, ...props }, ref) => {
-      return /* @__PURE__ */ React.createElement(
-        plateCommon.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.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.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
+        "path",
         {
-          asChild: true,
-          className: cn$1.cn("my-1 border-l-2 pl-6 italic", className),
-          ref,
-          ...props
-        },
-        /* @__PURE__ */ React.createElement("blockquote", null, children)
-      );
-    }
-  );
-  const CodeLeaf = cn$1.withRef(
-    ({ children, className, ...props }, ref) => {
-      return /* @__PURE__ */ React.createElement(
-        plateCommon.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.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.createElement("title", null, title),
+      /* @__PURE__ */ React.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.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.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.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.createElement(
+        "path",
         {
-          asChild: true,
-          className: cn$1.cn(
-            "whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm",
-            className
-          ),
-          ref,
-          ...props
-        },
-        /* @__PURE__ */ React.createElement("code", null, children)
-      );
-    }
-  );
-  const CodeLineElement = cn$1.withRef((props, ref) => /* @__PURE__ */ React.createElement(plateCommon.PlateElement, { ref, ...props }));
-  const CodeSyntaxLeaf = cn$1.withRef(
-    ({ children, ...props }, ref) => {
-      const { leaf } = props;
-      const { tokenProps } = plateCodeBlock.useCodeSyntaxLeaf({ leaf });
-      return /* @__PURE__ */ React.createElement(plateCommon.PlateLeaf, { ref, ...props }, /* @__PURE__ */ React.createElement("span", { ...tokenProps }, children));
-    }
-  );
-  function ChevronDownIcon(props, svgRef) {
-    return /* @__PURE__ */ React__namespace.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__namespace.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__namespace.forwardRef(ChevronDownIcon);
-  const ChevronDownIcon$1 = ForwardRef;
-  const Autocomplete = ({
-    value,
-    onChange,
-    defaultQuery,
-    items: items2
-  }) => {
-    const [query, setQuery] = React.useState(defaultQuery ?? "");
-    const filteredItems = React.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.createElement(
-      react$1.Combobox,
+      "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.createElement("div", { className: "mt-1" }, /* @__PURE__ */ React.createElement("div", { className: "relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md sm:text-sm" }, /* @__PURE__ */ React.createElement(
-        react$1.ComboboxInput,
+      /* @__PURE__ */ React.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.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.createElement(react$1.ComboboxButton, { className: "absolute inset-y-0 right-0 flex items-center pr-2" }, /* @__PURE__ */ React.createElement(
-        ChevronDownIcon$1,
+      ))
+    );
+  }
+  function ItalicIcon(props) {
+    const title = props.title || "format italic";
+    return /* @__PURE__ */ React.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.createElement("title", null, title),
+      /* @__PURE__ */ React.createElement("g", { fill: "none" }, /* @__PURE__ */ React.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.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: `h-4 w-4 ${className}`,
+        viewBox: "0 0 20 20",
+        fill: "currentColor"
+      },
       /* @__PURE__ */ React.createElement(
-        react$1.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.createElement(react$1.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.createElement(react$1.ComboboxOption, { key: item.key, value: item }, ({ focus }) => /* @__PURE__ */ React.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"
+        }
       )
     );
-  };
-  MonacoEditor.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 = React.createContext(
+    null
+  );
+  const defaultFilter = ({ keywords = [], value }, search) => [value, ...keywords].some((keyword) => plateCombobox.filterWords(keyword, search));
+  const InlineCombobox = ({
+    children,
+    element,
+    filter = defaultFilter,
+    hideWhenNoValue = false,
+    setValue: setValueProp,
+    showTrigger = true,
+    trigger,
+    value: valueProp
+  }) => {
+    const editor = plateCommon.useEditorRef();
+    const inputRef = React.useRef(null);
+    const cursorState = plateCombobox.useHTMLInputCursorState(inputRef);
+    const [valueState, setValueState] = React.useState("");
+    const hasValueProp = valueProp !== void 0;
+    const value = hasValueProp ? valueProp : valueState;
+    const setValue = React.useCallback(
+      (newValue) => {
+        setValueProp == null ? void 0 : setValueProp(newValue);
+        if (!hasValueProp) {
+          setValueState(newValue);
+        }
+      },
+      [setValueProp, hasValueProp]
+    );
+    const [insertPoint, setInsertPoint] = React.useState(null);
+    React.useEffect(() => {
+      const path = plateCommon.findNodePath(editor, element);
+      if (!path)
+        return;
+      const point = plateCommon.getPointBefore(editor, path);
+      if (!point)
+        return;
+      const pointRef = plateCommon.createPointRef(editor, point);
+      setInsertPoint(pointRef);
+      return () => {
+        pointRef.unref();
+      };
+    }, [editor, element]);
+    const { props: inputProps, removeInput } = plateCombobox.useComboboxInput({
+      cancelInputOnBlur: false,
+      cursorState,
+      onCancelInput: (cause) => {
+        if (cause !== "backspace") {
+          plateCommon.insertText(editor, trigger + value, {
+            at: (insertPoint == null ? void 0 : insertPoint.current) ?? void 0
+          });
+        }
+        if (cause === "arrowLeft" || cause === "arrowRight") {
+          plateCommon.moveSelection(editor, {
+            distance: 1,
+            reverse: cause === "arrowLeft"
+          });
+        }
+      },
+      ref: inputRef
+    });
+    const [hasEmpty, setHasEmpty] = React.useState(false);
+    const contextValue = React.useMemo(
+      () => ({
+        filter,
+        inputProps,
+        inputRef,
+        removeInput,
+        setHasEmpty,
+        showTrigger,
+        trigger
+      }),
+      [
+        trigger,
+        showTrigger,
+        filter,
+        inputRef,
+        inputProps,
+        removeInput,
+        setHasEmpty
+      ]
+    );
+    const store = react$1.useComboboxStore({
+      setValue: (newValue) => React.startTransition(() => setValue(newValue))
+    });
+    const items2 = store.useState("items");
+    React.useEffect(() => {
+      if (!store.getState().activeId) {
+        store.setActiveId(store.first());
       }
-    }
+    }, [items2, store]);
+    return /* @__PURE__ */ React.createElement("span", { contentEditable: false }, /* @__PURE__ */ React.createElement(
+      react$1.ComboboxProvider,
+      {
+        open: (items2.length > 0 || hasEmpty) && (!hideWhenNoValue || value.length > 0),
+        store
+      },
+      /* @__PURE__ */ React.createElement(InlineComboboxContext.Provider, { value: contextValue }, children)
+    ));
   };
-  const CodeBlock = ({
-    attributes,
-    editor,
-    element,
-    language: restrictLanguage,
+  const InlineComboboxInput = React.forwardRef(({ className, ...props }, propRef) => {
+    const {
+      inputProps,
+      inputRef: contextRef,
+      showTrigger,
+      trigger
+    } = React.useContext(InlineComboboxContext);
+    const store = react$1.useComboboxContext();
+    const value = store.useState("value");
+    const ref = plateCommon.useComposedRef(propRef, contextRef);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, showTrigger && trigger, /* @__PURE__ */ React.createElement("span", { className: "relative min-h-[1lh]" }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "invisible overflow-hidden text-nowrap"
+      },
+      value || "​"
+    ), /* @__PURE__ */ React.createElement(
+      react$1.Combobox,
+      {
+        autoSelect: true,
+        className: cn$1.cn(
+          "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.useState(null);
-    const monaco = MonacoEditor.useMonaco();
-    const monacoEditorRef = React.useRef(null);
-    const selected = slateReact.useSelected();
-    const [height, setHeight] = React.useState(28);
-    React.useEffect(() => {
-      if (selected && plateCommon.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.useMemo(() => uuid(), []);
-    const languages = React.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.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.useMemo(() => {
-      return items2.find((item) => item.key === language) ?? {
-        key: "",
-        label: "Plain Text"
-      };
-    }, [items2, language]);
-    React.useEffect(() => {
-      if (navigateAway) {
-        setNavigateAway(null);
-        switch (navigateAway) {
-          case "remove":
-            {
-              plateCommon.focusEditor(editor);
-              plateCommon.setNodes(
-                editor,
-                {
-                  type: "p",
-                  children: [{ text: "" }],
-                  lang: void 0,
-                  value: void 0
-                },
-                {
-                  match: (n) => {
-                    if (plateCommon.isElement(n) && n.type === element.type) {
-                      return true;
-                    }
-                  }
-                }
-              );
-            }
-            break;
-          case "insertNext":
-            {
-              plateCommon.insertNodes(
-                editor,
-                [
-                  {
-                    type: plateCommon.ELEMENT_DEFAULT,
-                    children: [{ text: "" }],
-                    lang: void 0,
-                    value: void 0
-                  }
-                ],
-                { select: true }
-              );
-              plateCommon.focusEditor(editor);
-            }
-            break;
-          case "up":
-            {
-              const path = plateCommon.findNodePath(editor, element);
-              if (!path) {
-                return;
-              }
-              const previousNodePath = plateCommon.getPointBefore(editor, path);
-              if (!previousNodePath) {
-                plateCommon.focusEditor(editor);
-                plateCommon.insertNodes(
-                  editor,
-                  [
-                    {
-                      type: plateCommon.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;
-              }
-              plateCommon.focusEditor(editor, previousNodePath);
-            }
-            break;
-          case "down": {
-            const path = plateCommon.findNodePath(editor, element);
-            if (!path) {
-              return;
-            }
-            const nextNodePath = plateCommon.getPointAfter(editor, path);
-            if (!nextNodePath) {
-              plateCommon.insertNodes(
-                editor,
-                [
-                  {
-                    type: plateCommon.ELEMENT_DEFAULT,
-                    children: [{ text: "" }],
-                    lang: void 0,
-                    value: void 0
-                  }
-                ],
-                { select: true }
-              );
-              plateCommon.focusEditor(editor);
-            } else {
-              plateCommon.focusEditor(editor, nextNodePath);
-            }
-            break;
-          }
-        }
+    return /* @__PURE__ */ React.createElement(react$1.Portal, null, /* @__PURE__ */ React.createElement(
+      react$1.ComboboxPopover,
+      {
+        className: cn$1.cn(
+          "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 = classVarianceAuthority.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 } = React.useContext(InlineComboboxContext);
+    const store = react$1.useComboboxContext();
+    const search = filter && store.useState("value");
+    const visible = React.useMemo(
+      () => !filter || filter({ keywords, value }, search),
+      [filter, value, keywords, search]
+    );
+    if (!visible)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      react$1.ComboboxItem,
+      {
+        className: cn$1.cn(comboboxItemVariants(), className),
+        onClick: (event) => {
+          removeInput(true);
+          onClick == null ? void 0 : onClick(event);
+        },
+        ...props
+      }
+    );
+  };
+  const InlineComboboxEmpty = ({
+    children,
+    className
+  }) => {
+    const { setHasEmpty } = React.useContext(InlineComboboxContext);
+    const store = react$1.useComboboxContext();
+    const items2 = store.useState("items");
+    React.useEffect(() => {
+      setHasEmpty(true);
+      return () => {
+        setHasEmpty(false);
+      };
+    }, [setHasEmpty]);
+    if (items2.length > 0)
+      return null;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        ...attributes,
-        className: "relative mb-2 mt-0.5 rounded-lg shadow-md p-2 border-gray-200 border"
+        className: cn$1.cn(comboboxItemVariants({ interactive: false }), className)
       },
-      /* @__PURE__ */ React.createElement("style", null, `.monaco-editor .editor-widget {
-          display: none !important;
-          visibility: hidden !important;
-        }`),
-      props.children,
-      /* @__PURE__ */ React.createElement("div", { contentEditable: false }, !restrictLanguage && /* @__PURE__ */ React.createElement("div", { className: "flex justify-between pb-2" }, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement(
-        Autocomplete,
+      children
+    );
+  };
+  const rules = [
+    {
+      icon: Icons.h1,
+      onSelect: (editor) => {
+        plateCommon.toggleNodeType(editor, { activeType: plateHeading.ELEMENT_H1 });
+      },
+      value: "Heading 1"
+    },
+    {
+      icon: Icons.h2,
+      onSelect: (editor) => {
+        plateCommon.toggleNodeType(editor, { activeType: plateHeading.ELEMENT_H2 });
+      },
+      value: "Heading 2"
+    },
+    {
+      icon: Icons.h3,
+      onSelect: (editor) => {
+        plateCommon.toggleNodeType(editor, { activeType: plateHeading.ELEMENT_H3 });
+      },
+      value: "Heading 3"
+    },
+    {
+      icon: Icons.ul,
+      keywords: ["ul", "unordered list"],
+      onSelect: (editor) => {
+        plate.toggleList(editor, { type: plate.ELEMENT_UL });
+      },
+      value: "Bulleted list"
+    },
+    {
+      icon: Icons.ol,
+      keywords: ["ol", "ordered list"],
+      onSelect: (editor) => {
+        plate.toggleList(editor, { type: plate.ELEMENT_OL });
+      },
+      value: "Numbered list"
+    }
+  ];
+  const SlashInputElement = cn$1.withRef(
+    ({ className, ...props }, ref) => {
+      const { children, editor, element } = props;
+      return /* @__PURE__ */ React.createElement(
+        plateCommon.PlateElement,
         {
-          items: items2,
-          value: currentItem,
-          defaultQuery: "plaintext",
-          onChange: (item) => plateCommon.setNodes(editor, { lang: item.key })
+          as: "span",
+          "data-slate-value": element.value,
+          ref,
+          ...props
+        },
+        /* @__PURE__ */ React.createElement(InlineCombobox, { element, trigger: "/" }, /* @__PURE__ */ React.createElement(InlineComboboxInput, null), /* @__PURE__ */ React.createElement(InlineComboboxContent, null, /* @__PURE__ */ React.createElement(InlineComboboxEmpty, null, "No matching commands found"), rules.map(({ icon: Icon, keywords, onSelect, value }) => /* @__PURE__ */ React.createElement(
+          InlineComboboxItem,
+          {
+            key: value,
+            keywords,
+            onClick: () => onSelect(editor),
+            value
+          },
+          /* @__PURE__ */ React.createElement(Icon, { "aria-hidden": true, className: "mr-2 size-4" }),
+          value
+        )))),
+        children
+      );
+    }
+  );
+  const TableCellElement = cn$1.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
+    } = plateTable.useTableCellElementState();
+    const { props: cellProps } = plateTable.useTableCellElement({ element: props.element });
+    const resizableState = plateTable.useTableCellElementResizableState({
+      colIndex,
+      colSpan,
+      rowIndex
+    });
+    const { bottomProps, hiddenLeft, leftProps, rightProps } = plateTable.useTableCellElementResizable(resizableState);
+    const Cell = isHeader ? "th" : "td";
+    return /* @__PURE__ */ React.createElement(
+      plateCommon.PlateElement,
+      {
+        asChild: true,
+        className: cn$1.cn(
+          "relative h-full overflow-visible border-none bg-background p-0",
+          hideBorder && "before:border-none",
+          element.background ? "bg-[--cellBackground]" : "bg-background",
+          !hideBorder && cn$1.cn(
+            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.cn(
+              ((_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.createElement("div", { style: { height: `${height}px` } }, /* @__PURE__ */ React.createElement(
-        MonacoEditor,
+      },
+      /* @__PURE__ */ React.createElement(Cell, null, /* @__PURE__ */ React.createElement(
+        "div",
         {
-          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) => {
-            plateCommon.setNodes(editor, { value: value2, lang: language });
+          className: "relative z-20 box-border h-full px-3 py-2",
+          style: {
+            minHeight: rowSize
+          }
+        },
+        children
+      ), !isSelectingCell && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "group absolute top-0 size-full select-none",
+          contentEditable: false,
+          suppressContentEditableWarning: true
+        },
+        !readOnly && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+          plateResizable.ResizeHandle,
+          {
+            ...rightProps,
+            className: "-top-3 right-[-5px] w-[10px]"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          plateResizable.ResizeHandle,
+          {
+            ...bottomProps,
+            className: "bottom-[-5px] h-[10px]"
+          }
+        ), !hiddenLeft && /* @__PURE__ */ React.createElement(
+          plateResizable.ResizeHandle,
+          {
+            ...leftProps,
+            className: "-top-3 left-[-5px] w-[10px]"
+          }
+        ), hovered && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn$1.cn(
+              "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
+              "right-[-1.5px]"
+            )
+          }
+        ), hoveredLeft && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn$1.cn(
+              "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
+              "left-[-1.5px]"
+            )
           }
-        }
-      )))
+        ))
+      ))
     );
-  };
-  const CodeBlockElement = cn$1.withRef(
-    ({ className, ...props }, ref) => {
-      const { element } = props;
-      const state = plateCodeBlock.useCodeBlockElementState({ element });
-      return /* @__PURE__ */ React.createElement(
-        plateCommon.PlateElement,
-        {
-          className: cn$1.cn("relative py-1", state.className, className),
-          ref,
-          ...props
-        },
-        /* @__PURE__ */ React.createElement(CodeBlock, { ...props })
-      );
-    }
-  );
+  });
+  TableCellElement.displayName = "TableCellElement";
+  const TableCellHeaderElement = cn$1.withProps(TableCellElement, {
+    isHeader: true
+  });
   const buttonVariants$1 = classVarianceAuthority.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",
     {
@@ -2520,117 +2756,6 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ React.createElement("tr", null, children)
     );
   });
-  const TableCellElement = cn$1.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
-    } = plateTable.useTableCellElementState();
-    const { props: cellProps } = plateTable.useTableCellElement({ element: props.element });
-    const resizableState = plateTable.useTableCellElementResizableState({
-      colIndex,
-      colSpan,
-      rowIndex
-    });
-    const { bottomProps, hiddenLeft, leftProps, rightProps } = plateTable.useTableCellElementResizable(resizableState);
-    const Cell = isHeader ? "th" : "td";
-    return /* @__PURE__ */ React.createElement(
-      plateCommon.PlateElement,
-      {
-        asChild: true,
-        className: cn$1.cn(
-          "relative h-full overflow-visible border-none bg-background p-0",
-          hideBorder && "before:border-none",
-          element.background ? "bg-[--cellBackground]" : "bg-background",
-          !hideBorder && cn$1.cn(
-            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.cn(
-              ((_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.createElement(Cell, null, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "relative z-20 box-border h-full px-3 py-2",
-          style: {
-            minHeight: rowSize
-          }
-        },
-        children
-      ), !isSelectingCell && /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "group absolute top-0 size-full select-none",
-          contentEditable: false,
-          suppressContentEditableWarning: true
-        },
-        !readOnly && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-          plateResizable.ResizeHandle,
-          {
-            ...rightProps,
-            className: "-top-3 right-[-5px] w-[10px]"
-          }
-        ), /* @__PURE__ */ React.createElement(
-          plateResizable.ResizeHandle,
-          {
-            ...bottomProps,
-            className: "bottom-[-5px] h-[10px]"
-          }
-        ), !hiddenLeft && /* @__PURE__ */ React.createElement(
-          plateResizable.ResizeHandle,
-          {
-            ...leftProps,
-            className: "-top-3 left-[-5px] w-[10px]"
-          }
-        ), hovered && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn$1.cn(
-              "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
-              "right-[-1.5px]"
-            )
-          }
-        ), hoveredLeft && /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn$1.cn(
-              "absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring",
-              "left-[-1.5px]"
-            )
-          }
-        ))
-      ))
-    );
-  });
-  TableCellElement.displayName = "TableCellElement";
-  const TableCellHeaderElement = cn$1.withProps(TableCellElement, {
-    isHeader: true
-  });
   const blockClasses = "mt-0.5";
   const headerClasses = "font-normal";
   const Components = () => {
@@ -2736,6 +2861,7 @@ var __publicField = (obj, key, value) => {
           }
         )
       ),
+      [ELEMENT_MERMAID]: MermaidElement,
       [plate.ELEMENT_BLOCKQUOTE]: BlockquoteElement,
       [plate.ELEMENT_CODE_BLOCK]: CodeBlockElement,
       [plate.ELEMENT_CODE_LINE]: CodeLineElement,
@@ -3230,7 +3356,9 @@ var __publicField = (obj, key, value) => {
                   {
                     type: "string",
                     label: "Caption",
-                    name: [templateName.replace(/\.props$/, ""), "caption"].join("."),
+                    name: [templateName.replace(/\.props$/, ""), "caption"].join(
+                      "."
+                    ),
                     component: "text"
                   }
                 ]
@@ -5615,7 +5743,7 @@ var __publicField = (obj, key, value) => {
         return template.label ? template.label.toLowerCase().includes(filter.toLowerCase()) || name.toLowerCase().includes(filter.toLowerCase()) : name.toLowerCase().includes(filter.toLowerCase());
       });
     }, [filter]);
-    return /* @__PURE__ */ React__namespace.createElement(react$1.Popover, null, ({ open: open2 }) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(react$1.PopoverButton, { as: "span" }, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(react.Popover, null, ({ open: open2 }) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(react.PopoverButton, { as: "span" }, /* @__PURE__ */ React__namespace.createElement(
       IconButton,
       {
         variant: open2 ? "secondary" : "primary",
@@ -5624,7 +5752,7 @@ var __publicField = (obj, key, value) => {
       },
       /* @__PURE__ */ React__namespace.createElement(AddIcon, { className: "w-5/6 h-auto" })
     )), /* @__PURE__ */ React__namespace.createElement("div", { className: "transform translate-y-full absolute -bottom-1 right-0 z-50" }, /* @__PURE__ */ React__namespace.createElement(
-      react$1.Transition,
+      react.Transition,
       {
         enter: "transition duration-150 ease-out",
         enterFrom: "transform opacity-0 -translate-y-2",
@@ -5633,7 +5761,7 @@ var __publicField = (obj, key, value) => {
         leaveFrom: "transform opacity-100 translate-y-0",
         leaveTo: "transform opacity-0 -translate-y-2"
       },
-      /* @__PURE__ */ React__namespace.createElement(react$1.PopoverPanel, { className: "relative overflow-hidden rounded-lg shadow-lg bg-white border border-gray-100" }, ({ close: close2 }) => /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto flex flex-col w-full h-full" }, showFilter && /* @__PURE__ */ React__namespace.createElement("div", { className: "sticky top-0 bg-gray-50 p-2 border-b border-gray-100 z-10" }, /* @__PURE__ */ React__namespace.createElement(
+      /* @__PURE__ */ React__namespace.createElement(react.PopoverPanel, { className: "relative overflow-hidden rounded-lg shadow-lg bg-white border border-gray-100" }, ({ close: close2 }) => /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto flex flex-col w-full h-full" }, showFilter && /* @__PURE__ */ React__namespace.createElement("div", { className: "sticky top-0 bg-gray-50 p-2 border-b border-gray-100 z-10" }, /* @__PURE__ */ React__namespace.createElement(
         "input",
         {
           type: "text",
@@ -5810,8 +5938,8 @@ var __publicField = (obj, key, value) => {
         onClick: () => setPickerIsOpen(!pickerIsOpen)
       },
       /* @__PURE__ */ React__namespace.createElement(AddIcon, { className: "w-5/6 h-auto" })
-    ), /* @__PURE__ */ React__namespace.createElement(FormPortal, null, ({ zIndexShift }) => /* @__PURE__ */ React__namespace.createElement(react$1.Transition, { show: pickerIsOpen }, /* @__PURE__ */ React__namespace.createElement(
-      react$1.TransitionChild,
+    ), /* @__PURE__ */ React__namespace.createElement(FormPortal, null, ({ zIndexShift }) => /* @__PURE__ */ React__namespace.createElement(react.Transition, { show: pickerIsOpen }, /* @__PURE__ */ React__namespace.createElement(
+      react.TransitionChild,
       {
         enter: "transform transition-all ease-out duration-200",
         enterFrom: "opacity-0 -translate-x-1/2",
@@ -5898,14 +6026,14 @@ var __publicField = (obj, key, value) => {
   };
   const BlockGroup = ({ category, templates, close: close2, isLast = false }) => {
     return /* @__PURE__ */ React__namespace.createElement(
-      react$1.Disclosure,
+      react.Disclosure,
       {
         defaultOpen: true,
         as: "div",
         className: `left-0 right-0 relative`
       },
       ({ open: open2 }) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-        react$1.DisclosureButton,
+        react.DisclosureButton,
         {
           className: `relative block group text-left w-full text-base font-bold tracking-wide py-2 truncate ${templates.length === 0 ? `pointer-events-none` : ``} ${!isLast && (!open2 || templates.length === 0) && `border-b border-gray-100`}`
         },
@@ -5923,7 +6051,7 @@ var __publicField = (obj, key, value) => {
           }
         )
       ), /* @__PURE__ */ React__namespace.createElement(
-        react$1.Transition,
+        react.Transition,
         {
           enter: "transition duration-100 ease-out",
           enterFrom: "transform scale-95 opacity-0",
@@ -5932,7 +6060,7 @@ var __publicField = (obj, key, value) => {
           leaveFrom: "transform scale-100 opacity-100",
           leaveTo: "transform scale-95 opacity-0"
         },
-        /* @__PURE__ */ React__namespace.createElement(react$1.DisclosurePanel, null, templates.length > 0 && /* @__PURE__ */ React__namespace.createElement(CardColumns, null, templates.map(([name, template], index) => /* @__PURE__ */ React__namespace.createElement(
+        /* @__PURE__ */ React__namespace.createElement(react.DisclosurePanel, null, templates.length > 0 && /* @__PURE__ */ React__namespace.createElement(CardColumns, null, templates.map(([name, template], index) => /* @__PURE__ */ React__namespace.createElement(
           BlockCard,
           {
             key: index,
@@ -9751,7 +9879,7 @@ var __publicField = (obj, key, value) => {
   const FormLists = (props) => {
     const cms = useCMS();
     return /* @__PURE__ */ React__namespace.createElement(
-      react$1.Transition,
+      react.Transition,
       {
         appear: true,
         show: true,
@@ -10180,7 +10308,7 @@ var __publicField = (obj, key, value) => {
       "Event Log"
     ));
   };
-  const version = "2.2.9";
+  const version = "2.3.0";
   const Nav = ({
     isLocalMode,
     className = "",
@@ -10234,8 +10362,8 @@ var __publicField = (obj, key, value) => {
         style: { maxWidth: `${sidebarWidth}px` },
         ...props
       },
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React__namespace.createElement(react$1.Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
-        react$1.MenuButton,
+      /* @__PURE__ */ React__namespace.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React__namespace.createElement(react.Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
+        react.MenuButton,
         {
           className: `group w-full px-6 py-3 gap-2 flex justify-between items-center transition-colors duration-150 ease-out ${open2 ? "bg-gray-50" : "bg-transparent"}`
         },
@@ -10258,7 +10386,7 @@ var __publicField = (obj, key, value) => {
           }
         )
       ), /* @__PURE__ */ React__namespace.createElement("div", { className: "transform translate-y-full absolute bottom-3 right-5 z-50" }, /* @__PURE__ */ React__namespace.createElement(
-        react$1.Transition,
+        react.Transition,
         {
           enter: "transition duration-150 ease-out",
           enterFrom: "transform opacity-0 -translate-y-2",
@@ -10267,7 +10395,7 @@ var __publicField = (obj, key, value) => {
           leaveFrom: "transform opacity-100 translate-y-0",
           leaveTo: "transform opacity-0 -translate-y-2"
         },
-        /* @__PURE__ */ React__namespace.createElement(react$1.MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement(react$1.MenuItem, null, /* @__PURE__ */ React__namespace.createElement(
+        /* @__PURE__ */ React__namespace.createElement(react.MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement(react.MenuItem, null, /* @__PURE__ */ React__namespace.createElement(
           "button",
           {
             className: `text-lg px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 hover:text-blue-400 hover:bg-gray-50 hover:opacity-100`,
@@ -10300,7 +10428,7 @@ var __publicField = (obj, key, value) => {
           },
           /* @__PURE__ */ React__namespace.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
           " Log Out"
-        )), /* @__PURE__ */ React__namespace.createElement(react$1.MenuItem, null, /* @__PURE__ */ React__namespace.createElement(
+        )), /* @__PURE__ */ React__namespace.createElement(react.MenuItem, null, /* @__PURE__ */ React__namespace.createElement(
           WrappedSyncStatus,
           {
             cms,
@@ -10646,8 +10774,8 @@ var __publicField = (obj, key, value) => {
           screen: activeScreen,
           close: () => setActiveView(null)
         }
-      )), /* @__PURE__ */ React__namespace.createElement(ResizeHandle, null)), renderMobileNav && /* @__PURE__ */ React__namespace.createElement(react$1.Transition, { show: menuIsOpen, as: "div" }, /* @__PURE__ */ React__namespace.createElement(
-        react$1.TransitionChild,
+      )), /* @__PURE__ */ React__namespace.createElement(ResizeHandle, null)), renderMobileNav && /* @__PURE__ */ React__namespace.createElement(react.Transition, { show: menuIsOpen, as: "div" }, /* @__PURE__ */ React__namespace.createElement(
+        react.TransitionChild,
         {
           enter: "transform transition-all ease-out duration-300",
           enterFrom: "opacity-0 -translate-x-full",
@@ -10712,7 +10840,7 @@ var __publicField = (obj, key, value) => {
           ))
         ))
       ), /* @__PURE__ */ React__namespace.createElement(
-        react$1.TransitionChild,
+        react.TransitionChild,
         {
           enter: "ease-out duration-300",
           enterFrom: "opacity-0",
@@ -13247,15 +13375,15 @@ var __publicField = (obj, key, value) => {
     );
   };
   const DotMenu = ({ onOpen, onRemove }) => {
-    return /* @__PURE__ */ React.createElement(react$1.Popover, { as: "span", className: "-ml-px relative block" }, /* @__PURE__ */ React.createElement(
-      react$1.PopoverButton,
+    return /* @__PURE__ */ React.createElement(react.Popover, { as: "span", className: "-ml-px relative block" }, /* @__PURE__ */ React.createElement(
+      react.PopoverButton,
       {
         as: "span",
         className: "cursor-pointer h-full relative inline-flex items-center px-1 py-0.5 rounded-r-md border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
       },
       /* @__PURE__ */ React.createElement(EllipsisIcon, { title: "Open options" })
     ), /* @__PURE__ */ React.createElement(
-      react$1.Transition,
+      react.Transition,
       {
         enter: "transition ease-out duration-100",
         enterFrom: "transform opacity-0 scale-95",
@@ -13264,7 +13392,7 @@ var __publicField = (obj, key, value) => {
         leaveFrom: "transform opacity-100 scale-100",
         leaveTo: "transform opacity-0 scale-95"
       },
-      /* @__PURE__ */ React.createElement(react$1.PopoverPanel, { className: "z-30 absolute origin-top-right right-0" }, /* @__PURE__ */ React.createElement("div", { className: "mt-2 -mr-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" }, /* @__PURE__ */ React.createElement("div", { className: "py-1" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(react.PopoverPanel, { className: "z-30 absolute origin-top-right right-0" }, /* @__PURE__ */ React.createElement("div", { className: "mt-2 -mr-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" }, /* @__PURE__ */ React.createElement("div", { className: "py-1" }, /* @__PURE__ */ React.createElement(
         "span",
         {
           onClick: onOpen,
@@ -13699,6 +13827,7 @@ var __publicField = (obj, key, value) => {
     "Unordered List",
     "Ordered List",
     "Quote",
+    "Mermaid",
     "Heading 1",
     "Heading 2",
     "Heading 3",
@@ -13898,7 +14027,7 @@ var __publicField = (obj, key, value) => {
     cn$1.withProps(TooltipPrimitive__namespace.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(Component) {
     return React.forwardRef(function ExtendComponent({ tooltip, tooltipContentProps, tooltipProps, ...props }, ref) {
@@ -14024,30 +14153,42 @@ var __publicField = (obj, key, value) => {
     Toolbar,
     "p-1 sticky left-0 top-0 z-50 w-full justify-between overflow-x-auto border border-border bg-background"
   );
-  const MarkToolbarButton = cn$1.withRef(({ clear, nodeType, ...rest }, ref) => {
-    const state = plateCommon.useMarkToolbarButtonState({ clear, nodeType });
-    const { props } = plateCommon.useMarkToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, ...props, ...rest });
-  });
-  const IndentListToolbarButton = cn$1.withRef(({ nodeType = plate.ELEMENT_UL }, ref) => {
-    const editor = plateCommon.useEditorState();
-    const state = plate.useListToolbarButtonState({ nodeType });
-    const { props } = plate.useListToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(
-      ToolbarButton,
-      {
-        ref,
-        tooltip: nodeType === plate.ELEMENT_UL ? "Bulleted List" : "Numbered List",
-        ...props,
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          plate.toggleList(editor, { type: nodeType });
+  const useResize = (ref, callback) => {
+    React.useEffect(() => {
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          callback(entry);
         }
-      },
-      nodeType === plate.ELEMENT_UL ? /* @__PURE__ */ React.createElement(Icons.ul, null) : /* @__PURE__ */ React.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 = React.createContext(void 0);
+  const ToolbarProvider = ({
+    tinaForm,
+    templates,
+    overrides,
+    children
+  }) => {
+    return /* @__PURE__ */ React.createElement(ToolbarContext.Provider, { value: { tinaForm, templates, overrides } }, children);
+  };
+  const useToolbarContext = () => {
+    const context = React.useContext(ToolbarContext);
+    if (!context) {
+      throw new Error("useToolbarContext must be used within a ToolbarProvider");
+    }
+    return context;
+  };
   const items$1 = [
     {
       description: "Paragraph",
@@ -14126,71 +14267,35 @@ var __publicField = (obj, key, value) => {
         tooltip: "Headings"
       },
       /* @__PURE__ */ React.createElement(SelectedItemIcon, { className: "size-5" }),
-      /* @__PURE__ */ React.createElement("span", { className: "hidden 2xl:flex" }, selectedItemLabel)
+      /* @__PURE__ */ React.createElement("span", { className: "@md/toolbar:flex hidden" }, selectedItemLabel)
     )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "start", className: "min-w-0" }, /* @__PURE__ */ React.createElement(
       DropdownMenuRadioGroup,
       {
-        className: "flex flex-col gap-0.5",
-        onValueChange: (type) => {
-          plateCommon.toggleNodeType(editor, { activeType: type });
-          plateCommon.collapseSelection(editor);
-          plateCommon.focusEditor(editor);
-        },
-        value
-      },
-      items$1.filter((item) => {
-        if (userInTable) {
-          return !unsupportedItemsInTable.has(item.label);
-        }
-        return true;
-      }).map(({ icon: Icon, label, value: itemValue }) => /* @__PURE__ */ React.createElement(
-        DropdownMenuRadioItem,
-        {
-          className: "min-w-[180px]",
-          key: itemValue,
-          value: itemValue
-        },
-        /* @__PURE__ */ React.createElement(Icon, { className: "mr-2 size-5" }),
-        label
-      ))
-    )));
-  }
-  const LinkToolbarButton = cn$1.withRef((rest, ref) => {
-    const state = plateLink.useLinkToolbarButtonState();
-    const { props } = plateLink.useLinkToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...props, ...rest }, /* @__PURE__ */ React.createElement(Icons.link, null));
-  });
-  const useBlockQuoteToolbarButtonState = () => {
-    const editor = plateCommon.useEditorState();
-    const isBlockActive = () => helpers.isNodeActive(editor, plateBlockQuote.ELEMENT_BLOCKQUOTE);
-    return {
-      pressed: isBlockActive()
-    };
-  };
-  const useBlockQuoteToolbarButton = (state) => {
-    const editor = plateCommon.useEditorState();
-    const onClick = () => {
-      plateCommon.toggleNodeType(editor, {
-        activeType: plateBlockQuote.ELEMENT_BLOCKQUOTE
-      });
-    };
-    const onMouseDown = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-    return {
-      props: {
-        onClick,
-        onMouseDown,
-        pressed: state.pressed
-      }
-    };
-  };
-  const QuoteToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
-    const state = useBlockQuoteToolbarButtonState();
-    const { props } = useBlockQuoteToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.quote, null));
-  });
+        className: "flex flex-col gap-0.5",
+        onValueChange: (type) => {
+          plateCommon.toggleNodeType(editor, { activeType: type });
+          plateCommon.collapseSelection(editor);
+          plateCommon.focusEditor(editor);
+        },
+        value
+      },
+      items$1.filter((item) => {
+        if (userInTable) {
+          return !unsupportedItemsInTable.has(item.label);
+        }
+        return true;
+      }).map(({ icon: Icon, label, value: itemValue }) => /* @__PURE__ */ React.createElement(
+        DropdownMenuRadioItem,
+        {
+          className: "min-w-[180px]",
+          key: itemValue,
+          value: itemValue
+        },
+        /* @__PURE__ */ React.createElement(Icon, { className: "mr-2 size-5" }),
+        label
+      ))
+    )));
+  }
   const useCodeBlockToolbarButtonState = () => {
     const editor = plateCommon.useEditorState();
     const isBlockActive = () => helpers.isNodeActive(editor, plateCodeBlock.ELEMENT_CODE_BLOCK);
@@ -14252,100 +14357,67 @@ var __publicField = (obj, key, value) => {
     const { props } = useImageToolbarButton(state);
     return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.image, null));
   });
-  const useRawMarkdownToolbarButton = () => {
-    const { setRawMode } = useEditorContext();
+  const IndentListToolbarButton = cn$1.withRef(({ nodeType = plate.ELEMENT_UL }, ref) => {
+    const editor = plateCommon.useEditorState();
+    const state = plate.useListToolbarButtonState({ nodeType });
+    const { props } = plate.useListToolbarButton(state);
+    return /* @__PURE__ */ React.createElement(
+      ToolbarButton,
+      {
+        ref,
+        tooltip: nodeType === plate.ELEMENT_UL ? "Bulleted List" : "Numbered List",
+        ...props,
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          plate.toggleList(editor, { type: nodeType });
+        }
+      },
+      nodeType === plate.ELEMENT_UL ? /* @__PURE__ */ React.createElement(Icons.ul, null) : /* @__PURE__ */ React.createElement(Icons.ol, null)
+    );
+  });
+  const LinkToolbarButton = cn$1.withRef((rest, ref) => {
+    const state = plateLink.useLinkToolbarButtonState();
+    const { props } = plateLink.useLinkToolbarButton(state);
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...props, ...rest }, /* @__PURE__ */ React.createElement(Icons.link, null));
+  });
+  const MarkToolbarButton = cn$1.withRef(({ clear, nodeType, ...rest }, ref) => {
+    const state = plateCommon.useMarkToolbarButtonState({ clear, nodeType });
+    const { props } = plateCommon.useMarkToolbarButton(state);
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, ...props, ...rest });
+  });
+  const useMermaidToolbarButtonState = () => {
+    const editor = plateCommon.useEditorState();
+    const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_MERMAID);
+    return {
+      pressed: isBlockActive()
+    };
+  };
+  const useMermaidToolbarButton = (state) => {
+    const editor = plateCommon.useEditorState();
+    const onClick = () => {
+      plateCommon.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 = cn$1.withRef(({ clear, ...rest }, ref) => {
-    const { props } = useRawMarkdownToolbarButton();
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.raw, null));
+  const MermaidToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
+    const state = useMermaidToolbarButtonState();
+    const { props } = useMermaidToolbarButton(state);
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Mermaid", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.mermaid, null));
   });
-  const ToolbarContext = React.createContext(void 0);
-  const ToolbarProvider = ({
-    tinaForm,
-    templates,
-    overrides,
-    children
-  }) => {
-    return /* @__PURE__ */ React.createElement(ToolbarContext.Provider, { value: { tinaForm, templates, overrides } }, children);
-  };
-  const useToolbarContext = () => {
-    const context = React.useContext(ToolbarContext);
-    if (!context) {
-      throw new Error("useToolbarContext must be used within a ToolbarProvider");
-    }
-    return context;
-  };
-  function TemplatesToolbarButton() {
-    const { templates } = useToolbarContext();
-    const showEmbed = templates.length > 0;
-    const editor = plateCommon.useEditorState();
-    if (!showEmbed) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(EmbedButton, { templates, editor });
-  }
-  const EmbedButton = ({ editor, templates }) => {
-    const [open2, setOpen] = React.useState(false);
-    const [filteredTemplates, setFilteredTemplates] = React.useState(templates);
-    const filterChange = (e) => {
-      const filterText = e.target.value.toLowerCase();
-      setFilteredTemplates(
-        templates.filter(
-          (template) => template.name.toLowerCase().includes(filterText)
-        )
-      );
-    };
-    return /* @__PURE__ */ React.createElement(DropdownMenu, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React.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.createElement("span", { className: "flex" }, "Embed"), /* @__PURE__ */ React.createElement(
-      PlusIcon,
-      {
-        className: `origin-center transition-all ease-out duration-150 ${open2 ? "rotate-45" : ""}`
-      }
-    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { className: "max-h-48 overflow-y-auto" }, templates.length > 10 && /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "text",
-        placeholder: "Filter templates...",
-        className: "w-full p-2 border border-gray-300 rounded-md",
-        onChange: filterChange
-      }
-    ), /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null), filteredTemplates.map((template) => /* @__PURE__ */ React.createElement(
-      DropdownMenuItem,
-      {
-        key: template.name,
-        onMouseDown: (e) => {
-          e.preventDefault();
-          close();
-          insertMDX(editor, template);
-        },
-        className: ""
-      },
-      template.label || template.name
-    ))));
-  };
-  const ICON_WIDTH = 32;
-  const EMBED_ICON_WIDTH = 78;
-  const useResize = (ref, callback) => {
-    React.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
@@ -14363,6 +14435,53 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ React.createElement(Icons.overflow, { className: "size-5" })
     )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "start", className: "min-w-0 flex flex-grow" }, children));
   }
+  const useBlockQuoteToolbarButtonState = () => {
+    const editor = plateCommon.useEditorState();
+    const isBlockActive = () => helpers.isNodeActive(editor, plateBlockQuote.ELEMENT_BLOCKQUOTE);
+    return {
+      pressed: isBlockActive()
+    };
+  };
+  const useBlockQuoteToolbarButton = (state) => {
+    const editor = plateCommon.useEditorState();
+    const onClick = () => {
+      plateCommon.toggleNodeType(editor, {
+        activeType: plateBlockQuote.ELEMENT_BLOCKQUOTE
+      });
+    };
+    const onMouseDown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    return {
+      props: {
+        onClick,
+        onMouseDown,
+        pressed: state.pressed
+      }
+    };
+  };
+  const QuoteToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
+    const state = useBlockQuoteToolbarButtonState();
+    const { props } = useBlockQuoteToolbarButton(state);
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.quote, null));
+  });
+  const useRawMarkdownToolbarButton = () => {
+    const { setRawMode } = useEditorContext();
+    const onMouseDown = (e) => {
+      setRawMode(true);
+    };
+    return {
+      props: {
+        onMouseDown,
+        pressed: false
+      }
+    };
+  };
+  const RawMarkdownToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
+    const { props } = useRawMarkdownToolbarButton();
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.raw, null));
+  });
   function TableDropdownMenu(props) {
     const tableSelected = plateCommon.useEditorSelector(
       (editor2) => plateCommon.someNode(editor2, { match: { type: plateTable.ELEMENT_TABLE } }),
@@ -14465,78 +14584,156 @@ var __publicField = (obj, key, value) => {
       )))
     ));
   }
+  function TemplatesToolbarButton() {
+    const { templates } = useToolbarContext();
+    const editor = plateCommon.useEditorState();
+    return /* @__PURE__ */ React.createElement(EmbedButton, { templates, editor });
+  }
+  const EmbedButton = ({ editor, templates }) => {
+    const [open2, setOpen] = React.useState(false);
+    const [filteredTemplates, setFilteredTemplates] = React.useState(templates);
+    const filterChange = (e) => {
+      const filterText = e.target.value.toLowerCase();
+      setFilteredTemplates(
+        templates.filter(
+          (template) => template.name.toLowerCase().includes(filterText)
+        )
+      );
+    };
+    return /* @__PURE__ */ React.createElement(DropdownMenu, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React.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.createElement("span", { className: "flex" }, "Embed"), /* @__PURE__ */ React.createElement(
+      PlusIcon,
+      {
+        className: `origin-center transition-all ease-out duration-150 ${open2 ? "rotate-45" : ""}`
+      }
+    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { className: "max-h-48 overflow-y-auto" }, templates.length > 10 && /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "Filter templates...",
+        className: "w-full p-2 border border-gray-300 rounded-md",
+        onChange: filterChange
+      }
+    ), /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null), filteredTemplates.map((template) => /* @__PURE__ */ React.createElement(
+      DropdownMenuItem,
+      {
+        key: template.name,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          close();
+          insertMDX(editor, template);
+        },
+        className: ""
+      },
+      template.label || template.name
+    ))));
+  };
   const toolbarItems = {
     heading: {
-      label: "Headings",
+      label: HEADING_LABEL,
+      width: (paragraphIconExists) => paragraphIconExists ? HEADING_ICON_WITH_TEXT : HEADING_ICON_ONLY,
+      // Dynamically handle width based on paragraph icon
       Component: /* @__PURE__ */ React.createElement(ToolbarGroup, { noSeparator: true }, /* @__PURE__ */ React.createElement(HeadingsMenu, null))
     },
     link: {
       label: "Link",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(LinkToolbarButton, null)
     },
     image: {
       label: "Image",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(ImageToolbarButton, null)
     },
     quote: {
       label: "Quote",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(QuoteToolbarButton, { tooltip: "Quote Quote (⌘+⇧+.)" })
     },
     ul: {
       label: "Unordered List",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(IndentListToolbarButton, { nodeType: plate.ELEMENT_UL })
     },
     ol: {
       label: "Ordered List",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(IndentListToolbarButton, { nodeType: plate.ELEMENT_OL })
     },
     bold: {
       label: "Bold",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Bold (⌘+B)", nodeType: plate.MARK_BOLD }, /* @__PURE__ */ React.createElement(Icons.bold, null))
     },
     italic: {
       label: "Italic",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Italic (⌘+I)", nodeType: plate.MARK_ITALIC }, /* @__PURE__ */ React.createElement(Icons.italic, null))
     },
     code: {
       label: "Code",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Code (⌘+E)", nodeType: plate.MARK_CODE }, /* @__PURE__ */ React.createElement(Icons.code, null))
     },
     codeBlock: {
       label: "Code Block",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(CodeBlockToolbarButton, null)
     },
+    mermaid: {
+      label: "Mermaid",
+      width: () => STANDARD_ICON_WIDTH,
+      Component: /* @__PURE__ */ React.createElement(MermaidToolbarButton, null)
+    },
     table: {
       label: "Table",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(TableDropdownMenu, null)
     },
     raw: {
       label: "Raw Markdown",
+      width: () => STANDARD_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(RawMarkdownToolbarButton, null)
     },
     embed: {
       label: "Templates",
+      width: () => EMBED_ICON_WIDTH,
       Component: /* @__PURE__ */ React.createElement(TemplatesToolbarButton, null)
     }
   };
   function FixedToolbarButtons() {
     const toolbarRef = React.useRef(null);
     const [itemsShown, setItemsShown] = React.useState(11);
-    const { overrides } = useToolbarContext();
-    useResize(toolbarRef, (entry) => {
-      const width = entry.target.getBoundingClientRect().width;
-      const itemsShown2 = (width - EMBED_ICON_WIDTH) / ICON_WIDTH;
-      setItemsShown(Math.floor(itemsShown2));
-    });
-    let toolbarItemsArray = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+    const { overrides, templates } = useToolbarContext();
+    const showEmbedButton = templates.length > 0;
+    let items2 = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+    if (!showEmbedButton) {
+      items2 = items2.filter((item) => item.label !== toolbarItems.embed.label);
+    }
     const editorState = plateCommon.useEditorState();
-    const userInTable = helpers.isNodeActive(editorState, plateTable.ELEMENT_TABLE);
+    const userInTable = helpers.isNodeActive(editorState, plate.ELEMENT_TABLE);
     if (userInTable) {
-      toolbarItemsArray = toolbarItemsArray.filter(
-        (item) => !unsupportedItemsInTable.has(item.label)
-      );
+      items2 = items2.filter((item) => !unsupportedItemsInTable.has(item.label));
     }
-    return /* @__PURE__ */ React.createElement("div", { className: "w-full overflow-hidden", ref: toolbarRef }, /* @__PURE__ */ React.createElement(
+    useResize(toolbarRef, (entry) => {
+      const width = entry.target.getBoundingClientRect().width;
+      const headingButton = items2.find((item) => item.label === HEADING_LABEL);
+      const headingWidth = headingButton ? headingButton.width(width > CONTAINER_MD_BREAKPOINT) : 0;
+      const availableWidth = width - headingWidth - FLOAT_BUTTON_WIDTH;
+      const { itemFitCount } = items2.reduce(
+        (acc, item) => {
+          if (item.label !== HEADING_LABEL && acc.totalItemsWidth + item.width() <= availableWidth) {
+            return {
+              totalItemsWidth: acc.totalItemsWidth + item.width(),
+              itemFitCount: acc.itemFitCount + 1
+            };
+          }
+          return acc;
+        },
+        { totalItemsWidth: 0, itemFitCount: 1 }
+      );
+      setItemsShown(itemFitCount);
+    });
+    return /* @__PURE__ */ React.createElement("div", { className: "w-full overflow-hidden @container/toolbar", ref: toolbarRef }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "flex",
@@ -14544,7 +14741,7 @@ var __publicField = (obj, key, value) => {
           transform: "translateX(calc(-1px))"
         }
       },
-      /* @__PURE__ */ React.createElement(React.Fragment, null, toolbarItemsArray.slice(0, itemsShown).map((item, _) => /* @__PURE__ */ React.createElement(React.Fragment, { key: item.label }, item.Component)), toolbarItemsArray.length > itemsShown && /* @__PURE__ */ React.createElement(OverflowMenu, null, toolbarItemsArray.slice(itemsShown).flatMap((c) => /* @__PURE__ */ React.createElement(React.Fragment, { key: c.label }, c.Component))))
+      /* @__PURE__ */ React.createElement(React.Fragment, null, items2.slice(0, itemsShown).map((item) => /* @__PURE__ */ React.createElement(React.Fragment, { key: item.label }, item.Component)), items2.length > itemsShown && /* @__PURE__ */ React.createElement(OverflowMenu, null, items2.slice(itemsShown).flatMap((c) => /* @__PURE__ */ React.createElement(React.Fragment, { key: c.label }, c.Component))))
     ));
   }
   const FloatingToolbar = cn$1.withRef(({ children, state, ...props }, componentRef) => {
@@ -14874,6 +15071,7 @@ var __publicField = (obj, key, value) => {
           createMdxBlockPlugin(),
           createMdxInlinePlugin(),
           createImgPlugin(),
+          createMermaidPlugin(),
           createInvalidMarkdownPlugin(),
           plateLink.createLinkPlugin({
             options: {
@@ -30996,8 +31194,8 @@ This will work when developing locally but NOT when deployed to production.
           }
         )
       }
-    ), !renderDesktopNav && /* @__PURE__ */ React.createElement(react$1.Transition, { show: menuIsOpen }, /* @__PURE__ */ React.createElement(
-      react$1.TransitionChild,
+    ), !renderDesktopNav && /* @__PURE__ */ React.createElement(react.Transition, { show: menuIsOpen }, /* @__PURE__ */ React.createElement(
+      react.TransitionChild,
       {
         enter: "transform transition-all ease-out duration-300",
         enterFrom: "opacity-0 -translate-x-full",
@@ -31066,7 +31264,7 @@ This will work when developing locally but NOT when deployed to production.
         ))
       ))
     ), /* @__PURE__ */ React.createElement(
-      react$1.TransitionChild,
+      react.TransitionChild,
       {
         enter: "ease-out duration-300",
         enterFrom: "opacity-0",
@@ -31520,8 +31718,8 @@ This will work when developing locally but NOT when deployed to production.
     folder,
     collectionName
   }) => {
-    return /* @__PURE__ */ React.createElement(react$1.Menu, { as: "div", className: "relative inline-block text-left" }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(react$1.MenuButton, { className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React.createElement(
-      react$1.Transition,
+    return /* @__PURE__ */ React.createElement(react.Menu, { as: "div", className: "relative inline-block text-left" }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(react.MenuButton, { className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React.createElement(
+      react.Transition,
       {
         enter: "transition ease-out duration-100",
         enterFrom: "transform opacity-0 scale-95",
@@ -31530,7 +31728,7 @@ This will work when developing locally but NOT when deployed to production.
         leaveFrom: "transform opacity-100 scale-100",
         leaveTo: "transform opacity-0 scale-95"
       },
-      /* @__PURE__ */ React.createElement(react$1.MenuItems, { className: "origin-top-right absolute right-0 mt-2 z-menu w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" }, /* @__PURE__ */ React.createElement("div", { className: "py-1" }, templates.map((template) => /* @__PURE__ */ React.createElement(react$1.MenuItem, { key: `${template.label}-${template.name}` }, ({ focus }) => /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(react.MenuItems, { className: "origin-top-right absolute right-0 mt-2 z-menu w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" }, /* @__PURE__ */ React.createElement("div", { className: "py-1" }, templates.map((template) => /* @__PURE__ */ React.createElement(react.MenuItem, { key: `${template.label}-${template.name}` }, ({ focus }) => /* @__PURE__ */ React.createElement(
         reactRouterDom.Link,
         {
           to: `/${folder.fullyQualifiedName ? [