@puredesktop/platform-editor 1.0.0-beta.1

package/src/extensions/mermaidBlock.tsx

@@ -0,0 +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;
+  }
+`

package/src/extensions/slashCommands.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  createDefaultSlashCommands,
+  type SlashCommandItem,
+} from './slashCommands.js'
+
+function createEditor() {
+  const chain = {
+    focus: vi.fn(() => chain),
+    deleteRange: vi.fn(() => chain),
+    setTextSelection: vi.fn(() => chain),
+    setParagraph: vi.fn(() => chain),
+    setNode: vi.fn(() => chain),
+    toggleBold: vi.fn(() => chain),
+    toggleItalic: vi.fn(() => chain),
+    toggleUnderline: vi.fn(() => chain),
+    toggleCode: vi.fn(() => chain),
+    toggleBulletList: vi.fn(() => chain),
+    toggleOrderedList: vi.fn(() => chain),
+    toggleTaskList: vi.fn(() => chain),
+    sinkListItem: vi.fn(() => chain),
+    liftListItem: vi.fn(() => chain),
+    toggleBlockquote: vi.fn(() => chain),
+    toggleCodeBlock: vi.fn(() => chain),
+    insertTable: vi.fn(() => chain),
+    insertFootnote: vi.fn(() => chain),
+    toggleIndexMarker: vi.fn(() => chain),
+    insertMermaidBlock: vi.fn(() => chain),
+    run: vi.fn(() => true),
+  }
+  const editor = {
+    chain: vi.fn(() => chain),
+  }
+  return { editor, chain }
+}
+
+function runCommand(item: SlashCommandItem) {
+  const { editor, chain } = createEditor()
+  item.run({
+    editor: editor as never,
+    range: { from: 2, to: 8 },
+    query: item.title,
+    source: 'typed',
+  })
+  return { editor, chain }
+}
+
+function runSelectionCommand(item: SlashCommandItem) {
+  const { editor, chain } = createEditor()
+  item.run({
+    editor: editor as never,
+    range: { from: 2, to: 8 },
+    query: item.title,
+    source: 'selection',
+  })
+  return { editor, chain }
+}
+
+describe('createDefaultSlashCommands', () => {
+  it('provides the default PureWriter content command inventory', () => {
+    expect(createDefaultSlashCommands().map(item => item.id)).toEqual([
+      'paragraph',
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'bold',
+      'italic',
+      'underline',
+      'inline-code',
+      'link',
+      'bullet-list',
+      'numbered-list',
+      'task-list',
+      'indent-list',
+      'outdent-list',
+      'quote',
+      'code-block',
+      'table',
+      'footnote',
+      'index-marker',
+      'inline-equation',
+      'display-equation',
+      'mermaid',
+    ])
+  })
+
+  it('turns slash text into a paragraph', () => {
+    const paragraph = createDefaultSlashCommands().find(
+      item => item.id === 'paragraph',
+    )
+    expect(paragraph).toBeDefined()
+
+    const { chain } = runCommand(paragraph!)
+
+    expect(chain.deleteRange).toHaveBeenCalledWith({ from: 2, to: 8 })
+    expect(chain.setParagraph).toHaveBeenCalledOnce()
+    expect(chain.run).toHaveBeenCalledOnce()
+  })
+
+  it('turns slash text into headings', () => {
+    const commands = createDefaultSlashCommands()
+
+    const h1 = runCommand(commands.find(item => item.id === 'heading-1')!)
+    const h2 = runCommand(commands.find(item => item.id === 'heading-2')!)
+    const h3 = runCommand(commands.find(item => item.id === 'heading-3')!)
+
+    expect(h1.chain.setNode).toHaveBeenCalledWith('heading', { level: 1 })
+    expect(h2.chain.setNode).toHaveBeenCalledWith('heading', { level: 2 })
+    expect(h3.chain.setNode).toHaveBeenCalledWith('heading', { level: 3 })
+  })
+
+  it('turns slash text into mark, list, and block commands', () => {
+    const commands = createDefaultSlashCommands()
+
+    const bold = runCommand(commands.find(item => item.id === 'bold')!)
+    const italic = runCommand(commands.find(item => item.id === 'italic')!)
+    const underline = runCommand(
+      commands.find(item => item.id === 'underline')!,
+    )
+    const inlineCode = runCommand(
+      commands.find(item => item.id === 'inline-code')!,
+    )
+    const bullet = runCommand(commands.find(item => item.id === 'bullet-list')!)
+    const numbered = runCommand(
+      commands.find(item => item.id === 'numbered-list')!,
+    )
+    const task = runCommand(commands.find(item => item.id === 'task-list')!)
+    const indent = runCommand(commands.find(item => item.id === 'indent-list')!)
+    const outdent = runCommand(
+      commands.find(item => item.id === 'outdent-list')!,
+    )
+    const quote = runCommand(commands.find(item => item.id === 'quote')!)
+    const code = runCommand(commands.find(item => item.id === 'code-block')!)
+    const table = runCommand(commands.find(item => item.id === 'table')!)
+    const footnote = runCommand(commands.find(item => item.id === 'footnote')!)
+    const index = runCommand(
+      commands.find(item => item.id === 'index-marker')!,
+    )
+    const mermaid = runCommand(commands.find(item => item.id === 'mermaid')!)
+
+    expect(bold.chain.toggleBold).toHaveBeenCalledOnce()
+    expect(italic.chain.toggleItalic).toHaveBeenCalledOnce()
+    expect(underline.chain.toggleUnderline).toHaveBeenCalledOnce()
+    expect(inlineCode.chain.toggleCode).toHaveBeenCalledOnce()
+    expect(bullet.chain.toggleBulletList).toHaveBeenCalledOnce()
+    expect(numbered.chain.toggleOrderedList).toHaveBeenCalledOnce()
+    expect(task.chain.toggleTaskList).toHaveBeenCalledOnce()
+    expect(indent.chain.sinkListItem).toHaveBeenCalledWith('listItem')
+    expect(outdent.chain.liftListItem).toHaveBeenCalledWith('listItem')
+    expect(quote.chain.toggleBlockquote).toHaveBeenCalledOnce()
+    expect(code.chain.toggleCodeBlock).toHaveBeenCalledOnce()
+    expect(table.chain.insertTable).toHaveBeenCalledWith({
+      rows: 3,
+      cols: 3,
+      withHeaderRow: true,
+    })
+    expect(footnote.chain.insertFootnote).toHaveBeenCalledOnce()
+    expect(index.chain.toggleIndexMarker).toHaveBeenCalledOnce()
+    expect(mermaid.chain.insertMermaidBlock).toHaveBeenCalledOnce()
+  })
+
+  it('does not delete selected text when a slash command is run on a selection', () => {
+    const commands = createDefaultSlashCommands()
+    const bold = runSelectionCommand(commands.find(item => item.id === 'bold')!)
+
+    expect(bold.chain.deleteRange).not.toHaveBeenCalled()
+    expect(bold.chain.setTextSelection).toHaveBeenCalledWith({ from: 2, to: 8 })
+    expect(bold.chain.toggleBold).toHaveBeenCalledOnce()
+  })
+})