@tnd028/strapi-plugin-tiptap-editor 0.0.1

package/dist/_chunks/Table-BhbZ2Blv.mjs

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Table2, Table, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Rows3, Columns3, Trash2 } 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, g as TooltipContent } from "./TiptapEditorInput-BDE09h5-.mjs";
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+`;
+const DropdownMenuGroupStyled = styled(DropdownMenuGroup)`
+  width: 200px;
+`;
+const DropdownMenuItemStyled = styled(DropdownMenuItem)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: 14px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+
+  &:focus {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+`;
+styled(TooltipContent)`
+  background-color: ${(props) => props.theme.colors.neutral800};
+  color: ${(props) => props.theme.colors.neutral0};
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+`;
+const OptionIcon = styled.div`
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const TableToolbar = () => {
+  const { editor } = useEditorContext();
+  if (!editor) return null;
+  const handleAction = (action) => {
+    const chain = editor.chain().focus();
+    switch (action) {
+      case "insert":
+        chain.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+        break;
+      case "add-row-before":
+        chain.addRowBefore().run();
+        break;
+      case "add-row-after":
+        chain.addRowAfter().run();
+        break;
+      case "add-col-before":
+        chain.addColumnBefore().run();
+        break;
+      case "add-col-after":
+        chain.addColumnAfter().run();
+        break;
+      case "delete-row":
+        chain.deleteRow().run();
+        break;
+      case "delete-col":
+        chain.deleteColumn().run();
+        break;
+      case "delete-table":
+        chain.deleteTable().run();
+        break;
+    }
+  };
+  const tableActions = [
+    { label: "Insert Table", value: "insert", icon: /* @__PURE__ */ jsx(Table, { width: 16, height: 16 }) },
+    { label: "Add Row Before", value: "add-row-before", icon: /* @__PURE__ */ jsx(ArrowUp, { width: 16, height: 16 }) },
+    { label: "Add Row After", value: "add-row-after", icon: /* @__PURE__ */ jsx(ArrowDown, { width: 16, height: 16 }) },
+    { label: "Add Column Before", value: "add-col-before", icon: /* @__PURE__ */ jsx(ArrowLeft, { width: 16, height: 16 }) },
+    { label: "Add Column After", value: "add-col-after", icon: /* @__PURE__ */ jsx(ArrowRight, { width: 16, height: 16 }) },
+    { label: "Delete Row", value: "delete-row", icon: /* @__PURE__ */ jsx(Rows3, { width: 16, height: 16 }) },
+    { label: "Delete Column", value: "delete-col", icon: /* @__PURE__ */ jsx(Columns3, { width: 16, height: 16 }) },
+    { label: "Delete Table", value: "delete-table", icon: /* @__PURE__ */ jsx(Trash2, { width: 16, height: 16 }) }
+  ];
+  const isTableActive = editor.isActive("table");
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        tooltip: "Table Actions",
+        "aria-label": "Table Actions",
+        hasArrow: true,
+        children: /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Table2, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align: "start",
+        loop: true,
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(DropdownMenuGroupStyled, { children: tableActions.map((action, idx) => /* @__PURE__ */ jsxs(
+          DropdownMenuItemStyled,
+          {
+            onSelect: () => handleAction(action.value),
+            disabled: action.value !== "insert" && !isTableActive,
+            children: [
+              /* @__PURE__ */ jsx(OptionIcon, { children: action.icon }),
+              action.label
+            ]
+          },
+          idx
+        )) })
+      }
+    )
+  ] });
+};
+export {
+  TableToolbar
+};

package/dist/_chunks/Table-DLaqBAbz.js

@@ -0,0 +1,125 @@
+"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 IconWrapper = styled__default.default.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+`;
+const DropdownMenuGroupStyled = styled__default.default(TiptapEditorInput.DropdownMenuGroup)`
+  width: 200px;
+`;
+const DropdownMenuItemStyled = styled__default.default(TiptapEditorInput.DropdownMenuItem)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: 14px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+
+  &:focus {
+    background-color: ${(props) => props.theme.colors.neutral100};
+  }
+`;
+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;
+`;
+const OptionIcon = styled__default.default.div`
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const TableToolbar = () => {
+  const { editor } = TiptapEditorInput.useEditorContext();
+  if (!editor) return null;
+  const handleAction = (action) => {
+    const chain = editor.chain().focus();
+    switch (action) {
+      case "insert":
+        chain.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+        break;
+      case "add-row-before":
+        chain.addRowBefore().run();
+        break;
+      case "add-row-after":
+        chain.addRowAfter().run();
+        break;
+      case "add-col-before":
+        chain.addColumnBefore().run();
+        break;
+      case "add-col-after":
+        chain.addColumnAfter().run();
+        break;
+      case "delete-row":
+        chain.deleteRow().run();
+        break;
+      case "delete-col":
+        chain.deleteColumn().run();
+        break;
+      case "delete-table":
+        chain.deleteTable().run();
+        break;
+    }
+  };
+  const tableActions = [
+    { label: "Insert Table", value: "insert", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { width: 16, height: 16 }) },
+    { label: "Add Row Before", value: "add-row-before", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { width: 16, height: 16 }) },
+    { label: "Add Row After", value: "add-row-after", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { width: 16, height: 16 }) },
+    { label: "Add Column Before", value: "add-col-before", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { width: 16, height: 16 }) },
+    { label: "Add Column After", value: "add-col-after", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { width: 16, height: 16 }) },
+    { label: "Delete Row", value: "delete-row", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rows3, { width: 16, height: 16 }) },
+    { label: "Delete Column", value: "delete-col", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3, { width: 16, height: 16 }) },
+    { label: "Delete Table", value: "delete-table", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { width: 16, height: 16 }) }
+  ];
+  const isTableActive = editor.isActive("table");
+  return /* @__PURE__ */ jsxRuntime.jsxs(TiptapEditorInput.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TiptapEditorInput.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.ToolbarButton,
+      {
+        tooltip: "Table Actions",
+        "aria-label": "Table Actions",
+        hasArrow: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table2, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TiptapEditorInput.DropdownMenuContent,
+      {
+        align: "start",
+        loop: true,
+        onCloseAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuGroupStyled, { children: tableActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenuItemStyled,
+          {
+            onSelect: () => handleAction(action.value),
+            disabled: action.value !== "insert" && !isTableActive,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(OptionIcon, { children: action.icon }),
+              action.label
+            ]
+          },
+          idx
+        )) })
+      }
+    )
+  ] });
+};
+exports.TableToolbar = TableToolbar;