@tnd028/strapi-plugin-tiptap-editor 0.0.1

package/dist/_chunks/ColorAndHighlight-t1Ui5tcL.mjs

@@ -0,0 +1,215 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Popover } from "@strapi/design-system";
+import { HighlighterIcon, BaselineIcon, ChevronDown, Check } from "lucide-react";
+import { useState } from "react";
+import styled from "styled-components";
+import { u as useEditorContext, T as ToolbarButton, S as Separator } from "./TiptapEditorInput-BDE09h5-.mjs";
+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.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+`;
+const CompactColorButton = styled.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(Check)`
+  width: 12px;
+  height: 12px;
+  color: ${(props) => props.theme.colors.neutral800};
+  filter: drop-shadow(0 0 1px white);
+`;
+const SectionTitle = styled.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(ChevronDown)`
+  width: 12px;
+  height: 12px;
+`;
+const ToolbarContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 2px 0 2px;
+`;
+const ToolbarContent = ({ children, dropdown }) => /* @__PURE__ */ jsxs(ToolbarContentWrapper, { children: [
+  children,
+  dropdown && /* @__PURE__ */ jsx(ChevronIcon, {})
+] });
+const PopoverContent = styled(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(Separator)`
+  margin: 8px 0;
+`;
+const ColorButtonComponent = ({
+  name,
+  color,
+  isActive,
+  onClick,
+  isHighlight
+}) => /* @__PURE__ */ jsxs(
+  CompactColorButton,
+  {
+    $isActive: isActive,
+    $color: color,
+    $isHighlight: isHighlight,
+    onClick,
+    type: "button",
+    "aria-label": name,
+    children: [
+      !isHighlight && color !== "inherit" && /* @__PURE__ */ jsx(BaselineIcon, {}),
+      isHighlight && isActive && /* @__PURE__ */ jsx(CheckIcon, {})
+    ]
+  }
+);
+const ColorAndHighlightToolbar = () => {
+  const { editor } = useEditorContext();
+  const [recentColors, setRecentColors] = 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__ */ jsx(Popover.Root, { children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: "100%" }, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { disabled: isDisabled, children: /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Text Color & Highlight",
+        "aria-label": "Set color & highlight",
+        style: {
+          color: currentColor,
+          backgroundColor: currentHighlight
+        },
+        children: /* @__PURE__ */ jsx(ToolbarContent, { children: /* @__PURE__ */ jsx(HighlighterIcon, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", children: [
+      recentColors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SectionTitle, { children: "Recently Used" }),
+        /* @__PURE__ */ jsx(ColorGrid, { children: recentColors.map((recent, index) => /* @__PURE__ */ 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__ */ jsx(SeparatorStyled, {})
+      ] }),
+      /* @__PURE__ */ jsx(SectionTitle, { children: "Text Color" }),
+      /* @__PURE__ */ jsx(ColorGrid, { children: TEXT_COLORS.map(({ name, color }) => /* @__PURE__ */ jsx(
+        ColorButtonComponent,
+        {
+          name,
+          color,
+          isActive: currentColor === color,
+          onClick: () => handleSetColor(color)
+        },
+        name
+      )) }),
+      /* @__PURE__ */ jsx(SeparatorStyled, {}),
+      /* @__PURE__ */ jsx(SectionTitle, { children: "Background" }),
+      /* @__PURE__ */ jsx(ColorGrid, { children: HIGHLIGHT_COLORS.map(({ name, color }) => /* @__PURE__ */ jsx(
+        ColorButtonComponent,
+        {
+          name,
+          color,
+          isActive: currentHighlight === color,
+          onClick: () => handleSetHighlight(color),
+          isHighlight: true
+        },
+        name
+      )) })
+    ] })
+  ] }) });
+};
+export {
+  ColorAndHighlightToolbar
+};

package/dist/_chunks/Emoji-Bm1_vSh5.mjs

