@sciflow/editor-start 0.0.1-beta

package/dist/lib/outline.js

@@ -0,0 +1,491 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { SourceField, } from '@sciflow/editor-core';
+import outlineStyles from './outline.css?inline';
+import { applyThemeStylesToRoot, subscribeToSciFlowTheme } from './theme.js';
+const CLICK_BEHAVIORS = ['none', 'select', 'scroll'];
+const parseLevelsFromAttribute = (value) => {
+    if (Array.isArray(value)) {
+        const cleaned = value
+            .map((entry) => (typeof entry === 'number' ? entry : Number.parseInt(String(entry), 10)))
+            .filter((entry) => Number.isFinite(entry) && entry > 0);
+        return cleaned.length ? Array.from(new Set(cleaned)) : null;
+    }
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const tokens = value
+        .split(',')
+        .map((token) => token.trim())
+        .filter(Boolean);
+    const levels = [];
+    for (const token of tokens) {
+        const rangeParts = token.split('-').map((part) => Number.parseInt(part.trim(), 10));
+        if (rangeParts.length === 2 && Number.isFinite(rangeParts[0]) && Number.isFinite(rangeParts[1])) {
+            const [start, end] = rangeParts;
+            const lower = Math.min(start, end);
+            const upper = Math.max(start, end);
+            for (let level = lower; level <= upper; level += 1) {
+                levels.push(level);
+            }
+            continue;
+        }
+        const single = Number.parseInt(token, 10);
+        if (Number.isFinite(single) && single > 0) {
+            levels.push(single);
+        }
+    }
+    const unique = Array.from(new Set(levels));
+    return unique.length ? unique : null;
+};
+/**
+ * Collect heading and citation metadata from a SciFlow document snapshot.
+ * When a ProseMirror document is available, positions and node boundaries are
+ * included so navigation and selection syncing can be precise.
+ */
+export function collectDocumentOutline(doc, pmDoc = null) {
+    const outline = {
+        headings: [],
+        citations: [],
+    };
+    // Fast path: traverse the live ProseMirror document for accurate positions.
+    if (pmDoc) {
+        pmDoc.descendants((node, position) => {
+            if (node.type.name === 'heading') {
+                outline.headings.push({
+                    text: node.textContent.trim(),
+                    level: node.attrs?.level ?? null,
+                    id: node.attrs?.id ?? null,
+                    position,
+                    end: position + node.nodeSize,
+                });
+            }
+            if (node.type.name === 'citation') {
+                outline.citations.push({
+                    id: node.attrs?.id ?? null,
+                    source: SourceField.fromString(node.attrs?.source ?? null),
+                });
+            }
+            return true;
+        });
+        return outline;
+    }
+    if (!doc) {
+        return outline;
+    }
+    const walk = (node) => {
+        if (!node) {
+            return;
+        }
+        const { type, attrs = {}, content = [] } = node;
+        if (type === 'heading') {
+            const headingText = content.map((child) => child?.text ?? '').join('').trim();
+            outline.headings.push({
+                text: headingText,
+                level: attrs.level ?? null,
+                id: attrs.id ?? null,
+                position: null,
+                end: null,
+            });
+        }
+        if (type === 'citation') {
+            outline.citations.push({
+                id: attrs.id ?? null,
+                source: SourceField.fromString(attrs.source ?? null),
+            });
+        }
+        content.forEach((child) => walk(child));
+    };
+    walk(doc);
+    return outline;
+}
+/**
+ * Helper used by the demo to expose outline data for debugging.
+ */
+export function logDocumentOutline(doc, pmDoc = null) {
+    const outline = collectDocumentOutline(doc, pmDoc);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- instrumentation hook only
+    globalThis.__SCIFLOW_OUTLINE__ = outline;
+    return outline;
+}
+/**
+ * Web component that renders a document outline and stays in sync with a
+ * <sciflow-editor> instance. Hosts can either set the `for` attribute to point
+ * to an editor ID or pass the editor reference directly via the `editor`
+ * property.
+ *
+ * Configurable behaviors:
+ * - `levels` attribute filters which heading levels appear (e.g. "1-3" or "1,2")
+ * - `click-behavior` toggles navigation (`none` | `select` | `scroll`)
+ * - `renderHeadingLabel` property accepts a custom label renderer
+ */
+let SciFlowOutlineElement = class SciFlowOutlineElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Reference to the editor element. May be passed directly via property binding. */
+        this.editor = null;
+        /** Optional document JSON source when not listening to an editor element. */
+        this.doc = null;
+        /** Placeholder text displayed when no headings are present. */
+        this.emptyText = 'No headings yet.';
+        /** Controls click behavior: disabled, set selection, or set selection + scroll. */
+        this.clickBehavior = 'scroll';
+        /** Filter the outline to specific heading levels (e.g., "1-3" or "1,2,3"). */
+        this.levels = null;
+        this.headings = [];
+        this.activeHeadingKey = null;
+        this.resolvedEditor = null;
+        this.lastSelection = null;
+        this.themeStyleElements = [];
+    }
+    static { this.styles = css `${unsafeCSS(outlineStyles)}`; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.themeUnsub = subscribeToSciFlowTheme((cssTexts) => {
+            this.themeStyleElements = applyThemeStylesToRoot(this.renderRoot, this.themeStyleElements, cssTexts);
+        });
+        this.resolveEditorReference();
+    }
+    disconnectedCallback() {
+        this.detachEditorListeners();
+        this.themeUnsub?.();
+        this.themeUnsub = undefined;
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('for') || changedProperties.has('editor')) {
+            this.resolveEditorReference();
+        }
+        if (changedProperties.has('levels')) {
+            this.updateHeadingsFromDoc();
+        }
+        if (changedProperties.has('doc')) {
+            this.updateHeadingsFromDoc(this.doc);
+        }
+        if (changedProperties.has('clickBehavior')) {
+            this.clickBehavior = this.normalizeClickBehavior(this.clickBehavior);
+        }
+    }
+    render() {
+        if (!this.headings.length) {
+            return html `
+        <ol class="outline-list" part="list">
+          <li class="outline-placeholder" part="placeholder">${this.emptyText}</li>
+        </ol>
+      `;
+        }
+        return html `
+      <ol class="outline-list" part="list">
+        ${this.headings.map((heading, index) => this.renderHeadingItem(heading, index))}
+      </ol>
+    `;
+    }
+    renderHeadingItem(heading, index) {
+        const key = this.headingKey(heading, index);
+        const isActive = this.activeHeadingKey === key;
+        const clickable = this.clickBehavior !== 'none' && heading.position !== null && heading.position !== undefined;
+        const label = this.renderHeadingLabel?.(heading, index) ?? heading.text?.trim() ?? 'Untitled section';
+        return html `
+      <li
+        class=${classMap({
+            'outline-item': true,
+            'outline-item--active': isActive,
+            [`level-${heading.level ?? 1}`]: Boolean(heading.level),
+        })}
+        part=${`item${isActive ? ' item-active' : ''}`}
+        data-level=${heading.level ?? ''}
+        role=${clickable ? 'button' : 'listitem'}
+        tabindex=${clickable ? 0 : -1}
+        aria-current=${isActive ? 'true' : 'false'}
+        @click=${clickable ? () => this.handleHeadingClick(heading, index) : undefined}
+        @keydown=${clickable ? (event) => this.handleHeadingKeydown(event, heading, index) : undefined}
+      >
+        <span class="outline-text" part="text">${label}</span>
+        <span class="outline-meta" part="meta">
+          ${heading.level ? html `<span part="level">H${heading.level}</span>` : nothing}
+          ${heading.id
+            ? html `<code class="outline-id" part="id" aria-label=${`Heading id ${heading.id}`}>${heading.id}</code>`
+            : nothing}
+        </span>
+      </li>
+    `;
+    }
+    handleHeadingKeydown(event, heading, index) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleHeadingClick(heading, index);
+        }
+    }
+    handleHeadingClick(heading, index) {
+        if (this.clickBehavior === 'none') {
+            return;
+        }
+        const editor = this.resolvedEditor ?? this.editor;
+        if (!editor) {
+            return;
+        }
+        if (heading.position === null || heading.position === undefined) {
+            return;
+        }
+        const selectionPosition = this.getHeadingSelectionPosition(heading.position, editor);
+        const runner = editor.commands ?? null;
+        // The command runner exposes methods directly or via `commands`.
+        const commands = runner?.commands ?? null;
+        let didSetSelection = false;
+        const setSelection = commands?.setSelection;
+        if (typeof setSelection === 'function') {
+            didSetSelection = setSelection(selectionPosition ?? heading.position, { scroll: false });
+        }
+        if (didSetSelection) {
+            const focusCommand = commands?.focus;
+            if (typeof focusCommand === 'function') {
+                focusCommand();
+            }
+            else {
+                editor.editorView?.focus();
+            }
+            if (this.clickBehavior === 'scroll') {
+                const scrollCommand = commands?.scrollIntoView;
+                if (typeof scrollCommand === 'function') {
+                    scrollCommand();
+                }
+                else {
+                    editor.editorView?.dispatch(editor.editorView.state.tr.scrollIntoView());
+                }
+            }
+        }
+        this.activeHeadingKey = this.headingKey(heading, index);
+        this.dispatchEvent(new CustomEvent('outline-navigate', {
+            detail: {
+                heading,
+                behavior: this.clickBehavior,
+                selectionPosition: selectionPosition ?? heading.position,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    resolveEditorReference() {
+        const previous = this.resolvedEditor;
+        const next = this.resolveEditor();
+        if (previous === next && this.changeListener) {
+            return;
+        }
+        this.detachEditorListeners();
+        this.resolvedEditor = next;
+        if (!next) {
+            return;
+        }
+        this.attachEditorListeners(next);
+        // Prime the outline with whatever state is currently available.
+        const pmDoc = next.editorView?.state?.doc ?? null;
+        const currentDoc = this.doc ?? this.extractDocFromEditor(next);
+        this.updateHeadingsFromDoc(currentDoc, pmDoc);
+        if (pmDoc && next.editorView) {
+            const selection = next.editorView.state.selection;
+            this.updateActiveHeading({
+                anchor: selection.anchor,
+                head: selection.head,
+            });
+        }
+    }
+    resolveEditor() {
+        if (this.editor) {
+            return this.editor;
+        }
+        if (this.for) {
+            const root = this.getRootNode();
+            const candidate = root.getElementById(this.for);
+            if (candidate) {
+                return candidate;
+            }
+        }
+        const nearest = this.closest('sciflow-editor');
+        if (nearest) {
+            return nearest;
+        }
+        return null;
+    }
+    attachEditorListeners(editor) {
+        this.changeListener = (event) => {
+            const detail = event.detail;
+            if (detail?.doc) {
+                this.doc = detail.doc;
+            }
+            const pmDoc = editor.editorView?.state?.doc ?? null;
+            this.updateHeadingsFromDoc(detail?.doc ?? this.doc, pmDoc);
+        };
+        this.selectionListener = (event) => {
+            const selection = event.detail;
+            this.updateActiveHeading(selection);
+        };
+        this.readyListener = () => {
+            const pmDoc = editor.editorView?.state?.doc ?? null;
+            this.updateHeadingsFromDoc(this.doc ?? this.extractDocFromEditor(editor), pmDoc);
+            if (pmDoc) {
+                const selection = editor.editorView?.state.selection;
+                if (selection) {
+                    this.updateActiveHeading({
+                        anchor: selection.anchor,
+                        head: selection.head,
+                    });
+                }
+            }
+        };
+        editor.addEventListener('editor-change', this.changeListener);
+        editor.addEventListener('editor-selection-change', this.selectionListener);
+        editor.addEventListener('editor-ready', this.readyListener);
+    }
+    detachEditorListeners() {
+        if (this.resolvedEditor) {
+            if (this.changeListener) {
+                this.resolvedEditor.removeEventListener('editor-change', this.changeListener);
+            }
+            if (this.selectionListener) {
+                this.resolvedEditor.removeEventListener('editor-selection-change', this.selectionListener);
+            }
+            if (this.readyListener) {
+                this.resolvedEditor.removeEventListener('editor-ready', this.readyListener);
+            }
+        }
+        this.changeListener = undefined;
+        this.selectionListener = undefined;
+        this.readyListener = undefined;
+        this.resolvedEditor = null;
+    }
+    updateHeadingsFromDoc(doc = this.doc, pmDoc = this.resolvedEditor?.editorView?.state?.doc ?? null) {
+        const outline = collectDocumentOutline(doc, pmDoc);
+        const filtered = this.applyLevelFilter(outline.headings);
+        this.headings = filtered;
+        this.updateActiveHeading(this.lastSelection);
+        this.dispatchOutlineChange(filtered);
+    }
+    applyLevelFilter(headings) {
+        const levelSet = this.getLevelFilterSet();
+        if (!levelSet) {
+            return headings;
+        }
+        return headings.filter((heading) => heading.level !== null && levelSet.has(heading.level));
+    }
+    getLevelFilterSet() {
+        if (!this.levels || this.levels.length === 0) {
+            return null;
+        }
+        const set = new Set();
+        for (const level of this.levels) {
+            const normalized = Math.trunc(level);
+            if (Number.isFinite(normalized) && normalized > 0) {
+                set.add(normalized);
+            }
+        }
+        return set.size ? set : null;
+    }
+    updateActiveHeading(selection = this.lastSelection) {
+        if (selection) {
+            this.lastSelection = selection;
+        }
+        const candidate = this.findHeadingForSelection(selection ?? null);
+        this.activeHeadingKey = candidate ? this.headingKey(candidate) : null;
+    }
+    findHeadingForSelection(selection) {
+        if (!selection || !this.headings.length) {
+            return null;
+        }
+        const position = Math.min(selection.anchor, selection.head);
+        let fallback = null;
+        for (const heading of this.headings) {
+            if (heading.position === null || heading.position === undefined) {
+                continue;
+            }
+            const start = heading.position;
+            const end = heading.end ?? Number.POSITIVE_INFINITY;
+            if (position >= start && position < end) {
+                return heading;
+            }
+            if (start <= position) {
+                fallback = heading;
+            }
+        }
+        return fallback;
+    }
+    headingKey(heading, index = this.headings.indexOf(heading)) {
+        if (heading.id) {
+            return heading.id;
+        }
+        if (heading.position !== null && heading.position !== undefined) {
+            return `pos-${heading.position}`;
+        }
+        return `idx-${index}`;
+    }
+    getHeadingSelectionPosition(position, editor) {
+        if (!Number.isFinite(position)) {
+            return null;
+        }
+        const doc = editor.editorView?.state?.doc;
+        if (!doc) {
+            return position;
+        }
+        const node = doc.nodeAt(position);
+        if (node?.isTextblock) {
+            const insidePosition = position + 1;
+            const maxPosition = doc.content.size;
+            return insidePosition <= maxPosition ? insidePosition : maxPosition;
+        }
+        return position;
+    }
+    extractDocFromEditor(editor) {
+        const pmDoc = editor.editorView?.state?.doc;
+        return pmDoc ? pmDoc.toJSON() : null;
+    }
+    normalizeClickBehavior(value) {
+        return CLICK_BEHAVIORS.includes(value) ? value : 'scroll';
+    }
+    dispatchOutlineChange(headings) {
+        this.dispatchEvent(new CustomEvent('outline-change', {
+            detail: {
+                headings,
+                active: this.activeHeadingKey,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+__decorate([
+    property({ attribute: false })
+], SciFlowOutlineElement.prototype, "editor", void 0);
+__decorate([
+    property({ type: String, attribute: 'for' })
+], SciFlowOutlineElement.prototype, "for", void 0);
+__decorate([
+    property({ attribute: false })
+], SciFlowOutlineElement.prototype, "doc", void 0);
+__decorate([
+    property({ type: String, attribute: 'empty-text' })
+], SciFlowOutlineElement.prototype, "emptyText", void 0);
+__decorate([
+    property({ type: String, attribute: 'click-behavior' })
+], SciFlowOutlineElement.prototype, "clickBehavior", void 0);
+__decorate([
+    property({
+        attribute: 'levels',
+        converter: {
+            fromAttribute: (value) => parseLevelsFromAttribute(value),
+        },
+    })
+], SciFlowOutlineElement.prototype, "levels", void 0);
+__decorate([
+    property({ attribute: false })
+], SciFlowOutlineElement.prototype, "renderHeadingLabel", void 0);
+__decorate([
+    state()
+], SciFlowOutlineElement.prototype, "headings", void 0);
+__decorate([
+    state()
+], SciFlowOutlineElement.prototype, "activeHeadingKey", void 0);
+SciFlowOutlineElement = __decorate([
+    customElement('sciflow-outline')
+], SciFlowOutlineElement);
+export { SciFlowOutlineElement };

package/dist/lib/reference-list.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @module reference-list
+ *
+ * Developer overview:
+ * --------------------
+ * `SciFlowReferenceListElement` renders a draggable, highlighted list of
+ * references. It replaces the bespoke demo sidebar logic so integrators can
+ * reuse the same markup and drag payloads in their own UIs.
+ */
+import { LitElement } from 'lit';
+type ReferenceAuthor = {
+    family?: string | null;
+    given?: string | null;
+} | null;
+export type ReferenceListEntry = {
+    id?: string | null;
+    rawCitation?: string | null;
+    raw_citation?: string | null;
+    author?: ReferenceAuthor[] | null;
+    issued?: {
+        'date-parts'?: Array<Array<number | string | null> | null> | null;
+    } | null;
+    title?: string | null;
+    publisher?: string | null;
+    'container-title'?: string | null;
+    'publisher-place'?: string | null;
+    [key: string]: unknown;
+};
+export declare class SciFlowReferenceListElement extends LitElement {
+    /** References to render. */
+    references: ReferenceListEntry[] | null;
+    /** Reference IDs to highlight. */
+    highlightedIds: string[];
+    /** Text displayed when no references are available. */
+    emptyText: string;
+    private themeUnsub?;
+    private themeStyleElements;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Highlight the supplied reference ids.
+     *
+     * @param referenceIds IDs to highlight.
+     */
+    highlight(referenceIds?: Iterable<string>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private formatReference;
+    private formatAuthor;
+    private handleDragStart;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sciflow-reference-list': SciFlowReferenceListElement;
+    }
+}
+export {};
+//# sourceMappingURL=reference-list.d.ts.map

package/dist/lib/reference-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reference-list.d.ts","sourceRoot":"","sources":["../../src/lib/reference-list.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAa,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMhE,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;IACtF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,qBACa,2BAA4B,SAAQ,UAAU;IACzD,4BAA4B;IAE5B,UAAU,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAQ;IAE/C,kCAAkC;IAElC,cAAc,EAAE,MAAM,EAAE,CAAM;IAE9B,uDAAuD;IAEvD,SAAS,SAAwB;IAEjC,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,kBAAkB,CAA0B;IAEpD,OAAgB,MAAM,0BAAuC;IAEpD,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAMrC;;;;OAIG;IACH,SAAS,CAAC,YAAY,GAAE,QAAQ,CAAC,MAAM,CAAM,GAAG,IAAI;cAMjC,MAAM;IA2CzB,OAAO,CAAC,eAAe;IAkCvB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,eAAe;CA+BxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,2BAA2B,CAAC;KACvD;CACF"}