@wair/editor 0.0.1-beta.1

package/dist/index.css

@@ -0,0 +1,449 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    /* 新增变量 */
+    --brand: 211 100% 49%;
+    --brand-heavy: 212 100% 27%;
+    --radius: 8px;
+    --gray-rgb: 28, 31, 35;
+    --text-primary: 214 11% 12%;
+    --text-second: 210 4% 30%;
+    --text-auxiliary: 210 2% 47%;
+    --text-disabled: 210 1% 74%;
+
+    --border-default: 214 11% 12% / 0.06;
+    --border-focus: 211 100% 49%;
+
+    --status-success: 126 50% 47%;
+    --status-success-heavy: 126 51% 25%;
+
+    --status-warning: 32 100% 49%;
+    --status-warning-heavy: 32 100% 27%;
+
+    --status-danger: 7 95% 55%;
+    --status-danger-heavy: 7 77% 30%;
+
+    --cyan: 186 95% 37%;
+    --cyan-heavy: 186 94% 20%;
+
+    --purple: 291 63% 43%;
+    --purple-heavy: 291 63% 24%;
+
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+.tiptap {
+  p {
+    @apply my-3;
+  }
+}
+
+.tiptap {
+  @apply relative min-h-[500px] px-20 py-10 focus:outline-none;
+  outline: none;
+}
+
+/* 标题样式 */
+.tiptap h1 {
+  @apply my-4 text-3xl font-bold tracking-tight;
+}
+
+.tiptap h2 {
+  @apply my-3 text-2xl font-semibold tracking-tight;
+}
+
+/* 占位符样式 (Placeholder Extension) */
+.tiptap p.is-editor-empty:first-child::before {
+  @apply pointer-events-none float-left h-0 text-muted-foreground;
+  content: attr(data-placeholder);
+}
+
+.tiptap h1.is-empty::before,
+.tiptap h2.is-empty::before,
+.tiptap h3.is-empty::before,
+.tiptap h4.is-empty::before,
+.tiptap h5.is-empty::before,
+.tiptap h6.is-empty::before,
+.tiptap p.is-empty::before {
+  color: hsl(var(--muted-foreground) / 0.5);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+.tiptap pre.is-empty::before {
+  color: black;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* 选中文本样式 */
+.tiptap *::selection {
+  @apply bg-blue-100 text-blue-900;
+}
+
+/* 图片样式 */
+.tiptap img {
+  @apply my-4 h-auto max-w-full rounded-lg border shadow-sm transition-all;
+}
+
+.tiptap img.ProseMirror-selectednode {
+  @apply border-blue-500 outline outline-4 outline-blue-500/30;
+}
+
+/* 列表样式优化 */
+.tiptap ul {
+  @apply ml-6 list-disc space-y-1;
+}
+
+.tiptap ol {
+  @apply ml-6 list-decimal space-y-1;
+}
+
+/* src/styles/tiptap.css */
+
+.tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+  margin-left: 0.5rem;
+}
+
+.tiptap ul[data-type="taskList"] li {
+  display: flex;
+  align-items: center;
+}
+
+/* 隐藏原生 checkbox 的默认样式，可以使用 shadcn 风格定制 */
+.tiptap ul[data-type="taskList"] li > label {
+  @apply mr-3 flex-shrink-0 cursor-pointer select-none pt-1;
+}
+
+.tiptap ul[data-type="taskList"] li > label input[type="checkbox"] {
+  @apply h-4 w-4 cursor-pointer rounded border-muted-foreground/30 accent-primary;
+}
+
+/* 任务内容容器 */
+.tiptap ul[data-type="taskList"] li > div {
+  @apply min-w-0 flex-1;
+}
+
+/* --- 核心功能：勾选后的中划线效果 --- */
+.tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
+  @apply text-muted-foreground;
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+  text-decoration-color: hsl(var(--muted-foreground) / 0.5);
+  transition: all 0.2s ease;
+}
+
+/* 嵌套列表的缩进 */
+.tiptap ul[data-type="taskList"] ul[data-type="taskList"] {
+  margin-left: 1.5rem;
+  margin-top: 0.25rem;
+}
+
+/* 引用块样式 */
+.tiptap blockquote {
+  @apply border-l-4 border-muted-foreground/30 pl-4 italic text-muted-foreground;
+}
+
+.tiptap code {
+  @apply rounded-md bg-muted px-1.5 py-0.5 text-sm text-black;
+}
+.tiptap pre {
+  @apply my-6 rounded-lg bg-muted p-4 font-mono text-black;
+}
+.tiptap pre code {
+  @apply bg-transparent p-0 text-sm;
+}
+
+/* 编辑器基础样式 */
+.tiptap {
+  /* 第一个子元素移除上边距 */
+  :first-child {
+    @apply mt-0;
+  }
+
+  /* 图片样式：块级元素、高度自动、上下边距为0、最大宽度100% */
+  img {
+    @apply my-0 block h-auto max-w-full;
+
+    /* 图片被选中时的样式：紫色3px轮廓线 */
+    &.ProseMirror-selectednode {
+      @apply outline-[3px] outline-purple-500;
+    }
+  }
+
+  /* 调整大小手柄的基础样式 */
+  [data-resize-handle] {
+    @apply absolute z-10 rounded-[2px];
+    @apply border border-white/80 bg-gray-500/10;
+
+    /* 悬停时背景更深 */
+    &:hover {
+      @apply bg-black/30;
+    }
+
+    /* 四个角落的手柄：8x8像素 */
+    &[data-resize-handle="top-left"],
+    &[data-resize-handle="top-right"],
+    &[data-resize-handle="bottom-left"],
+    &[data-resize-handle="bottom-right"] {
+      @apply h-2 w-2;
+    }
+
+    /* 左上角手柄：位置和光标样式 */
+    &[data-resize-handle="top-left"] {
+      @apply -left-1 -top-1 cursor-nwse-resize;
+    }
+
+    /* 右上角手柄：位置和光标样式 */
+    &[data-resize-handle="top-right"] {
+      @apply -right-1 -top-1 cursor-nesw-resize;
+    }
+
+    /* 左下角手柄：位置和光标样式 */
+    &[data-resize-handle="bottom-left"] {
+      @apply -bottom-1 -left-1 cursor-nesw-resize;
+    }
+
+    /* 右下角手柄：位置和光标样式 */
+    &[data-resize-handle="bottom-right"] {
+      @apply -bottom-1 -right-1 cursor-nwse-resize;
+    }
+
+    /* 上下边缘手柄：高度6px，左右各留8px */
+    &[data-resize-handle="top"],
+    &[data-resize-handle="bottom"] {
+      @apply left-2 right-2 h-0.5;
+    }
+
+    /* 顶部边缘手柄：位置和光标样式 */
+    &[data-resize-handle="top"] {
+      @apply -top-[3px] cursor-ns-resize;
+    }
+
+    /* 底部边缘手柄：位置和光标样式 */
+    &[data-resize-handle="bottom"] {
+      @apply -bottom-[3px] cursor-ns-resize;
+    }
+
+    /* 左右边缘手柄：宽度6px，上下各留8px */
+    &[data-resize-handle="left"],
+    &[data-resize-handle="right"] {
+      @apply bottom-2 top-2 w-0.5;
+    }
+
+    /* 左侧边缘手柄：位置和光标样式 */
+    &[data-resize-handle="left"] {
+      @apply -left-[3px] cursor-ew-resize;
+    }
+
+    /* 右侧边缘手柄：位置和光标样式 */
+    &[data-resize-handle="right"] {
+      @apply -right-[3px] cursor-ew-resize;
+    }
+  }
+
+  /* 调整大小状态激活时的包装器样式：1px黑色半透明轮廓 */
+  [data-resize-state="true"] [data-resize-wrapper] {
+    @apply rounded-sm outline outline-1 outline-black/25;
+  }
+}
+
+.tiptap {
+  .tableWrapper {
+    @apply my-6 overflow-x-auto overflow-y-hidden pl-3 pt-3;
+  }
+
+  table {
+    @apply my-0 box-border w-full border-collapse rounded border-black/10;
+    @apply dark:border-white/20;
+
+    td,
+    th {
+      @apply relative min-w-[20px] border border-black/10 p-2 text-left align-top;
+      @apply dark:border-white/20;
+
+      &:first-of-type:not(a) {
+        @apply mt-0;
+      }
+
+      p {
+        @apply m-0;
+
+        & + p {
+          @apply mt-3;
+        }
+      }
+    }
+
+    th {
+      @apply font-bold;
+    }
+
+    .column-resize-handle {
+      @apply pointer-events-none absolute -bottom-0.5 -right-0.5 top-0 w-1 bg-blue-500;
+      &::before {
+        @apply ml-2 h-full w-[1px] bg-black/20;
+        @apply dark:bg-white/20;
+        content: "";
+      }
+    }
+
+    .selectedCell {
+      @apply border-double border-black/20 bg-black/5;
+      @apply dark:border-white/20 dark:bg-white/10;
+    }
+
+    .grip-column,
+    .grip-row {
+      @apply absolute flex cursor-pointer items-center justify-center bg-black/5;
+      @apply dark:bg-white/10;
+    }
+    .grip-column {
+      @apply -top-3 left-0 -ml-[1px] h-3 w-[calc(100%+1px)] border-l border-black/20;
+      @apply dark:border-white/20;
+
+      &:hover,
+      &.selected {
+        &::before {
+          content: "";
+          @apply w-2.5;
+        }
+      }
+
+      &:hover {
+        @apply bg-black/10;
+        @apply dark:bg-white/20;
+
+        &::before {
+          @apply border-b-2 border-dotted border-black/60;
+          @apply dark:border-white/60;
+        }
+      }
+
+      &.first {
+        @apply rounded-tl-sm border-transparent;
+      }
+
+      &.last {
+        @apply rounded-tr-sm;
+      }
+
+      &.selected {
+        @apply border-black/30 bg-black/30 shadow-sm;
+        @apply dark:border-white/30 dark:bg-white/30;
+
+        &::before {
+          @apply border-b-2 border-dotted;
+        }
+      }
+    }
+
+    .grip-row {
+      @apply -left-3 top-0 -mt-[1px] h-[calc(100%+1px)] w-3 border-t border-black/20;
+      @apply dark:border-white/20;
+
+      &:hover,
+      &.selected {
+        &::before {
+          @apply h-2.5;
+          content: "";
+        }
+      }
+      &:hover {
+        @apply bg-black/10;
+        @apply dark:bg-white/20;
+
+        &::before {
+          @apply border-l-2 border-dotted border-black/60;
+          @apply dark:border-white/60;
+        }
+      }
+
+      &.first {
+        @apply rounded-tl-sm border-transparent;
+      }
+
+      &.last {
+        @apply rounded-bl-sm;
+      }
+
+      &.selected {
+        @apply border-black/30 bg-black/30 shadow-sm;
+        @apply dark:border-white/30 dark:bg-white/30;
+
+        &::before {
+          @apply border-l-2 border-dotted;
+        }
+      }
+    }
+  }
+
+  &.resize-cursor {
+    @apply cursor-col-resize;
+  }
+}
+
+
+/*# sourceMappingURL=index.css.map*/

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.css","names":[],"sources":["../src/styles/index.css","../src/styles/tiptap.css","../src/styles/image.css","../src/styles/table.css"],"sourcesContent":["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n    /* 新增变量 */\n    --brand: 211 100% 49%;\n    --brand-heavy: 212 100% 27%;\n    --radius: 8px;\n    --gray-rgb: 28, 31, 35;\n    --text-primary: 214 11% 12%;\n    --text-second: 210 4% 30%;\n    --text-auxiliary: 210 2% 47%;\n    --text-disabled: 210 1% 74%;\n\n    --border-default: 214 11% 12% / 0.06;\n    --border-focus: 211 100% 49%;\n\n    --status-success: 126 50% 47%;\n    --status-success-heavy: 126 51% 25%;\n\n    --status-warning: 32 100% 49%;\n    --status-warning-heavy: 32 100% 27%;\n\n    --status-danger: 7 95% 55%;\n    --status-danger-heavy: 7 77% 30%;\n\n    --cyan: 186 95% 37%;\n    --cyan-heavy: 186 94% 20%;\n\n    --purple: 291 63% 43%;\n    --purple-heavy: 291 63% 24%;\n\n    --color-1: 0 100% 63%;\n    --color-2: 270 100% 63%;\n    --color-3: 210 100% 63%;\n    --color-4: 195 100% 63%;\n    --color-5: 90 100% 63%;\n  }\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n.tiptap {\n  p {\n    @apply my-3;\n  }\n}\n",".tiptap {\n  @apply relative min-h-[500px] px-20 py-10 focus:outline-none;\n  outline: none;\n}\n\n/* 标题样式 */\n.tiptap h1 {\n  @apply my-4 text-3xl font-bold tracking-tight;\n}\n\n.tiptap h2 {\n  @apply my-3 text-2xl font-semibold tracking-tight;\n}\n\n/* 占位符样式 (Placeholder Extension) */\n.tiptap p.is-editor-empty:first-child::before {\n  @apply pointer-events-none float-left h-0 text-muted-foreground;\n  content: attr(data-placeholder);\n}\n\n.tiptap h1.is-empty::before,\n.tiptap h2.is-empty::before,\n.tiptap h3.is-empty::before,\n.tiptap h4.is-empty::before,\n.tiptap h5.is-empty::before,\n.tiptap h6.is-empty::before,\n.tiptap p.is-empty::before {\n  color: hsl(var(--muted-foreground) / 0.5);\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n.tiptap pre.is-empty::before {\n  color: black;\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n\n/* 选中文本样式 */\n.tiptap *::selection {\n  @apply bg-blue-100 text-blue-900;\n}\n\n/* 图片样式 */\n.tiptap img {\n  @apply my-4 h-auto max-w-full rounded-lg border shadow-sm transition-all;\n}\n\n.tiptap img.ProseMirror-selectednode {\n  @apply border-blue-500 outline outline-4 outline-blue-500/30;\n}\n\n/* 列表样式优化 */\n.tiptap ul {\n  @apply ml-6 list-disc space-y-1;\n}\n\n.tiptap ol {\n  @apply ml-6 list-decimal space-y-1;\n}\n\n/* src/styles/tiptap.css */\n\n.tiptap ul[data-type=\"taskList\"] {\n  list-style: none;\n  padding: 0;\n  margin-left: 0.5rem;\n}\n\n.tiptap ul[data-type=\"taskList\"] li {\n  display: flex;\n  align-items: center;\n}\n\n/* 隐藏原生 checkbox 的默认样式，可以使用 shadcn 风格定制 */\n.tiptap ul[data-type=\"taskList\"] li > label {\n  @apply mr-3 flex-shrink-0 cursor-pointer select-none pt-1;\n}\n\n.tiptap ul[data-type=\"taskList\"] li > label input[type=\"checkbox\"] {\n  @apply h-4 w-4 cursor-pointer rounded border-muted-foreground/30 accent-primary;\n}\n\n/* 任务内容容器 */\n.tiptap ul[data-type=\"taskList\"] li > div {\n  @apply min-w-0 flex-1;\n}\n\n/* --- 核心功能：勾选后的中划线效果 --- */\n.tiptap ul[data-type=\"taskList\"] li[data-checked=\"true\"] > div {\n  @apply text-muted-foreground;\n  text-decoration: line-through;\n  text-decoration-thickness: 2px;\n  text-decoration-color: hsl(var(--muted-foreground) / 0.5);\n  transition: all 0.2s ease;\n}\n\n/* 嵌套列表的缩进 */\n.tiptap ul[data-type=\"taskList\"] ul[data-type=\"taskList\"] {\n  margin-left: 1.5rem;\n  margin-top: 0.25rem;\n}\n\n/* 引用块样式 */\n.tiptap blockquote {\n  @apply border-l-4 border-muted-foreground/30 pl-4 italic text-muted-foreground;\n}\n\n.tiptap code {\n  @apply rounded-md bg-muted px-1.5 py-0.5 text-sm text-black;\n}\n.tiptap pre {\n  @apply my-6 rounded-lg bg-muted p-4 font-mono text-black;\n}\n.tiptap pre code {\n  @apply bg-transparent p-0 text-sm;\n}\n","/* 编辑器基础样式 */\n.tiptap {\n  /* 第一个子元素移除上边距 */\n  :first-child {\n    @apply mt-0;\n  }\n\n  /* 图片样式：块级元素、高度自动、上下边距为0、最大宽度100% */\n  img {\n    @apply my-0 block h-auto max-w-full;\n\n    /* 图片被选中时的样式：紫色3px轮廓线 */\n    &.ProseMirror-selectednode {\n      @apply outline-[3px] outline-purple-500;\n    }\n  }\n\n  /* 调整大小手柄的基础样式 */\n  [data-resize-handle] {\n    @apply absolute z-10 rounded-[2px];\n    @apply border border-white/80 bg-gray-500/10;\n\n    /* 悬停时背景更深 */\n    &:hover {\n      @apply bg-black/30;\n    }\n\n    /* 四个角落的手柄：8x8像素 */\n    &[data-resize-handle=\"top-left\"],\n    &[data-resize-handle=\"top-right\"],\n    &[data-resize-handle=\"bottom-left\"],\n    &[data-resize-handle=\"bottom-right\"] {\n      @apply h-2 w-2;\n    }\n\n    /* 左上角手柄：位置和光标样式 */\n    &[data-resize-handle=\"top-left\"] {\n      @apply -left-1 -top-1 cursor-nwse-resize;\n    }\n\n    /* 右上角手柄：位置和光标样式 */\n    &[data-resize-handle=\"top-right\"] {\n      @apply -right-1 -top-1 cursor-nesw-resize;\n    }\n\n    /* 左下角手柄：位置和光标样式 */\n    &[data-resize-handle=\"bottom-left\"] {\n      @apply -bottom-1 -left-1 cursor-nesw-resize;\n    }\n\n    /* 右下角手柄：位置和光标样式 */\n    &[data-resize-handle=\"bottom-right\"] {\n      @apply -bottom-1 -right-1 cursor-nwse-resize;\n    }\n\n    /* 上下边缘手柄：高度6px，左右各留8px */\n    &[data-resize-handle=\"top\"],\n    &[data-resize-handle=\"bottom\"] {\n      @apply left-2 right-2 h-0.5;\n    }\n\n    /* 顶部边缘手柄：位置和光标样式 */\n    &[data-resize-handle=\"top\"] {\n      @apply -top-[3px] cursor-ns-resize;\n    }\n\n    /* 底部边缘手柄：位置和光标样式 */\n    &[data-resize-handle=\"bottom\"] {\n      @apply -bottom-[3px] cursor-ns-resize;\n    }\n\n    /* 左右边缘手柄：宽度6px，上下各留8px */\n    &[data-resize-handle=\"left\"],\n    &[data-resize-handle=\"right\"] {\n      @apply bottom-2 top-2 w-0.5;\n    }\n\n    /* 左侧边缘手柄：位置和光标样式 */\n    &[data-resize-handle=\"left\"] {\n      @apply -left-[3px] cursor-ew-resize;\n    }\n\n    /* 右侧边缘手柄：位置和光标样式 */\n    &[data-resize-handle=\"right\"] {\n      @apply -right-[3px] cursor-ew-resize;\n    }\n  }\n\n  /* 调整大小状态激活时的包装器样式：1px黑色半透明轮廓 */\n  [data-resize-state=\"true\"] [data-resize-wrapper] {\n    @apply rounded-sm outline outline-1 outline-black/25;\n  }\n}\n",".tiptap {\n  .tableWrapper {\n    @apply my-6 overflow-x-auto overflow-y-hidden pl-3 pt-3;\n  }\n\n  table {\n    @apply my-0 box-border w-full border-collapse rounded border-black/10;\n    @apply dark:border-white/20;\n\n    td,\n    th {\n      @apply relative min-w-[20px] border border-black/10 p-2 text-left align-top;\n      @apply dark:border-white/20;\n\n      &:first-of-type:not(a) {\n        @apply mt-0;\n      }\n\n      p {\n        @apply m-0;\n\n        & + p {\n          @apply mt-3;\n        }\n      }\n    }\n\n    th {\n      @apply font-bold;\n    }\n\n    .column-resize-handle {\n      @apply pointer-events-none absolute -bottom-0.5 -right-0.5 top-0 w-1 bg-blue-500;\n      &::before {\n        @apply ml-2 h-full w-[1px] bg-black/20;\n        @apply dark:bg-white/20;\n        content: \"\";\n      }\n    }\n\n    .selectedCell {\n      @apply border-double border-black/20 bg-black/5;\n      @apply dark:border-white/20 dark:bg-white/10;\n    }\n\n    .grip-column,\n    .grip-row {\n      @apply absolute flex cursor-pointer items-center justify-center bg-black/5;\n      @apply dark:bg-white/10;\n    }\n    .grip-column {\n      @apply -top-3 left-0 -ml-[1px] h-3 w-[calc(100%+1px)] border-l border-black/20;\n      @apply dark:border-white/20;\n\n      &:hover,\n      &.selected {\n        &::before {\n          content: \"\";\n          @apply w-2.5;\n        }\n      }\n\n      &:hover {\n        @apply bg-black/10;\n        @apply dark:bg-white/20;\n\n        &::before {\n          @apply border-b-2 border-dotted border-black/60;\n          @apply dark:border-white/60;\n        }\n      }\n\n      &.first {\n        @apply rounded-tl-sm border-transparent;\n      }\n\n      &.last {\n        @apply rounded-tr-sm;\n      }\n\n      &.selected {\n        @apply border-black/30 bg-black/30 shadow-sm;\n        @apply dark:border-white/30 dark:bg-white/30;\n\n        &::before {\n          @apply border-b-2 border-dotted;\n        }\n      }\n    }\n\n    .grip-row {\n      @apply -left-3 top-0 -mt-[1px] h-[calc(100%+1px)] w-3 border-t border-black/20;\n      @apply dark:border-white/20;\n\n      &:hover,\n      &.selected {\n        &::before {\n          @apply h-2.5;\n          content: \"\";\n        }\n      }\n      &:hover {\n        @apply bg-black/10;\n        @apply dark:bg-white/20;\n\n        &::before {\n          @apply border-l-2 border-dotted border-black/60;\n          @apply dark:border-white/60;\n        }\n      }\n\n      &.first {\n        @apply rounded-tl-sm border-transparent;\n      }\n\n      &.last {\n        @apply rounded-bl-sm;\n      }\n\n      &.selected {\n        @apply border-black/30 bg-black/30 shadow-sm;\n        @apply dark:border-white/30 dark:bg-white/30;\n\n        &::before {\n          @apply border-l-2 border-dotted;\n        }\n      }\n    }\n  }\n\n  &.resize-cursor {\n    @apply cursor-col-resize;\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AC/FA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACvHA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AC5FA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA"}

package/dist/index.d.cts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Editor } from "@tiptap/core";
+import React from "react";
+
+//#region src/toolbar/index.d.ts
+type ToolbarItemKey = "undo" | "redo" | "node-selector" | "text-selector" | "link" | "color" | "bg" | "align" | "image" | "table" | "separator";
+interface ToolbarConfigItem {
+  key: ToolbarItemKey | string;
+  render?: (editor: Editor) => React.ReactNode;
+}
+interface ToolbarProps {
+  config?: (ToolbarItemKey | ToolbarConfigItem)[];
+  appendItems?: React.ReactNode;
+}
+declare const Toolbar: ({
+  config,
+  appendItems
+}: ToolbarProps) => react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/editor/index.d.ts
+interface TiptapComponentsProps {
+  value: string;
+  onChange: (value: string) => void;
+  onImageUpload?: () => Promise<string>;
+  className?: string;
+  showToolbar?: boolean;
+  showBubbleMenu?: boolean;
+  showTableMenu?: boolean;
+  showBlockMenu?: boolean;
+  toolbarProps?: ToolbarProps;
+  onInitEditor?: (editor: Editor) => void;
+}
+declare const TiptapComponent: ({
+  value,
+  onChange,
+  onImageUpload,
+  className,
+  showToolbar,
+  showBubbleMenu,
+  showTableMenu,
+  showBlockMenu,
+  toolbarProps,
+  onInitEditor
+}: TiptapComponentsProps) => react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { TiptapComponent, TiptapComponentsProps, Toolbar, ToolbarConfigItem, ToolbarItemKey, ToolbarProps };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -0,0 +1,48 @@
+"use client";
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Editor } from "@tiptap/core";
+
+//#region src/toolbar/index.d.ts
+type ToolbarItemKey = "undo" | "redo" | "node-selector" | "text-selector" | "link" | "color" | "bg" | "align" | "image" | "table" | "separator";
+interface ToolbarConfigItem {
+  key: ToolbarItemKey | string;
+  render?: (editor: Editor) => React.ReactNode;
+}
+interface ToolbarProps {
+  config?: (ToolbarItemKey | ToolbarConfigItem)[];
+  appendItems?: React.ReactNode;
+}
+declare const Toolbar: ({
+  config,
+  appendItems
+}: ToolbarProps) => react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/editor/index.d.ts
+interface TiptapComponentsProps {
+  value: string;
+  onChange: (value: string) => void;
+  onImageUpload?: () => Promise<string>;
+  className?: string;
+  showToolbar?: boolean;
+  showBubbleMenu?: boolean;
+  showTableMenu?: boolean;
+  showBlockMenu?: boolean;
+  toolbarProps?: ToolbarProps;
+  onInitEditor?: (editor: Editor) => void;
+}
+declare const TiptapComponent: ({
+  value,
+  onChange,
+  onImageUpload,
+  className,
+  showToolbar,
+  showBubbleMenu,
+  showTableMenu,
+  showBlockMenu,
+  toolbarProps,
+  onInitEditor
+}: TiptapComponentsProps) => react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { TiptapComponent, TiptapComponentsProps, Toolbar, ToolbarConfigItem, ToolbarItemKey, ToolbarProps };
+//# sourceMappingURL=index.d.mts.map