@aquera/nile-elements 1.9.8 → 1.9.9

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.js

@@ -5,13 +5,15 @@ import { EditorView } from 'prosemirror-view';
 import { TextSelection } from 'prosemirror-state';
 import NileElement from '../internal/nile-element';
 import { styles } from './nile-wysiwyg-editor.css';
-import { defaultSchema, createEditorState, computeToolbarState, htmlToDoc, htmlToSlice, docToHtml, docToText, docToMarkdown, markdownToHtml, docToJson, jsonToDoc, isDocEmpty, sanitizeHtml, getCommand, getMarkRange, flattenToSingleParagraph, imageUploadKey, findUploadPos, countWords, TaskItemView, ImageView, FigureView, EmbedView, MathView, isOfficeHtml, cleanOfficeHtml, toInlineStyledHtml, buildWordDocument, buildPrintDocument, isFormatPainterArmed, armFormatPainter, disarmFormatPainter, applyFormatPainter, getFindState, searchTr, findStepTr, clearFindTr, replaceActiveTr, replaceAllTr, } from './engine';
+import { defaultSchema, createEditorState, computeToolbarState, htmlToDoc, htmlToSlice, docToHtml, docToText, docToMarkdown, markdownToHtml, docToJson, jsonToDoc, isDocEmpty, sanitizeHtml, getCommand, getMarkRange, flattenToSingleParagraph, imageUploadKey, findUploadPos, countWords, TaskItemView, ImageView, FigureView, EmbedView, StyleBlockView, MathView, isOfficeHtml, cleanOfficeHtml, toInlineStyledHtml, buildWordDocument, buildPrintDocument, isFormatPainterArmed, armFormatPainter, disarmFormatPainter, applyFormatPainter, getFindState, searchTr, findStepTr, clearFindTr, replaceActiveTr, replaceAllTr, } from './engine';
 import { selectedImageInfo } from './engine/commands';
 import { DEFAULT_TOOLBAR } from './types';
 import { EMOJI } from './emoji';
 import './nile-wysiwyg-toolbar/nile-wysiwyg-toolbar';
+import './nile-wysiwyg-toolbar/nile-wysiwyg-toolbar-item';
 import './ui/link-editor';
 import './ui/bubble-menu';
+import './ui/bubble-item';
 import './ui/image-panel';
 import './ui/table-menu';
 import './ui/suggest-list';
@@ -165,6 +167,32 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         this.pendingChange = false;
         /** Body overflow value before fullscreen locked it; null = not locked. */
         this.previousBodyOverflow = null;
+        /**
+         * True while a drag-selection is in progress with the format painter armed.
+         * Suppresses the mid-drag auto-apply in {@link handleTransaction} so the
+         * copied formatting lands on the final, complete selection (on mouse-up).
+         */
+        this.painterDragActive = false;
+        this.onPainterPointerDown = () => {
+            if (this.view && isFormatPainterArmed(this.view.state)) {
+                this.painterDragActive = true;
+            }
+        };
+        this.onPainterPointerUp = () => {
+            if (!this.painterDragActive)
+                return;
+            this.painterDragActive = false;
+            // Defer a frame so ProseMirror has synced the final DOM selection.
+            requestAnimationFrame(() => {
+                if (!this.view)
+                    return;
+                if (this.view.state.selection.empty || !isFormatPainterArmed(this.view.state))
+                    return;
+                const applyTr = applyFormatPainter(this.view.state);
+                if (applyTr)
+                    this.view.dispatch(applyTr);
+            });
+        };
         /**
          * Closes any open insert panel when the pointer goes down outside of it —
          * whether elsewhere in the editor (e.g. the content area) or off the widget.
@@ -193,10 +221,32 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         }
         // Close floating panels when the user clicks anywhere outside them.
         document.addEventListener('pointerdown', this.onOutsidePointerDown, true);
+        // Format painter applies on pointer release so a drag-selection is painted
+        // whole, not on the first mid-drag selection change.
+        document.addEventListener('mouseup', this.onPainterPointerUp);
+        // Discover an author-supplied toolbar / bubble menu (light-DOM
+        // <nile-wysiwyg-toolbar-item> / <nile-wysiwyg-bubble-item> children) and
+        // keep them in sync as they change.
+        this.syncAuthoredToolbar();
+        this.syncAuthoredBubble();
+        if (!this.toolbarObserver) {
+            this.toolbarObserver = new MutationObserver(() => {
+                this.syncAuthoredToolbar();
+                this.syncAuthoredBubble();
+            });
+        }
+        this.toolbarObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['name', 'label', 'icon', 'divider', 'overflow'],
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onOutsidePointerDown, true);
+        document.removeEventListener('mouseup', this.onPainterPointerUp);
+        this.toolbarObserver?.disconnect();
         if (this.changeTimer)
             clearTimeout(this.changeTimer);
         if (this.autosaveTimer)
@@ -210,8 +260,54 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
     }
     firstUpdated() {
         this.defaultValue = this.value;
+        // Re-read now that light-DOM children are guaranteed parsed (the initial
+        // connectedCallback read can run mid-parse before children exist).
+        this.syncAuthoredToolbar();
+        this.syncAuthoredBubble();
         this.mountView();
     }
+    /**
+     * Reads `<nile-wysiwyg-toolbar-item>` children into a structured toolbar and
+     * stores it on {@link authoredToolbar}. Absent items clear the override
+     * (falling back to the `toolbar` string). No-ops when nothing changed to
+     * avoid needless re-renders.
+     */
+    syncAuthoredToolbar() {
+        const nodes = this.querySelectorAll('nile-wysiwyg-toolbar-item');
+        const next = nodes.length
+            ? Array.from(nodes)
+                .map(el => ({
+                name: el.hasAttribute('divider') ? '|' : el.getAttribute('name') || '',
+                label: el.getAttribute('label') || undefined,
+                icon: el.getAttribute('icon') || undefined,
+                overflow: el.hasAttribute('overflow') || undefined,
+            }))
+                .filter(item => item.name)
+            : undefined;
+        if (JSON.stringify(next) !== JSON.stringify(this.authoredToolbar)) {
+            this.authoredToolbar = next;
+        }
+    }
+    /**
+     * Reads `<nile-wysiwyg-bubble-item>` children into a structured bubble-menu
+     * item list stored on {@link authoredBubble}. Absent items clear the override
+     * (falling back to the built-in default). No-ops when nothing changed.
+     */
+    syncAuthoredBubble() {
+        const nodes = this.querySelectorAll('nile-wysiwyg-bubble-item');
+        const next = nodes.length
+            ? Array.from(nodes)
+                .map(el => ({
+                name: el.hasAttribute('divider') ? '|' : el.getAttribute('name') || '',
+                label: el.getAttribute('label') || undefined,
+                icon: el.getAttribute('icon') || undefined,
+            }))
+                .filter(item => item.name)
+            : undefined;
+        if (JSON.stringify(next) !== JSON.stringify(this.authoredBubble)) {
+            this.authoredBubble = next;
+        }
+    }
     updated(changed) {
         if (changed.has('value') && this.view && !this.syncingValue) {
             const current = docToHtml(this.view.state.doc);
@@ -383,9 +479,11 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
                 image: (node, view, getPos) => new ImageView(node, view, getPos),
                 figure: (node, view, getPos) => new FigureView(node, view, getPos),
                 embed: (node, view, getPos) => new EmbedView(node, view, getPos),
+                styleBlock: node => new StyleBlockView(node),
                 math: node => new MathView(node, this.mathRenderer),
             },
         });
