app/components/admin/md-editor-commands.ts

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/post-editor.tsx.

Source

1// The site's own blocks for the markdown editor's slash menu and toolbar. The editing commands themselves
2// are Capsomer's (capsomer/behaviour/markdown-editor).
3
4// Alt is mandatory on :::chart and :::diagram and the build fails without it, so the cursor lands inside alt="".
5export const SCAFFOLDS = {
6  chart: {
7    label: "Chart",
8    hint: "Bar, line, dot or area from inline CSV",
9    text: [
10      ':::chart{type=bar x=name y=value title="" alt=""}',
11      "```csv",
12      "name,value",
13      "first,1",
14      "```",
15      "An optional caption.",
16      ":::",
17    ].join("\n"),
18    cursor: ':::chart{type=bar x=name y=value title="" alt="'.length,
19  },
20  diagram: {
21    label: "Diagram",
22    hint: "Mermaid, rendered by build:diagrams",
23    text: [
24      ':::diagram{title="" alt=""}',
25      "```mermaid",
26      "flowchart LR",
27      "  A[Start] --> B[End]",
28      "```",
29      "An optional caption.",
30      ":::",
31    ].join("\n"),
32    cursor: ':::diagram{title="" alt="'.length,
33  },
34  figure: {
35    label: "Figure",
36    hint: "An image with a caption",
37    text: [':::figure{src="" alt=""}', "A caption.", ":::"].join("\n"),
38    cursor: ':::figure{src="'.length,
39  },
40} as const;
41
42/** The figure the editor inserts for a dropped or pasted image. The URL's quote, space, parentheses and angle brackets
43 *  are percent-encoded, which keeps it the same address and cannot end the attribute; the alt's quotes become
44 *  entities. Carrel writes the same markup (carrel app/lib/site-markdown.ts). */
45export function figureMarkdown(url: string, alt: string): string {
46  const src = url.replace(/["\s()<>]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`);
47  return `:::figure{src="${src}" alt="${alt.trim().replace(/"/g, "&quot;")}"}\n:::`;
48}