@protobase/ui 0.19.8 → 0.19.9

package/dist/app/create/create-page.js

@@ -117,7 +117,7 @@ const LoadedCreate = ({ resource, values }) => {
 				help: view?.fields[name]?.help,
 				required: isRequired(field),
 				error: errors[name],
-				wide: Boolean(view?.fields[name]?.multiline),
+				wide: Boolean(view?.fields[name]?.multiline || view?.fields[name]?.markdown),
 				editor: /* @__PURE__ */ jsx(FieldEditor, {
 					field,
 					hints: view?.fields[name],

package/dist/app/displays/record-card.js

@@ -8,6 +8,9 @@ import { amountParts, cardFields, filledAmount, filledMeta } from "./list-displa
 import { AppLink } from "../use-app-address.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
+import { Markdown } from "../../markdown/markdown.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
+import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
 import { namedIcon } from "../named-icon.js";
 import { FavoriteButton } from "../saved/favorite-button.js";
 import { ValueBadge } from "../value-badge.js";
@@ -38,7 +41,9 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const text = (name) => {
 		const field = model.fields[name];
 		if (!field) return "";
-		return row.labels[name] ?? displayValue(field, row.record[name], view?.fields[name]);
+		const value = row.record[name];
+		if (row.labels[name] === void 0 && isMarkdown(field, view?.fields[name]) && typeof value === "string" && value !== "") return markdownExcerpt(value);
+		return row.labels[name] ?? displayValue(field, value, view?.fields[name]);
 	};
 	const { fields: fieldTypes, components } = useProjectUi();
 	const Card = display.card === void 0 ? void 0 : components?.[display.card];
@@ -53,6 +58,15 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			fallback: text(name)
 		}) : text(name);
 	};
+	const subtitleValue = (name) => {
+		const field = model.fields[name];
+		const value = row.record[name];
+		if (!field || !isMarkdown(field, view?.fields[name]) || shownWidget(fieldTypes, field, view?.fields[name]) || typeof value !== "string" || value === "") return shownValue(name);
+		return /* @__PURE__ */ jsx(Markdown, {
+			source: value,
+			inLink: true
+		});
+	};
 	const metaValue = (name) => {
 		const field = model.fields[name];
 		const hints = view?.fields[name];
@@ -99,8 +113,8 @@ const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 			})]
 		}),
 		subtitle !== void 0 && /* @__PURE__ */ jsx("span", {
-			className: view?.fields[subtitle]?.multiline ? "line-clamp-3 whitespace-pre-line break-words text-muted-foreground" : "truncate text-muted-foreground",
-			children: shownValue(subtitle)
+			className: view?.fields[subtitle]?.markdown ? "line-clamp-3 break-words text-muted-foreground" : view?.fields[subtitle]?.multiline ? "line-clamp-3 whitespace-pre-line break-words text-muted-foreground" : "truncate text-muted-foreground",
+			children: subtitleValue(subtitle)
 		}),
 		shownAmount !== void 0 && /* @__PURE__ */ jsx("span", {
 			className: "truncate tabular-nums text-muted-foreground",

package/dist/app/field-editor.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
+import { humanize } from "../live/naming.js";
 import { Switch } from "../primitives/switch.js";
 import { Textarea } from "../primitives/textarea.js";
 import { displayValue } from "../live/display-value.js";
@@ -10,6 +11,9 @@ import { SensitiveField } from "./sensitive-field.js";
 import { FileField } from "./file-field.js";
 import { useShownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
+import { Markdown } from "../markdown/markdown.js";
+import { MarkdownEditor } from "../markdown/markdown-editor.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
@@ -70,6 +74,11 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		});
 	}
 	const multiline = Boolean(hints?.multiline) && field.type === "text";
+	const markdown = isMarkdown(field, hints);
+	if ((!isEditable(field) || locked) && markdown && typeof stored === "string" && stored !== "") return /* @__PURE__ */ jsx(Markdown, {
+		source: stored,
+		className: "py-1.5"
+	});
 	if (!isEditable(field) || locked) return /* @__PURE__ */ jsx("div", {
 		className: cn("py-1.5 tabular-nums", field.type === "decimal" || field.type === "integer" ? "font-medium" : "text-muted-foreground", multiline && "whitespace-pre-line break-words"),
 		children: displayValue(field, stored, hints)
@@ -86,6 +95,13 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			children: enumLabel(option, hints?.valueLabels)
 		}, option))]
 	});
