@sciflow/editor-start 0.0.1-beta → 0.0.2

package/dist/lib/editor-element.js

@@ -26,9 +26,10 @@
 import { __decorate } from "tslib";
 import { css, html, unsafeCSS, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { Editor, SourceField, citationFeature, figureFeature, headingFeature, markFormattingFeature, tableFeature, } from '@sciflow/editor-core';
+import { Editor, SourceField, setLocale, citationFeature, crossReferenceFeature, figureFeature, footnoteFeature, headingFeature, hyperlinkFeature, markFormattingFeature, mathFeature, paragraphFeature, tableFeature, } from '@sciflow/editor-core';
 import { manuscript as manuscriptSchema } from '@sciflow/schema-prosemirror';
 import editorStyles from './editor-element.css?inline';
+import { ghostCursorFeature } from './ghost-cursor.js';
 import { applyThemeStylesToRoot, subscribeToSciFlowTheme } from './theme.js';
 /**
  * Custom element that owns a SciFlow editor instance.
@@ -73,6 +74,25 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         this.headingText = 'Moby-Dick: A Study in Obsession';
         /** Paragraph text used when no initial content is provided. */
         this.placeholder = 'Introduce Ishmael and the enigmatic Captain Ahab…';
+        /**
+         * Max-width of the ProseMirror content area.
+         * Approximates page-like text columns at 11pt:
+         * - 'narrow': narrow column (~52 characters per line)
+         * - 'wide': normal column (~82 characters per line)
+         * Styles are applied to the shadow DOM.
+         */
+        this.editorWidth = 'wide';
+        /**
+         * UI locale for all editor components and command metadata.
+         * Setting this attribute calls `setLocale()` and triggers a
+         * `sciflow-locale-change` event so all components re-render.
+         *
+         * @example
+         * ```html
+         * <sciflow-editor locale="de"></sciflow-editor>
+         * ```
+         */
+        this.locale = null;
         this.view = null;
         this.pendingOps = [];
         this.pendingOpsFromTransform = false;
@@ -80,6 +100,7 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         this.deferInitializationForDoc = false;
         this.shadowStyleElements = [];
         this.themeStyleElements = [];
+        this._hostDragoverBound = null;
     }
     get shadowStyles() {
         return this._shadowStyles;
@@ -102,6 +123,14 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
     get document() {
         return this.editor?.getDocument() ?? null;
     }
+    /** Get the current references (bibliography) stored with the document. */
+    get references() {
+        return this.editor?.getReferences() ?? [];
+    }
+    /** Get the merged selection UI schema (Draft-07 + _ui_*), when available. */
+    getSelectionUiSchema() {
+        return this.editor?.getSelectionUiSchema?.();
+    }
     /** Get position utilities for coordinate mapping. */
     get positions() {
         return {
@@ -138,23 +167,25 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        if (this.locale) {
+            setLocale(this.locale);
+        }
+        this._hostDragoverBound = (e) => {
+            if (!e.dataTransfer?.types || !this.contains(e.target))
+                return;
+            const types = Array.from(e.dataTransfer.types);
+            const allow = types.includes('application/x-sciflow-reference') ||
+                types.includes('application/x-sciflow-cross-reference');
+            if (!allow)
+                return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+        };
+        this.addEventListener('dragover', this._hostDragoverBound, { capture: true });
         this.themeUnsub = subscribeToSciFlowTheme((cssTexts) => {
             this.themeStyleElements = applyThemeStylesToRoot(this.renderRoot, this.themeStyleElements, cssTexts);
             this.applyShadowStyles();
         });
-        queueMicrotask(() => {
-            this.debugTestLog('connected microtask', { hasEditor: !!this.editor });
-            if (this.editor) {
-                return;
-            }
-            try {
-                const initialDoc = this.resolveInitialDoc();
-                this.dispatchEditorChange(initialDoc.toJSON(), [], []);
-            }
-            catch {
-                // Ignore errors during eager ready dispatch; initialization will retry in firstUpdated.
-            }
-        });
     }
     /**
      * React to property changes coming from the host application.
@@ -173,10 +204,16 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         if (changedProperties.has('shadowStyles') && !this._shadowStylesAppliedExternally) {
             this.applyShadowStyles();
         }
+        if (changedProperties.has('editorWidth')) {
+            this.applyShadowStyles();
+        }
         // Reset flag for next update
         if (changedProperties.has('shadowStyles')) {
             this._shadowStylesAppliedExternally = false;
         }
+        if (changedProperties.has('locale') && this.locale) {
+            setLocale(this.locale);
+        }
         if (changedProperties.has('doc')) {
             this.applyDocUpdate();
         }
@@ -186,6 +223,10 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
      * Other frameworks should execute the same logic in their unmount hook.
      */
     disconnectedCallback() {
+        if (this._hostDragoverBound) {
+            this.removeEventListener('dragover', this._hostDragoverBound, { capture: true });
+            this._hostDragoverBound = null;
+        }
         super.disconnectedCallback();
         this.themeUnsub?.();
         this.themeUnsub = undefined;
@@ -215,7 +256,19 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
      * Resolves a mount point, creates the editor instance, and wires listeners.
      */
     getDefaultFeatures() {
-        return [citationFeature, markFormattingFeature, headingFeature, figureFeature, tableFeature];
+        return [
+            citationFeature,
+            crossReferenceFeature,
+            footnoteFeature,
+            hyperlinkFeature,
+            markFormattingFeature,
+            paragraphFeature,
+            headingFeature,
+            figureFeature,
+            tableFeature,
+            mathFeature,
+            ghostCursorFeature,
+        ];
     }
     getActiveFeatures() {
         return this.features ?? this.getDefaultFeatures();
@@ -224,13 +277,11 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         return this.doc === null && this.initialContent === null;
     }
     async initializeView() {
-        this.debugTestLog('initializeView invoked');
         if (this.view) {
             return;
         }
         const mountPoint = this.renderRoot.querySelector('.editor');
         if (!mountPoint) {
-            this.debugTestLog('initializeView: mount point missing');
             return;
         }
         const initialDoc = this.resolveInitialDoc();
@@ -263,11 +314,7 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
             this.editor = editor;
             editor.mount(mountPoint);
             this.view = editor.getView();
-            this.debugTestLog('editor mounted', { hasView: !!this.view });
-            const runner = editor.getCommands();
-            this.debugTestLog('command keys', runner ? Object.keys(runner.commands) : null);
             this.docUnsub = editor.onDoc((doc) => {
-                this.debugTestLog('dispatching editor-change', { ops: this.pendingOps.length });
                 const files = editor.getFiles();
                 this.dispatchEditorChange(doc, this.pendingOps, files);
                 this.pendingOps = [];
@@ -277,6 +324,7 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
                 this.dispatchSelectionChange(selection);
             });
             this.validationUnsub = editor.onValidation(() => undefined);
+            this.dispatchEditorChange(initialDoc.toJSON(), [], editor.getFiles());
             this.dispatchEditorReady();
             this.initialSelection = undefined;
         }
@@ -294,6 +342,9 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         if (!update) {
             return;
         }
+        if (this.isNoopSyncUpdate(update)) {
+            return;
+        }
         this.pendingOps = [];
         this.pendingOpsFromTransform = false;
         this.editor.updateFromSync(update);
@@ -366,6 +417,46 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         }
         return { doc: input };
     }
+    isNoopSyncUpdate(update) {
+        const editor = this.editor;
+        if (!editor) {
+            return false;
+        }
+        if (update.doc !== undefined && !this.deepEqualsJSON(update.doc, editor.getDoc())) {
+            return false;
+        }
+        if (update.selection !== undefined) {
+            const current = editor.getSelection();
+            if (!current) {
+                return false;
+            }
+            if (update.selection.anchor !== current.anchor || update.selection.head !== current.head) {
+                return false;
+            }
+        }
+        if (update.version !== undefined && update.version !== editor.getVersion()) {
+            return false;
+        }
+        if (update.files !== undefined && !this.deepEqualsJSON(update.files, editor.getFiles())) {
+            return false;
+        }
+        if (update.references !== undefined &&
+            !this.deepEqualsJSON(update.references, editor.getReferences())) {
+            return false;
+        }
+        return true;
+    }
+    deepEqualsJSON(left, right) {
+        if (left === right) {
+            return true;
+        }
+        try {
+            return JSON.stringify(left) === JSON.stringify(right);
+        }
+        catch {
+            return false;
+        }
+    }
     /**
      * Determine which document should be loaded on startup.
      * Preference order: externally supplied JSON, provided PM node, fallback.
@@ -482,7 +573,6 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
      * Applications can listen and update their stores or routing state.
      */
     dispatchEditorChange(doc, operations, files) {
-        this.debugTestLog('editor-change event', { doc, operations });
         this.dispatchEvent(new CustomEvent('editor-change', {
             detail: { doc, operations, files, references: this.editor?.getReferences() ?? [] },
             bubbles: true,
@@ -601,6 +691,10 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
         }
         this.shadowStyleElements = [];
         const cssTexts = this.normalizeShadowStyles(this.shadowStyles);
+        const widthCss = this.getEditorWidthStyles();
+        if (widthCss) {
+            cssTexts.push(widthCss);
+        }
         if (cssTexts.length === 0) {
             return;
         }
@@ -611,6 +705,15 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
             this.shadowStyleElements.push(styleEl);
         }
     }
+    getEditorWidthStyles() {
+        const isNarrow = this.editorWidth === 'narrow';
+        return `.ProseMirror {
+  font-size: 11pt;
+  max-width: ${isNarrow ? '52ch' : '82ch'};
+  margin-left: auto;
+  margin-right: auto;
+}`;
+    }
     normalizeShadowStyles(styles) {
         if (!styles) {
             return [];
@@ -648,14 +751,6 @@ let SciFlowEditorElement = class SciFlowEditorElement extends LitElement {
             return null;
         }
     }
-    debugTestLog(message, payload) {
-        const isDebug = (typeof process !== 'undefined' && process.env?.DEBUG_TESTS === 'true') ||
-            (typeof import.meta !== 'undefined' && import.meta.env?.DEBUG_TESTS === 'true');
-        if (!isDebug) {
-            return;
-        }
-        console.log('[sciflow-editor]', message, payload ?? '');
-    }
 };
 __decorate([
     property({ attribute: false })
@@ -675,6 +770,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SciFlowEditorElement.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], SciFlowEditorElement.prototype, "editorWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SciFlowEditorElement.prototype, "locale", void 0);
 SciFlowEditorElement = __decorate([
     customElement('sciflow-editor')
 ], SciFlowEditorElement);

package/dist/lib/format-bar.d.ts

@@ -36,11 +36,15 @@ export declare class SciFlowFormatBarElement extends LitElement {
     /** ID reference to resolve an editor instance declaratively. */
     for?: string;
     private selectionVersion;
+    private styleMenuOpen;
+    private insertMenuOpen;
     private resolvedEditor;
     private selectionListener?;
     private readyListener?;
+    private localeListener?;
     private themeUnsub?;
     private themeStyleElements;
+    private outsideClickHandler?;
     static styles: import("lit").CSSResult;
     /** Subscribe to editor events once the toolbar attaches to the DOM. */
     connectedCallback(): void;
@@ -56,6 +60,20 @@ export declare class SciFlowFormatBarElement extends LitElement {
      * command runner so the UI stays in sync with the currently loaded features.
      */
     protected render(): import("lit-html").TemplateResult<1>;
+    private renderStyleDropdown;
+    private toggleStyleMenu;
+    private selectStyle;
+    private isBlockquoteActive;
+    private canUseCommand;
+    private renderInsertDropdown;
+    private toggleInsertMenu;
+    private executeInsertCommand;
+    private installOutsideClickHandler;
+    private removeOutsideClickHandler;
+    /**
+     * Render fixed toolbar commands that are not driven by metadata groups.
+     */
+    private renderFixedCommandButton;
     /**
      * Find the target editor element and attach listeners for selection changes.
      * This mirrors the wiring a framework component would perform in `useEffect`.
@@ -66,8 +84,6 @@ export declare class SciFlowFormatBarElement extends LitElement {
     private detachEditorListeners;
     /** Convenience getter mirroring `editor.getCommands()`. */
     private getCommandRunner;
-    /** Interpret the block-style dropdown and trigger the relevant commands. */
-    private handleStyleChange;
     /** Apply a specific heading level after ensuring the editor can handle it. */
     private handleSetHeading;
     /** Reset the current block back to a paragraph. */
@@ -76,9 +92,17 @@ export declare class SciFlowFormatBarElement extends LitElement {
     private getActiveBlockStyle;
     /** Check if a style option can be executed against the current editor state. */
     private canUseStyleOption;
+    /** True if the current selection is inside a table (cell or header). */
+    private isSelectionInTable;
+    /**
+     * Render table commands split into logical sub-groups (columns, rows,
+     * merge/split, header toggles, navigation/delete) separated visually.
+     */
+    private renderTableSubGroups;
     /**
      * Render a set of command buttons that share the same metadata group.
      * Groups are sorted by each command's declared order so feature authors control layout.
+     * When onlyCommandNames is set, only those commands in the group are rendered.
      */
     private renderCommandGroup;
     /**

package/dist/lib/format-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format-bar.d.ts","sourceRoot":"","sources":["../../src/lib/format-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAa,UAAU,EAAa,MAAM,KAAK,CAAC;AAKvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAoBhE;;;;;;;;;;;GAWG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,oFAAoF;IAEpF,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IAE3C,gEAAgE;IAEhE,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,OAAO,CAAC,gBAAgB,CAAK;IAE7B,OAAO,CAAC,cAAc,CAAqC;IAC3D,OAAO,CAAC,iBAAiB,CAAC,CAAgB;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,kBAAkB,CAA0B;IAEpD,OAAgB,MAAM,0BAAmC;IAEzD,uEAAuE;IAC9D,iBAAiB,IAAI,IAAI;IAYlC,qDAAqD;IAC5C,oBAAoB,IAAI,IAAI;IAOrC;;;OAGG;cACgB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMjF;;;OAGG;cACgB,MAAM;IAiDzB;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,aAAa;IAkBrB,+DAA+D;IAC/D,OAAO,CAAC,qBAAqB;IAc7B,2DAA2D;IAC3D,OAAO,CAAC,gBAAgB;IAIxB,4EAA4E;IAC5E,OAAO,CAAC,iBAAiB;IAiBzB,8EAA8E;IAC9E,OAAO,CAAC,gBAAgB;IA6BxB,mDAAmD;IACnD,OAAO,CAAC,kBAAkB;IA6B1B,yEAAyE;IACzE,OAAO,CAAC,mBAAmB;IA6C3B,gFAAgF;IAChF,OAAO,CAAC,iBAAiB;IAmBzB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAW1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuC3B;;OAEG;IACH,OAAO,CAAC,gBAAgB;CA2BzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,uBAAuB,CAAC;KAC9C;CACF"}
+{"version":3,"file":"format-bar.d.ts","sourceRoot":"","sources":["../../src/lib/format-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAa,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOhE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAoChE;;;;;;;;;;;GAWG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,oFAAoF;IAEpF,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IAE3C,gEAAgE;IAEhE,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,OAAO,CAAC,gBAAgB,CAAK;IAG7B,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,cAAc,CAAqC;IAC3D,OAAO,CAAC,iBAAiB,CAAC,CAAgB;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,cAAc,CAAC,CAAgB;IACvC,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,kBAAkB,CAA0B;IACpD,OAAO,CAAC,mBAAmB,CAAC,CAA0B;IAEtD,OAAgB,MAAM,0BAAmC;IAEzD,uEAAuE;IAC9D,iBAAiB,IAAI,IAAI;IAoBlC,qDAAqD;IAC5C,oBAAoB,IAAI,IAAI;IAYrC;;;OAGG;cACgB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMjF;;;OAGG;cACgB,MAAM;IAwCzB,OAAO,CAAC,mBAAmB;IAyD3B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,oBAAoB;IAuD5B,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,0BAA0B;IAkBlC,OAAO,CAAC,yBAAyB;IAWjC;;OAEG;IACH,OAAO,CAAC,wBAAwB;IA2ChC;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IA+B9B,OAAO,CAAC,aAAa;IAkBrB,+DAA+D;IAC/D,OAAO,CAAC,qBAAqB;IAc7B,2DAA2D;IAC3D,OAAO,CAAC,gBAAgB;IAQxB,8EAA8E;IAC9E,OAAO,CAAC,gBAAgB;IA6BxB,mDAAmD;IACnD,OAAO,CAAC,kBAAkB;IA6B1B,yEAAyE;IACzE,OAAO,CAAC,mBAAmB;IA6C3B,gFAAgF;IAChF,OAAO,CAAC,iBAAiB;IAmBzB,wEAAwE;IACxE,OAAO,CAAC,kBAAkB;IAmB1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkB5B;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAuC3B;;OAEG;IACH,OAAO,CAAC,gBAAgB;CA2BzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,uBAAuB,CAAC;KAC9C;CACF"}