@panneau/editor 0.0.0-stage → 5.0.0-alpha.8

package/README.md

@@ -1,3 +1,130 @@
-# Temporary Holding Version
+# @panneau/editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The rich text field of Panneau, on [TipTap 3](https://tiptap.dev): HTML storage, a toolbar and block styles set from the definition, and extensions from plugins ([decision 0007](../../docs/decisions/0007-rich-text.md)).
+
+```bash
+npm install @panneau/editor@^5.0.0-alpha.0 @tiptap/core @tiptap/pm @tiptap/react react-aria-components react-intl
+```
+
+| Export            | Content                                                                                                                                                                                                                              |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `@panneau/editor` | `RichTextField`, `RichTextFieldEntry`, `editorPlugin`, `createEditorPlugin()`, `createRichTextExtensions()`, `normalizeRichText()`, `getRichTextOptions()`, `builtInButtons`, `DEFAULT_TOOLBAR`, `DEFAULT_HEADINGS`, and their types |
+
+TipTap's core, ProseMirror (`@tiptap/pm`) and its React bindings are peer dependencies: the extensions of a project and the field share one copy of them.
+
+## The field
+
+`RichTextField` (the `richtext` type) edits HTML. Its value is a string, or `null` when the text is empty. Like every field, it is controlled: a value that comes from elsewhere (a reset, another user) replaces its content.
+
+```tsx
+import { editorPlugin } from '@panneau/editor';
+import { FieldsProvider, builtInFields } from '@panneau/fields';
+
+createPanneauApp({ plugins: [editorPlugin], … });
+
+// Or with the pieces:
+<FieldsProvider components={{ ...builtInFields, ...editorPlugin.fields }}>…</FieldsProvider>;
+```
+
+Without the plugin, `DefinitionField` shows a placeholder for `richtext` fields, and keeps their value.
+
+### Settings
+
+The definition sets the field in its `settings` (`RichTextSettings` of `@panneau/protocol`), with no JavaScript:
+
+```jsonc
+{
+    "name": "body",
+    "type": "richtext",
+    "settings": {
+        "toolbar": [
+            "heading",
+            "style",
+            "|",
+            "bold",
+            "italic",
+            "link",
+            "bulletList",
+            "orderedList",
+            "|",
+            "logo",
+        ],
+        "headings": [2, 3],
+        "styles": [{ "label": "Big paragraph", "class": "big", "element": "p" }],
+        "links": { "newTab": "external" },
+    },
+}
+```
+
+- **`toolbar`** lists the buttons, in order, with `|` between groups: `heading` (paragraph or a heading level), `style`, `bold`, `italic`, `underline`, `strike`, `superscript`, `subscript`, `code`, `link`, `bulletList`, `orderedList`, `blockquote`, `horizontalRule`, `clear`, `undo`, `redo`, and the buttons of plugins. Names it doesn't know are skipped. Defaults to `DEFAULT_TOOLBAR`: text style, style, bold, italic, link and lists.
+- **`headings`** are the levels that `heading` offers. Defaults to 2, 3 and 4.
+- **`styles`** are block styles: a named class on an element, `p` by default, or `h1` to `h6`, `blockquote`, `ul`, `ol`, `li`. The `style` select puts one on the paragraphs and headings of the selection (or the closest quote, list or item), in place of the other styles of that element, and keeps their other classes: "Big paragraph" gives `<p class="big">`.
+- **`links.newTab`**: `choose` (the default) adds "Open in a new tab" to the link dialog, `external` opens every link to another site (`https://…`, `//…`) in a new tab, and `never` opens none. A link in a new tab gets `target="_blank" rel="noopener noreferrer"`, and keeps its other relations (`nofollow`).
+
+`getRichTextOptions(field)` reads these settings, and falls back to the defaults for settings of the wrong type. `RichTextField` takes them as props: `toolbar`, `headings`, `styles` and `newTab`.
+
+### What the field keeps
+
+The toolbar only limits what users add. The field reads everything content may hold, so that HTML written by another editor, CKEditor 4 or 5 in Panneau 4 projects, keeps working:
+
+- **Until the text is edited, the value is not touched**: the field gives nothing back when it loads content.
+- Once it is edited, the field writes HTML that renders the same:
+    - every heading level, whatever `headings` offers;
+    - the attributes of paragraphs, headings, quotes, lists, list items, links and marks (`class`, `style`, `id`, `lang`, `data-*`);
+    - marks with the element they were written with (`<b>` and `<strong>`, `<i>` and `<em>`, as CKEditor 5 writes italics);
+    - list items written without a `<p>` (`<li>Text</li>`), as CKEditor writes them;
+    - elements around text with their attributes: `<span style="…">`, `<abbr title="…">`, anchors.
+- **HTML that the field doesn't edit is kept as it was written**, whitespace included: embedded media (`<figure class="media">` of CKEditor 5, with or without its preview), iframes, images, tables, `<div>`, `<pre>`, social posts with their script. The editor shows such a block by its element and what it points to (`figure.media`, its URL), and never renders its markup: its scripts don't run and its iframes don't load in the admin. It can be moved or removed.
+- What changes, without changing what the HTML renders: entities become characters (`&eacute;` gives `é`), whitespace between blocks goes, attributes of a link come in their order (`href`, `target`, `rel`), and styles are written as a browser writes them (`color: rgb(231, 76, 60);`).
+- **Nothing that would run a script reaches the admin** ([decision 0035](../../docs/decisions/0035-rich-text-kept-html.md)): kept HTML is only written to the value and the clipboard, never to the page, even when the editor unmounts. The elements the editor renders lose their event handlers (`onclick`), `srcdoc`, and URL attributes with a `javascript:`, `vbscript:` or `data:text/html` URL, when content loads and again when they are rendered; links to scripts lose their link. Styles of stored content show in the editor but can't cover the admin: the text contains its painting (`contain: paint`). They stay in the value. Sanitizing HTML for a site's pages is the site's job, or its backend's.
+- **Pasted content is cleaned**: a page or a document brings its text, headings, lists, links and marks, not its styles, classes and wrappers (`<span style="font-size: 11pt">` and `<div>` of Google Docs or a web page). Bold and italic written as styles become marks. Content copied from a rich text field of the same page pastes in full, kept HTML included: the field marks what it copies with a random token, which no other page can write. Without it, the slice data of ProseMirror (`data-pm-slice`) is dropped.
+
+`normalizeRichText(html, extensions)` gives the HTML the field would save for some HTML once edited. Run it on existing content before a migration, with the extensions of the project's plugin, to see what would change.
+
+## Extensions and buttons of a project
+
+A project adds TipTap extensions, for custom nodes such as an inline logo, and the toolbar buttons that insert them, through `createEditorPlugin()`. The `toolbar` setting of each field names the buttons it shows. The extensions are in every rich text field, so that content written with them reads everywhere.
+
+```tsx
+import { Node, mergeAttributes } from '@tiptap/core';
+import { Sparkles } from 'lucide-react';
+
+import { type RichTextButton, createEditorPlugin } from '@panneau/editor';
+
+const Logo = Node.create({
+    name: 'logo',
+    group: 'inline',
+    inline: true,
+    atom: true,
+    parseHTML: () => [{ tag: 'span[data-logo]' }],
+    renderHTML: ({ HTMLAttributes }) => [
+        'span',
+        mergeAttributes(HTMLAttributes, { class: 'logo', 'data-logo': '' }),
+    ],
+});
+
+const logoButton: RichTextButton = {
+    name: 'logo', // in the `toolbar` setting
+    label: 'Logo', // or a message descriptor of the plugin's locales
+    icon: Sparkles,
+    run: (editor) => editor.chain().focus().insertContent({ type: 'logo' }).run(),
+};
+
+createPanneauApp({
+    plugins: [createEditorPlugin({ extensions: [Logo], buttons: [logoButton] })],
+});
+```
+
+- An extension with the name of a built-in one (`link`, `heading`) replaces it, and a button with the name of a built-in one replaces it.
+- A button with `isActive` is a toggle; `isDisabled` greys it out for the selection.
+- A project gives all its extensions to one plugin: a later plugin that provides `richtext` replaces the field.
+- The nodes of extensions are read before the HTML that the field keeps: without the plugin, a logo stays in the content as it was written.
+- A node renders its own attributes: one that keeps attributes from stored content filters them as the field does (no `on*` attributes, no `javascript:` URLs).
+
+## The toolbar and the editor
+
+- The toolbar is a React Aria `Toolbar`: arrow keys move between its controls. Its buttons are labelled and show their label as a tooltip, and its toggles are pressed when the selection has their mark. It doesn't show when the field is read-only.
+- The text is a `textbox` labelled by the field's label, with its heading, lists and links styled from the `--panneau-*` tokens, like `Prose` of `@panneau/ui`.
+- ProseMirror JSON storage, also allowed by decision 0007, is not available yet.
+
+The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md).

