@matfsw/docusaurus-plantuml-plugin 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -7,6 +7,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.1]
+
+### Fixed
+
+- **The toolbar's controls are drawn rather than typed** ([#21]). `⛶` U+26F6 SQUARE FOUR
+  CORNERS, the maximize icon, has no glyph in any font that ships with a stock Linux desktop,
+  so that control rendered as an empty box for an entire platform's readers — on the demo site
+  included. The other four only worked because DejaVu Sans happens to be installed, which a
+  minimal container image or a locked-down desktop does not promise, so all of them are now
+  inline SVG and the plugin depends on no font at all.
+
+  The source toggle's `</>` went the same way. It is ASCII and never had the glyph problem, but
+  left as text it would have been the one control still drawn in the page font, at a different
+  weight and optical size from its neighbours.
+
+  Nothing about the accessible surface changes: every button keeps its `aria-label`,
+  `aria-pressed`, `aria-expanded` and `aria-controls`, and the icons are `aria-hidden`. The
+  icons inherit `currentColor` and `1em`, so both colour modes and reader font scaling behave
+  exactly as before, with no CSS change. The `Copy` text button and the `⚠` error glyph are
+  unchanged.
+
+  If you worked around this with a `font-family` override on `[class*='toolbarButton']`, it is
+  now a harmless no-op and can be removed.
+
+### Changed
+
+- The example site records why its `onBrokenMarkdownLinks` stays at the top level rather than
+  moving to `markdown.hooks`, where Docusaurus 3.9 put it: 3.5's `markdown` schema rejects the
+  key outright, and CI builds that fixture against 3.5.2 — the oldest release this plugin's
+  peer range claims.
+
+[#21]: https://github.com/matf/docusaurus-plantuml-plugin/issues/21
+
 ## [1.3.0]
 
 ### Added
@@ -347,7 +380,8 @@ 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.3.0...HEAD
+[Unreleased]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.3.1...HEAD
+[1.3.1]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.2.0...v1.3.0
 [1.2.0]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.1.2...v1.2.0
 [1.1.2]: https://github.com/matf/docusaurus-plantuml-plugin/compare/v1.1.1...v1.1.2

package/README.md

@@ -898,6 +898,12 @@ The runtime requires:
 - `ResizeObserver` — optional; without it zoom still works, but the view is not re-clamped when
   the column is resized
 
+It requires **no particular fonts**. The toolbar's controls are inline SVG rather than symbol
+characters, which they were until 1.3.1: `⛶` U+26F6 (maximize) has no glyph in any font a stock
+Linux desktop ships, so it rendered as an empty box for those readers, and the rest only worked
+where DejaVu Sans happened to be installed. The icons inherit `currentColor` and `1em`, so they
+follow the colour mode and the reader's font size the way the characters did.
+
 That is modern evergreen Chrome, Edge, Firefox and Safari. Internet Explorer is not
 supported and will not be.
 

package/dist/theme/PlantUmlDiagram/icons.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The toolbar's icons, drawn rather than typed.
+ *
+ * These were symbol characters until 1.3.1, and one of them was invisible to a large group of
+ * readers: `⛶` U+26F6 SQUARE FOUR CORNERS has no glyph in any font that ships with a stock
+ * Linux desktop, so the maximize control rendered as a tofu box — on the demo site included.
+ * The other four only worked because DejaVu Sans happens to be installed, which a minimal
+ * container image or a locked-down corporate desktop does not promise. See issue #21.
+ *
+ * Two details keep the existing styling working with no CSS change at all:
+ *
+ * - `currentColor` inherits `.toolbarButton`'s `color: var(--ifm-font-color-base)`, so both
+ *   colour modes keep working exactly as they did.
+ * - `1em` inherits its `font-size: 1rem`, so the icons size with the button — and with a
+ *   reader who has scaled their font up — the way the characters used to.
+ *
+ * Every icon is `aria-hidden`: each `<button>` already carries an `aria-label`, which is the
+ * accessible name. Nothing here is announced.
+ */
+import type { ReactElement } from 'react';
+/** Replaces `−` U+2212. */
+export declare function ZoomOutIcon(): ReactElement;
+/** Replaces `+`. */
+export declare function ZoomInIcon(): ReactElement;
+/** Replaces `⟲` U+27F2: a circular arrow, open at the top right where the arrowhead sits. */
+export declare function ResetZoomIcon(): ReactElement;
+/** Replaces `⛶` U+26F6, the character that had no glyph. */
+export declare function MaximizeIcon(): ReactElement;
+/** Replaces `✕` U+2715, shown in place of maximize while the diagram fills the viewport. */
+export declare function CloseIcon(): ReactElement;
+/**
+ * Replaces the literal `</>` of the source toggle.
+ *
+ * ASCII, so it never had the glyph problem — but left as text it would be the one control in
+ * the row still drawn in the page font, at a different weight and optical size from its
+ * neighbours, and moving with the reader's font settings while they stayed put.
+ */
+export declare function SourceIcon(): ReactElement;

package/dist/theme/PlantUmlDiagram/icons.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const iconProps = {
+    viewBox: '0 0 16 16',
+    width: '1em',
+    height: '1em',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 1.5,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': true,
+    // Keeps the SVG out of the tab order in browsers that made it focusable by default.
+    focusable: false,
+};
+/** Replaces `−` U+2212. */
+export function ZoomOutIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M3 8h10" }) }));
+}
+/** Replaces `+`. */
+export function ZoomInIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M8 3v10M3 8h10" }) }));
+}
+/** Replaces `⟲` U+27F2: a circular arrow, open at the top right where the arrowhead sits. */
+export function ResetZoomIcon() {
+    return (_jsxs("svg", { ...iconProps, children: [_jsx("path", { d: "M13 8A5 5 0 1 1 11.4 4.3" }), _jsx("path", { d: "M13 2v3h-3" })] }));
+}
+/** Replaces `⛶` U+26F6, the character that had no glyph. */
+export function MaximizeIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" }) }));
+}
+/** Replaces `✕` U+2715, shown in place of maximize while the diagram fills the viewport. */
+export function CloseIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }));
+}
+/**
+ * Replaces the literal `</>` of the source toggle.
+ *
+ * ASCII, so it never had the glyph problem — but left as text it would be the one control in
+ * the row still drawn in the page font, at a different weight and optical size from its
+ * neighbours, and moving with the reader's font settings while they stayed put.
+ */
+export function SourceIcon() {
+    return (_jsx("svg", { ...iconProps, children: _jsx("path", { d: "M6 4L2 8l4 4M10 4l4 4-4 4" }) }));
+}

