tinacms 0.0.0-c8b1d84-20241003015733 → 0.0.0-e0ddb8c-20241004065742

package/dist/client.js

@@ -26,7 +26,7 @@
         return;
       }
       try {
-        if (this.cacheDir && window === void 0 && typeof require !== "undefined") {
+        if (this.cacheDir && typeof window === "undefined" && typeof require !== "undefined") {
           const { NodeCache: NodeCache2 } = await Promise.resolve().then(() => nodeCache);
           this.cache = await NodeCache2(this.cacheDir);
         }

package/dist/client.mjs

@@ -23,7 +23,7 @@ class TinaClient {
       return;
     }
     try {
-      if (this.cacheDir && window === void 0 && typeof require !== "undefined") {
+      if (this.cacheDir && typeof window === "undefined" && typeof require !== "undefined") {
         const { NodeCache } = await import("./node-cache-7fa2452c.mjs");
         this.cache = await NodeCache(this.cacheDir);
       }

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("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("@radix-ui/react-slot"), 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-separator"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@radix-ui/react-dropdown-menu"), 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", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "@radix-ui/react-slot", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@radix-ui/react-dropdown-menu", "@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));
-})(this, function(exports2, zod, React, reactDom, plate, slateReact, plateSlashCommand, cn$1, plateCommon, plateHeading, classVarianceAuthority, lucideReact, react, plateCombobox, plateCodeBlock, MonacoEditor, react$1, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, PopoverPrimitive, pkg$1, pkg, dropzone, reactSlot, clsx, tailwindMerge, cmdk, isHotkey, slate, get, moment, dateFns, plateLink, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, plateParagraph, DropdownMenuPrimitive, 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/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("mermaid"), 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("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("@radix-ui/react-slot"), 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-separator"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@radix-ui/react-dropdown-menu"), 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", "mermaid", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "@radix-ui/react-slot", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@radix-ui/react-dropdown-menu", "@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));
+})(this, function(exports2, zod, React, reactDom, plate, slateReact, plateSlashCommand, cn$1, plateCommon, plateHeading, classVarianceAuthority, lucideReact, react, plateCombobox, plateCodeBlock, MonacoEditor, react$1, mermaid, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, PopoverPrimitive, pkg$1, pkg, dropzone, reactSlot, clsx, tailwindMerge, cmdk, isHotkey, slate, get, moment, dateFns, plateLink, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, plateParagraph, DropdownMenuPrimitive, 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) => {
@@ -909,6 +909,29 @@ var __publicField = (obj, key, value) => {
       /* @__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" })
     );
   };
+  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",
+      {
+        d: "M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z",
+        fill: "white",
+        fillRule: "nonzero"
+      }
+    )
+  );
   const borderAll = (props) => /* @__PURE__ */ React.createElement(
     "svg",
     {
@@ -1149,6 +1172,7 @@ var __publicField = (obj, key, value) => {
     clear: lucideReact.X,
     close: lucideReact.X,
     // code: Code2,
+    paint: lucideReact.PaintBucket,
     codeblock: lucideReact.FileCode,
     color: lucideReact.Baseline,
     column: lucideReact.RectangleVertical,
@@ -1174,6 +1198,7 @@ var __publicField = (obj, key, value) => {
     lineHeight: lucideReact.WrapText,
     // link: Link2,
     minus: lucideReact.Minus,
+    mermaid: MermaidIcon,
     more: lucideReact.MoreHorizontal,
     // ol: ListOrdered,
     outdent: lucideReact.Outdent,
@@ -1895,18 +1920,21 @@ var __publicField = (obj, key, value) => {
       }
     }
   };
+  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(28);
+    const [height, setHeight] = React.useState(MINIMUM_HEIGHT);
     React.useEffect(() => {
       if (selected && plateCommon.isCollapsed(editor.selection)) {
         retryFocus(monacoEditorRef);
@@ -2050,9 +2078,12 @@ var __publicField = (obj, key, value) => {
     function handleEditorDidMount(monacoEditor, monaco2) {
       monacoEditorRef.current = monacoEditor;
       monacoEditor.onDidContentSizeChange(() => {
-        setHeight(monacoEditor.getContentHeight());
+        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");
@@ -2134,6 +2165,7 @@ var __publicField = (obj, key, value) => {
           language: String(language),
           value: String(element.value),
           onChange: (value2) => {
+            onChangeCallback == null ? void 0 : onChangeCallback(value2);
             plateCommon.setNodes(editor, { value: value2, lang: language });
           }
         }
@@ -2155,6 +2187,110 @@ var __publicField = (obj, key, value) => {
       );
     }
   );
+  const ELEMENT_MERMAID = "mermaid";
+  const createMermaidPlugin = plateCommon.createPluginFactory({
+    isElement: true,
+    isVoid: true,
+    isInline: false,
+    key: ELEMENT_MERMAID
+  });
+  const useMermaidElement = () => {
+    const mermaidRef = React.useRef(null);
+    React.useEffect(() => {
+      if (mermaidRef.current) {
+        mermaid.initialize({ startOnLoad: true });
+        mermaid.run();
+      }
+    }, []);
+    return {
+      mermaidRef
+    };
+  };
+  const LightModeComponent = ({ onToggleMode }) => {
+    const [isLightMode, setIsLightMode] = React.useState(true);
+    const handleToggle = (e) => {
+      e.preventDefault();
+      setIsLightMode((prevMode) => !prevMode);
+    };
+    React.useEffect(() => {
+      const modeClass = isLightMode ? "not-tina-prose" : "";
+      if (onToggleMode) {
+        onToggleMode(modeClass);
+      }
+    }, [isLightMode, onToggleMode]);
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: handleToggle,
+        className: "flex items-center w-5 h-5 cursor-pointer"
+      },
+      isLightMode ? /* @__PURE__ */ React.createElement(lucideReact.Moon, { className: "fill-white" }) : /* @__PURE__ */ React.createElement(lucideReact.SunMoon, { className: "fill-white" })
+    ));
+  };
+  const MermaidElementWithRef = ({ config, lightMode }) => {
+    const { mermaidRef } = useMermaidElement();
+    return /* @__PURE__ */ React.createElement("div", { contentEditable: false, className: "border-border border-b" }, /* @__PURE__ */ React.createElement("div", { ref: mermaidRef }, /* @__PURE__ */ React.createElement("pre", { className: `${lightMode} mermaid` }, 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 DEFAULT_MERMAID_CONFIG = `%% This won't render without implementing a rendering engine <TODO: Link to tina docs>
+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 [lightModeClass, setLightModeClass] = React.useState("");
+      const node = {
+        type: ELEMENT_MERMAID,
+        value: mermaidConfig,
+        children: [{ type: "text", text: "" }]
+      };
+      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,
+        {
+          className: "w-5 h-5 fill-white cursor-pointer",
+          onClick: () => {
+            setIsEditing(!isEditing);
+          }
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        lucideReact.SquarePen,
+        {
+          className: "w-5 h-5 fill-white cursor-pointer",
+          onClick: () => {
+            setIsEditing(!isEditing);
+          }
+        }
+      )), /* @__PURE__ */ React.createElement(Bubble, null, /* @__PURE__ */ React.createElement(LightModeComponent, { onToggleMode: (v) => setLightModeClass(v) }))), isEditing ? /* @__PURE__ */ React.createElement(
+        CodeBlock,
+        {
+          children: "",
+          language: "yaml",
+          ...props,
+          element: node,
+          defaultValue: mermaidConfig,
+          onChangeCallback: (value) => setMermaidConfig(value)
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        MermaidElementWithRef,
+        {
+          config: mermaidConfig,
+          lightMode: lightModeClass
+        }
+      ), children));
+    }
+  );
   const blockClasses = "mt-0.5";
   const headerClasses = "font-normal";
   const Components = () => {
@@ -2260,6 +2396,7 @@ var __publicField = (obj, key, value) => {
           }
         )
       ),
+      [ELEMENT_MERMAID]: MermaidElement,
       [plate.ELEMENT_BLOCKQUOTE]: BlockquoteElement,
       [plate.ELEMENT_CODE_BLOCK]: CodeBlockElement,
       [plate.ELEMENT_CODE_LINE]: CodeLineElement,
@@ -2750,7 +2887,9 @@ var __publicField = (obj, key, value) => {
                   {
                     type: "string",
                     label: "Caption",
-                    name: [templateName.replace(/\.props$/, ""), "caption"].join("."),
+                    name: [templateName.replace(/\.props$/, ""), "caption"].join(
+                      "."
+                    ),
                     component: "text"
                   }
                 ]
@@ -13424,7 +13563,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) {
@@ -13850,6 +13989,38 @@ var __publicField = (obj, key, value) => {
     const { props } = useCodeBlockToolbarButton(state);
     return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.codeBlock, null));
   });
+  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) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    return {
+      props: {
+        onClick,
+        onMouseDown,
+        pressed: state.pressed
+      }
+    };
+  };
+  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 useImageToolbarButtonState = () => {
     const editor = plateCommon.useEditorState();
     const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_IMG);
@@ -14034,6 +14205,10 @@ var __publicField = (obj, key, value) => {
       label: "Code Block",
       Component: /* @__PURE__ */ React.createElement(CodeBlockToolbarButton, null)
     },
+    mermaid: {
+      label: "Mermaid",
+      Component: /* @__PURE__ */ React.createElement(MermaidToolbarButton, null)
+    },
     raw: {
       label: "Raw Markdown",
       Component: /* @__PURE__ */ React.createElement(RawMarkdownToolbarButton, null)
@@ -14446,6 +14621,7 @@ var __publicField = (obj, key, value) => {
           createMdxBlockPlugin(),
           createMdxInlinePlugin(),
           createImgPlugin(),
+          createMermaidPlugin(),
           createInvalidMarkdownPlugin(),
           plateLink.createLinkPlugin({
             options: {

package/dist/index.mjs

@@ -12,15 +12,16 @@ import { toggleList, ELEMENT_UL, ELEMENT_OL, ELEMENT_H1 as ELEMENT_H1$1, ELEMENT
 import { useSelected, ReactEditor } from "slate-react";
 import { ELEMENT_SLASH_INPUT, createSlashPlugin } from "@udecode/plate-slash-command";
 import { cn as cn$1, withRef, withVariants, withProps, withCn, createPrimitiveElement } from "@udecode/cn";
-import { useComposedRef, useEditorRef, findNodePath, getPointBefore, createPointRef, insertText, moveSelection, PlateElement, toggleNodeType, PlateLeaf, isCollapsed, getPointAfter, insertNodes, ELEMENT_DEFAULT, focusEditor, setNodes, isElement, createPluginFactory, normalizeEditor, getBlockAbove, queryNode, getParentNode, isType, someNode, isSelectionAtBlockStart, setElements, insertNode, getPluginType, isBlock, isBlockAboveEmpty, findNode, PlateContent, useMarkToolbarButtonState, useMarkToolbarButton, useEditorState, useEditorSelector, getNodeEntries, collapseSelection, usePlateSelectors, useEventEditorSelectors, PortalBody, useFormInputProps, createPlugins, Plate } from "@udecode/plate-common";
+import { useComposedRef, useEditorRef, findNodePath, getPointBefore, createPointRef, insertText, moveSelection, PlateElement, toggleNodeType, PlateLeaf, isCollapsed, getPointAfter, insertNodes, ELEMENT_DEFAULT, focusEditor, setNodes, isElement, createPluginFactory, normalizeEditor, getBlockAbove, queryNode, getParentNode, isType, someNode, isSelectionAtBlockStart, setElements, insertNode, getPluginType, isBlock, isBlockAboveEmpty, findNode, PlateContent, useMarkToolbarButtonState, useMarkToolbarButton, useEditorState, useEditorSelector, getNodeEntries, collapseSelection, insertEmptyElement, usePlateSelectors, useEventEditorSelectors, PortalBody, useFormInputProps, createPlugins, Plate } from "@udecode/plate-common";
 import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4 as ELEMENT_H4$1, ELEMENT_H5 as ELEMENT_H5$1, ELEMENT_H6 as ELEMENT_H6$1 } from "@udecode/plate-heading";
 import { cva } from "class-variance-authority";
-import { Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, ChevronDown, PaintBucket, Quote, Check, ChevronRight, ChevronsUpDown, X, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Search, Settings, Strikethrough, Subscript, Superscript, Table, Text, Underline, Link2Off, Eye, Moon, SunMedium, Twitter } from "lucide-react";
+import { Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, ChevronDown, PaintBucket, Quote, Check, ChevronRight, ChevronsUpDown, X, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Search, Settings, Strikethrough, Subscript, Superscript, Table, Text, Underline, Link2Off, Eye, Moon, SunMedium, Twitter, SquarePen, SunMoon } from "lucide-react";
 import { useComboboxContext, Combobox, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { useHTMLInputCursorState, useComboboxInput, filterWords } from "@udecode/plate-combobox";
 import { useCodeSyntaxLeaf, useCodeBlockElementState, ELEMENT_CODE_BLOCK as ELEMENT_CODE_BLOCK$1 } from "@udecode/plate-code-block";
 import MonacoEditor, { loader, useMonaco } from "@monaco-editor/react";
 import { Combobox as Combobox$1, ComboboxInput, ComboboxButton, Transition, ComboboxOptions, ComboboxOption, Popover as Popover$2, PopoverButton, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
+import mermaid from "mermaid";
 import arrayMutators from "final-form-arrays";
 import setFieldData from "final-form-set-field-data";
 import { FORM_ERROR, createForm, getIn } from "final-form";
@@ -932,6 +933,29 @@ const RawMarkdown = () => {
     /* @__PURE__ */ React__default.createElement("path", { d: "M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z" })
   );
 };
+const MermaidIcon = () => /* @__PURE__ */ React__default.createElement(
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 491 491",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    strokeLinejoin: "round",
+    strokeMiterlimit: 2
+  },
+  /* @__PURE__ */ React__default.createElement("path", { d: "M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" }),
+  /* @__PURE__ */ React__default.createElement(
+    "path",
+    {
+      d: "M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z",
+      fill: "white",
+      fillRule: "nonzero"
+    }
+  )
+);
 const borderAll = (props) => /* @__PURE__ */ React__default.createElement(
   "svg",
   {
@@ -1172,6 +1196,7 @@ const Icons = {
   clear: X,
   close: X,
   // code: Code2,
+  paint: PaintBucket,
   codeblock: FileCode,
   color: Baseline,
   column: RectangleVertical,
@@ -1197,6 +1222,7 @@ const Icons = {
   lineHeight: WrapText,
   // link: Link2,
   minus: Minus,
+  mermaid: MermaidIcon,
   more: MoreHorizontal,
   // ol: ListOrdered,
   outdent: Outdent,
@@ -1918,18 +1944,21 @@ const retryFocus = (ref) => {
     }
   }
 };
+const MINIMUM_HEIGHT = 75;
 const CodeBlock = ({
   attributes,
   editor,
   element,
   language: restrictLanguage,
+  onChangeCallback,
+  defaultValue,
   ...props
 }) => {
   const [navigateAway, setNavigateAway] = React__default.useState(null);
   const monaco = useMonaco();
   const monacoEditorRef = React__default.useRef(null);
   const selected = useSelected();
-  const [height, setHeight] = React__default.useState(28);
+  const [height, setHeight] = React__default.useState(MINIMUM_HEIGHT);
   React__default.useEffect(() => {
     if (selected && isCollapsed(editor.selection)) {
       retryFocus(monacoEditorRef);
@@ -2073,9 +2102,12 @@ const CodeBlock = ({
   function handleEditorDidMount(monacoEditor, monaco2) {
     monacoEditorRef.current = monacoEditor;
     monacoEditor.onDidContentSizeChange(() => {
-      setHeight(monacoEditor.getContentHeight());
+      setHeight(
+        monacoEditor.getContentHeight() > MINIMUM_HEIGHT ? monacoEditor.getContentHeight() : MINIMUM_HEIGHT
+      );
       monacoEditor.layout();
     });
+    setNodes(editor, { value: defaultValue, lang: language });
     monacoEditor.addCommand(monaco2.KeyMod.Shift | monaco2.KeyCode.Enter, () => {
       if (monacoEditor.hasTextFocus()) {
         setNavigateAway("insertNext");
@@ -2157,6 +2189,7 @@ const CodeBlock = ({
         language: String(language),
         value: String(element.value),
         onChange: (value2) => {
+          onChangeCallback == null ? void 0 : onChangeCallback(value2);
           setNodes(editor, { value: value2, lang: language });
         }
       }
@@ -2178,6 +2211,110 @@ const CodeBlockElement = withRef(
     );
   }
 );
+const ELEMENT_MERMAID = "mermaid";
+const createMermaidPlugin = createPluginFactory({
+  isElement: true,
+  isVoid: true,
+  isInline: false,
+  key: ELEMENT_MERMAID
+});
+const useMermaidElement = () => {
+  const mermaidRef = useRef(null);
+  useEffect(() => {
+    if (mermaidRef.current) {
+      mermaid.initialize({ startOnLoad: true });
+      mermaid.run();
+    }
+  }, []);
+  return {
+    mermaidRef
+  };
+};
+const LightModeComponent = ({ onToggleMode }) => {
+  const [isLightMode, setIsLightMode] = useState(true);
+  const handleToggle = (e) => {
+    e.preventDefault();
+    setIsLightMode((prevMode) => !prevMode);
+  };
+  useEffect(() => {
+    const modeClass = isLightMode ? "not-tina-prose" : "";
+    if (onToggleMode) {
+      onToggleMode(modeClass);
+    }
+  }, [isLightMode, onToggleMode]);
+  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleToggle,
+      className: "flex items-center w-5 h-5 cursor-pointer"
+    },
+    isLightMode ? /* @__PURE__ */ React__default.createElement(Moon, { className: "fill-white" }) : /* @__PURE__ */ React__default.createElement(SunMoon, { className: "fill-white" })
+  ));
+};
+const MermaidElementWithRef = ({ config, lightMode }) => {
+  const { mermaidRef } = useMermaidElement();
+  return /* @__PURE__ */ React__default.createElement("div", { contentEditable: false, className: "border-border border-b" }, /* @__PURE__ */ React__default.createElement("div", { ref: mermaidRef }, /* @__PURE__ */ React__default.createElement("pre", { className: `${lightMode} mermaid` }, config)));
+};
+const Bubble = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "bg-blue-600 rounded-full p-2 transition-transform duration-200 ease-in-out hover:scale-110" }, children);
+};
+const DEFAULT_MERMAID_CONFIG = `%% This won't render without implementing a rendering engine <TODO: Link to tina docs>
+flowchart TD
+    id1(this is an example flow diagram) 
+    --> id2(modify me to see changes!)
+    id2 
+    --> id3(Click the top button to preview the changes)
+    --> id4(Learn about mermaid diagrams @ mermaid.js.org)`;
+const MermaidElement = withRef(
+  ({ children, nodeProps, element, ...props }, ref) => {
+    const [mermaidConfig, setMermaidConfig] = React__default.useState(
+      element.value || DEFAULT_MERMAID_CONFIG
+    );
+    const [isEditing, setIsEditing] = React__default.useState(
+      mermaidConfig === DEFAULT_MERMAID_CONFIG || false
+    );
+    const [lightModeClass, setLightModeClass] = React__default.useState("");
+    const node = {
+      type: ELEMENT_MERMAID,
+      value: mermaidConfig,
+      children: [{ type: "text", text: "" }]
+    };
+    return /* @__PURE__ */ React__default.createElement(PlateElement, { element, ref, ...props }, /* @__PURE__ */ React__default.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__default.createElement("div", { className: "absolute top-2 right-2 z-10 space-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-in-out" }, /* @__PURE__ */ React__default.createElement(Bubble, null, isEditing ? /* @__PURE__ */ React__default.createElement(
+      Eye,
+      {
+        className: "w-5 h-5 fill-white cursor-pointer",
+        onClick: () => {
+          setIsEditing(!isEditing);
+        }
+      }
+    ) : /* @__PURE__ */ React__default.createElement(
+      SquarePen,
+      {
+        className: "w-5 h-5 fill-white cursor-pointer",
+        onClick: () => {
+          setIsEditing(!isEditing);
+        }
+      }
+    )), /* @__PURE__ */ React__default.createElement(Bubble, null, /* @__PURE__ */ React__default.createElement(LightModeComponent, { onToggleMode: (v) => setLightModeClass(v) }))), isEditing ? /* @__PURE__ */ React__default.createElement(
+      CodeBlock,
+      {
+        children: "",
+        language: "yaml",
+        ...props,
+        element: node,
+        defaultValue: mermaidConfig,
+        onChangeCallback: (value) => setMermaidConfig(value)
+      }
+    ) : /* @__PURE__ */ React__default.createElement(
+      MermaidElementWithRef,
+      {
+        config: mermaidConfig,
+        lightMode: lightModeClass
+      }
+    ), children));
+  }
+);
 const blockClasses = "mt-0.5";
 const headerClasses = "font-normal";
 const Components = () => {
@@ -2283,6 +2420,7 @@ const Components = () => {
         }
       )
     ),
+    [ELEMENT_MERMAID]: MermaidElement,
     [ELEMENT_BLOCKQUOTE]: BlockquoteElement,
     [ELEMENT_CODE_BLOCK]: CodeBlockElement,
     [ELEMENT_CODE_LINE]: CodeLineElement,
@@ -2773,7 +2911,9 @@ class Form {
                 {
                   type: "string",
                   label: "Caption",
-                  name: [templateName.replace(/\.props$/, ""), "caption"].join("."),
+                  name: [templateName.replace(/\.props$/, ""), "caption"].join(
+                    "."
+                  ),
                   component: "text"
                 }
               ]
@@ -13447,7 +13587,7 @@ const TooltipContent = withCn(
   withProps(TooltipPrimitive.Content, {
     sideOffset: 4
   }),
-  "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md"
+  "z-[9999] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md"
 );
 function withTooltip(Component2) {
   return React__default.forwardRef(function ExtendComponent({ tooltip, tooltipContentProps, tooltipProps, ...props }, ref) {
@@ -13873,6 +14013,38 @@ const CodeBlockToolbarButton = withRef(({ clear, ...rest }, ref) => {
   const { props } = useCodeBlockToolbarButton(state);
   return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.codeBlock, null));
 });
+const useMermaidToolbarButtonState = () => {
+  const editor = useEditorState();
+  const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_MERMAID);
+  return {
+    pressed: isBlockActive()
+  };
+};
+const useMermaidToolbarButton = (state) => {
+  const editor = useEditorState();
+  const onClick = () => {
+    insertEmptyElement(editor, ELEMENT_MERMAID, {
+      nextBlock: true,
+      select: true
+    });
+  };
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return {
+    props: {
+      onClick,
+      onMouseDown,
+      pressed: state.pressed
+    }
+  };
+};
+const MermaidToolbarButton = withRef(({ clear, ...rest }, ref) => {
+  const state = useMermaidToolbarButtonState();
+  const { props } = useMermaidToolbarButton(state);
+  return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, tooltip: "Mermaid", ...rest, ...props }, /* @__PURE__ */ React__default.createElement(Icons.mermaid, null));
+});
 const useImageToolbarButtonState = () => {
   const editor = useEditorState();
   const isBlockActive = () => helpers.isNodeActive(editor, ELEMENT_IMG);
@@ -14057,6 +14229,10 @@ const toolbarItems = {
     label: "Code Block",
     Component: /* @__PURE__ */ React__default.createElement(CodeBlockToolbarButton, null)
   },
+  mermaid: {
+    label: "Mermaid",
+    Component: /* @__PURE__ */ React__default.createElement(MermaidToolbarButton, null)
+  },
   raw: {
     label: "Raw Markdown",
     Component: /* @__PURE__ */ React__default.createElement(RawMarkdownToolbarButton, null)
@@ -14469,6 +14645,7 @@ const RichEditor = (props) => {
         createMdxBlockPlugin(),
         createMdxInlinePlugin(),
         createImgPlugin(),
+        createMermaidPlugin(),
         createInvalidMarkdownPlugin(),
         createLinkPlugin({
           options: {

package/dist/rich-text/index.d.ts

@@ -65,6 +65,9 @@ type BaseComponents = {
         lang?: string;
         value: string;
     };
+    mermaid?: {
+        value: string;
+    };
     img?: {
         url: string;
         caption?: string;

package/dist/rich-text/index.js

@@ -117,7 +117,8 @@
           // @ts-ignore FIXME: TinaMarkdownContent needs to be a union of all possible node types
           /* @__PURE__ */ React.createElement("a", { href: child.url }, /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: children }))
         );
-      case "code_block":
+      case "mermaid":
+      case "code_block": {
         const value = child.value;
         if (components[child.type]) {
           const Component2 = components[child.type];
@@ -127,6 +128,7 @@
           );
         }
         return /* @__PURE__ */ React.createElement("pre", null, /* @__PURE__ */ React.createElement("code", null, value));
+      }
       case "hr":
         if (components[child.type]) {
           const Component2 = components[child.type];

package/dist/rich-text/index.mjs

@@ -114,7 +114,8 @@ const Node = ({ components, child }) => {
         // @ts-ignore FIXME: TinaMarkdownContent needs to be a union of all possible node types
         /* @__PURE__ */ React.createElement("a", { href: child.url }, /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: children }))
       );
-    case "code_block":
+    case "mermaid":
+    case "code_block": {
       const value = child.value;
       if (components[child.type]) {
         const Component2 = components[child.type];
@@ -124,6 +125,7 @@ const Node = ({ components, child }) => {
         );
       }
       return /* @__PURE__ */ React.createElement("pre", null, /* @__PURE__ */ React.createElement("code", null, value));
+    }
     case "hr":
       if (components[child.type]) {
         const Component2 = components[child.type];

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/icons.d.ts

@@ -33,6 +33,7 @@ export declare const Icons: {
     chevronsUpDown: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     clear: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     close: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    paint: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     codeblock: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     color: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     column: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
@@ -55,6 +56,7 @@ export declare const Icons: {
     kbd: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     lineHeight: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     minus: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    mermaid: () => React.JSX.Element;
     more: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     outdent: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     paragraph: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/mermaid-element.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const MermaidElement: React.ForwardRefExoticComponent<Omit<Omit<{
+    elementToAttributes?: (element: import("@udecode/plate-common").TElement) => any;
+} & Omit<{
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    asChild?: boolean | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<any>, "ref"> & {
+    ref?: React.Ref<any>;
+} & import("@udecode/plate-common").PlateRenderNodeProps<import("@udecode/plate-common").Value, import("@udecode/plate-common").PlateEditor<import("@udecode/plate-common").Value>> & {
+    element: import("@udecode/plate-common").TElement;
+} & Omit<import("slate-react").RenderElementProps, "element"> & React.RefAttributes<HTMLDivElement>, "ref">, never> & React.RefAttributes<any>>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/mermaid-toolbar-button.d.ts

@@ -0,0 +1,20 @@
+import { type PlateEditor } from '@udecode/plate-common';
+import React from 'react';
+export declare const insertEmptyMermaid: (editor: PlateEditor) => void;
+export declare const MermaidToolbarButton: React.ForwardRefExoticComponent<{
+    clear?: string | string[];
+} & Omit<Omit<{
+    tooltip?: React.ReactNode;
+    tooltipContentProps?: Omit<React.ComponentPropsWithoutRef<React.ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>>>, "children">;
+    tooltipProps?: Omit<React.ComponentPropsWithoutRef<React.FC<import("@radix-ui/react-tooltip").TooltipProps>>, "children">;
+} & Omit<{
+    isDropdown?: boolean;
+    pressed?: boolean;
+    showArrow?: boolean;
+} & Omit<Omit<Omit<import("@radix-ui/react-toolbar").ToolbarToggleItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: {
+    size?: "default" | "sm" | "lg";
+    variant?: "default" | "outline";
+} & import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>, "ref">, "value" | "asChild"> & import("class-variance-authority").VariantProps<(props?: {
+    size?: "default" | "sm" | "lg";
+    variant?: "default" | "outline";
+} & import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "clear"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/text-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/hooks/use-mermaid-element.d.ts

@@ -0,0 +1,3 @@
+export declare const useMermaidElement: () => {
+    mermaidRef: import("react").MutableRefObject<HTMLDivElement>;
+};

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/plugins/custom/mermaid-plugin.d.ts

@@ -0,0 +1,2 @@
+export declare const ELEMENT_MERMAID = "mermaid";
+export declare const createMermaidPlugin: <OP = import("@udecode/plate-common").AnyObject, OV extends import("@udecode/plate-common").Value = import("@udecode/plate-common").Value, OE extends import("@udecode/plate-common").PlateEditor<OV> = import("@udecode/plate-common").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-common").PlatePlugin<import("@udecode/plate-common").NoInfer<OP>, OV, OE>>, overrideByKey?: import("@udecode/plate-common").OverrideByKey<OV, OE>) => import("@udecode/plate-common").PlatePlugin<import("@udecode/plate-common").NoInfer<OP>, OV, OE>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/plugins/ui/code-block/index.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
 import { type PlateEditor, type TElement } from '@udecode/plate-common';
-export declare const CodeBlock: ({ attributes, editor, element, language: restrictLanguage, ...props }: {
+import React from 'react';
+export declare const CodeBlock: ({ attributes, editor, element, language: restrictLanguage, onChangeCallback, defaultValue, ...props }: {
     attributes: Record<string, unknown>;
     element: TElement;
     editor: PlateEditor;
     language?: string;
     children: React.ReactNode;
+    defaultValue?: unknown;
+    onChangeCallback?: (value: string) => void;
 }) => React.JSX.Element;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/plugins/ui/components.d.ts

@@ -60,6 +60,16 @@ export declare const Components: () => {
         editor: any;
         element: any;
     }) => React.JSX.Element;
+    mermaid: React.ForwardRefExoticComponent<Omit<Omit<{
+        elementToAttributes?: (element: import("@udecode/plate-common").TElement) => any;
+    } & Omit<{
+        as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+        asChild?: boolean | undefined;
+    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<any>, "ref"> & {
+        ref?: React.Ref<any>;
+    } & import("@udecode/plate-common").PlateRenderNodeProps<import("@udecode/plate-common").Value, import("@udecode/plate-common").PlateEditor<import("@udecode/plate-common").Value>> & {
+        element: import("@udecode/plate-common").TElement;
+    } & Omit<import("slate-react").RenderElementProps, "element"> & React.RefAttributes<HTMLDivElement>, "ref">, never> & React.RefAttributes<any>>;
     blockquote: React.ForwardRefExoticComponent<Omit<Omit<{
         elementToAttributes?: (element: import("@udecode/plate-common").TElement) => any;
     } & Omit<{

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/toolbar/toolbar-overrides.d.ts

@@ -1,4 +1,4 @@
-export type ToolbarOverrideType = 'heading' | 'link' | 'image' | 'quote' | 'ul' | 'ol' | 'code' | 'codeBlock' | 'bold' | 'italic' | 'raw' | 'embed';
+export type ToolbarOverrideType = 'heading' | 'link' | 'image' | 'quote' | 'ul' | 'ol' | 'code' | 'codeBlock' | 'bold' | 'italic' | 'mermaid' | 'raw' | 'embed';
 export declare const ICON_WIDTH = 32;
 export declare const EMBED_ICON_WIDTH = 78;
 export declare const HEADING = 138;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/toolbar/toolbar-provider.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ReactNode } from 'react';
-import type { MdxTemplate } from '../types';
 import type { Form } from '../../../../../forms';
+import type { MdxTemplate } from '../types';
 import type { ToolbarOverrideType } from './toolbar-overrides';
 interface ToolbarContextProps {
     tinaForm: Form;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.0.0-c8b1d84-20241003015733",
+  "version": "0.0.0-e0ddb8c-20241004065742",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -107,6 +107,7 @@
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "lucide-react": "^0.424.0",
+    "mermaid": "^10.9.1",
     "moment": "2.29.4",
     "monaco-editor": "0.31.0",
     "prism-react-renderer": "^2.4.0",
@@ -127,9 +128,9 @@
     "webfontloader": "1.6.28",
     "yup": "^1.4.0",
     "zod": "^3.23.8",
-    "@tinacms/mdx": "0.0.0-c8b1d84-20241003015733",
-    "@tinacms/search": "0.0.0-c8b1d84-20241003015733",
-    "@tinacms/schema-tools": "0.0.0-c8b1d84-20241003015733"
+    "@tinacms/schema-tools": "0.0.0-e0ddb8c-20241004065742",
+    "@tinacms/search": "0.0.0-e0ddb8c-20241004065742",
+    "@tinacms/mdx": "0.0.0-e0ddb8c-20241004065742"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.5.4",