@tnd028/strapi-plugin-tiptap-editor 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# strapi-plugin-tiptap-editor
+
+Tiptap editor for Strapi 5

package/dist/_chunks/Alignment-B0f2-LO0.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const DropdownMenuItemStyled = styled__default.default(TiptapEditorInput.DropdownMenuItem)`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px 6px 4px;
+  font-size: 14px;
+  
+  &:hover {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+  
+  &:focus {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const CheckIcon = styled__default.default(lucideReact.Check)`
+  width: 12px;
+  height: 12px;
+  color: ${(props) => props.theme.colors.primary500};
+`;
+const IconWrapper = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 20px;
+  margin-right: 4px;
+`;
+const StyledTooltipContent = styled__default.default(TiptapEditorInput.TooltipContent)`
+  background-color: ${(props) => props.theme.colors.neutral800};
+  color: ${(props) => props.theme.colors.neutral0};
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 100;
+`;
+const AlignmentToolbar = () => {
+  const { editor } = TiptapEditorInput.useEditorContext();
+  const handleAlign = (value) => {
+    editor?.chain().focus().setTextAlign(value).run();
+  };
+  const isDisabled = (editor?.isActive("image") || editor?.isActive("video") || !editor) ?? false;
+  const currentTextAlign = () => {
+    if (editor?.isActive({ textAlign: "left" })) {
+      return "left";
+    }
+    if (editor?.isActive({ textAlign: "center" })) {
+      return "center";
+    }
+    if (editor?.isActive({ textAlign: "right" })) {
+      return "right";
+    }
+    if (editor?.isActive({ textAlign: "justify" })) {
+      return "justify";
+    }
+    return "left";
+  };
+  const alignmentOptions = [
+    {
+      name: "Left Align",
+      value: "left",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, {})
+    },
+    {
+      name: "Center Align",
+      value: "center",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenter, {})
+    },
+    {
+      name: "Right Align",
+      value: "right",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, {})
+    },
+    {
+      name: "Justify Align",
+      value: "justify",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustify, {})
+    }
+  ];
+  const findIndex = (value) => {
+    return alignmentOptions.findIndex((option) => option.value === value);
+  };
+  const currentAlignment = currentTextAlign();
+  const currentOption = alignmentOptions[findIndex(currentAlignment)];
+  return /* @__PURE__ */ jsxRuntime.jsxs(TiptapEditorInput.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TiptapEditorInput.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.DropdownMenuTrigger, { disabled: isDisabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TiptapEditorInput.ToolbarButton,
+        {
+          "aria-label": "Text Alignment",
+          disabled: isDisabled,
+          hasArrow: true,
+          children: currentOption.icon && /* @__PURE__ */ jsxRuntime.jsx(currentOption.icon.type, { size: 16 })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledTooltipContent, { children: "Text Alignment" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.DropdownMenuContent,
+      {
+        align: "start",
+        loop: true,
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.DropdownMenuGroup, { children: alignmentOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenuItemStyled,
+          {
+            onSelect: () => handleAlign(option.value),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 12, height: 12, display: "flex", alignItems: "center", justifyContent: "center" }, children: option.value === currentAlignment && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: option.icon }),
+              option.name
+            ]
+          },
+          index
+        )) })
+      }
+    )
+  ] });
+};
+exports.AlignmentToolbar = AlignmentToolbar;

