@puredesktop/platform-editor 1.0.0-beta.1 → 2.1.0

package/src/extensions/mermaidBlock.tsx

@@ -1,297 +1,297 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-import {
-  NodeViewWrapper,
-  ReactNodeViewRenderer,
-  type NodeViewProps,
-} from '@tiptap/react'
-import { useEffect, useState, type ChangeEvent } from 'react'
-import { styled } from 'styled-components'
-import { renderMermaidPreviewSvg } from '../mermaidPreview.js'
-
-export interface MermaidBlockOptions {
-  HTMLAttributes: Record<string, unknown>
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    mermaidBlock: {
-      /** Insert an editable Mermaid diagram block. */
-      insertMermaidBlock: (code?: string) => ReturnType
-    }
-  }
-}
-
-const DEFAULT_MERMAID = `flowchart TD
-  A[Start] --> B[Draft]
-  B --> C[Review]
-  C --> D[Publish]`
-
-function readMermaidCode(element: HTMLElement): string {
-  const source = element.matches('code')
-    ? element
-    : element.querySelector('pre code.language-mermaid, code.language-mermaid')
-  return (source?.textContent ?? element.getAttribute('data-code') ?? '').trim()
-}
-
-function createMermaidAssetId(): string {
-  return `asset_${
-    globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)
-  }`
-}
-
-export const MermaidBlock = Node.create<MermaidBlockOptions>({
-  name: 'mermaidBlock',
-  group: 'block',
-  atom: true,
-  isolating: true,
-  defining: true,
-  draggable: true,
-
-  addOptions() {
-    return { HTMLAttributes: {} }
-  },
-
-  addAttributes() {
-    return {
-      code: {
-        default: DEFAULT_MERMAID,
-        parseHTML: element => readMermaidCode(element as HTMLElement),
-        rendered: false,
-      },
-      assetId: {
-        default: null,
-        parseHTML: element =>
-          (element as HTMLElement).getAttribute('data-asset-id')?.trim() ||
-          null,
-      },
-    }
-  },
-
-  parseHTML() {
-    return [
-      { tag: 'figure[data-type="mermaid"]' },
-      { tag: 'div[data-type="mermaid"]' },
-      { tag: 'pre code.language-mermaid' },
-    ]
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    const code = String(node.attrs.code ?? DEFAULT_MERMAID)
-    const assetId = String(node.attrs.assetId ?? '').trim()
-    return [
-      'figure',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        'data-type': 'mermaid',
-        ...(assetId ? { 'data-asset-id': assetId } : {}),
-        class: 'mermaid-block',
-      }),
-      ['pre', {}, ['code', { class: 'language-mermaid' }, code]],
-    ]
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(MermaidBlockView)
-  },
-
-  addCommands() {
-    return {
-      insertMermaidBlock:
-        (code = DEFAULT_MERMAID) =>
-        ({ commands }) =>
-          commands.insertContent({
-            type: this.name,
-            attrs: { code, assetId: createMermaidAssetId() },
-          }),
-    }
-  },
-})
-
-function MermaidBlockView({
-  node,
-  selected,
-  updateAttributes,
-}: NodeViewProps): React.ReactElement {
-  const code = String(node.attrs.code ?? DEFAULT_MERMAID)
-  const assetId = String(node.attrs.assetId ?? '').trim()
-  const [isEditing, setIsEditing] = useState(false)
-  const [svg, setSvg] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [isRendering, setIsRendering] = useState(true)
-
-  useEffect(() => {
-    if (!assetId) updateAttributes({ assetId: createMermaidAssetId() })
-  }, [assetId, updateAttributes])
-
-  useEffect(() => {
-    let cancelled = false
-    setIsRendering(true)
-    const timeout = window.setTimeout(
-      () =>
-        void (async () => {
-          try {
-            const svg = await renderMermaidPreviewSvg(
-              code.trim() || DEFAULT_MERMAID,
-            )
-            if (cancelled) return
-            setSvg(svg)
-            setError(null)
-          } catch (err) {
-            if (cancelled) return
-            setSvg('')
-            setError(
-              err instanceof Error ? err.message : 'Could not render diagram.',
-            )
-          } finally {
-            if (!cancelled) setIsRendering(false)
-          }
-        })(),
-      120,
-    )
-    return () => {
-      cancelled = true
-      window.clearTimeout(timeout)
-    }
-  }, [code])
-
-  return (
-    <NodeViewWrapper>
-      <StyledBlock $selected={selected}>
-        <StyledHeader contentEditable={false}>
-          <StyledEyebrow>Mermaid diagram</StyledEyebrow>
-          <StyledToggle
-            type="button"
-            onClick={() => setIsEditing(current => !current)}
-          >
-            {isEditing ? 'Preview' : 'Edit'}
-          </StyledToggle>
-        </StyledHeader>
-        {isEditing ? (
-          <StyledEditorPanel contentEditable={false}>
-            <StyledTextarea
-              value={code}
-              spellCheck={false}
-              onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-                updateAttributes({ code: event.target.value })
-              }
-            />
-          </StyledEditorPanel>
-        ) : null}
-        <StyledPreview contentEditable={false}>
-          {isRendering ? (
-            <StyledLoading>Rendering diagram…</StyledLoading>
-          ) : error ? (
-            <StyledError>
-              <strong>Mermaid could not render this diagram.</strong>
-              <span>{error}</span>
-            </StyledError>
-          ) : (
-            <StyledSvg dangerouslySetInnerHTML={{ __html: svg }} />
-          )}
-        </StyledPreview>
-      </StyledBlock>
-    </NodeViewWrapper>
-  )
-}
-
-const StyledBlock = styled.figure<{ $selected: boolean }>`
-  background: var(--platform-colors-surface);
-  border: 1px solid
-    ${({ $selected }) =>
-      $selected
-        ? 'var(--platform-colors-focus)'
-        : 'rgb(from var(--platform-colors-border) r g b / 0.9)'};
-  border-radius: 14px;
-  box-shadow: ${({ $selected }) =>
-    $selected
-      ? '0 0 0 3px rgb(from var(--platform-colors-focus) r g b / 0.16)'
-      : 'none'};
-  margin: 1.4em 0;
-  overflow: hidden;
-`
-
-const StyledHeader = styled.div`
-  align-items: center;
-  border-bottom: 1px solid rgb(from var(--platform-colors-border) r g b / 0.68);
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 12px;
-`
-
-const StyledEyebrow = styled.span`
-  color: var(--platform-colors-text-secondary);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-`
-
-const StyledToggle = styled.button`
-  background: transparent;
-  border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.82);
-  border-radius: 999px;
-  color: var(--platform-colors-text);
-  font-size: 12px;
-  font-weight: 650;
-  padding: 5px 10px;
-
-  &:hover {
-    background: var(--platform-colors-surface-hover);
-  }
-`
-
-const StyledEditorPanel = styled.div`
-  border-bottom: 1px solid rgb(from var(--platform-colors-border) r g b / 0.68);
-  padding: 12px;
-`
-
-const StyledTextarea = styled.textarea`
-  background: rgb(from var(--platform-colors-app-viewport) r g b / 0.74);
-  border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.82);
-  border-radius: 10px;
-  color: var(--platform-colors-text);
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  font-size: 13px;
-  line-height: 1.45;
-  min-height: 160px;
-  padding: 12px;
-  resize: vertical;
-  width: 100%;
-`
-
-const StyledPreview = styled.div`
-  align-items: center;
-  background: rgb(from var(--platform-colors-app-viewport) r g b / 0.42);
-  display: flex;
-  justify-content: center;
-  min-height: 180px;
-  padding: 18px;
-`
-
-const StyledSvg = styled.div`
-  max-width: 100%;
-  overflow: auto;
-
-  svg {
-    display: block;
-    height: auto;
-    max-width: 100%;
-  }
-`
-
-const StyledLoading = styled.div`
-  color: var(--platform-colors-text-secondary);
-  font-size: 13px;
-`
-
-const StyledError = styled.div`
-  color: var(--platform-colors-text-danger);
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  text-align: center;
-
-  span {
-    color: var(--platform-colors-text-secondary);
-    font-size: 12px;
-  }
-`
+import { Node, mergeAttributes } from '@tiptap/core'
+import {
+  NodeViewWrapper,
+  ReactNodeViewRenderer,
+  type NodeViewProps,
+} from '@tiptap/react'
+import { useEffect, useState, type ChangeEvent } from 'react'
+import { styled } from 'styled-components'
+import { renderMermaidPreviewSvg } from '../mermaidPreview.js'
+
+export interface MermaidBlockOptions {
+  HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mermaidBlock: {
+      /** Insert an editable Mermaid diagram block. */
+      insertMermaidBlock: (code?: string) => ReturnType
+    }
+  }
+}
+
+const DEFAULT_MERMAID = `flowchart TD
+  A[Start] --> B[Draft]
+  B --> C[Review]
+  C --> D[Publish]`
+
+function readMermaidCode(element: HTMLElement): string {
+  const source = element.matches('code')
+    ? element
+    : element.querySelector('pre code.language-mermaid, code.language-mermaid')
+  return (source?.textContent ?? element.getAttribute('data-code') ?? '').trim()
+}
+
+function createMermaidAssetId(): string {
+  return `asset_${
+    globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)
+  }`
+}
+
+export const MermaidBlock = Node.create<MermaidBlockOptions>({
+  name: 'mermaidBlock',
+  group: 'block',
+  atom: true,
+  isolating: true,
+  defining: true,
+  draggable: true,
+
+  addOptions() {
+    return { HTMLAttributes: {} }
+  },
+
+  addAttributes() {
+    return {
+      code: {
+        default: DEFAULT_MERMAID,
+        parseHTML: element => readMermaidCode(element as HTMLElement),
+        rendered: false,
+      },
+      assetId: {
+        default: null,
+        parseHTML: element =>
+          (element as HTMLElement).getAttribute('data-asset-id')?.trim() ||
+          null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'figure[data-type="mermaid"]' },
+      { tag: 'div[data-type="mermaid"]' },
+      { tag: 'pre code.language-mermaid' },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const code = String(node.attrs.code ?? DEFAULT_MERMAID)
+    const assetId = String(node.attrs.assetId ?? '').trim()
+    return [
+      'figure',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        'data-type': 'mermaid',
+        ...(assetId ? { 'data-asset-id': assetId } : {}),
+        class: 'mermaid-block',
+      }),
+      ['pre', {}, ['code', { class: 'language-mermaid' }, code]],
+    ]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(MermaidBlockView)
+  },
+
+  addCommands() {
+    return {
+      insertMermaidBlock:
+        (code = DEFAULT_MERMAID) =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: { code, assetId: createMermaidAssetId() },
+          }),
+    }
+  },
+})
+
+function MermaidBlockView({
+  node,
+  selected,
+  updateAttributes,
+}: NodeViewProps): React.ReactElement {
+  const code = String(node.attrs.code ?? DEFAULT_MERMAID)
+  const assetId = String(node.attrs.assetId ?? '').trim()
+  const [isEditing, setIsEditing] = useState(false)
+  const [svg, setSvg] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [isRendering, setIsRendering] = useState(true)
+
+  useEffect(() => {
+    if (!assetId) updateAttributes({ assetId: createMermaidAssetId() })
+  }, [assetId, updateAttributes])
+
+  useEffect(() => {
+    let cancelled = false
+    setIsRendering(true)
+    const timeout = window.setTimeout(
+      () =>
+        void (async () => {
+          try {
+            const svg = await renderMermaidPreviewSvg(
+              code.trim() || DEFAULT_MERMAID,
+            )
+            if (cancelled) return
+            setSvg(svg)
+            setError(null)
+          } catch (err) {
+            if (cancelled) return
+            setSvg('')
+            setError(
+              err instanceof Error ? err.message : 'Could not render diagram.',
+            )
+          } finally {
+            if (!cancelled) setIsRendering(false)
+          }
+        })(),
+      120,
+    )
+    return () => {
+      cancelled = true
+      window.clearTimeout(timeout)
+    }
+  }, [code])
+
+  return (
+    <NodeViewWrapper>
+      <StyledBlock $selected={selected}>
+        <StyledHeader contentEditable={false}>
+          <StyledEyebrow>Mermaid diagram</StyledEyebrow>
+          <StyledToggle
+            type="button"
+            onClick={() => setIsEditing(current => !current)}
+          >
+            {isEditing ? 'Preview' : 'Edit'}
+          </StyledToggle>
+        </StyledHeader>
+        {isEditing ? (
+          <StyledEditorPanel contentEditable={false}>
+            <StyledTextarea
+              value={code}
+              spellCheck={false}
+              onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
+                updateAttributes({ code: event.target.value })
+              }
+            />
+          </StyledEditorPanel>
+        ) : null}
+        <StyledPreview contentEditable={false}>
+          {isRendering ? (
+            <StyledLoading>Rendering diagram…</StyledLoading>
+          ) : error ? (
+            <StyledError>
+              <strong>Mermaid could not render this diagram.</strong>
+              <span>{error}</span>
+            </StyledError>
+          ) : (
+            <StyledSvg dangerouslySetInnerHTML={{ __html: svg }} />
+          )}
+        </StyledPreview>
+      </StyledBlock>
+    </NodeViewWrapper>
+  )
+}
+
+const StyledBlock = styled.figure<{ $selected: boolean }>`
+  background: var(--platform-colors-surface);
+  border: 1px solid
+    ${({ $selected }) =>
+      $selected
+        ? 'var(--platform-colors-focus)'
+        : 'rgb(from var(--platform-colors-border) r g b / 0.9)'};
+  border-radius: 14px;
+  box-shadow: ${({ $selected }) =>
+    $selected
+      ? '0 0 0 3px rgb(from var(--platform-colors-focus) r g b / 0.16)'
+      : 'none'};
+  margin: 1.4em 0;
+  overflow: hidden;
+`
+
+const StyledHeader = styled.div`
+  align-items: center;
+  border-bottom: 1px solid rgb(from var(--platform-colors-border) r g b / 0.68);
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 12px;
+`
+
+const StyledEyebrow = styled.span`
+  color: var(--platform-colors-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+`
+
+const StyledToggle = styled.button`
+  background: transparent;
+  border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.82);
+  border-radius: 999px;
+  color: var(--platform-colors-text);
+  font-size: 12px;
+  font-weight: 650;
+  padding: 5px 10px;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+  }
+`
+
+const StyledEditorPanel = styled.div`
+  border-bottom: 1px solid rgb(from var(--platform-colors-border) r g b / 0.68);
+  padding: 12px;
+`
+
+const StyledTextarea = styled.textarea`
+  background: rgb(from var(--platform-colors-app-viewport) r g b / 0.74);
+  border: 1px solid rgb(from var(--platform-colors-border) r g b / 0.82);
+  border-radius: 10px;
+  color: var(--platform-colors-text);
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.45;
+  min-height: 160px;
+  padding: 12px;
+  resize: vertical;
+  width: 100%;
+`
+
+const StyledPreview = styled.div`
+  align-items: center;
+  background: rgb(from var(--platform-colors-app-viewport) r g b / 0.42);
+  display: flex;
+  justify-content: center;
+  min-height: 180px;
+  padding: 18px;
+`
+
+const StyledSvg = styled.div`
+  max-width: 100%;
+  overflow: auto;
+
+  svg {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+`
+
+const StyledLoading = styled.div`
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+`
+
+const StyledError = styled.div`
+  color: var(--platform-colors-text-danger);
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  text-align: center;
+
+  span {
+    color: var(--platform-colors-text-secondary);
+    font-size: 12px;
+  }
+`