@sciflow/editor-start 0.0.3 → 0.1.1

package/dist/lib/selection-editor.js

@@ -13,7 +13,7 @@
  * - Build reactive UI that stays in sync with editor state
  */
 import { __decorate } from "tslib";
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 import { SourceField, t, LOCALE_CHANGE_EVENT } from '@sciflow/editor-core';
@@ -22,7 +22,7 @@ import { renderTexToSvg } from '@sciflow/editor-core/features/math';
 import { Fragment as PMFragment } from 'prosemirror-model';
 import { EditorState, NodeSelection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
-import { baseKeymap, toggleMark } from 'prosemirror-commands';
+import { baseKeymap, deleteSelection, toggleMark } from 'prosemirror-commands';
 import { keymap } from 'prosemirror-keymap';
 import { getCitationSourceAdapter, } from './citation-source-adapter.js';
 import { collectDocumentOutline } from './outline.js';
@@ -30,6 +30,14 @@ import { renderNodeFromUiSchema } from './selection-ui-renderer.js';
 import './selection-widget-host.js';
 import selectionEditorCss from './selection-editor.css?inline';
 import { applyThemeStylesToRoot, subscribeToSciFlowTheme } from './theme.js';
+/**
+ * Attributes whose value is always text. Anything outside this set that looks
+ * like a number is coerced to one before it is written to the node, so a text
+ * attribute left out here silently changes type — an image address of `1200`
+ * or `3.14` would reach the document as a number and fail schema validation on
+ * export. Add a new text attribute here in the same commit that renders it.
+ */
+const TEXT_VALUED_ATTRS = new Set(['alt', 'src']);
 /**
  * Custom element that displays and edits the selected element's attributes.
  *
@@ -717,11 +725,32 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         return this.resolvedEditor?.commands ?? null;
     }
     /**
-     * Render a single attribute field, decoding known encoded values for readability.
+     * Whether the bound editor currently accepts edits. Every path in this panel
+     * that writes to the document asks first, and fails closed when there is no
+     * view to ask.
+     *
+     * A host can turn editing off at any time
+     * (`view.setProps({ editable: () => false })`) and expects the whole surface
+     * to go quiet — a side panel that still writes would make a read-only
+     * document change under the reader. `view.editable` is the same signal the
+     * editor's own key and click handling reads, so the panel cannot drift from
+     * the editing surface. The guards sit on the write itself rather than only on
+     * the controls: the panel re-renders on selection changes, so editability can
+     * flip while a button from the editable render is still on screen.
      */
-    getNodeTypeLabel(type) {
+    isEditorEditable() {
+        return this.resolvedEditor?.editorView?.editable === true;
+    }
+    /**
+     * The panel's own name for a node type in the active locale, or `null` when it
+     * has none. Cased for use inside a sentence, so callers that need a heading
+     * capitalise it themselves — English writes these names lower case, German
+     * capitalises every noun, and only the dictionary knows which.
+     */
+    getNodeTypeName(type) {
         const known = {
             figure: () => t('selectionEditor.figure'),
+            table: () => t('selectionEditor.table'),
             math: () => t('selectionEditor.math'),
             citation: () => t('selectionEditor.citation'),
             anchor: () => t('selectionEditor.hyperlink'),
@@ -729,9 +758,33 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             heading: () => t('selectionEditor.heading'),
             paragraph: () => t('selectionEditor.paragraph'),
         };
-        const label = known[type]?.() ?? type.replace(/_/g, ' ');
+        return known[type]?.() ?? null;
+    }
+    getNodeTypeLabel(type) {
+        const label = this.getNodeTypeName(type) ?? type.replace(/_/g, ' ');
         return label.replace(/^\w/, (m) => m.toUpperCase());
     }
+    /**
+     * The node this panel is currently describing, read back from the live
+     * document, or `null` when the panel is describing a mark or nothing at all.
+     */
+    getSelectedNode() {
+        const view = this.resolvedEditor?.editorView;
+        const position = this.elementInfo?.position;
+        if (!view || position == null || position < 0 || position >= view.state.doc.content.size) {
+            return null;
+        }
+        return view.state.doc.nodeAt(position);
+    }
+    /**
+     * A table is a `figure` whose first child is a `table` rather than an image,
+     * so the content is what tells a reader which one is selected — the node type
+     * is `figure` either way.
+     */
+    isTableFigure(node) {
+        const tableType = this.resolvedEditor?.editorView?.state.schema.nodes['table'];
+        return !!tableType && node?.firstChild?.type === tableType;
+    }
     renderAttributeField(attrName, attrValue) {
         const decodedValue = this.decodeSpecialAttribute(attrName, attrValue);
         const renderedValue = decodedValue === null || decodedValue === undefined ? '' : String(decodedValue);
@@ -852,7 +905,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         if (attrName === 'source') {
             parsedValue = this.encodeSourceField(value);
         }
-        else if (attrName === 'alt') {
+        else if (TEXT_VALUED_ATTRS.has(attrName)) {
             parsedValue = value;
         }
         else if (value !== '') {
@@ -870,15 +923,50 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         this.setDraftAttr(attrName, parsedValue);
     }
     /**
-     * Render the figure sidebar: type, id, alt text.
+     * Render the figure sidebar: type, image address, alt text.
+     *
+     * The image address is editable here because this panel is the only place a
+     * reader can change it: clicking an image selects the figure rather than
+     * opening a picker, so the address has to be reachable as an ordinary field.
+     * It is a plain text input, so a URL, a relative path or a data URI are all
+     * accepted; the value is written on `change` like every other draft attribute
+     * and committed with Apply.
+     *
+     * A table is a `figure` too, so the heading and the form's accessible name
+     * both come from the selected node rather than from the node type alone —
+     * otherwise a selected table would be titled "Figure".
      */
     renderFigureSidebar() {
         const attrs = this.getEffectiveAttrs();
         const alt = typeof attrs.alt === 'string' ? attrs.alt : '';
+        const src = typeof attrs.src === 'string' ? attrs.src : '';
+        const isTable = this.isTableFigure(this.getSelectedNode());
         return html `
-      <div class="selection-editor-container selection-editor-figure" role="form" aria-label=${t('selectionEditor.editFigure')} @keydown=${this.handleGenericKeydown}>
+      <div
+        class="selection-editor-container selection-editor-figure"
+        role="form"
+        aria-label=${isTable ? t('selectionEditor.editTable') : t('selectionEditor.editFigure')}
+        @keydown=${this.handleGenericKeydown}
+      >
         ${this.renderSelectionControls()}
-        <p class="selection-editor-type-header">${this.getNodeTypeLabel(this.elementInfo.type)}</p>
+        <p class="selection-editor-type-header">
+          ${isTable ? this.getNodeTypeLabel('table') : this.getNodeTypeLabel(this.elementInfo.type)}
+        </p>
+        ${isTable
+            ? nothing
+            : html `
+            <div class="selection-editor-field">
+              <label class="selection-editor-label" for="figure-src">${t('selectionEditor.imageUrl')}</label>
+              <input
+                type="text"
+                id="figure-src"
+                class="selection-editor-input"
+                .value=${src}
+                placeholder=${t('selectionEditor.urlPlaceholder')}
+                @change=${(e) => this.handleDraftAttrChange(e, 'src')}
+              />
+            </div>
+          `}
         <div class="selection-editor-field">
           <label class="selection-editor-label" for="figure-alt">${t('selectionEditor.altText')}</label>
           <input
@@ -886,7 +974,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
             id="figure-alt"
             class="selection-editor-input"
             .value=${alt}
-            placeholder=${t('selectionEditor.altTextPlaceholder')}
+            placeholder=${isTable
+            ? t('selectionEditor.tableAltTextPlaceholder')
+            : t('selectionEditor.altTextPlaceholder')}
             @change=${(e) => this.handleDraftAttrChange(e, 'alt')}
           />
         </div>
@@ -1040,6 +1130,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         });
     }
     applyMathDraft() {
+        if (!this.isEditorEditable()) {
+            return;
+        }
         if (!this.elementInfo || this.elementInfo.type !== 'math' || this.elementInfo.position === null || !this.mathDraft) {
             return;
         }
@@ -1140,6 +1233,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     `;
     }
     applyCitationDraft() {
+        if (!this.isEditorEditable()) {
+            return;
+        }
         if (!this.elementInfo ||
             this.elementInfo.type !== 'citation' ||
             this.elementInfo.position === null ||
@@ -1233,6 +1329,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     `;
     }
     applyCrossReferenceDraft() {
+        if (!this.isEditorEditable()) {
+            return;
+        }
         if (!this.elementInfo ||
             this.elementInfo.type !== 'link' ||
             this.elementInfo.position === null ||
@@ -1309,7 +1408,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     }
     applyHyperlinkDraft() {
         const view = this.resolvedEditor?.editorView;
-        if (!view || !this.hyperlinkDraft)
+        if (!view || !view.editable || !this.hyperlinkDraft)
             return;
         const { state } = view;
         const anchorMarkType = state.schema.marks['anchor'];
@@ -1345,7 +1444,7 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     }
     removeHyperlink() {
         const view = this.resolvedEditor?.editorView;
-        if (!view)
+        if (!view || !view.editable)
             return;
         const { state } = view;
         const anchorMarkType = state.schema.marks['anchor'];
@@ -1396,6 +1495,9 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         this.draftDirty = Boolean(this.draftAttrs && Object.keys(this.draftAttrs).length > 0);
     }
     applyDraftAttrs() {
+        if (!this.isEditorEditable()) {
+            return;
+        }
         if (!this.draftAttrs || !this.draftDirty || !this.elementInfo || this.elementInfo.position === null) {
             return;
         }
@@ -1417,8 +1519,15 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
     revertDraftAttrs() {
         this.resetDraftAttrs();
     }
+    /**
+     * Apply/Revert for pending attribute edits.
+     *
+     * Withheld when the editor is not editable: `applyDraftAttrs` refuses to write
+     * either way — that guard is the barrier — but offering an Apply that cannot
+     * act reads as a broken control rather than a read-only document.
+     */
     renderDraftActions() {
-        if (!this.draftDirty) {
+        if (!this.draftDirty || !this.isEditorEditable()) {
             return null;
         }
         return html `
@@ -1441,6 +1550,16 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
       </div>
     `;
     }
+    /**
+     * Controls that act on the selection itself rather than on its attributes.
+     *
+     * The delete action sits here, at the top of the panel, deliberately far from
+     * the Apply/Update primary at the bottom: a destructive verb never shares a
+     * region with the action a user is aiming for. It is a plain `<button>` with
+     * visible text, so it is keyboard reachable and its accessible name is the
+     * label itself. Removal is undoable through editor history, so it commits
+     * straight away rather than opening a confirmation step.
+     */
     renderSelectionControls() {
         return html `
       <div class="selection-editor-controls">
@@ -1452,9 +1571,99 @@ let SciFlowSelectionEditorElement = class SciFlowSelectionEditorElement extends
         >
           ${this.pinSelection ? t('selectionEditor.unpinSelection') : t('selectionEditor.pinSelection')}
         </button>
+        ${(() => {
+            const deletable = this.getDeletableNode();
+            return deletable
+                ? html `
+              <button
+                type="button"
+                class="selection-editor-button selection-editor-button--secondary selection-editor-button--danger"
+                @click=${this.deleteSelectedNode}
+              >
+                ${this.getDeleteLabel(deletable)}
+              </button>
+            `
+                : nothing;
+        })()}
       </div>
     `;
     }
+    /**
+     * The node the delete action would remove, or `null` when there is none the
+     * panel may act on.
+     *
+     * Only a `NodeSelection` qualifies: a text range inside a caption or paragraph
+     * belongs to the editing surface, not to a panel-level "delete this element"
+     * verb. `deleteSelection` is probed with `dispatch` omitted, so the check
+     * cannot edit the document.
+     *
+     * A view that is not editable never yields a target. A host can turn editing
+     * off at any time (`view.setProps({ editable: () => false })`) and expects the
+     * whole surface to go quiet — a side panel that still removes content would
+     * make a read-only document lose it. `view.editable` is the same signal the
+     * editor's own key and click handling reads, so the panel cannot drift from
+     * the editing surface.
+     *
+     * Withheld while the panel is pinned, and that is a limitation rather than a
+     * design goal. A pinned panel stops following the editor selection and
+     * therefore stops re-rendering, while `elementInfo.position` is never remapped
+     * through the transaction mapping — so every pinned control already acts on a
+     * position that may have drifted, and the attribute fields cope only because
+     * they re-check the node type at that position before writing. Removal has no
+     * such recheck available: after one deletion the frozen panel would still show
+     * the control, now aimed at whatever moved into that position. Making the pin
+     * remap its stored position on every document change would fix this for all
+     * pinned controls at once; until then the destructive one stays out.
+     */
+    getDeletableNode() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view || this.pinSelection || !view.editable) {
+            return null;
+        }
+        const state = view.state;
+        if (!(state.selection instanceof NodeSelection) || !deleteSelection(state)) {
+            return null;
+        }
+        return state.selection.node;
+    }
+    /**
+     * Label for the delete action, naming what is about to be removed. The visible
+     * text is the button's accessible name, so naming the node here keeps the two
+     * identical — no `aria-label` to drift from what is on screen. Anything the
+     * panel has no name for falls back to the generic wording.
+     */
+    getDeleteLabel(node) {
+        const name = this.isTableFigure(node)
+            ? t('selectionEditor.table')
+            : this.getNodeTypeName(node.type.name);
+        return name
+            ? t('selectionEditor.deleteNamedElement').replace('{element}', name)
+            : t('selectionEditor.deleteElement');
+    }
+    /**
+     * Remove the selected node through ProseMirror's own deletion command, so the
+     * change is a normal transaction and stays undoable and collab-safe. The state
+     * is read from the view at call time rather than reused from render, and the
+     * editability guard is repeated here: a host can switch the view to read-only
+     * after the button was rendered, and the rendered panel would not know.
+     */
+    deleteSelectedNode() {
+        const view = this.resolvedEditor?.editorView;
+        if (!view || !view.editable) {
+            return;
+        }
+        const state = view.state;
+        if (!(state.selection instanceof NodeSelection)) {
+            return;
+        }
+        if (!deleteSelection(state, (tr) => view.dispatch(tr))) {
+            return;
+        }
+        // Focus would otherwise be orphaned on a button that just disappeared.
+        view.focus();
+        const selection = view.state.selection;
+        this.updateElementInfo({ anchor: selection.anchor, head: selection.head });
+    }
     togglePinSelection() {
         this.pinSelection = !this.pinSelection;
         if (!this.pinSelection && this.resolvedEditor?.editorView) {

package/dist/testing/external-widget-simulator.d.ts

@@ -0,0 +1,217 @@
+/**
+ * @module external-widget-simulator
+ * @internal
+ *
+ * INTERNAL TESTING UTILITY — NOT STABLE PUBLIC API.
+ * This module is exported from the `@sciflow/editor-start` package solely to
+ * enable automated tests and the interactive demo page to verify light-DOM
+ * reachability.  Its API may change without a semver notice.  Do not depend on
+ * it in production code.
+ *
+ * A vanilla-JS simulator that models the three key behaviours of browser
+ * proofreading and AI writing extensions (e.g. Grammarly, the LanguageTool
+ * browser add-on, DeepL Write, etc.) when they interact with a page's
+ * editable surface.
+ *
+ * Design constraints
+ * ------------------
+ * - Zero runtime dependencies — only public web APIs.
+ * - Never traverses into any ShadowRoot.  Extensions operate exclusively on
+ *   the flat document tree; they have no access to shadow-DOM internals.
+ * - Suitable for both automated tests (jsdom / vitest) and manual in-browser
+ *   testing via the demo page.
+ *
+ * The three capabilities modelled
+ * --------------------------------
+ * 1. `discover(root?)` — walks the light DOM for editable targets exactly as a
+ *    real extension would: `querySelectorAll` on [contenteditable], textarea,
+ *    and text inputs, then filters to nodes whose root is the document (i.e.
+ *    not behind a shadow boundary).
+ *
+ * 2. `markRange(target, from, to, options?)` — draws underline-style overlay
+ *    markers over a character range inside a text node the way widgets render
+ *    grammar/spell highlights.  Uses Range + getClientRects() and places
+ *    absolutely-positioned <span> elements in an overlay layer that is a
+ *    sibling of the editable (never inside it).
+ *
+ * 3. DOM mutation operations that mimic extensions touching the editable
+ *    directly, bypassing the editor's own transaction mechanism:
+ *    - `injectMarker(target, from, to)` — wraps a text sub-range in a
+ *      `<span data-extn-marker="1">` (how widgets tag matches for hover
+ *      interactions without accepting/rejecting them yet).
+ *    - `applyCorrection(target, from, to, replacement)` — replaces a text
+ *      sub-range via raw Range manipulation (the "accept suggestion" action).
+ *
+ * Threat/usage model
+ * ------------------
+ * A ProseMirror contenteditable mounted inside a shadow root is INVISIBLE to
+ * extensions because they do not call `shadowRoot.querySelector`.  This
+ * simulator encodes that exact distinction: `discover()` returns only light-DOM
+ * editables whose `getRootNode() === document`.  The fact that a slotted
+ * element satisfies this condition while a shadow-buried element does not is
+ * the core regression guard for the light-DOM spike (Option B).
+ *
+ * jsdom limitation
+ * ----------------
+ * `getClientRects()` is not implemented in jsdom and always returns an empty
+ * DOMRectList.  `markRange()` therefore cannot be meaningfully tested in the
+ * standard vitest suite — it is exercised through the manual demo page instead.
+ * `discover()`, `injectMarker()`, and `applyCorrection()` are all jsdom-safe
+ * and form the automated test surface.
+ */
+/** An editable element found by the simulator's discovery walk. */
+export interface EditableTarget {
+    /** The discovered element. */
+    element: HTMLElement;
+    /**
+     * The root node of the element.  For a light-DOM element this will be the
+     * `Document`; for a shadow-buried element it would be a `ShadowRoot`.
+     * The simulator's `discover()` only returns elements where this is
+     * `document` — this field is exposed so tests can assert it explicitly.
+     */
+    rootNode: Node;
+    /** True when the element is inside the light DOM (`rootNode === document`). */
+    isLightDom: boolean;
+}
+/** Options for the `markRange` overlay operation. */
+export interface MarkRangeOptions {
+    /** CSS color for the underline.  Defaults to `'#ef4444'` (red). */
+    color?: string;
+    /**
+     * How many pixels below the text baseline the underline is offset.
+     * Defaults to `2`.
+     */
+    offsetY?: number;
+    /** CSS z-index for the overlay layer.  Defaults to `'9999'`. */
+    zIndex?: string;
+}
+/** A marker handle returned by `injectMarker`, used for cleanup. */
+export interface InjectedMarker {
+    /** The `<span data-extn-marker="1">` wrapper element. */
+    span: HTMLSpanElement;
+    /** Removes the injected span and restores the original text layout. */
+    remove(): void;
+}
+/** Result of `applyCorrection`. */
+export interface CorrectionResult {
+    /** The text that was replaced. */
+    replaced: string;
+    /** The replacement text that was inserted. */
+    inserted: string;
+}
+/**
+ * Walk the light DOM for editable targets, exactly as browser extensions do.
+ *
+ * Extensions use `document.querySelectorAll` (or equivalent TreeWalker
+ * traversals) to find `[contenteditable]`, `textarea`, and `input[type=text]`.
+ * Critically, they do NOT call `shadowRoot.querySelectorAll` or otherwise
+ * traverse into shadow trees — they only see what is in the flat document tree.
+ *
+ * This function replicates that: it queries from `root` (defaulting to
+ * `document`) and then filters the results to those whose `getRootNode()` is
+ * the passed `root`.  An editable that lives inside a shadow root will NOT
+ * satisfy this condition and will NOT be returned.
+ *
+ * @param root  The root to query from.  Defaults to `document`.
+ * @returns     An array of `EditableTarget` objects for each discovered field.
+ *
+ * @example
+ * // Asserts the editor's contenteditable is reachable from the document root:
+ * const targets = discover(document);
+ * const ce = targets.find(t => t.element.hasAttribute('contenteditable'));
+ * assert(ce?.isLightDom === true);
+ * assert(ce?.rootNode === document);
+ */
+export declare function discover(root?: Document | Element): EditableTarget[];
+/**
+ * Position overlay underline markers over a character range inside `target`.
+ *
+ * Mimics how extensions draw underlines: they create a DOM Range, call
+ * `getClientRects()` to obtain the line boxes, and then absolutely-position
+ * overlay `<span>` elements in a sibling container at those coordinates.
+ * Critically, the overlay is NOT inserted inside the contenteditable — it is
+ * a sibling to avoid invalidating the editable's DOM tree from the extension's
+ * perspective.
+ *
+ * NOTE: `getClientRects()` always returns an empty list in jsdom.  This
+ * function is a no-op in that environment and is intended for manual
+ * in-browser verification via the demo page.  The automated test suite
+ * tests `discover`, `injectMarker`, and `applyCorrection` instead.
+ *
+ * @param target   The editable element to overlay.
+ * @param from     Character offset (from the start of `target.textContent`) of
+ *                 the range start.
+ * @param to       Character offset of the range end.
+ * @param options  Visual options.
+ * @returns        The overlay container element, or `null` when `getClientRects`
+ *                 returned nothing (jsdom / hidden element).
+ */
+export declare function markRange(target: HTMLElement, from: number, to: number, options?: MarkRangeOptions): HTMLElement | null;
+/**
+ * Wrap a character sub-range of `target` in a `<span data-extn-marker="1">`.
+ *
+ * This is what extensions do to tag a match for subsequent accept/reject
+ * interactions — they insert a wrapper span *inside* the contenteditable via
+ * raw DOM Range manipulation without going through the editor's transaction
+ * system.
+ *
+ * From ProseMirror's perspective this is a foreign DOM mutation.  ProseMirror's
+ * DOMObserver will observe the mutation and attempt to reconcile its internal
+ * model.  The mutation-tolerance tests in the spec verify that this does not
+ * corrupt the document or cause PM to throw.
+ *
+ * @param target   The contenteditable element to mutate.
+ * @param from     Character offset of the range start (within `target.textContent`).
+ * @param to       Character offset of the range end.
+ * @returns        An `InjectedMarker` handle with a `remove()` method for cleanup.
+ *                 Returns `null` when the range cannot be resolved.
+ */
+export declare function injectMarker(target: HTMLElement, from: number, to: number): InjectedMarker | null;
+/**
+ * Replace a character sub-range of `target` with `replacement` via raw DOM.
+ *
+ * This is the "accept suggestion" operation: the extension overwrites a word
+ * by creating a Range, deleting its contents, and inserting a new text node.
+ * It does NOT fire a ProseMirror transaction.
+ *
+ * The test that calls this should follow up with a normal PM transaction (e.g.
+ * `view.dispatch(view.state.tr.insertText(...))`) to verify that ProseMirror
+ * reconciles the foreign mutation cleanly and does not produce corrupted or
+ * duplicated content.
+ *
+ * @param target       The contenteditable element.
+ * @param from         Character offset of the range to replace.
+ * @param to           Character offset of the range end.
+ * @param replacement  The text to insert in place of the matched range.
+ * @returns            A `CorrectionResult` describing what was swapped, or
+ *                     `null` when the range cannot be resolved.
+ */
+export declare function applyCorrection(target: HTMLElement, from: number, to: number, replacement: string): CorrectionResult | null;
+/** A character-offset range within an element's flat `textContent`. */
+export interface TextRange {
+    from: number;
+    to: number;
+}
+/**
+ * Find all occurrences of `searchString` within `target.textContent` and
+ * return their character-offset ranges.
+ *
+ * This is the bridge between "a word I want to underline" and the `{from, to}`
+ * pair that `markRange`, `injectMarker`, and `applyCorrection` consume.
+ * Extensions compute positions exactly this way: read the full `textContent`
+ * of the editable as one flat string, locate every match, then use those
+ * offsets to build DOM Ranges.
+ *
+ * @param target        The element whose `textContent` is searched.
+ * @param searchString  The literal string to find (case-sensitive).
+ * @returns             Array of `{from, to}` ranges, one per occurrence,
+ *                      in document order.  Empty array when there are no matches.
+ *
+ * @example
+ * const hits = findTextOccurrences(editable, 'SciFlow');
+ * for (const { from, to } of hits) {
+ *   markRange(editable, from, to, { color: '#f97316' });
+ * }
+ */
+export declare function findTextOccurrences(target: HTMLElement, searchString: string): TextRange[];
+//# sourceMappingURL=external-widget-simulator.d.ts.map

package/dist/testing/external-widget-simulator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"external-widget-simulator.d.ts","sourceRoot":"","sources":["../../src/testing/external-widget-simulator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAMH,mEAAmE;AACnE,MAAM,WAAW,cAAc;IAC7B,8BAA8B;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,+EAA+E;IAC/E,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,qDAAqD;AACrD,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,yDAAyD;IACzD,IAAI,EAAE,eAAe,CAAC;IACtB,uEAAuE;IACvE,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,mCAAmC;AACnC,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,QAAQ,CAAC,IAAI,GAAE,QAAQ,GAAG,OAAkB,GAAG,cAAc,EAAE,CAwC9E;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,OAAO,GAAE,gBAAqB,GAC7B,WAAW,GAAG,IAAI,CA8CpB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACT,cAAc,GAAG,IAAI,CA0BvB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,MAAM,GAClB,gBAAgB,GAAG,IAAI,CASzB;AAMD,uEAAuE;AACvE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,EACnB,YAAY,EAAE,MAAM,GACnB,SAAS,EAAE,CAYb"}