trance-richtext-editor 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +191 -0
- package/dist/index.cjs +2215 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +854 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +214 -0
- package/dist/index.d.ts +214 -0
- package/dist/index.js +2199 -0
- package/dist/index.js.map +1 -0
- package/dist/renderer.cjs +47 -0
- package/dist/renderer.cjs.map +1 -0
- package/dist/renderer.css +300 -0
- package/dist/renderer.css.map +1 -0
- package/dist/renderer.d.cts +38 -0
- package/dist/renderer.d.ts +38 -0
- package/dist/renderer.js +41 -0
- package/dist/renderer.js.map +1 -0
- package/dist/styles.css +1153 -0
- package/package.json +104 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/styles/variables.css","../src/styles/editor.css","../src/styles/toolbar.css"],"sourcesContent":["/* ============================================================\n trance-richtext-editor — Design Tokens\n CSS Custom Properties for theming the editor and renderer.\n ============================================================ */\n\n:root,\n[data-trance-theme='light'] {\n /* ---- Surface & Background ---- */\n --trance-bg: #ffffff;\n --trance-bg-secondary: #f9fafb;\n --trance-surface: #f3f4f6;\n --trance-surface-hover: #e5e7eb;\n --trance-surface-active: #d1d5db;\n\n /* ---- Text ---- */\n --trance-text: #111827;\n --trance-text-secondary: #4b5563;\n --trance-text-muted: #9ca3af;\n --trance-text-inverse: #ffffff;\n\n /* ---- Accent ---- */\n --trance-accent: #6366f1;\n --trance-accent-hover: #4f46e5;\n --trance-accent-light: #e0e7ff;\n --trance-accent-text: #ffffff;\n\n /* ---- Borders ---- */\n --trance-border: #e5e7eb;\n --trance-border-strong: #d1d5db;\n --trance-border-focus: #6366f1;\n\n /* ---- Toolbar ---- */\n --trance-toolbar-bg: #ffffff;\n --trance-toolbar-border: #e5e7eb;\n --trance-toolbar-btn-hover: #f3f4f6;\n --trance-toolbar-btn-active: #e0e7ff;\n --trance-toolbar-btn-active-text: #4338ca;\n --trance-toolbar-separator: #e5e7eb;\n\n /* ---- Editor ---- */\n --trance-editor-bg: #ffffff;\n --trance-editor-placeholder: #9ca3af;\n --trance-editor-selection: #dbeafe;\n --trance-editor-highlight: #fef08a;\n\n /* ---- Code ---- */\n --trance-code-bg: #f3f4f6;\n --trance-code-text: #e11d48;\n --trance-code-block-bg: #1e1e2e;\n --trance-code-block-text: #cdd6f4;\n\n /* ---- Table ---- */\n --trance-table-border: #e5e7eb;\n --trance-table-header-bg: #f9fafb;\n --trance-table-stripe-bg: #f9fafb;\n --trance-table-hover-bg: #f3f4f6;\n\n /* ---- Blockquote ---- */\n --trance-blockquote-border: #6366f1;\n --trance-blockquote-bg: #f5f3ff;\n --trance-blockquote-text: #4b5563;\n\n /* ---- Link ---- */\n --trance-link-color: #6366f1;\n --trance-link-hover: #4f46e5;\n\n /* ---- Shadows ---- */\n --trance-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n --trance-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);\n --trance-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);\n --trance-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);\n --trance-shadow-float: 0 8px 30px rgba(0, 0, 0, 0.12);\n\n /* ---- Radii ---- */\n --trance-radius-sm: 4px;\n --trance-radius: 6px;\n --trance-radius-md: 8px;\n --trance-radius-lg: 12px;\n --trance-radius-full: 9999px;\n\n /* ---- Spacing ---- */\n --trance-spacing-xs: 4px;\n --trance-spacing-sm: 8px;\n --trance-spacing-md: 12px;\n --trance-spacing-lg: 16px;\n --trance-spacing-xl: 24px;\n\n /* ---- Typography ---- */\n --trance-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,\n BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n sans-serif;\n --trance-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n --trance-font-size-xs: 0.75rem;\n --trance-font-size-sm: 0.875rem;\n --trance-font-size-base: 1rem;\n --trance-font-size-lg: 1.125rem;\n --trance-font-size-xl: 1.25rem;\n --trance-font-size-2xl: 1.5rem;\n --trance-font-size-3xl: 1.875rem;\n --trance-font-size-4xl: 2.25rem;\n --trance-line-height: 1.7;\n --trance-line-height-tight: 1.3;\n\n /* ---- Transitions ---- */\n --trance-transition-fast: 100ms ease;\n --trance-transition: 150ms ease;\n --trance-transition-slow: 250ms ease;\n}\n\n[data-trance-theme='dark'] {\n /* ---- Surface & Background ---- */\n --trance-bg: #0a0a0a;\n --trance-bg-secondary: #0f0f0f;\n --trance-surface: #141414;\n --trance-surface-hover: #1a1a1a;\n --trance-surface-active: #262626;\n\n /* ---- Text ---- */\n --trance-text: #fafafa;\n --trance-text-secondary: #a3a3a3;\n --trance-text-muted: #737373;\n --trance-text-inverse: #0a0a0a;\n\n /* ---- Accent ---- */\n --trance-accent: #818cf8;\n --trance-accent-hover: #a5b4fc;\n --trance-accent-light: #1c1c2e;\n --trance-accent-text: #0a0a0a;\n\n /* ---- Borders ---- */\n --trance-border: #262626;\n --trance-border-strong: #333333;\n --trance-border-focus: #818cf8;\n\n /* ---- Toolbar ---- */\n --trance-toolbar-bg: #141414;\n --trance-toolbar-border: #262626;\n --trance-toolbar-btn-hover: #1a1a1a;\n --trance-toolbar-btn-active: #1c1c2e;\n --trance-toolbar-btn-active-text: #a5b4fc;\n --trance-toolbar-separator: #262626;\n\n /* ---- Editor ---- */\n --trance-editor-bg: #0a0a0a;\n --trance-editor-placeholder: #525252;\n --trance-editor-selection: #333333;\n --trance-editor-highlight: #665500;\n\n /* ---- Code ---- */\n --trance-code-bg: #141414;\n --trance-code-text: #f472b6;\n --trance-code-block-bg: #050505;\n --trance-code-block-text: #e5e5e5;\n\n /* ---- Table ---- */\n --trance-table-border: #262626;\n --trance-table-header-bg: #0f0f0f;\n --trance-table-stripe-bg: #0a0a0a;\n --trance-table-hover-bg: #141414;\n\n /* ---- Blockquote ---- */\n --trance-blockquote-border: #333333;\n --trance-blockquote-bg: #0f0f0f;\n --trance-blockquote-text: #a3a3a3;\n\n /* ---- Link ---- */\n --trance-link-color: #818cf8;\n --trance-link-hover: #a5b4fc;\n\n /* ---- Shadows ---- */\n --trance-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);\n --trance-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);\n --trance-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);\n --trance-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);\n --trance-shadow-float: 0 8px 30px rgba(0, 0, 0, 0.6);\n}\n\n/* Auto theme — follows system preference */\n@media (prefers-color-scheme: dark) {\n [data-trance-theme='auto'] {\n --trance-bg: #0a0a0a;\n --trance-bg-secondary: #0f0f0f;\n --trance-surface: #141414;\n --trance-surface-hover: #1a1a1a;\n --trance-surface-active: #262626;\n --trance-text: #fafafa;\n --trance-text-secondary: #a3a3a3;\n --trance-text-muted: #737373;\n --trance-text-inverse: #0a0a0a;\n --trance-accent: #818cf8;\n --trance-accent-hover: #a5b4fc;\n --trance-accent-light: #1c1c2e;\n --trance-accent-text: #0a0a0a;\n --trance-border: #262626;\n --trance-border-strong: #333333;\n --trance-border-focus: #818cf8;\n --trance-toolbar-bg: #141414;\n --trance-toolbar-border: #262626;\n --trance-toolbar-btn-hover: #1a1a1a;\n --trance-toolbar-btn-active: #1c1c2e;\n --trance-toolbar-btn-active-text: #a5b4fc;\n --trance-toolbar-separator: #262626;\n --trance-editor-bg: #0a0a0a;\n --trance-editor-placeholder: #525252;\n --trance-editor-selection: #333333;\n --trance-editor-highlight: #665500;\n --trance-code-bg: #141414;\n --trance-code-text: #f472b6;\n --trance-code-block-bg: #050505;\n --trance-code-block-text: #e5e5e5;\n --trance-table-border: #262626;\n --trance-table-header-bg: #0f0f0f;\n --trance-table-stripe-bg: #0a0a0a;\n --trance-table-hover-bg: #141414;\n --trance-blockquote-border: #333333;\n --trance-blockquote-bg: #0f0f0f;\n --trance-blockquote-text: #a3a3a3;\n --trance-link-color: #818cf8;\n --trance-link-hover: #a5b4fc;\n --trance-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);\n --trance-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);\n --trance-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);\n --trance-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);\n --trance-shadow-float: 0 8px 30px rgba(0, 0, 0, 0.6);\n }\n}\n","/* ============================================================\n trance-richtext-editor — Editor Styles\n Styles for the contentEditable area and inline formatting.\n ============================================================ */\n\n.trance-editor-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n border: 1px solid var(--trance-border);\n border-radius: var(--trance-radius-md);\n background: var(--trance-editor-bg);\n box-shadow: var(--trance-shadow-sm);\n overflow: visible;\n font-family: var(--trance-font-sans);\n transition:\n border-color var(--trance-transition),\n box-shadow var(--trance-transition);\n}\n\n.trance-editor-wrapper>.trance-toolbar {\n flex-shrink: 0;\n}\n\n.trance-editor-wrapper:focus-within {\n border-color: var(--trance-border-focus);\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);\n}\n\n/* ---- Content Editable ---- */\n.trance-editor-content {\n position: relative;\n flex: 1 1 auto;\n min-height: 200px;\n padding: var(--trance-spacing-lg) var(--trance-spacing-xl);\n color: var(--trance-text);\n font-size: var(--trance-font-size-base);\n line-height: var(--trance-line-height);\n outline: none;\n caret-color: var(--trance-accent);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n isolation: isolate;\n}\n\n.trance-editor-background-layer {\n position: absolute;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n overflow: hidden;\n border-radius: var(--trance-radius-md);\n}\n\n.trance-image-background-img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n pointer-events: none;\n user-select: none;\n}\n\n.trance-content-editable {\n position: relative;\n z-index: 1;\n}\n\n.trance-editor-content [data-lexical-editor] {\n outline: none;\n}\n\n/* ---- Placeholder ---- */\n.trance-editor-placeholder {\n position: absolute;\n top: 0;\n left: 0;\n padding: var(--trance-spacing-lg) var(--trance-spacing-xl);\n color: var(--trance-editor-placeholder);\n font-size: var(--trance-font-size-base);\n line-height: var(--trance-line-height);\n pointer-events: none;\n user-select: none;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* ---- Paragraphs ---- */\n.trance-paragraph {\n margin: 0 0 var(--trance-spacing-sm) 0;\n}\n\n.trance-paragraph:last-child {\n margin-bottom: 0;\n}\n\n/* ---- Headings ---- */\n.trance-h1 {\n font-size: var(--trance-font-size-4xl);\n font-weight: 800;\n line-height: var(--trance-line-height-tight);\n margin: var(--trance-spacing-xl) 0 var(--trance-spacing-md) 0;\n color: var(--trance-text);\n letter-spacing: -0.025em;\n}\n\n.trance-h2 {\n font-size: var(--trance-font-size-3xl);\n font-weight: 700;\n line-height: var(--trance-line-height-tight);\n margin: var(--trance-spacing-xl) 0 var(--trance-spacing-sm) 0;\n color: var(--trance-text);\n letter-spacing: -0.02em;\n}\n\n.trance-h3 {\n font-size: var(--trance-font-size-2xl);\n font-weight: 600;\n line-height: var(--trance-line-height-tight);\n margin: var(--trance-spacing-lg) 0 var(--trance-spacing-sm) 0;\n color: var(--trance-text);\n}\n\n.trance-h4 {\n font-size: var(--trance-font-size-xl);\n font-weight: 600;\n line-height: var(--trance-line-height-tight);\n margin: var(--trance-spacing-lg) 0 var(--trance-spacing-xs) 0;\n color: var(--trance-text);\n}\n\n.trance-h5 {\n font-size: var(--trance-font-size-lg);\n font-weight: 600;\n line-height: var(--trance-line-height-tight);\n margin: var(--trance-spacing-md) 0 var(--trance-spacing-xs) 0;\n color: var(--trance-text);\n}\n\n.trance-h6 {\n font-size: var(--trance-font-size-base);\n font-weight: 600;\n line-height: var(--trance-line-height-tight);\n margin: var(--trance-spacing-md) 0 var(--trance-spacing-xs) 0;\n color: var(--trance-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n/* ---- Inline Text Formatting ---- */\n.trance-bold {\n font-weight: 700;\n}\n\n.trance-italic {\n font-style: italic;\n}\n\n.trance-underline {\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n\n.trance-strikethrough {\n text-decoration: line-through;\n}\n\n.trance-underline.trance-strikethrough {\n text-decoration: underline line-through;\n}\n\n.trance-subscript {\n font-size: 0.75em;\n vertical-align: sub;\n}\n\n.trance-superscript {\n font-size: 0.75em;\n vertical-align: super;\n}\n\n.trance-highlight {\n background-color: var(--trance-editor-highlight);\n padding: 1px 3px;\n border-radius: 2px;\n}\n\n.trance-inline-code {\n font-family: var(--trance-font-mono);\n font-size: 0.9em;\n background: var(--trance-code-bg);\n color: var(--trance-code-text);\n padding: 2px 6px;\n border-radius: var(--trance-radius-sm);\n font-weight: 500;\n}\n\n/* ---- Links ---- */\n.trance-link {\n color: var(--trance-link-color);\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n cursor: pointer;\n transition: color var(--trance-transition-fast);\n}\n\n.trance-link:hover {\n color: var(--trance-link-hover);\n text-decoration-thickness: 2px;\n}\n\n/* ---- Lists ---- */\n.trance-ul {\n list-style-type: disc;\n padding-left: 1.5em;\n margin: var(--trance-spacing-sm) 0;\n}\n\n.trance-ol {\n list-style-type: decimal;\n padding-left: 1.5em;\n margin: var(--trance-spacing-sm) 0;\n}\n\n.trance-li {\n margin: var(--trance-spacing-xs) 0;\n}\n\n.trance-li-checked,\n.trance-li-unchecked {\n list-style-type: none;\n position: relative;\n padding-left: 1.5em;\n margin-left: -1.5em;\n}\n\n.trance-li-checked::before,\n.trance-li-unchecked::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0.35em;\n width: 16px;\n height: 16px;\n border: 2px solid var(--trance-border-strong);\n border-radius: var(--trance-radius-sm);\n cursor: pointer;\n transition: all var(--trance-transition-fast);\n}\n\n.trance-li-checked::before {\n background: var(--trance-accent);\n border-color: var(--trance-accent);\n}\n\n.trance-li-checked::after {\n content: \"\";\n position: absolute;\n left: 5px;\n top: 0.4em;\n width: 6px;\n height: 10px;\n border: solid var(--trance-accent-text);\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n.trance-li-checked {\n text-decoration: line-through;\n color: var(--trance-text-muted);\n}\n\n/* ---- Nested Lists ---- */\n.trance-ul .trance-ul {\n list-style-type: circle;\n}\n\n.trance-ul .trance-ul .trance-ul {\n list-style-type: square;\n}\n\n/* ---- Blockquote ---- */\n.trance-quote {\n border-left: 4px solid var(--trance-blockquote-border);\n background: var(--trance-blockquote-bg);\n color: var(--trance-blockquote-text);\n margin: var(--trance-spacing-md) 0;\n padding: var(--trance-spacing-md) var(--trance-spacing-lg);\n border-radius: 0 var(--trance-radius) var(--trance-radius) 0;\n font-style: italic;\n}\n\n/* ---- Code Block ---- */\n.trance-code-block {\n font-family: var(--trance-font-mono);\n font-size: var(--trance-font-size-sm);\n background: var(--trance-code-block-bg);\n color: var(--trance-code-block-text);\n padding: var(--trance-spacing-lg);\n margin: var(--trance-spacing-md) 0;\n border-radius: var(--trance-radius-md);\n overflow-x: auto;\n line-height: 1.6;\n tab-size: 2;\n white-space: pre;\n}\n\n/* ---- Table ---- */\n.trance-table {\n width: 100%;\n border-collapse: collapse;\n margin: var(--trance-spacing-md) 0;\n font-size: var(--trance-font-size-sm);\n overflow: hidden;\n border-radius: var(--trance-radius);\n border: 1px solid var(--trance-table-border);\n}\n\n.trance-table-cell-header {\n background: var(--trance-table-header-bg);\n font-weight: 600;\n text-align: left;\n padding: var(--trance-spacing-sm) var(--trance-spacing-md);\n border: 1px solid var(--trance-table-border);\n}\n\n.trance-table-cell {\n padding: var(--trance-spacing-sm) var(--trance-spacing-md);\n border: 1px solid var(--trance-table-border);\n vertical-align: top;\n}\n\n.trance-table-row-striped {\n background: var(--trance-table-stripe-bg);\n}\n\n/* ---- Horizontal Rule ---- */\n.trance-hr {\n border: none;\n height: 2px;\n background: linear-gradient(90deg,\n transparent,\n var(--trance-border-strong),\n transparent);\n margin: var(--trance-spacing-xl) 0;\n}\n\n/* ---- Image ---- */\n.trance-image-wrapper {\n display: block;\n position: relative;\n width: fit-content;\n max-width: 100%;\n margin: var(--trance-spacing-md) 0;\n border-radius: var(--trance-radius-md);\n cursor: default;\n user-select: none;\n}\n\n.trance-image-inner {\n position: relative;\n display: inline-block;\n max-width: 100%;\n}\n\n.trance-image-inner figure {\n margin: 0;\n}\n\n.trance-image-inner img {\n display: block;\n max-width: 100%;\n height: auto;\n border-radius: var(--trance-radius-md);\n}\n\n.trance-image-inner.selected img {\n outline: 2px solid var(--trance-accent);\n outline-offset: 2px;\n}\n\n.trance-image-background-placeholder {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px;\n background: var(--trance-toolbar-bg);\n border: 1px dashed var(--trance-border);\n border-radius: var(--trance-radius);\n font-size: var(--trance-font-size-sm);\n color: var(--trance-text-secondary);\n cursor: pointer;\n user-select: none;\n}\n\n.trance-image-inner.selected .trance-image-background-placeholder {\n border-color: var(--trance-accent);\n color: var(--trance-accent);\n}\n\n/* Image alignment */\n.trance-image-wrapper.align-left {\n margin-right: auto;\n margin-left: 0;\n}\n\n.trance-image-wrapper.align-center {\n margin-left: auto;\n margin-right: auto;\n}\n\n.trance-image-wrapper.align-right {\n margin-left: auto;\n margin-right: 0;\n}\n\n/* Image toolbar (alignment controls) */\n.trance-image-toolbar {\n position: absolute;\n top: -36px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 2px;\n background: var(--trance-toolbar-bg);\n border: 1px solid var(--trance-border);\n border-radius: var(--trance-radius-md);\n box-shadow: var(--trance-shadow-float);\n z-index: 100;\n animation: trance-image-toolbar-in 150ms ease;\n}\n\n@keyframes trance-image-toolbar-in {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(4px);\n }\n\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0);\n }\n}\n\n.trance-image-toolbar button {\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(--trance-radius);\n background: transparent;\n color: var(--trance-text-secondary);\n cursor: pointer;\n transition: all var(--trance-transition-fast);\n}\n\n.trance-image-toolbar button:hover {\n background: var(--trance-toolbar-btn-hover);\n color: var(--trance-text);\n}\n\n.trance-image-toolbar button.active {\n background: var(--trance-toolbar-btn-active);\n color: var(--trance-toolbar-btn-active-text);\n}\n\n.trance-image-toolbar button svg {\n width: 14px;\n height: 14px;\n}\n\n.trance-image-toolbar-divider {\n width: 1px;\n height: 18px;\n background: var(--trance-border);\n margin: 0 2px;\n}\n\n/* Image resize handle */\n.trance-image-resize-handle {\n position: absolute;\n bottom: 4px;\n right: 4px;\n width: 12px;\n height: 12px;\n background: var(--trance-accent);\n border: 2px solid var(--trance-bg);\n border-radius: var(--trance-radius-sm);\n cursor: nwse-resize;\n z-index: 10;\n box-shadow: var(--trance-shadow);\n}\n\n.trance-image-resize-handle:hover {\n background: var(--trance-accent-hover);\n transform: scale(1.1);\n}\n\n.trance-image-caption {\n text-align: center;\n font-size: var(--trance-font-size-sm);\n color: var(--trance-text-muted);\n margin-top: var(--trance-spacing-xs);\n font-style: italic;\n}\n\n/* ---- Text Alignment ---- */\n.trance-text-left {\n text-align: left;\n}\n\n.trance-text-center {\n text-align: center;\n}\n\n.trance-text-right {\n text-align: right;\n}\n\n.trance-text-justify {\n text-align: justify;\n}\n\n/* ---- Indentation ---- */\n.trance-indent {\n --lexical-indent-base-value: 40px;\n}\n","/* ============================================================\n trance-richtext-editor — Toolbar Styles\n Styles for the main toolbar and floating toolbar.\n ============================================================ */\n\n/* ---- Main Toolbar ---- */\n.trance-toolbar {\n position: relative;\n z-index: 10;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n gap: 2px;\n padding: var(--trance-spacing-xs) var(--trance-spacing-sm);\n background: var(--trance-toolbar-bg);\n border-bottom: 1px solid var(--trance-toolbar-border);\n user-select: none;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--trance-border-strong) transparent;\n}\n\n.trance-toolbar::-webkit-scrollbar {\n height: 6px;\n}\n\n.trance-toolbar::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.trance-toolbar::-webkit-scrollbar-thumb {\n background: var(--trance-border-strong);\n border-radius: var(--trance-radius-full);\n}\n\n/* ---- Toolbar Button ---- */\n.trance-toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--trance-radius);\n background: transparent;\n color: var(--trance-text-secondary);\n cursor: pointer;\n transition: all var(--trance-transition-fast);\n flex-shrink: 0;\n position: relative;\n}\n\n.trance-toolbar-btn:hover {\n background: var(--trance-toolbar-btn-hover);\n color: var(--trance-text);\n}\n\n.trance-toolbar-btn:active {\n transform: scale(0.94);\n}\n\n.trance-toolbar-btn.active {\n background: var(--trance-toolbar-btn-active);\n color: var(--trance-toolbar-btn-active-text);\n}\n\n.trance-toolbar-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.trance-toolbar-btn:disabled:hover {\n background: transparent;\n transform: none;\n}\n\n.trance-toolbar-btn svg {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n}\n\n/* ---- Toolbar Separator ---- */\n.trance-toolbar-separator {\n width: 1px;\n height: 20px;\n background: var(--trance-toolbar-separator);\n margin: 0 var(--trance-spacing-xs);\n flex-shrink: 0;\n}\n\n/* ---- Block Type Dropdown ---- */\n.trance-block-dropdown-wrapper {\n position: relative;\n}\n\n.trance-block-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--trance-spacing-xs);\n height: 32px;\n padding: 0 var(--trance-spacing-sm);\n border: none;\n border-radius: var(--trance-radius);\n background: transparent;\n color: var(--trance-text-secondary);\n font-family: var(--trance-font-sans);\n font-size: var(--trance-font-size-sm);\n font-weight: 500;\n cursor: pointer;\n transition: all var(--trance-transition-fast);\n white-space: nowrap;\n min-width: 100px;\n}\n\n.trance-block-dropdown-trigger:hover {\n background: var(--trance-toolbar-btn-hover);\n color: var(--trance-text);\n}\n\n.trance-block-dropdown-trigger svg.chevron {\n width: 12px;\n height: 12px;\n transition: transform var(--trance-transition);\n}\n\n.trance-block-dropdown-trigger[aria-expanded=\"true\"] svg.chevron {\n transform: rotate(180deg);\n}\n\n.trance-block-dropdown-menu {\n position: fixed;\n z-index: 100;\n min-width: 160px;\n padding: var(--trance-spacing-xs);\n background: var(--trance-toolbar-bg);\n border: 1px solid var(--trance-border);\n border-radius: var(--trance-radius-md);\n box-shadow: var(--trance-shadow-lg);\n animation: trance-dropdown-in 150ms ease;\n}\n\n@keyframes trance-dropdown-in {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.97);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n.trance-block-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--trance-spacing-sm);\n width: 100%;\n padding: var(--trance-spacing-sm) var(--trance-spacing-md);\n border: none;\n border-radius: var(--trance-radius);\n background: transparent;\n color: var(--trance-text);\n font-family: var(--trance-font-sans);\n font-size: var(--trance-font-size-sm);\n cursor: pointer;\n transition: background var(--trance-transition-fast);\n text-align: left;\n}\n\n.trance-block-dropdown-item:hover {\n background: var(--trance-toolbar-btn-hover);\n}\n\n.trance-block-dropdown-item.active {\n background: var(--trance-toolbar-btn-active);\n color: var(--trance-toolbar-btn-active-text);\n}\n\n.trance-block-dropdown-item svg {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n opacity: 0.7;\n}\n\n/* ---- Table Size Picker ---- */\n.trance-table-dropdown-wrapper {\n position: relative;\n}\n\n.trance-table-size-picker {\n position: fixed;\n z-index: 100;\n padding: var(--trance-spacing-sm);\n background: var(--trance-toolbar-bg);\n border: 1px solid var(--trance-border);\n border-radius: var(--trance-radius-md);\n box-shadow: var(--trance-shadow-lg);\n animation: trance-dropdown-in 150ms ease;\n}\n\n.trance-table-size-picker-label {\n font-size: var(--trance-font-size-sm);\n font-weight: 500;\n color: var(--trance-text);\n margin-bottom: var(--trance-spacing-sm);\n text-align: center;\n min-width: 120px;\n}\n\n.trance-table-size-picker-grid {\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n\n.trance-table-size-picker-row {\n display: flex;\n gap: 3px;\n}\n\n.trance-table-size-picker-cell {\n width: 18px;\n height: 18px;\n padding: 0;\n border: 1px solid var(--trance-border);\n border-radius: var(--trance-radius-sm);\n background: var(--trance-surface);\n cursor: pointer;\n transition: all var(--trance-transition-fast);\n}\n\n.trance-table-size-picker-cell:hover,\n.trance-table-size-picker-cell.active {\n background: var(--trance-accent);\n border-color: var(--trance-accent);\n}\n\n/* ---- Tooltip ---- */\n.trance-tooltip {\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n padding: 4px 8px;\n background: var(--trance-text);\n color: var(--trance-text-inverse);\n font-size: var(--trance-font-size-xs);\n font-weight: 500;\n border-radius: var(--trance-radius-sm);\n white-space: nowrap;\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--trance-transition);\n z-index: 1002;\n}\n\n.trance-toolbar-btn:hover .trance-tooltip {\n opacity: 1;\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { SerializedEditorState, LexicalEditor, NodeKey, DecoratorNode, Spread, SerializedLexicalNode, DOMConversionMap, DOMExportOutput, LexicalNode, LexicalCommand } from 'lexical';
|
|
3
|
+
export { LexicalEditor, SerializedEditorState } from 'lexical';
|
|
4
|
+
|
|
5
|
+
interface ToolbarFeatures {
|
|
6
|
+
bold?: boolean;
|
|
7
|
+
italic?: boolean;
|
|
8
|
+
underline?: boolean;
|
|
9
|
+
strikethrough?: boolean;
|
|
10
|
+
code?: boolean;
|
|
11
|
+
link?: boolean;
|
|
12
|
+
orderedList?: boolean;
|
|
13
|
+
unorderedList?: boolean;
|
|
14
|
+
checkList?: boolean;
|
|
15
|
+
blockquote?: boolean;
|
|
16
|
+
codeBlock?: boolean;
|
|
17
|
+
image?: boolean;
|
|
18
|
+
table?: boolean;
|
|
19
|
+
horizontalRule?: boolean;
|
|
20
|
+
heading?: boolean;
|
|
21
|
+
textAlign?: boolean;
|
|
22
|
+
superscript?: boolean;
|
|
23
|
+
subscript?: boolean;
|
|
24
|
+
highlight?: boolean;
|
|
25
|
+
import?: boolean;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
interface TranceEditorProps {
|
|
29
|
+
/** Initialize from an HTML string */
|
|
30
|
+
initialHtml?: string;
|
|
31
|
+
/** Initialize from serialized Lexical JSON */
|
|
32
|
+
initialJson?: SerializedEditorState;
|
|
33
|
+
/** Placeholder text shown when editor is empty */
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
/** Called when editor content changes (debounced) */
|
|
36
|
+
onChange?: (data: {
|
|
37
|
+
html: string;
|
|
38
|
+
json: SerializedEditorState;
|
|
39
|
+
}) => void;
|
|
40
|
+
/** Called when editor loses focus */
|
|
41
|
+
onBlur?: () => void;
|
|
42
|
+
/** Called when editor gains focus */
|
|
43
|
+
onFocus?: () => void;
|
|
44
|
+
/** Feature flags — all enabled by default */
|
|
45
|
+
features?: ToolbarFeatures;
|
|
46
|
+
/** Image upload handler. If not provided, images are base64 encoded. */
|
|
47
|
+
onImageUpload?: (file: File) => Promise<{
|
|
48
|
+
url: string;
|
|
49
|
+
alt?: string;
|
|
50
|
+
}>;
|
|
51
|
+
/** Theme mode */
|
|
52
|
+
theme?: "light" | "dark" | "auto";
|
|
53
|
+
/** Additional CSS class for the editor wrapper */
|
|
54
|
+
className?: string;
|
|
55
|
+
/** Whether the editor is editable */
|
|
56
|
+
editable?: boolean;
|
|
57
|
+
/** Auto-focus editor on mount */
|
|
58
|
+
autoFocus?: boolean;
|
|
59
|
+
/** Maximum character length */
|
|
60
|
+
maxLength?: number;
|
|
61
|
+
/** Debounce ms for onChange */
|
|
62
|
+
debounceMs?: number;
|
|
63
|
+
}
|
|
64
|
+
interface TranceEditorRef {
|
|
65
|
+
/** Get the current editor content as HTML */
|
|
66
|
+
getHtml: () => string;
|
|
67
|
+
/** Get the current editor state as JSON */
|
|
68
|
+
getJson: () => SerializedEditorState;
|
|
69
|
+
/** Set editor content from HTML string */
|
|
70
|
+
setHtml: (html: string) => void;
|
|
71
|
+
/** Set editor content from JSON */
|
|
72
|
+
setJson: (json: SerializedEditorState) => void;
|
|
73
|
+
/** Focus the editor */
|
|
74
|
+
focus: () => void;
|
|
75
|
+
/** Clear all editor content */
|
|
76
|
+
clear: () => void;
|
|
77
|
+
/** Get the underlying Lexical editor instance (escape hatch) */
|
|
78
|
+
getLexicalEditor: () => LexicalEditor;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* TranceEditor — A plug-and-play rich text editor for React.
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* ```tsx
|
|
85
|
+
* import { TranceEditor } from 'trance-richtext-editor';
|
|
86
|
+
* import 'trance-richtext-editor/styles.css';
|
|
87
|
+
*
|
|
88
|
+
* function App() {
|
|
89
|
+
* return (
|
|
90
|
+
* <TranceEditor
|
|
91
|
+
* placeholder="Write something amazing..."
|
|
92
|
+
* onChange={({ html }) => console.log(html)}
|
|
93
|
+
* />
|
|
94
|
+
* );
|
|
95
|
+
* }
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
declare const TranceEditor: React.ForwardRefExoticComponent<TranceEditorProps & React.RefAttributes<TranceEditorRef>>;
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Serialize the current editor state to an HTML string.
|
|
102
|
+
* Must be called within an editor.read() or editor.update() context,
|
|
103
|
+
* or pass the editor and it will call read() for you.
|
|
104
|
+
*/
|
|
105
|
+
declare function serializeToHtml(editor: LexicalEditor): string;
|
|
106
|
+
/**
|
|
107
|
+
* Replace editor content from an HTML string.
|
|
108
|
+
*/
|
|
109
|
+
declare function deserializeFromHtml(editor: LexicalEditor, html: string): void;
|
|
110
|
+
/**
|
|
111
|
+
* Get the editor state as serialized JSON.
|
|
112
|
+
*/
|
|
113
|
+
declare function serializeToJson(editor: LexicalEditor): SerializedEditorState;
|
|
114
|
+
/**
|
|
115
|
+
* Replace editor state from JSON.
|
|
116
|
+
*/
|
|
117
|
+
declare function deserializeFromJson(editor: LexicalEditor, json: SerializedEditorState): void;
|
|
118
|
+
/**
|
|
119
|
+
* Convert serialized Lexical JSON to HTML string (server-side / headless).
|
|
120
|
+
* Does NOT require a browser DOM — uses a headless Lexical editor.
|
|
121
|
+
*
|
|
122
|
+
* @example
|
|
123
|
+
* ```ts
|
|
124
|
+
* import { convertJsonToHtml } from 'trance-richtext-editor';
|
|
125
|
+
* const html = convertJsonToHtml(savedJson);
|
|
126
|
+
* ```
|
|
127
|
+
*/
|
|
128
|
+
declare function convertJsonToHtml(json: SerializedEditorState): string;
|
|
129
|
+
/**
|
|
130
|
+
* Convert HTML string to serialized Lexical JSON (server-side / headless).
|
|
131
|
+
*
|
|
132
|
+
* @example
|
|
133
|
+
* ```ts
|
|
134
|
+
* import { convertHtmlToJson } from 'trance-richtext-editor';
|
|
135
|
+
* const json = convertHtmlToJson('<p>Hello world</p>');
|
|
136
|
+
* ```
|
|
137
|
+
*/
|
|
138
|
+
declare function convertHtmlToJson(html: string): SerializedEditorState;
|
|
139
|
+
|
|
140
|
+
type ImageAlignment = "left" | "center" | "right";
|
|
141
|
+
type ImageMode = "inline" | "background";
|
|
142
|
+
interface ImagePayload {
|
|
143
|
+
src: string;
|
|
144
|
+
altText: string;
|
|
145
|
+
width?: number;
|
|
146
|
+
height?: number;
|
|
147
|
+
caption?: string;
|
|
148
|
+
alignment?: ImageAlignment;
|
|
149
|
+
mode?: ImageMode;
|
|
150
|
+
key?: NodeKey;
|
|
151
|
+
}
|
|
152
|
+
type SerializedImageNode = Spread<{
|
|
153
|
+
src: string;
|
|
154
|
+
altText: string;
|
|
155
|
+
width?: number;
|
|
156
|
+
height?: number;
|
|
157
|
+
caption?: string;
|
|
158
|
+
alignment?: ImageAlignment;
|
|
159
|
+
mode?: ImageMode;
|
|
160
|
+
}, SerializedLexicalNode>;
|
|
161
|
+
declare class ImageNode extends DecoratorNode<ReactNode> {
|
|
162
|
+
__src: string;
|
|
163
|
+
__altText: string;
|
|
164
|
+
__width: number | undefined;
|
|
165
|
+
__height: number | undefined;
|
|
166
|
+
__caption: string | undefined;
|
|
167
|
+
__alignment: ImageAlignment;
|
|
168
|
+
__mode: ImageMode;
|
|
169
|
+
static getType(): string;
|
|
170
|
+
static clone(node: ImageNode): ImageNode;
|
|
171
|
+
static importJSON(serializedNode: SerializedImageNode): ImageNode;
|
|
172
|
+
static importDOM(): DOMConversionMap | null;
|
|
173
|
+
constructor(src: string, altText: string, width?: number, height?: number, caption?: string, alignment?: ImageAlignment, mode?: ImageMode, key?: NodeKey);
|
|
174
|
+
exportJSON(): SerializedImageNode;
|
|
175
|
+
exportDOM(): DOMExportOutput;
|
|
176
|
+
private applyAlignmentStyles;
|
|
177
|
+
createDOM(): HTMLElement;
|
|
178
|
+
updateDOM(prevNode: ImageNode, dom: HTMLElement): boolean;
|
|
179
|
+
getSrc(): string;
|
|
180
|
+
getAltText(): string;
|
|
181
|
+
setWidthAndHeight(width: number | undefined, height: number | undefined): void;
|
|
182
|
+
getAlignment(): ImageAlignment;
|
|
183
|
+
setAlignment(alignment: ImageAlignment): void;
|
|
184
|
+
getMode(): ImageMode;
|
|
185
|
+
setMode(mode: ImageMode): void;
|
|
186
|
+
decorate(): ReactNode;
|
|
187
|
+
isInline(): boolean;
|
|
188
|
+
}
|
|
189
|
+
declare function $createImageNode(payload: ImagePayload): ImageNode;
|
|
190
|
+
declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
|
|
191
|
+
|
|
192
|
+
type SerializedHorizontalRuleNode = SerializedLexicalNode;
|
|
193
|
+
declare class HorizontalRuleNode extends DecoratorNode<ReactNode> {
|
|
194
|
+
static getType(): string;
|
|
195
|
+
static clone(node: HorizontalRuleNode): HorizontalRuleNode;
|
|
196
|
+
static importJSON(): HorizontalRuleNode;
|
|
197
|
+
static importDOM(): DOMConversionMap | null;
|
|
198
|
+
constructor(key?: NodeKey);
|
|
199
|
+
exportJSON(): SerializedHorizontalRuleNode;
|
|
200
|
+
exportDOM(): DOMExportOutput;
|
|
201
|
+
createDOM(): HTMLElement;
|
|
202
|
+
updateDOM(): false;
|
|
203
|
+
getTextContent(): string;
|
|
204
|
+
isInline(): boolean;
|
|
205
|
+
decorate(): ReactNode;
|
|
206
|
+
}
|
|
207
|
+
declare function $createHorizontalRuleNode(): HorizontalRuleNode;
|
|
208
|
+
declare function $isHorizontalRuleNode(node: LexicalNode | null | undefined): node is HorizontalRuleNode;
|
|
209
|
+
|
|
210
|
+
declare const INSERT_IMAGE_COMMAND: LexicalCommand<ImagePayload>;
|
|
211
|
+
|
|
212
|
+
declare const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;
|
|
213
|
+
|
|
214
|
+
export { $createHorizontalRuleNode, $createImageNode, $isHorizontalRuleNode, $isImageNode, HorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND, INSERT_IMAGE_COMMAND, ImageNode, type ImagePayload, type SerializedImageNode, type ToolbarFeatures, TranceEditor, type TranceEditorProps, type TranceEditorRef, convertHtmlToJson, convertJsonToHtml, deserializeFromHtml, deserializeFromJson, serializeToHtml, serializeToJson };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { SerializedEditorState, LexicalEditor, NodeKey, DecoratorNode, Spread, SerializedLexicalNode, DOMConversionMap, DOMExportOutput, LexicalNode, LexicalCommand } from 'lexical';
|
|
3
|
+
export { LexicalEditor, SerializedEditorState } from 'lexical';
|
|
4
|
+
|
|
5
|
+
interface ToolbarFeatures {
|
|
6
|
+
bold?: boolean;
|
|
7
|
+
italic?: boolean;
|
|
8
|
+
underline?: boolean;
|
|
9
|
+
strikethrough?: boolean;
|
|
10
|
+
code?: boolean;
|
|
11
|
+
link?: boolean;
|
|
12
|
+
orderedList?: boolean;
|
|
13
|
+
unorderedList?: boolean;
|
|
14
|
+
checkList?: boolean;
|
|
15
|
+
blockquote?: boolean;
|
|
16
|
+
codeBlock?: boolean;
|
|
17
|
+
image?: boolean;
|
|
18
|
+
table?: boolean;
|
|
19
|
+
horizontalRule?: boolean;
|
|
20
|
+
heading?: boolean;
|
|
21
|
+
textAlign?: boolean;
|
|
22
|
+
superscript?: boolean;
|
|
23
|
+
subscript?: boolean;
|
|
24
|
+
highlight?: boolean;
|
|
25
|
+
import?: boolean;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
interface TranceEditorProps {
|
|
29
|
+
/** Initialize from an HTML string */
|
|
30
|
+
initialHtml?: string;
|
|
31
|
+
/** Initialize from serialized Lexical JSON */
|
|
32
|
+
initialJson?: SerializedEditorState;
|
|
33
|
+
/** Placeholder text shown when editor is empty */
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
/** Called when editor content changes (debounced) */
|
|
36
|
+
onChange?: (data: {
|
|
37
|
+
html: string;
|
|
38
|
+
json: SerializedEditorState;
|
|
39
|
+
}) => void;
|
|
40
|
+
/** Called when editor loses focus */
|
|
41
|
+
onBlur?: () => void;
|
|
42
|
+
/** Called when editor gains focus */
|
|
43
|
+
onFocus?: () => void;
|
|
44
|
+
/** Feature flags — all enabled by default */
|
|
45
|
+
features?: ToolbarFeatures;
|
|
46
|
+
/** Image upload handler. If not provided, images are base64 encoded. */
|
|
47
|
+
onImageUpload?: (file: File) => Promise<{
|
|
48
|
+
url: string;
|
|
49
|
+
alt?: string;
|
|
50
|
+
}>;
|
|
51
|
+
/** Theme mode */
|
|
52
|
+
theme?: "light" | "dark" | "auto";
|
|
53
|
+
/** Additional CSS class for the editor wrapper */
|
|
54
|
+
className?: string;
|
|
55
|
+
/** Whether the editor is editable */
|
|
56
|
+
editable?: boolean;
|
|
57
|
+
/** Auto-focus editor on mount */
|
|
58
|
+
autoFocus?: boolean;
|
|
59
|
+
/** Maximum character length */
|
|
60
|
+
maxLength?: number;
|
|
61
|
+
/** Debounce ms for onChange */
|
|
62
|
+
debounceMs?: number;
|
|
63
|
+
}
|
|
64
|
+
interface TranceEditorRef {
|
|
65
|
+
/** Get the current editor content as HTML */
|
|
66
|
+
getHtml: () => string;
|
|
67
|
+
/** Get the current editor state as JSON */
|
|
68
|
+
getJson: () => SerializedEditorState;
|
|
69
|
+
/** Set editor content from HTML string */
|
|
70
|
+
setHtml: (html: string) => void;
|
|
71
|
+
/** Set editor content from JSON */
|
|
72
|
+
setJson: (json: SerializedEditorState) => void;
|
|
73
|
+
/** Focus the editor */
|
|
74
|
+
focus: () => void;
|
|
75
|
+
/** Clear all editor content */
|
|
76
|
+
clear: () => void;
|
|
77
|
+
/** Get the underlying Lexical editor instance (escape hatch) */
|
|
78
|
+
getLexicalEditor: () => LexicalEditor;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* TranceEditor — A plug-and-play rich text editor for React.
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* ```tsx
|
|
85
|
+
* import { TranceEditor } from 'trance-richtext-editor';
|
|
86
|
+
* import 'trance-richtext-editor/styles.css';
|
|
87
|
+
*
|
|
88
|
+
* function App() {
|
|
89
|
+
* return (
|
|
90
|
+
* <TranceEditor
|
|
91
|
+
* placeholder="Write something amazing..."
|
|
92
|
+
* onChange={({ html }) => console.log(html)}
|
|
93
|
+
* />
|
|
94
|
+
* );
|
|
95
|
+
* }
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
declare const TranceEditor: React.ForwardRefExoticComponent<TranceEditorProps & React.RefAttributes<TranceEditorRef>>;
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Serialize the current editor state to an HTML string.
|
|
102
|
+
* Must be called within an editor.read() or editor.update() context,
|
|
103
|
+
* or pass the editor and it will call read() for you.
|
|
104
|
+
*/
|
|
105
|
+
declare function serializeToHtml(editor: LexicalEditor): string;
|
|
106
|
+
/**
|
|
107
|
+
* Replace editor content from an HTML string.
|
|
108
|
+
*/
|
|
109
|
+
declare function deserializeFromHtml(editor: LexicalEditor, html: string): void;
|
|
110
|
+
/**
|
|
111
|
+
* Get the editor state as serialized JSON.
|
|
112
|
+
*/
|
|
113
|
+
declare function serializeToJson(editor: LexicalEditor): SerializedEditorState;
|
|
114
|
+
/**
|
|
115
|
+
* Replace editor state from JSON.
|
|
116
|
+
*/
|
|
117
|
+
declare function deserializeFromJson(editor: LexicalEditor, json: SerializedEditorState): void;
|
|
118
|
+
/**
|
|
119
|
+
* Convert serialized Lexical JSON to HTML string (server-side / headless).
|
|
120
|
+
* Does NOT require a browser DOM — uses a headless Lexical editor.
|
|
121
|
+
*
|
|
122
|
+
* @example
|
|
123
|
+
* ```ts
|
|
124
|
+
* import { convertJsonToHtml } from 'trance-richtext-editor';
|
|
125
|
+
* const html = convertJsonToHtml(savedJson);
|
|
126
|
+
* ```
|
|
127
|
+
*/
|
|
128
|
+
declare function convertJsonToHtml(json: SerializedEditorState): string;
|
|
129
|
+
/**
|
|
130
|
+
* Convert HTML string to serialized Lexical JSON (server-side / headless).
|
|
131
|
+
*
|
|
132
|
+
* @example
|
|
133
|
+
* ```ts
|
|
134
|
+
* import { convertHtmlToJson } from 'trance-richtext-editor';
|
|
135
|
+
* const json = convertHtmlToJson('<p>Hello world</p>');
|
|
136
|
+
* ```
|
|
137
|
+
*/
|
|
138
|
+
declare function convertHtmlToJson(html: string): SerializedEditorState;
|
|
139
|
+
|
|
140
|
+
type ImageAlignment = "left" | "center" | "right";
|
|
141
|
+
type ImageMode = "inline" | "background";
|
|
142
|
+
interface ImagePayload {
|
|
143
|
+
src: string;
|
|
144
|
+
altText: string;
|
|
145
|
+
width?: number;
|
|
146
|
+
height?: number;
|
|
147
|
+
caption?: string;
|
|
148
|
+
alignment?: ImageAlignment;
|
|
149
|
+
mode?: ImageMode;
|
|
150
|
+
key?: NodeKey;
|
|
151
|
+
}
|
|
152
|
+
type SerializedImageNode = Spread<{
|
|
153
|
+
src: string;
|
|
154
|
+
altText: string;
|
|
155
|
+
width?: number;
|
|
156
|
+
height?: number;
|
|
157
|
+
caption?: string;
|
|
158
|
+
alignment?: ImageAlignment;
|
|
159
|
+
mode?: ImageMode;
|
|
160
|
+
}, SerializedLexicalNode>;
|
|
161
|
+
declare class ImageNode extends DecoratorNode<ReactNode> {
|
|
162
|
+
__src: string;
|
|
163
|
+
__altText: string;
|
|
164
|
+
__width: number | undefined;
|
|
165
|
+
__height: number | undefined;
|
|
166
|
+
__caption: string | undefined;
|
|
167
|
+
__alignment: ImageAlignment;
|
|
168
|
+
__mode: ImageMode;
|
|
169
|
+
static getType(): string;
|
|
170
|
+
static clone(node: ImageNode): ImageNode;
|
|
171
|
+
static importJSON(serializedNode: SerializedImageNode): ImageNode;
|
|
172
|
+
static importDOM(): DOMConversionMap | null;
|
|
173
|
+
constructor(src: string, altText: string, width?: number, height?: number, caption?: string, alignment?: ImageAlignment, mode?: ImageMode, key?: NodeKey);
|
|
174
|
+
exportJSON(): SerializedImageNode;
|
|
175
|
+
exportDOM(): DOMExportOutput;
|
|
176
|
+
private applyAlignmentStyles;
|
|
177
|
+
createDOM(): HTMLElement;
|
|
178
|
+
updateDOM(prevNode: ImageNode, dom: HTMLElement): boolean;
|
|
179
|
+
getSrc(): string;
|
|
180
|
+
getAltText(): string;
|
|
181
|
+
setWidthAndHeight(width: number | undefined, height: number | undefined): void;
|
|
182
|
+
getAlignment(): ImageAlignment;
|
|
183
|
+
setAlignment(alignment: ImageAlignment): void;
|
|
184
|
+
getMode(): ImageMode;
|
|
185
|
+
setMode(mode: ImageMode): void;
|
|
186
|
+
decorate(): ReactNode;
|
|
187
|
+
isInline(): boolean;
|
|
188
|
+
}
|
|
189
|
+
declare function $createImageNode(payload: ImagePayload): ImageNode;
|
|
190
|
+
declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
|
|
191
|
+
|
|
192
|
+
type SerializedHorizontalRuleNode = SerializedLexicalNode;
|
|
193
|
+
declare class HorizontalRuleNode extends DecoratorNode<ReactNode> {
|
|
194
|
+
static getType(): string;
|
|
195
|
+
static clone(node: HorizontalRuleNode): HorizontalRuleNode;
|
|
196
|
+
static importJSON(): HorizontalRuleNode;
|
|
197
|
+
static importDOM(): DOMConversionMap | null;
|
|
198
|
+
constructor(key?: NodeKey);
|
|
199
|
+
exportJSON(): SerializedHorizontalRuleNode;
|
|
200
|
+
exportDOM(): DOMExportOutput;
|
|
201
|
+
createDOM(): HTMLElement;
|
|
202
|
+
updateDOM(): false;
|
|
203
|
+
getTextContent(): string;
|
|
204
|
+
isInline(): boolean;
|
|
205
|
+
decorate(): ReactNode;
|
|
206
|
+
}
|
|
207
|
+
declare function $createHorizontalRuleNode(): HorizontalRuleNode;
|
|
208
|
+
declare function $isHorizontalRuleNode(node: LexicalNode | null | undefined): node is HorizontalRuleNode;
|
|
209
|
+
|
|
210
|
+
declare const INSERT_IMAGE_COMMAND: LexicalCommand<ImagePayload>;
|
|
211
|
+
|
|
212
|
+
declare const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>;
|
|
213
|
+
|
|
214
|
+
export { $createHorizontalRuleNode, $createImageNode, $isHorizontalRuleNode, $isImageNode, HorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND, INSERT_IMAGE_COMMAND, ImageNode, type ImagePayload, type SerializedImageNode, type ToolbarFeatures, TranceEditor, type TranceEditorProps, type TranceEditorRef, convertHtmlToJson, convertJsonToHtml, deserializeFromHtml, deserializeFromJson, serializeToHtml, serializeToJson };
|