@elia-ori/editor 0.1.1 → 0.1.2

package/dist/styles/editor.css

@@ -1,5 +1,11 @@
-/* src/styles/editor.css */
+/* Tailwind utilities */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-100:oklch(93.6% .032 17.717);--color-red-300:oklch(80.8% .114 19.571);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-300:oklch(87.9% .169 91.605);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-300:oklch(84.5% .143 164.978);--color-sky-100:oklch(95.1% .026 236.824);--color-sky-300:oklch(82.8% .111 230.318);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-white:#fff;--spacing:.25rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.z-50{z-index:50}.-mx-1{margin-inline:calc(var(--spacing)*-1)}.mx-1\.5{margin-inline:calc(var(--spacing)*1.5)}.mx-auto{margin-inline:auto}.my-1{margin-block:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-flex{display:inline-flex}.table{display:table}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-px{height:1px}.min-h-\[300px\]{min-height:300px}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-72{width:calc(var(--spacing)*72)}.w-full{width:100%}.w-px{width:1px}.max-w-7xl{max-width:var(--container-7xl)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[8rem\]{min-width:8rem}.cursor-default{cursor:default}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-\[var\(--border\)\]{border-color:var(--border)}.border-amber-300{border-color:var(--color-amber-300)}.border-emerald-300{border-color:var(--color-emerald-300)}.border-red-300{border-color:var(--color-red-300)}.border-sky-300{border-color:var(--color-sky-300)}.border-zinc-200{border-color:var(--color-zinc-200)}.bg-\[var\(--border\)\]{background-color:var(--border)}.bg-\[var\(--popover\)\]{background-color:var(--popover)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-red-100{background-color:var(--color-red-100)}.bg-sky-100{background-color:var(--color-sky-100)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-\[var\(--popover-foreground\)\]{color:var(--popover-foreground)}.text-zinc-700{color:var(--color-zinc-700)}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:bg-\[var\(--accent\)\]:hover{background-color:var(--accent)}.hover\:bg-zinc-100:hover{background-color:var(--color-zinc-100)}.hover\:text-\[var\(--accent-foreground\)\]:hover{color:var(--accent-foreground)}}.focus\:bg-\[var\(--accent\)\]:focus{background-color:var(--accent)}.focus\:text-\[var\(--accent-foreground\)\]:focus{color:var(--accent-foreground)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-\[var\(--ring\)\]:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-50:disabled{opacity:.5}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[state\=on\]\:bg-\[var\(--accent\)\][data-state=on]{background-color:var(--accent)}.data-\[state\=on\]\:bg-zinc-900[data-state=on]{background-color:var(--color-zinc-900)}.data-\[state\=on\]\:text-\[var\(--accent-foreground\)\][data-state=on]{color:var(--accent-foreground)}.data-\[state\=on\]\:text-white[data-state=on]{color:var(--color-white)}@media (prefers-color-scheme:dark){.dark\:border-zinc-600{border-color:var(--color-zinc-600)}.dark\:border-zinc-700{border-color:var(--color-zinc-700)}.dark\:bg-zinc-900{background-color:var(--color-zinc-900)}.dark\:text-zinc-300{color:var(--color-zinc-300)}@media (hover:hover){.dark\:hover\:bg-zinc-800:hover{background-color:var(--color-zinc-800)}}.dark\:data-\[state\=on\]\:bg-zinc-100[data-state=on]{background-color:var(--color-zinc-100)}.dark\:data-\[state\=on\]\:text-zinc-900[data-state=on]{color:var(--color-zinc-900)}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
+
+/* Editor styles */
+/* TipTap Editor Styles */
 .tiptap-editor {
+  /* Headings */
   h1 {
     font-size: 1.5rem;
     font-weight: 700;
@@ -7,6 +13,7 @@
     margin-top: 1.5rem;
     line-height: 1.25;
   }
+
   h2 {
     font-size: 1.25rem;
     font-weight: 700;
@@ -14,6 +21,7 @@
     margin-top: 1.25rem;
     line-height: 1.375;
   }
+
   h3 {
     font-size: 1.125rem;
     font-weight: 600;
@@ -21,31 +29,40 @@
     margin-top: 1rem;
     line-height: 1.5;
   }
+
+  /* Paragraphs */
   p {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     line-height: 1.625;
   }
+
+  /* Lists */
   ul {
     list-style-type: disc;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     padding-left: 1.5rem;
   }
+
   ol {
     list-style-type: decimal;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     padding-left: 1.5rem;
   }
+
   li {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
   }
+
   li p {
     margin: 0;
     display: inline;
   }
+
+  /* Blockquote */
   blockquote {
     border-left-width: 4px;
     border-left-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
@@ -54,6 +71,8 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
+
+  /* Code */
   code {
     background-color: var(--muted);
     padding-left: 0.375rem;
@@ -62,16 +81,9 @@
     padding-bottom: 0.125rem;
     border-radius: 0.25rem;
     font-size: 0.875rem;
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      "Liberation Mono",
-      "Courier New",
-      monospace;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
+
   pre {
     background-color: var(--muted);
     padding: 1rem;
@@ -80,32 +92,44 @@
     margin-bottom: 1rem;
     overflow-x: auto;
   }
+
   pre code {
     background-color: transparent;
     padding: 0;
   }
+
+  /* Links */
   a {
     color: var(--primary);
     text-decoration: underline;
     text-underline-offset: 4px;
   }
+
+  /* Mark (Highlight) */
   mark {
     background-color: #fef08a;
     padding-left: 0.125rem;
     padding-right: 0.125rem;
   }
+
   .dark mark {
     background-color: #854d0e;
   }
+
+  /* Horizontal Rule */
   hr {
     border-color: var(--border);
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
   }
+
+  /* Subscript & Superscript */
   sub,
   sup {
     font-size: 0.75rem;
   }
+
+  /* Placeholder - only show when editor has a single empty paragraph */
   > p.is-editor-empty:first-child:last-child::before {
     color: var(--muted-foreground);
     pointer-events: none;
@@ -113,24 +137,29 @@
     height: 0;
     content: attr(data-placeholder);
   }
-  ul[data-type=taskList] {
+
+  /* Task List */
+  ul[data-type="taskList"] {
     list-style-type: none;
     padding-left: 0;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }
-  ul[data-type=taskList] li {
+
+  ul[data-type="taskList"] li {
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
   }
-  ul[data-type=taskList] li > label {
+
+  ul[data-type="taskList"] li > label {
     display: flex;
     align-items: center;
   }
-  ul[data-type=taskList] li > label input[type=checkbox] {
+
+  ul[data-type="taskList"] li > label input[type="checkbox"] {
     width: 1rem;
     height: 1rem;
     border-radius: 0.25rem;
@@ -138,19 +167,24 @@
     cursor: pointer;
     accent-color: var(--primary);
   }
-  ul[data-type=taskList] li > div {
+
+  ul[data-type="taskList"] li > div {
     flex: 1;
   }
-  ul[data-type=taskList] li > div p {
+
+  ul[data-type="taskList"] li > div p {
     margin: 0;
     display: inline;
   }
+
+  /* Table */
   table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
+
   table th,
   table td {
     border: 1px solid var(--border);
@@ -160,13 +194,17 @@
     padding-bottom: 0.5rem;
     text-align: left;
   }
+
   table th {
     background-color: var(--muted);
     font-weight: 600;
   }
+
   table tr:hover td {
     background-color: color-mix(in srgb, var(--muted) 30%, transparent);
   }
+
+  /* Image */
   img {
     max-width: 100%;
     height: auto;
@@ -176,14 +214,18 @@
     cursor: pointer;
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
+
   img.ProseMirror-selectednode {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
   }
+
+  /* Resizable Image */
   .tiptap-resize-container {
     position: relative;
     display: inline-block;
   }
+
   .tiptap-resize-handle {
     position: absolute;
     width: 0.75rem;
@@ -193,33 +235,41 @@
     opacity: 0;
     transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
+
   .tiptap-resize-handle:hover {
     opacity: 1;
   }
+
   .tiptap-resize-container:hover .tiptap-resize-handle,
   .tiptap-resize-container.is-resizing .tiptap-resize-handle {
     opacity: 1;
   }
-  .tiptap-resize-handle[data-direction=top-left] {
+
+  .tiptap-resize-handle[data-direction="top-left"] {
     top: -0.375rem;
     left: -0.375rem;
     cursor: nwse-resize;
   }
-  .tiptap-resize-handle[data-direction=top-right] {
+
+  .tiptap-resize-handle[data-direction="top-right"] {
     top: -0.375rem;
     right: -0.375rem;
     cursor: nesw-resize;
   }
-  .tiptap-resize-handle[data-direction=bottom-left] {
+
+  .tiptap-resize-handle[data-direction="bottom-left"] {
     bottom: -0.375rem;
     left: -0.375rem;
     cursor: nesw-resize;
   }
-  .tiptap-resize-handle[data-direction=bottom-right] {
+
+  .tiptap-resize-handle[data-direction="bottom-right"] {
     bottom: -0.375rem;
     right: -0.375rem;
     cursor: nwse-resize;
   }
+
+  /* Callout */
   div[data-callout] {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -230,48 +280,56 @@
     margin-bottom: 1rem;
     border-left-width: 4px;
   }
-  div[data-callout][data-type=success] {
+
+  div[data-callout][data-type="success"] {
     background-color: #ecfdf5;
     border-left-color: #10b981;
     color: #065f46;
   }
-  .dark div[data-callout][data-type=success] {
+
+  .dark div[data-callout][data-type="success"] {
     background-color: #064e3b;
     border-left-color: #10b981;
     color: #d1fae5;
   }
-  div[data-callout][data-type=warning] {
+
+  div[data-callout][data-type="warning"] {
     background-color: #fffbeb;
     border-left-color: #f59e0b;
     color: #92400e;
   }
-  .dark div[data-callout][data-type=warning] {
+
+  .dark div[data-callout][data-type="warning"] {
     background-color: #78350f;
     border-left-color: #f59e0b;
     color: #fef3c7;
   }
-  div[data-callout][data-type=error] {
+
+  div[data-callout][data-type="error"] {
     background-color: #fef2f2;
     border-left-color: #ef4444;
     color: #991b1b;
   }
-  .dark div[data-callout][data-type=error] {
+
+  .dark div[data-callout][data-type="error"] {
     background-color: #7f1d1d;
     border-left-color: #ef4444;
     color: #fee2e2;
   }
-  div[data-callout][data-type=info] {
+
+  div[data-callout][data-type="info"] {
     background-color: #f0f9ff;
     border-left-color: #0ea5e9;
     color: #075985;
   }
-  .dark div[data-callout][data-type=info] {
+
+  .dark div[data-callout][data-type="info"] {
     background-color: #082f49;
     border-left-color: #0ea5e9;
     color: #e0f2fe;
   }
+
   div[data-callout] p {
     color: inherit;
   }
 }
-/*# sourceMappingURL=editor.css.map */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elia-ori/editor",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "基於 TipTap 的富文字編輯器套件",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,14 +12,16 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/styles/editor.css"
+    "./styles.css": "./dist/styles/editor.css",
+    "./styles/editor.css": "./dist/styles/editor.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup"
+    "dev": "vite",
+    "build": "tsup",
+    "preview": "vite preview"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
@@ -27,9 +29,6 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@tiptap/pm": "^3.15.0",
-    "@tiptap/react": "^3.15.0",
-    "@tiptap/starter-kit": "^3.15.0",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-toggle": "^1.1.0",
     "@tiptap/extension-color": "^3.15.3",
@@ -48,23 +47,30 @@
     "@tiptap/extension-text-align": "^3.15.3",
     "@tiptap/extension-text-style": "^3.15.3",
     "@tiptap/extension-underline": "^3.15.3",
+    "@tiptap/pm": "^3.15.0",
+    "@tiptap/react": "^3.15.0",
+    "@tiptap/starter-kit": "^3.15.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
     "tiptap-extension-resize-image": "^1.3.2"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@tiptap/pm": "^3.15.3",
     "@tiptap/react": "^3.15.3",
     "@tiptap/starter-kit": "^3.15.3",
     "@types/node": "^24.3.0",
     "@types/react": "^19.2.4",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
     "lucide-react": "^0.556.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tailwindcss": "^4.1.17",
     "tsup": "^8.0.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "vite": "^7.3.1"
   },
   "engines": {
     "node": ">=18.0.0"

package/dist/styles/editor.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/styles/editor.css"],"sourcesContent":["/* TipTap Editor Styles */\n.tiptap-editor {\n  /* Headings */\n  h1 {\n    font-size: 1.5rem;\n    font-weight: 700;\n    margin-bottom: 1rem;\n    margin-top: 1.5rem;\n    line-height: 1.25;\n  }\n\n  h2 {\n    font-size: 1.25rem;\n    font-weight: 700;\n    margin-bottom: 0.75rem;\n    margin-top: 1.25rem;\n    line-height: 1.375;\n  }\n\n  h3 {\n    font-size: 1.125rem;\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n    margin-top: 1rem;\n    line-height: 1.5;\n  }\n\n  /* Paragraphs */\n  p {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    line-height: 1.625;\n  }\n\n  /* Lists */\n  ul {\n    list-style-type: disc;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    padding-left: 1.5rem;\n  }\n\n  ol {\n    list-style-type: decimal;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    padding-left: 1.5rem;\n  }\n\n  li {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\n  }\n\n  li p {\n    margin: 0;\n    display: inline;\n  }\n\n  /* Blockquote */\n  blockquote {\n    border-left-width: 4px;\n    border-left-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent);\n    padding-left: 1rem;\n    font-style: italic;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n  }\n\n  /* Code */\n  code {\n    background-color: var(--muted);\n    padding-left: 0.375rem;\n    padding-right: 0.375rem;\n    padding-top: 0.125rem;\n    padding-bottom: 0.125rem;\n    border-radius: 0.25rem;\n    font-size: 0.875rem;\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  }\n\n  pre {\n    background-color: var(--muted);\n    padding: 1rem;\n    border-radius: 0.375rem;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n    overflow-x: auto;\n  }\n\n  pre code {\n    background-color: transparent;\n    padding: 0;\n  }\n\n  /* Links */\n  a {\n    color: var(--primary);\n    text-decoration: underline;\n    text-underline-offset: 4px;\n  }\n\n  /* Mark (Highlight) */\n  mark {\n    background-color: #fef08a;\n    padding-left: 0.125rem;\n    padding-right: 0.125rem;\n  }\n\n  .dark mark {\n    background-color: #854d0e;\n  }\n\n  /* Horizontal Rule */\n  hr {\n    border-color: var(--border);\n    margin-top: 1.5rem;\n    margin-bottom: 1.5rem;\n  }\n\n  /* Subscript & Superscript */\n  sub,\n  sup {\n    font-size: 0.75rem;\n  }\n\n  /* Placeholder - only show when editor has a single empty paragraph */\n  > p.is-editor-empty:first-child:last-child::before {\n    color: var(--muted-foreground);\n    pointer-events: none;\n    float: left;\n    height: 0;\n    content: attr(data-placeholder);\n  }\n\n  /* Task List */\n  ul[data-type=\"taskList\"] {\n    list-style-type: none;\n    padding-left: 0;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n\n  ul[data-type=\"taskList\"] li {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\n  }\n\n  ul[data-type=\"taskList\"] li > label {\n    display: flex;\n    align-items: center;\n  }\n\n  ul[data-type=\"taskList\"] li > label input[type=\"checkbox\"] {\n    width: 1rem;\n    height: 1rem;\n    border-radius: 0.25rem;\n    border-color: var(--input);\n    cursor: pointer;\n    accent-color: var(--primary);\n  }\n\n  ul[data-type=\"taskList\"] li > div {\n    flex: 1;\n  }\n\n  ul[data-type=\"taskList\"] li > div p {\n    margin: 0;\n    display: inline;\n  }\n\n  /* Table */\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n  }\n\n  table th,\n  table td {\n    border: 1px solid var(--border);\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    text-align: left;\n  }\n\n  table th {\n    background-color: var(--muted);\n    font-weight: 600;\n  }\n\n  table tr:hover td {\n    background-color: color-mix(in srgb, var(--muted) 30%, transparent);\n  }\n\n  /* Image */\n  img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 0.375rem;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n    cursor: pointer;\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  img.ProseMirror-selectednode {\n    outline: 2px solid var(--primary);\n    outline-offset: 2px;\n  }\n\n  /* Resizable Image */\n  .tiptap-resize-container {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tiptap-resize-handle {\n    position: absolute;\n    width: 0.75rem;\n    height: 0.75rem;\n    background-color: var(--primary);\n    border-radius: 9999px;\n    opacity: 0;\n    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .tiptap-resize-handle:hover {\n    opacity: 1;\n  }\n\n  .tiptap-resize-container:hover .tiptap-resize-handle,\n  .tiptap-resize-container.is-resizing .tiptap-resize-handle {\n    opacity: 1;\n  }\n\n  .tiptap-resize-handle[data-direction=\"top-left\"] {\n    top: -0.375rem;\n    left: -0.375rem;\n    cursor: nwse-resize;\n  }\n\n  .tiptap-resize-handle[data-direction=\"top-right\"] {\n    top: -0.375rem;\n    right: -0.375rem;\n    cursor: nesw-resize;\n  }\n\n  .tiptap-resize-handle[data-direction=\"bottom-left\"] {\n    bottom: -0.375rem;\n    left: -0.375rem;\n    cursor: nesw-resize;\n  }\n\n  .tiptap-resize-handle[data-direction=\"bottom-right\"] {\n    bottom: -0.375rem;\n    right: -0.375rem;\n    cursor: nwse-resize;\n  }\n\n  /* Callout */\n  div[data-callout] {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n    border-radius: 0.5rem;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n    border-left-width: 4px;\n  }\n\n  div[data-callout][data-type=\"success\"] {\n    background-color: #ecfdf5;\n    border-left-color: #10b981;\n    color: #065f46;\n  }\n\n  .dark div[data-callout][data-type=\"success\"] {\n    background-color: #064e3b;\n    border-left-color: #10b981;\n    color: #d1fae5;\n  }\n\n  div[data-callout][data-type=\"warning\"] {\n    background-color: #fffbeb;\n    border-left-color: #f59e0b;\n    color: #92400e;\n  }\n\n  .dark div[data-callout][data-type=\"warning\"] {\n    background-color: #78350f;\n    border-left-color: #f59e0b;\n    color: #fef3c7;\n  }\n\n  div[data-callout][data-type=\"error\"] {\n    background-color: #fef2f2;\n    border-left-color: #ef4444;\n    color: #991b1b;\n  }\n\n  .dark div[data-callout][data-type=\"error\"] {\n    background-color: #7f1d1d;\n    border-left-color: #ef4444;\n    color: #fee2e2;\n  }\n\n  div[data-callout][data-type=\"info\"] {\n    background-color: #f0f9ff;\n    border-left-color: #0ea5e9;\n    color: #075985;\n  }\n\n  .dark div[data-callout][data-type=\"info\"] {\n    background-color: #082f49;\n    border-left-color: #0ea5e9;\n    color: #e0f2fe;\n  }\n\n  div[data-callout] p {\n    color: inherit;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/styles/editor.d.cts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/styles/editor.d.ts

@@ -1,2 +0,0 @@
-
-export {  }