@@ -0,0 +1,263 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect, useMemo } from "react";
+import { Clock, Smile, Cat, Coffee, Activity, Car, Lightbulb, Hash, Flag, Search } from "lucide-react";
+import { u as useEditorContext, T as ToolbarButton } from "./TiptapEditorInput-BDE09h5-.mjs";
+import { Popover } from "@strapi/design-system";
+import styled from "styled-components";
+import { gitHubEmojis } from "@tiptap/extension-emoji";
+const EmojiIcon = styled(Smile)`
+  width: 16px;
+  height: 16px;
+`;
+const PopoverContent = styled(Popover.Content)`
+  padding: 0;
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  border-radius: 4px;
+  width: 320px;
+  max-width: 90vw;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const SearchContainer = styled.div`
+  padding: 8px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+`;
+const SearchIcon = styled(Search)`
+  width: 14px;
+  height: 14px;
+  color: ${({ theme }) => theme.colors.neutral500};
+`;
+const SearchInput = styled.input`
+  border: none;
+  background: none;
+  outline: none;
+  width: 100%;
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.neutral800};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+const ScrollContainer = styled.div`
+  max-height: 280px;
+  height: 280px;
+  overflow-y: auto;
+  padding: 12px;
+  scroll-behavior: smooth;
+`;
+const EmojiGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  margin-bottom: 12px;
+`;
+const EmojiItem = styled.button`
+  border: none;
+  background: none;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+const TabBar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
+  background-color: ${({ theme }) => theme.colors.neutral100};
+`;
+const TabButton = styled.button`
+  border: none;
+  background: none;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: ${({ theme, $isActive }) => $isActive ? theme.colors.primary600 : theme.colors.neutral500};
+  background-color: ${({ theme, $isActive }) => $isActive ? theme.colors.primary100 : "transparent"};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral200};
+    color: ${({ theme }) => theme.colors.neutral700};
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const SectionTitle = styled.div`
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${({ theme }) => theme.colors.neutral500};
+  margin-bottom: 4px;
+  margin-top: 4px;
+`;
+const CATEGORIES = [
+  { id: "recent", icon: Clock, title: "Recent", tags: [] },
+  { id: "smileys", icon: Smile, title: "Smileys & People", tags: ["face", "smile", "person", "joy", "happy", "sad", "mad", "hand", "body"] },
+  { id: "nature", icon: Cat, title: "Animals & Nature", tags: ["animal", "nature", "cat", "dog", "plant", "flower", "weather"] },
+  { id: "food", icon: Coffee, title: "Food & Drink", tags: ["food", "drink", "fruit", "vegetable", "meal"] },
+  { id: "activity", icon: Activity, title: "Activity", tags: ["activity", "sport", "game", "play"] },
+  { id: "travel", icon: Car, title: "Travel & Places", tags: ["travel", "place", "car", "vehicle", "building", "map"] },
+  { id: "objects", icon: Lightbulb, title: "Objects", tags: ["object", "tool", "computer", "device", "light"] },
+  { id: "symbols", icon: Hash, title: "Symbols", tags: ["symbol", "shape", "sign", "arrow"] },
+  { id: "flags", icon: Flag, title: "Flags", tags: ["flag"] }
+];
+const EmojiToolbar = forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    const [open, setOpen] = useState(false);
+    const [activeCategory, setActiveCategory] = useState("recent");
+    const [recent, setRecent] = useState([]);
+    const [searchQuery, setSearchQuery] = useState("");
+    const searchInputRef = useRef(null);
+    const scrollRef = useRef(null);
+    useEffect(() => {
+      const stored = localStorage.getItem("tiptap-recent-emojis");
+      if (stored) {
+        try {
+          const parsed = JSON.parse(stored);
+          setRecent(parsed);
+          if (parsed.length === 0) {
+            setActiveCategory("smileys");
+          }
+        } catch (e) {
+          console.error("Failed to parse recent emojis", e);
+          setActiveCategory("smileys");
+        }
+      } else {
+        setActiveCategory("smileys");
+      }
+    }, []);
+    useEffect(() => {
+      if (open) {
+        setTimeout(() => {
+          searchInputRef.current?.focus();
+        }, 100);
+      } else {
+        setSearchQuery("");
+      }
+    }, [open]);
+    const handleEmojiSelect = (emoji) => {
+      editor.chain().focus().setEmoji(emoji.name).run();
+      const newRecent = [emoji.name, ...recent.filter((n) => n !== emoji.name)].slice(0, 24);
+      setRecent(newRecent);
+      localStorage.setItem("tiptap-recent-emojis", JSON.stringify(newRecent));
+      setOpen(false);
+    };
+    const scrollToCategory = (catId) => {
+      setActiveCategory(catId);
+      const element = document.getElementById(`emoji-category-${catId}`);
+      if (element && scrollRef.current) {
+        scrollRef.current.scrollTop = element.offsetTop - scrollRef.current.offsetTop - 10;
+      }
+    };
+    const categorizedEmojis = useMemo(() => {
+      const groups = {};
+      groups["recent"] = recent.map((name) => gitHubEmojis.find((e) => e.name === name)).filter(Boolean);
+      CATEGORIES.slice(1).forEach((cat) => {
+        groups[cat.id] = gitHubEmojis.filter(
+          (emoji) => emoji.tags.some((tag) => cat.tags.some((catTag) => tag.includes(catTag)))
+        ).slice(0, 100);
+      });
+      return groups;
+    }, [recent]);
+    const searchResults = useMemo(() => {
+      if (!searchQuery.trim()) return [];
+      const query = searchQuery.toLowerCase();
+      return gitHubEmojis.filter(
+        (e) => e.name.toLowerCase().includes(query) || e.shortcodes.some((s) => s.includes(query)) || e.tags.some((t) => t.includes(query))
+      ).slice(0, 100);
+    }, [searchQuery]);
+    return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          tooltip: "Insert Emoji",
+          "aria-label": "Insert emoji",
+          ref,
+          isActive: open,
+          ...props,
+          children: children || /* @__PURE__ */ jsx(EmojiIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", sideOffset: 4, children: [
+        /* @__PURE__ */ jsx(TabBar, { children: CATEGORIES.map((cat) => {
+          const Icon = cat.icon;
+          return /* @__PURE__ */ jsx(
+            TabButton,
+            {
+              $isActive: activeCategory === cat.id && !searchQuery,
+              onClick: () => scrollToCategory(cat.id),
+              title: cat.title,
+              type: "button",
+              children: /* @__PURE__ */ jsx(Icon, {})
+            },
+            cat.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxs(SearchContainer, { children: [
+          /* @__PURE__ */ jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              ref: searchInputRef,
+              placeholder: "Search emojis...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ScrollContainer, { ref: scrollRef, children: searchQuery ? /* @__PURE__ */ jsx(Fragment, { children: searchResults.length > 0 ? /* @__PURE__ */ jsx(EmojiGrid, { children: searchResults.map((item) => /* @__PURE__ */ jsx(
+          EmojiItem,
+          {
+            onClick: () => handleEmojiSelect(item),
+            title: item.name,
+            type: "button",
+            children: item.emoji
+          },
+          item.name
+        )) }) : /* @__PURE__ */ jsx("div", { style: { textAlign: "center", color: "#666", fontSize: "13px", paddingTop: "20px" }, children: "No results found" }) }) : /* @__PURE__ */ jsx(Fragment, { children: CATEGORIES.map((cat) => {
+          const emojis = categorizedEmojis[cat.id];
+          if (!emojis || emojis.length === 0) return null;
+          return /* @__PURE__ */ jsxs("div", { id: `emoji-category-${cat.id}`, children: [
+            /* @__PURE__ */ jsx(SectionTitle, { children: cat.title }),
+            /* @__PURE__ */ jsx(EmojiGrid, { children: emojis.map((item) => /* @__PURE__ */ jsx(
+              EmojiItem,
+              {
+                onClick: () => handleEmojiSelect(item),
+                title: item.name,
+                type: "button",
+                children: item.emoji
+              },
+              item.name
+            )) })
+          ] }, cat.id);
+        }) }) })
+      ] })
+    ] });
+  }
+);
+EmojiToolbar.displayName = "EmojiToolbar";
+export {
+  EmojiToolbar
+};