+	if (markdown) return /* @__PURE__ */ jsx(MarkdownEditor, {
+		label: hints?.label ?? humanize(field.name),
+		invalid,
+		placeholder,
+		value: String(value),
+		onChange
+	});
 	if (multiline) return /* @__PURE__ */ jsx(Textarea, {
 		invalid,
 		placeholder,

package/dist/app/pages/field-value.js

@@ -9,6 +9,8 @@ import { AppLink } from "../use-app-address.js";
 import { FileImage } from "../../live/file-image.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
+import { Markdown } from "../../markdown/markdown.js";
+import { isMarkdown } from "../../markdown/markdown-hint.js";
 import { ValueBadge } from "../value-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -70,6 +72,7 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 			})]
 		});
 	}
+	if (isMarkdown(field, hints)) return /* @__PURE__ */ jsx(Markdown, { source: String(value) });
 	const text = displayValue(field, value, hints);
 	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
 		value,

package/dist/app/record-page.js

@@ -16,6 +16,8 @@ import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
+import { Markdown } from "../markdown/markdown.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { FieldEditor } from "./field-editor.js";
 import { can, fieldAccess } from "./permissions.js";
 import { Field } from "../record-view/field.js";
@@ -164,7 +166,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			label: hint(name)?.label ?? humanize(name),
 			help: fieldHelp(hint(name), view, editing),
 			error: editor.errors[name],
-			wide: Boolean(hint(name)?.multiline),
+			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
 			conflict: conflict === void 0 ? void 0 : {
 				user: {
 					name: "Someone else",
@@ -211,7 +213,7 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 		return {
 			label: hint(name)?.label ?? humanize(name),
 			help: fieldHelp(hint(name), view, editing),
-			wide: Boolean(hint(name)?.multiline),
+			wide: Boolean(hint(name)?.multiline || hint(name)?.markdown),
 			value
 		};
 	};
@@ -222,11 +224,13 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
 			const text = displayValue(field, stored.record[name], hint(name));
+			const value = stored.record[name];
+			const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
 			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
-				value: stored.record[name],
+				value,
 				hints: hint(name),
 				children: text
-			}) : /* @__PURE__ */ jsx("strong", {
+			}) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : /* @__PURE__ */ jsx("strong", {
 				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
 				children: text
 			});

package/dist/live/columns-from-model.js

@@ -1,4 +1,6 @@
 import { humanize } from "./naming.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
+import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {
@@ -94,6 +96,7 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 				value: (row) => row[name] == null ? null : currencyCents(row[name])
 			},
 			...(kind === "datetime" || kind === "date") && { value: (row) => row[name] == null ? null : Date.parse(String(row[name])) },
+			...isMarkdown(field, viewField) && { value: (row) => typeof row[name] === "string" ? markdownExcerpt(row[name]) : row[name] },
 			...(kind === "percent" || kind === "number" && field.type === "decimal") && { value: (row) => row[name] == null ? null : Number(row[name]) }
 		}];
 	});

package/dist/markdown/markdown-content.js

@@ -0,0 +1,18 @@
+import { cn } from "../lib/cn.js";
+import { markdownHtml } from "./markdown-html.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import DOMPurify from "dompurify";
+//#region src/markdown/markdown-content.tsx
+const page = cn("break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", "[&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_pre]:my-2 [&_blockquote]:my-2 [&_table]:my-2 [&_hr]:my-3", "[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-lg [&_h1]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-base [&_h2]:font-semibold", "[&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:font-semibold [&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:font-semibold [&_h5]:font-semibold [&_h6]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_li:has(>input)]:list-none [&_li>input]:mr-1.5 [&_li>input]:-ml-5 [&_li>input]:align-middle", "[&_a]:text-primary-text [&_a]:underline [&_a]:underline-offset-2 hover:[&_a]:text-primary-hover", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em]", "[&_pre]:whitespace-pre-wrap [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_blockquote]:border-l-2 [&_blockquote]:border-border-strong [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_table]:w-full [&_table]:border-collapse [&_th]:border [&_th]:border-border [&_th]:bg-surface [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold", "[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_td]:[overflow-wrap:anywhere]", "[&_hr]:border-border [&_img]:inline [&_img]:max-w-full [&_img]:rounded [&_del]:text-muted-foreground");
+const inLink = cn("[&_*]:my-0 [&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold [&_ul]:list-inside [&_ol]:list-inside [&_pre]:whitespace-pre-wrap [&_code]:font-mono [&_code]:text-[0.9em]");
+/** Markdown rendered, sanitised before it reaches the page: raw HTML shows as text, links open in a new tab. */
+const MarkdownContent = ({ source, inLink: insideLink = false, className }) => {
+	const html = useMemo(() => DOMPurify.sanitize(markdownHtml(source, { inLink: insideLink }), { ADD_ATTR: ["target"] }), [source, insideLink]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(insideLink ? inLink : page, className),
+		dangerouslySetInnerHTML: { __html: html }
+	});
+};
+//#endregion
+export { MarkdownContent };

