@omnitron-dev/prism 0.1.3 → 0.3.0

package/dist/chunk-WFD54GQQ.js

@@ -0,0 +1,1940 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { createLowlight, common } from 'lowlight';
+import StarterKitExtension from '@tiptap/starter-kit';
+import UnderlineExtension from '@tiptap/extension-underline';
+import TextAlignExtension from '@tiptap/extension-text-align';
+import ImageExtension from '@tiptap/extension-image';
+import LinkExtension from '@tiptap/extension-link';
+import PlaceholderExtension from '@tiptap/extension-placeholder';
+import TaskListExtension from '@tiptap/extension-task-list';
+import TaskItemExtension from '@tiptap/extension-task-item';
+import CodeBlockLowlightExtension from '@tiptap/extension-code-block-lowlight';
+import { useEditorState, NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer, useEditor, EditorContent } from '@tiptap/react';
+import Box from '@mui/material/Box';
+import Portal from '@mui/material/Portal';
+import Backdrop from '@mui/material/Backdrop';
+import FormHelperText from '@mui/material/FormHelperText';
+import { styled, alpha } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import SvgIcon2 from '@mui/material/SvgIcon';
+import Tooltip from '@mui/material/Tooltip';
+import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Menu from '@mui/material/Menu';
+import { listClasses } from '@mui/material/List';
+import Button from '@mui/material/Button';
+import Popover from '@mui/material/Popover';
+import TextField2 from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { BubbleMenu } from '@tiptap/react/menus';
+import { Extension, Mark } from '@tiptap/core';
+
+// src/components/editor/types.ts
+var DEFAULT_EDITOR_LABELS = {
+  bold: "Bold (\u2318B)",
+  italic: "Italic (\u2318I)",
+  underline: "Underline (\u2318U)",
+  strike: "Strikethrough",
+  inlineCode: "Inline code (\u2318E)",
+  clearFormat: "Clear format (\u2318\u21E7X)",
+  headingMenu: "Heading menu",
+  bulletList: "Bullet list",
+  orderedList: "Ordered list",
+  taskList: "Task list",
+  alignLeft: "Align left",
+  alignCenter: "Align center",
+  alignRight: "Align right",
+  alignJustify: "Align justify",
+  blockquote: "Blockquote",
+  codeBlock: "Code block",
+  horizontalRule: "Horizontal rule",
+  insertLink: "Insert link",
+  removeLink: "Remove link",
+  insertImage: "Insert image",
+  hardBreak: "Hard break",
+  undo: "Undo (\u2318Z)",
+  redo: "Redo (\u2318\u21E7Z)",
+  fullscreen: "Fullscreen",
+  exitFullscreen: "Exit fullscreen",
+  linkUrlField: "Link URL",
+  linkApply: "Apply",
+  imagePopoverTitle: "Add image",
+  imageUrlField: "Image URL",
+  imageAltField: "Alt text",
+  imageApply: "Apply",
+  codeLanguageAuto: "auto"
+};
+
+// src/components/editor/classes.ts
+var cls = (name) => `prism-editor-${name}`;
+var editorClasses = {
+  root: cls("root"),
+  toolbar: {
+    root: cls("toolbar"),
+    hr: cls("toolbar-hr"),
+    bold: cls("toolbar-bold"),
+    italic: cls("toolbar-italic"),
+    underline: cls("toolbar-underline"),
+    strike: cls("toolbar-strike"),
+    code: cls("toolbar-code"),
+    codeBlock: cls("toolbar-code-block"),
+    link: cls("toolbar-link"),
+    unlink: cls("toolbar-unlink"),
+    image: cls("toolbar-image"),
+    alignLeft: cls("toolbar-align-left"),
+    alignCenter: cls("toolbar-align-center"),
+    alignRight: cls("toolbar-align-right"),
+    alignJustify: cls("toolbar-align-justify"),
+    bulletList: cls("toolbar-bullet-list"),
+    orderedList: cls("toolbar-ordered-list"),
+    taskList: cls("toolbar-task-list"),
+    blockquote: cls("toolbar-blockquote"),
+    hardBreak: cls("toolbar-hard-break"),
+    clear: cls("toolbar-clear"),
+    undo: cls("toolbar-undo"),
+    redo: cls("toolbar-redo"),
+    fullscreen: cls("toolbar-fullscreen")
+  },
+  content: {
+    root: cls("content"),
+    hr: cls("content-hr"),
+    link: cls("content-link"),
+    image: cls("content-image"),
+    heading: cls("content-heading"),
+    codeInline: cls("content-code-inline"),
+    codeBlock: cls("content-code-block"),
+    langSelect: cls("content-lang-select"),
+    blockquote: cls("content-blockquote"),
+    bulletList: cls("content-bullet-list"),
+    orderedList: cls("content-ordered-list"),
+    listItem: cls("content-list-item"),
+    taskList: cls("content-task-list"),
+    taskItem: cls("content-task-item"),
+    placeholder: cls("content-placeholder")
+  },
+  state: {
+    error: cls("state-error"),
+    disabled: cls("state-disabled"),
+    fullscreen: cls("state-fullscreen")
+  }
+};
+var MARGIN = "0.75em";
+var EditorRoot = styled("div")(({ theme }) => ({
+  minHeight: 240,
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: Number(theme.shape.borderRadius) * 1.5,
+  border: `solid 1px ${alpha(theme.palette.grey[500], 0.2)}`,
+  transition: theme.transitions.create(["border-color", "box-shadow"], {
+    duration: theme.transitions.duration.short
+  }),
+  "&:focus-within": {
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main, 0.2)}`
+  },
+  // ---------------------------------------------------------------------------
+  // State: error
+  // ---------------------------------------------------------------------------
+  [`&.${editorClasses.state.error}`]: {
+    borderColor: theme.palette.error.main,
+    [`& .${editorClasses.content.root}`]: {
+      backgroundColor: alpha(theme.palette.error.main, 0.04)
+    }
+  },
+  // ---------------------------------------------------------------------------
+  // State: disabled
+  // ---------------------------------------------------------------------------
+  [`&.${editorClasses.state.disabled}`]: {
+    opacity: 0.48,
+    pointerEvents: "none"
+  },
+  // ---------------------------------------------------------------------------
+  // State: fullscreen
+  // ---------------------------------------------------------------------------
+  [`&.${editorClasses.state.fullscreen}`]: {
+    top: 16,
+    left: 16,
+    position: "fixed",
+    maxHeight: "unset",
+    width: "calc(100% - 32px)",
+    height: "calc(100% - 32px)",
+    zIndex: theme.zIndex.modal,
+    borderRadius: Number(theme.shape.borderRadius) * 2,
+    backgroundColor: theme.palette.background.default,
+    boxShadow: theme.shadows[24]
+  },
+  // ---------------------------------------------------------------------------
+  // Placeholder
+  // ---------------------------------------------------------------------------
+  [`& .${editorClasses.content.placeholder}`]: {
+    // `:first-child::before` — placeholder is rendered as the first
+    // element of the editable content area when the editor is empty.
+    // The previous of-type form fired only when the placeholder was
+    // the first sibling of its tag, which is fragile if the editor
+    // wrapper changes tag (the placeholder might be the SECOND child
+    // of its tag but still the first child overall — both intents
+    // converge on the first-child variant).
+    "&:first-child::before": {
+      ...theme.typography.body2,
+      height: 0,
+      float: "left",
+      pointerEvents: "none",
+      content: "attr(data-placeholder)",
+      color: theme.palette.text.disabled
+    }
+  },
+  // ---------------------------------------------------------------------------
+  // Content area
+  // ---------------------------------------------------------------------------
+  [`& .${editorClasses.content.root}`]: {
+    display: "flex",
+    flex: "1 1 auto",
+    overflowY: "auto",
+    flexDirection: "column",
+    borderBottomLeftRadius: "inherit",
+    borderBottomRightRadius: "inherit",
+    backgroundColor: alpha(theme.palette.grey[500], 0.04),
+    "& .tiptap": {
+      "> * + *": { marginTop: 0, marginBottom: MARGIN },
+      "&.ProseMirror": {
+        flex: "1 1 auto",
+        outline: "none",
+        padding: theme.spacing(0, 2)
+      },
+      // Headings
+      h1: { ...theme.typography.h1, marginTop: 40, marginBottom: 8 },
+      h2: { ...theme.typography.h2, marginTop: 40, marginBottom: 8 },
+      h3: { ...theme.typography.h3, marginTop: 24, marginBottom: 8 },
+      h4: { ...theme.typography.h4, marginTop: 24, marginBottom: 8 },
+      h5: { ...theme.typography.h5, marginTop: 24, marginBottom: 8 },
+      h6: { ...theme.typography.h6, marginTop: 24, marginBottom: 8 },
+      p: { ...theme.typography.body1, marginBottom: "1.25rem" },
+      // Link
+      [`& .${editorClasses.content.link}`]: {
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+        "&:hover": { textDecoration: "underline" }
+      },
+      // Horizontal rule
+      [`& .${editorClasses.content.hr}`]: {
+        flexShrink: 0,
+        borderWidth: 0,
+        margin: "2em 0",
+        borderStyle: "solid",
+        borderBottomWidth: "thin",
+        borderColor: theme.palette.divider
+      },
+      // Image
+      [`& .${editorClasses.content.image}`]: {
+        width: "100%",
+        height: "auto",
+        maxWidth: "100%",
+        borderRadius: theme.shape.borderRadius,
+        margin: "auto auto 1.25em",
+        "&.ProseMirror-selectednode": {
+          outline: `2px solid ${theme.palette.primary.main}`,
+          outlineOffset: 2
+        }
+      },
+      // Lists
+      [`& .${editorClasses.content.bulletList}`]: {
+        paddingLeft: 16,
+        listStyleType: "disc"
+      },
+      [`& .${editorClasses.content.orderedList}`]: {
+        paddingLeft: 16
+      },
+      [`& .${editorClasses.content.listItem}`]: {
+        lineHeight: 2,
+        "& > p": { margin: 0 }
+      },
+      // Task list
+      [`& .${editorClasses.content.taskList}`]: {
+        listStyle: "none",
+        padding: 0,
+        "& li": {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: theme.spacing(1),
+          "& > label": {
+            marginTop: 4,
+            flexShrink: 0
+          },
+          "& > div": { flex: 1 }
+        }
+      },
+      // Blockquote
+      [`& .${editorClasses.content.blockquote}`]: {
+        lineHeight: 1.5,
+        fontSize: "1.5em",
+        margin: "24px auto",
+        position: "relative",
+        fontFamily: "Georgia, serif",
+        padding: theme.spacing(3, 3, 3, 8),
+        color: theme.palette.text.secondary,
+        borderLeft: `solid 8px ${alpha(theme.palette.grey[500], 0.08)}`,
+        [theme.breakpoints.up("md")]: { width: "100%", maxWidth: 640 },
+        "& p": { margin: 0, fontSize: "inherit", fontFamily: "inherit" },
+        "&::before": {
+          left: 16,
+          top: -8,
+          display: "block",
+          fontSize: "3em",
+          content: '"\\201C"',
+          position: "absolute",
+          color: theme.palette.text.disabled
+        }
+      },
+      // Inline code
+      [`& .${editorClasses.content.codeInline}`]: {
+        padding: theme.spacing(0.25, 0.5),
+        color: theme.palette.text.secondary,
+        fontSize: theme.typography.body2.fontSize,
+        borderRadius: Number(theme.shape.borderRadius) / 2,
+        backgroundColor: alpha(theme.palette.grey[500], 0.16),
+        fontFamily: "'JetBrains Mono', 'Fira Code', monospace"
+      },
+      // Code block
+      [`& .${editorClasses.content.codeBlock}`]: {
+        position: "relative",
+        "& pre": {
+          overflowX: "auto",
+          color: theme.palette.common.white,
+          padding: theme.spacing(5, 3, 3, 3),
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: theme.palette.grey[900],
+          fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+          "& code": { fontSize: theme.typography.body2.fontSize }
+        },
+        [`& .${editorClasses.content.langSelect}`]: {
+          top: 8,
+          right: 8,
+          zIndex: 1,
+          padding: 4,
+          outline: "none",
+          borderRadius: 4,
+          position: "absolute",
+          color: theme.palette.common.white,
+          fontWeight: theme.typography.fontWeightMedium,
+          borderColor: alpha(theme.palette.grey[500], 0.08),
+          backgroundColor: alpha(theme.palette.grey[500], 0.08)
+        }
+      }
+    }
+  }
+}));
+
+// src/components/editor/presets.ts
+var PRESET_ITEMS = {
+  /**
+   * Full — CMS pages, blog articles, documentation.
+   * Everything enabled including headings, alignment, code blocks, images.
+   */
+  full: [
+    "heading",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "code",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "alignLeft",
+    "alignCenter",
+    "alignRight",
+    "alignJustify",
+    "blockquote",
+    "codeBlock",
+    "horizontalRule",
+    "link",
+    "image",
+    "hardBreak",
+    "clearFormat",
+    "undo",
+    "redo",
+    "fullscreen"
+  ],
+  /**
+   * Standard — blog posts, forum discussions, product descriptions.
+   * Most formatting without advanced alignment and task lists.
+   */
+  standard: [
+    "heading",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "bulletList",
+    "orderedList",
+    "blockquote",
+    "codeBlock",
+    "link",
+    "image",
+    "hardBreak",
+    "clearFormat",
+    "undo",
+    "redo",
+    "fullscreen"
+  ],
+  /**
+   * Compact — comments, forum replies.
+   * Basic formatting, links, code, no images/headings.
+   */
+  compact: [
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "code",
+    "bulletList",
+    "orderedList",
+    "blockquote",
+    "link",
+    "clearFormat"
+  ],
+  /**
+   * Minimal — quick feedback, short messages.
+   * Only essential inline formatting.
+   */
+  minimal: ["bold", "italic", "code", "link"],
+  /**
+   * Chat — messaging system.
+   * Lightweight formatting, optimized for speed.
+   */
+  chat: ["bold", "italic", "strike", "code", "link", "bulletList", "orderedList", "codeBlock"],
+  /**
+   * Inline — single-line fields (titles, captions).
+   * No toolbar, no block-level elements.
+   */
+  inline: []
+};
+var PRESET_BUBBLE_MENU = {
+  full: true,
+  standard: true,
+  compact: true,
+  minimal: false,
+  chat: false,
+  inline: false
+};
+function resolveToolbar(config) {
+  if (!config) {
+    return resolveToolbar("standard");
+  }
+  if (typeof config === "string") {
+    return {
+      items: new Set(PRESET_ITEMS[config]),
+      bubbleMenu: PRESET_BUBBLE_MENU[config]
+    };
+  }
+  return {
+    items: new Set(config.items),
+    bubbleMenu: config.bubbleMenu ?? false
+  };
+}
+function ToolbarItem({ sx, icon, label, active, disabled, ...other }) {
+  const ariaLabel = other["aria-label"];
+  const renderItem = () => /* @__PURE__ */ jsxs(ItemRoot, { disableRipple: true, disableTouchRipple: true, disabled, active, sx, ...other, children: [
+    icon && /* @__PURE__ */ jsx(SvgIcon2, { sx: { fontSize: 18 }, children: icon }),
+    label && label
+  ] });
+  if (ariaLabel) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: ariaLabel, children: renderItem() });
+  }
+  return renderItem();
+}
+var ItemRoot = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["active", "disabled", "sx"].includes(prop)
+})(({ theme }) => ({
+  ...theme.typography.body2,
+  width: 28,
+  height: 28,
+  padding: theme.spacing(0, 0.75),
+  borderRadius: Number(theme.shape.borderRadius) * 0.75,
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover
+  },
+  variants: [
+    {
+      props: (props) => !!props.active,
+      style: {
+        backgroundColor: theme.palette.action.selected,
+        border: `solid 1px ${theme.palette.action.hover}`
+      }
+    },
+    {
+      props: (props) => !!props.disabled,
+      style: {
+        opacity: 0.48,
+        cursor: "default",
+        pointerEvents: "none"
+      }
+    }
+  ]
+}));
+var BoldIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M5 6C5 4.58579 5 3.87868 5.43934 3.43934C5.87868 3 6.58579 3 8 3H12.5789C15.0206 3 17 5.01472 17 7.5C17 9.98528 15.0206 12 12.5789 12H5V6Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M12.4286 12H13.6667C16.0599 12 18 14.0147 18 16.5C18 18.9853 16.0599 21 13.6667 21H8C6.58579 21 5.87868 21 5.43934 20.5607C5 20.1213 5 19.4142 5 18V12"
+    }
+  )
+] });
+var ItalicIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 4H19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 20L16 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 20H12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var UnderlineIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M5.5 3V11.5C5.5 15.0899 8.41015 18 12 18C15.5899 18 18.5 15.0899 18.5 11.5V3"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M3 21H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var StrikeIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 12H20", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      d: "M17.5 7.66667C17.5 5.08934 15.0376 3 12 3C8.96243 3 6.5 5.08934 6.5 7.66667C6.5 8.15279 6.55336 8.59783 6.6668 9M6 16.3333C6 18.9107 8.68629 21 12 21C15.3137 21 18 19.6667 18 16.3333C18 13.9404 16.9693 12.5782 14.9079 12"
+    }
+  )
+] });
+var InlineCodeIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M17 8L18.8398 9.85008C19.6133 10.6279 20 11.0168 20 11.5C20 11.9832 19.6133 12.3721 18.8398 13.1499L17 15"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M7 8L5.16019 9.85008C4.38673 10.6279 4 11.0168 4 11.5C4 11.9832 4.38673 12.3721 5.16019 13.1499L7 15"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M14.5 4L9.5 20", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var CodeBlockIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M16 10L17.2265 11.0572C17.7422 11.5016 18 11.7239 18 12C18 12.2761 17.7422 12.4984 17.2265 12.9428L16 14"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M8 10L6.77346 11.0572C6.25782 11.5016 6 11.7239 6 12C6 12.2761 6.25782 12.4984 6.77346 12.9428L8 14"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M13 9L11 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      d: "M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
+    }
+  )
+] });
+var H1Icon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M17 19H18.5M20 19H18.5M18.5 19V11L17 12",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M4 12L14 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var H2Icon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M13.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M20.5 19H16.5V18.6907C16.5 18.2521 16.5 18.0327 16.5865 17.8385C16.673 17.6443 16.836 17.4976 17.1621 17.2041L19.7671 14.8596C20.2336 14.4397 20.5 13.8416 20.5 13.214V13C20.5 11.8954 19.6046 11 18.5 11C17.3954 11 16.5 11.8954 16.5 13V13.4"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M3.5 12L13.5 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var H3Icon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M13.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M16.5 17C16.5 18.1046 17.3954 19 18.5 19C19.6046 19 20.5 18.1046 20.5 17C20.5 15.8954 19.6046 15 18.5 15C19.6046 15 20.5 14.1046 20.5 13C20.5 11.8954 19.6046 11 18.5 11C17.3954 11 16.5 11.8954 16.5 13"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M3.5 12L13.5 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var H4Icon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M13.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      d: "M16.5 11V15H20.5M20.5 15V19M20.5 15V11",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M3.5 12L13.5 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var H5Icon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M13.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      d: "M16.5 16.5V17C16.5 18.1046 17.3954 19 18.5 19C19.6046 19 20.5 18.1046 20.5 17V16.5C20.5 15.1193 19.3807 14 18 14H16.5V11H20.5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M3.5 12L13.5 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var H6Icon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M13.5 5V19", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      d: "M16.5 17C16.5 18.1046 17.3954 19 18.5 19C19.6046 19 20.5 18.1046 20.5 17C20.5 15.8954 19.6046 15 18.5 15C17.3954 15 16.5 15.8954 16.5 17ZM16.5 17V13C16.5 11.8954 17.3954 11 18.5 11C19.6046 11 20.5 11.8954 20.5 13",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M3.5 12L13.5 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var ParagraphIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", d: "M15 21.001H9" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      d: "M12 3.00001V21.0008M12 3.00001C13.3874 3.00001 15.1695 3.03055 16.5884 3.17649C17.1885 3.2382 17.4886 3.26906 17.7541 3.37791C18.3066 3.60429 18.7518 4.10063 18.9194 4.67681C19 4.95382 19 5.26992 19 5.90215M12 3.00001C10.6126 3.00001 8.83047 3.03055 7.41161 3.17649C6.8115 3.2382 6.51144 3.26906 6.24586 3.37791C5.69344 3.60429 5.24816 4.10063 5.08057 4.67681C5 4.95382 5 5.26992 5 5.90215"
+    }
+  )
+] });
+var AlignLeftIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9H11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 21H11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var AlignCenterIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 9H16", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 21H16", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var AlignRightIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 9H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 21H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var AlignJustifyIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 21H21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var BulletListIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 5.5L21 5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      d: "M5.4 16.8926C6.46667 17.607 7 17.9642 7 18.5C7 19.0358 6.46667 19.393 5.4 20.1074C4.33333 20.8218 3.8 21.1789 3.4 20.9111C3 20.6432 3 19.9288 3 18.5C3 17.0712 3 16.3568 3.4 16.0889C3.8 15.8211 4.33333 16.1782 5.4 16.8926Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      d: "M5.4 3.89263C6.46667 4.60702 7 4.96421 7 5.5C7 6.03579 6.46667 6.39298 5.4 7.10737C4.33333 7.82176 3.8 8.17895 3.4 7.91105C3 7.64316 3 6.92877 3 5.5C3 4.07123 3 3.35684 3.4 3.08895C3.8 2.82105 4.33333 3.17824 5.4 3.89263Z"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M11 12L21 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 18.5L21 18.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var OrderedListIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 6L21 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 12L21 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 18L21 18", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M3 15H4.5C4.77879 15 4.91819 15 5.03411 15.0231C5.51014 15.1177 5.88225 15.4899 5.97694 15.9659C6 16.0818 6 16.2212 6 16.5C6 16.7788 6 16.9182 5.97694 17.0341C5.88225 17.5101 5.51014 17.8823 5.03411 17.9769C4.91819 18 4.77879 18 4.5 18C4.22121 18 4.08181 18 3.96589 18.0231C3.48986 18.1177 3.11775 18.4899 3.02306 18.9659C3 19.0818 3 19.2212 3 19.5V20.4C3 20.6828 3 20.8243 3.08787 20.9121C3.17574 21 3.31716 21 3.6 21H6"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M3 3H4.2C4.36569 3 4.5 3.13431 4.5 3.3V9M4.5 9H3M4.5 9H6",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var CheckListIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 6L21 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 12L21 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 18L21 18", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M3 7.39286C3 7.39286 4 8.04466 4.5 9C4.5 9 6 5.25 8 4"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M3 18.3929C3 18.3929 4 19.0447 4.5 20C4.5 20 6 16.25 8 15"
+    }
+  )
+] });
+var QuoteIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      d: "M14 16C14 14.1144 14 13.1716 14.5858 12.5858C15.1716 12 16.1144 12 18 12C19.8856 12 20.8284 12 21.4142 12.5858C22 13.1716 22 14.1144 22 16C22 17.8856 22 18.8284 21.4142 19.4142C20.8284 20 19.8856 20 18 20C16.1144 20 15.1716 20 14.5858 19.4142C14 18.8284 14 17.8856 14 16Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      d: "M14 16V11.8626C14 8.19569 16.5157 5.08584 20 4",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      d: "M2 16C2 14.1144 2 13.1716 2.58579 12.5858C3.17157 12 4.11438 12 6 12C7.88562 12 8.82843 12 9.41421 12.5858C10 13.1716 10 14.1144 10 16C10 17.8856 10 18.8284 9.41421 19.4142C8.82843 20 7.88562 20 6 20C4.11438 20 3.17157 20 2.58579 19.4142C2 18.8284 2 17.8856 2 16Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      d: "M2 16V11.8626C2 8.19569 4.51571 5.08584 8 4",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+] });
+var HorizontalRuleIcon = (props) => /* @__PURE__ */ jsx(SvgIcon2, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M2.5 12L21.5002 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var TableIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088Z"
+    }
+  ),
+  /* @__PURE__ */ jsx("path", { d: "M2.5 9L21.5 9", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.5 13L21.5 13", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.5 17L21.5 17", stroke: "currentColor", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 21.5L12 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var LinkIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M9.5 14.5L14.5 9.49995", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      d: "M16.8463 14.6095L19.4558 12C21.5147 9.94108 21.5147 6.60298 19.4558 4.54411C17.397 2.48524 14.0589 2.48524 12 4.54411L9.39045 7.15366M14.6095 16.8463L12 19.4558C9.94113 21.5147 6.60303 21.5147 4.54416 19.4558C2.48528 17.3969 2.48528 14.0588 4.54416 12L7.1537 9.39041"
+    }
+  )
+] });
+var UnlinkIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      d: "M16.8463 14.6095L19.4558 12C21.5147 9.94113 21.5147 6.60303 19.4558 4.54416C17.397 2.48528 14.0589 2.48528 12 4.54416L9.39045 7.1537M14.6095 16.8463L12 19.4558C9.94113 21.5147 6.60303 21.5147 4.54416 19.4558C2.48528 17.397 2.48528 14.0589 4.54416 12L7.1537 9.39045",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M22 17H19.9211M17 22L17 19.9211",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2 7H4.07889M7 2L7 4.07889",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var ImageIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "circle",
+    {
+      fill: "none",
+      cx: "7.5",
+      cy: "7.5",
+      r: "1.5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      d: "M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      d: "M5 21C9.37246 15.775 14.2741 8.88406 21.4975 13.5424"
+    }
+  )
+] });
+var ClearMarksIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 20.001H5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 3L21 21", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      d: "M19 7C19 6.36778 19 5.95381 18.9194 5.6768C18.7518 5.10062 18.3066 4.60428 17.7541 4.37789C17.4886 4.26905 17.1885 4.23819 16.5884 4.17648C15.1695 4.03054 13.3874 4 12 4H8"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 4L11.2 7.20003M8 20.0008L10.4001 10.4001",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var UndoIcon = (props) => /* @__PURE__ */ jsx(SvgIcon2, { ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "none",
+    d: "M3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C8.79275 3 5.97733 4.67765 4.38341 7.20327M3.29339 3.00076L3.46556 5.05452C3.58958 6.53384 3.65159 7.27349 4.13359 7.68914C4.61559 8.10479 5.32673 8.03185 6.74899 7.88595L8.79339 7.67625",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var RedoIcon = (props) => /* @__PURE__ */ jsx(SvgIcon2, { ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C15.2073 3 18.0227 4.67765 19.6166 7.20327M20.7066 3.00076L20.5344 5.05452C20.4104 6.53384 20.3484 7.27349 19.8664 7.68914C19.3844 8.10479 18.6733 8.03185 17.251 7.88595L15.2066 7.67625"
+  }
+) });
+var HardBreakIcon = (props) => /* @__PURE__ */ jsxs(SvgIcon2, { ...props, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M13 6H8.5C6.01472 6 4 8.01472 4 10.5C4 12.9853 6.01472 15 8.5 15H20"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M17 12C17 12 20 14.2095 20 15C20 15.7906 17 18 17 18"
+    }
+  )
+] });
+var FullscreenIcon = (props) => /* @__PURE__ */ jsx(SvgIcon2, { ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M15.5 21C16.8956 21 17.5933 21 18.1611 20.8278C19.4395 20.44 20.44 19.4395 20.8278 18.1611C21 17.5933 21 16.8956 21 15.5M21 8.5C21 7.10444 21 6.40666 20.8278 5.83886C20.44 4.56046 19.4395 3.56004 18.1611 3.17224C17.5933 3 16.8956 3 15.5 3M8.5 21C7.10444 21 6.40666 21 5.83886 20.8278C4.56046 20.44 3.56004 19.4395 3.17224 18.1611C3 17.5933 3 16.8956 3 15.5M3 8.5C3 7.10444 3 6.40666 3.17224 5.83886C3.56004 4.56046 4.56046 3.56004 5.83886 3.17224C6.40666 3 7.10444 3 8.5 3"
+  }
+) });
+var ExitFullscreenIcon = (props) => /* @__PURE__ */ jsx(SvgIcon2, { ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M15.5 9.5L21 4M15.5 9.5V5M15.5 9.5H20M8.5 14.5L3 20M8.5 14.5V19M8.5 14.5H4"
+  }
+) });
+var HEADING_OPTIONS = [
+  { key: "Paragraph", level: null, icon: /* @__PURE__ */ jsx(ParagraphIcon, { sx: { fontSize: 18 } }) },
+  { key: "Heading 1", level: 1, icon: /* @__PURE__ */ jsx(H1Icon, { sx: { fontSize: 18 } }) },
+  { key: "Heading 2", level: 2, icon: /* @__PURE__ */ jsx(H2Icon, { sx: { fontSize: 18 } }) },
+  { key: "Heading 3", level: 3, icon: /* @__PURE__ */ jsx(H3Icon, { sx: { fontSize: 18 } }) },
+  { key: "Heading 4", level: 4, icon: /* @__PURE__ */ jsx(H4Icon, { sx: { fontSize: 18 } }) },
+  { key: "Heading 5", level: 5, icon: /* @__PURE__ */ jsx(H5Icon, { sx: { fontSize: 18 } }) },
+  { key: "Heading 6", level: 6, icon: /* @__PURE__ */ jsx(H6Icon, { sx: { fontSize: 18 } }) }
+];
+function HeadingBlock({ editor, isActive, labels }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleOpen = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleSelect = useCallback(
+    (value) => {
+      handleClose();
+      if (value) {
+        editor.chain().focus().toggleHeading({ level: value }).run();
+      } else {
+        editor.chain().focus().setParagraph().run();
+      }
+    },
+    [editor, handleClose]
+  );
+  const activeIcon = editor.isActive("heading", { level: 1 }) && /* @__PURE__ */ jsx(H1Icon, { sx: { fontSize: 18 } }) || editor.isActive("heading", { level: 2 }) && /* @__PURE__ */ jsx(H2Icon, { sx: { fontSize: 18 } }) || editor.isActive("heading", { level: 3 }) && /* @__PURE__ */ jsx(H3Icon, { sx: { fontSize: 18 } }) || editor.isActive("heading", { level: 4 }) && /* @__PURE__ */ jsx(H4Icon, { sx: { fontSize: 18 } }) || editor.isActive("heading", { level: 5 }) && /* @__PURE__ */ jsx(H5Icon, { sx: { fontSize: 18 } }) || editor.isActive("heading", { level: 6 }) && /* @__PURE__ */ jsx(H6Icon, { sx: { fontSize: 18 } }) || /* @__PURE__ */ jsx(ParagraphIcon, { sx: { fontSize: 18 } });
+  const buttonId = "heading-menu-button";
+  const menuId = "heading-menu";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      HeadingButton,
+      {
+        id: buttonId,
+        "aria-label": labels.headingMenu,
+        "aria-controls": open ? menuId : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        onClick: handleOpen,
+        children: activeIcon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        id: menuId,
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          list: { "aria-labelledby": buttonId },
+          paper: {
+            sx: {
+              width: 42,
+              [`& .${listClasses.root}`]: { gap: 0.5, display: "flex", flexDirection: "column" },
+              [`& .${buttonBaseClasses.root}`]: {
+                px: 1,
+                width: 1,
+                height: 34,
+                borderRadius: 0.75,
+                justifyContent: "flex-start",
+                "&:hover": { backgroundColor: "action.hover" }
+              }
+            }
+          }
+        },
+        children: HEADING_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            component: "li",
+            "aria-label": option.key,
+            icon: option.icon,
+            active: isActive(option.level),
+            onClick: () => handleSelect(option.level)
+          },
+          option.key
+        ))
+      }
+    )
+  ] });
+}
+var HeadingButton = styled(ButtonBase)(({ theme }) => ({
+  width: 28,
+  height: 28,
+  borderRadius: Number(theme.shape.borderRadius) * 0.75,
+  justifyContent: "center",
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover
+  }
+}));
+function LinkBlock({ editor, linkIcon, unlinkIcon, active, labels }) {
+  const [linkUrl, setLinkUrl] = useState("");
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleOpen = useCallback(
+    (event) => {
+      const currentUrl = editor.getAttributes("link").href ?? "";
+      setAnchorEl(event.currentTarget);
+      setLinkUrl(currentUrl);
+    },
+    [editor]
+  );
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleApply = useCallback(() => {
+    handleClose();
+    const chain = () => editor.chain().focus().extendMarkRange("link");
+    if (linkUrl) {
+      chain().setLink({ href: linkUrl }).run();
+    } else {
+      chain().unsetLink().run();
+    }
+  }, [editor, linkUrl, handleClose]);
+  const popoverId = open ? "link-popover" : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-describedby": popoverId,
+        "aria-label": labels.insertLink,
+        active,
+        className: editorClasses.toolbar.link,
+        onClick: handleOpen,
+        icon: linkIcon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-label": labels.removeLink,
+        disabled: !active,
+        className: editorClasses.toolbar.unlink,
+        onClick: () => editor.chain().focus().unsetLink().run(),
+        icon: unlinkIcon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id: popoverId,
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: {
+          paper: {
+            sx: { p: 2.5, gap: 1.25, width: 1, maxWidth: 320, display: "flex", flexDirection: "column" }
+          }
+        },
+        children: /* @__PURE__ */ jsxs(Box, { sx: { gap: 1, display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            TextField2,
+            {
+              fullWidth: true,
+              size: "small",
+              label: labels.linkUrlField,
+              placeholder: "https://",
+              value: linkUrl,
+              onChange: (e) => setLinkUrl(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleApply();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "contained", disabled: !linkUrl, onClick: handleApply, children: labels.linkApply })
+        ] })
+      }
+    )
+  ] });
+}
+function ImageBlock({ editor, icon, labels }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const [state, setState] = useState({ imageUrl: "", altText: "" });
+  const handleOpen = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleApply = useCallback(() => {
+    handleClose();
+    setState({ imageUrl: "", altText: "" });
+    editor.chain().focus().setImage({ src: state.imageUrl, alt: state.altText }).run();
+  }, [editor, handleClose, state]);
+  const popoverId = open ? "image-popover" : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-describedby": popoverId,
+        "aria-label": labels.insertImage,
+        className: editorClasses.toolbar.image,
+        onClick: handleOpen,
+        icon
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        id: popoverId,
+        open,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        slotProps: {
+          paper: {
+            sx: { p: 2.5, gap: 1.25, width: 1, maxWidth: 320, display: "flex", flexDirection: "column" }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: labels.imagePopoverTitle }),
+          /* @__PURE__ */ jsx(
+            TextField2,
+            {
+              fullWidth: true,
+              size: "small",
+              label: labels.imageUrlField,
+              placeholder: "https://",
+              value: state.imageUrl,
+              onChange: (e) => setState((prev) => ({ ...prev, imageUrl: e.target.value }))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextField2,
+            {
+              fullWidth: true,
+              size: "small",
+              label: labels.imageAltField,
+              value: state.altText,
+              onChange: (e) => setState((prev) => ({ ...prev, altText: e.target.value }))
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "contained", disabled: !state.imageUrl, onClick: handleApply, sx: { alignSelf: "flex-end" }, children: labels.imageApply })
+        ]
+      }
+    )
+  ] });
+}
+function useToolbarState(editor) {
+  return useEditorState({
+    editor,
+    selector: (ctx) => {
+      const canRun = ctx.editor.can().chain().focus();
+      return {
+        isBold: ctx.editor.isActive("bold"),
+        isCode: ctx.editor.isActive("code"),
+        isLink: ctx.editor.isActive("link"),
+        isItalic: ctx.editor.isActive("italic"),
+        isStrike: ctx.editor.isActive("strike"),
+        isUnderline: ctx.editor.isActive("underline"),
+        isCodeBlock: ctx.editor.isActive("codeBlock"),
+        isBulletList: ctx.editor.isActive("bulletList"),
+        isBlockquote: ctx.editor.isActive("blockquote"),
+        isOrderedList: ctx.editor.isActive("orderedList"),
+        isTaskList: ctx.editor.isActive("taskList"),
+        isAlign: (value) => ctx.editor.isActive({ textAlign: value }),
+        isTextTransform: (value) => ctx.editor.isActive("textTransform", { textTransform: value }),
+        isTextLevel: (value) => value ? ctx.editor.isActive("heading", { level: value }) : ctx.editor.isActive("paragraph"),
+        canUndo: canRun.undo().run(),
+        canRedo: canRun.redo().run()
+      };
+    }
+  });
+}
+function Toolbar({ editor, toolbar, fullscreen, onToggleFullscreen, labels }) {
+  const state = useToolbarState(editor);
+  const has = (item) => toolbar.items.has(item);
+  const chain = () => editor.chain().focus();
+  const hasAnyInGroup = (...items) => items.some(has);
+  return /* @__PURE__ */ jsxs(ToolbarRoot, { className: editorClasses.toolbar.root, children: [
+    has("heading") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HeadingBlock, { labels, editor, isActive: state.isTextLevel }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    hasAnyInGroup("bold", "italic", "underline", "strike", "code") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ToolbarBlock, { children: [
+        has("bold") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.bold,
+            active: state.isBold,
+            className: editorClasses.toolbar.bold,
+            onClick: () => chain().toggleBold().run(),
+            icon: /* @__PURE__ */ jsx(BoldIcon, {})
+          }
+        ),
+        has("italic") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.italic,
+            active: state.isItalic,
+            className: editorClasses.toolbar.italic,
+            onClick: () => chain().toggleItalic().run(),
+            icon: /* @__PURE__ */ jsx(ItalicIcon, {})
+          }
+        ),
+        has("underline") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.underline,
+            active: state.isUnderline,
+            className: editorClasses.toolbar.underline,
+            onClick: () => chain().toggleUnderline().run(),
+            icon: /* @__PURE__ */ jsx(UnderlineIcon, {})
+          }
+        ),
+        has("strike") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.strike,
+            active: state.isStrike,
+            className: editorClasses.toolbar.strike,
+            onClick: () => chain().toggleStrike().run(),
+            icon: /* @__PURE__ */ jsx(StrikeIcon, {})
+          }
+        ),
+        has("code") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.inlineCode,
+            active: state.isCode,
+            className: editorClasses.toolbar.code,
+            onClick: () => chain().toggleCode().run(),
+            icon: /* @__PURE__ */ jsx(InlineCodeIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    hasAnyInGroup("bulletList", "orderedList", "taskList") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ToolbarBlock, { children: [
+        has("bulletList") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.bulletList,
+            active: state.isBulletList,
+            className: editorClasses.toolbar.bulletList,
+            onClick: () => chain().toggleBulletList().run(),
+            icon: /* @__PURE__ */ jsx(BulletListIcon, {})
+          }
+        ),
+        has("orderedList") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.orderedList,
+            active: state.isOrderedList,
+            className: editorClasses.toolbar.orderedList,
+            onClick: () => chain().toggleOrderedList().run(),
+            icon: /* @__PURE__ */ jsx(OrderedListIcon, {})
+          }
+        ),
+        has("taskList") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.taskList,
+            active: state.isTaskList,
+            className: editorClasses.toolbar.taskList,
+            onClick: () => chain().toggleTaskList().run(),
+            icon: /* @__PURE__ */ jsx(CheckListIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    hasAnyInGroup("alignLeft", "alignCenter", "alignRight", "alignJustify") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ToolbarBlock, { children: [
+        has("alignLeft") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.alignLeft,
+            active: state.isAlign("left"),
+            className: editorClasses.toolbar.alignLeft,
+            onClick: () => chain().setTextAlign("left").run(),
+            icon: /* @__PURE__ */ jsx(AlignLeftIcon, {})
+          }
+        ),
+        has("alignCenter") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.alignCenter,
+            active: state.isAlign("center"),
+            className: editorClasses.toolbar.alignCenter,
+            onClick: () => chain().setTextAlign("center").run(),
+            icon: /* @__PURE__ */ jsx(AlignCenterIcon, {})
+          }
+        ),
+        has("alignRight") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.alignRight,
+            active: state.isAlign("right"),
+            className: editorClasses.toolbar.alignRight,
+            onClick: () => chain().setTextAlign("right").run(),
+            icon: /* @__PURE__ */ jsx(AlignRightIcon, {})
+          }
+        ),
+        has("alignJustify") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.alignJustify,
+            active: state.isAlign("justify"),
+            className: editorClasses.toolbar.alignJustify,
+            onClick: () => chain().setTextAlign("justify").run(),
+            icon: /* @__PURE__ */ jsx(AlignJustifyIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    hasAnyInGroup("blockquote", "codeBlock", "horizontalRule") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ToolbarBlock, { children: [
+        has("blockquote") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.blockquote,
+            active: state.isBlockquote,
+            className: editorClasses.toolbar.blockquote,
+            onClick: () => chain().toggleBlockquote().run(),
+            icon: /* @__PURE__ */ jsx(QuoteIcon, {})
+          }
+        ),
+        has("codeBlock") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.codeBlock,
+            active: state.isCodeBlock,
+            className: editorClasses.toolbar.codeBlock,
+            onClick: () => chain().toggleCodeBlock().run(),
+            icon: /* @__PURE__ */ jsx(CodeBlockIcon, {})
+          }
+        ),
+        has("horizontalRule") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.horizontalRule,
+            className: editorClasses.toolbar.hr,
+            onClick: () => chain().setHorizontalRule().run(),
+            icon: /* @__PURE__ */ jsx(HorizontalRuleIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    hasAnyInGroup("link", "image") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ToolbarBlock, { children: [
+        has("link") && /* @__PURE__ */ jsx(LinkBlock, { labels, editor, active: state.isLink, linkIcon: /* @__PURE__ */ jsx(LinkIcon, {}), unlinkIcon: /* @__PURE__ */ jsx(UnlinkIcon, {}) }),
+        has("image") && /* @__PURE__ */ jsx(ImageBlock, { labels, editor, icon: /* @__PURE__ */ jsx(ImageIcon, {}) })
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    hasAnyInGroup("hardBreak", "clearFormat") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ToolbarBlock, { children: [
+        has("hardBreak") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.hardBreak,
+            className: editorClasses.toolbar.hardBreak,
+            onClick: () => chain().setHardBreak().run(),
+            icon: /* @__PURE__ */ jsx(HardBreakIcon, {})
+          }
+        ),
+        has("clearFormat") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.clearFormat,
+            className: editorClasses.toolbar.clear,
+            onClick: () => chain().clearNodes().unsetAllMarks().run(),
+            icon: /* @__PURE__ */ jsx(ClearMarksIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    hasAnyInGroup("undo", "redo") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ToolbarBlock, { children: [
+        has("undo") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.undo,
+            disabled: !state.canUndo,
+            className: editorClasses.toolbar.undo,
+            onClick: () => chain().undo().run(),
+            icon: /* @__PURE__ */ jsx(UndoIcon, {})
+          }
+        ),
+        has("redo") && /* @__PURE__ */ jsx(
+          ToolbarItem,
+          {
+            "aria-label": labels.redo,
+            disabled: !state.canRedo,
+            className: editorClasses.toolbar.redo,
+            onClick: () => chain().redo().run(),
+            icon: /* @__PURE__ */ jsx(RedoIcon, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ToolbarDivider, {})
+    ] }),
+    has("fullscreen") && /* @__PURE__ */ jsx(ToolbarBlock, { children: /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-label": fullscreen ? labels.exitFullscreen : labels.fullscreen,
+        active: fullscreen,
+        className: editorClasses.toolbar.fullscreen,
+        onClick: onToggleFullscreen,
+        icon: fullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+      }
+    ) })
+  ] });
+}
+var ToolbarRoot = styled("div")(({ theme }) => ({
+  flexWrap: "wrap",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  padding: theme.spacing(1.25),
+  borderTopLeftRadius: "inherit",
+  borderTopRightRadius: "inherit",
+  backgroundColor: theme.palette.background.paper,
+  borderBottom: `solid 1px ${alpha(theme.palette.grey[500], 0.2)}`
+}));
+var ToolbarBlock = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+function ToolbarDivider() {
+  return /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, my: "auto" } });
+}
+function BubbleToolbar({ editor, labels }) {
+  const state = useToolbarState(editor);
+  const chain = () => editor.chain().focus();
+  return /* @__PURE__ */ jsx(BubbleMenu, { editor, children: /* @__PURE__ */ jsxs(BubbleRoot, { children: [
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-label": labels.bold,
+        active: state.isBold,
+        className: editorClasses.toolbar.bold,
+        onClick: () => chain().toggleBold().run(),
+        icon: /* @__PURE__ */ jsx(BoldIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-label": labels.italic,
+        active: state.isItalic,
+        className: editorClasses.toolbar.italic,
+        onClick: () => chain().toggleItalic().run(),
+        icon: /* @__PURE__ */ jsx(ItalicIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-label": labels.underline,
+        active: state.isUnderline,
+        className: editorClasses.toolbar.underline,
+        onClick: () => chain().toggleUnderline().run(),
+        icon: /* @__PURE__ */ jsx(UnderlineIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-label": labels.strike,
+        active: state.isStrike,
+        className: editorClasses.toolbar.strike,
+        onClick: () => chain().toggleStrike().run(),
+        icon: /* @__PURE__ */ jsx(StrikeIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(LinkBlock, { labels, editor, active: state.isLink, linkIcon: /* @__PURE__ */ jsx(LinkIcon, {}), unlinkIcon: /* @__PURE__ */ jsx(UnlinkIcon, {}) }),
+    /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, my: "auto" } }),
+    /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        "aria-label": labels.clearFormat,
+        className: editorClasses.toolbar.clear,
+        onClick: () => chain().clearNodes().unsetAllMarks().run(),
+        icon: /* @__PURE__ */ jsx(ClearMarksIcon, {})
+      }
+    )
+  ] }) });
+}
+var BubbleRoot = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(0.5),
+  borderRadius: theme.shape.borderRadius,
+  boxShadow: theme.shadows[8],
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${alpha(theme.palette.grey[500], 0.16)}`
+}));
+function CodeHighlightBlock(props) {
+  const { node, extension, updateAttributes } = props;
+  const language = node.attrs.language;
+  const lowlight = extension.options.lowlight;
+  const autoLabel = extension.options.autoLanguageLabel ?? DEFAULT_EDITOR_LABELS.codeLanguageAuto;
+  const handleChangeLanguage = useCallback(
+    (event) => {
+      updateAttributes({ language: event.target.value });
+    },
+    [updateAttributes]
+  );
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: editorClasses.content.codeBlock, children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        name: "language",
+        contentEditable: false,
+        value: language || "null",
+        onChange: handleChangeLanguage,
+        className: editorClasses.content.langSelect,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "null", children: autoLabel }),
+          /* @__PURE__ */ jsx("option", { disabled: true, children: "\u2014" }),
+          lowlight.listLanguages().map((lang) => /* @__PURE__ */ jsx("option", { value: lang, children: lang }, lang))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code" }) })
+  ] });
+}
+var ClearFormat = Extension.create({
+  name: "clearFormat",
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-X": ({ editor }) => editor.chain().focus().clearNodes().unsetAllMarks().run()
+    };
+  }
+});
+var isHTMLElement = (node) => node instanceof HTMLElement;
+var isValidTextTransform = (value, allowed) => typeof value === "string" && allowed.includes(value);
+var TextTransform = Mark.create({
+  name: "textTransform",
+  addOptions() {
+    return {
+      allowedValues: ["uppercase", "lowercase", "capitalize"],
+      defaultValue: void 0
+    };
+  },
+  addAttributes() {
+    return {
+      textTransform: {
+        default: this.options.defaultValue,
+        parseHTML: (element) => {
+          if (!isHTMLElement(element)) return void 0;
+          const rawValue = element.style.textTransform || element.getAttribute("style")?.match(/text-transform:\s*(\w+)/)?.[1];
+          return isValidTextTransform(rawValue, this.options.allowedValues) ? rawValue : void 0;
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.textTransform) return {};
+          return { style: `text-transform: ${attributes.textTransform}` };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[style]",
+        getAttrs: (node) => {
+          if (!isHTMLElement(node)) return null;
+          const styleValue = node.style.textTransform;
+          return isValidTextTransform(styleValue, this.options.allowedValues) ? {} : false;
+        }
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", HTMLAttributes, 0];
+  },
+  addCommands() {
+    return {
+      setTextTransform: (value) => ({ commands }) => {
+        if (!isValidTextTransform(value, this.options.allowedValues)) return false;
+        return commands.setMark(this.name, { textTransform: value });
+      },
+      unsetTextTransform: () => ({ commands }) => commands.unsetMark(this.name),
+      toggleTextTransform: (value) => ({ editor, commands }) => {
+        if (!isValidTextTransform(value, this.options.allowedValues)) return false;
+        const isActive = editor.isActive(this.name, { textTransform: value });
+        return isActive ? commands.unsetTextTransform() : commands.setTextTransform(value);
+      }
+    };
+  }
+});
+function Editor({
+  sx,
+  error,
+  onChange,
+  slotProps,
+  helperText,
+  resetValue,
+  className,
+  toolbar: toolbarConfig,
+  bubbleMenu: bubbleMenuProp,
+  format = "json",
+  minHeight = 160,
+  maxHeight,
+  editable = true,
+  extraExtensions,
+  placeholder = "Write something...",
+  labels: labelOverrides,
+  ref: contentRef,
+  value: initialContent = "",
+  ...other
+}) {
+  const [fullscreen, setFullscreen] = useState(false);
+  const [rerenderKey, setRerenderKey] = useState(0);
+  const resolvedToolbar = useMemo(() => resolveToolbar(toolbarConfig), [toolbarConfig]);
+  const showBubbleMenu = bubbleMenuProp ?? resolvedToolbar.bubbleMenu;
+  const showToolbar = resolvedToolbar.items.size > 0;
+  const lowlight = useMemo(() => createLowlight(common), []);
+  const labels = useMemo(
+    () => ({ ...DEFAULT_EDITOR_LABELS, ...labelOverrides }),
+    [labelOverrides]
+  );
+  const parsedContent = useMemo(() => {
+    if (!initialContent) return "";
+    if (format === "json" && initialContent.startsWith("{")) {
+      try {
+        return JSON.parse(initialContent);
+      } catch {
+        return initialContent;
+      }
+    }
+    return initialContent;
+  }, [initialContent, format]);
+  const debouncedOnChange = useMemo(() => {
+    let timer;
+    return (editor2) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (format === "json") {
+          onChange?.(JSON.stringify(editor2.getJSON()));
+        } else {
+          onChange?.(editor2.getHTML());
+        }
+      }, 200);
+    };
+  }, [onChange, format]);
+  const extensions = useMemo(() => {
+    const has = (item) => resolvedToolbar.items.has(item);
+    const exts = [
+      StarterKitExtension.configure({
+        codeBlock: false,
+        // Underline and Link are registered separately (below) to allow per-preset control
+        underline: false,
+        link: false,
+        code: has("code") ? { HTMLAttributes: { class: editorClasses.content.codeInline } } : false,
+        heading: has("heading") ? { HTMLAttributes: { class: editorClasses.content.heading } } : false,
+        horizontalRule: has("horizontalRule") ? { HTMLAttributes: { class: editorClasses.content.hr } } : false,
+        listItem: { HTMLAttributes: { class: editorClasses.content.listItem } },
+        blockquote: has("blockquote") ? { HTMLAttributes: { class: editorClasses.content.blockquote } } : false,
+        bulletList: has("bulletList") ? { HTMLAttributes: { class: editorClasses.content.bulletList } } : false,
+        orderedList: has("orderedList") ? { HTMLAttributes: { class: editorClasses.content.orderedList } } : false
+      }),
+      PlaceholderExtension.configure({
+        placeholder,
+        emptyEditorClass: editorClasses.content.placeholder
+      }),
+      ClearFormat,
+      TextTransform
+    ];
+    if (has("underline")) {
+      exts.push(UnderlineExtension);
+    }
+    if (has("alignLeft") || has("alignCenter") || has("alignRight") || has("alignJustify")) {
+      exts.push(TextAlignExtension.configure({ types: ["heading", "paragraph"] }));
+    }
+    if (has("image")) {
+      exts.push(ImageExtension.configure({ HTMLAttributes: { class: editorClasses.content.image } }));
+    }
+    if (has("link")) {
+      exts.push(
+        LinkExtension.configure({
+          openOnClick: false,
+          HTMLAttributes: { class: editorClasses.content.link }
+        })
+      );
+    }
+    if (has("codeBlock")) {
+      exts.push(
+        CodeBlockLowlightExtension.extend({
+          addOptions() {
+            const inherited = this.parent?.();
+            return { ...inherited, autoLanguageLabel: DEFAULT_EDITOR_LABELS.codeLanguageAuto };
+          },
+          addNodeView: () => ReactNodeViewRenderer(CodeHighlightBlock)
+        }).configure({ lowlight, autoLanguageLabel: labels.codeLanguageAuto })
+      );
+    }
+    if (has("taskList")) {
+      exts.push(
+        TaskListExtension.configure({ HTMLAttributes: { class: editorClasses.content.taskList } }),
+        TaskItemExtension.configure({
+          nested: true,
+          HTMLAttributes: { class: editorClasses.content.taskItem }
+        })
+      );
+    }
+    if (extraExtensions) {
+      exts.push(...extraExtensions);
+    }
+    return exts;
+  }, [resolvedToolbar, placeholder, lowlight, extraExtensions, labels]);
+  const editor = useEditor({
+    editable,
+    immediatelyRender: false,
+    content: parsedContent,
+    shouldRerenderOnTransaction: !!rerenderKey,
+    onUpdate: (ctx) => {
+      debouncedOnChange(ctx.editor);
+    },
+    extensions,
+    ...other
+  });
+  const handleToggleFullscreen = useCallback(() => {
+    editor?.unmount();
+    setFullscreen((prev) => !prev);
+    setRerenderKey((prev) => prev + 1);
+  }, [editor]);
+  const handleExitFullscreen = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        editor?.unmount();
+        setFullscreen(false);
+        setRerenderKey((prev) => prev + 1);
+      }
+    },
+    [editor]
+  );
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (!editor?.isDestroyed && editor?.isEmpty && parsedContent && parsedContent !== "<p></p>") {
+        editor?.commands.setContent(parsedContent);
+      }
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [parsedContent, editor]);
+  useEffect(() => {
+    if (resetValue && !initialContent) {
+      editor?.commands.clearContent();
+    }
+  }, [initialContent, resetValue, editor]);
+  useEffect(() => {
+    if (!fullscreen) return void 0;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", handleExitFullscreen);
+    return () => {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleExitFullscreen);
+    };
+  }, [fullscreen, handleExitFullscreen]);
+  const rootClassName = [
+    editorClasses.root,
+    className,
+    error && editorClasses.state.error,
+    !editable && editorClasses.state.disabled,
+    fullscreen && editorClasses.state.fullscreen
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Portal, { disablePortal: !fullscreen, children: [
+    fullscreen && /* @__PURE__ */ jsx(Backdrop, { open: true, sx: (theme) => ({ zIndex: theme.zIndex.modal - 1 }) }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ...slotProps?.wrapper,
+        sx: [
+          { display: "flex", flexDirection: "column" },
+          ...Array.isArray(slotProps?.wrapper?.sx) ? slotProps.wrapper.sx : [slotProps?.wrapper?.sx]
+        ],
+        children: [
+          /* @__PURE__ */ jsx(EditorRoot, { className: rootClassName, sx: [{ minHeight }, ...Array.isArray(sx) ? sx : [sx]], children: editor && !editor.isDestroyed && /* @__PURE__ */ jsxs(Fragment, { children: [
+            showToolbar && /* @__PURE__ */ jsx(
+              Toolbar,
+              {
+                labels,
+                editor,
+                toolbar: resolvedToolbar,
+                fullscreen,
+                onToggleFullscreen: handleToggleFullscreen
+              }
+            ),
+            showBubbleMenu && /* @__PURE__ */ jsx(BubbleToolbar, { editor, labels }),
+            /* @__PURE__ */ jsx(
+              EditorContent,
+              {
+                ref: contentRef,
+                spellCheck: false,
+                autoComplete: "off",
+                autoCapitalize: "off",
+                editor,
+                className: editorClasses.content.root,
+                style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0
+              }
+            )
+          ] }) }),
+          helperText && /* @__PURE__ */ jsx(FormHelperText, { error: !!error, children: helperText })
+        ]
+      }
+    )
+  ] });
+}
+
+export { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, BubbleToolbar, BulletListIcon, CheckListIcon, ClearFormat, ClearMarksIcon, CodeBlockIcon, CodeHighlightBlock, DEFAULT_EDITOR_LABELS, Editor, ExitFullscreenIcon, FullscreenIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, H6Icon, HardBreakIcon, HeadingBlock, HorizontalRuleIcon, ImageBlock, ImageIcon, InlineCodeIcon, ItalicIcon, LinkBlock, LinkIcon, OrderedListIcon, ParagraphIcon, QuoteIcon, RedoIcon, StrikeIcon, TableIcon, TextTransform, Toolbar, ToolbarItem, UnderlineIcon, UndoIcon, UnlinkIcon, editorClasses, resolveToolbar, useToolbarState };
+//# sourceMappingURL=chunk-WFD54GQQ.js.map
+//# sourceMappingURL=chunk-WFD54GQQ.js.map