package/dist/theme/PlantUmlDiagram/index.js

@@ -7,6 +7,7 @@ import { PlantUmlError } from '../../runtime/errors.js';
 import { renderGraphvizDiagram } from '../../runtime/graphvizRenderer.js';
 import { renderDiagram } from '../../runtime/renderer.js';
 import { usePlantUmlConfig } from '../usePlantUmlConfig.js';
+import { CloseIcon, MaximizeIcon, ResetZoomIcon, SourceIcon, ZoomInIcon, ZoomOutIcon, } from './icons.js';
 import { useZoomPan } from './useZoomPan.js';
 import styles from './styles.module.css';
 /**
@@ -206,7 +207,7 @@ export default function PlantUmlDiagram({ source, title, language, engine = 'pla
         // Sanitized above unless `sanitizeSvg: false` was explicitly opted into.
         dangerouslySetInnerHTML: { __html: state.svg } }));
     const copyControl = sourceAvailable && sourceOpen && state.status === 'ready' && (_jsx("button", { type: "button", className: `${styles.toolbarButton} ${styles.toolbarTextButton}`, "aria-label": `Copy ${engineName} source to clipboard`, onClick: copySource, children: "Copy" }));
-    const sourceToggle = sourceAvailable && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": sourceOpen ? 'Hide diagram source' : 'Show diagram source', "aria-expanded": sourceOpen, "aria-controls": sourcePanelId, onClick: () => setSourceOpen((open) => !open), children: _jsx("span", { "aria-hidden": "true", children: '</>' }) }));
+    const sourceToggle = sourceAvailable && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": sourceOpen ? 'Hide diagram source' : 'Show diagram source', "aria-expanded": sourceOpen, "aria-controls": sourcePanelId, onClick: () => setSourceOpen((open) => !open), children: _jsx(SourceIcon, {}) }));
     /**
      * The source *replaces the diagram in its own frame* rather than appearing beneath it.
      *
@@ -224,7 +225,7 @@ export default function PlantUmlDiagram({ source, title, language, engine = 'pla
         [DATA_ATTR.theme]: dark ? 'dark' : 'light',
         ...(interactive ? { [DATA_ATTR.interactive]: 'true' } : {}),
         ...(zoom.maximized ? { [DATA_ATTR.maximized]: 'true' } : {}),
-        ...(sourceOpen ? { [DATA_ATTR.sourceOpen]: 'true' } : {}), children: [state.status === 'ready' && state.svg !== null && !interactive && canvas, state.status === 'ready' && state.svg !== null && !interactive && sourceView, state.status === 'ready' && state.svg !== null && !interactive && sourceAvailable && (_jsxs("div", { className: styles.plainToolbar, role: "group", "aria-label": `${label} source controls`, children: [sourceToggle, copyControl] })), state.status === 'ready' && state.svg !== null && interactive && (_jsxs("div", { ref: zoom.stageRef, className: zoom.maximized ? `${styles.stage} ${styles.maximized}` : styles.stage, children: [_jsxs("div", { className: styles.stageBody, children: [_jsx("div", { ref: zoom.viewportRef, className: sourceOpen ? `${styles.viewport} ${styles.invisibleView}` : styles.viewport, tabIndex: sourceOpen ? -1 : 0, "aria-describedby": hintId, "aria-keyshortcuts": "Plus Minus 0 ArrowUp ArrowDown ArrowLeft ArrowRight", onKeyDown: zoom.onKeyDown, [DATA_ATTR.zoom]: '1', children: _jsx("div", { ref: zoom.layerRef, className: styles.layer, children: canvas }) }), sourceView] }), _jsxs("div", { className: styles.toolbar, role: "group", "aria-label": `${label} zoom controls`, children: [!sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom out", onClick: zoom.zoomOut, children: _jsx("span", { "aria-hidden": "true", children: "\u2212" }) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom in", onClick: zoom.zoomIn, children: _jsx("span", { "aria-hidden": "true", children: "+" }) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Reset zoom", onClick: zoom.reset, children: _jsx("span", { "aria-hidden": "true", children: "\u27F2" }) })), _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Maximize diagram", "aria-pressed": zoom.maximized, onClick: zoom.toggleMaximize, children: _jsx("span", { "aria-hidden": "true", children: zoom.maximized ? '✕' : '⛶' }) }), sourceToggle, copyControl, _jsx("span", { ref: zoom.readoutRef, className: sourceOpen ? `${styles.readout} ${styles.hiddenView}` : styles.readout, "aria-hidden": "true", children: "100%" })] })] })), state.status === 'ready' && state.svg !== null && interactive && (_jsx("p", { id: hintId, className: styles.visuallyHidden, children: "Zoomable diagram. Use the zoom controls, or press plus and minus to zoom, the arrow keys to pan, and zero to reset." })), state.status !== 'ready' && state.status !== 'error' && (
+        ...(sourceOpen ? { [DATA_ATTR.sourceOpen]: 'true' } : {}), children: [state.status === 'ready' && state.svg !== null && !interactive && canvas, state.status === 'ready' && state.svg !== null && !interactive && sourceView, state.status === 'ready' && state.svg !== null && !interactive && sourceAvailable && (_jsxs("div", { className: styles.plainToolbar, role: "group", "aria-label": `${label} source controls`, children: [sourceToggle, copyControl] })), state.status === 'ready' && state.svg !== null && interactive && (_jsxs("div", { ref: zoom.stageRef, className: zoom.maximized ? `${styles.stage} ${styles.maximized}` : styles.stage, children: [_jsxs("div", { className: styles.stageBody, children: [_jsx("div", { ref: zoom.viewportRef, className: sourceOpen ? `${styles.viewport} ${styles.invisibleView}` : styles.viewport, tabIndex: sourceOpen ? -1 : 0, "aria-describedby": hintId, "aria-keyshortcuts": "Plus Minus 0 ArrowUp ArrowDown ArrowLeft ArrowRight", onKeyDown: zoom.onKeyDown, [DATA_ATTR.zoom]: '1', children: _jsx("div", { ref: zoom.layerRef, className: styles.layer, children: canvas }) }), sourceView] }), _jsxs("div", { className: styles.toolbar, role: "group", "aria-label": `${label} zoom controls`, children: [!sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom out", onClick: zoom.zoomOut, children: _jsx(ZoomOutIcon, {}) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Zoom in", onClick: zoom.zoomIn, children: _jsx(ZoomInIcon, {}) })), !sourceOpen && (_jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Reset zoom", onClick: zoom.reset, children: _jsx(ResetZoomIcon, {}) })), _jsx("button", { type: "button", className: styles.toolbarButton, "aria-label": "Maximize diagram", "aria-pressed": zoom.maximized, onClick: zoom.toggleMaximize, children: zoom.maximized ? _jsx(CloseIcon, {}) : _jsx(MaximizeIcon, {}) }), sourceToggle, copyControl, _jsx("span", { ref: zoom.readoutRef, className: sourceOpen ? `${styles.readout} ${styles.hiddenView}` : styles.readout, "aria-hidden": "true", children: "100%" })] })] })), state.status === 'ready' && state.svg !== null && interactive && (_jsx("p", { id: hintId, className: styles.visuallyHidden, children: "Zoomable diagram. Use the zoom controls, or press plus and minus to zoom, the arrow keys to pan, and zero to reset." })), state.status !== 'ready' && state.status !== 'error' && (
             // `aria-busy` on the figure already conveys progress; announcing every phase change
             // would make a page with several diagrams unusable with a screen reader.
             _jsxs("div", { className: styles.placeholder, children: [_jsx("span", { className: styles.spinner, "aria-hidden": "true" }), _jsxs("span", { children: [state.status === 'loading' ? `Loading ${engineName} runtime…` : null, state.status === 'rendering' ? `Rendering ${label}…` : null, state.status === 'idle' ? `${label} (waiting to render)` : null] })] })), state.status === 'error' && (_jsxs("div", { className: styles.error, role: "alert", children: [_jsxs("p", { className: styles.errorHeading, children: [_jsx("span", { className: styles.errorIcon, "aria-hidden": "true", children: "\u26A0" }), _jsxs("span", { children: ["Error: ", engineName, " diagram could not be rendered"] })] }), _jsx("pre", { className: styles.errorMessage, children: state.error }), config?.options.showSourceOnError !== false && (_jsxs("details", { className: styles.errorDetails, children: [_jsx("summary", { children: "Show diagram source" }), _jsx("pre", { className: styles.source, children: source })] }))] })), title !== undefined && _jsx("figcaption", { className: styles.caption, children: title }), _jsx("noscript", { dangerouslySetInnerHTML: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matfsw/docusaurus-plantuml-plugin",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Render PlantUML diagrams in Docusaurus 3 entirely in the browser - no Java, no PlantUML server, no CDN.",
   "keywords": [
     "docusaurus",