@stll/folio-vue 0.8.1 → 0.10.0

package/dist/components/AutocompleteCaretOverlay.types.d.ts

@@ -0,0 +1,18 @@
+export type AutocompleteCaretRect = {
+    /** Overlay-relative pixel x. */
+    x: number;
+    /** Overlay-relative pixel y (top of the cursor line). */
+    y: number;
+    /** Line height in pixels at the anchor. */
+    lineHeight: number;
+    /** Available width from the caret to the page's right content edge. */
+    maxWidth?: number | undefined;
+};
+export type AutocompleteCaretOverlayProps = {
+    /** Position of the autocomplete anchor, or null while idle. */
+    caret: AutocompleteCaretRect | null;
+    /** The full streamed ghost text so far. */
+    text: string;
+    /** Whether tokens are still arriving. */
+    isStreaming: boolean;
+};

package/dist/components/DocxEditor/pagedEditorRef.d.ts

@@ -13,9 +13,8 @@ import { Document } from '@stll/folio-core/types/document';
  * `useDocxEditorRefApi.ts` synthesizes one from the primitives it already
  * holds (the headless `FolioEditor` controller, `editorView`, `layout`, and
  * the pages-scroll helpers) rather than tearing a component ref off a
- * component that does not exist. `getHfView` is the one method with no
- * backing implementation yet (no persistent hidden header/footer PM view in
- * Vue) and stays a documented no-op; see its call site for the exact reason.
+ * component that does not exist. `getHfView` delegates to the shared
+ * persistent header/footer editor manager.
  *
  * TODO(vue): re-home to the Vue PagedEditor component when it lands.
  */
