@sciflow/editor-start 0.0.1-beta

package/dist/lib/selection-editor.js

@@ -0,0 +1,467 @@
+/**
+ * @module selection-editor
+ *
+ * Developer overview:
+ * --------------------
+ * `SciFlowSelectionEditorElement` is a companion component for `sciflow-editor`
+ * that displays and allows editing of the currently selected element's attributes.
+ *
+ * It demonstrates how to:
+ * - Listen to editor selection changes
+ * - Extract node information from the document
+ * - Use the command API to update node attributes
+ * - Build reactive UI that stays in sync with editor state
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+import { SourceField } from '@sciflow/editor-core';
+import { getCitationSourceAdapter, } from './citation-source-adapter.js';
+import selectionEditorCss from './selection-editor.css?inline';
+import { applyThemeStylesToRoot, subscribeToSciFlowTheme } from './theme.js';
+/**
+ * Custom element that displays and edits the selected element's attributes.
+ *
+ * Responsibilities:
+ * - Resolve the nearest `sciflow-editor` instance (or accept one via property)
+ * - Listen to selection changes and extract node information
+ * - Display node type, ID, and attributes
+ * - Allow editing of attributes through the command API
+ */
+let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Reference to the editor element. May be passed directly via property binding. */
+        this.editor = null;
+        /** Custom adapter for editing citation source. When unset, uses the global adapter. */
+        this.citationSourceAdapter = null;
+        this.elementInfo = null;
+        this.resolvedEditor = null;
+        this.themeStyleElements = [];
+        this.citationSourceContainer = null;
+    }
+    static { this.styles = css `${unsafeCSS(selectionEditorCss)}`; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.themeUnsub = subscribeToSciFlowTheme((cssTexts) => {
+            this.themeStyleElements = applyThemeStylesToRoot(this.renderRoot, this.themeStyleElements, cssTexts);
+        });
+        this.resolveEditorReference();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachEditorListeners();
+        this.themeUnsub?.();
+        this.themeUnsub = undefined;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('editor') || changedProperties.has('for')) {
+            this.resolveEditorReference();
+        }
+        if (changedProperties.has('elementInfo') &&
+            this.citationSourceContainer &&
+            this.elementInfo?.type === 'citation' &&
+            this.elementInfo.attrs?.source !== undefined) {
+            const rawSource = this.elementInfo.attrs.source;
+            const items = typeof rawSource === 'string'
+                ? SourceField.fromString(rawSource)
+                : Array.isArray(rawSource)
+                    ? rawSource
+                    : [];
+            const adapter = this.citationSourceAdapter ?? getCitationSourceAdapter();
+            const context = {
+                applySource: (encoded) => {
+                    this.updateNodeAttribute('source', encoded);
+                    return true;
+                },
+            };
+            if (adapter.update) {
+                adapter.update(this.citationSourceContainer, items, context);
+            }
+        }
+    }
+    render() {
+        if (!this.elementInfo || !this.elementInfo.type) {
+            return html `
+        <div class="selection-editor-container">
+          <p class="selection-editor-placeholder">
+            No element selected. Click or select an element in the editor.
+          </p>
+        </div>
+      `;
+        }
+        return html `
+      <div class="selection-editor-container">
+        <!-- Type display -->
+        <div class="selection-editor-field">
+          <span class="selection-editor-label">Type:</span>
+          <code class="selection-editor-value">${this.elementInfo.type}</code>
+        </div>
+
+        <!-- ID display (read-only) -->
+        ${this.elementInfo.id
+            ? html `
+              <div class="selection-editor-field">
+                <span class="selection-editor-label">ID:</span>
+                <code class="selection-editor-value">${this.elementInfo.id}</code>
+              </div>
+            `
+            : ''}
+
+        <!-- Attributes (always expanded) -->
+        ${this.elementInfo.attrs && Object.keys(this.elementInfo.attrs).length > 0
+            ? html `
+              <div class="selection-editor-field">
+                <span class="selection-editor-label">Attributes:</span>
+                <div class="selection-editor-attrs">
+                  ${this.elementInfo.type === 'citation' &&
+                this.elementInfo.attrs?.source !== undefined
+                ? html `
+                        <div class="selection-editor-attr-field">
+                          <span class="selection-editor-label">source:</span>
+                          <div
+                            class="citation-source-adapter-root"
+                            ${ref((el) => {
+                    if (el) {
+                        this.citationSourceContainer = el;
+                        this.mountCitationSourceAdapter(el);
+                    }
+                    else if (this.citationSourceContainer) {
+                        this.unmountCitationSourceAdapter(this.citationSourceContainer);
+                        this.citationSourceContainer = null;
+                    }
+                })}
+                          ></div>
+                        </div>
+                      `
+                : ''}
+                  ${Object.entries(this.elementInfo.attrs)
+                .filter(([key]) => key !== 'id' &&
+                key !== 'data' &&
+                !(this.elementInfo.type === 'citation' && key === 'source'))
+                .map(([attrName, attrValue]) => this.renderAttributeField(attrName, attrValue))}
+                </div>
+              </div>
+            `
+            : ''}
+      </div>
+    `;
+    }
+    /**
+     * Find the target editor element and attach listeners for selection changes.
+     */
+    resolveEditorReference() {
+        const previous = this.resolvedEditor;
+        const next = this.resolveEditor();
+        if (previous === next && this.selectionListener) {
+            return;
+        }
+        this.detachEditorListeners();
+        this.resolvedEditor = next;
+        if (!next) {
+            return;
+        }
+        this.selectionListener = (event) => {
+            const selection = event.detail;
+            this.updateElementInfo(selection);
+        };
+        this.readyListener = () => {
+            // Re-evaluate selection when editor becomes ready
+            if (this.resolvedEditor?.editorView) {
+                const selection = this.resolvedEditor.editorView.state.selection;
+                this.updateElementInfo({
+                    anchor: selection.anchor,
+                    head: selection.head,
+                });
+            }
+        };
+        next.addEventListener('editor-selection-change', this.selectionListener);
+        next.addEventListener('editor-ready', this.readyListener);
+        // Initial evaluation
+        if (next.editorView) {
+            const selection = next.editorView.state.selection;
+            this.updateElementInfo({
+                anchor: selection.anchor,
+                head: selection.head,
+            });
+        }
+    }
+    resolveEditor() {
+        if (this.editor) {
+            return this.editor;
+        }
+        // When using declarative binding, walk the DOM to locate the target 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;
+    }
+    /** Clean up listeners attached to the last editor instance. */
+    detachEditorListeners() {
+        if (this.resolvedEditor) {
+            if (this.selectionListener) {
+                this.resolvedEditor.removeEventListener('editor-selection-change', this.selectionListener);
+            }
+            if (this.readyListener) {
+                this.resolvedEditor.removeEventListener('editor-ready', this.readyListener);
+            }
+        }
+        this.selectionListener = undefined;
+        this.readyListener = undefined;
+        this.resolvedEditor = null;
+    }
+    /**
+     * Extract element information from the current selection.
+     */
+    updateElementInfo(selection) {
+        const view = this.resolvedEditor?.editorView;
+        if (!view) {
+            this.elementInfo = null;
+            return;
+        }
+        let elementInfo = null;
+        let nodePosition = null;
+        const anchor = selection?.anchor ?? 0;
+        // Try to get the node at the anchor position
+        const nodeAtPos = view.state.doc.nodeAt(anchor);
+        if (nodeAtPos && !nodeAtPos.isText) {
+            // Node directly at position (e.g., block nodes like heading, paragraph)
+            nodePosition = anchor;
+            elementInfo = {
+                type: nodeAtPos.type.name,
+                id: nodeAtPos.attrs?.id ?? null,
+                attrs: nodeAtPos.attrs ?? null,
+                position: nodePosition,
+            };
+        }
+        else {
+            // If no block node at position, resolve the position and find the parent block node
+            const $pos = view.state.doc.resolve(anchor);
+            // Walk up the node tree to find the nearest block-level node
+            for (let depth = $pos.depth; depth > 0; depth--) {
+                const node = $pos.node(depth);
+                // Check if this is a block-level node (not doc, not inline)
+                if (node.type !== view.state.schema.topNodeType && node.type.spec.group === 'block') {
+                    nodePosition = $pos.before(depth);
+                    elementInfo = {
+                        type: node.type.name,
+                        id: node.attrs?.id ?? null,
+                        attrs: node.attrs ?? null,
+                        position: nodePosition,
+                    };
+                    break;
+                }
+            }
+            // Fallback: if we didn't find a block node, use the immediate parent (excluding doc)
+            if (!elementInfo && $pos.parent && $pos.parent.type !== view.state.schema.topNodeType) {
+                nodePosition = $pos.before($pos.depth);
+                elementInfo = {
+                    type: $pos.parent.type.name,
+                    id: $pos.parent.attrs?.id ?? null,
+                    attrs: $pos.parent.attrs ?? null,
+                    position: nodePosition,
+                };
+            }
+        }
+        this.elementInfo = elementInfo;
+    }
+    /** Convenience getter mirroring `editor.getCommands()`. */
+    getCommandRunner() {
+        return this.resolvedEditor?.commands ?? null;
+    }
+    /**
+     * Render a single attribute field, decoding known encoded values for readability.
+     */
+    renderAttributeField(attrName, attrValue) {
+        const decodedValue = this.decodeSpecialAttribute(attrName, attrValue);
+        const renderedValue = decodedValue === null || decodedValue === undefined ? '' : String(decodedValue);
+        return html `
+      <div class="selection-editor-attr-field">
+        <label
+          class="selection-editor-attr-label"
+          for="selection-editor-attr-${attrName}"
+        >
+          ${attrName}:
+        </label>
+        <input
+          type="text"
+          id="selection-editor-attr-${attrName}"
+          class="selection-editor-input"
+          .value=${renderedValue}
+          placeholder="No value"
+          @change=${(e) => this.handleAttrChange(e, attrName)}
+        />
+      </div>
+    `;
+    }
+    /**
+     * Decode known encoded attributes for more readable display/editing.
+     */
+    decodeSpecialAttribute(attrName, value) {
+        if (attrName === 'source') {
+            try {
+                const items = typeof value === 'string'
+                    ? SourceField.fromString(value)
+                    : Array.isArray(value)
+                        ? value
+                        : [];
+                return items.length > 0 ? JSON.stringify(items) : '';
+            }
+            catch {
+                return value;
+            }
+        }
+        return value;
+    }
+    /**
+     * Mount the citation source adapter UI when a citation node is selected.
+     */
+    mountCitationSourceAdapter(container) {
+        if (!this.elementInfo || this.elementInfo.type !== 'citation') {
+            return;
+        }
+        const rawSource = this.elementInfo.attrs?.source;
+        const items = typeof rawSource === 'string'
+            ? SourceField.fromString(rawSource)
+            : Array.isArray(rawSource)
+                ? rawSource
+                : [];
+        const adapter = this.citationSourceAdapter ?? getCitationSourceAdapter();
+        const context = {
+            applySource: (encoded) => {
+                this.updateNodeAttribute('source', encoded);
+                return true;
+            },
+        };
+        adapter.render(container, items, context);
+    }
+    /**
+     * Unmount the citation source adapter and clean up.
+     */
+    unmountCitationSourceAdapter(container) {
+        const adapter = this.citationSourceAdapter ?? getCitationSourceAdapter();
+        if (adapter.destroy) {
+            adapter.destroy(container);
+        }
+        else {
+            container.innerHTML = '';
+        }
+    }
+    /**
+     * Handle attribute field changes.
+     */
+    handleAttrChange(event, attrName) {
+        const input = event.target;
+        const value = input.value.trim();
+        let parsedValue = value;
+        if (attrName === 'source') {
+            parsedValue = this.encodeSourceField(value);
+        }
+        else if (value !== '') {
+            const numValue = parseFloat(value);
+            if (!isNaN(numValue) && isFinite(numValue)) {
+                parsedValue = numValue;
+                if (Number.isInteger(parsedValue)) {
+                    parsedValue = parseInt(value, 10);
+                }
+            }
+        }
+        else {
+            parsedValue = null;
+        }
+        this.updateNodeAttribute(attrName, parsedValue);
+    }
+    /**
+     * Update node attributes using the command API.
+     * Preserves the 'data' attribute if it exists, even though it's not displayed.
+     */
+    updateNodeAttribute(attrName, attrValue) {
+        if (!this.elementInfo || this.elementInfo.position === null) {
+            console.warn('[sciflow-selection-editor] Cannot update: no element info or position');
+            return;
+        }
+        const runner = this.getCommandRunner();
+        if (!runner) {
+            console.warn('[sciflow-selection-editor] Cannot update: no command runner');
+            return;
+        }
+        try {
+            // Prepare the updated attributes object
+            // The setNodeAttrs command merges with existing attributes, so 'data' will be preserved
+            const updatedAttrs = {
+                [attrName]: attrValue,
+            };
+            // Use the editor command API to update node attributes
+            // The command implementation merges with existing attrs, preserving 'data' and other attributes
+            const setNodeAttrsCommand = runner.commands.setNodeAttrs;
+            if (!setNodeAttrsCommand) {
+                console.warn('[sciflow-selection-editor] setNodeAttrs command not available');
+                return;
+            }
+            const success = setNodeAttrsCommand(this.elementInfo.position, updatedAttrs);
+            if (success && this.resolvedEditor?.editorView) {
+                const selection = this.resolvedEditor.editorView.state.selection;
+                this.updateElementInfo({
+                    anchor: selection.anchor,
+                    head: selection.head,
+                });
+            }
+            else if (!success) {
+                console.warn('[sciflow-selection-editor] Failed to update node attribute');
+            }
+        }
+        catch (error) {
+            console.error('[sciflow-selection-editor] Failed to update node attribute:', error);
+        }
+    }
+    /**
+     * Encode a source string/JSON into the URI-encoded source field format.
+     */
+    encodeSourceField(raw) {
+        if (!raw) {
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (Array.isArray(parsed)) {
+                return SourceField.toString(parsed) ?? null;
+            }
+        }
+        catch {
+            // Not JSON; fall through.
+        }
+        try {
+            const normalized = SourceField.fromString(raw);
+            return SourceField.toString(normalized);
+        }
+        catch {
+            return raw;
+        }
+    }
+};
+__decorate([
+    property({ attribute: false })
+], SciFlowSelectionEditorElement.prototype, "editor", void 0);
+__decorate([
+    property({ type: String, attribute: 'for' })
+], SciFlowSelectionEditorElement.prototype, "for", void 0);
+__decorate([
+    property({ attribute: false })
+], SciFlowSelectionEditorElement.prototype, "citationSourceAdapter", void 0);
+__decorate([
+    state()
+], SciFlowSelectionEditorElement.prototype, "elementInfo", void 0);
+SciFlowSelectionEditorElement = __decorate([
+    customElement('sciflow-selection-editor')
+], SciFlowSelectionEditorElement);
+export { SciFlowSelectionEditorElement };

