wordinweb 0.1.8 → 0.1.10

package/README.md

@@ -14,7 +14,7 @@ Editing is in an Alpha state and is strictly opt-in via the `editable` flag; the
 
 If you discover an edge case or perf issue create an issue and include the offending Word file.
 
-Part of the broader roadmap is to migrate away from DOM rendering to canvas rendering, or a hybrid of the two. Editing performance can suffer on very long documents.
+Long-document performance work focuses on incremental parsing/layout and page virtualization; the current renderer remains DOM-based.
 
 ---
 
@@ -198,6 +198,24 @@ Every color the chrome paints — the toolbar, comment cards, selection, caret,
 | `--dxw-layout-menu-width` | `304px` | Layout option-menu width |
 | `--dxw-layout-menu-max-height` | `480px` | Layout option-menu scroll limit |
 | `--dxw-layout-preview-bg` | `#fff` | Paper fill in Layout option previews |
+| `--dxw-select-height` | `26px` | Custom select trigger height |
+| `--dxw-select-border` | `transparent` | Custom select trigger border color |
+| `--dxw-select-radius` | `4px` | Custom select trigger corner radius |
+| `--dxw-select-bg` | `transparent` | Custom select trigger fill |
+| `--dxw-select-fg` | toolbar foreground | Custom select trigger text |
+| `--dxw-select-font` | `13px system-ui` | Custom select trigger font |
+| `--dxw-select-padding` | `0 6px` | Custom select trigger padding |
+| `--dxw-select-menu-bg` | popover background | Custom select menu fill |
+| `--dxw-select-menu-border` | toolbar border | Custom select menu border color |
+| `--dxw-select-menu-radius` | `8px` | Custom select menu corner radius |
+| `--dxw-select-menu-shadow` | popover shadow | Custom select menu shadow |
+| `--dxw-select-menu-max-height` | `320px` | Custom select menu scroll limit |
+| `--dxw-color-menu-width` | `236px` | Text and drawing color palette width |
+| `--dxw-dialog-backdrop` | `rgba(32,33,36,.38)` | Editor dialog scrim |
+| `--dxw-dialog-z-index` | `1000` | Editor dialog stacking level |
+| `--dxw-dialog-width` | `420px` | Editor dialog width |
+| `--dxw-dialog-radius` | `10px` | Editor dialog corner radius |
+| `--dxw-dialog-field-bg` | popover background | Editor dialog field fill |
 | `--dxw-canvas-bg` | `#e8eaed` | Scroll area behind the pages |
 | `--dxw-page-bg` | `#ffffff` | Page paper |
 | `--dxw-page-shadow` | `0 1px 3px …, 0 4px 14px …` | Page drop shadow |