package/dist/LinkDialog.d.ts

@@ -0,0 +1,18 @@
+import type { Editor } from '@tiptap/core';
+import type { NewTabLinks } from './settings.js';
+/** Whether a URL points to another site: `https://…` or `//…`, as CKEditor decides it. */
+export declare function isExternalUrl(url: string): boolean;
+/** The `target` and `rel` of a link, keeping the relations that aren't about the new tab. */
+export declare function getLinkTarget(newTab: boolean, rel: string | null): {
+    target: string | null;
+    rel: string | null;
+};
+export interface LinkDialogProps {
+    editor: Editor;
+    newTab: NewTabLinks;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+}
+/** Adds, changes or removes the link of the selection. */
+export declare function LinkDialog({ editor, newTab, isOpen, onOpenChange }: LinkDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=LinkDialog.d.ts.map

package/dist/LinkDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkDialog.d.ts","sourceRoot":"","sources":["../src/LinkDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAQ3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAI9C,0FAA0F;AAC1F,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAElD;AAED,6FAA6F;AAC7F,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;;;EAMhE;AAED,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED,0DAA0D;AAC1D,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,eAAe,+BA8GnF"}

package/dist/LinkDialog.js

@@ -0,0 +1,220 @@
+import RichTextField_module_default from "./RichTextField.module.js";
+import { c } from "react/compiler-runtime";
+import { useId, useState } from "react";
+import { editorMessages } from "@panneau/intl";
+import { Button, Checkbox, Dialog, TextInput, usePanneauIntl } from "@panneau/ui";
+import { isAllowedUri } from "@tiptap/extension-link";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/LinkDialog.tsx
+var NEW_TAB_REL = ["noopener", "noreferrer"];
+/** Whether a URL points to another site: `https://…` or `//…`, as CKEditor decides it. */
+function isExternalUrl(url) {
+	return /^(https?:)?\/\//i.test(url.trim());
+}
+/** The `target` and `rel` of a link, keeping the relations that aren't about the new tab. */
+function getLinkTarget(newTab, rel) {
+	const others = (rel ?? "").split(/\s+/).filter((name) => name !== "" && !NEW_TAB_REL.includes(name));
+	const next = newTab ? [...NEW_TAB_REL, ...others] : others;
+	return {
+		target: newTab ? "_blank" : null,
+		rel: next.length > 0 ? next.join(" ") : null
+	};
+}
+/** Adds, changes or removes the link of the selection. */
+function LinkDialog(t0) {
+	const $ = c(43);
+	const { editor, newTab, isOpen, onOpenChange } = t0;
+	const intl = usePanneauIntl();
+	const formId = useId();
+	let t1;
+	if ($[0] !== editor) {
+		t1 = editor.getAttributes("link");
+		$[0] = editor;
+		$[1] = t1;
+	} else t1 = $[1];
+	const current = t1;
+	const currentHref = typeof current.href === "string" ? current.href : "";
+	const currentRel = typeof current.rel === "string" ? current.rel : null;
+	const [href, setHref] = useState(currentHref);
+	const [openInNewTab, setOpenInNewTab] = useState(current.target === "_blank");
+	const [invalid, setInvalid] = useState(false);
+	const [opened, setOpened] = useState(isOpen);
+	if (opened !== isOpen) {
+		setOpened(isOpen);
+		if (isOpen) {
+			setHref(currentHref);
+			setOpenInNewTab(current.target === "_blank");
+			setInvalid(false);
+		}
+	}
+	let t2;
+	if ($[2] !== currentRel || $[3] !== editor || $[4] !== href || $[5] !== newTab || $[6] !== onOpenChange || $[7] !== openInNewTab) {
+		t2 = () => {
+			const url = href.trim();
+			if (url === "") {
+				editor.chain().focus().extendMarkRange("link").unsetLink().run();
+				onOpenChange(false);
+				return;
+			}
+			if (!isAllowedUri(url)) {
+				setInvalid(true);
+				return;
+			}
+			const attributes = {
+				href: url,
+				...getLinkTarget(newTab === "choose" ? openInNewTab : newTab === "external" && isExternalUrl(url), currentRel)
+			};
+			if (editor.state.selection.empty && !editor.isActive("link")) editor.chain().focus().insertContent({
+				type: "text",
+				text: url,
+				marks: [{
+					type: "link",
+					attrs: attributes
+				}]
+			}).run();
+			else editor.chain().focus().extendMarkRange("link").setLink(attributes).run();
+			onOpenChange(false);
+		};
+		$[2] = currentRel;
+		$[3] = editor;
+		$[4] = href;
+		$[5] = newTab;
+		$[6] = onOpenChange;
+		$[7] = openInNewTab;
+		$[8] = t2;
+	} else t2 = $[8];
+	const apply = t2;
+	let t3;
+	if ($[9] !== intl) {
+		t3 = intl.formatMessage(editorMessages.linkTitle);
+		$[9] = intl;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== currentHref || $[12] !== editor || $[13] !== formId || $[14] !== intl) {
+		t4 = (close) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			currentHref !== "" ? /* @__PURE__ */ jsx(Button, {
+				appearance: "ghost",
+				tone: "danger",
+				className: RichTextField_module_default.removeLink,
+				onPress: () => {
+					editor.chain().focus().extendMarkRange("link").unsetLink().run();
+					close();
+				},
+				children: intl.formatMessage(editorMessages.linkRemove)
+			}) : null,
+			/* @__PURE__ */ jsx(Button, {
+				appearance: "outline",
+				onPress: close,
+				children: intl.formatMessage(editorMessages.linkCancel)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				form: formId,
+				appearance: "solid",
+				tone: "accent",
+				children: intl.formatMessage(editorMessages.linkApply)
+			})
+		] });
+		$[11] = currentHref;
+		$[12] = editor;
+		$[13] = formId;
+		$[14] = intl;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== apply) {
+		t5 = (event) => {
+			event.preventDefault();
+			apply();
+		};
+		$[16] = apply;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== intl) {
+		t6 = intl.formatMessage(editorMessages.linkUrl);
+		$[18] = intl;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (next) => {
+			setHref(next);
+			setInvalid(false);
+		};
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== intl || $[22] !== invalid) {
+		t8 = invalid ? [intl.formatMessage(editorMessages.linkInvalid)] : [];
+		$[21] = intl;
+		$[22] = invalid;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] !== href || $[25] !== t6 || $[26] !== t8) {
+		t9 = /* @__PURE__ */ jsx(TextInput, {
+			label: t6,
+			type: "url",
+			inputMode: "url",
+			autoComplete: "off",
+			autoFocus: true,
+			value: href,
+			onChange: t7,
+			errors: t8
+		});
+		$[24] = href;
+		$[25] = t6;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== intl || $[29] !== newTab || $[30] !== openInNewTab) {
+		t10 = newTab === "choose" ? /* @__PURE__ */ jsx(Checkbox, {
+			isSelected: openInNewTab,
+			onChange: setOpenInNewTab,
+			children: intl.formatMessage(editorMessages.linkNewTab)
+		}) : null;
+		$[28] = intl;
+		$[29] = newTab;
+		$[30] = openInNewTab;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== formId || $[33] !== t10 || $[34] !== t5 || $[35] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("form", {
+			id: formId,
+			className: RichTextField_module_default.linkForm,
+			onSubmit: t5,
+			children: [t9, t10]
+		});
+		$[32] = formId;
+		$[33] = t10;
+		$[34] = t5;
+		$[35] = t9;
+		$[36] = t11;
+	} else t11 = $[36];
+	let t12;
+	if ($[37] !== isOpen || $[38] !== onOpenChange || $[39] !== t11 || $[40] !== t3 || $[41] !== t4) {
+		t12 = /* @__PURE__ */ jsx(Dialog, {
+			title: t3,
+			size: "sm",
+			isOpen,
+			onOpenChange,
+			footer: t4,
+			children: t11
+		});
+		$[37] = isOpen;
+		$[38] = onOpenChange;
+		$[39] = t11;
+		$[40] = t3;
+		$[41] = t4;
+		$[42] = t12;
+	} else t12 = $[42];
+	return t12;
+}
+//#endregion
+export { LinkDialog, getLinkTarget, isExternalUrl };
+
+//# sourceMappingURL=LinkDialog.js.map

