@tnd028/strapi-plugin-tiptap-editor 0.0.1

package/dist/_chunks/SearchAndReplace-DzNdbTWJ.js

@@ -0,0 +1,349 @@
+"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 designSystem = require("@strapi/design-system");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const RepeatIcon = styled__default.default(lucideReact.Repeat)`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+`;
+const ArrowIcon = styled__default.default.div`
+  width: 16px;
+  height: 16px;
+`;
+const CloseIcon = styled__default.default(lucideReact.X)`
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+`;
+const PopoverContent = styled__default.default(designSystem.Popover.Content)`
+  position: relative;
+  display: flex;
+  width: 400px;
+  padding: 10px 12px;
+`;
+const SearchContainer = styled__default.default.div`
+  position: relative;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`;
+const SearchInput = styled__default.default(TiptapEditorInput.Input)`
+  width: 192px;
+`;
+const ResultCount = styled__default.default.span`
+  font-size: 14px;
+`;
+const IconButton = styled__default.default(TiptapEditorInput.Button)`
+  width: 28px;
+  height: 28px;
+`;
+const VerticalSeparator = styled__default.default(TiptapEditorInput.Separator)`
+  height: 28px;
+  margin: 0 2px;
+`;
+const ReplaceContainer = styled__default.default.div`
+  position: relative;
+  width: 100%;
+`;
+const CloseButton = styled__default.default(CloseIcon)`
+  position: absolute;
+  right: 12px;
+  top: 12px;
+`;
+const Header = styled__default.default.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 12px;
+`;
+const BackButton = styled__default.default(IconButton)`
+  border-radius: 50%;
+`;
+const Title = styled__default.default.h2`
+  font-size: 14px;
+  font-weight: 500;
+`;
+const FormSection = styled__default.default.div`
+  margin: 8px 0;
+  width: 100%;
+`;
+const InputGroup = styled__default.default.div`
+  margin-bottom: 12px;
+`;
+const InputLabel = styled__default.default(TiptapEditorInput.Label)`
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral600};
+`;
+const CheckboxContainer = styled__default.default.div`
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const CheckboxLabel = styled__default.default(TiptapEditorInput.Label)`
+  font-size: 14px;
+  font-weight: 500;
+`;
+const ActionsContainer = styled__default.default.div`
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const NavigationButtons = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const MainActions = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const ActionButton = styled__default.default(TiptapEditorInput.Button)`
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+`;
+const TriggerButton = styled__default.default(TiptapEditorInput.ToolbarButton)`
+  height: 32px;
+  width: auto !important;
+  padding: 0 12px;
+  font-weight: 400;
+  display: flex;
+  min-width: fit-content;
+  align-items: center;
+`;
+function SearchAndReplaceToolbar() {
+  const { editor } = TiptapEditorInput.useEditorContext();
+  const [open, setOpen] = React.useState(false);
+  const [replacing, setReplacing] = React.useState(false);
+  const [searchText, setSearchText] = React.useState("");
+  const [replaceText, setReplaceText] = React.useState("");
+  const [checked, setChecked] = React.useState(false);
+  const results = editor?.storage?.searchAndReplace.results;
+  const selectedResult = editor?.storage?.searchAndReplace.selectedResult;
+  const replace = () => editor?.chain().replace().run();
+  const replaceAll = () => editor?.chain().replaceAll().run();
+  const selectNext = () => editor?.chain().selectNextResult().run();
+  const selectPrevious = () => editor?.chain().selectPreviousResult().run();
+  React.useEffect(() => {
+    editor?.chain().setSearchTerm(searchText).run();
+  }, [searchText, editor]);
+  React.useEffect(() => {
+    editor?.chain().setReplaceTerm(replaceText).run();
+  }, [replaceText, editor]);
+  React.useEffect(() => {
+    editor?.chain().setCaseSensitive(checked).run();
+  }, [checked, editor]);
+  React.useEffect(() => {
+    if (!open) {
+      setReplaceText("");
+      setSearchText("");
+      setReplacing(false);
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { disabled: !editor, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      TriggerButton,
+      {
+        tooltip: "Search & Replace",
+        style: { minWidth: "fit-content" },
+        onClick: () => {
+          setOpen(!open);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RepeatIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Search & Replace" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        align: "end",
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        onEscapeKeyDown: () => {
+          setOpen(false);
+        },
+        children: !replacing ? /* @__PURE__ */ jsxRuntime.jsxs(SearchContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SearchInput,
+            {
+              value: searchText,
+              onChange: (e) => {
+                setSearchText(e.target.value);
+              },
+              placeholder: "Search..."
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(ResultCount, { children: [
+            results?.length === 0 ? selectedResult : selectedResult + 1,
+            "/",
+            results?.length
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              onClick: selectPrevious,
+              size: "icon",
+              variant: "ghost",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { as: lucideReact.ArrowLeft })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              onClick: selectNext,
+              size: "icon",
+              variant: "ghost",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { as: lucideReact.ArrowRight })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(VerticalSeparator, { orientation: "vertical" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              onClick: () => {
+                setReplacing(true);
+              },
+              size: "icon",
+              variant: "ghost",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { as: lucideReact.Repeat })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton,
+            {
+              onClick: () => {
+                setOpen(false);
+              },
+              size: "icon",
+              variant: "ghost",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { as: lucideReact.X })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(ReplaceContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CloseButton,
+            {
+              onClick: () => {
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BackButton,
+              {
+                size: "icon",
+                variant: "ghost",
+                onClick: () => {
+                  setReplacing(false);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { as: lucideReact.ArrowLeft })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Title, { children: "Search and replace" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { children: "Search" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TiptapEditorInput.Input,
+                {
+                  value: searchText,
+                  onChange: (e) => {
+                    setSearchText(e.target.value);
+                  },
+                  placeholder: "Search..."
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(ResultCount, { children: [
+                results?.length === 0 ? selectedResult : selectedResult + 1,
+                "/",
+                results?.length
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { children: "Replace with" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TiptapEditorInput.Input,
+                {
+                  value: replaceText,
+                  onChange: (e) => {
+                    setReplaceText(e.target.value);
+                  },
+                  placeholder: "Replace..."
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CheckboxContainer, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Checkbox,
+                {
+                  checked,
+                  onCheckedChange: (checked2) => {
+                    setChecked(checked2);
+                  },
+                  id: "match_case"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(CheckboxLabel, { htmlFor: "match_case", children: "Match case" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ActionsContainer, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(NavigationButtons, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  onClick: selectPrevious,
+                  size: "icon",
+                  variant: "secondary",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { as: lucideReact.ArrowLeft })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                IconButton,
+                {
+                  onClick: selectNext,
+                  size: "icon",
+                  variant: "secondary",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ArrowIcon, { as: lucideReact.ArrowRight })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(MainActions, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ActionButton,
+                {
+                  variant: "secondary",
+                  onClick: replaceAll,
+                  children: "Replace All"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ActionButton,
+                {
+                  onClick: replace,
+                  children: "Replace"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+exports.SearchAndReplaceToolbar = SearchAndReplaceToolbar;

package/dist/_chunks/Strikethrough-BygxCHak.mjs

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Underline, Strikethrough, Check } from "lucide-react";
+import { forwardRef } from "react";
+import styled from "styled-components";
+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";
+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 StrikeThroughToolbar = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { editor } = useEditorContext();
+    if (!editor) {
+      return null;
+    }
+    const items = [
+      {
+        action: () => editor.chain().focus().toggleUnderline().run(),
+        isActive: () => editor.isActive("underline"),
+        disabled: !editor.can().chain().focus().toggleUnderline().run(),
+        title: "Underline",
+        icon: /* @__PURE__ */ jsx(Underline, {}),
+        shortcut: "mod+u"
+      },
+      {
+        action: () => editor.chain().focus().toggleStrike().run(),
+        isActive: () => editor.isActive("strike"),
+        disabled: !editor.can().chain().focus().toggleStrike().run(),
+        title: "Strikethrough",
+        icon: /* @__PURE__ */ jsx(Strikethrough, {}),
+        shortcut: "mod+shift+x"
+      }
+    ];
+    const isDisabled = items.every((item) => item.disabled);
+    const activeItem = items.find((item) => item.isActive());
+    activeItem ? activeItem.icon : /* @__PURE__ */ jsx(Strikethrough, {});
+    activeItem ? activeItem.title : "Text Decoration";
+    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 Decoration",
+            disabled: isDisabled,
+            hasArrow: true,
+            isActive: !!activeItem,
+            ref,
+            ...props,
+            children: /* @__PURE__ */ jsx(IconWrapper, { children: activeItem ? activeItem.icon : /* @__PURE__ */ jsx(Strikethrough, {}) })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(StyledTooltipContent, { children: "Text Decoration" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        DropdownMenuContent,
+        {
+          align: "start",
+          loop: true,
+          onCloseAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: items.map((option, index) => /* @__PURE__ */ jsxs(
+            DropdownMenuItemStyled,
+            {
+              onSelect: () => {
+                option.action();
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { style: { width: 12, height: 12, display: "flex", alignItems: "center", justifyContent: "center" }, children: option.isActive() && /* @__PURE__ */ jsx(CheckIcon, {}) }),
+                /* @__PURE__ */ jsx(IconWrapper, { children: option.icon }),
+                option.title
+              ]
+            },
+            index
+          )) })
+        }
+      )
+    ] });
+  }
+);
+StrikeThroughToolbar.displayName = "StrikeThroughToolbar";
+export {
+  StrikeThroughToolbar
+};

package/dist/_chunks/Strikethrough-DQfR4OFk.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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 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 StrikeThroughToolbar = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    if (!editor) {
+      return null;
+    }
+    const items = [
+      {
+        action: () => editor.chain().focus().toggleUnderline().run(),
+        isActive: () => editor.isActive("underline"),
+        disabled: !editor.can().chain().focus().toggleUnderline().run(),
+        title: "Underline",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Underline, {}),
+        shortcut: "mod+u"
+      },
+      {
+        action: () => editor.chain().focus().toggleStrike().run(),
+        isActive: () => editor.isActive("strike"),
+        disabled: !editor.can().chain().focus().toggleStrike().run(),
+        title: "Strikethrough",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, {}),
+        shortcut: "mod+shift+x"
+      }
+    ];
+    const isDisabled = items.every((item) => item.disabled);
+    const activeItem = items.find((item) => item.isActive());
+    activeItem ? activeItem.icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, {});
+    activeItem ? activeItem.title : "Text Decoration";
+    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 Decoration",
+            disabled: isDisabled,
+            hasArrow: true,
+            isActive: !!activeItem,
+            ref,
+            ...props,
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: activeItem ? activeItem.icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, {}) })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(StyledTooltipContent, { children: "Text Decoration" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TiptapEditorInput.DropdownMenuContent,
+        {
+          align: "start",
+          loop: true,
+          onCloseAutoFocus: (e) => {
+            e.preventDefault();
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.DropdownMenuGroup, { children: items.map((option, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            DropdownMenuItemStyled,
+            {
+              onSelect: () => {
+                option.action();
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 12, height: 12, display: "flex", alignItems: "center", justifyContent: "center" }, children: option.isActive() && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: option.icon }),
+                option.title
+              ]
+            },
+            index
+          )) })
+        }
+      )
+    ] });
+  }
+);
+StrikeThroughToolbar.displayName = "StrikeThroughToolbar";
+exports.StrikeThroughToolbar = StrikeThroughToolbar;