package/dist/markdown/markdown-editor.js

@@ -0,0 +1,46 @@
+import { Segmented } from "../primitives/segmented.js";
+import { Textarea } from "../primitives/textarea.js";
+import { Markdown } from "./markdown.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/markdown/markdown-editor.tsx
+const modes = [{
+	value: "write",
+	label: "Write"
+}, {
+	value: "preview",
+	label: "Preview"
+}];
+/**
+* Markdown source in a box that grows with it, as GitHub edits a comment, and a switch to its rendered preview: the
+* text is stored exactly as typed.
+*/
+const MarkdownEditor = ({ value, onChange, label, invalid, placeholder }) => {
+	const [mode, setMode] = useState("write");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "self-start",
+			children: /* @__PURE__ */ jsx(Segmented, {
+				value: mode,
+				options: modes,
+				onChange: setMode,
+				label
+			})
+		}), mode === "write" ? /* @__PURE__ */ jsx(Textarea, {
+			rows: 5,
+			invalid,
+			placeholder,
+			value,
+			onChange: (event) => onChange(event.target.value)
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "min-h-[7.5rem] rounded-md border border-border px-2.5 py-1.5",
+			children: value.trim() === "" ? /* @__PURE__ */ jsx("span", {
+				className: "text-faint-foreground",
+				children: "Nothing to preview"
+			}) : /* @__PURE__ */ jsx(Markdown, { source: value })
+		})]
+	});
+};
+//#endregion
+export { MarkdownEditor };

package/dist/markdown/markdown-excerpt.js