+        this.view.dom.addEventListener('mousedown', this.onPainterPointerDown);
         this.toolbarState = this.snapshotToolbar(this.view.state);
         this.counter = countWords(this.view.state.doc);
         this.syncFormValue(this.view.state.doc);
@@ -396,8 +494,15 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         const newState = this.view.state.apply(tr);
         this.view.updateState(newState);
         // Format painter: once armed, the next non-empty selection the user makes
-        // receives the copied formatting, then the painter disarms.
-        if (tr.selectionSet && !newState.selection.empty && isFormatPainterArmed(newState)) {
+        // receives the copied formatting, then the painter disarms. While a pointer
+        // drag is building the selection we defer to the mouse-up handler
+        // (onPainterPointerUp) so the whole range is painted, not just the first
+        // mid-drag character. Single-shot selections (double-click, Shift+End,
+        // programmatic) still apply here.
+        if (tr.selectionSet &&
+            !newState.selection.empty &&
+            isFormatPainterArmed(newState) &&
+            !this.painterDragActive) {
             const applyTr = applyFormatPainter(newState);
             if (applyTr) {
                 this.view.dispatch(applyTr);
@@ -1062,7 +1167,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
     /** Toggles raw-HTML source editing. Content re-sanitizes on the way back. */
     toggleSourceView() {
         if (this.sourceMode) {
-            this.applySourceView(this.sourceViewEl?.textarea?.value ?? null);
+            this.applySourceView(this.sourceViewEl?.currentValue ?? null);
         }
         else {
             this.sourceMode = true;
@@ -1564,7 +1669,12 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
             this.closeMarkdownPanel(refocus);
     }
     render() {
-        const showToolbar = this.toolbar !== 'none' && !this.readonly && !this.sourceMode;
+        const hasAuthoredToolbar = (this.authoredToolbar?.length ?? 0) > 0;
+        // Keep the toolbar mounted in source mode too, so the main menu stays put
+        // above the split source/preview view instead of being replaced by it. It
+        // is disabled there — formatting commands would target the hidden rich-text
+        // view — and the source view's own Cancel/Done bar handles exiting.
+        const showToolbar = (this.toolbar !== 'none' || hasAuthoredToolbar) && !this.readonly;
         return html `
       <div
         class="nile-wysiwyg ${this.showBlocks ? 'nile-wysiwyg--show-blocks' : ''}"
@@ -1577,9 +1687,10 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
             ? html `
               <nile-wysiwyg-toolbar
                 part="toolbar"
-                exportparts="button, select, color"
+                exportparts="button, select, color, overflow, overflow-panel"
                 config=${this.toolbar}
-                ?disabled=${this.disabled}
+                .items=${this.authoredToolbar}
+                ?disabled=${this.disabled || this.sourceMode}
                 .toolbarState=${this.toolbarState}
               ></nile-wysiwyg-toolbar>
             `
@@ -1624,7 +1735,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
             this.closeShortcutHelp();
         }}
         ></nile-wysiwyg-shortcut-help>
-        <nile-wysiwyg-bubble-menu></nile-wysiwyg-bubble-menu>
+        <nile-wysiwyg-bubble-menu .items=${this.authoredBubble}></nile-wysiwyg-bubble-menu>
         <nile-wysiwyg-table-menu></nile-wysiwyg-table-menu>
         <nile-wysiwyg-code-menu></nile-wysiwyg-code-menu>
         <nile-wysiwyg-image-menu></nile-wysiwyg-image-menu>
@@ -1803,6 +1914,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileWysiwygEditor.prototype, "toolbar", void 0);
+__decorate([
+    state()
+], NileWysiwygEditor.prototype, "authoredToolbar", void 0);
+__decorate([
+    state()
+], NileWysiwygEditor.prototype, "authoredBubble", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'bubble-menu' })
 ], NileWysiwygEditor.prototype, "bubbleMenu", void 0);