package/dist/_chunks/Alignment-qMOzO-n2.mjs

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlignLeft, AlignCenter, AlignRight, AlignJustify, Check } from "lucide-react";
+import { u as useEditorContext, D as DropdownMenu, e as Tooltip, f as TooltipTrigger, a as DropdownMenuTrigger, T as ToolbarButton, b as DropdownMenuContent, c as DropdownMenuGroup, g as TooltipContent, d as DropdownMenuItem } from "./TiptapEditorInput-BDE09h5-.mjs";
+import styled from "styled-components";
+const DropdownMenuItemStyled = styled(DropdownMenuItem)`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px 6px 4px;
+  font-size: 14px;
+  
+  &:hover {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+  
+  &:focus {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const CheckIcon = styled(Check)`
+  width: 12px;
+  height: 12px;
+  color: ${(props) => props.theme.colors.primary500};
+`;
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 20px;
+  margin-right: 4px;
+`;
+const StyledTooltipContent = styled(TooltipContent)`
+  background-color: ${(props) => props.theme.colors.neutral800};
+  color: ${(props) => props.theme.colors.neutral0};
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 100;
+`;
+const AlignmentToolbar = () => {
+  const { editor } = useEditorContext();
+  const handleAlign = (value) => {
+    editor?.chain().focus().setTextAlign(value).run();
+  };
+  const isDisabled = (editor?.isActive("image") || editor?.isActive("video") || !editor) ?? false;
+  const currentTextAlign = () => {
+    if (editor?.isActive({ textAlign: "left" })) {
+      return "left";
+    }
+    if (editor?.isActive({ textAlign: "center" })) {
+      return "center";
+    }
+    if (editor?.isActive({ textAlign: "right" })) {
+      return "right";
+    }
+    if (editor?.isActive({ textAlign: "justify" })) {
+      return "justify";
+    }
+    return "left";
+  };
+  const alignmentOptions = [
+    {
+      name: "Left Align",
+      value: "left",
+      icon: /* @__PURE__ */ jsx(AlignLeft, {})
+    },
+    {
+      name: "Center Align",
+      value: "center",
+      icon: /* @__PURE__ */ jsx(AlignCenter, {})
+    },
+    {
+      name: "Right Align",
+      value: "right",
+      icon: /* @__PURE__ */ jsx(AlignRight, {})
+    },
+    {
+      name: "Justify Align",
+      value: "justify",
+      icon: /* @__PURE__ */ jsx(AlignJustify, {})
+    }
+  ];
+  const findIndex = (value) => {
+    return alignmentOptions.findIndex((option) => option.value === value);
+  };
+  const currentAlignment = currentTextAlign();
+  const currentOption = alignmentOptions[findIndex(currentAlignment)];
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { disabled: isDisabled, asChild: true, children: /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          "aria-label": "Text Alignment",
+          disabled: isDisabled,
+          hasArrow: true,
+          children: currentOption.icon && /* @__PURE__ */ jsx(currentOption.icon.type, { size: 16 })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(StyledTooltipContent, { children: "Text Alignment" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align: "start",
+        loop: true,
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: alignmentOptions.map((option, index) => /* @__PURE__ */ jsxs(
+          DropdownMenuItemStyled,
+          {
+            onSelect: () => handleAlign(option.value),
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { width: 12, height: 12, display: "flex", alignItems: "center", justifyContent: "center" }, children: option.value === currentAlignment && /* @__PURE__ */ jsx(CheckIcon, {}) }),
+              /* @__PURE__ */ jsx(IconWrapper, { children: option.icon }),
+              option.name
+            ]
+          },
+          index
+        )) })
+      }
+    )
+  ] });
+};
+export {
+  AlignmentToolbar
+};

package/dist/_chunks/Blockquote-9wBGDz3L.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TextQuote } from "lucide-react";
+import { u as useEditorContext, T as ToolbarButton } from "./TiptapEditorInput-BDE09h5-.mjs";
+import styled from "styled-components";
+const QuoteIcon = styled(TextQuote)`
+  width: 16px;
+  height: 16px;
+`;
+const BlockquoteToolbar = forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    return /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Blockquote",
+        "aria-label": "Insert blockquote",
+        isActive: editor?.isActive("blockquote"),
+        onClick: (e) => {
+          editor?.chain().focus().toggleBlockquote().run();
+          onClick?.(e);
+        },
+        disabled: !editor?.can().chain().focus().toggleBlockquote().run(),
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsx(QuoteIcon, {})
+      }
+    );
+  }
+);
+BlockquoteToolbar.displayName = "BlockquoteToolbar";
+export {
+  BlockquoteToolbar
+};

package/dist/_chunks/Blockquote-DeGUfK27.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const QuoteIcon = styled__default.default(lucideReact.TextQuote)`
+  width: 16px;
+  height: 16px;
+`;
+const BlockquoteToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Blockquote",
+        "aria-label": "Insert blockquote",
+        isActive: editor?.isActive("blockquote"),
+        onClick: (e) => {
+          editor?.chain().focus().toggleBlockquote().run();
+          onClick?.(e);
+        },
+        disabled: !editor?.can().chain().focus().toggleBlockquote().run(),
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(QuoteIcon, {})
+      }
+    );
+  }
+);
+BlockquoteToolbar.displayName = "BlockquoteToolbar";
+exports.BlockquoteToolbar = BlockquoteToolbar;

