@wair/editor 0.0.1-beta.1 → 0.0.3

package/dist/index.css

@@ -1,449 +1,315 @@
-@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;
-  }
-}
+.tiptap {
+	@apply relative px-8 py-4 focus:outline-none outline-none;
+}
+.not-toolbar .tiptap {
+	@apply px-3 py-2 text-sm leading-relaxed;
+}
+
+/* 标题样式 */
+.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 {
+	@apply text-muted-foreground/50;
+	content: attr(data-placeholder);
+	@apply float-left h-0 pointer-events-none;
+}
+
+.tiptap pre.is-empty::before {
+	@apply text-black;
+	content: attr(data-placeholder);
+	@apply float-left h-0 pointer-events-none;
+}
+
+/* 选中文本样式 */
+.tiptap *::selection {
+	@apply bg-blue-100 text-blue-900;
+}
+
+.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;
+}
+
+.tiptap a {
+	@apply text-primary underline } .tiptap ul[data-type="taskList"] { @apply list-none p-0 ml-2;
+}
+
+.tiptap ul[data-type="taskList"] li {
+	@apply flex 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 line-through decoration-2 decoration-muted-foreground/50 transition-all duration-200;
+}
+
+/* 嵌套列表的缩进 */
+.tiptap ul[data-type="taskList"] ul[data-type="taskList"] {
+	@apply ml-6 mt-1;
+}
+
+/* 引用块样式 */
+.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 rounded-lg bg-muted p-4 font-mono text-black;
+}
+.tiptap pre code {
+	@apply bg-transparent p-0 text-sm;
+}
+
+[data-rmiz-ghost] {
+	@apply absolute pointer-events-none;
+}
+
+[data-rmiz-btn-zoom],
+[data-rmiz-btn-unzoom] {
+	@apply bg-black/70 rounded-full border-0 shadow-[0_0_1px_rgba(255,255,255,0.5)] text-white h-[40px] m-0 outline-offset-2 p-[9px] touch-manipulation w-[40px];
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+[data-rmiz-btn-zoom]:not(:focus):not(:active) {
+	@apply absolute overflow-hidden whitespace-nowrap h-[1px] w-[1px] pointer-events-none;
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+}
+
+[data-rmiz-btn-zoom] {
+	@apply absolute cursor-zoom-in;
+	inset: 10px 10px auto auto;
+}
+
+[data-rmiz-btn-unzoom] {
+	@apply absolute cursor-zoom-out z-[1];
+	inset: 20px 20px auto auto;
+}
+
+[data-rmiz-content="found"] img,
+[data-rmiz-content="found"] svg,
+[data-rmiz-content="found"] [role="img"],
+[data-rmiz-content="found"] [data-zoom] {
+	cursor: inherit;
+}
+
+[data-rmiz-modal]::backdrop {
+	@apply hidden;
+}
+
+[data-rmiz-modal][open] {
+	@apply fixed w-screen h-screen max-w-none max-h-none m-0 p-0 border-0 bg-transparent overflow-hidden;
+}
+
+[data-rmiz-modal-overlay] {
+	@apply absolute inset-0 transition-colors duration-300;
+}
+
+[data-rmiz-modal-overlay="hidden"] {
+	@apply bg-white/0;
+}
+
+[data-rmiz-modal-overlay="visible"] {
+	@apply bg-white;
+}
+
+[data-rmiz-modal-content] {
+	@apply relative w-full h-full;
+}
+
+[data-rmiz-modal-img] {
+	position: absolute;
+	cursor: zoom-out;
+	image-rendering: high-quality;
+	transform-origin: top left;
+	transition: transform 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-rmiz-modal-overlay],
+	[data-rmiz-modal-img] {
+		transition-duration: 0.01ms !important;
+	}
+}
+
+.tiptap .tableWrapper {
+  @apply my-6 overflow-x-auto overflow-y-hidden pl-3 pt-3;
+}
+
+.tiptap table {
+  @apply my-0 box-border w-full border-collapse rounded border-black/10;
+  @apply dark:border-white/20;
+}
+
+.tiptap table td,
+.tiptap table th {
+  @apply relative min-w-[20px] border border-black/10 p-2 text-left align-top;
+  @apply dark:border-white/20;
+}
+
+.tiptap table td:first-of-type:not(a),
+.tiptap table th:first-of-type:not(a) {
+  @apply mt-0;
+}
+
+.tiptap table td p,
+.tiptap table th p {
+  @apply m-0;
+}
+
+.tiptap table td p + p,
+.tiptap table th p + p {
+  @apply mt-3;
+}
+
+.tiptap table th {
+  @apply font-bold;
+}
+
+.tiptap table .column-resize-handle {
+  @apply pointer-events-none absolute -bottom-0.5 -right-0.5 top-0 w-1 bg-blue-500;
+}
+
+.tiptap table .column-resize-handle::before {
+  @apply ml-2 h-full w-[1px] bg-black/20;
+  @apply dark:bg-white/20;
+  content: "";
+}
+
+.tiptap table .selectedCell {
+  @apply border-double border-black/20 bg-black/5;
+  @apply dark:border-white/20 dark:bg-white/10;
+}
+
+.tiptap table .grip-column,
+.tiptap table .grip-row {
+  @apply absolute flex cursor-pointer items-center justify-center bg-black/5;
+  @apply dark:bg-white/10;
+}
+
+.tiptap table .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;
+}
+
+.tiptap table .grip-column:hover::before,
+.tiptap table .grip-column.selected::before {
+  content: "";
+  @apply w-2.5;
+}
+
+.tiptap table .grip-column:hover {
+  @apply bg-black/10;
+  @apply dark:bg-white/20;
+}
+
+.tiptap table .grip-column:hover::before {
+  @apply border-b-2 border-dotted border-black/60;
+  @apply dark:border-white/60;
+}
+
+.tiptap table .grip-column.first {
+  @apply rounded-tl-sm border-transparent;
+}
+
+.tiptap table .grip-column.last {
+  @apply rounded-tr-sm;
+}
+
+.tiptap table .grip-column.selected {
+  @apply border-black/30 bg-black/30 shadow-sm;
+  @apply dark:border-white/30 dark:bg-white/30;
+}
+
+.tiptap table .grip-column.selected::before {
+  @apply border-b-2 border-dotted;
+}
+
+.tiptap table .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;
+}
+
+.tiptap table .grip-row:hover::before,
+.tiptap table .grip-row.selected::before {
+  @apply h-2.5;
+  content: "";
+}
+
+.tiptap table .grip-row:hover {
+  @apply bg-black/10;
+  @apply dark:bg-white/20;
+}
+
+.tiptap table .grip-row:hover::before {
+  @apply border-l-2 border-dotted border-black/60;
+  @apply dark:border-white/60;
+}
+
+.tiptap table .grip-row.first {
+  @apply rounded-tl-sm border-transparent;
+}
+
+.tiptap table .grip-row.last {
+  @apply rounded-bl-sm;
+}
+
+.tiptap table .grip-row.selected {
+  @apply border-black/30 bg-black/30 shadow-sm;
+  @apply dark:border-white/30 dark:bg-white/30;
+}
+
+.tiptap table .grip-row.selected::before {
+  @apply border-l-2 border-dotted;
+}
+
+.tiptap.resize-cursor {
+  @apply cursor-col-resize;
+}
 
 
 /*# sourceMappingURL=index.css.map*/