@tnd028/strapi-plugin-tiptap-editor 0.0.1

package/dist/_chunks/Lists-BKopoFR6.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const lucideReact = require("lucide-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 ListsToolbar = () => {
+  const { editor } = TiptapEditorInput.useEditorContext();
+  const items = [
+    {
+      action: () => editor.commands.toggleBulletList(),
+      isActive: () => editor.isActive("bulletList"),
+      disabled: !editor.can().toggleBulletList(),
+      title: "Bullet List",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, {})
+    },
+    {
+      action: () => editor.commands.toggleOrderedList(),
+      isActive: () => editor.isActive("orderedList"),
+      disabled: !editor.can().toggleOrderedList(),
+      title: "Ordered List",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, {})
+    },
+    {
+      action: () => editor.commands.toggleTaskList(),
+      isActive: () => editor.isActive("taskList"),
+      disabled: !editor.can().toggleTaskList(),
+      title: "Task List",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTodo, {})
+    }
+  ];
+  const isDisabled = items.every((item) => item.disabled);
+  const activeItem = items.find((item) => item.isActive());
+  return /* @__PURE__ */ jsxRuntime.jsxs(TiptapEditorInput.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.DropdownMenuTrigger, { disabled: isDisabled, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Lists",
+        "aria-label": "Lists",
+        disabled: isDisabled,
+        isActive: !!activeItem,
+        hasArrow: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: activeItem ? activeItem.icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 16 }) })
+      }
+    ) }),
+    /* @__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
+        )) })
+      }
+    )
+  ] });
+};
+exports.ListsToolbar = ListsToolbar;

package/dist/_chunks/Lists-DsKxj3MD.mjs

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { List, ListOrdered, ListTodo, Check } from "lucide-react";
+import styled from "styled-components";
+import { u as useEditorContext, D as DropdownMenu, a as DropdownMenuTrigger, T as ToolbarButton, b as DropdownMenuContent, c as DropdownMenuGroup, 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 ListsToolbar = () => {
+  const { editor } = useEditorContext();
+  const items = [
+    {
+      action: () => editor.commands.toggleBulletList(),
+      isActive: () => editor.isActive("bulletList"),
+      disabled: !editor.can().toggleBulletList(),
+      title: "Bullet List",
+      icon: /* @__PURE__ */ jsx(List, {})
+    },
+    {
+      action: () => editor.commands.toggleOrderedList(),
+      isActive: () => editor.isActive("orderedList"),
+      disabled: !editor.can().toggleOrderedList(),
+      title: "Ordered List",
+      icon: /* @__PURE__ */ jsx(ListOrdered, {})
+    },
+    {
+      action: () => editor.commands.toggleTaskList(),
+      isActive: () => editor.isActive("taskList"),
+      disabled: !editor.can().toggleTaskList(),
+      title: "Task List",
+      icon: /* @__PURE__ */ jsx(ListTodo, {})
+    }
+  ];
+  const isDisabled = items.every((item) => item.disabled);
+  const activeItem = items.find((item) => item.isActive());
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { disabled: isDisabled, asChild: true, children: /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Lists",
+        "aria-label": "Lists",
+        disabled: isDisabled,
+        isActive: !!activeItem,
+        hasArrow: true,
+        children: /* @__PURE__ */ jsx(IconWrapper, { children: activeItem ? activeItem.icon : /* @__PURE__ */ jsx(List, { size: 16 }) })
+      }
+    ) }),
+    /* @__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
+        )) })
+      }
+    )
+  ] });
+};
+export {
+  ListsToolbar
+};

package/dist/_chunks/Redo-1mEX1yOd.js

@@ -0,0 +1,35 @@
+"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 RedoIcon = styled__default.default(lucideReact.Redo2)`
+  width: 16px;
+  height: 16px;
+`;
+const RedoToolbar = React.forwardRef(
+  ({ className, onClick, children, ...props }, ref) => {
+    const { editor } = TiptapEditorInput.useEditorContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Redo",
+        "aria-label": "Redo",
+        onClick: (e) => {
+          editor?.chain().focus().redo().run();
+          onClick?.(e);
+        },
+        disabled: !editor?.can().chain().focus().redo().run(),
+        ref,
+        ...props,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx(RedoIcon, {})
+      }
+    );
+  }
+);
+RedoToolbar.displayName = "RedoToolbar";
+exports.RedoToolbar = RedoToolbar;

package/dist/_chunks/Redo-Ca3VQxSe.mjs

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

package/dist/_chunks/SearchAndReplace-DmU5DlWv.mjs

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