@@ -0,0 +1,36 @@
+//#region src/markdown/markdown-excerpt.ts
+const blockMarks = [
+	[/^\s*(```|~~~).*$/, ""],
+	[/^\s*\[[^\]]+\]:\s+\S.*$/, ""],
+	[/^\s*([-*_]\s*){3,}$/, ""],
+	[/^\s*\|?(\s*:?-+:?\s*\|)+\s*:?-*:?\s*$/, ""],
+	[/^\s*#{1,6}\s+/, ""],
+	[/^\s*(>\s?)+/, ""],
+	[/^\s*([-*+]|\d+[.)])\s+(\[[ xX]\]\s+)?/, ""]
+];
+const inlineMarks = [
+	[/!\[([^\]]*)\]\([^)]*\)/g, "$1"],
+	[/\[([^\]]*)\]\([^)]*\)/g, "$1"],
+	[/\[([^\]]+)\]\[[^\]]*\]/g, "$1"],
+	[/<((?:https?|mailto):[^>\s]+)>/gi, "$1"],
+	[/<\/?[a-z][^>]*>/gi, ""],
+	[/`([^`]+)`/g, "$1"],
+	[/(?<!\\)(\*\*|__)(?=\S)(.+?)(?<=\S)\1/g, "$2"],
+	[/(?<![\\\w*])\*(?=\S)(.+?)(?<=\S)\*/g, "$1"],
+	[/(?<![\\\w])_(?=\S)(.+?)(?<=\S)_(?!\w)/g, "$1"],
+	[/(?<!\\)~~(.+?)~~/g, "$1"],
+	[/\s*\|\s*/g, " "],
+	[/\\([\\`*_{}[\]()#+\-.!>~|])/g, "$1"]
+];
+const longest = 200;
+/**
+* Markdown as one line of plain text, as a list's cell shows it: the text of its headings, lists, links and emphasis
+* without their marks, at most 200 characters.
+*/
+const markdownExcerpt = (source) => {
+	const lines = source.split(/\r?\n/).map((line) => blockMarks.reduce((text, [mark, kept]) => text.replace(mark, kept), line));
+	const text = inlineMarks.reduce((joined, [mark, kept]) => joined.replace(mark, kept), lines.join("\n")).replace(/\s+/g, " ").trim();
+	return text.length > longest ? `${text.slice(0, 199).trimEnd()}…` : text;
+};
+//#endregion
+export { markdownExcerpt };

package/dist/markdown/markdown-hint.js

@@ -0,0 +1,5 @@
+//#region src/markdown/markdown-hint.ts
+/** Whether the view shows a field as markdown (`.markdown()`), which only a text field takes. */
+const isMarkdown = (field, hints) => field.type === "text" && Boolean(hints?.markdown);
+//#endregion
+export { isMarkdown };

package/dist/markdown/markdown-html.js

@@ -0,0 +1,59 @@
+import { Marked } from "marked";
+//#region src/markdown/markdown-html.ts
+const escapes = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+const escapeHtml = (text) => text.replace(/[&<>"']/g, (char) => escapes[char]);
+const scheme = /^([a-z][a-z0-9+.-]*):/i;
+const linkSchemes = /* @__PURE__ */ new Set([
+	"http",
+	"https",
+	"mailto",
+	"tel"
+]);
+const imageSchemes = /* @__PURE__ */ new Set(["http", "https"]);
+const ignoredByBrowsers = /[\u0000-\u0020\u007f]/g;
+const safeAddress = (href, schemes) => {
+	const named = scheme.exec(href.replace(ignoredByBrowsers, ""))?.[1]?.toLowerCase();
+	if (named !== void 0 && !schemes.has(named)) return null;
+	try {
+		return encodeURI(href).replace(/%25/g, "%");
+	} catch (error) {
+		if (error instanceof URIError) return null;
+		throw error;
+	}
+};
+const titled = (title) => title ? ` title="${escapeHtml(title)}"` : "";
+const parser = ({ inLink = false }) => new Marked({
+	gfm: true,
+	breaks: true,
+	renderer: {
+		html: ({ text, block }) => block ? `<p>${escapeHtml(text)}</p>` : escapeHtml(text),
+		link({ href, title, tokens }) {
+			const text = this.parser.parseInline(tokens);
+			const address = inLink ? null : safeAddress(href, linkSchemes);
+			if (address === null) return text;
+			return `<a href="${escapeHtml(address)}"${titled(title)} target="_blank" rel="noopener noreferrer nofollow">${text}</a>`;
+		},
+		image({ href, title, text }) {
+			const address = inLink ? null : safeAddress(href, imageSchemes);
+			if (address === null) return escapeHtml(text);
+			return `<img src="${escapeHtml(address)}" alt="${escapeHtml(text)}"${titled(title)} loading="lazy">`;
+		}
+	}
+});
+const parsers = {
+	inLink: parser({ inLink: true }),
+	page: parser({})
+};
+/**
+* Markdown as HTML (GitHub's flavour, line breaks kept): raw HTML escaped, links and images only to http(s), mailto and
+* tel addresses or relative ones, and links opening in a new tab. The page sanitises the result again before showing it.
+*/
+const markdownHtml = (source, options = {}) => (options.inLink ? parsers.inLink : parsers.page).parse(source, { async: false });
+//#endregion
+export { markdownHtml };

package/dist/markdown/markdown.js

@@ -0,0 +1,15 @@
+import { cn } from "../lib/cn.js";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/markdown/markdown.tsx
+const MarkdownContent = lazy(() => import("./markdown-content.js").then((module) => ({ default: module.MarkdownContent })));
+/** Markdown rendered and sanitised; its source, line breaks kept, until the renderer has loaded. */
+const Markdown = (props) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx("div", {
+		className: cn("whitespace-pre-line break-words", props.className),
+		children: props.source
+	}),
+	children: /* @__PURE__ */ jsx(MarkdownContent, { ...props })
+});
+//#endregion
+export { Markdown };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.8";
+var version = "0.19.9";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };