@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

package/dist/esm/co-rich-text-editor.entry.js

@@ -1,7 +1,10 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
-import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { R as RichText } from './index-w_Wxgclf.js';
+import { g as getRichTextStrings } from './richTextI18n-B-ckjCUA.js';
+import './purify.es-B2QLgWrz.js';
+import './toolbar-config-ChibIpZv.js';
 
-const coRichTextEditorCss = () => `co-rich-text-editor{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body)}.co-rich-text-editor{display:flex;flex-direction:column;gap:var(--co-spacing-sm2, 6px)}.co-rich-text-editor__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2, 6px)}.co-rich-text-editor__label,.co-rich-text-editor__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-rich-text-editor__box{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-rich-text-editor--focused .co-rich-text-editor__box{border-color:var(--co-semantic-border-focus, var(--co-color-primary-azul));box-shadow:0 0 0 3px var(--co-semantic-border-focus-ring, rgba(37, 99, 235, 0.15))}.co-rich-text-editor--error .co-rich-text-editor__box{border-color:var(--co-color-status-error)}.co-rich-text-editor--success .co-rich-text-editor__box{border-color:var(--co-color-status-success)}.co-rich-text-editor--disabled .co-rich-text-editor__box,.co-rich-text-editor--readonly .co-rich-text-editor__box{opacity:0.7;cursor:not-allowed}.co-rich-text-editor--loading .co-rte-content{min-height:96px;background:linear-gradient(90deg,     var(--co-semantic-surface-secondary) 0%,     var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,     var(--co-semantic-surface-secondary) 100%);background-size:200% 100%;animation:co-rte-skeleton 1.2s ease-in-out infinite}@keyframes co-rte-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}.co-rte-content{padding:var(--co-spacing-md) var(--co-spacing-md);min-height:96px;color:var(--co-semantic-text-default)}.co-rte-content .ProseMirror{outline:none;min-height:72px;line-height:1.5}.co-rte-content .ProseMirror p{margin:0 0 var(--co-spacing-sm) 0}.co-rte-content .ProseMirror p:last-child{margin-bottom:0}.co-rte-content .ProseMirror h2,.co-rte-content .ProseMirror h3,.co-rte-content .ProseMirror h4{margin:var(--co-spacing-md) 0 var(--co-spacing-sm);font-weight:600;line-height:1.3}.co-rte-content .ProseMirror h2{font-size:var(--co-font-size-20, 20px)}.co-rte-content .ProseMirror h3{font-size:var(--co-font-size-16, 16px)}.co-rte-content .ProseMirror ul,.co-rte-content .ProseMirror ol{padding-left:var(--co-spacing-xl);margin:0 0 var(--co-spacing-sm) 0}.co-rte-content .ProseMirror blockquote{border-left:3px solid var(--co-semantic-border-default, var(--co-semantic-border-subtle));padding-left:var(--co-spacing-md);margin:0 0 var(--co-spacing-sm) 0;color:var(--co-semantic-text-secondary)}.co-rte-content .ProseMirror a{color:var(--co-color-primary-azul);text-decoration:underline}.co-rte-content .ProseMirror img{max-width:100%;height:auto;border-radius:var(--co-border-radius-xs);margin:var(--co-spacing-sm) 0}.co-rte-content .ProseMirror img.ProseMirror-selectednode{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul))}.co-rte-content .ProseMirror code{font-family:var(--co-font-family-mono);font-size:0.9em;background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));padding:0.1em 0.3em;border-radius:var(--co-border-radius-xxs)}.co-rte-content .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--co-semantic-text-muted);float:left;height:0;pointer-events:none}.co-rte-content .co-rte-variable,.co-rte-content .co-rte-mention{display:inline-block;padding:0.05em 0.4em;border-radius:var(--co-border-radius-xxs);background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-size:0.9em;white-space:nowrap}.co-rte-content .co-rte-mention{background:var(--co-color-primary-verde)}.co-rich-text-editor__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-xs);min-height:0}.co-rich-text-editor__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-12, 12px)}.co-rich-text-editor__helper--error{color:var(--co-color-status-error)}.co-rich-text-editor__helper--success{color:var(--co-color-status-success)}.co-rich-text-editor__count{margin-left:auto;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12, 12px)}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor__label{white-space:normal}co-rich-text-editor[layout='horizontal'] .co-rich-text-editor>:not(.co-rich-text-editor__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+const coRichTextEditorCss = () => `co-rich-text-editor{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body)}.co-rich-text-editor{display:flex;flex-direction:column;gap:var(--co-spacing-sm2, 6px)}.co-rich-text-editor__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2, 6px)}.co-rich-text-editor__label,.co-rich-text-editor__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-rich-text-editor__frame{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:0;flex:1;position:relative;overflow:visible}.co-rich-text-editor__box{display:flex;flex-direction:column;min-height:0;flex:1;position:relative;overflow-y:auto;overflow-x:hidden}.co-rich-text-editor--focused .co-rich-text-editor__frame{border-color:var(--co-semantic-border-focus, var(--co-color-base-negro, #1a1a1a));box-shadow:0 0 0 3px var(--co-semantic-border-focus-ring, rgba(37, 99, 235, 0.15))}.co-rich-text-editor--error .co-rich-text-editor__frame{border-color:var(--co-color-status-error)}.co-rich-text-editor--success .co-rich-text-editor__frame{border-color:var(--co-color-status-success)}.co-rich-text-editor--disabled .co-rich-text-editor__frame,.co-rich-text-editor--readonly .co-rich-text-editor__frame{opacity:0.7;cursor:not-allowed}.co-rich-text-editor--loading .co-rte-content{min-height:96px;background:linear-gradient(90deg,     var(--co-semantic-surface-secondary) 0%,     var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,     var(--co-semantic-surface-secondary) 100%);background-size:200% 100%;animation:co-rte-skeleton 1.2s ease-in-out infinite}@keyframes co-rte-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}.co-rich-text-editor__toolbar{position:relative;flex-shrink:0;z-index:60}.co-rte-content{min-height:96px;color:var(--co-semantic-text-default);flex:1 0 auto;display:flex;flex-direction:column}.co-rte-content .ProseMirror{outline:none;flex:1 0 auto;line-height:1.5;padding:var(--co-spacing-md);box-sizing:border-box}.co-rte-content .ProseMirror p{margin:0 0 var(--co-spacing-sm) 0}.co-rte-content .ProseMirror p:last-child{margin-bottom:0}.co-rte-content .ProseMirror>p{margin-bottom:var(--co-spacing-sm) !important}.co-rte-content .ProseMirror>p:last-child{margin-bottom:0 !important}.co-rte-content .ProseMirror [style*="text-align: justify"]{text-align-last:left}.co-rte-content .ProseMirror [style*="text-align: center"]{text-align:center}.co-rte-content .ProseMirror [style*="text-align: right"]{text-align:right}.co-rte-content .ProseMirror h1,.co-rte-content .ProseMirror h2,.co-rte-content .ProseMirror h3,.co-rte-content .ProseMirror h4{margin:var(--co-spacing-md) 0 var(--co-spacing-sm);font-weight:600;line-height:1.3}.co-rte-content .ProseMirror h1{font-size:var(--co-font-size-28, 28px)}.co-rte-content .ProseMirror h2{font-size:var(--co-font-size-20, 20px)}.co-rte-content .ProseMirror h3{font-size:var(--co-font-size-16, 16px)}.co-rte-content .ProseMirror ul,.co-rte-content .ProseMirror ol{padding-left:var(--co-spacing-xl);margin:0 0 var(--co-spacing-sm) 0}.co-rte-content .ProseMirror ul[data-type="taskList"]{list-style:none;padding-left:0;margin:0 0 var(--co-spacing-sm) 0}.co-rte-content .ProseMirror ul[data-type="taskList"] li{display:flex;align-items:flex-start;gap:var(--co-spacing-sm, 8px)}.co-rte-content .ProseMirror ul[data-type="taskList"] li>label{flex:0 0 auto;margin-top:0.15em;user-select:none}.co-rte-content .ProseMirror ul[data-type="taskList"] li>div{flex:1 1 auto;min-width:0}.co-rte-content .ProseMirror ul[data-type="taskList"] li>div>p{margin:0}.co-rte-content .ProseMirror ul[data-type="taskList"] input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--co-color-base-negro, #1a1a1a)}.co-rte-content .ProseMirror ul[data-type="taskList"][data-variant="strike"] li[data-checked="true"]>div{text-decoration:line-through;color:var(--co-semantic-text-muted, #999)}.co-rte-content .ProseMirror ul[data-type="taskList"][data-variant="plain"] li[data-checked="true"]>div{text-decoration:none}.co-rte-content .ProseMirror blockquote{border-left:3px solid var(--co-semantic-border-default, var(--co-semantic-border-subtle));padding-left:var(--co-spacing-md);margin:0 0 var(--co-spacing-sm) 0;color:var(--co-semantic-text-secondary)}.co-rte-content .ProseMirror a{color:var(--co-color-base-negro, #1a1a1a);text-decoration:underline;text-underline-offset:2px}.co-rte-content .ProseMirror img{max-width:100%;height:auto;border-radius:var(--co-border-radius-xs);margin:var(--co-spacing-sm) 0;cursor:default;-webkit-user-drag:none;user-select:none}.co-rte-content .ProseMirror img.ProseMirror-selectednode{outline:2px solid var(--co-color-base-negro, #1a1a1a)}.co-rte-content [data-resize-container].ProseMirror-selectednode{outline:2px solid var(--co-color-base-negro, #1a1a1a);outline-offset:0px;border-radius:0}.co-rte-content [data-resize-container]{position:relative;display:inline-block;width:fit-content;max-width:100%;margin:var(--co-spacing-sm) 0;line-height:0}.co-rte-content [data-resize-container][data-resize-state="true"]{outline:2px solid var(--co-color-base-negro, #1a1a1a);outline-offset:0px;border-radius:0}.co-rte-content [data-resize-wrapper]{position:relative;display:inline-block;line-height:0}.co-rte-content [data-resize-handle]{width:10px;height:10px;background:var(--co-color-base-negro, #1a1a1a);border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 2px rgba(0, 0, 0, 0.3);z-index:5;opacity:0;pointer-events:none}.co-rte-content [data-resize-container][data-resize-state="true"] [data-resize-handle],.co-rte-content [data-resize-container].ProseMirror-selectednode [data-resize-handle]{opacity:1;pointer-events:auto}.co-rte-content [data-resize-handle="top-left"]{cursor:nw-resize}.co-rte-content [data-resize-handle="top-right"]{cursor:ne-resize}.co-rte-content [data-resize-handle="bottom-left"]{cursor:sw-resize}.co-rte-content [data-resize-handle="bottom-right"]{cursor:se-resize}.co-rte-content [data-resize-handle="top"],.co-rte-content [data-resize-handle="bottom"]{width:30px;height:6px;border-radius:3px;left:50% !important;transform:translateX(-50%)}.co-rte-content [data-resize-handle="top"]{cursor:n-resize}.co-rte-content [data-resize-handle="bottom"]{cursor:s-resize}.co-rte-content [data-resize-handle="left"],.co-rte-content [data-resize-handle="right"]{width:6px;height:30px;border-radius:3px;top:50% !important;transform:translateY(-50%)}.co-rte-content [data-resize-handle="left"]{cursor:w-resize}.co-rte-content [data-resize-handle="right"]{cursor:e-resize}.co-rte-content [data-resize-container] img{max-width:100%;display:block;border-radius:0;margin:0}.co-rte-content .ProseMirror hr{border:none;border-top:1px solid var(--co-semantic-border-default, #e0e0e0);margin:var(--co-spacing-lg) 0}.co-rte-content .ProseMirror code{font-family:var(--co-font-family-mono);font-size:0.9em;background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));padding:0.1em 0.3em;border-radius:var(--co-border-radius-xxs)}.co-rte-content .ProseMirror pre{font-family:var(--co-font-family-mono);font-size:0.9em;background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));padding:var(--co-spacing-md);border-radius:var(--co-border-radius-xs);overflow-x:auto;margin:var(--co-spacing-sm) 0}.co-rte-content .ProseMirror pre code{background:none;padding:0;border-radius:0}.co-rte-content .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--co-semantic-text-muted);float:left;height:0;pointer-events:none}.co-rte-content .co-rte-variable,.co-rte-content .co-rte-mention{display:inline-block;padding:0.05em 0.4em;border-radius:var(--co-border-radius-xxs);background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff);font-size:0.9em;white-space:nowrap}.co-rte-content .co-rte-mention{background:var(--co-color-primary-verde)}.co-rich-text-editor__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-xs);min-height:0}.co-rich-text-editor__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-12, 12px)}.co-rich-text-editor__helper--error{color:var(--co-color-status-error)}.co-rich-text-editor__helper--success{color:var(--co-color-status-success)}.co-rich-text-editor__count{margin-left:auto;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12, 12px)}.co-rte-bubble.co-rte-bubble--suppressed{display:none !important}.co-rte-bubble{position:absolute;z-index:50;display:flex;flex-direction:row;align-items:center;gap:2px;padding:var(--co-spacing-xs, 4px) var(--co-spacing-sm, 8px);background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);user-select:none;white-space:nowrap}.co-rte-bubble__drag-handle{display:flex;align-items:center;justify-content:center;cursor:grab;color:var(--co-semantic-text-muted, #999);width:18px;height:28px;margin:0 2px 0 0;flex-shrink:0}.co-rte-bubble__drag-handle:hover{color:var(--co-semantic-text-secondary, #555)}.co-rte-bubble__drag-handle:active{cursor:grabbing}.co-rte-bubble__row{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}.co-rte-bubble__btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--co-border-radius-xxs, 4px);background:transparent;color:var(--co-semantic-text-default, #333);cursor:pointer}.co-rte-bubble__btn:hover:not(.co-rte-bubble__btn--active){background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06))}.co-rte-bubble__btn--active{background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff)}.co-rte-bubble__btn--active:hover{background:var(--co-color-base-negro, #333)}.co-rte-bubble__sep{display:inline-block;width:1px;height:18px;margin:0 4px;background:var(--co-semantic-border-default, rgba(0, 0, 0, 0.12));flex-shrink:0}.co-rte-bubble__select{position:relative}.co-rte-bubble__select-trigger{display:flex;align-items:center;gap:2px;height:28px;padding:0 6px;border:1px solid transparent;border-radius:var(--co-border-radius-xxs, 4px);background:transparent;color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-primary);font-size:11px;cursor:pointer;white-space:nowrap;transition:background 0.12s, border-color 0.12s}.co-rte-bubble__select-trigger:hover{background:var(--co-semantic-surface-hover, #f5f5f5);border-color:var(--co-semantic-border-default, #e0e0e0)}.co-rte-bubble__select-label{max-width:72px;overflow:hidden;text-overflow:ellipsis}.co-rte-bubble__select--font .co-rte-bubble__select-label{max-width:110px}.co-rte-bubble__select-dropdown{position:absolute;bottom:100%;left:0;z-index:120;min-width:100px;max-height:260px;overflow-y:auto;padding:var(--co-spacing-xxs, 2px);background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xxs, 4px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);margin-bottom:4px;white-space:normal}.co-rte-bubble__select-dropdown[data-position="above"]{bottom:100%;top:auto;margin-bottom:4px;margin-top:0}.co-rte-bubble__select-dropdown[data-position="below"]{top:100%;bottom:auto;margin-top:4px;margin-bottom:0}.co-rte-bubble__select-option{display:block;width:100%;padding:4px 8px;border:none;border-radius:3px;background:transparent;color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-primary);font-size:12px;text-align:left;cursor:pointer;white-space:nowrap}.co-rte-bubble__select-option:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rte-bubble__select-dropdown--font{min-width:200px;max-height:320px;overflow:hidden;overflow-y:auto;display:flex;flex-direction:column;white-space:normal}.co-rte-bubble__font-search{padding:6px 6px 4px;flex-shrink:0}.co-rte-bubble__font-search-input{width:100%;padding:4px 8px;border:1px solid var(--co-semantic-border-default, #ccc);border-radius:4px;background:var(--co-semantic-surface-secondary, #fff);color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-primary);font-size:12px;outline:none;box-sizing:border-box}.co-rte-bubble__font-search-input:focus{border-color:var(--co-color-base-negro, #1a1a1a)}.co-rte-bubble__font-list{max-height:260px;overflow-y:auto;padding:0 var(--co-spacing-xxs, 2px) var(--co-spacing-xxs, 2px)}.co-rte-bubble__font-section-header{padding:6px 8px 2px;font-size:11px;font-weight:600;color:var(--co-semantic-text-muted, #888);text-transform:uppercase;letter-spacing:0.5px}.co-rte-bubble__font-empty{padding:12px 8px;text-align:center;color:var(--co-semantic-text-muted, #888);font-size:12px}.co-rte-bubble__color{position:relative}.co-rte-bubble__color-dropdown{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);z-index:120;width:224px;padding:var(--co-spacing-sm, 8px);background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);margin-bottom:4px;white-space:normal;max-width:calc(100vw - 16px)}.co-rte-bubble__color-dropdown[data-position="above"]{bottom:100%;top:auto;margin-bottom:4px;margin-top:0}.co-rte-bubble__color-dropdown[data-position="below"]{top:100%;bottom:auto;margin-top:4px;margin-bottom:0}.co-rte-bubble__color-grid{display:grid;grid-template-columns:repeat(10, 1fr);gap:2px}.co-rte-bubble__color-swatch{width:20px;height:20px;padding:0;border:none;border-radius:3px;cursor:pointer;transition:transform 0.1s, box-shadow 0.1s}.co-rte-bubble__color-swatch:hover{transform:scale(1.2);box-shadow:0 0 0 2px var(--co-color-base-negro, #1a1a1a)}.co-rte-bubble__color-hex{display:flex;align-items:center;gap:4px;margin-top:6px}.co-rte-bubble__color-hex-input{width:100%;padding:3px 6px;border:1px solid var(--co-semantic-border-default, #ccc);border-radius:3px;background:var(--co-semantic-surface-secondary, #fff);color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-mono, monospace);font-size:11px;outline:none}.co-rte-bubble__color-hex-input:focus{border-color:var(--co-color-base-negro, #1a1a1a)}.co-rte-bubble__color-clear{display:flex;align-items:center;gap:4px;width:100%;padding:3px 6px;margin-top:4px;border:none;background:transparent;color:var(--co-semantic-text-secondary, #666);font-family:var(--co-font-family-primary);font-size:11px;cursor:pointer;border-radius:3px}.co-rte-bubble__color-clear:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rte-bubble__link-form{display:flex;align-items:center;gap:4px;margin-left:4px}.co-rte-bubble__link-input{width:160px;padding:3px 8px;border:1px solid var(--co-semantic-border-default, #ccc);border-radius:4px;background:var(--co-semantic-surface-secondary, #fff);color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-primary);font-size:12px;outline:none}.co-rte-bubble__link-input::placeholder{color:var(--co-semantic-text-muted, #999)}.co-rte-bubble__link-input:focus{border-color:var(--co-color-base-negro, #1a1a1a);box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}.co-rte-bubble__link-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:var(--co-color-base-negro, #1a1a1a);color:#fff;cursor:pointer}.co-rte-bubble__link-btn:hover{opacity:0.9}.co-rte-bubble__link-unlink{background:var(--co-semantic-surface-error, #ef4444)}.co-rte-bubble__panel{position:absolute;z-index:140;width:230px;background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);overflow:hidden;user-select:none}.co-rte-bubble__panel-header{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--co-semantic-border-subtle, #eee)}.co-rte-bubble__panel-drag{cursor:grab;display:flex;align-items:center;justify-content:center;color:var(--co-semantic-text-muted, #999);flex-shrink:0}.co-rte-bubble__panel-drag:active{cursor:grabbing}.co-rte-bubble__panel-title{flex:1;font-size:12px;font-weight:600;color:var(--co-semantic-text-default, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-rte-bubble__panel-close{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;border-radius:3px;background:transparent;color:var(--co-semantic-text-muted, #999);cursor:pointer;flex-shrink:0}.co-rte-bubble__panel-close:hover{background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));color:var(--co-semantic-text-default, #333)}.co-rte-bubble__panel-input-wrap{padding:6px 8px}.co-rte-bubble__panel-input{width:100%;padding:4px 8px;border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:4px;font-size:12px;font-family:inherit;outline:none;box-sizing:border-box;background:var(--co-semantic-surface-secondary, #fff);color:var(--co-semantic-text-default, #333)}.co-rte-bubble__panel-input:focus{border-color:var(--co-color-base-negro, #1a1a1a)}.co-rte-bubble__panel-options{max-height:280px;overflow-y:auto;padding:2px 4px 4px}.co-rte-bubble__panel-option{display:block;width:100%;padding:5px 8px;border:none;border-radius:3px;background:transparent;cursor:pointer;text-align:left;font-family:inherit;color:var(--co-semantic-text-default, #333)}.co-rte-bubble__panel-option:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rte-bubble__panel-sep{height:1px;background:var(--co-semantic-border-subtle, #eee);margin:4px 8px}.co-rte-bubble__panel-opt-row{display:flex;justify-content:space-between;align-items:center;width:100%}.co-rte-bubble__panel-opt-value{color:var(--co-semantic-text-muted, #999);font-size:11px;font-weight:400 !important;min-width:28px;text-align:right}.co-rte-bubble__panel[data-position="above"]{bottom:100%;top:auto;margin-bottom:4px}.co-rte-bubble__panel[data-position="below"]{top:100%;bottom:auto;margin-top:4px}.co-rte-bubble__overflow{position:relative}.co-rte-bubble__overflow-menu{position:absolute;bottom:100%;right:0;z-index:130;min-width:230px;padding:4px;background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);margin-bottom:4px}.co-rte-bubble__overflow-menu[data-position="below"]{top:100%;bottom:auto;margin-top:4px;margin-bottom:0}.co-rte-bubble__overflow-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:none;border-radius:4px;background:transparent;font-family:inherit;font-size:13px;color:var(--co-semantic-text-default, #333);cursor:pointer;text-align:left;white-space:nowrap}.co-rte-bubble__overflow-item:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rte-bubble__overflow-item--active{background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));color:var(--co-color-base-negro, #1a1a1a);font-weight:600}.co-rte-bubble__overflow-value{margin-left:auto;color:var(--co-semantic-text-muted, #999);font-size:11px}.co-rte-bubble__overflow-sep{height:1px;background:var(--co-semantic-border-subtle, #eee);margin:3px 8px}.co-rte-bubble__overflow-section-title{padding:6px 8px 2px;font-size:11px;font-weight:600;color:var(--co-semantic-text-muted, #888);letter-spacing:0.5px}.co-rte-bubble__overflow-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-rte-bubble__overflow-item--danger:hover{background:rgba(170, 46, 27, 0.06)}.co-rte-bubble__color-indicator{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1}.co-rte-bubble__color-letter{font-family:var(--co-font-family-primary);font-size:14px;font-weight:700;color:var(--co-semantic-text-default, #333);line-height:1}.co-rte-bubble__color-bar{width:14px;height:3px;border-radius:1px}.co-rte-content .callout{display:flex;gap:0.75rem;padding:1rem;border-radius:var(--co-border-radius-xs, 8px);border:2px solid;margin:1rem 0}.co-rte-content .callout--info{background:#eff6ff;border-color:#bfdbfe}.co-rte-content .callout--warning{background:#fffbeb;border-color:#fde68a}.co-rte-content .callout--success{background:#f0fdf4;border-color:#bbf7d0}.co-rte-content .callout--error{background:#fef2f2;border-color:#fecaca}.co-rte-content .callout__icon{flex-shrink:0;font-size:1.2em}.co-rte-content .callout__content{flex:1}.co-rte-content .callout__content p{margin:0}.co-rte-content table{border-collapse:collapse;table-layout:auto;width:100%;margin:1rem 0;overflow:hidden}.co-rte-content .tableWrapper{overflow-x:auto;max-width:100%}.co-rte-content td,.co-rte-content th{min-width:1em;border:1px solid var(--co-semantic-border-default, #e0e0e0);padding:0.5rem;vertical-align:top;box-sizing:border-box;position:relative}.co-rte-content th{font-weight:600;text-align:left;background-color:#e3e3e3;color:var(--co-semantic-text-default, #333)}.co-rte-content .ProseMirror table th{background-color:#e3e3e3}.co-rte-content .selectedCell{background:rgba(0, 0, 0, 0.06)}.co-rte-content .column-resize-handle{position:absolute;right:-2px;top:0;bottom:0;width:4px;background-color:var(--co-color-base-negro, #1a1a1a);pointer-events:none}.co-rte-content .ProseMirror.resize-cursor,.co-rte-content .ProseMirror.resize-cursor *{cursor:col-resize}.co-rte-content iframe{border-radius:var(--co-border-radius-xs, 8px);max-width:100%;aspect-ratio:16 / 9;width:100%;height:auto;display:block;margin:0}.co-rte-content .co-rte-embed{position:relative;display:block;max-width:100%;margin:1rem 0;line-height:0}.co-rte-content .co-rte-embed::before{content:'';position:absolute;inset:0;z-index:1}.co-rte-content .co-rte-embed.ProseMirror-selectednode,.co-rte-content .co-rte-embed--selected{outline:2px solid var(--co-color-base-negro, #1a1a1a);outline-offset:2px;border-radius:var(--co-border-radius-xs, 8px)}.co-rte-content .co-rte-embed__handle{position:absolute;width:12px;height:12px;background:var(--co-color-base-negro, #1a1a1a);border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 2px rgba(0, 0, 0, 0.3);z-index:3;opacity:0;pointer-events:none}.co-rte-content .co-rte-embed.ProseMirror-selectednode .co-rte-embed__handle,.co-rte-content .co-rte-embed--selected .co-rte-embed__handle{opacity:1;pointer-events:auto}.co-rte-content .co-rte-embed__handle--bottom-right{right:-6px;bottom:-6px;cursor:nwse-resize}.co-rte-content .co-rte-embed__handle--bottom-left{left:-6px;bottom:-6px;cursor:nesw-resize}.co-rte-content .co-rte-embed--resizing{outline:2px dashed var(--co-color-base-negro, #1a1a1a);outline-offset:2px}.co-rich-text-editor--readonly .co-rte-embed::before,.co-rich-text-editor--disabled .co-rte-embed::before{display:none}.co-rich-text-editor--readonly .co-rte-embed.ProseMirror-selectednode,.co-rich-text-editor--readonly .co-rte-embed--selected,.co-rich-text-editor--disabled .co-rte-embed.ProseMirror-selectednode,.co-rich-text-editor--disabled .co-rte-embed--selected{outline:none !important}.co-rte-img-layout{position:absolute;z-index:50;display:flex;align-items:center;gap:2px;padding:4px;background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 2px 12px rgba(0, 0, 0, 0.12);pointer-events:auto}.co-rte-img-layout__btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:var(--co-border-radius-xxs, 4px);background:transparent;color:var(--co-semantic-text-default, #333);cursor:pointer;transition:background 0.12s, border-color 0.12s}.co-rte-img-layout__btn:hover{background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06))}.co-rte-img-layout__btn--active{background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff)}.co-rte-img-layout__btn--active:hover{background:var(--co-color-base-negro, #333)}.co-rte-img-layout__btn[data-tooltip]{position:relative}.co-rte-img-layout__btn[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff);font-family:var(--co-font-family-primary);font-size:11px;font-weight:500;line-height:1.3;white-space:nowrap;border-radius:4px;pointer-events:none;opacity:0;transition:opacity 0.12s ease;z-index:100}.co-rte-img-layout__btn[data-tooltip]:hover::after{opacity:1;transition-delay:0.3s}.co-rte-content [data-resize-container][data-image-layout="wrap-left"]{float:left;max-width:50%;margin:4px 16px 8px 0}.co-rte-content [data-resize-container][data-image-layout="wrap-right"]{float:right;max-width:50%;margin:4px 0 8px 16px}.co-rte-content [data-resize-container][data-image-layout="center"]{display:block;margin:12px auto}.co-rte-content [data-resize-container][data-image-layout="full-width"]{display:block;width:100%;margin:12px 0}.co-rte-content [data-resize-container][data-image-layout="full-width"] [data-resize-wrapper],.co-rte-content [data-resize-container][data-image-layout="full-width"] img{width:100%}@media (max-width: 768px){.co-rte-content [data-resize-container][data-image-layout="wrap-left"],.co-rte-content [data-resize-container][data-image-layout="wrap-right"]{float:none;max-width:100%;display:block;margin:12px 0}}.co-rte-content--site .ProseMirror{width:var(--co-rte-content-width, 80%);max-width:100%;margin:0 auto}@media (max-width: 768px){.co-rte-content--site .ProseMirror{width:100%}}.co-rich-text-editor--readonly [data-resize-handle],.co-rich-text-editor--disabled [data-resize-handle]{display:none !important}.co-rich-text-editor--readonly [data-resize-container].ProseMirror-selectednode,.co-rich-text-editor--disabled [data-resize-container].ProseMirror-selectednode,.co-rich-text-editor--readonly img.ProseMirror-selectednode,.co-rich-text-editor--disabled img.ProseMirror-selectednode{outline:none !important}`;
 
 const CoRichTextEditor = class {
     constructor(hostRef) {
@@ -12,13 +15,13 @@ const CoRichTextEditor = class {
         this.coBlur = createEvent(this, "coBlur", 7);
         this.coClear = createEvent(this, "coClear", 7);
         this.coReady = createEvent(this, "coReady", 7);
+        this.coFontPopupShow = createEvent(this, "coFontPopupShow", 7);
+        this.coFontPopupHide = createEvent(this, "coFontPopupHide", 7);
         /** ProseMirror document as a JSON string. `null`/empty = empty editor. */
         this.value = null;
         /** Preset controlling allowed nodes/marks, toolbar and sanitization. */
         this.preset = 'task';
         this.placeholder = '';
-        /** Label layout: vertical (label above) or horizontal (label beside) */
-        this.layout = 'vertical';
         this.status = 'default';
         this.disabled = false;
         this.readonly = false;
@@ -27,42 +30,80 @@ const CoRichTextEditor = class {
         this.autofocus = false;
         /** Toolbar layout. `auto` uses the preset default. */
         this.toolbar = 'auto';
+        /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
+        this.locale = 'en';
         this.ready = false;
         this.hasFocus = false;
+        /** Character count — updated imperatively to avoid re-renders on every keystroke. */
         this.charCount = 0;
-        /** Last value we emitted — guards the value Watch against feedback loops. */
-        this.lastEmitted = null;
+        this.bubbleDragged = false;
+        this.bubbleDragOffset = { x: 0, y: 0 };
+        this.bubbleDragPos = { x: 0, y: 0 };
+        /** Position lock — prevents floating-ui from repositioning the bubble during toolbar interactions. */
+        this.bubblePositionLocked = false;
+        this.bubbleLockPos = { x: 0, y: 0 };
+        this.applyingBubbleLock = false;
+        /** Account fonts loaded via fontLoader callback. */
+        this._loadedAccountFonts = [];
+        this._fontLoaderCalled = false;
+        this._fontLoaderLoading = false;
+        /** Last emitted JSON string — guards the value Watch against feedback loops. */
+        this.lastEmittedJson = null;
+        /** Last emitted HTML string — parents often send HTML back via value prop. */
+        this.lastEmittedHtml = '';
         /** True while applying an external value (suppresses emit). */
         this.applyingExternal = false;
-        /** Set by disconnectedCallback — aborts editor creation if the element was
-         *  removed while the lazy import was still in flight (ProseMirror leak). */
-        this.destroyed = false;
+        this.rt = RichText;
+        this.imgLayoutVisible = false;
         this.handleUpdate = (editor) => {
             this.refreshCharCount();
             if (this.applyingExternal)
                 return;
             const out = this.buildOutput(editor);
-            const next = out.json ? JSON.stringify(out.json) : null;
-            this.lastEmitted = next;
-            this.value = next;
+            // Track both JSON and HTML forms to prevent feedback loops.
+            // The parent may send back either format via the value prop.
+            this.lastEmittedJson = out.json ? JSON.stringify(out.json) : null;
+            this.lastEmittedHtml = out.html;
+            // Do NOT set this.value here — it triggers unnecessary Stencil re-renders
+            // and the Watch cycle. The parent is the source of truth for the value prop.
             this.coInput.emit(out);
+            // In readonly mode there's no blur cycle, so commit immediately
+            // (e.g. task-list checkbox toggled by onReadOnlyChecked).
+            if (this.readonly)
+                this.coChange.emit(out);
         };
         this.handleFocus = () => {
             this.hasFocus = true;
             this.coFocus.emit();
         };
         this.handleBlur = () => {
-            this.hasFocus = false;
-            if (this.editor)
-                this.coChange.emit(this.buildOutput(this.editor));
-            this.coBlur.emit();
+            // Delay blur processing — if the user clicked a toolbar button,
+            // chain().focus() will re-focus the editor before this timeout fires.
+            clearTimeout(this.blurTimeout);
+            this.blurTimeout = setTimeout(() => {
+                var _a, _b;
+                if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isFocused)
+                    return; // Focus was restored (toolbar click)
+                // Don't blur if focus moved to an element inside the bubble (e.g. hex input)
+                if ((_b = this.bubbleEl) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement))
+                    return;
+                this.hasFocus = false;
+                if (this.editor)
+                    this.coChange.emit(this.buildOutput(this.editor));
+                this.coBlur.emit();
+            }, 100);
         };
     }
     async componentDidLoad() {
         var _a, _b;
-        this.rt = await import('./index-BjAqSidM.js');
-        if (this.destroyed || !this.contentEl)
+        if (!this.contentEl)
             return;
+        // Create bubble element imperatively so Stencil VDOM cannot interfere
+        // with BubbleMenu's DOM management (it calls element.remove/appendChild).
+        const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
+        if (showToolbar) {
+            this.bubbleEl = this.createBubbleElement();
+        }
         this.editor = this.rt.createEditor({
             preset: this.preset,
             element: this.contentEl,
@@ -72,40 +113,113 @@ const CoRichTextEditor = class {
             maxLength: this.maxLength,
             features: this.parsedFeatures,
             customExtensions: (_a = this.customExtensions) !== null && _a !== void 0 ? _a : [],
+            bubbleMenuElement: this.bubbleEl,
             imageUpload: this.imageUpload,
             onUpdate: (editor) => this.handleUpdate(editor),
             onFocus: () => this.handleFocus(),
             onBlur: () => this.handleBlur(),
         });
-        this.lastEmitted = (_b = this.value) !== null && _b !== void 0 ? _b : null;
+        // Document / "site" preset: fluid ~80% content width (see editor.css). Marks
+        // both editable and readonly so the reader matches the author's measure.
+        if (this.preset === 'document') {
+            this.contentEl.classList.add('co-rte-content--site');
+        }
+        // Image layout toolbar — only when actually editable. The layout itself is
+        // CSS-driven (keyed on `data-image-layout`); the bar just lets the author
+        // pick a reflow mode (inline / wrap-left / wrap-right / center / full-width).
+        if (showToolbar && this.imagesEnabled) {
+            this.contentEl.style.position = 'relative'; // offset parent for the bar
+            this.imgLayoutEl = this.createImageLayoutBar();
+            this.contentEl.appendChild(this.imgLayoutEl);
+        }
+        // Update bubble active states on every transaction
+        this.editor.on('transaction', ({ transaction }) => {
+            if (this.bubbleEl) {
+                this.updateBubbleActiveStates();
+                if ((this.bubbleDragged || this.bubblePositionLocked) && this.bubbleEl) {
+                    this.applyBubbleFixedPosition();
+                }
+            }
+            // Reapply floating-image positions only when the doc changed (skip pure
+            // selection/cursor moves to avoid a full descendants walk on every keystroke).
+            if (this.imagesEnabled && transaction.docChanged)
+                this.syncImageLayouts();
+            this.updateImageLayoutBar();
+        });
+        // Clicking the toolbar closes bubble popups (link form, panels, etc.)
+        if (this.bubbleEl && this.toolbarEl) {
+            this.toolbarEl.addEventListener('mousedown', () => {
+                this.closeBubbleDropdowns();
+            });
+            // Hide the selection bubble while a toolbar dropdown/popover is open so
+            // the two never overlap in the same space (the bubble lives inside the
+            // content area, right where toolbar dropdowns expand into).
+            this.toolbarEl.addEventListener('coPopoverChange', (e) => {
+                var _a;
+                const open = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.open;
+                this.suppressBubble(!!open);
+            });
+        }
+        this.lastEmittedJson = (_b = this.value) !== null && _b !== void 0 ? _b : null;
         this.ready = true;
         this.refreshCharCount();
         this.syncToolbar();
         this.coReady.emit();
         if (this.autofocus)
             this.editor.commands.focus();
+        // Tag every image container with its layout mode so the CSS rules apply.
+        // Runs even without the layout toolbar (readonly/disabled viewers).
+        requestAnimationFrame(() => this.syncImageLayouts());
     }
     disconnectedCallback() {
-        var _a;
-        this.destroyed = true;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+        var _a, _b, _c, _d;
+        clearTimeout(this.blurTimeout);
+        clearTimeout(this.bubbleLockTimer);
+        (_a = this.bubbleStyleObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.bubbleDragMoveHandler)
+            document.removeEventListener('mousemove', this.bubbleDragMoveHandler);
+        if (this.bubbleDragEndHandler)
+            document.removeEventListener('mouseup', this.bubbleDragEndHandler);
+        if (this.bubbleOutsideClickHandler)
+            document.removeEventListener('click', this.bubbleOutsideClickHandler, true);
+        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.destroy();
         this.editor = undefined;
+        (_c = this.bubbleEl) === null || _c === void 0 ? void 0 : _c.remove();
+        (_d = this.imgLayoutEl) === null || _d === void 0 ? void 0 : _d.remove();
     }
     componentDidRender() {
         this.syncToolbar();
     }
+    onAccountFontsChange() {
+        var _a;
+        // Re-render the font dropdown list if it's open
+        if (this._fontDropdownRenderFn) {
+            const filter = ((_a = this._fontDropdownSearchInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+            this._fontDropdownRenderFn(filter);
+        }
+    }
     onValueChange(next) {
         if (!this.editor || this.applyingExternal)
             return;
-        if ((next !== null && next !== void 0 ? next : null) === this.lastEmitted)
+        const incoming = next !== null && next !== void 0 ? next : null;
+        // Skip if this value matches what we last emitted (JSON or HTML form).
+        // This prevents the destructive feedback loop where the parent sends
+        // back our own output and setContent resets the editor on every keystroke.
+        if (incoming === this.lastEmittedJson || incoming === this.lastEmittedHtml)
             return;
         this.applyingExternal = true;
         try {
-            this.editor.commands.setContent(this.parseValue(next), { emitUpdate: false });
+            if (incoming === '' || incoming === null) {
+                this.editor.commands.clearContent(false);
+            }
+            else {
+                this.editor.commands.setContent(this.parseValue(next), { emitUpdate: false });
+            }
         }
         finally {
             this.applyingExternal = false;
-            this.lastEmitted = next !== null && next !== void 0 ? next : null;
+            this.lastEmittedJson = incoming;
+            this.lastEmittedHtml = '';
             this.refreshCharCount();
         }
     }
@@ -143,6 +257,12 @@ const CoRichTextEditor = class {
         return (_a = this.editor) !== null && _a !== void 0 ? _a : null;
     }
     /* ── internals ── */
+    /** Whether the image node is enabled (mirrors presets.ts `wantImage` logic). */
+    get imagesEnabled() {
+        var _a;
+        const f = this.parsedFeatures;
+        return (_a = f === null || f === void 0 ? void 0 : f.image) !== null && _a !== void 0 ? _a : this.preset === 'document';
+    }
     get parsedFeatures() {
         if (!this.features)
             return undefined;
@@ -167,9 +287,7 @@ const CoRichTextEditor = class {
         }
     }
     sanitizeHtml(html) {
-        // Same features as the schema — otherwise feature-enabled nodes (images,
-        // variables) would survive in `json` but be stripped from `html`.
-        return this.rt ? this.rt.sanitize(html, this.preset, this.parsedFeatures) : html;
+        return this.rt.sanitize(html, this.preset);
     }
     buildOutput(editor) {
         const empty = editor.isEmpty;
@@ -179,21 +297,191 @@ const CoRichTextEditor = class {
             text: editor.getText(),
         };
     }
+    /** Lock the bubble position so floating-ui doesn't reposition it. */
+    lockBubblePosition(durationMs = 1000) {
+        if (!this.bubbleEl)
+            return;
+        const rect = this.bubbleEl.getBoundingClientRect();
+        if (rect.width === 0)
+            return; // bubble not visible
+        this.bubbleLockPos = { x: rect.left, y: rect.top };
+        this.bubblePositionLocked = true;
+        clearTimeout(this.bubbleLockTimer);
+        this.bubbleLockTimer = setTimeout(() => {
+            this.bubblePositionLocked = false;
+        }, durationMs);
+    }
+    /** Apply fixed position to the bubble, overriding floating-ui. */
+    applyBubbleFixedPosition() {
+        if (!this.bubbleEl)
+            return;
+        const pos = this.bubbleDragged ? this.bubbleDragPos : this.bubbleLockPos;
+        this.applyingBubbleLock = true;
+        this.bubbleEl.style.position = 'fixed';
+        this.bubbleEl.style.top = `${pos.y}px`;
+        this.bubbleEl.style.left = `${pos.x}px`;
+        this.bubbleEl.style.transform = 'none';
+        this.bubbleEl.style.visibility = 'visible';
+        requestAnimationFrame(() => { this.applyingBubbleLock = false; });
+    }
+    /** Watch for floating-ui style changes and override them when locked/dragged. */
+    setupBubbleStyleObserver(bubble) {
+        // Use BubbleMenu plugin's onHide/onShow callbacks (dispatched as custom
+        // events from create-editor) for reliable drag state management.
+        // These fire synchronously inside hide()/show(), avoiding microtask races.
+        bubble.addEventListener('co-bubble-hide', () => {
+            this.bubbleDragged = false;
+            this.bubblePositionLocked = false;
+            clearTimeout(this.bubbleLockTimer);
+            this.closeBubbleDropdowns();
+            bubble.style.position = '';
+            bubble.style.top = '';
+            bubble.style.left = '';
+            bubble.style.transform = '';
+        });
+        bubble.addEventListener('co-bubble-show', () => {
+            this.bubbleDragged = false;
+            this.bubblePositionLocked = false;
+        });
+        // MutationObserver only handles overriding floating-ui position
+        // while the bubble is actively dragged or position-locked.
+        this.bubbleStyleObserver = new MutationObserver(() => {
+            if (this.applyingBubbleLock)
+                return;
+            if (!this.bubblePositionLocked && !this.bubbleDragged)
+                return;
+            this.applyBubbleFixedPosition();
+        });
+        this.bubbleStyleObserver.observe(bubble, {
+            attributes: true,
+            attributeFilter: ['style'],
+        });
+    }
+    /**
+     * Hide/show the selection bubble while a toolbar dropdown is open. Uses a
+     * class with `!important` so it wins over the BubbleMenu plugin's inline
+     * display/visibility writes. When unsuppressed, the plugin's own state
+     * (selection still active) reveals it again on the next update.
+     */
+    suppressBubble(on) {
+        if (!this.bubbleEl)
+            return;
+        this.bubbleEl.classList.toggle('co-rte-bubble--suppressed', on);
+        if (on)
+            this.closeBubbleDropdowns();
+    }
+    /** Close all open sub-dropdowns inside the bubble. */
+    closeBubbleDropdowns() {
+        if (!this.bubbleEl)
+            return;
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+            d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+            d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__panel').forEach(d => {
+            d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__overflow-menu').forEach(d => {
+            d.style.display = 'none';
+        });
+        if (this.bubbleLinkFormEl) {
+            this.bubbleLinkFormEl.style.display = 'none';
+        }
+    }
     refreshCharCount() {
         var _a;
         const storage = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.storage;
-        if (storage === null || storage === void 0 ? void 0 : storage.characterCount)
+        if (storage === null || storage === void 0 ? void 0 : storage.characterCount) {
             this.charCount = storage.characterCount.characters();
+            // Update DOM directly to avoid Stencil re-renders on every keystroke
+            if (this.charCountEl) {
+                this.charCountEl.textContent = this.maxLength != null
+                    ? `${this.charCount} / ${this.maxLength}`
+                    : `${this.charCount}`;
+            }
+        }
     }
     syncToolbar() {
         if (this.toolbarEl && this.editor && this.toolbarEl.editor !== this.editor) {
             this.toolbarEl.editor = this.editor;
         }
+        if (this.toolbarEl) {
+            this.toolbarEl.imageUpload = this.imageUpload;
+        }
     }
     get resolvedToolbar() {
         if (this.toolbar !== 'auto')
             return this.toolbar;
-        return this.rt ? this.rt.defaultToolbarForPreset(this.preset) : 'basic';
+        return this.rt.defaultToolbarForPreset(this.preset);
+    }
+    get resolvedFontFamilies() {
+        if (!this.fontFamilies)
+            return CoRichTextEditor.DEFAULT_FONTS;
+        if (typeof this.fontFamilies === 'string') {
+            try {
+                return JSON.parse(this.fontFamilies);
+            }
+            catch (_a) {
+                return CoRichTextEditor.DEFAULT_FONTS;
+            }
+        }
+        return this.fontFamilies;
+    }
+    get resolvedAccountFonts() {
+        // Prefer prop over loaded fonts
+        if (this.accountFonts) {
+            if (typeof this.accountFonts === 'string') {
+                try {
+                    return JSON.parse(this.accountFonts);
+                }
+                catch (_a) {
+                    return [];
+                }
+            }
+            return this.accountFonts;
+        }
+        return this._loadedAccountFonts;
+    }
+    registerFontFace(name, url) {
+        if (!url || !name || CoRichTextEditor._registeredFonts.has(name))
+            return;
+        CoRichTextEditor._registeredFonts.add(name);
+        try {
+            const face = new FontFace(name, `url("${url}")`);
+            face.load().then(() => document.fonts.add(face)).catch(() => { });
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+    }
+    /** Load account fonts via the fontLoader callback (called once). */
+    async loadFontsViaCallback() {
+        var _a, _b, _c;
+        if (this._fontLoaderCalled || !this.fontLoader)
+            return;
+        this._fontLoaderCalled = true;
+        this._fontLoaderLoading = true;
+        // Re-render to show loading state
+        (_a = this._fontDropdownRenderFn) === null || _a === void 0 ? void 0 : _a.call(this, '');
+        try {
+            const fonts = await this.fontLoader();
+            if (Array.isArray(fonts)) {
+                this._loadedAccountFonts = fonts.map(f => {
+                    if (f.url)
+                        this.registerFontFace(f.label, f.url);
+                    return { label: f.label, value: f.value };
+                });
+            }
+        }
+        catch (e) {
+            console.error('[co-rich-text-editor] fontLoader error', e);
+        }
+        finally {
+            this._fontLoaderLoading = false;
+            // Re-render with loaded fonts
+            const filter = ((_b = this._fontDropdownSearchInput) === null || _b === void 0 ? void 0 : _b.value) || '';
+            (_c = this._fontDropdownRenderFn) === null || _c === void 0 ? void 0 : _c.call(this, filter);
+        }
     }
     get helperIcon() {
         switch (this.status) {
@@ -203,20 +491,1546 @@ const CoRichTextEditor = class {
             default: return 'info';
         }
     }
+    /* ── Bubble menu (imperative — outside Stencil VDOM) ── */
+    /**
+     * Create the bubble menu element imperatively. BubbleMenu v3 manages
+     * the element via remove()/appendChild(), which conflicts with Stencil's
+     * virtual DOM reconciliation. By creating it outside the VDOM, Stencil
+     * won't recreate or interfere with the element.
+     */
+    createBubbleElement() {
+        const bubble = document.createElement('div');
+        bubble.className = 'co-rte-bubble';
+        // Start hidden and absolutely positioned so it never takes document flow space.
+        // BubbleMenu's floating-ui will manage position via inline styles when shown.
+        bubble.style.visibility = 'hidden';
+        bubble.style.position = 'absolute';
+        bubble.style.top = '0';
+        bubble.style.left = '0';
+        // Prevent any bubble click from stealing editor focus
+        // and lock bubble position during any toolbar interaction.
+        bubble.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        // Close dropdowns/panels when clicking outside the bubble
+        this.bubbleOutsideClickHandler = (e) => {
+            if (!bubble.contains(e.target)) {
+                this.closeBubbleDropdowns();
+            }
+        };
+        document.addEventListener('click', this.bubbleOutsideClickHandler, true);
+        // Watch for floating-ui style overrides and restore locked position
+        this.setupBubbleStyleObserver(bubble);
+        const isDocument = this.preset === 'document';
+        /* ── Drag handle (document only) ── */
+        if (isDocument) {
+            const dragHandle = document.createElement('div');
+            dragHandle.className = 'co-rte-bubble__drag-handle';
+            dragHandle.innerHTML = `<co-icon name="dots-six-vertical" size="14"></co-icon>`;
+            dragHandle.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = bubble.getBoundingClientRect();
+                this.bubbleDragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+                if (!this.bubbleDragged) {
+                    this.bubbleDragPos = { x: rect.left, y: rect.top };
+                }
+                this.bubbleDragged = true;
+                this.bubbleDragMoveHandler = (ev) => {
+                    this.bubbleDragPos.x = ev.clientX - this.bubbleDragOffset.x;
+                    this.bubbleDragPos.y = ev.clientY - this.bubbleDragOffset.y;
+                    bubble.style.position = 'fixed';
+                    bubble.style.top = `${this.bubbleDragPos.y}px`;
+                    bubble.style.left = `${this.bubbleDragPos.x}px`;
+                    bubble.style.transform = 'none';
+                    bubble.style.visibility = 'visible';
+                };
+                this.bubbleDragEndHandler = () => {
+                    document.removeEventListener('mousemove', this.bubbleDragMoveHandler);
+                    document.removeEventListener('mouseup', this.bubbleDragEndHandler);
+                };
+                document.addEventListener('mousemove', this.bubbleDragMoveHandler);
+                document.addEventListener('mouseup', this.bubbleDragEndHandler);
+            });
+            bubble.appendChild(dragHandle);
+        } // end isDocument drag handle
+        /* ── Single row: all controls ── */
+        const row = document.createElement('div');
+        row.className = 'co-rte-bubble__row';
+        // --- Advanced controls (document preset only) ---
+        // Panels will be appended to bubble root (not inside the row) at the end.
+        let fontSizePanel = null;
+        let fontWeightPanel = null;
+        let lineHeightPanelEl = null;
+        let letterSpacingPanelEl = null;
+        let bgColorPanelEl = null;
+        let overflowResult = null;
+        if (isDocument) {
+            // --- Font Family select (with search) ---
+            const fontFamilyWrap = this.createBubbleFontFamilySelect();
+            row.appendChild(fontFamilyWrap);
+            // --- Font Size panel (draggable with custom input) ---
+            fontSizePanel = this.createBubbleFontSizePanel();
+            row.appendChild(fontSizePanel.wrap);
+            // --- Font Weight panel (draggable, two-column) ---
+            fontWeightPanel = this.createBubbleFontWeightPanel();
+            row.appendChild(fontWeightPanel.wrap);
+            row.appendChild(this.createSep());
+            // --- Text color picker ---
+            const colorWrap = this.createBubbleColorPicker('textColor', (color) => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setColor(color).run();
+            });
+            row.appendChild(colorWrap);
+            row.appendChild(this.createSep());
+        } // end isDocument advanced controls
+        // --- B I U (all presets except comment which disables underline) ---
+        const _s = getRichTextStrings(this.locale);
+        const formatBtns = [
+            { action: 'bold', icon: 'text-b', label: _s.bold, check: 'bold' },
+            { action: 'italic', icon: 'text-italic', label: _s.italic, check: 'italic' },
+        ];
+        // Underline is available on task, email, document (not comment)
+        if (this.preset !== 'comment') {
+            formatBtns.push({ action: 'underline', icon: 'text-underline', label: _s.underline, check: 'underline' });
+        }
+        formatBtns.forEach(({ action, icon, label, check }) => {
+            const btn = this.createBubbleBtn(icon, label, action, check, () => {
+                if (!this.editor)
+                    return;
+                const chain = this.editor.chain().focus();
+                switch (action) {
+                    case 'bold':
+                        chain.toggleBold().run();
+                        break;
+                    case 'italic':
+                        chain.toggleItalic().run();
+                        break;
+                    case 'underline':
+                        chain.toggleUnderline().run();
+                        break;
+                }
+            });
+            row.appendChild(btn);
+        });
+        row.appendChild(this.createSep());
+        // --- Alignment buttons (document and email only) ---
+        if (isDocument || this.preset === 'email') {
+            const alignments = [
+                { align: 'left', icon: 'text-align-left', label: _s.alignLeft },
+                { align: 'center', icon: 'text-align-center', label: _s.center },
+                { align: 'right', icon: 'text-align-right', label: _s.alignRight },
+                { align: 'justify', icon: 'text-align-justify', label: _s.justify },
+            ];
+            alignments.forEach(({ align, icon, label }) => {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'co-rte-bubble__btn';
+                btn.title = label;
+                btn.setAttribute('aria-label', label);
+                btn.setAttribute('data-action', 'textAlign');
+                btn.setAttribute('data-align', align);
+                btn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon>`;
+                btn.addEventListener('click', () => {
+                    if (!this.editor)
+                        return;
+                    this.editor.chain().focus().setTextAlign(align).run();
+                });
+                row.appendChild(btn);
+            });
+            row.appendChild(this.createSep());
+        } // end alignment
+        // --- Bullet / Ordered list (task, email — not comment, not document) ---
+        // For document preset, lists are moved to the overflow menu.
+        if (this.preset !== 'comment' && !isDocument) {
+            row.appendChild(this.createBubbleBtn('list-bullets', _s.bulletList, 'bulletList', 'bulletList', () => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().toggleBulletList().run();
+            }));
+            row.appendChild(this.createBubbleBtn('list-numbers', _s.orderedList, 'orderedList', 'orderedList', () => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().toggleOrderedList().run();
+            }));
+            row.appendChild(this.createSep());
+        } // end lists (non-document)
+        // --- Link (all presets) ---
+        const linkBtn = this.createBubbleBtn('link', _s.link, 'link', 'link', () => {
+            if (!this.editor)
+                return;
+            this.toggleBubbleLinkForm(true);
+        });
+        row.appendChild(linkBtn);
+        // --- Overflow menu (document only) ---
+        // Superscript, subscript, lists, strikethrough, bg color, line height,
+        // letter spacing, horizontal rule, clear formatting — all in overflow.
+        if (isDocument) {
+            row.appendChild(this.createSep());
+            lineHeightPanelEl = this.createBubbleLineHeightPanel();
+            letterSpacingPanelEl = this.createBubbleLetterSpacingPanel();
+            bgColorPanelEl = this.createBubbleBgColorPanel();
+            overflowResult = this.createBubbleOverflowMenu({
+                lineHeight: lineHeightPanelEl,
+                letterSpacing: letterSpacingPanelEl,
+                bgColor: bgColorPanelEl,
+            });
+            row.appendChild(overflowResult.overflowWrap);
+        } // end isDocument overflow
+        bubble.appendChild(row);
+        // Append floating panels to bubble root (outside the row, so they float freely)
+        if (isDocument) {
+            if (fontSizePanel)
+                bubble.appendChild(fontSizePanel.panelEl);
+            if (fontWeightPanel)
+                bubble.appendChild(fontWeightPanel.panelEl);
+            if (lineHeightPanelEl)
+                bubble.appendChild(lineHeightPanelEl);
+            if (letterSpacingPanelEl)
+                bubble.appendChild(letterSpacingPanelEl);
+            if (bgColorPanelEl)
+                bubble.appendChild(bgColorPanelEl);
+        }
+        // Link form (hidden by default)
+        const linkForm = document.createElement('div');
+        linkForm.className = 'co-rte-bubble__link-form';
+        linkForm.style.display = 'none';
+        this.bubbleLinkFormEl = linkForm;
+        const linkInput = document.createElement('input');
+        linkInput.type = 'url';
+        linkInput.className = 'co-rte-bubble__link-input';
+        linkInput.placeholder = 'https://...';
+        this.bubbleLinkInputEl = linkInput;
+        linkInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter')
+                this.submitBubbleLinkImperative();
+            if (e.key === 'Escape')
+                this.toggleBubbleLinkForm(false);
+        });
+        const linkSubmit = document.createElement('button');
+        linkSubmit.type = 'button';
+        linkSubmit.className = 'co-rte-bubble__link-btn';
+        linkSubmit.innerHTML = `<co-icon name="check" size="14"></co-icon>`;
+        linkSubmit.addEventListener('click', () => this.submitBubbleLinkImperative());
+        const linkUnlink = document.createElement('button');
+        linkUnlink.type = 'button';
+        linkUnlink.className = 'co-rte-bubble__link-btn co-rte-bubble__link-unlink';
+        linkUnlink.title = _s.unlinkLink;
+        linkUnlink.innerHTML = `<co-icon name="link-break" size="14"></co-icon>`;
+        linkUnlink.addEventListener('click', () => {
+            if (!this.editor)
+                return;
+            this.editor.chain().focus().unsetLink().run();
+            this.toggleBubbleLinkForm(false);
+        });
+        this.bubbleLinkUnlinkEl = linkUnlink;
+        linkForm.appendChild(linkInput);
+        linkForm.appendChild(linkSubmit);
+        linkForm.appendChild(linkUnlink);
+        bubble.appendChild(linkForm);
+        return bubble;
+    }
+    /** Helper: create a separator span */
+    createSep() {
+        const sep = document.createElement('span');
+        sep.className = 'co-rte-bubble__sep';
+        return sep;
+    }
+    /**
+     * Position a dropdown above or below the trigger depending on available
+     * viewport space. Sets `data-position="above"|"below"` so CSS can flip.
+     */
+    positionDropdown(trigger, dropdown) {
+        const triggerRect = trigger.getBoundingClientRect();
+        // The dropdown is already display:block when this is called.
+        // Remove any previous position so it can be measured at its natural height.
+        dropdown.removeAttribute('data-position');
+        dropdown.style.removeProperty('left');
+        dropdown.style.removeProperty('transform');
+        const dropH = dropdown.offsetHeight || 320;
+        const dropW = dropdown.offsetWidth || 224;
+        const spaceAbove = triggerRect.top;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        if (spaceBelow >= dropH || spaceBelow > spaceAbove) {
+            dropdown.setAttribute('data-position', 'below');
+        }
+        else {
+            dropdown.setAttribute('data-position', 'above');
+        }
+        // Clamp horizontal position so the dropdown stays within the viewport.
+        // The dropdown is positioned relative to its parent (trigger wrapper).
+        // Default CSS uses left:50% + translateX(-50%) to center; we override
+        // when centering would push the dropdown outside the viewport.
+        const isColorDropdown = dropdown.classList.contains('co-rte-bubble__color-dropdown');
+        if (isColorDropdown) {
+            const parentRect = (trigger.parentElement || trigger).getBoundingClientRect();
+            // Desired center-aligned left edge in viewport coords
+            const idealLeft = parentRect.left + parentRect.width / 2 - dropW / 2;
+            const idealRight = idealLeft + dropW;
+            const viewportPad = 8;
+            if (idealLeft < viewportPad) {
+                // Would overflow left — align to left edge of trigger
+                dropdown.style.left = '0';
+                dropdown.style.transform = 'none';
+            }
+            else if (idealRight > window.innerWidth - viewportPad) {
+                // Would overflow right — align to right edge of trigger
+                dropdown.style.left = 'auto';
+                dropdown.style.right = '0';
+                dropdown.style.transform = 'none';
+            }
+            // else: default centering from CSS is fine
+        }
+    }
+    positionPanelNearBubble(panel) {
+        if (!this.bubbleEl)
+            return;
+        const overflowMenu = this.bubbleEl.querySelector('.co-rte-bubble__overflow-menu');
+        const anchorRect = overflowMenu && overflowMenu.style.display !== 'none'
+            ? overflowMenu.getBoundingClientRect()
+            : this.bubbleEl.getBoundingClientRect();
+        const panelH = panel.offsetHeight || 320;
+        const panelW = panel.offsetWidth || 230;
+        const gap = 4;
+        const pad = 8;
+        let top = anchorRect.top;
+        if (top + panelH > window.innerHeight - pad)
+            top = window.innerHeight - pad - panelH;
+        if (top < pad)
+            top = pad;
+        let left = anchorRect.left - panelW - gap;
+        if (left < pad)
+            left = anchorRect.right + gap;
+        if (left + panelW > window.innerWidth - pad)
+            left = window.innerWidth - pad - panelW;
+        panel.style.position = 'fixed';
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
+        panel.style.bottom = 'auto';
+        panel.style.right = 'auto';
+        panel.style.transform = 'none';
+        panel.removeAttribute('data-position');
+    }
+    /** Helper: create a toggle button for the bubble */
+    createBubbleBtn(icon, label, action, check, onClick) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'co-rte-bubble__btn';
+        btn.title = label;
+        btn.setAttribute('aria-label', label);
+        btn.setAttribute('data-action', action);
+        btn.setAttribute('data-check', check);
+        btn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon>`;
+        btn.addEventListener('click', onClick);
+        return btn;
+    }
+    /** Creates the font family dropdown with search for the bubble menu. */
+    createBubbleFontFamilySelect() {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__select co-rte-bubble__select--font';
+        wrap.setAttribute('data-select', 'fontFamily');
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__select-trigger';
+        trigger.innerHTML = `<span class="co-rte-bubble__select-label">Sans-serif</span><co-icon name="caret-down" size="12"></co-icon>`;
+        const dropdown = document.createElement('div');
+        dropdown.className = 'co-rte-bubble__select-dropdown co-rte-bubble__select-dropdown--font';
+        dropdown.style.display = 'none';
+        // Search input
+        const searchWrap = document.createElement('div');
+        searchWrap.className = 'co-rte-bubble__font-search';
+        const searchInput = document.createElement('input');
+        searchInput.type = 'text';
+        searchInput.className = 'co-rte-bubble__font-search-input';
+        searchInput.placeholder = getRichTextStrings(this.locale).searchFont;
+        searchWrap.appendChild(searchInput);
+        dropdown.appendChild(searchWrap);
+        // Font list container
+        const listEl = document.createElement('div');
+        listEl.className = 'co-rte-bubble__font-list';
+        dropdown.appendChild(listEl);
+        const createFontOption = (label, value) => {
+            const opt = document.createElement('button');
+            opt.type = 'button';
+            opt.className = 'co-rte-bubble__select-option';
+            opt.setAttribute('data-value', value);
+            opt.textContent = label;
+            opt.style.fontFamily = value.includes(',') ? value : `"${value}", sans-serif`;
+            opt.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setFontFamily(value).run();
+                dropdown.style.display = 'none';
+                const labelEl = trigger.querySelector('.co-rte-bubble__select-label');
+                if (labelEl)
+                    labelEl.textContent = label;
+                searchInput.value = '';
+                this.coFontPopupHide.emit();
+            });
+            return opt;
+        };
+        const renderFonts = (filter) => {
+            listEl.innerHTML = '';
+            const term = filter.toLowerCase();
+            const accountFonts = this.resolvedAccountFonts;
+            const systemFonts = this.resolvedFontFamilies;
+            const filteredAccount = term ? accountFonts.filter(f => f.label.toLowerCase().includes(term)) : accountFonts;
+            const filteredSystem = term ? systemFonts.filter(f => f.label.toLowerCase().includes(term)) : systemFonts;
+            if (!filteredAccount.length && !filteredSystem.length) {
+                const empty = document.createElement('div');
+                empty.className = 'co-rte-bubble__font-empty';
+                empty.textContent = getRichTextStrings(this.locale).noResults;
+                listEl.appendChild(empty);
+                return;
+            }
+            // Loading indicator
+            if ((this.fontsLoading || this._fontLoaderLoading) && !filteredAccount.length) {
+                const loading = document.createElement('div');
+                loading.className = 'co-rte-bubble__font-empty';
+                loading.textContent = getRichTextStrings(this.locale).loadingFonts;
+                listEl.appendChild(loading);
+            }
+            // Imported fonts section
+            if (filteredAccount.length) {
+                const header = document.createElement('div');
+                header.className = 'co-rte-bubble__font-section-header';
+                header.textContent = getRichTextStrings(this.locale).importedFonts;
+                listEl.appendChild(header);
+                filteredAccount.forEach(({ label, value }) => listEl.appendChild(createFontOption(label, value)));
+            }
+            // System fonts section
+            if (filteredSystem.length) {
+                const header = document.createElement('div');
+                header.className = 'co-rte-bubble__font-section-header';
+                header.textContent = getRichTextStrings(this.locale).systemFonts;
+                listEl.appendChild(header);
+                filteredSystem.forEach(({ label, value }) => listEl.appendChild(createFontOption(label, value)));
+            }
+        };
+        searchInput.addEventListener('input', () => renderFonts(searchInput.value));
+        // Re-render fonts when accountFonts prop changes (MutationObserver on the host)
+        this._fontDropdownRenderFn = renderFonts;
+        this._fontDropdownSearchInput = searchInput;
+        trigger.addEventListener('click', () => {
+            const parent = wrap.closest('.co-rte-bubble');
+            if (parent) {
+                parent.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+                    if (d !== dropdown)
+                        d.style.display = 'none';
+                });
+                parent.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+                    d.style.display = 'none';
+                });
+            }
+            const isOpen = dropdown.style.display !== 'none';
+            dropdown.style.display = isOpen ? 'none' : 'block';
+            if (!isOpen) {
+                this.coFontPopupShow.emit();
+                this.loadFontsViaCallback();
+                this.positionDropdown(trigger, dropdown);
+                renderFonts('');
+                setTimeout(() => searchInput.focus(), 0);
+            }
+            else {
+                this.coFontPopupHide.emit();
+            }
+        });
+        wrap.appendChild(trigger);
+        wrap.appendChild(dropdown);
+        return wrap;
+    }
+    /** Creates a compact dropdown-select for the bubble menu. */
+    createBubbleSelect(name, options, defaultLabel, onChange) {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__select';
+        wrap.setAttribute('data-select', name);
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__select-trigger';
+        trigger.innerHTML = `<span class="co-rte-bubble__select-label">${defaultLabel}</span><co-icon name="caret-down" size="12"></co-icon>`;
+        const dropdown = document.createElement('div');
+        dropdown.className = 'co-rte-bubble__select-dropdown';
+        dropdown.style.display = 'none';
+        options.forEach(({ label, value }) => {
+            const opt = document.createElement('button');
+            opt.type = 'button';
+            opt.className = 'co-rte-bubble__select-option';
+            opt.setAttribute('data-value', value);
+            opt.textContent = label;
+            // Preview font weight in the option
+            if (name === 'fontWeight') {
+                opt.style.fontWeight = value;
+            }
+            opt.addEventListener('click', () => {
+                onChange(value);
+                dropdown.style.display = 'none';
+                const labelEl = trigger.querySelector('.co-rte-bubble__select-label');
+                if (labelEl)
+                    labelEl.textContent = label;
+            });
+            dropdown.appendChild(opt);
+        });
+        trigger.addEventListener('click', () => {
+            // Close other open dropdowns in the bubble
+            const parent = wrap.closest('.co-rte-bubble');
+            if (parent) {
+                parent.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+                    if (d !== dropdown)
+                        d.style.display = 'none';
+                });
+                parent.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+                    d.style.display = 'none';
+                });
+            }
+            const isOpen = dropdown.style.display !== 'none';
+            dropdown.style.display = isOpen ? 'none' : 'block';
+            if (!isOpen)
+                this.positionDropdown(trigger, dropdown);
+        });
+        wrap.appendChild(trigger);
+        wrap.appendChild(dropdown);
+        return wrap;
+    }
+    /** Creates a compact color picker button for the bubble menu. */
+    createBubbleColorPicker(name, onChange) {
+        const colors = [
+            '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc',
+            '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',
+            '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff',
+            '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',
+            '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3',
+            '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',
+        ];
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__color';
+        wrap.setAttribute('data-color', name);
+        const iconName = name === 'textColor' ? '' : 'highlighter';
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__btn';
+        const _cs = getRichTextStrings(this.locale);
+        trigger.title = name === 'textColor' ? _cs.textColor : _cs.backgroundColor;
+        if (name === 'textColor') {
+            trigger.innerHTML = `<span class="co-rte-bubble__color-indicator"><span class="co-rte-bubble__color-letter">A</span><span class="co-rte-bubble__color-bar" style="background:#000000"></span></span>`;
+        }
+        else {
+            trigger.innerHTML = `<co-icon name="${iconName}" size="16"></co-icon>`;
+        }
+        const dropdown = document.createElement('div');
+        dropdown.className = 'co-rte-bubble__color-dropdown';
+        dropdown.style.display = 'none';
+        const colorTitle = name === 'textColor' ? _cs.textColor : _cs.backgroundColor;
+        const { resetDrag: resetColorDrag } = this.addDragHeader(dropdown, colorTitle);
+        // Prevent focus loss
+        dropdown.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        const grid = document.createElement('div');
+        grid.className = 'co-rte-bubble__color-grid';
+        colors.forEach(color => {
+            const swatch = document.createElement('button');
+            swatch.type = 'button';
+            swatch.className = 'co-rte-bubble__color-swatch';
+            swatch.style.background = color;
+            if (color === '#ffffff') {
+                swatch.style.border = '1px solid #e0e0e0';
+            }
+            swatch.addEventListener('click', () => {
+                onChange(color);
+                dropdown.style.display = 'none';
+            });
+            grid.appendChild(swatch);
+        });
+        // Hex input
+        const hexRow = document.createElement('div');
+        hexRow.className = 'co-rte-bubble__color-hex';
+        const hexInput = document.createElement('input');
+        hexInput.type = 'text';
+        hexInput.className = 'co-rte-bubble__color-hex-input';
+        hexInput.placeholder = '#hex';
+        hexInput.maxLength = 7;
+        hexInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                const val = hexInput.value.trim();
+                if (/^#[0-9a-fA-F]{3,6}$/.test(val)) {
+                    onChange(val);
+                    dropdown.style.display = 'none';
+                    hexInput.value = '';
+                }
+            }
+        });
+        // Clear color button
+        const clearBtn = document.createElement('button');
+        clearBtn.type = 'button';
+        clearBtn.className = 'co-rte-bubble__color-clear';
+        clearBtn.innerHTML = `<co-icon name="x" size="12"></co-icon> ${_cs.noColor}`;
+        clearBtn.addEventListener('click', () => {
+            if (!this.editor)
+                return;
+            if (name === 'textColor')
+                this.editor.chain().focus().unsetColor().run();
+            else
+                this.editor.chain().focus().unsetHighlight().run();
+            dropdown.style.display = 'none';
+        });
+        dropdown.appendChild(grid);
+        hexRow.appendChild(hexInput);
+        dropdown.appendChild(hexRow);
+        dropdown.appendChild(clearBtn);
+        trigger.addEventListener('click', () => {
+            const parent = wrap.closest('.co-rte-bubble');
+            if (parent) {
+                parent.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+                    d.style.display = 'none';
+                });
+                parent.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+                    if (d !== dropdown)
+                        d.style.display = 'none';
+                });
+            }
+            const isOpen = dropdown.style.display !== 'none';
+            if (isOpen) {
+                dropdown.style.display = 'none';
+            }
+            else {
+                resetColorDrag();
+                dropdown.style.position = '';
+                dropdown.style.top = '';
+                dropdown.style.left = '';
+                dropdown.style.bottom = '';
+                dropdown.style.right = '';
+                dropdown.style.transform = '';
+                dropdown.style.display = 'block';
+                this.positionDropdown(trigger, dropdown);
+            }
+        });
+        wrap.appendChild(trigger);
+        wrap.appendChild(dropdown);
+        return wrap;
+    }
+    /** Close all bubble popups EXCEPT the given element. */
+    closeAllBubblePopups(...except) {
+        if (!this.bubbleEl)
+            return;
+        const keep = except.filter(Boolean);
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__panel').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__overflow-menu').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        if (this.bubbleLinkFormEl && !keep.includes(this.bubbleLinkFormEl)) {
+            this.bubbleLinkFormEl.style.display = 'none';
+        }
+    }
+    addDragHeader(panel, title) {
+        let dragged = false;
+        let dragPos = { x: 0, y: 0 };
+        let dragOffset = { x: 0, y: 0 };
+        const header = document.createElement('div');
+        header.className = 'co-rte-bubble__panel-header';
+        const dragHandle = document.createElement('div');
+        dragHandle.className = 'co-rte-bubble__panel-drag';
+        dragHandle.innerHTML = `<co-icon name="dots-six" size="14"></co-icon>`;
+        const titleEl = document.createElement('span');
+        titleEl.className = 'co-rte-bubble__panel-title';
+        titleEl.textContent = title;
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.className = 'co-rte-bubble__panel-close';
+        closeBtn.innerHTML = `<co-icon name="x" size="14"></co-icon>`;
+        closeBtn.addEventListener('click', () => { panel.style.display = 'none'; });
+        header.appendChild(dragHandle);
+        header.appendChild(titleEl);
+        header.appendChild(closeBtn);
+        dragHandle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const rect = panel.getBoundingClientRect();
+            dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+            if (!dragged)
+                dragPos = { x: rect.left, y: rect.top };
+            dragged = true;
+            const onMove = (ev) => {
+                dragPos.x = ev.clientX - dragOffset.x;
+                dragPos.y = ev.clientY - dragOffset.y;
+                panel.style.position = 'fixed';
+                panel.style.top = `${dragPos.y}px`;
+                panel.style.left = `${dragPos.x}px`;
+                panel.style.bottom = 'auto';
+                panel.style.right = 'auto';
+                panel.style.transform = 'none';
+                panel.removeAttribute('data-position');
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+        const resetDrag = () => { dragged = false; };
+        panel.insertBefore(header, panel.firstChild);
+        return { header, resetDrag };
+    }
+    /** Generic draggable panel factory. */
+    createBubblePanel(config) {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__select';
+        wrap.setAttribute('data-select', config.name);
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__select-trigger';
+        trigger.innerHTML = `<span class="co-rte-bubble__select-label">${config.triggerLabel}</span><co-icon name="caret-down" size="12"></co-icon>`;
+        const panel = document.createElement('div');
+        panel.className = 'co-rte-bubble__panel';
+        panel.setAttribute('data-panel', config.name);
+        panel.style.display = 'none';
+        // Header
+        const header = document.createElement('div');
+        header.className = 'co-rte-bubble__panel-header';
+        const dragHandle = document.createElement('div');
+        dragHandle.className = 'co-rte-bubble__panel-drag';
+        dragHandle.innerHTML = `<co-icon name="dots-six" size="14"></co-icon>`;
+        const titleEl = document.createElement('span');
+        titleEl.className = 'co-rte-bubble__panel-title';
+        titleEl.textContent = config.title;
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.className = 'co-rte-bubble__panel-close';
+        closeBtn.innerHTML = `<co-icon name="x" size="14"></co-icon>`;
+        closeBtn.addEventListener('click', () => { panel.style.display = 'none'; });
+        header.appendChild(dragHandle);
+        header.appendChild(titleEl);
+        header.appendChild(closeBtn);
+        panel.appendChild(header);
+        // Panel drag
+        let panelDragged = false;
+        let panelDragPos = { x: 0, y: 0 };
+        let panelDragOffset = { x: 0, y: 0 };
+        dragHandle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const rect = panel.getBoundingClientRect();
+            panelDragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+            if (!panelDragged)
+                panelDragPos = { x: rect.left, y: rect.top };
+            panelDragged = true;
+            const onMove = (ev) => {
+                panelDragPos.x = ev.clientX - panelDragOffset.x;
+                panelDragPos.y = ev.clientY - panelDragOffset.y;
+                panel.style.position = 'fixed';
+                panel.style.top = `${panelDragPos.y}px`;
+                panel.style.left = `${panelDragPos.x}px`;
+                panel.style.bottom = 'auto';
+                panel.style.right = 'auto';
+                panel.style.transform = 'none';
+                panel.removeAttribute('data-position');
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+        // Custom input
+        if (config.hasCustomInput) {
+            const inputWrap = document.createElement('div');
+            inputWrap.className = 'co-rte-bubble__panel-input-wrap';
+            const input = document.createElement('input');
+            input.type = config.inputType || 'text';
+            input.className = 'co-rte-bubble__panel-input';
+            input.placeholder = config.inputPlaceholder || '';
+            input.addEventListener('mousedown', (e) => e.stopPropagation());
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    const val = input.value.trim();
+                    if (val && config.onCustomInput) {
+                        config.onCustomInput(val);
+                        input.value = '';
+                    }
+                }
+                if (e.key === 'Escape') {
+                    panel.style.display = 'none';
+                }
+            });
+            inputWrap.appendChild(input);
+            panel.appendChild(inputWrap);
+        }
+        // Options
+        const optionsWrap = document.createElement('div');
+        optionsWrap.className = 'co-rte-bubble__panel-options';
+        config.options.forEach(opt => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'co-rte-bubble__panel-option';
+            btn.setAttribute('data-value', opt.value);
+            if (config.renderOption) {
+                config.renderOption(opt, btn);
+            }
+            else {
+                btn.textContent = opt.label;
+            }
+            btn.addEventListener('click', () => {
+                config.onSelect(opt.value);
+                panel.style.display = 'none';
+                panelDragged = false;
+            });
+            optionsWrap.appendChild(btn);
+        });
+        panel.appendChild(optionsWrap);
+        // Prevent bubble from losing focus
+        panel.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        // Toggle logic
+        const togglePanel = () => {
+            this.closeAllBubblePopups(panel);
+            const isOpen = panel.style.display !== 'none';
+            if (isOpen) {
+                panel.style.display = 'none';
+            }
+            else {
+                panelDragged = false;
+                panel.style.position = '';
+                panel.style.top = '';
+                panel.style.left = '';
+                panel.style.bottom = '';
+                panel.style.right = '';
+                panel.style.transform = '';
+                panel.style.display = 'block';
+                this.positionDropdown(trigger, panel);
+            }
+        };
+        trigger.addEventListener('click', togglePanel);
+        wrap.appendChild(trigger);
+        const updateLabel = (text) => {
+            const labelEl = trigger.querySelector('.co-rte-bubble__select-label');
+            if (labelEl)
+                labelEl.textContent = text;
+        };
+        return { wrap, panelEl: panel, updateLabel };
+    }
+    /** Font size panel with visual preview and custom input. */
+    createBubbleFontSizePanel() {
+        const _fs = getRichTextStrings(this.locale);
+        const headings = [
+            { label: _fs.title, value: 'h1' },
+            { label: _fs.heading1, value: 'h2' },
+            { label: _fs.heading2, value: 'h3' },
+        ];
+        const sizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px', '64px', '72px'];
+        const allOptions = [
+            ...headings,
+            { label: '---', value: '---' },
+            ...sizes.map(s => ({ label: s, value: s })),
+        ];
+        return this.createBubblePanel({
+            name: 'fontSize',
+            title: _fs.fontSize,
+            triggerLabel: '16px',
+            hasCustomInput: true,
+            inputType: 'number',
+            inputPlaceholder: _fs.writeSize,
+            options: allOptions,
+            renderOption: (opt, btn) => {
+                if (opt.value === '---') {
+                    btn.className = 'co-rte-bubble__panel-sep';
+                    btn.disabled = true;
+                    btn.style.pointerEvents = 'none';
+                    return;
+                }
+                if (opt.value === 'h1') {
+                    btn.textContent = opt.label;
+                    btn.style.fontSize = '24px';
+                    btn.style.fontWeight = '700';
+                    btn.style.padding = '6px 8px';
+                }
+                else if (opt.value === 'h2') {
+                    btn.textContent = opt.label;
+                    btn.style.fontSize = '18px';
+                    btn.style.fontWeight = '700';
+                    btn.style.padding = '5px 8px';
+                }
+                else if (opt.value === 'h3') {
+                    btn.textContent = opt.label;
+                    btn.style.fontSize = '15px';
+                    btn.style.fontWeight = '700';
+                    btn.style.padding = '4px 8px';
+                }
+                else {
+                    btn.textContent = opt.label;
+                    const px = parseInt(opt.value);
+                    btn.style.fontSize = `${Math.min(px, 36)}px`;
+                    btn.style.lineHeight = '1.3';
+                }
+            },
+            onSelect: (val) => {
+                if (!this.editor || val === '---')
+                    return;
+                const chain = this.editor.chain().focus();
+                if (val === 'h1')
+                    chain.toggleHeading({ level: 1 }).run();
+                else if (val === 'h2')
+                    chain.toggleHeading({ level: 2 }).run();
+                else if (val === 'h3')
+                    chain.toggleHeading({ level: 3 }).run();
+                else
+                    chain.setFontSize(val).run();
+            },
+            onCustomInput: (val) => {
+                if (!this.editor)
+                    return;
+                const num = parseInt(val);
+                if (num > 0)
+                    this.editor.chain().focus().setFontSize(`${num}px`).run();
+            },
+        });
+    }
+    /** Font weight panel with two-column layout and visual preview. */
+    createBubbleFontWeightPanel() {
+        const weights = [
+            { label: 'Thin', value: '100' },
+            { label: 'Extra Light', value: '200' },
+            { label: 'Light', value: '300' },
+            { label: 'Regular', value: '400' },
+            { label: 'Medium', value: '500' },
+            { label: 'Semi Bold', value: '600' },
+            { label: 'Bold', value: '700' },
+            { label: 'Extra Bold', value: '800' },
+            { label: 'Black', value: '900' },
+        ];
+        return this.createBubblePanel({
+            name: 'fontWeight',
+            title: getRichTextStrings(this.locale).fontWeight,
+            triggerLabel: 'Regular',
+            hasCustomInput: false,
+            options: weights,
+            renderOption: (opt, btn) => {
+                btn.style.fontWeight = opt.value;
+                btn.innerHTML = `<span class="co-rte-bubble__panel-opt-row"><span>${opt.label}</span><span class="co-rte-bubble__panel-opt-value">${opt.value}</span></span>`;
+            },
+            onSelect: (val) => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setFontWeight(val).run();
+            },
+        });
+    }
+    /** Line height panel with custom input. */
+    createBubbleLineHeightPanel() {
+        const options = [
+            { label: '0.5', value: '0.5' },
+            { label: '1', value: '1' },
+            { label: '1.15', value: '1.15' },
+            { label: '1.5', value: '1.5' },
+            { label: '1.75', value: '1.75' },
+            { label: '2', value: '2' },
+            { label: '2.5', value: '2.5' },
+            { label: '3', value: '3' },
+            { label: '---', value: '---' },
+            { label: '16px', value: '16px' },
+            { label: '20px', value: '20px' },
+            { label: '24px', value: '24px' },
+            { label: '32px', value: '32px' },
+            { label: '---', value: '---2' },
+            { label: '100%', value: '100%' },
+            { label: '150%', value: '150%' },
+            { label: '200%', value: '200%' },
+        ];
+        const { panelEl } = this.createBubblePanel({
+            name: 'lineHeight',
+            title: getRichTextStrings(this.locale).lineSpacing,
+            triggerLabel: '1.5',
+            hasCustomInput: true,
+            inputPlaceholder: '1.5, 20px, 150%...',
+            options,
+            renderOption: (opt, btn) => {
+                if (opt.value.startsWith('---')) {
+                    btn.className = 'co-rte-bubble__panel-sep';
+                    btn.disabled = true;
+                    btn.style.pointerEvents = 'none';
+                    return;
+                }
+                btn.textContent = opt.label;
+            },
+            onSelect: (val) => {
+                if (!this.editor || val.startsWith('---'))
+                    return;
+                this.editor.chain().focus().setLineHeight(val).run();
+            },
+            onCustomInput: (val) => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setLineHeight(val).run();
+            },
+        });
+        return panelEl;
+    }
+    /** Letter spacing panel with custom input. */
+    createBubbleLetterSpacingPanel() {
+        const options = [
+            { label: '-0.05em', value: '-0.05em' },
+            { label: 'Normal', value: 'normal' },
+            { label: '0.05em', value: '0.05em' },
+            { label: '0.1em', value: '0.1em' },
+            { label: '0.2em', value: '0.2em' },
+        ];
+        const { panelEl } = this.createBubblePanel({
+            name: 'letterSpacing',
+            title: getRichTextStrings(this.locale).letterSpacing,
+            triggerLabel: getRichTextStrings(this.locale).normal,
+            hasCustomInput: true,
+            inputPlaceholder: 'Custom (em)...',
+            options,
+            onSelect: (val) => {
+                if (!this.editor)
+                    return;
+                if (val === 'normal')
+                    this.editor.chain().focus().unsetLetterSpacing().run();
+                else
+                    this.editor.chain().focus().setLetterSpacing(val).run();
+            },
+            onCustomInput: (val) => {
+                if (!this.editor)
+                    return;
+                const v = val.includes('em') || val.includes('px') ? val : `${val}em`;
+                this.editor.chain().focus().setLetterSpacing(v).run();
+            },
+        });
+        return panelEl;
+    }
+    /** Background color panel for overflow menu. */
+    createBubbleBgColorPanel() {
+        const bgColorWrap = this.createBubbleColorPicker('bgColor', (color) => {
+            if (!this.editor)
+                return;
+            this.editor.chain().focus().toggleHighlight({ color }).run();
+        });
+        // Hide the trigger button — bg color is only opened from the overflow menu.
+        const triggerBtn = bgColorWrap.querySelector('.co-rte-bubble__btn');
+        if (triggerBtn)
+            triggerBtn.style.display = 'none';
+        return bgColorWrap;
+    }
+    /** Overflow menu (three-dots ⋮) with dynamic table context section. */
+    createBubbleOverflowMenu(panels) {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__overflow';
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'co-rte-bubble__btn';
+        const _os = getRichTextStrings(this.locale);
+        btn.title = _os.moreOptions;
+        btn.setAttribute('aria-label', _os.moreOptions);
+        btn.innerHTML = `<co-icon name="dots-three" size="16"></co-icon>`;
+        const menu = document.createElement('div');
+        menu.className = 'co-rte-bubble__overflow-menu';
+        menu.style.display = 'none';
+        const { resetDrag: resetOverflowDrag } = this.addDragHeader(menu, _os.moreOptions);
+        // Prevent focus loss
+        menu.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        const items = [
+            { icon: 'text-strikethrough', label: _os.strikethrough, action: 'strike', check: 'strike', type: 'toggle' },
+            { icon: 'highlighter', label: _os.backgroundColor, action: 'bgColor', type: 'panel', panel: panels.bgColor },
+            { icon: 'list-bullets', label: _os.bulletList, action: 'bulletList', check: 'bulletList', type: 'toggle' },
+            { icon: 'list-numbers', label: _os.orderedList, action: 'orderedList', check: 'orderedList', type: 'toggle' },
+            { icon: 'text-superscript', label: _os.superscript, action: 'superscript', check: 'superscript', type: 'toggle' },
+            { icon: 'text-subscript', label: _os.subscript, action: 'subscript', check: 'subscript', type: 'toggle' },
+            { icon: 'line-segments', label: _os.lineSpacing, action: 'lineHeight', type: 'panel', panel: panels.lineHeight, valueAttr: 'lineHeight' },
+            { icon: 'text-aa', label: _os.letterSpacing, action: 'letterSpacing', type: 'panel', panel: panels.letterSpacing, valueAttr: 'letterSpacing' },
+            { icon: 'minus', label: _os.horizontalRule, action: 'horizontalRule', type: 'toggle' },
+            { icon: 'eraser', label: _os.clearFormat, action: 'clearFormat', type: 'toggle' },
+        ];
+        items.forEach((item) => {
+            if (item.action === 'lineHeight' || item.action === 'horizontalRule') {
+                const sep = document.createElement('div');
+                sep.className = 'co-rte-bubble__overflow-sep';
+                menu.appendChild(sep);
+            }
+            const itemBtn = document.createElement('button');
+            itemBtn.type = 'button';
+            itemBtn.className = 'co-rte-bubble__overflow-item';
+            itemBtn.setAttribute('data-overflow-item', item.action);
+            if (item.check)
+                itemBtn.setAttribute('data-check', item.check);
+            let valueSpan = '';
+            if (item.valueAttr) {
+                valueSpan = `<span class="co-rte-bubble__overflow-value" data-overflow-value="${item.valueAttr}"></span>`;
+            }
+            itemBtn.innerHTML = `<co-icon name="${item.icon}" size="16"></co-icon><span>${item.label}</span>${valueSpan}`;
+            itemBtn.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                if (item.type === 'panel' && item.panel) {
+                    if (item.action === 'bgColor') {
+                        const dd = item.panel.querySelector('.co-rte-bubble__color-dropdown');
+                        if (dd) {
+                            const isOpen = dd.style.display !== 'none';
+                            this.closeAllBubblePopups(menu, isOpen ? undefined : dd);
+                            dd.style.display = isOpen ? 'none' : 'block';
+                            if (!isOpen)
+                                this.positionPanelNearBubble(dd);
+                        }
+                    }
+                    else {
+                        const isOpen = item.panel.style.display !== 'none';
+                        this.closeAllBubblePopups(menu, isOpen ? undefined : item.panel);
+                        item.panel.style.display = isOpen ? 'none' : 'block';
+                        if (!isOpen)
+                            this.positionPanelNearBubble(item.panel);
+                    }
+                    return;
+                }
+                const chain = this.editor.chain().focus();
+                switch (item.action) {
+                    case 'strike':
+                        chain.toggleStrike().run();
+                        break;
+                    case 'bulletList':
+                        chain.toggleBulletList().run();
+                        break;
+                    case 'orderedList':
+                        chain.toggleOrderedList().run();
+                        break;
+                    case 'superscript':
+                        chain.toggleSuperscript().run();
+                        break;
+                    case 'subscript':
+                        chain.toggleSubscript().run();
+                        break;
+                    case 'horizontalRule':
+                        chain.setHorizontalRule().run();
+                        menu.style.display = 'none';
+                        break;
+                    case 'clearFormat':
+                        chain.unsetAllMarks().clearNodes().run();
+                        menu.style.display = 'none';
+                        break;
+                }
+            });
+            menu.appendChild(itemBtn);
+        });
+        // ── Table context section (hidden by default, shown when cursor is in a table) ──
+        const tableSection = document.createElement('div');
+        tableSection.className = 'co-rte-bubble__overflow-table-section';
+        tableSection.style.display = 'none';
+        const tableSep = document.createElement('div');
+        tableSep.className = 'co-rte-bubble__overflow-sep';
+        tableSection.appendChild(tableSep);
+        const tableHeader = document.createElement('div');
+        tableHeader.className = 'co-rte-bubble__overflow-section-title';
+        tableHeader.textContent = _os.tableOptions;
+        tableSection.appendChild(tableHeader);
+        const tableItems = [
+            { action: 'addColumnBefore', icon: 'columns-plus-left', label: _os.addColumnBefore },
+            { action: 'addColumnAfter', icon: 'columns-plus-right', label: _os.addColumnAfter },
+            { action: 'addRowBefore', icon: 'rows-plus-top', label: _os.addRowAbove },
+            { action: 'addRowAfter', icon: 'rows-plus-bottom', label: _os.addRowBelow },
+            { action: 'mergeCells', icon: 'arrows-merge', label: _os.mergeCells },
+            { action: 'splitCell', icon: 'arrows-split', label: _os.splitCell },
+            { action: 'toggleHeaderRow', icon: 'rows', label: _os.headerRow },
+        ];
+        tableItems.forEach(({ action, icon, label }) => {
+            const tBtn = document.createElement('button');
+            tBtn.type = 'button';
+            tBtn.className = 'co-rte-bubble__overflow-item';
+            tBtn.setAttribute('data-overflow-item', action);
+            if (action === 'toggleHeaderRow')
+                tBtn.setAttribute('data-check', 'toggleHeaderRow');
+            tBtn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon><span>${label}</span>`;
+            tBtn.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                const chain = this.editor.chain().focus();
+                switch (action) {
+                    case 'addColumnAfter':
+                        chain.addColumnAfter().run();
+                        break;
+                    case 'addColumnBefore':
+                        chain.addColumnBefore().run();
+                        break;
+                    case 'addRowAfter':
+                        chain.addRowAfter().run();
+                        break;
+                    case 'addRowBefore':
+                        chain.addRowBefore().run();
+                        break;
+                    case 'mergeCells':
+                        chain.mergeCells().run();
+                        break;
+                    case 'splitCell':
+                        chain.splitCell().run();
+                        break;
+                    case 'toggleHeaderRow':
+                        chain.toggleHeaderRow().run();
+                        break;
+                }
+            });
+            tableSection.appendChild(tBtn);
+        });
+        // Danger items (delete column, row, table)
+        const dangerSep = document.createElement('div');
+        dangerSep.className = 'co-rte-bubble__overflow-sep';
+        tableSection.appendChild(dangerSep);
+        const dangerItems = [
+            { action: 'deleteColumn', icon: 'minus-square', label: _os.deleteColumn },
+            { action: 'deleteRow', icon: 'x-square', label: _os.deleteRow },
+            { action: 'deleteTable', icon: 'trash', label: _os.deleteTable },
+        ];
+        dangerItems.forEach(({ action, icon, label }) => {
+            const dBtn = document.createElement('button');
+            dBtn.type = 'button';
+            dBtn.className = 'co-rte-bubble__overflow-item co-rte-bubble__overflow-item--danger';
+            dBtn.setAttribute('data-overflow-item', action);
+            dBtn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon><span>${label}</span>`;
+            dBtn.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                const chain = this.editor.chain().focus();
+                switch (action) {
+                    case 'deleteColumn':
+                        chain.deleteColumn().run();
+                        break;
+                    case 'deleteRow':
+                        chain.deleteRow().run();
+                        break;
+                    case 'deleteTable':
+                        chain.deleteTable().run();
+                        menu.style.display = 'none';
+                        break;
+                }
+            });
+            tableSection.appendChild(dBtn);
+        });
+        menu.appendChild(tableSection);
+        btn.addEventListener('click', () => {
+            this.closeAllBubblePopups(menu);
+            const isOpen = menu.style.display !== 'none';
+            if (isOpen) {
+                menu.style.display = 'none';
+            }
+            else {
+                resetOverflowDrag();
+                menu.style.position = '';
+                menu.style.top = '';
+                menu.style.left = '';
+                menu.style.bottom = '';
+                menu.style.right = '';
+                menu.style.transform = '';
+                menu.style.display = 'block';
+                this.positionDropdown(btn, menu);
+            }
+        });
+        wrap.appendChild(btn);
+        wrap.appendChild(menu);
+        return { overflowWrap: wrap, overflowMenu: menu };
+    }
+    toggleBubbleLinkForm(show) {
+        var _a, _b;
+        if (!this.bubbleLinkFormEl || !this.bubbleLinkInputEl)
+            return;
+        this.bubbleLinkFormEl.style.display = show ? 'flex' : 'none';
+        if (show) {
+            const existing = ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive('link'))
+                ? ((_b = this.editor.getAttributes('link')) === null || _b === void 0 ? void 0 : _b.href) || ''
+                : '';
+            this.bubbleLinkInputEl.value = existing;
+            if (this.bubbleLinkUnlinkEl) {
+                this.bubbleLinkUnlinkEl.style.display = existing ? 'flex' : 'none';
+            }
+            setTimeout(() => { var _a; return (_a = this.bubbleLinkInputEl) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+        }
+    }
+    submitBubbleLinkImperative() {
+        if (!this.editor || !this.bubbleLinkInputEl)
+            return;
+        const url = this.bubbleLinkInputEl.value.trim();
+        if (!url) {
+            this.toggleBubbleLinkForm(false);
+            return;
+        }
+        this.editor.chain().focus().setLink({ href: url }).run();
+        this.toggleBubbleLinkForm(false);
+    }
+    updateBubbleActiveStates() {
+        if (!this.editor || !this.bubbleEl)
+            return;
+        // Toggle buttons (bold, italic, etc.)
+        const btns = this.bubbleEl.querySelectorAll('.co-rte-bubble__btn[data-check]');
+        btns.forEach(btn => {
+            const check = btn.getAttribute('data-check');
+            if (check) {
+                btn.classList.toggle('co-rte-bubble__btn--active', this.editor.isActive(check));
+            }
+        });
+        // Alignment buttons
+        const alignBtns = this.bubbleEl.querySelectorAll('.co-rte-bubble__btn[data-align]');
+        alignBtns.forEach(btn => {
+            const align = btn.getAttribute('data-align');
+            if (align) {
+                btn.classList.toggle('co-rte-bubble__btn--active', this.editor.isActive({ textAlign: align }));
+            }
+        });
+        // Font family label
+        const ffLabel = this.bubbleEl.querySelector('[data-select="fontFamily"] .co-rte-bubble__select-label');
+        if (ffLabel) {
+            const attrs = this.editor.getAttributes('textStyle');
+            const family = (attrs === null || attrs === void 0 ? void 0 : attrs.fontFamily) || '';
+            ffLabel.textContent = family ? family.split(',')[0].replace(/['"]/g, '').trim() : 'Sans-serif';
+        }
+        // Font size label (panel trigger)
+        const fsTrigger = this.bubbleEl.querySelector('[data-select="fontSize"] .co-rte-bubble__select-label');
+        if (fsTrigger) {
+            const attrs = this.editor.getAttributes('textStyle');
+            const _us = getRichTextStrings(this.locale);
+            if (this.editor.isActive('heading', { level: 1 }))
+                fsTrigger.textContent = _us.title;
+            else if (this.editor.isActive('heading', { level: 2 }))
+                fsTrigger.textContent = _us.headingAbbr1;
+            else if (this.editor.isActive('heading', { level: 3 }))
+                fsTrigger.textContent = _us.headingAbbr2;
+            else
+                fsTrigger.textContent = (attrs === null || attrs === void 0 ? void 0 : attrs.fontSize) || '16px';
+        }
+        // Font weight label (panel trigger)
+        const fwTrigger = this.bubbleEl.querySelector('[data-select="fontWeight"] .co-rte-bubble__select-label');
+        if (fwTrigger) {
+            const attrs = this.editor.getAttributes('textStyle');
+            const w = (attrs === null || attrs === void 0 ? void 0 : attrs.fontWeight) || '400';
+            const wMap = { '100': 'Thin', '200': 'Extra Light', '300': 'Light', '400': 'Regular', '500': 'Medium', '600': 'Semi-bold', '700': 'Bold', '800': 'Extra-bold', '900': 'Black' };
+            fwTrigger.textContent = wMap[w] || 'Regular';
+        }
+        // Overflow menu items active states
+        const overflowItems = this.bubbleEl.querySelectorAll('.co-rte-bubble__overflow-item[data-check]');
+        overflowItems.forEach(item => {
+            const check = item.getAttribute('data-check');
+            if (check) {
+                item.classList.toggle('co-rte-bubble__overflow-item--active', this.editor.isActive(check));
+            }
+        });
+        // Line height value in overflow (lineHeight is a block-level attribute on paragraph/heading)
+        const lhValue = this.bubbleEl.querySelector('[data-overflow-value="lineHeight"]');
+        if (lhValue) {
+            const pAttrs = this.editor.getAttributes('paragraph');
+            const hAttrs = this.editor.getAttributes('heading');
+            lhValue.textContent = (pAttrs === null || pAttrs === void 0 ? void 0 : pAttrs.lineHeight) || (hAttrs === null || hAttrs === void 0 ? void 0 : hAttrs.lineHeight) || '';
+        }
+        // Letter spacing value in overflow
+        const lsValue = this.bubbleEl.querySelector('[data-overflow-value="letterSpacing"]');
+        if (lsValue) {
+            const attrs = this.editor.getAttributes('textStyle');
+            lsValue.textContent = (attrs === null || attrs === void 0 ? void 0 : attrs.letterSpacing) || '';
+        }
+        // Text color indicator bar
+        const colorBar = this.bubbleEl.querySelector('.co-rte-bubble__color-bar');
+        if (colorBar) {
+            const attrs = this.editor.getAttributes('textStyle');
+            colorBar.style.background = (attrs === null || attrs === void 0 ? void 0 : attrs.color) || '#000000';
+        }
+        // Table context section — show/hide based on cursor position
+        const tableSection = this.bubbleEl.querySelector('.co-rte-bubble__overflow-table-section');
+        if (tableSection) {
+            const inTable = this.editor.isActive('table');
+            tableSection.style.display = inTable ? 'block' : 'none';
+            // Toggle header row active state
+            if (inTable) {
+                const headerBtn = tableSection.querySelector('[data-overflow-item="toggleHeaderRow"]');
+                if (headerBtn) {
+                    const view = this.editor.view;
+                    const { $anchor } = this.editor.state.selection;
+                    let d = $anchor.depth;
+                    let hasHeader = false;
+                    while (d > 0) {
+                        if ($anchor.node(d).type.name === 'table') {
+                            const domEl = view.nodeDOM($anchor.start(d) - 1);
+                            if (domEl) {
+                                const tbl = domEl.querySelector('table') || domEl;
+                                const firstRow = tbl.querySelector('tr');
+                                hasHeader = firstRow ? firstRow.querySelector('th') !== null : false;
+                            }
+                            break;
+                        }
+                        d--;
+                    }
+                    headerBtn.classList.toggle('co-rte-bubble__overflow-item--active', hasHeader);
+                }
+            }
+        }
+    }
+    createImageLayoutBar() {
+        const bar = document.createElement('div');
+        bar.className = 'co-rte-img-layout';
+        bar.style.display = 'none';
+        bar.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        const s = getRichTextStrings(this.locale);
+        const labels = {
+            'inline': s.imageLayoutInline,
+            'wrap-left': s.imageLayoutWrapLeft,
+            'wrap-right': s.imageLayoutWrapRight,
+            'center': s.imageLayoutCenter,
+            'full-width': s.imageLayoutFullWidth,
+        };
+        const keys = ['inline', 'wrap-left', 'wrap-right', 'center', 'full-width'];
+        keys.forEach(key => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'co-rte-img-layout__btn';
+            btn.setAttribute('data-layout', key);
+            // Fast CSS tooltip (avoids the slow native `title` delay).
+            btn.setAttribute('data-tooltip', labels[key] || key);
+            btn.setAttribute('aria-label', labels[key] || key);
+            btn.innerHTML = `<co-icon name="${CoRichTextEditor.IMG_LAYOUT_ICONS[key]}" size="18"></co-icon>`;
+            btn.addEventListener('click', () => this.setImageLayout(key));
+            bar.appendChild(btn);
+        });
+        return bar;
+    }
+    setImageLayout(layout) {
+        if (!this.editor || !this.contentEl)
+            return;
+        const { state } = this.editor;
+        const sel = state.selection;
+        if (sel.constructor.name !== 'NodeSelection')
+            return;
+        const node = sel.node;
+        if ((node === null || node === void 0 ? void 0 : node.type.name) !== 'image')
+            return;
+        const pos = sel.from;
+        const tr = state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { imageLayout: layout }));
+        this.editor.view.dispatch(tr);
+        this.editor.commands.setNodeSelection(pos);
+        requestAnimationFrame(() => {
+            this.syncImageLayouts();
+            this.updateImageLayoutBar();
+        });
+    }
+    getSelectedImageInfo() {
+        var _a;
+        if (!this.editor)
+            return null;
+        const { state } = this.editor;
+        const sel = state.selection;
+        if (sel.constructor.name !== 'NodeSelection')
+            return null;
+        const node = sel.node;
+        if ((node === null || node === void 0 ? void 0 : node.type.name) !== 'image')
+            return null;
+        const pos = sel.from;
+        const domNode = this.editor.view.nodeDOM(pos);
+        if (!domNode)
+            return null;
+        const container = (((_a = domNode.closest) === null || _a === void 0 ? void 0 : _a.call(domNode, '[data-resize-container]')) || domNode);
+        return { node, pos, container };
+    }
+    /**
+     * Tag every image container with its layout mode (`data-image-layout`) so the
+     * stylesheet's responsive rules apply, and clear any stray inline positioning
+     * left over from legacy absolute-positioned content. Layout is CSS-only now
+     * (it reflows and collapses on mobile); we only set the attribute here.
+     *
+     * Runs on every transaction. The resize NodeView's `onUpdate` returns `true`,
+     * so ProseMirror never reflects attribute changes to the DOM — we must read
+     * from state and write the attribute imperatively to the container.
+     */
+    syncImageLayouts() {
+        if (!this.editor)
+            return;
+        const view = this.editor.view;
+        this.editor.state.doc.descendants((node, pos) => {
+            var _a;
+            if (node.type.name !== 'image')
+                return true;
+            const dom = view.nodeDOM(pos);
+            const c = (((_a = dom === null || dom === void 0 ? void 0 : dom.closest) === null || _a === void 0 ? void 0 : _a.call(dom, '[data-resize-container]')) || dom);
+            if (!c)
+                return true;
+            c.dataset.imageLayout = node.attrs.imageLayout || 'inline';
+            // Neutralise any absolute positioning baked by the old fixed-page model.
+            c.style.position = '';
+            c.style.left = '';
+            c.style.top = '';
+            c.style.zIndex = '';
+            return true;
+        });
+    }
+    /** Reposition only the layout bar (used during drag for performance). */
+    updateImageLayoutBarPosition() {
+        if (!this.imgLayoutEl || !this.contentEl)
+            return;
+        const info = this.getSelectedImageInfo();
+        if (!info)
+            return;
+        const containerRect = info.container.getBoundingClientRect();
+        const contentRect = this.contentEl.getBoundingClientRect();
+        const barWidth = this.imgLayoutEl.offsetWidth || 194;
+        let leftPos = (containerRect.left + containerRect.width / 2) - contentRect.left + this.contentEl.scrollLeft - barWidth / 2;
+        leftPos = Math.max(4, Math.min(leftPos, contentRect.width - barWidth - 4));
+        const topPos = containerRect.bottom - contentRect.top + this.contentEl.scrollTop + 8;
+        this.imgLayoutEl.style.left = `${leftPos}px`;
+        this.imgLayoutEl.style.top = `${topPos}px`;
+    }
+    updateImageLayoutBar() {
+        if (!this.imgLayoutEl || !this.editor)
+            return;
+        const info = this.getSelectedImageInfo();
+        if (!info) {
+            if (this.imgLayoutVisible) {
+                this.imgLayoutEl.style.display = 'none';
+                this.imgLayoutVisible = false;
+            }
+            return;
+        }
+        this.imgLayoutEl.style.display = 'flex';
+        this.imgLayoutVisible = true;
+        this.updateImageLayoutBarPosition();
+        const currentLayout = info.node.attrs.imageLayout || 'inline';
+        this.imgLayoutEl.querySelectorAll('.co-rte-img-layout__btn').forEach(btn => {
+            btn.classList.toggle('co-rte-img-layout__btn--active', btn.getAttribute('data-layout') === currentLayout);
+        });
+    }
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: 'c853d865716114025949e33e011394d824e4a961', class: {
+        return (h("div", { key: 'd24b8e5db1151bcd983790ea15f68aaf4838ff43', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
                 'co-rich-text-editor--readonly': this.readonly,
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '049a14875b801e745c91f28410474d8139a366e6', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '4221652dd84a86192d84ba8889eafbd311ac27dd', class: "co-rich-text-editor__label", part: "label" }, this.label, h(RequiredMark, { key: '6576f8bdd8c744f6f4fd2990e3c3b58806a03bd4', required: this.required })), this.secondaryLabel && (h("span", { key: '5c28820cf466f06900ae3981b780f6664a14ca08', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '94557b815f4dd9bfd33f2d4ae613554a54a391ad', class: "co-rich-text-editor__box" }, showToolbar && (h("co-rich-text-toolbar", { key: '7727dc54776263c3ef56f274e09d7d851df245d8', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'd81af8d3887e1f77062eb64efe02cda157f77216', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) })), h("div", { key: 'f747db5469b5a805e88101cb7670432dc114c30f', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '80c703179448310e86a16e908cc29edfc73260ba', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '7411c41c32e7c1845983df2608f604f764585230', name: this.helperIcon, size: 14 }), h("span", { key: 'be108ca9544684e2d6d0dbf68eca65d11f3c841b' }, this.helperText))), showCount && (h("span", { key: '5c88aeb55460778024664510a58ca9d331ef10c7', class: "co-rich-text-editor__count" }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '1622079a94d8ebb190642f91463b715f3456fcf4', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'bb5c0754a63d46d45ce8f211ae0f0e8c4ddbc478', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '1af0a217a38746c3a78693c552be44df6d03b276', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e5ad90dd90061be3e40136eece0f485e5cfb89a1', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '56f3da29e9259cd37fdf6e7511dc54efb30085ca', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'bb0dc27e8625171284cae02b5cae28dcbe638991', class: "co-rich-text-editor__box" }, h("div", { key: '647563e73112023ec546418787dbf61acb58853d', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: '460dad69fd1781f11d751565d0ca09015013e8ce', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '69d8fb55797eb8f35885fa10e86cf08e4d0e45ec', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'd1c3cc4f06284b865c889dac7492305a4b7d8dfd', name: this.helperIcon, size: 14 }), h("span", { key: '361940f354fcee5a309cd2ef5cff84b73689650e' }, this.helperText))), showCount && (h("span", { key: '2b5a1b6e04ba3d428346034d092bf83978de0124', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "accountFonts": [{
+                "onAccountFontsChange": 0
+            }],
         "value": [{
                 "onValueChange": 0
             }],
@@ -228,6 +2042,38 @@ const CoRichTextEditor = class {
             }]
     }; }
 };
+CoRichTextEditor.DEFAULT_FONTS = [
+    { label: 'Arial', value: 'Arial, sans-serif' },
+    { label: 'Calibri', value: 'Calibri, sans-serif' },
+    { label: 'Cambria', value: 'Cambria, serif' },
+    { label: 'Comic Sans MS', value: "'Comic Sans MS', cursive" },
+    { label: 'Courier New', value: "'Courier New', monospace" },
+    { label: 'Georgia', value: 'Georgia, serif' },
+    { label: 'Geist', value: "'Geist', sans-serif" },
+    { label: 'Helvetica', value: 'Helvetica, Arial, sans-serif' },
+    { label: 'Impact', value: 'Impact, sans-serif' },
+    { label: 'Inter', value: "'Inter', sans-serif" },
+    { label: 'Lato', value: "'Lato', sans-serif" },
+    { label: 'Montserrat', value: "'Montserrat', sans-serif" },
+    { label: 'Open Sans', value: "'Open Sans', sans-serif" },
+    { label: 'Poppins', value: "'Poppins', sans-serif" },
+    { label: 'Roboto', value: "'Roboto', sans-serif" },
+    { label: 'Segoe UI', value: "'Segoe UI', sans-serif" },
+    { label: 'Tahoma', value: 'Tahoma, sans-serif' },
+    { label: 'Times New Roman', value: "'Times New Roman', serif" },
+    { label: 'Trebuchet MS', value: "'Trebuchet MS', sans-serif" },
+    { label: 'Verdana', value: 'Verdana, sans-serif' },
+];
+/** Register a font via FontFace API so it can be previewed. */
+CoRichTextEditor._registeredFonts = new Set();
+/* ── Image layout bar (Google-Docs-style toolbar below selected image) ── */
+CoRichTextEditor.IMG_LAYOUT_ICONS = {
+    'inline': 'image-square',
+    'wrap-left': 'text-align-left',
+    'wrap-right': 'text-align-right',
+    'center': 'text-align-center',
+    'full-width': 'arrows-horizontal',
+};
 CoRichTextEditor.style = coRichTextEditorCss();
 
 export { CoRichTextEditor as co_rich_text_editor };