Просмотр исходного кода

fix(remark-drawio): prevent host CSS leaking into <foreignObject>

drawio sizes each diagram cell using user-agent default HTML metrics
and clips overflow via an inline max-height wrapper. When the host
page (e.g. GROWI's `.wiki`) applies descendant rules to elements like
`h1`, `p`, `li`, those rules cascade into HTML embedded inside SVG
`<foreignObject>` and inflate the rendered height, causing drawio to
clip the label content.

Add a defensive `all: revert` reset to common HTML elements inside
`<foreignObject>` so drawio cell labels render at UA-default metrics
regardless of host CSS, mirroring the existing
`.drawio-viewer * { box-sizing: content-box; }` defense.

Fixes #11052

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Yuki Takei 17 часов назад
Родитель
Сommit
da165a9391
1 измененных файлов с 12 добавлено и 0 удалено
  1. 12 0
      packages/remark-drawio/src/components/DrawioViewer.module.scss

+ 12 - 0
packages/remark-drawio/src/components/DrawioViewer.module.scss

@@ -7,3 +7,15 @@
 .drawio-viewer * {
   box-sizing: content-box;
 }
+
+// Revert host-page CSS that leaks into HTML rendered inside <foreignObject>.
+// drawio sizes each cell using UA-default HTML metrics and clips overflow via
+// an inline max-height wrapper, so non-default styles (e.g. line-height,
+// margin from a wrapping `.wiki` ruleset) cause label content to be cut off.
+.drawio-viewer foreignObject {
+  h1, h2, h3, h4, h5, h6,
+  p, ul, ol, li, blockquote,
+  img, video, table {
+    all: revert;
+  }
+}