@fab1o978/react-ui 0.1.3 → 0.1.5

package/dist/components/RichTextEditor/index.css

@@ -0,0 +1,356 @@
+@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";
+
+/* src/components/RichTextEditor/RichTextEditor.module.scss */
+:root {
+  --accent: #3b82f6;
+  --accent-dot: rgb(82.52, 145, 247.08);
+  --accent-track: #3b82f6;
+  --accent-ring: #3b82f6;
+  --accent-glow: rgba(59, 130, 246, 0.3);
+  --accent-light: rgb(157.485, 188.725, 239.765);
+  --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
+  --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
+  --color-primary-400: rgb(82.52, 145, 247.08);
+  --color-primary-500: #3b82f6;
+  --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
+  --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
+  --color-neutral-0: #ffffff;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-600: #4b5563;
+  --color-neutral-900: #111827;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --font-family-base:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --transition-fast: 150ms ease;
+  --color-surface: #ffffff;
+  --color-surface-elevated: #ffffff;
+}
+[data-theme=dark] {
+  --color-neutral-0: #0f172a;
+  --color-neutral-100: #1e293b;
+  --color-neutral-200: #334155;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-600: #cbd5e1;
+  --color-neutral-900: #f8fafc;
+  --color-surface: #1e293b;
+  --color-surface-elevated: #273549;
+  --color-primary-50: #172554;
+  --color-primary-100: #1e3a8a;
+  --accent-light: #172554;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+}
+.RichTextEditor_module_root2 {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.RichTextEditor_module_root2:focus-within {
+  border-color: var(--rich-text-editor-accent-ring, var(--accent-ring));
+  box-shadow: 0 0 0 3px var(--rich-text-editor-accent-glow, var(--accent-glow));
+}
+.RichTextEditor_module_readOnly2 {
+  border-color: transparent;
+  background: transparent;
+}
+.RichTextEditor_module_readOnly2:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+}
+.RichTextEditor_module_toolbar2 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-2);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+  position: sticky;
+  top: var(--spacing-1);
+  margin: var(--spacing-1) var(--spacing-1) 0;
+  z-index: 10;
+}
+.RichTextEditor_module_toolbarGroup2 {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.RichTextEditor_module_divider2 {
+  width: 1px;
+  height: 18px;
+  background: var(--color-neutral-200);
+  margin: 0 var(--spacing-1);
+  flex-shrink: 0;
+}
+.RichTextEditor_module_toolbarButton2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-neutral-600);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family-base);
+  line-height: 1;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.RichTextEditor_module_toolbarButton2:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+.RichTextEditor_module_toolbarButton2:focus-visible {
+  outline: 2px solid var(--rich-text-editor-accent-ring, var(--accent-ring));
+  outline-offset: 1px;
+}
+.RichTextEditor_module_toolbarButton2.RichTextEditor_module_active2 {
+  background: var(--rich-text-editor-accent-light, var(--accent-light));
+  color: var(--rich-text-editor-accent, var(--accent));
+}
+.RichTextEditor_module_headingButton2 {
+  width: auto;
+  min-width: 28px;
+  padding: 0 var(--spacing-2);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+.RichTextEditor_module_bubbleMenu2 {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--spacing-1) var(--spacing-2);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+.RichTextEditor_module_prose2 {
+  color: var(--color-neutral-900);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  line-height: 1.65;
+}
+.RichTextEditor_module_prose2 > * + * {
+  margin-top: 0.5em;
+}
+.RichTextEditor_module_prose2 p {
+  margin: 0;
+}
+.RichTextEditor_module_prose2 h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_prose2 h1:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_prose2 h2 {
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_prose2 h2:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_prose2 h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_prose2 h3:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_prose2 ul,
+.RichTextEditor_module_prose2 ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+.RichTextEditor_module_prose2 ul {
+  list-style-type: disc;
+}
+.RichTextEditor_module_prose2 ol {
+  list-style-type: decimal;
+}
+.RichTextEditor_module_prose2 li {
+  line-height: 1.65;
+}
+.RichTextEditor_module_prose2 li + li {
+  margin-top: 0.25em;
+}
+.RichTextEditor_module_prose2 li p {
+  margin: 0;
+}
+.RichTextEditor_module_prose2 {
+  padding: var(--spacing-3) var(--spacing-4);
+}
+.RichTextEditor_module_editorContent2 {
+  flex: 1;
+  overflow-y: auto;
+  max-height: var(--rte-max-height);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-200) transparent;
+}
+.RichTextEditor_module_editorContent2::-webkit-scrollbar {
+  width: 4px;
+}
+.RichTextEditor_module_editorContent2::-webkit-scrollbar-track {
+  background: transparent;
+}
+.RichTextEditor_module_editorContent2::-webkit-scrollbar-thumb {
+  background: var(--color-neutral-200);
+  border-radius: var(--radius-full);
+}
+.RichTextEditor_module_editorContent2::before {
+  content: "";
+  display: block;
+  position: sticky;
+  top: 0;
+  pointer-events: none;
+  z-index: 9;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror {
+  color: var(--color-neutral-900);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  line-height: 1.65;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror > * + * {
+  margin-top: 0.5em;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror p {
+  margin: 0;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror h1:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror h2 {
+  font-size: 1.375rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror h2:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--color-neutral-900);
+  margin-top: 0.75em;
+  margin-bottom: 0.25em;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror h3:first-child {
+  margin-top: 0;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror ul,
+.RichTextEditor_module_editorContent2 .ProseMirror ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror ul {
+  list-style-type: disc;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror ol {
+  list-style-type: decimal;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror li {
+  line-height: 1.65;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror li + li {
+  margin-top: 0.25em;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror li p {
+  margin: 0;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror {
+  min-height: var(--rte-min-height, 200px);
+  padding: var(--spacing-3) var(--spacing-4);
+  outline: none;
+  caret-color: var(--rich-text-editor-accent, var(--accent));
+}
+.RichTextEditor_module_editorContent2 .ProseMirror p.RichTextEditor_module_is-empty2:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--color-neutral-400);
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror div[data-type=page-break] {
+  position: relative;
+  margin: 1em 0;
+  border: none;
+  height: 0;
+  border-top: 2px dashed var(--color-neutral-200);
+  pointer-events: none;
+  user-select: none;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror div[data-type=page-break]::after {
+  content: "Page break";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0 var(--spacing-2);
+  background: var(--color-surface);
+  font-size: var(--font-size-xs);
+  color: var(--color-neutral-400);
+  font-family: var(--font-family-base);
+  white-space: nowrap;
+}
+.RichTextEditor_module_editorContent2 .ProseMirror ::selection {
+  background: var(--rich-text-editor-accent-light, var(--accent-light));
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/RichTextEditor/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/styles/tokens.scss","../../../src/components/RichTextEditor/RichTextEditor.module.scss"],"sourcesContent":["@use \"sass:color\";\n\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\");\n\n// Accent di default — cambia qui per aggiornare tutta la libreria\n$accent: #3b82f6;\n\n:root {\n  // Accent scale — derivata da $accent a compile time\n  --accent:        #{$accent};\n  --accent-dot:    #{color.scale($accent, $lightness: 12%)};\n  --accent-track:  #{$accent};\n  --accent-ring:   #{$accent};\n  --accent-glow:   #{color.change($accent, $alpha: 0.3)};\n  --accent-light:  #{color.scale($accent, $lightness: 45%, $saturation: -20%)};\n\n  // Primary scale (mantenuta per retrocompatibilità con Button, Badge, Input)\n  --color-primary-50:  #{color.scale($accent, $lightness: 49%, $saturation: -30%)};\n  --color-primary-100: #{color.scale($accent, $lightness: 42%, $saturation: -15%)};\n  --color-primary-400: #{color.scale($accent, $lightness: 12%)};\n  --color-primary-500: #{$accent};\n  --color-primary-600: #{color.scale($accent, $lightness: -10%)};\n  --color-primary-700: #{color.scale($accent, $lightness: -20%)};\n\n  // Neutral\n  --color-neutral-0:   #ffffff;\n  --color-neutral-100: #f3f4f6;\n  --color-neutral-200: #e5e7eb;\n  --color-neutral-400: #9ca3af;\n  --color-neutral-600: #4b5563;\n  --color-neutral-900: #111827;\n\n  // Semantic\n  --color-success-500: #22c55e;\n  --color-success-600: #16a34a;\n  --color-danger-500:  #ef4444;\n  --color-danger-600:  #dc2626;\n  --color-warning-500: #f59e0b;\n  --color-warning-600: #d97706;\n\n  // Typography\n  --font-family-base: \"Inter\", system-ui, -apple-system, sans-serif;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-md: 1rem;\n  --font-size-lg: 1.125rem;\n\n  // Spacing\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n\n  // Radius\n  --radius-sm:   0.25rem;\n  --radius-md:   0.375rem;\n  --radius-lg:   0.5rem;\n  --radius-full: 9999px;\n\n  // Shadows\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n\n  // Transitions\n  --transition-fast: 150ms ease;\n\n  // Surface (background di card/panel)\n  --color-surface:          #ffffff;\n  --color-surface-elevated: #ffffff;\n}\n\n// ─── Dark theme ────────────────────────────────────────────────────────────────\n// Applicato via data-theme=\"dark\" sull'elemento root (gestito da Storybook decorator\n// e dall'app consumer). I componenti non devono fare nulla di speciale: basta che\n// usino i token var() e riceveranno automaticamente i valori dark.\n\n[data-theme=\"dark\"] {\n  // Neutral (scala invertita)\n  --color-neutral-0:   #0f172a;\n  --color-neutral-100: #1e293b;\n  --color-neutral-200: #334155;\n  --color-neutral-400: #94a3b8;\n  --color-neutral-600: #cbd5e1;\n  --color-neutral-900: #f8fafc;\n\n  // Surface\n  --color-surface:          #1e293b;\n  --color-surface-elevated: #273549;\n\n  // Primary scale dark (per il default accent blu — le sfumature chiare diventano scure)\n  --color-primary-50:  #172554;\n  --color-primary-100: #1e3a8a;\n  // 400 / 500 / 600 / 700 rimangono invariati (abbastanza saturi su bg scuro)\n\n  // Accent light: variante scura\n  --accent-light: #172554;\n\n  // Shadows (più forti su bg scuro)\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);\n}\n","@use \"../../styles/tokens\" as *;\n\n// ─── Root ─────────────────────────────────────────────────────────────────────\n\n.root {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-lg);\n  background: var(--color-surface);\n  transition:\n    border-color var(--transition-fast),\n    box-shadow var(--transition-fast);\n  &:focus-within {\n    border-color: var(--rich-text-editor-accent-ring, var(--accent-ring));\n    box-shadow: 0 0 0 3px var(--rich-text-editor-accent-glow, var(--accent-glow));\n  }\n}\n\n.readOnly {\n  border-color: transparent;\n  background: transparent;\n\n  &:focus-within {\n    border-color: transparent;\n    box-shadow: none;\n  }\n}\n\n// ─── Toolbar ──────────────────────────────────────────────────────────────────\n\n.toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-1);\n  padding: var(--spacing-1) var(--spacing-2);\n  background: var(--color-surface-elevated);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-md);\n  flex-shrink: 0;\n  position: sticky;\n  top: var(--spacing-1);\n  margin: var(--spacing-1) var(--spacing-1) 0;\n  z-index: 10;\n}\n\n.toolbarGroup {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.divider {\n  width: 1px;\n  height: 18px;\n  background: var(--color-neutral-200);\n  margin: 0 var(--spacing-1);\n  flex-shrink: 0;\n}\n\n// ─── Toolbar button ───────────────────────────────────────────────────────────\n\n.toolbarButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: var(--radius-sm);\n  background: transparent;\n  color: var(--color-neutral-600);\n  cursor: pointer;\n  font-size: var(--font-size-sm);\n  font-family: var(--font-family-base);\n  line-height: 1;\n  transition:\n    background var(--transition-fast),\n    color var(--transition-fast);\n\n  &:hover {\n    background: var(--color-neutral-100);\n    color: var(--color-neutral-900);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--rich-text-editor-accent-ring, var(--accent-ring));\n    outline-offset: 1px;\n  }\n\n  &.active {\n    background: var(--rich-text-editor-accent-light, var(--accent-light));\n    color: var(--rich-text-editor-accent, var(--accent));\n  }\n}\n\n.headingButton {\n  width: auto;\n  min-width: 28px;\n  padding: 0 var(--spacing-2);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.02em;\n}\n\n// ─── Bubble menu ──────────────────────────────────────────────────────────────\n\n.bubbleMenu {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: var(--spacing-1) var(--spacing-2);\n  background: var(--color-surface-elevated);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-md);\n}\n\n// ─── Shared prose typography ──────────────────────────────────────────────────\n// Applied both to the editor (.editorContent) and to external preview divs (.prose).\n\n@mixin prose {\n  color: var(--color-neutral-900);\n  font-family: var(--font-family-base);\n  font-size: var(--font-size-md);\n  line-height: 1.65;\n\n  > * + * { margin-top: 0.5em; }\n\n  p { margin: 0; }\n\n  h1 {\n    font-size: 1.75rem;\n    font-weight: 700;\n    line-height: 1.25;\n    color: var(--color-neutral-900);\n    margin-top: 0.75em;\n    margin-bottom: 0.25em;\n    &:first-child { margin-top: 0; }\n  }\n\n  h2 {\n    font-size: 1.375rem;\n    font-weight: 600;\n    line-height: 1.3;\n    color: var(--color-neutral-900);\n    margin-top: 0.75em;\n    margin-bottom: 0.25em;\n    &:first-child { margin-top: 0; }\n  }\n\n  h3 {\n    font-size: 1.125rem;\n    font-weight: 600;\n    line-height: 1.4;\n    color: var(--color-neutral-900);\n    margin-top: 0.75em;\n    margin-bottom: 0.25em;\n    &:first-child { margin-top: 0; }\n  }\n\n  ul, ol {\n    padding-left: 1.5em;\n    margin: 0.5em 0;\n  }\n\n  ul { list-style-type: disc; }\n  ol { list-style-type: decimal; }\n\n  li {\n    line-height: 1.65;\n    + li { margin-top: 0.25em; }\n    p { margin: 0; }\n  }\n}\n\n// Exported class for use in preview divs outside the editor.\n.prose {\n  @include prose;\n  padding: var(--spacing-3) var(--spacing-4);\n}\n\n// ─── Editor content ───────────────────────────────────────────────────────────\n\n.editorContent {\n  flex: 1;\n  overflow-y: auto;\n  max-height: var(--rte-max-height);\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-neutral-200) transparent;\n\n  &::-webkit-scrollbar { width: 4px; }\n  &::-webkit-scrollbar-track { background: transparent; }\n  &::-webkit-scrollbar-thumb {\n    background: var(--color-neutral-200);\n    border-radius: var(--radius-full);\n  }\n\n  &::before {\n    content: \"\";\n    display: block;\n    position: sticky;\n    top: 0;\n    // height: 36px;\n    // margin-bottom: -36px;\n    // background: linear-gradient(to bottom, var(--color-surface) 0%, transparent 100%);\n    pointer-events: none;\n    z-index: 9;\n  }\n\n  :global(.ProseMirror) {\n    @include prose;\n    min-height: var(--rte-min-height, 200px);\n    padding: var(--spacing-3) var(--spacing-4);\n    outline: none;\n    caret-color: var(--rich-text-editor-accent, var(--accent));\n\n    p.is-empty:first-child::before {\n      content: attr(data-placeholder);\n      color: var(--color-neutral-400);\n      pointer-events: none;\n      float: left;\n      height: 0;\n    }\n\n    // ── Page break ─────────────────────────────────────────────────────────\n    div[data-type=\"page-break\"] {\n      position: relative;\n      margin: 1em 0;\n      border: none;\n      height: 0;\n      border-top: 2px dashed var(--color-neutral-200);\n      pointer-events: none;\n      user-select: none;\n\n      &::after {\n        content: \"Page break\";\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        padding: 0 var(--spacing-2);\n        background: var(--color-surface);\n        font-size: var(--font-size-xs);\n        color: var(--color-neutral-400);\n        font-family: var(--font-family-base);\n        white-space: nowrap;\n      }\n    }\n\n    ::selection {\n      background: var(--rich-text-editor-accent-light, var(--accent-light));\n    }\n  }\n}\n"],"mappings":"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","names":["root","readOnly","toolbar","toolbarGroup","divider","toolbarButton","active","headingButton","bubbleMenu","prose","editorContent","is-empty"]}

package/dist/components/RichTextEditor/index.d.cts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Extensions, JSONContent, Mark, Node } from '@tiptap/core';
+export { useCurrentEditor } from '@tiptap/react';
+
+interface RichTextEditorProps {
+    value?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    accent?: string;
+    extensions?: Extensions;
+    /** Rendered inside the toolbar, after the built-in buttons. Use with useCurrentEditor(). */
+    slotBefore?: React.ReactNode;
+    /** Rendered below the editor area. Use with useCurrentEditor(). */
+    slotAfter?: React.ReactNode;
+    onChangeHTML?: (html: string) => void;
+    onChangeJSON?: (json: JSONContent) => void;
+}
+declare const RichTextEditor: React.FC<RichTextEditorProps>;
+
+declare const Highlight: Mark<any, any>;
+
+declare const HighlightButton: React.FC;
+
+declare const PageBreak: Node<any, any>;
+
+declare const PageBreakButton: React.FC;
+
+export { Highlight, HighlightButton, PageBreak, PageBreakButton, RichTextEditor, type RichTextEditorProps };

package/dist/components/RichTextEditor/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Extensions, JSONContent, Mark, Node } from '@tiptap/core';
+export { useCurrentEditor } from '@tiptap/react';
+
+interface RichTextEditorProps {
+    value?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    accent?: string;
+    extensions?: Extensions;
+    /** Rendered inside the toolbar, after the built-in buttons. Use with useCurrentEditor(). */
+    slotBefore?: React.ReactNode;
+    /** Rendered below the editor area. Use with useCurrentEditor(). */
+    slotAfter?: React.ReactNode;
+    onChangeHTML?: (html: string) => void;
+    onChangeJSON?: (json: JSONContent) => void;
+}
+declare const RichTextEditor: React.FC<RichTextEditorProps>;
+
+declare const Highlight: Mark<any, any>;
+
+declare const HighlightButton: React.FC;
+
+declare const PageBreak: Node<any, any>;
+
+declare const PageBreakButton: React.FC;
+
+export { Highlight, HighlightButton, PageBreak, PageBreakButton, RichTextEditor, type RichTextEditorProps };