wordinweb 0.1.12 → 0.1.14

package/README.md

@@ -1,6 +1,6 @@
 # WordInWeb
 
-[**Live demo →**](https://wordinweb-parity.callerinfo.workers.dev/)
+[**Live demo →**](https://word-in-web.com/)
 
 A Word/.docx viewer and editor for the web, embeddable as a single React component.
 
@@ -10,7 +10,7 @@ import { DocxView } from "wordinweb";
 <DocxView source="/report.docx" />;                            // render-only viewer
 ```
 
-Editing is in an Alpha state and is strictly opt-in via the `editable` flag; the default is a pure viewer.
+Set the `editable` flag to enable editing; the default configuration is a pure viewer.
 
 If you discover an edge case or perf issue create an issue and include the offending Word file.
 
@@ -93,6 +93,7 @@ export function Editor() {
 | `revisions` | `"final" \| "markup"` | `"final"` | Tracked-changes display: clean final text, or insertions underlined / deletions struck. |
 | `commentAuthor` | `string` | `"You"` | Name stamped on comments, replies, and suggestions. |
 | `onLoad` | `(info: { pageCount; document }) => void` | — | Fires once the document is parsed and laid out. |
+| `onPageCountChange` | `(pageCount: number) => void` | — | Fires when editing changes the rendered page count. |
 | `onReady` | `(api: DocxViewApi) => void` | — | Fires when editing is wired up; the `api` is valid only while mounted. Only called when `editable`. |
 | `onMissingFonts` | `(missing: MissingFont[]) => void` | — | Fires after render with any requested faces the browser can't render (silently substituted; layout may differ from Word). Empty array = all good. |
 | `onError` | `(error: Error) => void` | — | Fires if parsing or rendering throws. |
@@ -110,7 +111,7 @@ The object passed to `onReady`. Every command operates on the current selection
 - `setAlignment("left" | "center" | "right" | "justify")`.
 - `setParagraphStyle(styleId | null)`, `listParagraphStyles()`, `getParagraphStyleId()`.
 - `toggleList("bullet" | "number")`, `getListType()`.
-- `adjustIndent(1 | -1)`, `setParagraphSpacing({ lineMultiple?, beforePt?, afterPt? })`.
+- `adjustIndent(1 | -1)`, `setParagraphSpacing({ lineMultiple?, exactLinePt?, beforePt?, afterPt? })`.
 - `setLink(url | null)`, `getLinkAt()`.
 
 **Page layout**
@@ -166,10 +167,11 @@ The object passed to `onReady`. Every command operates on the current selection
 ### `DocxToolbar`
 
 A ready-made formatting toolbar for an editable `DocxView`. Use `mode="simple"` for the basic Home editing strip or `mode="advanced"` for the full Home / Insert / Draw / Layout ribbon supported by the installed version.
+The searchable Help guide opens from the toolbar, `F1`, or `Cmd/Ctrl+/`. It documents the current tools, platform-specific shortcuts, object controls, and recipes for pleading-paper rules, column dividers, resume lines, and repeating page art; set `features={{ help: false }}` to hide it.
 Layout includes Word-style paper presets plus a custom width/height dialog; both document and current-section scope emit native page-size properties.
 Editable text also has a right-click menu for clipboard, formatting, links,
 comments, lists, and alignment. Word-style shortcuts include heading levels,
-page breaks, links, comments, lists, and paragraph alignment in addition to the
+page and column breaks, links, comments, lists, and paragraph alignment in addition to the
 standard formatting and history commands.
 
 | Prop | Type | What it does |

package/dist/index.d.ts

@@ -1588,6 +1588,8 @@ interface LineEdgeItem {
     };
     /** Paint over the body text (non-behindDoc anchored shape border). */
     front?: boolean;
+    /** Paint below the body text (behindDoc anchored shape border). */
+    behind?: boolean;
     z?: number;
 }
 interface ImageItem {
@@ -1666,6 +1668,8 @@ interface DrawingHitItem {
      * click on bare fill selects or drags the shape, while clicks on its text
      * glyphs still reach the text editor. */
     belowText?: boolean;
+    /** Keep a behindDoc drawing target under the body text. */
+    behind?: boolean;
     /** The drawing owns an independently editable text-box story. */
     textboxStory?: boolean;
     rotate?: {
@@ -1762,6 +1766,13 @@ interface LaidOutPage {
     bodyBottom: number;
     /** Items from this index on belong to the header/footer parts. */
     hfStart: number;
+    /** Column geometry for editor hit-testing. A page can contain more than one
+     * band when a continuous section changes the column layout mid-page. */
+    columnBands: Array<{
+        top: number;
+        colXs: number[];
+        colWidths: number[];
+    }>;
 }
 interface LayoutResult {
     pages: LaidOutPage[];
@@ -2008,6 +2019,8 @@ interface PageLayoutPatch {
     orientation?: "portrait" | "landscape";
     /** Equal-width text columns (1 removes w:cols). */
     columns?: number;
+    /** Draw a vertical rule between text columns. Used with columns > 1. */
+    columnSeparator?: boolean;
     /** Box page border (null removes). sz in eighth-points, color hex. */
     pageBorders?: {
         sz?: number;
@@ -2079,7 +2092,7 @@ interface ToolbarMenuSelectProps {
  * 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 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" | "help" | "download";
 type ToolbarMode = "simple" | "advanced";
 interface DocxToolbarProps {
     api: DocxViewApi | null;
@@ -2142,6 +2155,8 @@ interface DocxViewApi {
     getDrawingTool(): DrawingTool | null;
     /** Align, rotate, or reorder the selected image, shape, or ink group. */
     arrangeObject(action: ObjectArrangeAction): boolean;
+    /** True while an image, shape, or ink group is selected. */
+    hasSelectedObject(): boolean;
     undo(): void;
     redo(): void;
     canUndo(): boolean;
@@ -2168,9 +2183,10 @@ interface DocxViewApi {
     getLinkAt(): string | null;
     /** Step paragraph indent by half an inch (Word's indent buttons). */
     adjustIndent(direction: 1 | -1): void;
-    /** Line spacing multiple and/or space before/after (points). */
+    /** Line spacing multiple or exact point height, and/or space before/after (points). */
     setParagraphSpacing(patch: {
         lineMultiple?: number;
+        exactLinePt?: number;
         beforePt?: number | null;
         afterPt?: number | null;
     }): void;
@@ -2199,6 +2215,11 @@ interface DocxViewApi {
     getParagraphStyleId(): string | null;
     /** Change margins / page size / orientation (inches). */
     setPageLayout(patch: PageLayoutPatch, scope?: "document" | "section"): void;
+    /** One-based logical section containing the caret or selection. */
+    getSectionContext(): {
+        index: number;
+        count: number;
+    } | null;
     /** Insert a page/column break or a section break at the caret. */
     insertBreak(kind: "page" | "column" | "sectionNextPage" | "sectionContinuous"): boolean;
     /** Insert a full blank page at the caret (two consecutive page breaks). */
@@ -2277,6 +2298,8 @@ interface DocxViewProps {
         pageCount: number;
         document: DocxDocument;
     }) => void;
+    /** Fires whenever editing changes the rendered page count. */
+    onPageCountChange?: (pageCount: number) => void;
     /** Fires when the document is ready; the api is only usable while mounted. */
     onReady?: (api: DocxViewApi) => void;
     onError?: (error: Error) => void;
@@ -2299,6 +2322,6 @@ interface DocxViewProps {
  * <DocxView source="/report.docx" editable onReady={setApi} /> // editing
  * ```
  */
-declare function DocxView({ source, zoom, fitWidth, narrowWidth, editable, className, style, onLoad, onReady, onError, commentAuthor, showComments, revisions, onMissingFonts, }: DocxViewProps): react.JSX.Element;
+declare function DocxView({ source, zoom, fitWidth, narrowWidth, editable, className, style, onLoad, onPageCountChange, 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, ToolbarMenuSelect, type ToolbarMenuSelectOption, type ToolbarMenuSelectProps, type ToolbarMode, layoutDocument, printPages, renderToDom };