Docx Editor

Minor Changes

• 5509418: Add a colorMode prop ('light' | 'dark' | 'system') for native dark mode. Dark mode re-themes the editor chrome through the shared design tokens and renders the document canvas like Word's dark view: a dark page with light text where authored colours are lightness-inverted (hue preserved) for legibility. It is a display transform only; the saved DOCX is unchanged. 'system' follows the OS prefers-color-scheme.

Patch Changes

• 3a4a03f: Fix toolbar dropdowns closing when you scroll inside them. Scrolling the font size picker's preset list now keeps the dropdown open instead of dismissing it. Fixes #808.

• bbda628: Apply selected font picker options by their primary family name so CSS fallback stacks like Lato, sans-serif do not get stored as document font names.

• 7fe09f0: Share the paragraph-style-picker preview logic between the React and Vue toolbars. The filter/sort and per-style preview CSS now live once in @eigenpal/docx-editor-core/utils/stylePreview (resolveParagraphStyleOptions + getStylePreviewProps), which both adapters call, so the style dropdown can no longer drift between them. Also fixes a Vue toolbar bug where typing a font size and then clicking a preset could re-commit the typed value over the preset.

• 7fe09f0: Align the React and Vue toolbar controls. The Vue font-size control is now an editable, clearly-bordered input box (matching React) instead of a plain button, and React's zoom control is now a − / + stepper around the level dropdown (matching Vue), so both adapters present the same editable zoom and font-size controls.

• 7fe09f0: Unify the editor UI colors onto one CSS-variable token palette. The canonical chrome stylesheet now lives in @eigenpal/docx-editor-core (packages/core/src/styles/editor.css) and both adapters import it, so React and Vue can never drift. Component styles reference --doc-* tokens instead of hardcoded colors, and the shadcn HSL tokens are aligned to the same palette and support opacity modifiers. A commented .ep-root.dark scaffold is included as the structure for a future dark theme (no dark values are shipped yet — adding the dark class has no visual effect until they are filled in). Light-mode appearance is unchanged apart from minor consolidation of near-duplicate grays/blues. As part of this, the Vue full-screen loading overlay now uses the same dark backdrop with light text as React (previously a light backdrop), and the Vue editing-mode chip and toolbar dropdown elevation share React's hover/shadow tokens. The Vue toolbar buttons, dropdown triggers, menu items, and steppers now reference the same shadcn foreground/muted-foreground/muted/border tokens React uses (previously the --doc-* family), so the toolbar matches React in both light and dark mode; the dropdown triggers also render at React's normal weight (they previously looked bold), and the selected menu item uses React's grey highlight instead of an indigo tint.

• b8011f8: Focus the Vue editor on load so you can start typing immediately, without first clicking into the page. Matches the React adapter.

• 7fe09f0: More React parity for the Vue editor: clicking the empty sidebar background now collapses an expanded comment/tracked-change card (it previously stayed open); the zoom control offers the same 50%–200% range and presets as React (was 25%–400%); and the toolbar dropdown triggers expose aria-haspopup/aria-expanded for screen readers.

• 7fe09f0: Ship Tailwind utility classes in the Vue package's styles.css. The Vue build now runs Tailwind (via its own tailwind.config.js + PostCSS), so utility classes used by components like Button and Toolbar are styled out of the box for consumers who import @eigenpal/docx-editor-vue/styles.css, without needing their own Tailwind config. Fixes #594.

• 7fe09f0: The Vue toolbar's paragraph-style picker now reflects the loaded document's real styles (names and order) instead of a fixed preset list, matching React's behaviour (e.g. it shows the document's "Normal" style name). Falls back to the built-in presets when a document has no styles. Also aligns the toolbar's font-size box border and active-button colour exactly with React.

• 7fe09f0: Bring the Vue toolbar's visual styling closer to React: toolbar controls now use the inherited system font (instead of the browser default Arial), the dropdown menus match React's border/radius/shadow, and the style-picker dropdown no longer balloons in width (the per-style preview is applied to an inner span and the menu is width-capped). Also extracts the font-size and style-option logic into composables to keep Toolbar.vue maintainable.

• 7fe09f0: Polish the Vue toolbar and comment cards to match React. The toolbar font-size box is now correctly editable (typing commits on Enter/blur; +/− and arrow steppers no longer revert; the preset dropdown opens positioned), is the same height as React's, and steps by 1 beyond the preset list; the style-picker dropdown previews match React's sizes/weights and the menu is the same compact width instead of ballooning. Comment and tracked-change cards now use the shared near-white card color and drop shadow (new --doc-card/--doc-card-shadow tokens, sourced once in core) in both collapsed and expanded states, instead of a blue tint and a divergent shadow, matching React.

  Further menu and submenu parity with React: the top menu bar (File/Format/Insert/Help) items and triggers use full-strength text instead of muted grey, with matching shortcut hints and submenu borders; the style dropdown no longer clips its last entries; font-picker group labels render Title Case; the alignment control is now a horizontal icon strip with a blue active state (matching React's AlignmentButtons) instead of a vertical labeled menu; and the comments sidebar width matches React (340px).

• Updated dependencies [a6a2dd0]

• Updated dependencies [931931a]

• Updated dependencies [fa3383b]

• Updated dependencies [32c5382]

• Updated dependencies [7fe09f0]

• Updated dependencies [7fe09f0]

• Updated dependencies [f50a3c7]

• Updated dependencies [7fe09f0]

  • @eigenpal/[email protected]
  • @eigenpal/[email protected]
  • @eigenpal/[email protected]