package/dist/_chunks/Bold-C-0g6Ayd.mjs

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment } from "react";
+import { BoldIcon } from "lucide-react";
+import { u as useEditorContext, T as ToolbarButton } from "./TiptapEditorInput-BDE09h5-.mjs";
+import styled from "styled-components";
+const BoldIconStyled = styled(BoldIcon)`
+  width: 16px;
+  height: 16px;
+`;
+const TooltipContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const ShortcutText = styled.span`
+  font-size: 11px;
+  color: ${(props) => props.theme.colors.neutral600};
+`;
+const BoldToolbar = forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    return /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(TooltipContent, { children: [
+          /* @__PURE__ */ jsx("span", { children: "Bold" }),
+          /* @__PURE__ */ jsx(ShortcutText, { children: "(cmd + b)" })
+        ] }) }),
+        "aria-label": "Set bold",
+        isActive: editor?.isActive("bold"),
+        onClick: (e) => {
+          editor?.chain().focus().toggleBold().run();
+          onClick?.(e);
+        },
+        disabled: !editor?.can().chain().focus().toggleBold().run(),
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsx(BoldIconStyled, {})
+      }
+    );
+  }
+);
+BoldToolbar.displayName = "BoldToolbar";
+export {
+  BoldToolbar
+};

package/dist/_chunks/Bold-ClnPsPHt.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lucideReact = require("lucide-react");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const BoldIconStyled = styled__default.default(lucideReact.BoldIcon)`
+  width: 16px;
+  height: 16px;
+`;
+const TooltipContent = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const ShortcutText = styled__default.default.span`
+  font-size: 11px;
+  color: ${(props) => props.theme.colors.neutral600};
+`;
+const BoldToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Bold" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ShortcutText, { children: "(cmd + b)" })
+        ] }) }),
+        "aria-label": "Set bold",
+        isActive: editor?.isActive("bold"),
+        onClick: (e) => {
+          editor?.chain().focus().toggleBold().run();
+          onClick?.(e);
+        },
+        disabled: !editor?.can().chain().focus().toggleBold().run(),
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(BoldIconStyled, {})
+      }
+    );
+  }
+);
+BoldToolbar.displayName = "BoldToolbar";
+exports.BoldToolbar = BoldToolbar;

