app/lib/site-markdown.ts

Functions

Imports

It imports no other module of this repo. Imported by app/components/editor/writing-surface.tsx, app/routes/editor.tsx.

Source

1// Each site's own Markdown for the things Carrel's editor inserts, shared by the server and the
2// browser (the editor runs in both). One place per site, so the editor writes what the site renders.
3
4import type { Scaffold } from "capsomer/react/markdown-editor";
5
6/** How the site places an image with its alt text (stage 3), in the site's own dialect. */
7const FIGURES: Record<string, (url: string, alt: string) => string> = {
8  // The site's figure directive, as its own editor inserts it (dustinedwards-info@f84b978,
9  // app/components/admin/use-image-upload.ts).
10  dustinedwards: (url, alt) => [`:::figure{src="${urlPart(url)}" alt="${alt.trim().replace(/"/g, "&quot;")}"}`, ":::"].join("\n"),
11  // germomics stores the article body as HTML, and its sanitizer keeps figure and img.
12  germomics: (url, alt) => `<figure><img src="${attr(url)}" alt="${attr(alt.trim())}"></figure>`,
13};
14
15function attr(value: string): string {
16  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
17}
18
19/** The URL with the characters that would end a directive attribute or a Markdown link percent-encoded: a quote, a
20 *  space, parentheses, angle brackets. Encoding keeps the URL the same address, where an entity relies on the
21 *  site's parser decoding it. */
22function urlPart(url: string): string {
23  return url.replace(/["\s()<>]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`);
24}
25
26/** Plain Markdown for a site with no figure syntax of its own. */
27const plain = (url: string, alt: string) => `![${alt.trim().replace(/[[\]]/g, "")}](${urlPart(url)})`;
28
29export function figureMarkup(site: string, url: string, alt: string): string {
30  return (FIGURES[site] ?? plain)(url, alt);
31}
32
33/**
34 * The blocks the toolbar and the `/` menu insert, in the site's own dialect. Alt is mandatory on
35 * :::chart and :::diagram and the site's build fails without it, so the cursor lands inside alt="".
36 * Capsomer's editor knows no block syntax; these are the data it is given.
37 */
38export const SCAFFOLDS: Scaffold[] = [
39  {
40    id: "chart",
41    label: "Chart",
42    hint: "Bar, line, dot or area from inline CSV",
43    icon: "M4 20V10M10 20V4M16 20v-7M22 20H2",
44    text: [':::chart{type=bar x=name y=value title="" alt=""}', "```csv", "name,value", "first,1", "```", "An optional caption.", ":::"].join("\n"),
45    cursorAfter: 'alt="',
46  },
47  {
48    id: "diagram",
49    label: "Diagram",
50    hint: "Mermaid, rendered by build:diagrams",
51    icon: "M4 4h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM15 15h5a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1zM10 6.5h4a3 3 0 0 1 3 3V15",
52    text: [':::diagram{title="" alt=""}', "```mermaid", "flowchart LR", "  A[Start] --> B[End]", "```", "An optional caption.", ":::"].join("\n"),
53    cursorAfter: 'alt="',
54  },
55  {
56    id: "figure",
57    label: "Figure",
58    hint: "An image with a caption",
59    icon: "M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM3 14l4-4 5 5M6 21h12",
60    text: [':::figure{src="" alt=""}', "A caption.", ":::"].join("\n"),
61    cursorAfter: 'src="',
62  },
63];