package/dist/lib/theme.d.ts

@@ -0,0 +1,8 @@
+export type ThemeStyleInput = string | string[] | CSSStyleSheet | CSSStyleSheet[] | null;
+type ThemeSubscriber = (cssTexts: string[]) => void;
+export declare const setSciFlowThemeStyles: (styles: ThemeStyleInput) => void;
+export declare const getSciFlowThemeStyles: () => string[];
+export declare const subscribeToSciFlowTheme: (callback: ThemeSubscriber) => (() => void);
+export declare const applyThemeStylesToRoot: (root: ShadowRoot | HTMLElement | undefined, existing: HTMLStyleElement[], cssTexts: string[]) => HTMLStyleElement[];
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,aAAa,GAAG,aAAa,EAAE,GAAG,IAAI,CAAC;AAEzF,KAAK,eAAe,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAKpD,eAAO,MAAM,qBAAqB,GAAI,QAAQ,eAAe,KAAG,IAG/D,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAO,MAAM,EAA0B,CAAC;AAE1E,eAAO,MAAM,uBAAuB,GAAI,UAAU,eAAe,KAAG,CAAC,MAAM,IAAI,CAM9E,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,MAAM,UAAU,GAAG,WAAW,GAAG,SAAS,EAC1C,UAAU,gBAAgB,EAAE,EAC5B,UAAU,MAAM,EAAE,KACjB,gBAAgB,EAyBlB,CAAC"}