@@ -28,6 +27,10 @@ export type PagedEditorRef = {
     getState: () => EditorState | null;
     /** Get the ProseMirror EditorView. */
     getView: () => EditorView | null;
+    /** Get the currently active body, header/footer, or note-story view. */
+    getActiveView: () => EditorView | null;
+    /** Close the visible note story, if one is active. */
+    closeNoteStory: () => void;
     /**
      * Look up the persistent hidden HF EditorView by `rId`. Returns null when the
      * slot isn't mounted (no HF for that rId, or the hidden host hasn't mounted).
@@ -71,6 +74,16 @@ export type PagedEditorRef = {
      * Returns whether a matching paragraph exists in the ProseMirror document.
      */
     scrollToParaId: (paraId: string, options?: ScrollToParaIdOptions) => boolean;
+    /**
+     * Set (or clear, with `null`) the persistent passage highlight overlay. The
+     * range is projected onto the painted pages and painted with a translucent
+     * wash; it does not move the PM selection. Replaces any previous highlight.
+     * The overlay is cleared automatically on the next doc-changing transaction.
+     */
+    setPassageHighlight: (range: {
+        from: number;
+        to: number;
+    } | null) => void;
     /**
      * Resolve the page number (1-indexed) that contains the given PM position, or
      * null if no layout is available yet. Works for unrendered pages too via the

package/dist/components/DocxEditor/types.d.ts

@@ -307,6 +307,21 @@ export type DocxEditorApplyDocumentOperationsOptions = {
     batch: FolioDocumentOperationBatch;
     author?: string;
 };
+/**
+ * Outcome of {@link DocxEditorRef.highlightPassage}:
+ * - `"passage"`: the text matched inside the block; scrolled there and painted
+ *   the range highlight.
+ * - `"block"`: the text did not match but the block resolved; behaved like
+ *   {@link DocxEditorRef.scrollToBlock} (scroll + whole-paragraph flash where a
+ *   paraId exists).
+ * - `"none"`: the block did not resolve; no-op.
+ */
+export type HighlightPassageResult = "passage" | "block" | "none";
+export type HighlightPassageOptions = {
+    blockId: string;
+    text: string;
+    snapshot?: FolioAIEditSnapshot;
+};
 /**
  * Imperative handle exposed by the DocxEditor component.
  */
@@ -411,6 +426,18 @@ export type DocxEditorRef = {
      * accept. Without `snapshot`, falls back to a fresh-from-live-doc snapshot.
      */
     scrollToBlock: (blockId: string, snapshot?: FolioAIEditSnapshot) => boolean;
+    /**
+     * Resolve a text passage inside a block, scroll to it, and paint a persistent
+     * translucent highlight over the matched range. Unlike {@link scrollToBlock},
+     * the passage outcome does not move the PM selection, so the highlight is not
+     * confused with a selection. Replaces any previous passage highlight. Returns
+     * which outcome happened; see {@link HighlightPassageResult}. The highlight is
+     * ephemeral view state: cleared on the next doc-changing transaction and by
+     * {@link clearPassageHighlight}.
+     */
+    highlightPassage: (options: HighlightPassageOptions) => HighlightPassageResult;
+    /** Clear the passage highlight painted by {@link highlightPassage}, if any. */
+    clearPassageHighlight: () => void;
     /** Resolve a stable block or text-range target and reveal it in the editor. */
     showInDocument: (target: FolioDocumentNavigationTarget, snapshot?: FolioAIEditSnapshot) => boolean;
     /**

package/dist/composables/index.d.ts

@@ -4,8 +4,7 @@
  * Vue composables mirroring the React `hooks` subpath — history, table
  * selection, find/replace, clipboard, zoom, tracked-changes, visual-line
  * navigation, and the high-level `useDocxEditor` host composable. Only the
- * composables the fork has ported are re-exported (React's `useAutoSave` and
- * `useCommentSidebarItems` have no Vue equivalent yet).
+ * composables the fork has ported are re-exported.
  *
  * @example
  * ```ts
@@ -16,6 +15,7 @@
  * @public
  */
 export * from './useClipboard';
+export * from './useColorMode';
 export * from './useDocxEditor';
 export * from './useDragAutoScroll';
 export * from './useFindReplace';

package/dist/composables/useColorMode.d.ts

@@ -1,8 +1,21 @@
-import { ComputedRef } from 'vue';
+import { App, ComputedRef, MaybeRefOrGetter } from 'vue';
 import { ColorMode } from '../utils/colorMode';
+/** Color mode used when a host does not provide one. */
+export declare const defaultColorMode: ColorMode;
 /**
- * Resolve the effective dark flag from a reactive `colorMode`. `'system'`
+ * Provide a reactive color mode to descendant folio components.
+ *
+ * Call this from a parent component's setup function. For app-wide setup, use
+ * {@link colorModePlugin} instead.
+ */
+export declare const provideColorMode: (colorMode?: MaybeRefOrGetter<ColorMode>) => void;
+/** Vue plugin form: `app.use(colorModePlugin, "system")`. */
+export declare const colorModePlugin: {
+    install(app: App, colorMode?: MaybeRefOrGetter<ColorMode>): void;
+};
+/**
+ * Resolve the effective dark flag from the inherited color mode. `'system'`
  * follows the OS via `subscribeSystemDark` (SSR-safe; re-syncs on entry).
- * Mirrors the React adapter's inline colorMode logic via the shared core helpers.
  */
-export declare function useColorMode(colorMode: () => ColorMode): ComputedRef<boolean>;
+export declare function useColorMode(): ComputedRef<boolean>;
+export type { ColorMode } from '../utils/colorMode';

package/dist/composables/useContextMenus.d.ts

@@ -48,6 +48,9 @@ export type UseContextMenusOptions = {
         from: number;
         to: number;
     }) => void;
+    onCopy?: () => void;
+    onCut?: () => void;
+    onPaste?: () => void;
 };
 export type UseContextMenusReturn = {
     contextMenu: Ref<TextContextMenuState>;

package/dist/composables/useDocxEditor.d.ts

@@ -2,9 +2,13 @@ import { MaybeRefOrGetter, Ref } from 'vue';
 import { EditorState, Plugin } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { FolioEditor } from '@stll/folio-core/controller/folioEditor';
+import { HeaderFooterPartKind } from '@stll/folio-core/controller/headerFooterEditorManager';
+import { NoteStoryKey } from '@stll/folio-core/controller/noteEditorManager';
+import { HiddenProseMirrorCollaboration, HiddenProseMirrorRemoteSelection } from '@stll/folio-core/controller/hiddenEditorManager';
 import { FolioSelectiveSaveFlags } from '@stll/folio-core/docx/selectiveSaveFlags';
 import { TripwireResult } from '@stll/folio-core/docx/selectiveSaveTripwire';
 import { FlowBlock, Layout, Measure } from '@stll/folio-core/layout-engine/types';
+import { LayoutSelectionGate } from '@stll/folio-core/paged-layout/LayoutSelectionGate';
 import { CommandMap } from '@stll/folio-core/prosemirror/extensions/types';
 import { AnonymizationMatch } from '@stll/folio-core/prosemirror/plugins/anonymizationDecorations';
 import { TemplateSlashMenuKeyAction, TemplateSlashMenuState } from '@stll/folio-core/prosemirror/plugins/templateSlashMenu';
@@ -13,12 +17,20 @@ import { DocxInput } from '@stll/folio-core/utils/docxInput';
 export type UseDocxEditorOptions = {
     /** Container element that hosts the off-screen ProseMirror editor. */
     hiddenContainer: Ref<HTMLElement | null>;
+    /** Optional separate host for persistent header/footer ProseMirror views. */
+    hiddenHeaderFooterContainer?: Ref<HTMLElement | null>;
+    /** Visible host for the active footnote or endnote ProseMirror story. */
+    noteEditorContainer?: Ref<HTMLElement | null>;
     /** Container element the paginated pages are painted into. */
     pagesContainer: Ref<HTMLElement | null>;
     /** Whether the editor is read-only. Reactive. */
     readOnly?: MaybeRefOrGetter<boolean>;
     /** Gap between pages in pixels. */
     pageGap?: number;
+    /** Whether to paint each page's effective body-content boundary. Reactive. */
+    showMarginGuides?: MaybeRefOrGetter<boolean | undefined>;
+    /** CSS color used for margin guides. Reactive. */
+    marginGuideColor?: MaybeRefOrGetter<string | undefined>;
     /**
      * Stable identity of the loaded document (same across internal edits, distinct
      * per loaded file). Threaded to the hidden-editor manager's external-load
@@ -36,6 +48,8 @@ export type UseDocxEditorOptions = {
     author?: MaybeRefOrGetter<string>;
     /** External ProseMirror plugins supplied by the host app. */
     externalPlugins?: Plugin[];
+    /** Reactive Yjs collaboration owner and the ProseMirror binding plugins. */
+    collaboration?: MaybeRefOrGetter<UseDocxEditorCollaboration | undefined>;
     /**
      * Fires with the anonymization decoration plugin's current match list on
      * mount, term push, and every doc edit. The anonymization plugin is always
@@ -62,6 +76,12 @@ export type UseDocxEditorOptions = {
     onSelectionUpdate?: (state: EditorState) => void;
     /** Callback when the hidden EditorView is created or torn down. */
     onEditorViewReady?: (view: EditorView | null) => void;
+    /** Fires when the editor receives a copy event. */
+    onCopy?: () => void;
+    /** Fires when an editable editor receives a cut event. */
+    onCut?: () => void;
+    /** Fires when an editable editor receives a paste event. */
+    onPaste?: () => void;
     /** Callback when a read-only user action would mutate the document. */
     onReadOnlyEditAttempt?: () => void;
     /**
@@ -77,6 +97,15 @@ export type UseDocxEditorOptions = {
      */
     onSelectiveSaveTripwire?: ((result: TripwireResult) => void) | undefined;
 };
+export type UseDocxEditorCollaboration = HiddenProseMirrorCollaboration & {
+    plugins?: Plugin[] | undefined;
+};
+export type HeaderFooterSelectionState = {
+    from: number;
+    kind: HeaderFooterPartKind;
+    rId: string;
+    to: number;
+};
 export type UseDocxEditorReturn = {
     /** The headless controller (imperative API + layout access + events). */
     editor: FolioEditor;
@@ -84,6 +113,12 @@ export type UseDocxEditorReturn = {
     editorView: Ref<EditorView | null>;
     /** Latest editor state, updated on each transaction. */
     editorState: Ref<EditorState | null>;
+    /** Remote collaborative cursors decoded into body ProseMirror positions. */
+    remoteSelections: Ref<HiddenProseMirrorRemoteSelection[]>;
+    /** Selection in the currently active persistent header/footer view. */
+    headerFooterSelection: Ref<HeaderFooterSelectionState | null>;
+    /** The note story currently open in the visible note editor. */
+    activeNoteStory: Ref<NoteStoryKey | null>;
     /** True once the hidden view is mounted and a document is loaded. */
     isReady: Ref<boolean>;
     /**
@@ -101,6 +136,8 @@ export type UseDocxEditorReturn = {
     blocks: Ref<FlowBlock[]>;
     /** Measures from the latest layout pass — the range-projection fallback. */
     measures: Ref<Measure[]>;
+    /** Gate that schedules overlay work only after the matching layout paint. */
+    syncCoordinator: LayoutSelectionGate;
     /** Load a DOCX from a binary buffer / Blob / File. */
     loadBuffer: (buffer: DocxInput) => Promise<void>;
     /** Load an already-parsed `Document` directly. */
@@ -113,6 +150,16 @@ export type UseDocxEditorReturn = {
     getDocument: () => Document | null;
     /** Publish a fresh Document object (e.g. after HF materialisation). */
     setDocument: (doc: Document) => void;
+    /** Resolve a persistent header/footer EditorView by relationship id. */
+    getHeaderFooterView: (rId: string) => EditorView | null;
+    /** Synchronize persistent header/footer views after a document-model change. */
+    syncHeaderFooterViews: () => void;
+    /** Open an existing footnote or endnote story. */
+    openNoteStory: (story: NoteStoryKey) => void;
+    /** Close the visible note-story editor. */
+    closeNoteStory: () => void;
+    /** Resolve the active note-story view. */
+    getActiveNoteView: () => EditorView | null;
     /** Access the extension command map for invoking marks / nodes / features. */
     getCommands: () => CommandMap;
     /** Focus the hidden ProseMirror view. */

package/dist/composables/useDocxEditorRefApi.d.ts

@@ -42,6 +42,17 @@ export type UseDocxEditorRefApiOptions = {
      * Vue analogue of React's `PagedEditorRef.scrollToPosition`.
      */
     scrollVisiblePositionIntoView: (pmPos: number) => void;
+    /**
+     * Set (or clear, with `null`) the persistent passage-highlight range that the
+     * `PassageHighlightOverlay` projects and paints. Backs `highlightPassage` /
+     * `clearPassageHighlight`; the Vue analogue of React's
+     * `PagedEditorRef.setPassageHighlight`. The overlay is cleared automatically
+     * on the next doc-changing transaction (owned by DocxEditor.vue).
+     */
+    setPassageHighlight: (range: {
+        from: number;
+        to: number;
+    } | null) => void;
     /** Editor author, used as the default operation author for AI edits. */
     author: () => string;
     /**
@@ -55,6 +66,9 @@ export type UseDocxEditorRefApiOptions = {
     setComments: (comments: Comment[]) => void;
     focus: () => void;
     getDocument: () => Document | null;
+    getActiveView: () => EditorView | null;
+    closeNoteStory: () => void;
+    getHeaderFooterView: (rId: string) => EditorView | null;
     setZoom: (zoom: number) => void;
     /** useDocxEditor.save returns a Blob; the ref surface exposes an ArrayBuffer. */
     save: (options?: {

package/dist/composables/useFindReplace.d.ts

@@ -1,22 +1,24 @@
-/**
- * Vue port of the find/replace UI-state container.
- *
- * PORT-BLOCKED (missing `utils/findReplace` UI-util): upstream builds this
- * composable's entire state on three symbols from
- * `@eigenpal/docx-editor-core/utils/findReplace` — the `FindMatch` and
- * `FindOptions` data contracts and the `createDefaultFindOptions()` factory.
- * That util is absent from our fork: it is neither in `@stll/folio-core`
- * (whose search surface is the lower-level `prosemirror/findReplaceSelection`
- * `FindMatchPosition` + `managers/FindReplaceManager`, a different shape) nor
- * in our ported Vue `../utils/*`. Every field of the reactive state
- * (`options: createDefaultFindOptions()`, `matches: FindMatch[]`, the
- * `currentMatch`/`setMatches`/`goToMatch` surface) depends on those types, so
- * there is no working subset to port without fabricating the data contract.
- *
- * Unblock: port upstream `packages/core/src/utils/findReplace.ts` (pure, no
- * runtime deps) into the Vue package as `../utils/findReplace.ts`, reconciling
- * its `FindMatch`/`FindOptions` with core's `FindMatchPosition` /
- * `FindReplaceManager`, then restore the full composable — its body is a direct
- * `reactive()` translation of the React hook with no other blockers.
- */
-export {};
+import { ComputedRef, Ref, ShallowRef } from 'vue';
+import { EditorView } from 'prosemirror-view';
+import { ProseMirrorFindMatch } from '@stll/folio-core/prosemirror/findReplaceSelection';
+import { FindOptions } from '@stll/folio-core/utils/findReplace';
+export type UseFindReplaceOptions = {
+    editorView: Readonly<Ref<EditorView | null>>;
+    scrollVisiblePositionIntoView?: (pmPos: number) => void;
+};
+export type UseFindReplaceReturn = {
+    searchText: Ref<string>;
+    replaceText: Ref<string>;
+    options: FindOptions;
+    matches: ShallowRef<ProseMirrorFindMatch[]>;
+    currentIndex: Ref<number>;
+    currentMatch: ComputedRef<ProseMirrorFindMatch | null>;
+    performSearch: () => ProseMirrorFindMatch[];
+    goToMatch: (index: number) => boolean;
+    findNext: () => ProseMirrorFindMatch | null;
+    findPrevious: () => ProseMirrorFindMatch | null;
+    replaceCurrent: () => boolean;
+    replaceAll: () => number;
+    clear: () => void;
+};
+export declare function useFindReplace({ editorView, scrollVisiblePositionIntoView, }: UseFindReplaceOptions): UseFindReplaceReturn;

package/dist/composables/useFontLifecycle.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+import { FontDefinition } from '../components/DocxEditor/types';
+export type UseFontLifecycleOptions = {
+    isReady: Ref<boolean>;
+    getDocument: () => {
+        originalBuffer?: ArrayBuffer | null;
+    } | null;
+    fonts: () => ReadonlyArray<FontDefinition> | undefined;
+    remeasure: () => void;
+};
+export type FontLifecycleDependencies = {
+    loadEmbedded: (buffer: ArrayBuffer) => Promise<FontFace[]>;
+    loadHost: (fonts: ReadonlyArray<FontDefinition> | undefined) => Promise<FontFace[]>;
+    remove: (faces: readonly FontFace[]) => void;
+};
+/**
+ * Register document-embedded and host-provided fonts for the lifetime of their
+ * sources. Async results from a stale document or prop value are immediately
+ * removed, preventing one editor load from leaking faces into the next.
+ */
+export declare function useFontLifecycle(options: UseFontLifecycleOptions, dependencies?: FontLifecycleDependencies): void;

package/dist/composables/useKeyboardShortcuts.d.ts

@@ -1,6 +1,5 @@
 import { Ref } from 'vue';
 export type UseKeyboardShortcutsOptions = {
-    showKeyboardShortcuts: Ref<boolean>;
     showFindReplace: Ref<boolean>;
     showHyperlink: Ref<boolean>;
     /** From useZoom — handles Ctrl+= / Ctrl+- / Ctrl+0. */

package/dist/composables/usePagesPointer.d.ts

@@ -1,8 +1,8 @@
 import { Ref, ShallowRef } from 'vue';
 import { Command } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
-import { HeaderFooter, BlockContent } from '@stll/folio-core/types/content';
 import { Document } from '@stll/folio-core/types/document';
+import { NoteStoryKey } from '@stll/folio-core/controller/noteEditorManager';
 import { Layout } from '@stll/folio-core/layout-engine';
 import { ImageSelectionInfo } from '../components/imageSelectionTypes';
 import { HyperlinkPopupData } from '../components/ui/hyperlinkPopupTypes';
@@ -19,9 +19,10 @@ export type TableInsertButton = {
     cellPmPos: number;
 };
 export type HfEditState = {
+    isFirstPage: boolean;
+    pageNumber: number;
     position: "header" | "footer";
     rId: string | null;
-    headerFooter: HeaderFooter | null;
     targetRect: {
         top: number;
         left: number;
@@ -42,29 +43,29 @@ export type UsePagesPointerOptions = {
     imageInteracting: Ref<boolean>;
     hyperlinkPopupData: Ref<HyperlinkPopupData | null>;
     readOnly: Ref<boolean>;
+    showHeaderFooterEditing: Ref<boolean>;
     zoom: Ref<number>;
     layout: Ref<Layout | null>;
     tableResize: TableResizeApi;
     getCommands: () => Commands;
     getDocument: () => Document | null;
     reLayout: () => void;
-    emit: (event: string, ...args: unknown[]) => void;
+    onDocumentChange: (document: Document) => void;
     clearOverlay: () => void;
-    /**
-     * Re-mount HF EditorViews when `package.headers/footers` content changes —
-     * exposed by `useDocxEditor.syncHfPMs`. Called after every save so the
-     * persistent PM points at the new HeaderFooter object. Optional so existing
-     * consumers can no-op until they wire it through.
-     */
-    syncHfPMs?: () => void;
+    /** Synchronize persistent header/footer views after document-model changes. */
+    syncHfPMs: () => void;
     /** Resolve the persistent EditorView for an HF instance (for click routing). */
-    getHfPmView?: (hf: HeaderFooter) => EditorView | null;
+    getHfPmView: (rId: string) => EditorView | null;
     /**
      * Replace the loaded Document — used by HF materialisation to publish a
      * fresh Document object instead of mutating in place. Optional; if absent,
      * callers fall back to in-place mutation + `syncHfPMs()`.
      */
-    setDocument?: (doc: Document) => void;
+    setDocument: (doc: Document) => void;
+    /** Open a footnote or endnote story from a painted reference/body. */
+    openNoteStory: (story: NoteStoryKey) => void;
+    closeNoteStory: () => void;
+    getActiveNoteView: () => EditorView | null;
 };
 export type UsePagesPointerReturn = {
     tableInsertButton: Ref<TableInsertButton | null>;
@@ -80,7 +81,7 @@ export type UsePagesPointerReturn = {
     handlePagesDoubleClick: (event: MouseEvent) => void;
     handleTableInsertClick: (event: MouseEvent) => void;
     clearTableInsertTimer: () => void;
-    handleHfSave: (content: BlockContent[]) => void;
+    handleHfSave: () => void;
     handleHfRemove: () => void;
 };
 export declare function usePagesPointer(opts: UsePagesPointerOptions): UsePagesPointerReturn;

package/dist/composables/useRemoteSelectionSync.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+import { HiddenProseMirrorRemoteSelection } from '@stll/folio-core/controller/hiddenEditorManager';
+import { LayoutSelectionGate } from '@stll/folio-core/paged-layout/LayoutSelectionGate';
+export type UseRemoteSelectionSyncOptions = {
+    pagesRef: Ref<HTMLElement | null>;
+    remoteSelections: Ref<HiddenProseMirrorRemoteSelection[]>;
+    syncCoordinator: LayoutSelectionGate;
+    zoom: Ref<number>;
+};
+export declare const useRemoteSelectionSync: (options: UseRemoteSelectionSyncOptions) => void;

package/dist/composables/useSelectionSync.d.ts

@@ -1,30 +1,17 @@
-/**
- * Selection-overlay composable — owns the text-caret blink + selection-rect
- * painter, the cell-selection highlight, and the image-selection sync that
- * re-derives `selectedImage` from the live PM NodeSelection.
- *
- * PORT-BLOCKED (multiple absent dependencies):
- *   - `applyCellSelectionHighlight` — absent from our core. Upstream ships it in
- *     `layout-bridge/cellSelectionHighlight.ts`; our `layout-bridge` barrel does
- *     not expose it (see CORE-API-MAP Table 4, PORT). The multi-cell highlight
- *     branch cannot run without it.
- *   - `findImageElement` — absent from our core `layout-painter` barrel (which
- *     exposes only `renderPages`/`LayoutPainter`/registry); it is a PORT item.
- *     The image-overlay sync (`syncSelectedImageToSelection`) depends on it.
- *   - `../components/imageSelectionTypes` (`ImageSelectionInfo`) — the Vue-package
- *     image-selection type module has not been ported.
- *   - `../styles/zIndex` (`Z_INDEX`) — the Vue-package z-index token module does
- *     not exist in our fork (there is no `styles/` dir).
- *
- * The DOM primitives it also uses DO resolve, but at drifted paths
- * (`getSelectionRectsFromDom`/`getCaretPositionFromDom` →
- * `@stll/folio-core/layout-bridge/dom/clickToPositionDom`; `findBodyPmAnchor` →
- * `@stll/folio-core/layout-bridge/dom/findBodyPmSpans`). With the four blockers
- * above there is no coherent working subset, so the whole composable is blocked.
- *
- * Unblock: PORT `applyCellSelectionHighlight` and `findImageElement` into core
- * (or a core barrel), then port the `imageSelectionTypes` + `styles/zIndex`
- * Vue-package modules, and re-point the DOM-primitive imports to the drifted
- * paths above.
- */
-export {};
+import { Ref, ShallowRef } from 'vue';
+import { EditorView } from 'prosemirror-view';
+import { LayoutSelectionGate } from '@stll/folio-core/paged-layout/LayoutSelectionGate';
+import { ImageSelectionInfo } from '../components/imageSelectionTypes';
+export type UseSelectionSyncOptions = {
+    editorView: Ref<EditorView | null>;
+    pagesRef: Ref<HTMLElement | null>;
+    zoom: Ref<number>;
+    selectedImage: ShallowRef<ImageSelectionInfo | null>;
+    syncCoordinator: LayoutSelectionGate;
+    imageInteracting?: Ref<boolean>;
+};
+export type UseSelectionSyncReturn = {
+    clearOverlay: () => void;
+    updateSelectionOverlay: () => void;
+};
+export declare const useSelectionSync: (opts: UseSelectionSyncOptions) => UseSelectionSyncReturn;

package/dist/composables.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./useZoom-C7jhL696.cjs");let t=require("vue"),n=require("prosemirror-history"),r=require("@stll/folio-core/utils/clipboard"),i=require("@stll/folio-core/managers/ClipboardManager"),a=require("@stll/folio-core/managers/TableSelectionManager"),o=require("@stll/folio-core/prosemirror/utils/visualLineNavigation"),s=require("@stll/folio-core/prosemirror/utils/extractTrackedChanges");function c(e={}){let{onCopy:n,onCut:i,onPaste:a,cleanWordFormatting:o=!0,editable:s=!0,onError:c}=e,l=(0,t.ref)(!1),u=(0,t.ref)(null),d=c?{onError:c}:{};async function f(e){if(l.value)return!1;l.value=!0;try{let t=await(0,r.copyRuns)(e.runs,d);return t&&n?.(e),t}finally{l.value=!1}}async function p(e){if(l.value||!s)return!1;l.value=!0;try{let t=await(0,r.copyRuns)(e.runs,d);return t&&i?.(e),t}finally{l.value=!1}}async function m(e=!1){if(l.value||!s)return null;l.value=!0;try{if(navigator.clipboard&&navigator.clipboard.read){let t=await navigator.clipboard.read(),n=``,i=``;for(let e of t)e.types.includes(`text/html`)&&(n=await(await e.getType(`text/html`)).text()),e.types.includes(`text/plain`)&&(i=await(await e.getType(`text/plain`)).text());e&&(n=``);let s=(0,r.parseClipboardHtml)(n,i,o);return u.value=s,a?.(s,e),s}return null}catch(e){return c?.(e instanceof Error?e:Error(String(e))),null}finally{l.value=!1}}return{copy:f,cut:p,paste:m,isProcessing:l,lastPastedContent:u}}function l({isOpen:e,onClose:n,align:r=`left`}){let i=(0,t.ref)(null),a=(0,t.ref)(null),o=(0,t.ref)({position:`fixed`,top:`0px`,left:`0px`,zIndex:1e4});function s(e,t){o.value={position:`fixed`,top:e+`px`,left:t+`px`,zIndex:1e4}}function c(e){let t=e.target;t instanceof Node&&i.value&&!i.value.contains(t)&&a.value&&!a.value.contains(t)&&n()}function l(e){e.key===`Escape`&&n()}function u(e){let t=e.target;t instanceof Node&&a.value&&a.value.contains(t)||n()}function d(){document.addEventListener(`mousedown`,c),document.addEventListener(`keydown`,l),window.addEventListener(`scroll`,u,!0)}function f(){document.removeEventListener(`mousedown`,c),document.removeEventListener(`keydown`,l),window.removeEventListener(`scroll`,u,!0)}(0,t.watch)(e,e=>{if(!e){f();return}let t=i.value;if(!t)return;let n=t.getBoundingClientRect();r===`right`?requestAnimationFrame(()=>{let e=a.value;if(e){let t=e.getBoundingClientRect();s(n.bottom+4,n.right-t.width)}else s(n.bottom+4,n.left)}):s(n.bottom+4,n.left),d()}),(0,t.onScopeDispose)(f);function p(e){e.preventDefault(),e.stopPropagation()}return{containerRef:i,dropdownRef:a,dropdownStyle:o,handleMouseDown:p}}function u(e,r){let i=(0,t.computed)(()=>{r.value;let t=e.value;return t?(0,n.undoDepth)(t.state)>0:!1}),a=(0,t.computed)(()=>{r.value;let t=e.value;return t?(0,n.redoDepth)(t.state)>0:!1});function o(){let t=e.value;return t?(0,n.undo)(t.state,t.dispatch):!1}function s(){let t=e.value;return t?(0,n.redo)(t.state,t.dispatch):!1}return{canUndo:i,canRedo:a,undo:o,redo:s}}var d={backgroundColor:`rgba(26, 115, 232, 0.3)`,borderRadius:0,zIndex:0,opacity:1,mixBlendMode:`multiply`};function f(e){let t=window.getSelection();if(!t||t.rangeCount===0||t.isCollapsed)return[];let n=t.getRangeAt(0);if(e&&!e.contains(n.commonAncestorContainer))return[];let r=0,i=0;if(e){let t=e.getBoundingClientRect();r=t.left+e.scrollLeft,i=t.top+e.scrollTop}let a=[];for(let e of n.getClientRects())e.width===0&&e.height===0||a.push({left:e.left-r,top:e.top-i,width:e.width,height:e.height});return a}function p(e,t=2){if(e.length<=1)return e;let n=[...e].sort((e,n)=>Math.abs(e.top-n.top)<t?e.left-n.left:e.top-n.top),r=n[0];if(!r)return e;let i=[],a={...r};for(let e=1;e<n.length;e++){let r=n[e];if(!r)continue;let o=Math.abs(r.top-a.top)<t,s=r.left<=a.left+a.width+t;if(o&&s){let e=Math.max(a.left+a.width,r.left+r.width);a.width=e-a.left,a.height=Math.max(a.height,r.height)}else i.push(a),a={...r}}return i.push(a),i}function m(e){return p(f(e))}function h(){let e=window.getSelection();return e!==null&&!e.isCollapsed&&e.rangeCount>0}function g(e){let t=window.getSelection();return!t||t.rangeCount===0?!1:e.contains(t.getRangeAt(0).commonAncestorContainer)}var _=`docx-selection-styles`,v=null;function y(){v&&=(v.remove(),null),document.getElementById(_)?.remove()}function b(e=d){y();let t=`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./useFindReplace-ZCrdvwEk.cjs"),t=require("./useZoom-DBbzwfMG.cjs");let n=require("vue"),r=require("prosemirror-history"),i=require("@stll/folio-core/utils/clipboard"),a=require("@stll/folio-core/managers/ClipboardManager"),o=require("@stll/folio-core/managers/TableSelectionManager"),s=require("@stll/folio-core/prosemirror/utils/visualLineNavigation"),c=require("@stll/folio-core/prosemirror/utils/extractTrackedChanges");function l(e={}){let{onCopy:t,onCut:r,onPaste:a,cleanWordFormatting:o=!0,editable:s=!0,onError:c}=e,l=(0,n.ref)(!1),u=(0,n.ref)(null),d=c?{onError:c}:{};async function f(e){if(l.value)return!1;l.value=!0;try{let n=await(0,i.copyRuns)(e.runs,d);return n&&t?.(e),n}finally{l.value=!1}}async function p(e){if(l.value||!s)return!1;l.value=!0;try{let t=await(0,i.copyRuns)(e.runs,d);return t&&r?.(e),t}finally{l.value=!1}}async function m(e=!1){if(l.value||!s)return null;l.value=!0;try{if(navigator.clipboard&&navigator.clipboard.read){let t=await navigator.clipboard.read(),n=``,r=``;for(let e of t)e.types.includes(`text/html`)&&(n=await(await e.getType(`text/html`)).text()),e.types.includes(`text/plain`)&&(r=await(await e.getType(`text/plain`)).text());e&&(n=``);let s=(0,i.parseClipboardHtml)(n,r,o);return u.value=s,a?.(s,e),s}return null}catch(e){return c?.(e instanceof Error?e:Error(String(e))),null}finally{l.value=!1}}return{copy:f,cut:p,paste:m,isProcessing:l,lastPastedContent:u}}function u({isOpen:e,onClose:t,align:r=`left`}){let i=(0,n.ref)(null),a=(0,n.ref)(null),o=(0,n.ref)({position:`fixed`,top:`0px`,left:`0px`,zIndex:1e4});function s(e,t){o.value={position:`fixed`,top:e+`px`,left:t+`px`,zIndex:1e4}}function c(e){let n=e.target;n instanceof Node&&i.value&&!i.value.contains(n)&&a.value&&!a.value.contains(n)&&t()}function l(e){e.key===`Escape`&&t()}function u(e){let n=e.target;n instanceof Node&&a.value&&a.value.contains(n)||t()}function d(){document.addEventListener(`mousedown`,c),document.addEventListener(`keydown`,l),window.addEventListener(`scroll`,u,!0)}function f(){document.removeEventListener(`mousedown`,c),document.removeEventListener(`keydown`,l),window.removeEventListener(`scroll`,u,!0)}(0,n.watch)(e,e=>{if(!e){f();return}let t=i.value;if(!t)return;let n=t.getBoundingClientRect();r===`right`?requestAnimationFrame(()=>{let e=a.value;if(e){let t=e.getBoundingClientRect();s(n.bottom+4,n.right-t.width)}else s(n.bottom+4,n.left)}):s(n.bottom+4,n.left),d()}),(0,n.onScopeDispose)(f);function p(e){e.preventDefault(),e.stopPropagation()}return{containerRef:i,dropdownRef:a,dropdownStyle:o,handleMouseDown:p}}function d(e,t){let i=(0,n.computed)(()=>{t.value;let n=e.value;return n?(0,r.undoDepth)(n.state)>0:!1}),a=(0,n.computed)(()=>{t.value;let n=e.value;return n?(0,r.redoDepth)(n.state)>0:!1});function o(){let t=e.value;return t?(0,r.undo)(t.state,t.dispatch):!1}function s(){let t=e.value;return t?(0,r.redo)(t.state,t.dispatch):!1}return{canUndo:i,canRedo:a,undo:o,redo:s}}var f={backgroundColor:`rgba(26, 115, 232, 0.3)`,borderRadius:0,zIndex:0,opacity:1,mixBlendMode:`multiply`};function p(e){let t=window.getSelection();if(!t||t.rangeCount===0||t.isCollapsed)return[];let n=t.getRangeAt(0);if(e&&!e.contains(n.commonAncestorContainer))return[];let r=0,i=0;if(e){let t=e.getBoundingClientRect();r=t.left+e.scrollLeft,i=t.top+e.scrollTop}let a=[];for(let e of n.getClientRects())e.width===0&&e.height===0||a.push({left:e.left-r,top:e.top-i,width:e.width,height:e.height});return a}function m(e,t=2){if(e.length<=1)return e;let n=[...e].sort((e,n)=>Math.abs(e.top-n.top)<t?e.left-n.left:e.top-n.top),r=n[0];if(!r)return e;let i=[],a={...r};for(let e=1;e<n.length;e++){let r=n[e];if(!r)continue;let o=Math.abs(r.top-a.top)<t,s=r.left<=a.left+a.width+t;if(o&&s){let e=Math.max(a.left+a.width,r.left+r.width);a.width=e-a.left,a.height=Math.max(a.height,r.height)}else i.push(a),a={...r}}return i.push(a),i}function h(e){return m(p(e))}function g(){let e=window.getSelection();return e!==null&&!e.isCollapsed&&e.rangeCount>0}function _(e){let t=window.getSelection();return!t||t.rangeCount===0?!1:e.contains(t.getRangeAt(0).commonAncestorContainer)}var v=`docx-selection-styles`,y=null;function b(){y&&=(y.remove(),null),document.getElementById(v)?.remove()}function x(e=f){b();let t=`
     /* DOCX Editor Selection Highlighting */
 
     .docx-editor [contenteditable="true"]::selection,
@@ -58,4 +58,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       background-color: rgba(156, 39, 176, 0.2);
       border-bottom: 2px dashed rgba(156, 39, 176, 0.6);
     }
-  `;v=document.createElement(`style`),v.id=_,v.textContent=t,document.head.appendChild(v)}function x(){return v!==null||document.getElementById(_)!==null}function S(){return window.getSelection()?.toString()??``}function C(e){let{containerRef:n,enabled:r=!0,config:i=d,useOverlay:a=!1,debounceMs:o=16,onSelectionChange:s}=e,c=(0,t.ref)(!1),l=(0,t.ref)(``),u=(0,t.ref)([]),f=(0,t.ref)(!1),p=null,_=0;function v(){let e=n.value,t=h(),r=S(),i=e?g(e):!1;c.value=t,l.value=r,f.value=i,u.value=a&&i&&e?m(e):[],s?.(t&&i,r)}function y(){v()}function C(){let e=performance.now();if(e-_<o){p&&clearTimeout(p),p=setTimeout(()=>{_=performance.now(),v(),p=null},o);return}_=e,v()}function w(e){let t={position:`absolute`,left:`${e.left}px`,top:`${e.top}px`,width:`${e.width}px`,height:`${e.height}px`,backgroundColor:i.backgroundColor,zIndex:i.zIndex??0,pointerEvents:`none`};return i.borderRadius&&(t.borderRadius=`${i.borderRadius}px`),i.borderColor&&(t.border=`1px solid ${i.borderColor}`),t}return(0,t.onMounted)(()=>{r&&(x()||b(i),document.addEventListener(`selectionchange`,C))}),(0,t.onBeforeUnmount)(()=>{document.removeEventListener(`selectionchange`,C),p&&clearTimeout(p)}),(0,t.watch)(n,()=>v()),{hasSelection:(0,t.computed)(()=>c.value),selectedText:(0,t.computed)(()=>l.value),highlightRects:(0,t.computed)(()=>u.value),isSelectionInContainer:(0,t.computed)(()=>f.value),refresh:y,getOverlayStyle:w}}function w(){let e=new a.TableSelectionManager,n=(0,t.ref)(null),r=()=>{let t=e.getSnapshot();n.value=t.tableIndex!==null&&t.rowIndex!==null&&t.columnIndex!==null?{tableIndex:t.tableIndex,rowIndex:t.rowIndex,columnIndex:t.columnIndex}:null},i=e.subscribe(r);r(),(0,t.onScopeDispose)(i);function o(e,t,n){}function s(t,n){(0,a.findTableFromClick)(t,n)||e.clearSelection()}function c(){e.clearSelection()}function l(t,n,r){return e.isCellSelected(t,n,r)}return{selectedCell:n,handleCellClick:o,handleClickTarget:s,clearSelection:c,isCellSelected:l}}function T(e){let t=(0,o.createVisualLineState)();function n(t){let n=e.value;return n?(0,o.getCaretClientX)(n,t):null}function r(t){let n=e.value;return n?(0,o.findLineElementAtPosition)(n,t):null}function i(e,t){return(0,o.findPositionOnLineAtClientX)(e,t)}function a(n,r){return(0,o.handleVisualLineKeyDown)(t,n,r,e.value)}return{state:t,getCaretClientX:n,findLineElementAtPosition:r,findPositionOnLineAtClientX:i,handlePMKeyDown:a}}exports.createSelectionFromDOM=i.createSelectionFromDOM,exports.extractTrackedChanges=s.extractTrackedChanges,exports.getSelectionRuns=i.getSelectionRuns,exports.runsToClipboardContent=r.runsToClipboardContent,exports.useClipboard=c,exports.useDocxEditor=e.a,exports.useDragAutoScroll=e.i,exports.useFixedDropdown=l,exports.useHistory=u,exports.useSelectionHighlight=C,exports.useTableResize=e.r,exports.useTableSelection=w,exports.useTrackedChanges=e.n,exports.useVisualLineNavigation=T,exports.useWheelZoom=e.t,exports.useZoom=e.t;
+  `;y=document.createElement(`style`),y.id=v,y.textContent=t,document.head.appendChild(y)}function S(){return y!==null||document.getElementById(v)!==null}function C(){return window.getSelection()?.toString()??``}function w(e){let{containerRef:t,enabled:r=!0,config:i=f,useOverlay:a=!1,debounceMs:o=16,onSelectionChange:s}=e,c=(0,n.ref)(!1),l=(0,n.ref)(``),u=(0,n.ref)([]),d=(0,n.ref)(!1),p=null,m=0;function v(){let e=t.value,n=g(),r=C(),i=e?_(e):!1;c.value=n,l.value=r,d.value=i,u.value=a&&i&&e?h(e):[],s?.(n&&i,r)}function y(){v()}function b(){let e=performance.now();if(e-m<o){p&&clearTimeout(p),p=setTimeout(()=>{m=performance.now(),v(),p=null},o);return}m=e,v()}function w(e){let t={position:`absolute`,left:`${e.left}px`,top:`${e.top}px`,width:`${e.width}px`,height:`${e.height}px`,backgroundColor:i.backgroundColor,zIndex:i.zIndex??0,pointerEvents:`none`};return i.borderRadius&&(t.borderRadius=`${i.borderRadius}px`),i.borderColor&&(t.border=`1px solid ${i.borderColor}`),t}return(0,n.onMounted)(()=>{r&&(S()||x(i),document.addEventListener(`selectionchange`,b))}),(0,n.onBeforeUnmount)(()=>{document.removeEventListener(`selectionchange`,b),p&&clearTimeout(p)}),(0,n.watch)(t,()=>v()),{hasSelection:(0,n.computed)(()=>c.value),selectedText:(0,n.computed)(()=>l.value),highlightRects:(0,n.computed)(()=>u.value),isSelectionInContainer:(0,n.computed)(()=>d.value),refresh:y,getOverlayStyle:w}}function T(){let e=new o.TableSelectionManager,t=(0,n.ref)(null),r=()=>{let n=e.getSnapshot();t.value=n.tableIndex!==null&&n.rowIndex!==null&&n.columnIndex!==null?{tableIndex:n.tableIndex,rowIndex:n.rowIndex,columnIndex:n.columnIndex}:null},i=e.subscribe(r);r(),(0,n.onScopeDispose)(i);function a(t,n,r){e.selectCellCoordinates({tableIndex:t,rowIndex:n,columnIndex:r})}function s(t,n){let r=(0,o.findTableFromClick)(t,n);if(!r){e.clearSelection();return}e.selectCellCoordinates(r)}function c(){e.clearSelection()}function l(t,n,r){return e.isCellSelected(t,n,r)}return{selectedCell:t,handleCellClick:a,handleClickTarget:s,clearSelection:c,isCellSelected:l}}function E(e){let t=(0,s.createVisualLineState)();function n(t){let n=e.value;return n?(0,s.getCaretClientX)(n,t):null}function r(t){let n=e.value;return n?(0,s.findLineElementAtPosition)(n,t):null}function i(e,t){return(0,s.findPositionOnLineAtClientX)(e,t)}function a(n,r){return(0,s.handleVisualLineKeyDown)(t,n,r,e.value)}return{state:t,getCaretClientX:n,findLineElementAtPosition:r,findPositionOnLineAtClientX:i,handlePMKeyDown:a}}exports.colorModePlugin=t.o,exports.createSelectionFromDOM=a.createSelectionFromDOM,exports.defaultColorMode=t.s,exports.extractTrackedChanges=c.extractTrackedChanges,exports.getSelectionRuns=a.getSelectionRuns,exports.provideColorMode=t.c,exports.runsToClipboardContent=i.runsToClipboardContent,exports.useClipboard=l,exports.useColorMode=t.l,exports.useDocxEditor=t.a,exports.useDragAutoScroll=t.i,exports.useFindReplace=e.t,exports.useFixedDropdown=u,exports.useHistory=d,exports.useSelectionHighlight=w,exports.useTableResize=t.r,exports.useTableSelection=T,exports.useTrackedChanges=t.n,exports.useVisualLineNavigation=E,exports.useWheelZoom=t.t,exports.useZoom=t.t;