package/dist/_chunks/ColorAndHighlight-BMmtoSpj.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const lucideReact = require("lucide-react");
+const React = require("react");
+const styled = require("styled-components");
+const TiptapEditorInput = require("./TiptapEditorInput-vfLsCt1p.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const TEXT_COLORS = [
+  { name: "Default", color: "inherit" },
+  { name: "Gray", color: "#6B7280" },
+  { name: "Brown", color: "#92400E" },
+  { name: "Orange", color: "#EA580C" },
+  { name: "Yellow", color: "#CA8A04" },
+  { name: "Green", color: "#16A34A" },
+  { name: "Blue", color: "#2563EB" },
+  { name: "Purple", color: "#9333EA" },
+  { name: "Pink", color: "#DB2777" },
+  { name: "Red", color: "#DC2626" }
+];
+const HIGHLIGHT_COLORS = [
+  { name: "Default", color: "transparent" },
+  { name: "Gray", color: "#F3F4F6" },
+  { name: "Brown", color: "#FEF3C7" },
+  { name: "Orange", color: "#FFEDD5" },
+  { name: "Yellow", color: "#FEF9C3" },
+  { name: "Green", color: "#DCFCE7" },
+  { name: "Blue", color: "#DBEAFE" },
+  { name: "Purple", color: "#F3E8FF" },
+  { name: "Pink", color: "#FCE7F3" },
+  { name: "Red", color: "#FEE2E2" }
+];
+const ColorGrid = styled__default.default.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+`;
+const CompactColorButton = styled__default.default.button`
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
+  
+  ${(props) => props.$isHighlight ? `background-color: ${props.$color}; color: ${props.theme.colors.neutral800};` : `background-color: transparent; color: ${props.$color === "inherit" ? props.theme.colors.neutral800 : props.$color};`}
+
+  ${(props) => props.$color === "inherit" && !props.$isHighlight && `
+    background: linear-gradient(to bottom right, transparent 48%, #ff0000 48%, #ff0000 52%, transparent 52%);
+    border-color: ${props.theme.colors.neutral300};
+    color: ${props.theme.colors.neutral800};
+  `}
+
+   ${(props) => props.$color === "transparent" && props.$isHighlight && `
+    background: linear-gradient(to bottom right, transparent 48%, #ff0000 48%, #ff0000 52%, transparent 52%);
+    background-color: ${props.theme.colors.neutral100};
+  `}
+
+  &:hover {
+    border-color: ${(props) => props.theme.colors.primary500};
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+
+  ${(props) => props.$isActive && `
+    border-color: ${props.theme.colors.primary600};
+    box-shadow: 0 0 0 1px ${props.theme.colors.primary600};
+    transform: scale(1.05);
+  `}
+`;
+const CheckIcon = styled__default.default(lucideReact.Check)`
+  width: 12px;
+  height: 12px;
+  color: ${(props) => props.theme.colors.neutral800};
+  filter: drop-shadow(0 0 1px white);
+`;
+const SectionTitle = styled__default.default.div`
+  margin: 6px 0;
+  padding: 0 4px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral600};
+`;
+const ChevronIcon = styled__default.default(lucideReact.ChevronDown)`
+  width: 12px;
+  height: 12px;
+`;
+const ToolbarContentWrapper = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 2px 0 2px;
+`;
+const ToolbarContent = ({ children, dropdown }) => /* @__PURE__ */ jsxRuntime.jsxs(ToolbarContentWrapper, { children: [
+  children,
+  dropdown && /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, {})
+] });
+const PopoverContent = styled__default.default(designSystem.Popover.Content)`
+  background-color: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${(props) => props.theme.colors.neutral300};
+  border-radius: 4px;
+  padding: 8px;
+  width: 180px;
+  box-shadow: ${(props) => props.theme.shadows.popupShadow};
+`;
+const SeparatorStyled = styled__default.default(TiptapEditorInput.Separator)`
+  margin: 8px 0;
+`;
+const ColorButtonComponent = ({
+  name,
+  color,
+  isActive,
+  onClick,
+  isHighlight
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  CompactColorButton,
+  {
+    $isActive: isActive,
+    $color: color,
+    $isHighlight: isHighlight,
+    onClick,
+    type: "button",
+    "aria-label": name,
+    children: [
+      !isHighlight && color !== "inherit" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BaselineIcon, {}),
+      isHighlight && isActive && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {})
+    ]
+  }
+);
+const ColorAndHighlightToolbar = () => {
+  const { editor } = TiptapEditorInput.useEditorContext();
+  const [recentColors, setRecentColors] = React.useState([]);
+  const currentColor = editor?.getAttributes("textStyle").color;
+  const currentHighlight = editor?.getAttributes("highlight").color;
+  const addToRecent = (color, isHighlight) => {
+    const isDefault = isHighlight ? color === "transparent" : color === "inherit" || color === "";
+    if (isDefault) return;
+    setRecentColors((prev) => {
+      const existing = prev.filter((c) => !(c.color === color && c.isHighlight === isHighlight));
+      return [{ color, isHighlight }, ...existing].slice(0, 5);
+    });
+  };
+  const handleSetColor = (color) => {
+    editor?.chain().focus().setColor(color === currentColor ? "" : color).run();
+    if (color !== currentColor) {
+      addToRecent(color, false);
+    }
+  };
+  const handleSetHighlight = (color) => {
+    editor?.chain().focus().setHighlight(color === currentHighlight ? { color: "" } : { color }).run();
+    if (color !== currentHighlight) {
+      addToRecent(color, true);
+    }
+  };
+  const isDisabled = !editor?.can().chain().setHighlight().run() || !editor?.can().chain().setColor("").run();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", height: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { disabled: isDisabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Text Color & Highlight",
+        "aria-label": "Set color & highlight",
+        style: {
+          color: currentColor,
+          backgroundColor: currentHighlight
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarContent, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HighlighterIcon, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { align: "start", children: [
+      recentColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "Recently Used" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ColorGrid, { children: recentColors.map((recent, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          ColorButtonComponent,
+          {
+            name: recent.color,
+            color: recent.color,
+            isActive: recent.isHighlight ? currentHighlight === recent.color : currentColor === recent.color,
+            onClick: () => recent.isHighlight ? handleSetHighlight(recent.color) : handleSetColor(recent.color),
+            isHighlight: recent.isHighlight
+          },
+          `${recent.color}-${recent.isHighlight}-${index}`
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SeparatorStyled, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "Text Color" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorGrid, { children: TEXT_COLORS.map(({ name, color }) => /* @__PURE__ */ jsxRuntime.jsx(
+        ColorButtonComponent,
+        {
+          name,
+          color,
+          isActive: currentColor === color,
+          onClick: () => handleSetColor(color)
+        },
+        name
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SeparatorStyled, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "Background" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorGrid, { children: HIGHLIGHT_COLORS.map(({ name, color }) => /* @__PURE__ */ jsxRuntime.jsx(
+        ColorButtonComponent,
+        {
+          name,
+          color,
+          isActive: currentHighlight === color,
+          onClick: () => handleSetHighlight(color),
+          isHighlight: true
+        },
+        name
+      )) })
+    ] })
+  ] }) });
+};
+exports.ColorAndHighlightToolbar = ColorAndHighlightToolbar;