@@ -238,6 +256,31 @@ Or in a stylesheet:
 .dxw-dark { --dxw-toolbar-bg: #1f2937; --dxw-toolbar-fg: #e5e7eb; /* … */ }
 ```
 
+### Custom menus and dialogs
+
+All visible toolbar choices use WordInWeb-rendered controls rather than the
+browser's native select, prompt, or color-picker UI. `ToolbarMenuSelect` is
+exported for host-app controls that should match the toolbar:
+
+```tsx
+<ToolbarMenuSelect
+  value={zoom}
+  ariaLabel="Document zoom"
+  options={[
+    { value: "0.75", label: "75%" },
+    { value: "1", label: "100%" },
+    { value: "1.25", label: "125%" },
+  ]}
+  onChange={setZoom}
+/>
+```
+
+For selector-level styling, the stable hooks are
+`.dxw-menu-select-trigger`, `.dxw-menu-select-menu`,
+`.dxw-menu-select-option`, `.dxw-color-menu`, `.dxw-color-swatch`,
+`.dxw-input-dialog`, `.dxw-input-dialog-field`, and the dialog action button
+classes. Prefer the variables above for theme changes.
+
 Layout controls also expose stable `.dxw-layout-ribbon`, `.dxw-layout-menu-trigger`,
 `.dxw-layout-menu`, `.dxw-layout-menu-item`, and `.dxw-layout-preview` classes.
 Their `data-dxw-layout-menu`, `data-dxw-layout-option`, and

package/dist/index.d.ts

@@ -753,6 +753,8 @@ interface NoteRefContent {
     noteType: "footnote" | "endnote";
     id: number;
     self?: boolean;
+    /** The document supplies the visible mark in the following run content. */
+    customMarkFollows?: boolean;
 }
 /** w:ruby — an East-Asian ruby (furigana) cluster: an annotation run (w:rt)
  * riding above a base run (w:rubyBase). Both sides render as their own runs;
@@ -1245,16 +1247,24 @@ declare class DocxDocument {
      * stable across a plain text edit). */
     layoutGlobalSig(): string;
     refresh(): void;
-    /**
-     * Reparse the two direct body paragraphs created by Enter without rebuilding
-     * the complete document model. This deliberately covers only the simple
-     * single-section body case used by incremental pagination; structural
-     * containers, revisions, bookmarks, and section breaks use refresh().
-     */
+    /** Reparse the two sibling body-story paragraphs created by Enter without
+     * rebuilding the complete document model. Paragraphs nested in table cells
+     * are included because legal documents spend most of their body inside
+     * tables; revisions, bookmarks, fields, and section breaks use refresh(). */
     reparseDirectBodyParagraphSplit(beforeSource: XmlElement, afterSource: XmlElement): {
         before: Paragraph;
         after: Paragraph;
     } | null;
+    /** Reparse a body paragraph plus several new siblings created by
+     * click-and-type without rebuilding the complete document model. */
+    reparseDirectBodyParagraphSplits(beforeSource: XmlElement, afterSources: XmlElement[]): Paragraph[] | null;
+    /** Reparse one retained body-story paragraph after a structural edit that
+     * leaves its surrounding block list unchanged, such as inserting ink. */
+    reparseBodyParagraph(source: XmlElement): Paragraph | null;
+    /** Reparse two sibling body-story paragraphs after Backspace/Delete merged
+     * their XML into one. Keeps the parsed model generation stable so long
+     * documents can use incremental layout instead of repaginating in full. */
+    reparseDirectBodyParagraphMerge(beforeSource: XmlElement, afterSource: XmlElement, survivorSource: XmlElement): Paragraph | null;
     private deriveComments;
     /** Retained comments tree for edit commands (null when the doc has none). */
     /**
@@ -1792,10 +1802,8 @@ interface LayoutOptions {
      * type/delete. Lets the incremental scan skip re-hashing every block: it
      * re-hashes only the hinted block and its two neighbours and reuses prev's
      * per-block signatures for the rest. Purely an optimisation — the fast path
-     * is gated on block-count parity and neighbour-signature checks, so a stale,
-     * structural, or wrong hint falls through to the full block scan. Absent for
-     * multi-block edits (paste, paragraph split/merge, undo/redo, structural ops),
-     * which take the full scan. */
+     * is gated on block identity/count and neighbour-signature checks, so a stale
+     * or wrong hint falls through to the full block scan. */
     dirtyHint?: XmlElement;
     /** Exact retained text element changed by a local edit. Used only to bound
      * structural page comparison before the first actually dirty page. */
@@ -1937,7 +1945,7 @@ interface SelectionFormat {
     verticalAlign?: "superscript" | "subscript";
 }
 
-type ShapePreset = "rectangle" | "roundedRectangle" | "ellipse" | "diamond" | "textBox";
+type ShapePreset = "line" | "rectangle" | "roundedRectangle" | "ellipse" | "diamond" | "textBox";
 type WordArtPreset = "plain" | "archUp" | "archDown" | "wave" | "chevron";
 type DrawingTool = {
     kind?: "pen";
@@ -2021,6 +2029,30 @@ interface MissingFont {
     sample: string;
 }
 
+interface ToolbarMenuSelectOption {
+    value: string;
+    label: React.ReactNode;
+    group?: string;
+    disabled?: boolean;
+    fontFamily?: string;
+}
+interface ToolbarMenuSelectProps {
+    value: string;
+    options: ToolbarMenuSelectOption[];
+    onChange: (value: string) => void;
+    placeholder?: React.ReactNode;
+    title?: string;
+    ariaLabel?: string;
+    triggerAriaLabel?: string;
+    width?: number | string;
+    menuWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** CSS-overridable replacement for visible native selects. An inert,
+ * transparent select is kept as an event bridge for existing integrations;
+ * every user-facing part is a button/listbox rendered by us. */
+declare function ToolbarMenuSelect({ value, options, onChange, placeholder, title, ariaLabel, triggerAriaLabel, width, menuWidth, className, style, }: ToolbarMenuSelectProps): react.JSX.Element;
 /** Toolbar control groups a host can disable via the `features` prop. */
 type ToolbarFeature = "history" | "styles" | "font" | "size" | "format" | "color" | "highlight" | "alignment" | "indent" | "spacing" | "link" | "lists" | "table" | "image" | "icon" | "screenshot" | "model3D" | "media" | "object" | "chart" | "smartArt" | "comment" | "footnote" | "bookmark" | "crossReference" | "dateTime" | "field" | "equation" | "symbol" | "shape" | "textBox" | "wordArt" | "drawing" | "arrange" | "dropCap" | "headerFooter" | "coverPage" | "pageNumber" | "break" | "layout" | "download";
 type ToolbarMode = "simple" | "advanced";
@@ -2244,4 +2276,4 @@ interface DocxViewProps {
  */
 declare function DocxView({ source, zoom, fitWidth, narrowWidth, editable, className, style, onLoad, onReady, onError, commentAuthor, showComments, revisions, onMissingFonts, }: DocxViewProps): react.JSX.Element;
 
-export { type CoverPageContent, DocxDocument, DocxToolbar, type DocxToolbarProps, DocxView, type DocxViewApi, type DocxViewProps, type DrawingTool, type LineNumberingPatch, type PageLayoutPatch, type ParagraphAlignment, type RunFormatPatch, type ScreenshotInsertResult, type SelectionFormat, type ShapePreset, type ToolbarFeature, type ToolbarMode, layoutDocument, printPages, renderToDom };
+export { type CoverPageContent, DocxDocument, DocxToolbar, type DocxToolbarProps, DocxView, type DocxViewApi, type DocxViewProps, type DrawingTool, type LineNumberingPatch, type PageLayoutPatch, type ParagraphAlignment, type RunFormatPatch, type ScreenshotInsertResult, type SelectionFormat, type ShapePreset, type ToolbarFeature, ToolbarMenuSelect, type ToolbarMenuSelectOption, type ToolbarMenuSelectProps, type ToolbarMode, layoutDocument, printPages, renderToDom };