tiptap-editor-custom-stg 1.0.0 → 1.0.2
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/README.md +0 -1
- package/dist/index.css +1 -1
- package/dist/index.d.mts +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +6 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -14
- package/dist/index.mjs.map +1 -1
- package/package.json +87 -87
package/README.md
CHANGED
|
@@ -91,7 +91,6 @@ function MyComponent() {
|
|
|
91
91
|
| `onAlert` | `(message) => void` | — | `window.alert` | Custom alert/notification function |
|
|
92
92
|
| `onLoadingChange` | `(isLoading) => void` | — | — | Global loading state callback |
|
|
93
93
|
| `onRegisterReset` | `(callback) => () => void` | — | — | Register a reset callback, returns cleanup fn |
|
|
94
|
-
| `maxFileSizeMB` | `number` | — | `50` | Max upload file size in MB |
|
|
95
94
|
| `placeholder` | `string` | — | `'Start typing...'` | Editor placeholder text. This value is passed into Tiptap's `Placeholder` extension and is shown when the editor is empty |
|
|
96
95
|
| `toolbarConfig` | `{ groups?: ToolbarGroup[]; showDividers?: boolean }` | — | default toolbar config | Customize which toolbar groups are shown and whether dividers are rendered |
|
|
97
96
|
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.tiptap-editor-wrapper{border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;font-size:15px;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.05),0 1px 2px -1px rgba(0,0,0,.05)}.tiptap-editor-wrapper .tiptap-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.35rem .75rem;background:#fff;border-bottom:1px solid #f3f4f6}.tiptap-editor-wrapper .tiptap-toolbar button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:.375rem;background:rgba(0,0,0,0);cursor:pointer;color:#4b5563;font-size:14px;font-weight:500;transition:all .15s ease;line-height:1}.tiptap-editor-wrapper .tiptap-toolbar button:hover:not(:disabled){background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-toolbar button.is-active{background:#e5e7eb;color:#111827}.tiptap-editor-wrapper .tiptap-toolbar button:disabled{opacity:.4;cursor:not-allowed}.tiptap-editor-wrapper .tiptap-toolbar button.toolbar-button-dropdown{width:44px;padding:0 4px 0 6px;gap:2px}.tiptap-editor-wrapper .tiptap-toolbar button.toolbar-button-dropdown .dropdown-arrow{width:10px;height:10px;opacity:.6;margin-left:-1px}.tiptap-editor-wrapper .tiptap-toolbar button svg{width:18px;height:18px}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-divider{width:1px;height:20px;background:#e5e7eb;margin:0 .5rem;flex-shrink:0}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select-wrapper{position:relative;display:inline-flex;align-items:center}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select{appearance:none;height:32px;border:none;border-radius:.375rem;background:rgba(0,0,0,0);font-size:14.5px;cursor:pointer;padding:0 1.5rem 0 .5rem;color:#4b5563;font-family:inherit;font-weight:500;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select:hover{background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select:focus{outline:none;box-shadow:0 0 0 2px rgba(15,98,254,.2)}.tiptap-editor-wrapper .tiptap-toolbar .select-caret{position:absolute;right:.5rem;pointer-events:none;width:16px;height:16px;fill:#6b7280}.tiptap-editor-wrapper .tiptap-highlight-menu{position:absolute;top:110%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:9999px;padding:4px;display:flex;gap:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);z-index:100}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch{width:18px !important;height:18px !important;min-width:18px !important;min-height:18px !important;border-radius:50% !important;border:1px solid rgba(0,0,0,.1) !important;cursor:pointer;padding:0 !important;background-color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .1s ease}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch:hover{transform:scale(1.2)}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch.clear-swatch{background-color:rgba(0,0,0,0) !important;border:1px solid #d1d5db !important}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch svg{width:12px;height:12px;color:#6b7280}.tiptap-editor-wrapper .tiptap-font-menu{position:absolute;top:110%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;min-width:180px;max-height:300px;overflow-y:auto}.tiptap-editor-wrapper .tiptap-font-menu .font-option{width:100%;text-align:left;padding:8px 12px;border-radius:4px;background:none;border:none;font-size:14px;color:#374151;cursor:pointer;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-font-menu .font-option:hover:not(.is-active){background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-font-menu .font-option.is-active{background:#0062ff;color:#fff;font-weight:500}.tiptap-editor-wrapper .tiptap-heading-menu{position:absolute;top:110%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;min-width:140px}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option{width:100%;text-align:left;padding:6px 12px;border-radius:4px;background:none;border:none;font-size:14px;color:#374151;cursor:pointer;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option:hover{background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.is-active{background:#eff6ff;color:#2563eb;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h1{font-size:1.35rem;font-weight:700}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h2{font-size:1.25rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h3{font-size:1.15rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h4{font-size:1.05rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h5{font-size:1rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h6{font-size:.9rem;font-weight:600}.tiptap-editor-wrapper .tiptap-color-picker{position:absolute;top:110%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;width:160px}.tiptap-editor-wrapper .tiptap-color-picker .color-remove-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;margin-bottom:8px;background:#fdfdfd;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;color:#4b5563;cursor:pointer;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-color-picker .color-remove-btn:hover{background:#f3f4f6;border-color:#d1d5db;color:#111827}.tiptap-editor-wrapper .tiptap-color-picker .color-remove-btn svg{width:14px;height:14px}.tiptap-editor-wrapper .tiptap-color-picker .color-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:4px}.tiptap-editor-wrapper .tiptap-color-picker .color-grid .color-swatch{width:24px !important;height:24px !important;min-width:24px !important;min-height:24px !important;border-radius:4px !important;border:1px solid rgba(0,0,0,.08) !important;padding:0 !important;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.tiptap-editor-wrapper .tiptap-color-picker .color-grid .color-swatch:hover{transform:scale(1.15);border-color:rgba(0,0,0,.2) !important;z-index:2}.tiptap-editor-wrapper .tiptap-link-menu{position:absolute;top:110%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px;display:flex;align-items:center;gap:2px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);z-index:100;width:300px}.tiptap-editor-wrapper .tiptap-link-menu input{flex:1;border:1px solid #d1d5db;border-radius:4px;padding:4px 8px;font-size:14px;outline:none;transition:border-color .15s ease}.tiptap-editor-wrapper .tiptap-link-menu input:focus{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.tiptap-editor-wrapper .tiptap-link-menu button{width:28px !important;height:28px !important;padding:0 !important;min-width:28px !important;border-radius:4px !important;display:flex;align-items:center;justify-content:center}.tiptap-editor-wrapper .tiptap-link-menu button svg{width:14px;height:14px}.tiptap-editor-wrapper .tiptap-link-menu button.link-submit-btn{color:#22c55e}.tiptap-editor-wrapper .tiptap-link-menu button.link-submit-btn:hover{background:#dcfce7}.tiptap-editor-wrapper .tiptap-link-menu button.link-clear-btn{color:#ef4444}.tiptap-editor-wrapper .tiptap-link-menu button.link-clear-btn:hover{background:#fee2e2}.tiptap-editor-wrapper .tiptap-table-menu{position:absolute;top:110%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;min-width:200px}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper{padding:4px;background:#fff}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .table-grid-picker{display:flex;flex-direction:column;gap:2px;padding-bottom:8px}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-row{display:flex;gap:2px}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-cell{width:16px;height:16px;border:1px solid #d1d5db;border-radius:1px;cursor:pointer;transition:background-color .1s,border-color .1s}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-cell:hover{border-color:#3b82f6}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-cell.is-active{background-color:#bfdbfe;border-color:#3b82f6}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .table-grid-label{text-align:center;font-size:13px;color:#4b5563;font-weight:500;border-top:1px solid #f3f4f6;padding-top:8px;margin-top:2px}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:4px;background:none;border:none;font-size:13px;color:#374151;transition:background .15s ease;white-space:nowrap;cursor:pointer}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-item:hover{background:#f3f4f6}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-item svg{width:16px;height:16px;color:#6b7280}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button{width:32px !important;height:32px !important;padding:0 !important;min-width:32px !important;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#f9fafb !important;border:1px solid #e5e7eb !important;color:#4b5563 !important;cursor:pointer}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button:hover{background:#f3f4f6 !important;border-color:#d1d5db !important}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button.danger{color:#ef4444 !important}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button.danger:hover{background:#fee2e2 !important;border-color:#fca5a5 !important}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button svg{width:16px;height:16px}.tiptap-editor-wrapper .ProseMirror{min-height:300px;padding:1.5rem;color:#1f2937;outline:none;line-height:1.7}.tiptap-editor-wrapper .ProseMirror p.is-editor-empty:first-child::before{color:#9ca3af;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.tiptap-editor-wrapper .ProseMirror h1,.tiptap-editor-wrapper .ProseMirror h2,.tiptap-editor-wrapper .ProseMirror h3,.tiptap-editor-wrapper .ProseMirror h4{line-height:1.2;color:#111827}.tiptap-editor-wrapper .ProseMirror h1{font-size:2.25rem;font-weight:700;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror h2{font-size:1.875rem;font-weight:600;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror h3{font-size:1.5rem;font-weight:600;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror h4{font-size:1.25rem;font-weight:600;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 0.7em"],.tiptap-editor-wrapper .ProseMirror .text-tiny{font-size:.7em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 0.85em"],.tiptap-editor-wrapper .ProseMirror .text-small{font-size:.85em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 1.4em"],.tiptap-editor-wrapper .ProseMirror .text-big{font-size:1.4em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 1.8em"],.tiptap-editor-wrapper .ProseMirror .text-huge{font-size:1.8em}.tiptap-editor-wrapper .ProseMirror p{margin:.5em 0}.tiptap-editor-wrapper .ProseMirror ul{list-style-type:disc;padding-left:1.5rem;margin:.5em 0}.tiptap-editor-wrapper .ProseMirror ol{list-style-type:decimal;padding-left:1.5rem;margin:.5em 0}.tiptap-editor-wrapper .ProseMirror blockquote{border-left:4px solid #e5e7eb;padding-left:1rem;margin:1em 0;color:#4b5563;font-style:italic}.tiptap-editor-wrapper .ProseMirror code{background:#f3f4f6;border-radius:4px;padding:.2rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875em}.tiptap-editor-wrapper .ProseMirror pre{background:#111827;color:#f3f4f6;border-radius:.5rem;padding:1rem;overflow-x:auto;margin:1em 0}.tiptap-editor-wrapper .ProseMirror pre code{background:none;padding:0;color:inherit}.tiptap-editor-wrapper .ProseMirror img{max-width:100%;height:auto;display:block;margin:1rem 0;border-radius:.375rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1)}.tiptap-editor-wrapper .ProseMirror a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;font-weight:500;cursor:pointer}.tiptap-editor-wrapper .ProseMirror a:hover{color:#1d4ed8}.tiptap-editor-wrapper .ProseMirror a[data-attachment=true]{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .6rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:.375rem;font-size:14px;text-decoration:none;color:#111827;font-weight:500;transition:all .15s ease}.tiptap-editor-wrapper .ProseMirror a[data-attachment=true]::before{content:"📎";font-size:13px;opacity:.7}.tiptap-editor-wrapper .ProseMirror a[data-attachment=true]:hover{background:#e5e7eb;border-color:#d1d5db}.tiptap-editor-wrapper .ProseMirror mark{background-color:#fde047;border-radius:.125rem;padding:.125rem .25rem;color:#854d0e}.tiptap-editor-wrapper .ProseMirror sup{vertical-align:super;font-size:.75em}.tiptap-editor-wrapper .ProseMirror sub{vertical-align:sub;font-size:.75em}.tiptap-editor-wrapper .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;margin:1.5rem 0;overflow:hidden}.tiptap-editor-wrapper .ProseMirror table td,.tiptap-editor-wrapper .ProseMirror table th{min-width:1em;border:1px solid #ced4da;padding:8px 12px;vertical-align:top;box-sizing:border-box;position:relative}.tiptap-editor-wrapper .ProseMirror table td>*,.tiptap-editor-wrapper .ProseMirror table th>*{margin-bottom:0}.tiptap-editor-wrapper .ProseMirror table th{font-weight:bold;text-align:left;background-color:#f8f9fa}.tiptap-editor-wrapper .ProseMirror table .selectedCell:after{z-index:2;position:absolute;content:"";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}.tiptap-editor-wrapper .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:-2px;width:4px;background-color:#adf;pointer-events:none}.tiptap-editor-wrapper .ProseMirror .tableWrapper{overflow-x:auto;margin:1.5rem 0}.tiptap-editor-wrapper.read-only .tiptap-toolbar{background:#f3f3f3;pointer-events:none}.tiptap-editor-wrapper.read-only .tiptap-toolbar button,.tiptap-editor-wrapper.read-only .tiptap-toolbar .toolbar-select{opacity:.5;filter:grayscale(1)}.tiptap-editor-wrapper.read-only .ProseMirror{background:#f3f3f3;color:#6b7280;cursor:default;min-height:100px}.tiptap-editor-wrapper .tiptap-toolbar.toolbar-disabled{background:#f3f3f3;border-bottom-color:#e5e7eb}.tiptap-editor-wrapper .tiptap-toolbar.toolbar-disabled *{cursor:not-allowed !important}.tiptap-editor-wrapper .tiptap-loading-bar{height:3px;background:linear-gradient(90deg, #0f62fe 0%, #4589ff 50%, #0f62fe 100%);background-size:200% 100%;animation:tiptap-loading-anim 1.2s linear infinite;border-radius:0}@keyframes tiptap-loading-anim{0%{background-position:200% 0}100%{background-position:-200% 0}}.tiptap-hidden-input{display:none !important}
|
|
1
|
+
.tiptap-editor-wrapper{border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;font-size:15px;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.05),0 1px 2px -1px rgba(0,0,0,.05)}.tiptap-editor-wrapper .tiptap-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.35rem .75rem;background:#fff;border-bottom:1px solid #f3f4f6}.tiptap-editor-wrapper .tiptap-toolbar button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:.375rem;background:rgba(0,0,0,0);cursor:pointer;color:#4b5563;font-size:14px;font-weight:500;transition:all .15s ease;line-height:1}.tiptap-editor-wrapper .tiptap-toolbar button:hover:not(:disabled){background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-toolbar button.is-active{background:#e5e7eb;color:#111827}.tiptap-editor-wrapper .tiptap-toolbar button:disabled{opacity:.4;cursor:not-allowed}.tiptap-editor-wrapper .tiptap-toolbar button.toolbar-button-dropdown{width:30px;padding:0 2px 0 4px;gap:1px}.tiptap-editor-wrapper .tiptap-toolbar button.toolbar-button-dropdown .dropdown-arrow{width:9px;height:9px;opacity:.6;margin-left:-2px}.tiptap-editor-wrapper .tiptap-toolbar button svg{width:18px;height:18px}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-divider{width:1px;height:20px;background:#e5e7eb;margin:0 .5rem;flex-shrink:0}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select-wrapper{position:relative;display:inline-flex;align-items:center}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select{appearance:none;height:32px;border:none;border-radius:.375rem;background:rgba(0,0,0,0);font-size:14.5px;cursor:pointer;padding:0 1.5rem 0 .5rem;color:#4b5563;font-family:inherit;font-weight:500;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select:hover{background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-toolbar .toolbar-select:focus{outline:none;box-shadow:0 0 0 2px rgba(15,98,254,.2)}.tiptap-editor-wrapper .tiptap-toolbar .select-caret{position:absolute;right:.5rem;pointer-events:none;width:16px;height:16px;fill:#6b7280}.tiptap-editor-wrapper .tiptap-highlight-menu{position:absolute;top:110%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:9999px;padding:4px;display:flex;gap:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);z-index:100}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch{width:18px !important;height:18px !important;min-width:18px !important;min-height:18px !important;border-radius:50% !important;border:1px solid rgba(0,0,0,.1) !important;cursor:pointer;padding:0 !important;background-color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .1s ease}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch:hover{transform:scale(1.2)}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch.clear-swatch{background-color:rgba(0,0,0,0) !important;border:1px solid #d1d5db !important}.tiptap-editor-wrapper .tiptap-highlight-menu .color-swatch svg{width:12px;height:12px;color:#6b7280}.tiptap-editor-wrapper .tiptap-font-menu{position:absolute;top:110%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;min-width:180px;max-height:300px;overflow-y:auto}.tiptap-editor-wrapper .tiptap-font-menu .font-option{width:100%;text-align:left;padding:8px 12px;border-radius:4px;background:none;border:none;font-size:14px;color:#374151;cursor:pointer;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-font-menu .font-option:hover:not(.is-active){background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-font-menu .font-option.is-active{background:#0062ff;color:#fff;font-weight:500}.tiptap-editor-wrapper .tiptap-heading-menu{position:absolute;top:110%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;min-width:140px}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option{width:100%;text-align:left;padding:6px 12px;border-radius:4px;background:none;border:none;font-size:14px;color:#374151;cursor:pointer;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option:hover{background:#f3f4f6;color:#111827}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.is-active{background:#eff6ff;color:#2563eb;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h1{font-size:1.35rem;font-weight:700}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h2{font-size:1.25rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h3{font-size:1.15rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h4{font-size:1.05rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h5{font-size:1rem;font-weight:600}.tiptap-editor-wrapper .tiptap-heading-menu .heading-option.h6{font-size:.9rem;font-weight:600}.tiptap-editor-wrapper .tiptap-color-picker{position:absolute;top:110%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;width:160px}.tiptap-editor-wrapper .tiptap-color-picker .color-remove-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;margin-bottom:8px;background:#fdfdfd;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;color:#4b5563;cursor:pointer;transition:all .15s ease}.tiptap-editor-wrapper .tiptap-color-picker .color-remove-btn:hover{background:#f3f4f6;border-color:#d1d5db;color:#111827}.tiptap-editor-wrapper .tiptap-color-picker .color-remove-btn svg{width:14px;height:14px}.tiptap-editor-wrapper .tiptap-color-picker .color-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:4px}.tiptap-editor-wrapper .tiptap-color-picker .color-grid .color-swatch{width:24px !important;height:24px !important;min-width:24px !important;min-height:24px !important;border-radius:4px !important;border:1px solid rgba(0,0,0,.08) !important;padding:0 !important;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.tiptap-editor-wrapper .tiptap-color-picker .color-grid .color-swatch:hover{transform:scale(1.15);border-color:rgba(0,0,0,.2) !important;z-index:2}.tiptap-editor-wrapper .tiptap-link-menu{position:absolute;top:110%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:4px;display:flex;align-items:center;gap:2px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);z-index:100;width:300px}.tiptap-editor-wrapper .tiptap-link-menu input{flex:1;border:1px solid #d1d5db;border-radius:4px;padding:4px 8px;font-size:14px;outline:none;transition:border-color .15s ease}.tiptap-editor-wrapper .tiptap-link-menu input:focus{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.tiptap-editor-wrapper .tiptap-link-menu button{width:28px !important;height:28px !important;padding:0 !important;min-width:28px !important;border-radius:4px !important;display:flex;align-items:center;justify-content:center}.tiptap-editor-wrapper .tiptap-link-menu button svg{width:14px;height:14px}.tiptap-editor-wrapper .tiptap-link-menu button.link-submit-btn{color:#22c55e}.tiptap-editor-wrapper .tiptap-link-menu button.link-submit-btn:hover{background:#dcfce7}.tiptap-editor-wrapper .tiptap-link-menu button.link-clear-btn{color:#ef4444}.tiptap-editor-wrapper .tiptap-link-menu button.link-clear-btn:hover{background:#fee2e2}.tiptap-editor-wrapper .tiptap-table-menu{position:absolute;top:110%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);z-index:100;min-width:200px}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper{padding:4px;background:#fff}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .table-grid-picker{display:flex;flex-direction:column;gap:2px;padding-bottom:8px}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-row{display:flex;gap:2px}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-cell{width:16px;height:16px;border:1px solid #d1d5db;border-radius:1px;cursor:pointer;transition:background-color .1s,border-color .1s}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-cell:hover{border-color:#3b82f6}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .grid-cell.is-active{background-color:#bfdbfe;border-color:#3b82f6}.tiptap-editor-wrapper .tiptap-table-menu .table-grid-picker-wrapper .table-grid-label{text-align:center;font-size:13px;color:#4b5563;font-weight:500;border-top:1px solid #f3f4f6;padding-top:8px;margin-top:2px}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-item{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:4px;background:none;border:none;font-size:13px;color:#374151;transition:background .15s ease;white-space:nowrap;cursor:pointer}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-item:hover{background:#f3f4f6}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-item svg{width:16px;height:16px;color:#6b7280}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button{width:32px !important;height:32px !important;padding:0 !important;min-width:32px !important;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#f9fafb !important;border:1px solid #e5e7eb !important;color:#4b5563 !important;cursor:pointer}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button:hover{background:#f3f4f6 !important;border-color:#d1d5db !important}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button.danger{color:#ef4444 !important}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button.danger:hover{background:#fee2e2 !important;border-color:#fca5a5 !important}.tiptap-editor-wrapper .tiptap-table-menu .table-menu-grid button svg{width:16px;height:16px}.tiptap-editor-wrapper .ProseMirror{min-height:300px;padding:1.5rem;color:#1f2937;outline:none;line-height:1.7}.tiptap-editor-wrapper .ProseMirror p.is-editor-empty:first-child::before{color:#9ca3af;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.tiptap-editor-wrapper .ProseMirror h1,.tiptap-editor-wrapper .ProseMirror h2,.tiptap-editor-wrapper .ProseMirror h3,.tiptap-editor-wrapper .ProseMirror h4{line-height:1.2;color:#111827}.tiptap-editor-wrapper .ProseMirror h1{font-size:2.25rem;font-weight:700;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror h2{font-size:1.875rem;font-weight:600;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror h3{font-size:1.5rem;font-weight:600;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror h4{font-size:1.25rem;font-weight:600;margin:1em 0 .5em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 0.7em"],.tiptap-editor-wrapper .ProseMirror .text-tiny{font-size:.7em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 0.85em"],.tiptap-editor-wrapper .ProseMirror .text-small{font-size:.85em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 1.4em"],.tiptap-editor-wrapper .ProseMirror .text-big{font-size:1.4em}.tiptap-editor-wrapper .ProseMirror [style*="font-size: 1.8em"],.tiptap-editor-wrapper .ProseMirror .text-huge{font-size:1.8em}.tiptap-editor-wrapper .ProseMirror p{margin:.5em 0}.tiptap-editor-wrapper .ProseMirror ul{list-style-type:disc;padding-left:1.5rem;margin:.5em 0}.tiptap-editor-wrapper .ProseMirror ol{list-style-type:decimal;padding-left:1.5rem;margin:.5em 0}.tiptap-editor-wrapper .ProseMirror blockquote{border-left:4px solid #e5e7eb;padding-left:1rem;margin:1em 0;color:#4b5563;font-style:italic}.tiptap-editor-wrapper .ProseMirror code{background:#f3f4f6;border-radius:4px;padding:.2rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875em}.tiptap-editor-wrapper .ProseMirror pre{background:#111827;color:#f3f4f6;border-radius:.5rem;padding:1rem;overflow-x:auto;margin:1em 0}.tiptap-editor-wrapper .ProseMirror pre code{background:none;padding:0;color:inherit}.tiptap-editor-wrapper .ProseMirror img{max-width:100%;height:auto;display:block;margin:1rem 0;border-radius:.375rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1)}.tiptap-editor-wrapper .ProseMirror a{color:#2563eb;text-decoration:underline;text-underline-offset:2px;font-weight:500;cursor:pointer}.tiptap-editor-wrapper .ProseMirror a:hover{color:#1d4ed8}.tiptap-editor-wrapper .ProseMirror a[data-attachment=true]{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .6rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:.375rem;font-size:14px;text-decoration:none;color:#111827;font-weight:500;transition:all .15s ease}.tiptap-editor-wrapper .ProseMirror a[data-attachment=true]::before{content:"📎";font-size:13px;opacity:.7}.tiptap-editor-wrapper .ProseMirror a[data-attachment=true]:hover{background:#e5e7eb;border-color:#d1d5db}.tiptap-editor-wrapper .ProseMirror mark{background-color:#fde047;border-radius:.125rem;padding:.125rem .25rem;color:#854d0e}.tiptap-editor-wrapper .ProseMirror sup{vertical-align:super;font-size:.75em}.tiptap-editor-wrapper .ProseMirror sub{vertical-align:sub;font-size:.75em}.tiptap-editor-wrapper .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;margin:1.5rem 0;overflow:hidden}.tiptap-editor-wrapper .ProseMirror table td,.tiptap-editor-wrapper .ProseMirror table th{min-width:1em;border:1px solid #ced4da;padding:8px 12px;vertical-align:top;box-sizing:border-box;position:relative}.tiptap-editor-wrapper .ProseMirror table td>*,.tiptap-editor-wrapper .ProseMirror table th>*{margin-bottom:0}.tiptap-editor-wrapper .ProseMirror table th{font-weight:bold;text-align:left;background-color:#f8f9fa}.tiptap-editor-wrapper .ProseMirror table .selectedCell:after{z-index:2;position:absolute;content:"";left:0;right:0;top:0;bottom:0;background:rgba(200,200,255,.4);pointer-events:none}.tiptap-editor-wrapper .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:-2px;width:4px;background-color:#adf;pointer-events:none}.tiptap-editor-wrapper .ProseMirror .tableWrapper{overflow-x:auto;margin:1.5rem 0}.tiptap-editor-wrapper.read-only .tiptap-toolbar{background:#f3f3f3;pointer-events:none}.tiptap-editor-wrapper.read-only .tiptap-toolbar button,.tiptap-editor-wrapper.read-only .tiptap-toolbar .toolbar-select{opacity:.5;filter:grayscale(1)}.tiptap-editor-wrapper.read-only .ProseMirror{background:#f3f3f3;color:#6b7280;cursor:default;min-height:100px}.tiptap-editor-wrapper .tiptap-toolbar.toolbar-disabled{background:#f3f3f3;border-bottom-color:#e5e7eb}.tiptap-editor-wrapper .tiptap-toolbar.toolbar-disabled *{cursor:not-allowed !important}.tiptap-editor-wrapper .tiptap-loading-bar{height:3px;background:linear-gradient(90deg, #0f62fe 0%, #4589ff 50%, #0f62fe 100%);background-size:200% 100%;animation:tiptap-loading-anim 1.2s linear infinite;border-radius:0}@keyframes tiptap-loading-anim{0%{background-position:200% 0}100%{background-position:-200% 0}}.tiptap-hidden-input{display:none !important}
|
package/dist/index.d.mts
CHANGED
|
@@ -24,7 +24,6 @@ interface TiptapEditorProps {
|
|
|
24
24
|
onLoadingChange?: (isLoading: boolean) => void;
|
|
25
25
|
/** Register a content reset callback */
|
|
26
26
|
onRegisterReset?: (resetCallback: (newContent: string) => void) => (() => void);
|
|
27
|
-
maxFileSizeMB?: number;
|
|
28
27
|
placeholder?: string;
|
|
29
28
|
toolbarConfig?: ToolbarConfig;
|
|
30
29
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -24,7 +24,6 @@ interface TiptapEditorProps {
|
|
|
24
24
|
onLoadingChange?: (isLoading: boolean) => void;
|
|
25
25
|
/** Register a content reset callback */
|
|
26
26
|
onRegisterReset?: (resetCallback: (newContent: string) => void) => (() => void);
|
|
27
|
-
maxFileSizeMB?: number;
|
|
28
27
|
placeholder?: string;
|
|
29
28
|
toolbarConfig?: ToolbarConfig;
|
|
30
29
|
}
|
package/dist/index.js
CHANGED
|
@@ -188,11 +188,7 @@ var createTiptapExtensions = (placeholder = "Enter content here...") => [
|
|
|
188
188
|
];
|
|
189
189
|
|
|
190
190
|
// src/utils.ts
|
|
191
|
-
async function uploadFileToCOS(file, docNum, onUploadFile, receiveStatus, elementId, onLoadingChange, suppressStatusChange = false
|
|
192
|
-
const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
|
|
193
|
-
if (file.size > maxFileSizeBytes) {
|
|
194
|
-
throw new Error(`${file.name} attachment too large (Max ${maxFileSizeMB}M)`);
|
|
195
|
-
}
|
|
191
|
+
async function uploadFileToCOS(file, docNum, onUploadFile, receiveStatus, elementId, onLoadingChange, suppressStatusChange = false) {
|
|
196
192
|
receiveStatus && elementId && receiveStatus(elementId, true);
|
|
197
193
|
if (!suppressStatusChange) onLoadingChange == null ? void 0 : onLoadingChange(true);
|
|
198
194
|
try {
|
|
@@ -894,7 +890,6 @@ var TiptapEditor = ({
|
|
|
894
890
|
onAlert,
|
|
895
891
|
onLoadingChange,
|
|
896
892
|
onRegisterReset,
|
|
897
|
-
maxFileSizeMB = 50,
|
|
898
893
|
placeholder = "Enter content here...",
|
|
899
894
|
toolbarConfig
|
|
900
895
|
}) => {
|
|
@@ -974,8 +969,7 @@ var TiptapEditor = ({
|
|
|
974
969
|
receiveStatus,
|
|
975
970
|
elementId,
|
|
976
971
|
loadingChangeFn,
|
|
977
|
-
true
|
|
978
|
-
maxFileSizeMB
|
|
972
|
+
true
|
|
979
973
|
).then((url) => {
|
|
980
974
|
view.dispatch(
|
|
981
975
|
view.state.tr.replaceSelectionWith(
|
|
@@ -1070,8 +1064,7 @@ var TiptapEditor = ({
|
|
|
1070
1064
|
receiveStatus,
|
|
1071
1065
|
elementId,
|
|
1072
1066
|
loadingChangeFn,
|
|
1073
|
-
true
|
|
1074
|
-
maxFileSizeMB
|
|
1067
|
+
true
|
|
1075
1068
|
);
|
|
1076
1069
|
editor.chain().focus().setImage({ src: url, alt: file.name }).run();
|
|
1077
1070
|
})
|
|
@@ -1088,7 +1081,7 @@ var TiptapEditor = ({
|
|
|
1088
1081
|
}
|
|
1089
1082
|
}
|
|
1090
1083
|
},
|
|
1091
|
-
[editor, docNum, receiveStatus, elementId, receiveData, onUploadFile, alertFn, loadingChangeFn
|
|
1084
|
+
[editor, docNum, receiveStatus, elementId, receiveData, onUploadFile, alertFn, loadingChangeFn]
|
|
1092
1085
|
);
|
|
1093
1086
|
const handleAttachFileChange = (0, import_react.useCallback)(
|
|
1094
1087
|
async (e) => {
|
|
@@ -1111,8 +1104,7 @@ var TiptapEditor = ({
|
|
|
1111
1104
|
receiveStatus,
|
|
1112
1105
|
elementId,
|
|
1113
1106
|
loadingChangeFn,
|
|
1114
|
-
true
|
|
1115
|
-
maxFileSizeMB
|
|
1107
|
+
true
|
|
1116
1108
|
);
|
|
1117
1109
|
editor.chain().focus().insertContent(
|
|
1118
1110
|
`<a href="${url}" target="_blank" rel="noopener noreferrer" data-attachment="true">${file.name}</a> `
|
|
@@ -1131,7 +1123,7 @@ var TiptapEditor = ({
|
|
|
1131
1123
|
}
|
|
1132
1124
|
}
|
|
1133
1125
|
},
|
|
1134
|
-
[editor, docNum, receiveStatus, elementId, receiveData, onUploadFile, alertFn, loadingChangeFn
|
|
1126
|
+
[editor, docNum, receiveStatus, elementId, receiveData, onUploadFile, alertFn, loadingChangeFn]
|
|
1135
1127
|
);
|
|
1136
1128
|
const handleLinkClick = (0, import_react.useCallback)(() => {
|
|
1137
1129
|
if (!editor || isReadOnly) return;
|