David Walter 4712c7c619 feat(web): add mermaid-editor app for standalone .mmd diagrams (#12676) ...

* feat(web): add mermaid-editor app for standalone .mmd diagrams

md-editor-v3's mermaid support only fires inside a Markdown fenced
code block, so there was no way to edit a Mermaid diagram on its own.
This adds a dedicated split-pane editor/preview app (mirroring
web-app-html-editor's shape) for the mmd/mermaid extensions, feeding
raw diagram source straight into mermaid.render() - no Markdown
wrapping involved. Invalid syntax surfaces an inline error instead of
crashing the preview pane, and the rendered SVG is sanitized with
DOMPurify the same way the embedded markdown-mermaid renderer already
does.

🤖 Generated with Claude Code
Signed-off-by: David Walter <david.walter@kiteworks.com>

* test(web): add e2e coverage and WCAG 2.2 checks for mermaid-editor

Wires the new 'mmdFile' resource type into the create/edit e2e
resource helpers (mirroring txtFile/mdFile) and adds a spec covering
diagram rendering, invalid-syntax error surfacing, and the view-mode
toggle. The new mermaidEditor.ts page-object asserts the existing
WCAG 2.1 a11y baseline every other e2e spec uses, plus an additional
WCAG 2.2 tag scan (target-size, focus-appearance, etc.) scoped to
this file only - the shared a11y helper used by every other spec
stays on its current WCAG 2.1 tag set, since widening it repo-wide is
a separate decision with its own pre-existing-violation triage cost.

🤖 Generated with Claude Code
Signed-off-by: David Walter <david.walter@kiteworks.com>

* fix(web): register mermaid-editor in the default enabled apps list

CI's e2e run for the new mermaid-editor app timed out waiting for the
"New > Mermaid diagram" menu entry: config.json.dist (a reference/dev
file) had "mermaid-editor" added, but the actual runtime default config
a packaged oCIS binary serves comes from services/web's Go defaults,
which didn't. Also runs Prettier over the 3 files check:format flagged.

🤖 Generated with Claude Code
Signed-off-by: David Walter <david.walter@kiteworks.com>

* fix(web): correct vue3-gettext version, add changelog entry

vue3-gettext was pinned to an exact "2.4.0" in web-app-mermaid-editor's
package.json (a copy-paste slip) instead of "^4.0.1" like every other
web app package, pulling in a stray v2 dependency tree with its own
deprecated transitives (glob@7.2.3, inflight@1.0.6). Also adds the
changelog/unreleased entry this PR was missing.

🤖 Generated with Claude Code
Signed-off-by: David Walter <david.walter@kiteworks.com>

* fix(web): resolve stale mermaid lockfile entry from merge conflict

web/pnpm-lock.yaml pinned mermaid to 11.16.0 for the new
web-app-mermaid-editor importer, left over from a badly-resolved merge
with master (which resolves mermaid to 11.16.1 in every other
importer and in the packages snapshot). pnpm install --frozen-lockfile
failed in CI with ERR_PNPM_LOCKFILE_MISSING_DEPENDENCY since 11.16.0
had no corresponding packages entry.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: dj4oC <david.walter@kiteworks.com>

* test(web): register mermaid-editor in the e2e CI oCIS config

tests/config/ci/ocis-config.json is the WEB_UI_CONFIG_FILE the e2e
docker-compose stack (tests/acceptance/docker/src/ocis-base.yml) feeds
the oCIS instance under test. It keeps its own "apps" allowlist,
separate from services/web's Go defaults (already fixed) and
config.json.dist (also already fixed) - and it never got
"mermaid-editor" added. Without it, the running instance never
registers the app, so the "New > Mermaid diagram" menu entry the
mermaidEditor.spec.ts e2e test waits for never renders, and the click
times out after all retries.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: dj4oC <david.walter@kiteworks.com>

* fix(web): give the mermaid-editor CodeMirror pane an accessible name

The plain-text CodeMirror content div renders with role="textbox"
aria-multiline="true" but no aria-label/aria-labelledby/title, which
axe-core (and screen readers) flag as a serious WCAG violation - this
is exactly what the e2e a11y scan caught on the new mermaidEditor
spec. Fixed via EditorView.contentAttributes, the same mechanism
CodeMirror exposes for this. MermaidEditorPane.spec.ts is updated to
install defaultPlugins() like its sibling specs already do, since the
component now calls useGettext() for the label text.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: dj4oC <david.walter@kiteworks.com>

---------

Signed-off-by: David Walter <david.walter@kiteworks.com>
Signed-off-by: dj4oC <david.walter@kiteworks.com>
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

2026-09-17 22:00:47 +02:00

..

config.json.dist

feat(web): add mermaid-editor app for standalone .mmd diagrams (#12676)

2026-09-17 22:00:47 +02:00

config.json.sample-ocis

feat(web): add mermaid-editor app for standalone .mmd diagrams (#12676)

2026-09-17 22:00:47 +02:00