package/dist/LinkDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkDialog.js","names":["Editor","isAllowedUri","useId","useState","editorMessages","messages","Button","Checkbox","Dialog","TextInput","usePanneauIntl","styles","NewTabLinks","NEW_TAB_REL","isExternalUrl","url","test","trim","getLinkTarget","newTab","rel","others","split","filter","name","includes","next","target","length","join","LinkDialogProps","editor","isOpen","onOpenChange","LinkDialog","t0","$","_c","intl","formId","t1","getAttributes","current","currentHref","href","currentRel","setHref","openInNewTab","setOpenInNewTab","invalid","setInvalid","opened","setOpened","t2","chain","focus","extendMarkRange","unsetLink","run","inNewTab","attributes","state","selection","empty","isActive","insertContent","type","text","marks","attrs","setLink","apply","t3","formatMessage","linkTitle","t4","close","removeLink","linkRemove","linkCancel","linkApply","t5","event","preventDefault","t6","linkUrl","t7","Symbol","for","t8","linkInvalid","t9","t10","linkNewTab","t11","linkForm","t12","_c","messages","_Fragment","styles"],"sources":["../src/LinkDialog.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core';\nimport { isAllowedUri } from '@tiptap/extension-link';\nimport { useId, useState } from 'react';\n\nimport { editorMessages as messages } from '@panneau/intl';\nimport { Button, Checkbox, Dialog, TextInput, usePanneauIntl } from '@panneau/ui';\n\nimport styles from './RichTextField.module.css';\nimport type { NewTabLinks } from './settings';\n\nconst NEW_TAB_REL = ['noopener', 'noreferrer'];\n\n/** Whether a URL points to another site: `https://…` or `//…`, as CKEditor decides it. */\nexport function isExternalUrl(url: string): boolean {\n    return /^(https?:)?\\/\\//i.test(url.trim());\n}\n\n/** The `target` and `rel` of a link, keeping the relations that aren't about the new tab. */\nexport function getLinkTarget(newTab: boolean, rel: string | null) {\n    const others = (rel ?? '')\n        .split(/\\s+/)\n        .filter((name) => name !== '' && !NEW_TAB_REL.includes(name));\n    const next = newTab ? [...NEW_TAB_REL, ...others] : others;\n    return { target: newTab ? '_blank' : null, rel: next.length > 0 ? next.join(' ') : null };\n}\n\nexport interface LinkDialogProps {\n    editor: Editor;\n    newTab: NewTabLinks;\n    isOpen: boolean;\n    onOpenChange: (isOpen: boolean) => void;\n}\n\n/** Adds, changes or removes the link of the selection. */\nexport function LinkDialog({ editor, newTab, isOpen, onOpenChange }: LinkDialogProps) {\n    const intl = usePanneauIntl();\n    const formId = useId();\n    const current = editor.getAttributes('link');\n    const currentHref = typeof current.href === 'string' ? current.href : '';\n    const currentRel = typeof current.rel === 'string' ? current.rel : null;\n    const [href, setHref] = useState(currentHref);\n    const [openInNewTab, setOpenInNewTab] = useState(current.target === '_blank');\n    const [invalid, setInvalid] = useState(false);\n    const [opened, setOpened] = useState(isOpen);\n    // Starts from the link of the selection each time it opens\n    if (opened !== isOpen) {\n        setOpened(isOpen);\n        if (isOpen) {\n            setHref(currentHref);\n            setOpenInNewTab(current.target === '_blank');\n            setInvalid(false);\n        }\n    }\n\n    const apply = () => {\n        const url = href.trim();\n        if (url === '') {\n            editor.chain().focus().extendMarkRange('link').unsetLink().run();\n            onOpenChange(false);\n            return;\n        }\n        // A `javascript:` URL, which the link would refuse\n        if (!isAllowedUri(url)) {\n            setInvalid(true);\n            return;\n        }\n        const inNewTab =\n            newTab === 'choose' ? openInNewTab : newTab === 'external' && isExternalUrl(url);\n        const attributes = { href: url, ...getLinkTarget(inNewTab, currentRel) };\n        if (editor.state.selection.empty && !editor.isActive('link')) {\n            editor\n                .chain()\n                .focus()\n                .insertContent({\n                    type: 'text',\n                    text: url,\n                    marks: [{ type: 'link', attrs: attributes }],\n                })\n                .run();\n        } else {\n            editor.chain().focus().extendMarkRange('link').setLink(attributes).run();\n        }\n        onOpenChange(false);\n    };\n\n    return (\n        <Dialog\n            title={intl.formatMessage(messages.linkTitle)}\n            size=\"sm\"\n            isOpen={isOpen}\n            onOpenChange={onOpenChange}\n            footer={(close) => (\n                <>\n                    {currentHref !== '' ? (\n                        <Button\n                            appearance=\"ghost\"\n                            tone=\"danger\"\n                            className={styles.removeLink}\n                            onPress={() => {\n                                editor.chain().focus().extendMarkRange('link').unsetLink().run();\n                                close();\n                            }}\n                        >\n                            {intl.formatMessage(messages.linkRemove)}\n                        </Button>\n                    ) : null}\n                    <Button appearance=\"outline\" onPress={close}>\n                        {intl.formatMessage(messages.linkCancel)}\n                    </Button>\n                    <Button type=\"submit\" form={formId} appearance=\"solid\" tone=\"accent\">\n                        {intl.formatMessage(messages.linkApply)}\n                    </Button>\n                </>\n            )}\n        >\n            <form\n                id={formId}\n                className={styles.linkForm}\n                onSubmit={(event) => {\n                    event.preventDefault();\n                    apply();\n                }}\n            >\n                <TextInput\n                    label={intl.formatMessage(messages.linkUrl)}\n                    type=\"url\"\n                    inputMode=\"url\"\n                    autoComplete=\"off\"\n                    autoFocus\n                    value={href}\n                    onChange={(next) => {\n                        setHref(next);\n                        setInvalid(false);\n                    }}\n                    errors={invalid ? [intl.formatMessage(messages.linkInvalid)] : []}\n                />\n                {newTab === 'choose' ? (\n                    <Checkbox isSelected={openInNewTab} onChange={setOpenInNewTab}>\n                        {intl.formatMessage(messages.linkNewTab)}\n                    </Checkbox>\n                ) : null}\n            </form>\n        </Dialog>\n    );\n}\n"],"mappings":"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"}

package/dist/RichTextField.css

@@ -0,0 +1,257 @@
+.panneau-rich-text-field-field {
+    min-width: 0;
+}
+
+/* The box of the field, as the other controls draw it: the toolbar over the text. */
+.panneau-rich-text-field-editor {
+    min-width: 0;
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-input-bg, var(--panneau-color-surface));
+    border: var(--panneau-input-border-width, var(--panneau-border-width)) solid
+        var(--panneau-input-border-color, var(--panneau-color-border-control));
+    border-radius: var(--panneau-input-radius, var(--panneau-radius-md));
+    transition:
+        border-color var(--panneau-duration),
+        box-shadow var(--panneau-duration);
+}
+
+.panneau-rich-text-field-editor:hover {
+    border-color: var(--panneau-input-border-color-hover, var(--panneau-color-text-muted));
+}
+
+.panneau-rich-text-field-editor:has(.panneau-rich-text-field-content:focus) {
+    border-color: var(--panneau-color-focus);
+    box-shadow: 0 0 0 1px var(--panneau-color-focus);
+}
+
+.panneau-rich-text-field-editor[data-invalid] {
+    border-color: var(--panneau-color-danger);
+}
+
+.panneau-rich-text-field-editor[data-invalid]:has(.panneau-rich-text-field-content:focus) {
+    box-shadow: 0 0 0 1px var(--panneau-color-danger);
+}
+
+.panneau-rich-text-field-editor[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.panneau-rich-text-field-editor[data-disabled],
+.panneau-rich-text-field-editor[data-readonly] {
+    background-color: var(--panneau-color-surface-sunken);
+}
+
+.panneau-rich-text-field-toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    padding: var(--panneau-space-1);
+    background-color: inherit;
+    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: inherit;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+}
+
+.panneau-rich-text-field-separator {
+    align-self: stretch;
+    width: var(--panneau-border-width);
+    margin: var(--panneau-space-1) var(--panneau-space-1);
+    background-color: var(--panneau-color-border);
+    border: 0;
+}
+
+.panneau-rich-text-field-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--panneau-control-height-sm);
+    height: var(--panneau-control-height-sm);
+    padding: 0;
+    color: var(--panneau-color-text);
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--panneau-radius-sm);
+    transition: background-color var(--panneau-duration);
+}
+
+.panneau-rich-text-field-button[data-hovered] {
+    background-color: color-mix(in srgb, var(--panneau-color-text) 6%, transparent);
+}
+
+.panneau-rich-text-field-button[data-pressed],
+.panneau-rich-text-field-button[data-selected] {
+    background-color: color-mix(in srgb, var(--panneau-color-text) 12%, transparent);
+}
+
+.panneau-rich-text-field-button[data-selected] {
+    color: var(--panneau-color-accent-text);
+    background-color: var(--panneau-color-accent-subtle);
+}
+
+.panneau-rich-text-field-button[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+.panneau-rich-text-field-button[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.panneau-rich-text-field-select {
+    min-width: 9rem;
+}
+
+/* The text: the elements of rich content, as `Prose` styles them. */
+.panneau-rich-text-field-content {
+    min-height: 8rem;
+    padding: var(--panneau-space-3);
+    font-size: var(--panneau-font-size-control);
+    line-height: var(--panneau-prose-line-height, 1.6);
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    outline: none;
+    /* Nothing of the content paints outside of it: transforms, negative margins */
+    contain: paint;
+}
+
+/*
+ * Styles of stored content show in the editor (a color, an alignment), but never take an element
+ * out of the text to cover the admin: they are kept as they are in the value.
+ */
+.panneau-rich-text-field-content :where([style]) {
+    position: static !important;
+}
+
+.panneau-rich-text-field-content > * + * {
+    margin-top: var(--panneau-prose-gap, var(--panneau-space-3));
+}
+
+.panneau-rich-text-field-content :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--panneau-heading-font-family, var(--panneau-font-family-heading));
+    font-weight: var(--panneau-font-weight-bold);
+    line-height: var(--panneau-line-height-tight);
+}
+
+.panneau-rich-text-field-content :where(h1) {
+    font-size: var(--panneau-heading-1-font-size, 1.75rem);
+}
+
+.panneau-rich-text-field-content :where(h2) {
+    font-size: var(--panneau-heading-2-font-size, 1.375rem);
+}
+
+.panneau-rich-text-field-content :where(h3) {
+    font-size: var(--panneau-heading-3-font-size, 1.125rem);
+}
+
+.panneau-rich-text-field-content :where(h4, h5, h6) {
+    font-size: var(--panneau-heading-4-font-size, var(--panneau-font-size-lg));
+}
+
+.panneau-rich-text-field-content :where(ul, ol) {
+    padding-inline-start: var(--panneau-prose-list-indent, 1.5em);
+}
+
+.panneau-rich-text-field-content :where(ul) {
+    list-style: disc;
+}
+
+.panneau-rich-text-field-content :where(ol) {
+    list-style: decimal;
+}
+
+.panneau-rich-text-field-content :where(li + li, li > ul, li > ol) {
+    margin-top: var(--panneau-space-1);
+}
+
+.panneau-rich-text-field-content :where(a) {
+    color: var(--panneau-prose-link-color, var(--panneau-color-link));
+    text-decoration: underline;
+}
+
+.panneau-rich-text-field-content :where(strong, b) {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-rich-text-field-content :where(em, i) {
+    font-style: italic;
+}
+
+.panneau-rich-text-field-content :where(blockquote) {
+    padding-inline-start: var(--panneau-space-4);
+    color: var(--panneau-color-text-muted);
+    border-inline-start: 3px solid var(--panneau-color-border);
+}
+
+.panneau-rich-text-field-content :where(code) {
+    font-family: var(--panneau-font-family-mono);
+    font-size: 0.875em;
+}
+
+.panneau-rich-text-field-content :where(hr) {
+    border: 0;
+    border-top: var(--panneau-border-width) solid var(--panneau-color-border);
+}
+
+.panneau-rich-text-field-content .ProseMirror-selectednode {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+}
+
+.panneau-rich-text-field-content .is-editor-empty:first-child::before {
+    float: inline-start;
+    height: 0;
+    color: var(--panneau-color-text-muted);
+    pointer-events: none;
+    content: attr(data-placeholder);
+}
+
+/* HTML kept as it was written: its element and what it points to, never its markup. */
+.panneau-rich-text-field-html {
+    display: flex;
+    gap: var(--panneau-space-2);
+    align-items: baseline;
+    min-width: 0;
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+    white-space: nowrap;
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) dashed var(--panneau-color-border);
+    border-radius: var(--panneau-radius-sm);
+}
+
+span.panneau-rich-text-field-html {
+    display: inline-flex;
+    max-width: 100%;
+    padding: 0 var(--panneau-space-1);
+    vertical-align: baseline;
+}
+
+.panneau-rich-text-field-html > code {
+    flex: 0 0 auto;
+    font-family: var(--panneau-font-family-mono);
+    color: var(--panneau-color-text);
+}
+
+.panneau-rich-text-field-html > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.panneau-rich-text-field-link-form {
+    display: grid;
+    gap: var(--panneau-space-3);
+}
+
+.panneau-rich-text-field-remove-link {
+    margin-inline-end: auto;
+}