@plannotator/ui 0.41.0 → 0.41.2

package/components/diagram/DiagramCanvas.tsx

@@ -14,6 +14,8 @@ import { cn } from '../../lib/utils';
 import { diagramHitSource } from '../../utils/diagram-render';
 import { isMac, isModKeyHeld } from '../../utils/platform';
 import { Button } from '../ui/button';
+import { isDiagramControlEvent } from './diagramControls';
+import { svgContentSize } from './svgContentSize';
 import {
   DRAG_THRESHOLD_PX,
   TOUCH_DRAG_THRESHOLD_PX,
@@ -50,6 +52,13 @@ import {
  * `<a href>` that the render slot's sanitizer strips, so the canvas owns
  * every click and there is no armed switch.
  *
+ * Chrome painted OVER the canvas (the zoom strip, the composer, the source
+ * pane, the popout's header) is never a diagram target: a pointer event
+ * whose composed path contains a control resolves nothing, opens no
+ * composer and starts no pan (`diagramControls.ts`). Without that the
+ * `elementsFromPoint` walk stepped past the control to the part behind it,
+ * so pressing Zoom out over a node opened the composer on that node.
+ *
  * The render slot hands over a sanitized svg NODE, not markup: the wrapper
  * mounts it with `replaceChildren` once per render, so no html string ever
  * crosses into the app DOM here. The overlay (a sibling of the wrapper,
@@ -57,40 +66,10 @@ import {
  * viewport so rings reproject on every change.
  */
 
-/** A numeric svg length: `206`, `206pt`, `206px`. */
-function svgLength(value: string | null): number {
-  if (value === null) return Number.NaN;
-  return Number.parseFloat(value);
-}
-
-/** The svg's intrinsic size, from its viewBox (Mermaid and Graphviz always
- * write one), else its `width` / `height` attributes (a `pt` or `px` suffix
- * is accepted, as Graphviz writes them). */
-export function svgContentSize(svg: SVGSVGElement): ContentSize | null {
-  const viewBox = svg.getAttribute('viewBox');
-  if (viewBox !== null) {
-    const parts = viewBox
-      .trim()
-      .split(/[\s,]+/u)
-      .map(Number);
-    const width = parts[2];
-    const height = parts[3];
-    if (
-      parts.length === 4 &&
-      width !== undefined &&
-      height !== undefined &&
-      Number.isFinite(width) &&
-      Number.isFinite(height) &&
-      width > 0 &&
-      height > 0
-    ) {
-      return { width, height };
-    }
-  }
-  const width = svgLength(svg.getAttribute('width'));
-  const height = svgLength(svg.getAttribute('height'));
-  return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0 ? { width, height } : null;
-}
+// `svgContentSize` is the canvas's, but the document's fence block needs it
+// without the canvas: it lives in its own dependency-free module and is
+// re-exported here so every published path keeps resolving.
+export { svgContentSize } from './svgContentSize';
 
 /** One arrow-key press pans this far (the diagram moves WITH the arrow, as
  * a scroll would); Shift multiplies it by five. */
@@ -200,6 +179,10 @@ export function DiagramCanvas({
     (event: ReactPointerEvent): Element | null => {
       const wrapper = wrapperRef.current;
       if (wrapper === null) return null;
+      // The zoom strip and the composer are painted OVER the canvas and are
+      // not in the svg, so the walk below would step past them to whatever
+      // part sits underneath. A press on chrome addresses no part.
+      if (isDiagramControlEvent(event)) return null;
       // Everything under the pointer, topmost first. Without a layout
       // engine (happy-dom) the event's own target is all there is.
       const doc = wrapper.ownerDocument;
@@ -259,6 +242,11 @@ export function DiagramCanvas({
 
   const onPointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
     if (event.button !== 0) return;
+    // Pressing a control is not the start of a pan either.
+    if (isDiagramControlEvent(event)) {
+      pressRef.current = null;
+      return;
+    }
     pressRef.current = {
       id: event.pointerId,
       x: event.clientX,
@@ -302,6 +290,13 @@ export function DiagramCanvas({
       const press = pressRef.current;
       if (press === null || press.id !== event.pointerId) return;
       pressRef.current = null;
+      // Released over a control (the press began on the canvas): not a click
+      // on the diagram, and `targetUnder` answering null would otherwise
+      // read as "comment on the whole diagram".
+      if (isDiagramControlEvent(event)) {
+        if (press.panning) setPanning(false);
+        return;
+      }
       if (press.panning) {
         setPanning(false);
         const target = event.currentTarget;
@@ -395,6 +390,7 @@ export function DiagramCanvas({
         // comments). On a narrow screen the strip takes the left edge so it
         // never stacks under a host's own bottom-right controls.
         data-print-hide=""
+        data-diagram-control=""
         data-diagram-zoom-strip=""
         className="absolute bottom-3 right-3 z-10 flex items-center gap-0.5 rounded-md border border-border bg-card/85 p-0.5 backdrop-blur max-md:bottom-4 max-md:left-4 max-md:right-auto"
         role="group"

package/components/diagram/DiagramPending.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { DiagramKind } from '@plannotator/core/diagram-anchor';
+import type { Block } from '../../types';
+
+/**
+ * The diagram fence before there is a diagram: the source under a quiet
+ * "Rendering diagram…" status.
+ *
+ * It lives in its own file, importing nothing but React and two types,
+ * because it is the ONE pending state two callers must agree on. The block
+ * shows it while the engine chunk and the first render are in flight
+ * (`DiagramBlock`'s `renderFallback`), and the document shows it as the
+ * Suspense fallback while the diagram block's own chunk loads
+ * (`Viewer`) — a chunked host reaches the second one first. Same markup in
+ * both places, so a document with a diagram paints the source fence once and
+ * never flashes or jumps between the two.
+ *
+ * Keep it dependency-free: anything imported here lands in the closure of
+ * every document read, diagram or not.
+ */
+
+/** The fence's own text, as the document would show it unrendered. */
+export const DiagramInlineSource: React.FC<{ block: Block; kind: DiagramKind }> = ({ block, kind }) => (
+  <pre className="rounded-lg text-[13px] overflow-x-auto bg-muted/50 border border-border/30 p-4">
+    <code className={`pn-code font-mono language-${block.language?.trim().split(/\s+/, 1)[0] ?? kind}`}>{block.content}</code>
+  </pre>
+);
+
+/** The status line plus the source. `data-mermaid-pending` is the hook the
+ * Mermaid tests wait on and is kept exactly as it was. */
+export const DiagramPending: React.FC<{ block: Block; kind: DiagramKind }> = ({ block, kind }) => (
+  <>
+    <div
+      role="status"
+      aria-live="polite"
+      data-diagram-pending=""
+      {...(kind === 'mermaid' ? { 'data-mermaid-pending': '' } : {})}
+      className="mb-1.5 flex items-center gap-1.5 text-xs text-muted-foreground"
+    >
+      <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground/70" aria-hidden="true" />
+      Rendering diagram…
+    </div>
+    <DiagramInlineSource block={block} kind={kind} />
+  </>
+);
+
+/**
+ * The same pending state inside the boxes the block itself renders it in
+ * (the block wrapper, the inline host, the viewer's fallback slot), so the
+ * Suspense fallback occupies the same space the block will.
+ */
+export const DiagramBlockPending: React.FC<{ block: Block; kind: DiagramKind }> = ({ block, kind }) => (
+  <div className="annotation-exclude my-5 group relative" data-block-id={block.id} data-pinpoint-ignore="" data-diagram-block={kind}>
+    <div data-diagram-inline="">
+      <div data-diagram-fallback="" className="h-full min-h-0 w-full">
+        <DiagramPending block={block} kind={kind} />
+      </div>
+    </div>
+  </div>
+);

package/components/diagram/DiagramPopout.tsx

@@ -42,7 +42,9 @@ export function DiagramPopout({
       className="h-[calc(100vh-2rem)] w-[calc(100vw-2rem)] max-w-none"
       dataAttributes={{ 'data-diagram-popout': '', ...dataAttributes }}
     >
-      <div className="flex h-9 shrink-0 items-center gap-2 border-b border-border pl-4 pr-12">
+      {/* The popout's own chrome: a press here addresses no diagram part
+          (see diagram/diagramControls). */}
+      <div data-diagram-control="" data-diagram-popout-chrome="" className="flex h-9 shrink-0 items-center gap-2 border-b border-border pl-4 pr-12">
         <span className="truncate text-xs font-medium text-foreground">{title}</span>
         <span className="flex-1" />
         {hasPane && (

package/components/diagram/DiagramViewer.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import type { DiagramKind } from '@plannotator/core/diagram-anchor';
 import { cn } from '../../lib/utils';
 import { diagramFamilyOf } from '../../utils/diagram-anchor';
@@ -6,7 +6,6 @@ import { diagramFinder, type DiagramTheme } from '../../utils/diagram-render';
 import { DiagramCanvas, type DiagramCanvasHandle, type DiagramEscapeOutcome } from './DiagramCanvas';
 import { DiagramComposer } from './DiagramComposer';
 import { DiagramOverlay } from './DiagramOverlay';
-import { DiagramSourcePane } from './DiagramSourcePane';
 import { useDiagramComments, type DiagramComment, type DiagramCreateComment } from './useDiagramComments';
 import { useDiagramRender, type DiagramRenderState } from './useDiagramRender';
 import { useDiagramSourceDraft, type SaveResult } from './useDiagramSourceDraft';
@@ -21,6 +20,19 @@ import { useDiagramSourceDraft, type SaveResult } from './useDiagramSourceDraft'
  * (`components/DiagramBlock`) and again at full size in the popout; a host
  * with its own document store renders it wherever a diagram lives.
  */
+/**
+ * The Source pane is CodeMirror, and a viewer that can never open one (every
+ * fence in a Plannotator document today: no host passes `onSave`) must not
+ * carry it. It loads on the first open of the pane and never before, so the
+ * editor stays out of the document-read closure of a chunked host.
+ */
+const DiagramSourcePane = lazy(async () => ({ default: (await import('./DiagramSourcePane')).DiagramSourcePane }));
+
+/** The pane's box while its chunk loads: same class list, so the split it
+ * opens into is already the right size and nothing jumps when it lands.
+ * Never `null` here — that would collapse the row back onto the canvas. */
+const PANE_CLASS = 'order-last min-h-0 shrink-0 basis-2/5 border-t border-border md:order-first md:w-80 md:basis-auto md:border-r md:border-t-0';
+
 export interface DiagramViewerProps {
   readonly kind: DiagramKind;
   /** The diagram text. With `onSave` this is the saved baseline the pane's
@@ -206,12 +218,9 @@ export function DiagramViewer({
           column and the pane stays stacked UNDER the canvas, which
           `order-last` keeps while `md:order-first` puts it left from `md`. */}
       {hasPane && sourceOpen && (
-        <DiagramSourcePane
-          draft={draft}
-          editable={editable}
-          markedLines={markedLines}
-          className="order-last min-h-0 shrink-0 basis-2/5 border-t border-border md:order-first md:w-80 md:basis-auto md:border-r md:border-t-0"
-        />
+        <Suspense fallback={<div data-diagram-source-pane-pending="" aria-hidden="true" className={PANE_CLASS} />}>
+          <DiagramSourcePane draft={draft} editable={editable} markedLines={markedLines} className={PANE_CLASS} />
+        </Suspense>
       )}
       <div className="relative min-h-0 min-w-0 flex-1">
         {showFallback ? (

package/components/diagram/diagramControls.ts

@@ -0,0 +1,41 @@
+/**
+ * The canvas's own chrome, and why a pointer event on it must stop there.
+ *
+ * `DiagramCanvas` resolves what a click means over EVERYTHING under the
+ * pointer (`elementsFromPoint`, node → edge → cluster), because the edge hit
+ * layer sits above the nodes. The controls painted over the canvas — the
+ * zoom strip, the comment composer, the popout's own chrome — are not in the
+ * svg, so that walk skipped straight past them to whatever part happened to
+ * be underneath: pressing Zoom out over a node opened the composer on that
+ * node, and a press on the strip could start a pan.
+ *
+ * So a pointer event whose composed path contains a control surface never
+ * resolves a target, never opens the composer, and never starts a pan. It is
+ * the path rather than the point: a control knows it is a control, while a
+ * rectangle test would have to be kept in step with the layout.
+ *
+ * Mark new chrome with `data-diagram-control`. Buttons and toolbars count
+ * without marking, since anything the pointer can press is chrome by
+ * definition.
+ */
+export const DIAGRAM_CONTROL_SELECTOR =
+  '[data-diagram-control],[data-diagram-composer],[data-diagram-source-pane],[data-diagram-popout-chrome],button,[role="toolbar"],[role="button"],input,textarea,select,a[href]';
+
+function isElement(value: unknown): value is Element {
+  return typeof (value as Element | null)?.matches === 'function';
+}
+
+/** Whether this pointer event was aimed at the canvas's chrome rather than
+ * at the diagram. */
+export function isDiagramControlEvent(event: { target: EventTarget | null; nativeEvent?: Event }): boolean {
+  const native = event.nativeEvent ?? (event as unknown as Event);
+  const path = typeof native?.composedPath === 'function' ? native.composedPath() : [];
+  for (const entry of path) {
+    if (isElement(entry) && entry.matches(DIAGRAM_CONTROL_SELECTOR)) return true;
+  }
+  // `composedPath()` is empty once dispatch has finished, and jsdom-class
+  // DOMs may not implement it at all: the target's own ancestry is the same
+  // answer for everything but a shadow root.
+  const target = event.target;
+  return isElement(target) && target.closest(DIAGRAM_CONTROL_SELECTOR) !== null;
+}

package/components/diagram/index.ts

@@ -8,7 +8,10 @@
  */
 export { DiagramViewer, type DiagramViewerProps } from './DiagramViewer';
 export { DiagramPopout } from './DiagramPopout';
-export { DiagramCanvas, svgContentSize, KEY_PAN_PX, type DiagramCanvasHandle, type DiagramEscapeOutcome } from './DiagramCanvas';
+export { DiagramPending, DiagramInlineSource, DiagramBlockPending } from './DiagramPending';
+export { isDiagramControlEvent, DIAGRAM_CONTROL_SELECTOR } from './diagramControls';
+export { svgContentSize } from './svgContentSize';
+export { DiagramCanvas, KEY_PAN_PX, type DiagramCanvasHandle, type DiagramEscapeOutcome } from './DiagramCanvas';
 export { DiagramOverlay } from './DiagramOverlay';
 export { DiagramComposer } from './DiagramComposer';
 export { DiagramSourcePane } from './DiagramSourcePane';

package/components/diagram/svgContentSize.ts

@@ -0,0 +1,47 @@
+import type { ContentSize } from './useDiagramViewport';
+
+/**
+ * The rendered diagram's intrinsic size — a pure read of two svg attributes.
+ *
+ * It lives apart from `DiagramCanvas` (which re-exports it, so every
+ * published path still resolves) because the document's fence block needs
+ * it to size its inline box and nothing else of the canvas: importing it
+ * from the canvas dragged the whole zoom/pan surface, its viewport hook and
+ * lucide into any closure that touched a diagram block. The type import is
+ * erased, so this file's runtime dependencies are none.
+ */
+
+/** A numeric svg length: `206`, `206pt`, `206px`. */
+function svgLength(value: string | null): number {
+  if (value === null) return Number.NaN;
+  return Number.parseFloat(value);
+}
+
+/** The svg's intrinsic size, from its viewBox (Mermaid and Graphviz always
+ * write one), else its `width` / `height` attributes (a `pt` or `px` suffix
+ * is accepted, as Graphviz writes them). */
+export function svgContentSize(svg: SVGSVGElement): ContentSize | null {
+  const viewBox = svg.getAttribute('viewBox');
+  if (viewBox !== null) {
+    const parts = viewBox
+      .trim()
+      .split(/[\s,]+/u)
+      .map(Number);
+    const width = parts[2];
+    const height = parts[3];
+    if (
+      parts.length === 4 &&
+      width !== undefined &&
+      height !== undefined &&
+      Number.isFinite(width) &&
+      Number.isFinite(height) &&
+      width > 0 &&
+      height > 0
+    ) {
+      return { width, height };
+    }
+  }
+  const width = svgLength(svg.getAttribute('width'));
+  const height = svgLength(svg.getAttribute('height'));
+  return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0 ? { width, height } : null;
+}

package/config/settings.ts

@@ -22,6 +22,7 @@ import {
   type TokenHoverDelay,
   type TokenHoverTrigger,
 } from '@plannotator/core/token-hover';
+import { DEFAULT_DIAGRAM_SHADOW, isDiagramShadow } from '../utils/diagramShadow';
 import { storage } from '../utils/storage';
 import { generateIdentity } from '../utils/generateIdentity';
 import {
@@ -170,6 +171,27 @@ export const SETTINGS = {
     serverKey: undefined, fromServer: undefined, toServer: undefined,
   },
 
+  /**
+   * How strong the drop shadow under Mermaid diagram nodes is, 0..100, where
+   * 100 is Mermaid 12's own default geometry. Default 70: the shipped neo look
+   * with its halo toned down (the colour is always derived from the palette,
+   * see `utils/mermaidTheme`). Cookie-only, like the other display knobs.
+   */
+  diagramShadow: {
+    defaultValue: DEFAULT_DIAGRAM_SHADOW as number,
+    fromCookie: () => {
+      // `Number(null)` and `Number('')` are 0, which is a VALID amount here
+      // (unlike the token-hover steps), so an absent cookie must be rejected
+      // before the guard sees it — otherwise no cookie reads as "no shadow".
+      const raw = storage.getItem('plannotator-diagram-shadow');
+      if (raw === null || raw.trim() === '') return undefined;
+      const parsed = Number(raw);
+      return isDiagramShadow(parsed) ? parsed : undefined;
+    },
+    toCookie: (value: number) => storage.setItem('plannotator-diagram-shadow', String(value)),
+    serverKey: undefined, fromServer: undefined, toServer: undefined,
+  },
+
   vimModeEnabled: {
     // Vim bindings deliberately default OFF. Unmodified letter keys must remain
     // inert for existing users until they explicitly opt into modal document

package/hooks/usePrintMedia.ts

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * "Is this document being rendered for paper right now?"
+ *
+ * Two signals, because neither one alone covers every path:
+ *
+ *  - `beforeprint` / `afterprint` — what a real Cmd+P and the browser's print
+ *    preview fire. Handlers run BEFORE the print snapshot, so a DOM or class
+ *    write made from one is in the printed output; a React state update
+ *    scheduled from one is not guaranteed to be.
+ *  - `matchMedia('print')` change — what headless print emulation
+ *    (`page.emulateMedia({ media: 'print' })`) and some preview
+ *    implementations fire instead; there the page keeps living in print media,
+ *    so async work (a diagram re-render) does land.
+ *
+ * Firefox may skip `afterprint` when a preview is dismissed, so a
+ * `visibilitychange` back to a visible document also exits print mode.
+ */
+export function subscribePrintMedia(setPrinting: (printing: boolean) => void): () => void {
+  if (typeof window === 'undefined') return () => {};
+
+  const onBeforePrint = () => setPrinting(true);
+  const onAfterPrint = () => setPrinting(false);
+  const onVisibilityChange = () => {
+    if (!document.hidden) setPrinting(false);
+  };
+
+  window.addEventListener('beforeprint', onBeforePrint);
+  window.addEventListener('afterprint', onAfterPrint);
+  document.addEventListener('visibilitychange', onVisibilityChange);
+
+  const query = typeof window.matchMedia === 'function' ? window.matchMedia('print') : null;
+  const onMediaChange = (event: MediaQueryListEvent) => setPrinting(event.matches);
+  query?.addEventListener?.('change', onMediaChange);
+  if (query?.matches) setPrinting(true);
+
+  return () => {
+    window.removeEventListener('beforeprint', onBeforePrint);
+    window.removeEventListener('afterprint', onAfterPrint);
+    document.removeEventListener('visibilitychange', onVisibilityChange);
+    query?.removeEventListener?.('change', onMediaChange);
+  };
+}
+
+/**
+ * React binding over `subscribePrintMedia`. `onEnter` / `onExit` run inside the
+ * event handler itself, which is the only place a change is guaranteed to
+ * reach a real print snapshot; the returned boolean is the ordinary (async)
+ * state for everything that can wait.
+ */
+export function usePrintMedia(callbacks?: { onEnter?: () => void; onExit?: () => void }): boolean {
+  const [printing, setPrinting] = useState(false);
+
+  useEffect(() => {
+    let active = false;
+    return subscribePrintMedia((next) => {
+      if (next === active) return;
+      active = next;
+      if (next) callbacks?.onEnter?.();
+      else callbacks?.onExit?.();
+      setPrinting(next);
+    });
+    // The callbacks are read through the closure on purpose: re-subscribing on
+    // every render would drop the listener mid-print.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return printing;
+}

package/hooks/usePrintMode.ts

@@ -1,26 +1,22 @@
 import { useEffect } from 'react';
+import { subscribePrintMedia } from './usePrintMedia';
 
 /**
  * Manages print mode by toggling 'plannotator-print' class on <html>.
- * Includes visibilitychange fallback for Firefox, which may not fire
- * afterprint when print preview is closed without printing.
+ *
+ * Driven by `subscribePrintMedia`, so the class is applied for print media
+ * emulation (`page.emulateMedia({ media: 'print' })`, which fires no
+ * `beforeprint`) as well as for a real print, and is removed again on
+ * `afterprint` or on the visibility change Firefox leaves behind when a
+ * preview is dismissed without printing.
  */
 export function usePrintMode() {
   useEffect(() => {
-    const onBeforePrint = () => document.documentElement.classList.add('plannotator-print');
-    const onAfterPrint = () => document.documentElement.classList.remove('plannotator-print');
-    const onVisibilityChange = () => {
-      if (!document.hidden && document.documentElement.classList.contains('plannotator-print')) {
-        document.documentElement.classList.remove('plannotator-print');
-      }
-    };
-    window.addEventListener('beforeprint', onBeforePrint);
-    window.addEventListener('afterprint', onAfterPrint);
-    document.addEventListener('visibilitychange', onVisibilityChange);
+    const unsubscribe = subscribePrintMedia((printing) => {
+      document.documentElement.classList.toggle('plannotator-print', printing);
+    });
     return () => {
-      window.removeEventListener('beforeprint', onBeforePrint);
-      window.removeEventListener('afterprint', onAfterPrint);
-      document.removeEventListener('visibilitychange', onVisibilityChange);
+      unsubscribe();
       document.documentElement.classList.remove('plannotator-print');
     };
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/ui",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "type": "module",
   "exports": {
     "./components/*": "./components/*.tsx",

package/print.css

@@ -177,16 +177,39 @@
 
   /* ========== Typography ========== */
 
-  body, div, span, p, li, td, th, label, strong, em, b, i {
+  /*
+   * `:not([data-diagram-block] *)` keeps every typography rule off DIAGRAM
+   * content. Mermaid 12 draws node and edge labels as real HTML inside
+   * `<foreignObject>` (`span.nodeLabel > p`, `span.edgeLabel`), so a blanket
+   * `div, span, p { color: #1a1a1a !important }` repainted them — over a dark
+   * node fill that prints as an empty box. A diagram colours itself (and
+   * prints in the light half of the palette, see ThemeProvider), and its own
+   * `<style>` has no `!important` to defend itself with, so the exemption has
+   * to live here.
+   */
+  body,
+  div:not([data-diagram-block] *),
+  span:not([data-diagram-block] *),
+  p:not([data-diagram-block] *),
+  li:not([data-diagram-block] *),
+  td:not([data-diagram-block] *),
+  th:not([data-diagram-block] *),
+  label:not([data-diagram-block] *),
+  strong:not([data-diagram-block] *),
+  em:not([data-diagram-block] *),
+  b:not([data-diagram-block] *),
+  i:not([data-diagram-block] *) {
     color: #1a1a1a !important;
   }
 
-  strong, b {
+  strong:not([data-diagram-block] *),
+  b:not([data-diagram-block] *) {
     font-weight: bold !important;
     color: #000 !important;
   }
 
-  em, i {
+  em:not([data-diagram-block] *),
+  i:not([data-diagram-block] *) {
     font-style: italic !important;
     color: #1a1a1a !important;
   }
@@ -231,7 +254,7 @@
     color: #000 !important;
   }
 
-  p {
+  p:not([data-diagram-block] *) {
     margin: 0.5em 0;
     color: #1a1a1a !important;
   }