@matfsw/docusaurus-plantuml-plugin 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -7,6 +7,46 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.3]
+
+### Security
+
+- `copy-webpack-plugin` `12` → `14`, which moves the transitive `serialize-javascript`
+  dependency to `7.0.7`. That closes a high-severity advisory (RCE via `RegExp.flags`) and a
+  denial-of-service advisory in the version the plugin previously pulled in. The dependency is
+  used at build time and never reaches a site visitor's browser.
+
+### Changed
+
+- `engines.node` is now `>= 20.9.0`, following `copy-webpack-plugin@14`. In practice this is
+  not a restriction: the Node 20 LTS line begins at `20.9.0`, so any supported Node 20 already
+  satisfies it.
+- Development dependencies updated: `globals` `16` → `17`, `@types/node` `22` → `26`, and
+  React `18` → `19` for the unit-test environment. The plugin still supports React 18 and 19;
+  the example site continues to exercise React 18 end to end, so both are covered.
+- GitHub Actions updated: `actions/checkout` `5` → `7`, `actions/setup-node` `5` → `7`,
+  `actions/upload-artifact` `4` → `7`.
+
+### Fixed
+
+- Resets of the zoom view now have exactly one owner. The listener effect also reset on every
+  re-attach, duplicating the effect keyed on the rendered picture; any re-attach for an
+  unrelated reason would have silently discarded a zoom the reader had chosen.
+- A unit test built a fake React element from its internal `$$typeof` symbol, which React 19
+  renamed. It now uses a real element, so it no longer depends on React internals.
+- The maximize round-trip test no longer assumes effect flush order, which made it flaky on
+  CI. It asserts the same value, so a genuinely wrong transform still fails.
+
+## [1.0.2]
+
+### Fixed
+
+- The zoom buttons and keyboard shortcuts now zoom about the viewport's top-left corner rather
+  than its centre. A diagram that fits its viewport is left-aligned, so the empty space is to
+  its right and below; zooming about the centre scaled that empty space and pushed the diagram
+  off the top and left edges, most visibly on a maximized diagram. Wheel zoom continues to
+  track the pointer.
+
 ## [1.0.1]
 
 ### Fixed
@@ -86,7 +126,9 @@ Initial release.
   opt-out.
 - Plugin option validation that rejects unknown keys and out-of-range values at build time.
 
-[Unreleased]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.1...HEAD
+[Unreleased]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.3...HEAD
+[1.0.3]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.2...v1.0.3
+[1.0.2]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v0.1.0...v1.0.0
 [0.1.0]: https://github.com/matf/docusaurus-plantuml-plugin/releases/tag/v0.1.0

package/README.md

@@ -42,7 +42,7 @@ them are exported.
 | Requirement     | Supported                                                                              |
 | --------------- | -------------------------------------------------------------------------------------- |
 | Docusaurus      | `3.5.0` and later `3.x`                                                                |
-| Node.js (build) | `>= 20`                                                                                |
+| Node.js (build) | `>= 20.9.0` (the Node 20 LTS line)                                                     |
 | React           | `18.x` or `19.x` (matching your Docusaurus install)                                    |
 | Bundler         | webpack (default) and Rspack (`future.v4` / `@docusaurus/faster`)                      |
 | PlantUML engine | `@plantuml/core` `1.2026.6`                                                            |
@@ -277,6 +277,13 @@ The diagram viewport is focusable. Once focused:
 Keys with Ctrl, Cmd or Alt held are left to the browser, so shortcuts such as Ctrl + 0 keep
 working, and `Tab` always moves on — the diagram is never a keyboard trap.
 
+The toolbar buttons and the keyboard zoom about the **top-left corner** of the viewport, while
+the wheel zooms about the **pointer**. That difference is deliberate: a diagram rarely fills its
+viewport, and one that fits is left-aligned, so the empty space sits to its right and below.
+Zooming about the centre would scale that empty space and push the diagram off the top and left
+edges — most visibly when maximized. Anchoring at the top-left grows the diagram into the empty
+space instead and keeps it visible as long as possible.
+
 Scale is limited to 0.25×–8×, and the view resets to 100% whenever the diagram source or the
 site colour mode changes.
 

package/dist/theme/PlantUmlDiagram/useZoomPan.js

@@ -54,12 +54,19 @@ export function useZoomPan({ enabled, resetKey }) {
     const reset = useCallback(() => {
         apply(IDENTITY);
     }, [apply]);
-    /** Zooms about the middle of the viewport, which is what buttons and keys should do. */
+    /**
+     * Zooms about the viewport's top-left corner.
+     *
+     * Not the centre: a diagram rarely fills its viewport, and a diagram that fits is
+     * left-aligned, so the empty space sits to its right and below. Zooming about the centre
+     * scales that empty space too and pushes the diagram off the top and left edges — most
+     * visibly when maximized. Anchoring at the top-left leaves a left-aligned diagram exactly
+     * where it is and grows it into the empty space, keeping it visible as long as possible.
+     *
+     * Wheel zoom still tracks the pointer, which is what direct manipulation should do.
+     */
     const zoomByStep = useCallback((factor) => {
-        const viewport = viewportRef.current;
-        const focalX = (viewport?.clientWidth ?? 0) / 2;
-        const focalY = (viewport?.clientHeight ?? 0) / 2;
-        apply(zoomAbout(transformRef.current, factor, focalX, focalY));
+        apply(zoomAbout(transformRef.current, factor, 0, 0));
     }, [apply]);
     const zoomIn = useCallback(() => zoomByStep(SCALE_STEP), [zoomByStep]);
     const zoomOut = useCallback(() => zoomByStep(1 / SCALE_STEP), [zoomByStep]);
@@ -114,8 +121,6 @@ export function useZoomPan({ enabled, resetKey }) {
         const viewport = viewportRef.current;
         if (!viewport)
             return undefined;
-        // The layer node is replaced whenever the rendered SVG changes; start from a clean view.
-        write(IDENTITY);
         let dragging = false;
         let pointerId = null;
         let startX = 0;
@@ -248,9 +253,16 @@ export function useZoomPan({ enabled, resetKey }) {
         // the listeners against a clean view.
     }, [apply, enabled, measure, resetKey, write]);
     /**
-     * A cache hit resolves before any phase is reported, so a colour-mode toggle can go
-     * `ready -> ready` without ever unmounting the layer. The effect above would not re-run in
-     * that case, which is why the reset is also driven directly by `resetKey`.
+     * The single owner of "reset the view".
+     *
+     * `resetKey` identifies the rendered picture, so this covers both a new diagram and a
+     * colour-mode change — including the case where a cache hit resolves before any phase is
+     * reported and the component goes `ready -> ready` without the layer ever unmounting.
+     *
+     * The listener effect deliberately does *not* also reset. Its dependencies are a superset of
+     * this one's, so any re-attach for an unrelated reason — a remount, or a callback identity
+     * change from a future refactor — would silently throw away a zoom the reader had chosen.
+     * One owner means a reset happens when the picture changes, and at no other time.
      */
     useEffect(() => {
         if (!enabled)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matfsw/docusaurus-plantuml-plugin",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Render PlantUML diagrams in Docusaurus 3 entirely in the browser - no Java, no PlantUML server, no CDN.",
   "keywords": [
     "docusaurus",
@@ -41,7 +41,7 @@
     "CHANGELOG.md"
   ],
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=20.9.0"
   },
   "scripts": {
     "clean": "node scripts/clean.mjs",
@@ -70,7 +70,7 @@
   },
   "dependencies": {
     "@plantuml/core": "^1.2026.6",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^14.0.0",
     "dompurify": "^3.2.7"
   },
   "peerDependencies": {
@@ -91,19 +91,19 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.18.13",
-    "@types/react": "^18.3.27",
-    "@types/react-dom": "^18.3.7",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.5.0",
+    "globals": "^17.9.0",
     "jsdom": "^26.1.0",
     "prettier": "^3.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",