package/dist/lib/theme.js

@@ -0,0 +1,72 @@
+const subscribers = new Set();
+let currentCssTexts = [];
+export const setSciFlowThemeStyles = (styles) => {
+    currentCssTexts = normalizeThemeStyles(styles);
+    subscribers.forEach((callback) => callback([...currentCssTexts]));
+};
+export const getSciFlowThemeStyles = () => [...currentCssTexts];
+export const subscribeToSciFlowTheme = (callback) => {
+    subscribers.add(callback);
+    callback([...currentCssTexts]);
+    return () => {
+        subscribers.delete(callback);
+    };
+};
+export const applyThemeStylesToRoot = (root, existing, cssTexts) => {
+    if (!root || typeof root.appendChild !== 'function') {
+        return existing;
+    }
+    for (const styleEl of existing) {
+        if (styleEl.parentNode === root) {
+            root.removeChild(styleEl);
+        }
+    }
+    if (cssTexts.length === 0) {
+        return [];
+    }
+    const next = [];
+    for (const cssText of cssTexts) {
+        const styleEl = document.createElement('style');
+        styleEl.setAttribute('data-sciflow-theme', 'true');
+        styleEl.textContent = cssText;
+        root.appendChild(styleEl);
+        next.push(styleEl);
+    }
+    return next;
+};
+const normalizeThemeStyles = (styles) => {
+    if (!styles) {
+        return [];
+    }
+    const list = Array.isArray(styles) ? styles : [styles];
+    const cssTexts = [];
+    for (const entry of list) {
+        if (!entry) {
+            continue;
+        }
+        if (typeof entry === 'string') {
+            const trimmed = entry.trim();
+            if (trimmed) {
+                cssTexts.push(trimmed);
+            }
+            continue;
+        }
+        if (typeof CSSStyleSheet !== 'undefined' && entry instanceof CSSStyleSheet) {
+            const serialized = extractCssFromSheet(entry);
+            if (serialized) {
+                cssTexts.push(serialized);
+            }
+        }
+    }
+    return cssTexts;
+};
+const extractCssFromSheet = (sheet) => {
+    try {
+        const rules = Array.from(sheet.cssRules ?? []);
+        const cssText = rules.map((rule) => rule.cssText).join('\n');
+        return cssText.trim() ? cssText : null;
+    }
+    catch {
+        return null;
+    }
+};