Jaspers Hub

jaspers / markdown

pluginOfficialReviewed★ 0↓ 6

Markdown Document: A single-view plugin that renders GitHub-flavored Markdown written into a panel's state as formatted React elements on the grid.

8.9 KB
Raw
1import { Fragment, useEffect, useMemo, useState, type ReactElement, type ReactNode } from 'react'
2import { useBridge, useData, usePublish, usePublishText, type PanelRef } from '@jaspers-ai/sdk'
3import type { Definition, List, ListItem, RootContent, Table } from 'mdast'
4import { definitionsOf, docOutput, docText, isLineBreak, linkHref, parseDoc, readMarkdown } from './doc'
5import './styles.css'
6
7// The view: the Markdown in the panel's state, read into a tree and drawn as React elements. Nothing
8// here becomes HTML from a string, so a document cannot inject markup: HTML reads as the text it is,
9// except <br>. Links open in the browser through the bridge, https only, since the frame can open
10// nothing itself. The title, length, and outline go out as the output, and the Markdown as the text.
11
12/** How long the Copy button says Copied. */
13const COPIED_MS = 1500
14
15/**
16 * The panel's state arrives a round trip after the frame mounts. Until it does there is no document,
17 * and publishing an empty one would say the view shows nothing when it is about to show something.
18 */
19export function DocView({ panel }: { panel: PanelRef }): ReactElement {
20 const state = useData(`workspaces/${panel.workspaceId}/panels/${panel.id}/state`)
21 if (state === undefined) {
22 return (
23 <div className="md-root">
24 <p className="md-empty">Loading…</p>
25 </div>
26 )
27 }
28 return <Doc panel={panel} markdown={readMarkdown(state)} />
29}
30
31/** What drawing a node needs beyond the node: the way to open a link, and what reference links point at. */
32interface Render {
33 open: (href: string) => void
34 definitions: Map<string, Definition>
35}
36
37function Doc({ panel, markdown }: { panel: PanelRef; markdown: string }): ReactElement {
38 const bridge = useBridge()
39 const tree = useMemo(() => parseDoc(markdown), [markdown])
40 const output = useMemo(() => docOutput(tree, markdown), [tree, markdown])
41 usePublish(panel, output)
42 usePublishText(panel, docText(markdown, output.title))
43 const render = useMemo<Render>(
44 () => ({
45 open: (href) => void bridge.openLink(href).catch(() => undefined),
46 definitions: definitionsOf(tree),
47 }),
48 [bridge, tree],
49 )
50 if (markdown.trim() === '') {
51 return (
52 <div className="md-root">
53 <p className="md-empty">Empty document.</p>
54 </div>
55 )
56 }
57 return (
58 <div className="md-root">
59 {/* The document scrolls under the button, which stays in the corner. */}
60 <div className="md-scroll">
61 <article className="md-doc">{blocks(tree.children, render)}</article>
62 </div>
63 <CopyButton markdown={markdown} />
64 </div>
65 )
66}
67
68/** Puts the Markdown on the clipboard through main, since the frame has no clipboard of its own. */
69function CopyButton({ markdown }: { markdown: string }): ReactElement {
70 const bridge = useBridge()
71 const [copied, setCopied] = useState(false)
72 useEffect(() => {
73 if (!copied) return
74 const timer = setTimeout(() => setCopied(false), COPIED_MS)
75 return () => clearTimeout(timer)
76 }, [copied])
77 return (
78 <button
79 type="button"
80 className="md-copy"
81 title="Copy the Markdown"
82 onClick={() => {
83 bridge.copyText(markdown).then(
84 () => setCopied(true),
85 () => undefined,
86 )
87 }}
88 >
89 {copied ? 'Copied' : 'Copy'}
90 </button>
91 )
92}
93
94function blocks(nodes: RootContent[], render: Render): ReactNode[] {
95 return nodes.map((node, i) => block(node, i, render))
96}
97
98function block(node: RootContent, key: number, render: Render): ReactNode {
99 switch (node.type) {
100 case 'heading': {
101 const Tag = `h${node.depth}` as const
102 return <Tag key={key}>{inlines(node.children, render)}</Tag>
103 }
104 case 'paragraph':
105 return <p key={key}>{inlines(node.children, render)}</p>
106 case 'list':
107 return list(node, key, render)
108 case 'code':
109 return (
110 <pre key={key}>
111 <code>{node.value}</code>
112 </pre>
113 )
114 case 'blockquote':
115 return <blockquote key={key}>{blocks(node.children, render)}</blockquote>
116 case 'table':
117 return table(node, key, render)
118 case 'thematicBreak':
119 return <hr key={key} />
120 case 'html':
121 return isLineBreak(node.value) ? (
122 <br key={key} />
123 ) : (
124 <p key={key} className="md-html">
125 {node.value}
126 </p>
127 )
128 case 'footnoteDefinition':
129 return (
130 <div key={key} className="md-footnote">
131 <span className="md-footnote-label">[{node.label ?? node.identifier}]</span>
132 <div>{blocks(node.children, render)}</div>
133 </div>
134 )
135 case 'definition':
136 return null
137 default:
138 return inline(node, key, render)
139 }
140}
141
142/** A tight list's items hold their words directly, as GitHub draws them; a loose list's hold paragraphs. */
143function list(node: List, key: number, render: Render): ReactNode {
144 const loose = node.spread === true || node.children.some((item) => item.spread === true)
145 const items = node.children.map((item, i) => listItem(item, i, loose, render))
146 return node.ordered ? (
147 <ol key={key} start={node.start ?? undefined}>
148 {items}
149 </ol>
150 ) : (
151 <ul key={key}>{items}</ul>
152 )
153}
154
155function listItem(item: ListItem, key: number, loose: boolean, render: Render): ReactNode {
156 const task = typeof item.checked === 'boolean'
157 return (
158 <li key={key} className={task ? 'md-task-item' : undefined}>
159 {task && (
160 <span className="md-task" role="img" aria-label={item.checked ? 'Done' : 'Not done'}>
161 {item.checked ? '☑' : '☐'}
162 </span>
163 )}
164 {item.children.map((child, i) =>
165 !loose && child.type === 'paragraph' ? <Fragment key={i}>{inlines(child.children, render)}</Fragment> : block(child, i, render),
166 )}
167 </li>
168 )
169}
170
171function table(node: Table, key: number, render: Render): ReactNode {
172 const [head, ...rows] = node.children
173 const align = (column: number) => node.align?.[column] ?? undefined
174 return (
175 <div key={key} className="md-table">
176 <table>
177 {head && (
178 <thead>
179 <tr>
180 {head.children.map((cell, i) => (
181 <th key={i} style={{ textAlign: align(i) }}>
182 {inlines(cell.children, render)}
183 </th>
184 ))}
185 </tr>
186 </thead>
187 )}
188 <tbody>
189 {rows.map((row, r) => (
190 <tr key={r}>
191 {row.children.map((cell, i) => (
192 <td key={i} style={{ textAlign: align(i) }}>
193 {inlines(cell.children, render)}
194 </td>
195 ))}
196 </tr>
197 ))}
198 </tbody>
199 </table>
200 </div>
201 )
202}
203
204function inlines(nodes: RootContent[], render: Render): ReactNode[] {
205 return nodes.map((node, i) => inline(node, i, render))
206}
207
208function inline(node: RootContent, key: number, render: Render): ReactNode {
209 switch (node.type) {
210 case 'text':
211 return node.value
212 case 'emphasis':
213 return <em key={key}>{inlines(node.children, render)}</em>
214 case 'strong':
215 return <strong key={key}>{inlines(node.children, render)}</strong>
216 case 'delete':
217 return <del key={key}>{inlines(node.children, render)}</del>
218 case 'inlineCode':
219 return <code key={key}>{node.value}</code>
220 case 'break':
221 return <br key={key} />
222 case 'html':
223 return isLineBreak(node.value) ? <br key={key} /> : node.value
224 case 'link':
225 return link(linkHref(node.url), inlines(node.children, render), key, render)
226 case 'linkReference':
227 return link(reference(node.identifier, render), inlines(node.children, render), key, render)
228 case 'image':
229 return image(linkHref(node.url), node.alt, key, render)
230 case 'imageReference':
231 return image(reference(node.identifier, render), node.alt, key, render)
232 case 'footnoteReference':
233 return (
234 <sup key={key} className="md-footnote-ref">
235 [{node.label ?? node.identifier}]
236 </sup>
237 )
238 default:
239 return 'children' in node ? <Fragment key={key}>{inlines(node.children, render)}</Fragment> : null
240 }
241}
242
243/** An https link opens in the browser through main; any other reads as its words. */
244function link(href: string | null, children: ReactNode, key: number, render: Render): ReactNode {
245 if (!href) return <Fragment key={key}>{children}</Fragment>
246 return (
247 <a
248 key={key}
249 href={href}
250 title={href}
251 onClick={(event) => {
252 event.preventDefault()
253 render.open(href)
254 }}
255 >
256 {children}
257 </a>
258 )
259}
260
261/** The frame loads no images, so an https image is a link to itself, named by its description. */
262function image(href: string | null, alt: string | null | undefined, key: number, render: Render): ReactNode {
263 const name = alt?.trim() || null
264 return href ? link(href, `Image: ${name ?? href}`, key, render) : name
265}
266
267function reference(identifier: string, render: Render): string | null {
268 const definition = render.definitions.get(identifier)
269 return definition ? linkHref(definition.url) : null
270}