@widgetic/design-system 0.5.14 → 0.5.16

package/dist/components/shad-editor/custom/Extentions/ImageExtention.js

@@ -1,7 +1,10 @@
 import { SvelteNodeViewRenderer } from 'svelte-tiptap';
 import ImageExtendedComponent from '../image-extended-component.svelte';
-import Image from '@tiptap/extension-image';
+import Image, {} from '@tiptap/extension-image';
 export const ImageExtension = Image.extend({
+    addOptions() {
+        return { ...this.parent?.(), translate: null, textDirection: null };
+    },
     addAttributes() {
         return {
             src: {

package/dist/components/shad-editor/custom/code-extended.svelte

@@ -33,8 +33,10 @@
 	}
 </script>
 
+<!-- Code is read from left to right in every language, so a code block is a left to right island: its language and its copy button stay in the corners they are drawn in. -->
 <NodeViewWrapper
 	class="code-wrapper group relative rounded bg-muted p-6 dark:bg-muted/20"
+	dir="ltr"
 	draggable
 >
 	<DropdownMenu.Root>
@@ -44,7 +46,7 @@
 				variant: 'ghost',
 				size: 'sm',
 				class:
-					'absolute left-2 top-2 h-4 rounded px-1 py-2 text-xs capitalize text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100'
+					'absolute start-2 top-2 h-4 rounded px-1 py-2 text-xs capitalize text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100'
 			})}
 			>{defaultLanguage}
 			<ChevronDown class="!size-3" />
@@ -67,7 +69,7 @@
 	</DropdownMenu.Root>
 	<Button
 		variant="ghost"
-		class="absolute right-2 top-2 size-4 p-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+		class="absolute end-2 top-2 size-4 p-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
 		onclick={copyCode}
 	>
 		{#if isCopying}

package/dist/components/shad-editor/custom/image-extended-component.svelte

@@ -21,8 +21,24 @@
 	} from 'lucide-svelte';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
 	import { duplicateContent } from './utils.js';
+	import { readable, type Readable } from 'svelte/store';
+	import type { Translate } from '../../../i18n/index.js';
+	import { translateEnglish } from '../i18n/context.js';
+	import { provideTextDirection, type TextDirection } from '../../textDirection.js';
+	import type { ShadEditorMessageKey } from '../i18n/messages.js';
 
-	const { node, editor, selected, deleteNode, updateAttributes }: ImageExtendedComponentProps = $props();
+	const { node, editor, selected, deleteNode, updateAttributes, extension }: ImageExtendedComponentProps = $props();
+
+	// The words of the image bar. A node view is mounted by TipTap outside the editor's component tree, where Svelte's
+	// context does not reach, so the editor hands its words in through the options of the image extension (`translate`).
+	// A store, so a change of language reaches an image that is already in the text. English when the extension is used alone.
+	// svelte-ignore state_referenced_locally
+	const t: Readable<Translate<ShadEditorMessageKey>> = extension.options.translate ?? readable(translateEnglish);
+
+	// The direction of the screen around the editor, for the menu of the image bar (it is drawn below this component, which
+	// TipTap mounted outside the editor's tree, so it reads the context from here). Left to right when the extension is used alone.
+	// svelte-ignore state_referenced_locally
+	provideTextDirection(extension.options.textDirection ?? readable<TextDirection>('ltr'));
 
 	const minWidth = 150;
 
@@ -118,8 +134,10 @@
 	class={cn(
 		'relative flex flex-col rounded-md border-2 border-transparent',
 		selected ? 'border-muted-foreground' : '',
+		// rtl-ok: the alignment of a picture is part of the document, so left stays left and right stays right in every language
 		node.attrs.align === 'left' && 'left-0 -translate-x-0',
 		node.attrs.align === 'center' && 'left-1/2 -translate-x-1/2',
+		// rtl-ok: see the note on the left alignment above
 		node.attrs.align === 'right' && 'left-full -translate-x-full'
 	)}
 	style={`width: ${node.attrs.width}px`}
@@ -149,9 +167,9 @@
 			<div
 				role="button"
 				tabindex="0"
-				aria-label="Back"
+				aria-label={$t('shadEditor.imageBlock.back')}
 				class="absolute inset-y-0 z-20 flex w-[25px] cursor-col-resize items-center justify-start p-2"
-				style="left: 0px"
+				style="left: 0px; /* rtl-ok: the handle sits on the left edge of the picture, a place on the page */"
 				onmousedown={(event: MouseEvent) => {
 					handleResizingPosition(event, 'left');
 				}}
@@ -167,9 +185,9 @@
 			<div
 				role="button"
 				tabindex="0"
-				aria-label="Back"
+				aria-label={$t('shadEditor.imageBlock.back')}
 				class="absolute inset-y-0 z-20 flex w-[25px] cursor-col-resize items-center justify-end p-2"
-				style="right: 0px"
+				style="right: 0px; /* rtl-ok: the handle sits on the right edge of the picture, a place on the page */"
 				onmousedown={(event: MouseEvent) => {
 					handleResizingPosition(event, 'right');
 				}}
@@ -183,32 +201,36 @@
 			</div>
 			<div
 				class={cn(
-					'absolute right-4 top-2 flex items-center gap-1 rounded border bg-background p-1 opacity-0 transition-opacity',
+					'absolute end-4 top-2 flex items-center gap-1 rounded border bg-background p-1 opacity-0 transition-opacity',
 					!resizing && 'group-hover:opacity-100',
 					openedMore && 'opacity-100'
 				)}
 			>
-				<Button
-					variant="ghost"
-					class={cn('size-6 p-0', node.attrs.align === 'left' && 'bg-muted')}
-					onclick={() => updateAttributes({ align: 'left' })}
-				>
-					<AlignLeft class="size-4" />
-				</Button>
-				<Button
-					variant="ghost"
-					class={cn('size-6 p-0', node.attrs.align === 'center' && 'bg-muted')}
-					onclick={() => updateAttributes({ align: 'center' })}
-				>
-					<AlignCenter class="size-4" />
-				</Button>
-				<Button
-					variant="ghost"
-					class={cn('size-6 p-0', node.attrs.align === 'right' && 'bg-muted')}
-					onclick={() => updateAttributes({ align: 'right' })}
-				>
-					<AlignRight class="size-4" />
-				</Button>
+				<!-- Left, centre and right are places on the page, not the start and the end of a line: the three buttons keep
+				     their order on a right to left screen, so the button that draws a block on the left stays on the left. -->
+				<div dir="ltr" class="flex items-center gap-1">
+					<Button
+						variant="ghost"
+						class={cn('size-6 p-0', node.attrs.align === 'left' && 'bg-muted')}
+						onclick={() => updateAttributes({ align: 'left' })}
+					>
+						<AlignLeft class="size-4" />
+					</Button>
+					<Button
+						variant="ghost"
+						class={cn('size-6 p-0', node.attrs.align === 'center' && 'bg-muted')}
+						onclick={() => updateAttributes({ align: 'center' })}
+					>
+						<AlignCenter class="size-4" />
+					</Button>
+					<Button
+						variant="ghost"
+						class={cn('size-6 p-0', node.attrs.align === 'right' && 'bg-muted')}
+						onclick={() => updateAttributes({ align: 'right' })}
+					>
+						<AlignRight class="size-4" />
+					</Button>
+				</div>
 				<DropdownMenu.Root bind:open={openedMore} onOpenChange={(value: boolean) => (openedMore = value)}>
 					<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', class: 'size-6 p-0' })}>
 						<EllipsisVertical class="size-4" />
@@ -218,18 +240,18 @@
 							onclick={() => {
 								if (node.attrs.title === null || node.attrs.title.trim() === '')
 									updateAttributes({
-										title: 'Image Caption'
+										title: $t('shadEditor.imageBlock.defaultCaption')
 									});
 							}}
 						>
-							<Captions class="mr-1 size-4" /> Caption
+							<Captions class="me-1 size-4" /> {$t('shadEditor.imageBlock.caption')}
 						</DropdownMenu.Item>
 						<DropdownMenu.Item
 							onclick={() => {
 								duplicateContent(editor);
 							}}
 						>
-							<CopyIcon class="mr-1 size-4" /> Duplicate
+							<CopyIcon class="me-1 size-4" /> {$t('shadEditor.imageBlock.duplicate')}
 						</DropdownMenu.Item>
 						<DropdownMenu.Item
 							onclick={() => {
@@ -238,7 +260,7 @@
 								});
 							}}
 						>
-							<Fullscreen class="mr-1 size-4" /> Full Screen
+							<Fullscreen class="me-1 size-4" /> {$t('shadEditor.imageBlock.fullScreen')}
 						</DropdownMenu.Item>
 						<DropdownMenu.Item
 							onclick={() => {
@@ -246,7 +268,7 @@
 							}}
 							class="text-destructive"
 						>
-							<Trash class="mr-1 size-4" /> Delete
+							<Trash class="me-1 size-4" /> {$t('shadEditor.imageBlock.delete')}
 						</DropdownMenu.Item>
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>

package/dist/components/shad-editor/editor.css

@@ -38,7 +38,7 @@ ol li {
 
 ul[data-type='taskList'] li label {
 	flex: 0 0 auto;
-	margin-right: 0.5rem;
+	margin-inline-end: 0.5rem;
 	user-select: none;
 }
 
@@ -71,7 +71,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
 
 .color::before {
 	/* Replace rounded with rounded-md */
-	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-md border border-muted align-middle;
+	@apply mb-[0.15rem] me-[0.1rem] inline-block size-[1rem] rounded-md border border-muted align-middle;
 	background-color: var(--color);
 	content: ' ';
 }
@@ -101,17 +101,17 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
 }
 
 .tiptap table th {
-	@apply bg-muted/50 text-left font-bold;
+	@apply bg-muted/50 text-start font-bold;
 }
 
 .tiptap table .selectedCell:after {
-	@apply pointer-events-none absolute bottom-0 left-0 right-0 top-0 border-[2px] border-muted-foreground;
+	@apply pointer-events-none absolute inset-0 border-[2px] border-muted-foreground;
 	content: '';
 	z-index: 2;
 }
 
 .tiptap table .column-resize-handle {
-	@apply pointer-events-none absolute -bottom-[2px] -right-[2px] top-0 w-1 bg-muted;
+	@apply pointer-events-none absolute -bottom-[2px] -end-[2px] top-0 w-1 bg-muted;
 }
 
 .tiptap .tableWrapper {

package/dist/components/shad-editor/i18n/context.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The words of the rich text editor in the page's language: the editor (`shad-editor.svelte`) calls `provideI18n` once,
+ * and every part below it (the toolbar buttons, the menus, the image bar) calls `useI18n` and shows `$t('shadEditor.…')`.
+ * Outside an editor a part speaks English, so a part used alone keeps working.
+ */
+export declare const provideI18n: (initial: import("../../../i18n/createI18n.ts").I18nSettings) => import("../../../i18n/createI18n.ts").I18nHandle<"shadEditor.toolbar.undo" | "shadEditor.toolbar.redo" | "shadEditor.toolbar.bold" | "shadEditor.toolbar.italic" | "shadEditor.toolbar.underline" | "shadEditor.toolbar.strikethrough" | "shadEditor.toolbar.subscript" | "shadEditor.toolbar.superscript" | "shadEditor.toolbar.code" | "shadEditor.toolbar.blockQuote" | "shadEditor.toolbar.bulletList" | "shadEditor.toolbar.orderedList" | "shadEditor.toolbar.taskList" | "shadEditor.text.tooltip" | "shadEditor.text.heading1" | "shadEditor.text.heading2" | "shadEditor.text.heading3" | "shadEditor.text.paragraph" | "shadEditor.text.codeBlock" | "shadEditor.align.tooltip" | "shadEditor.align.left" | "shadEditor.align.center" | "shadEditor.align.right" | "shadEditor.align.justify" | "shadEditor.link.tooltip" | "shadEditor.link.title" | "shadEditor.link.hint" | "shadEditor.link.placeholder" | "shadEditor.link.insert" | "shadEditor.link.remove" | "shadEditor.image.tooltip" | "shadEditor.image.title" | "shadEditor.image.urlHint" | "shadEditor.image.urlPlaceholder" | "shadEditor.image.orPick" | "shadEditor.table.tooltip" | "shadEditor.table.insert" | "shadEditor.table.header" | "shadEditor.table.toggleColumn" | "shadEditor.table.toggleRow" | "shadEditor.table.toggleCell" | "shadEditor.table.cells" | "shadEditor.table.merge" | "shadEditor.table.split" | "shadEditor.table.mergeOrSplit" | "shadEditor.table.row" | "shadEditor.table.insertAbove" | "shadEditor.table.insertBelow" | "shadEditor.table.deleteRow" | "shadEditor.table.column" | "shadEditor.table.insertBefore" | "shadEditor.table.insertAfter" | "shadEditor.table.deleteColumn" | "shadEditor.table.deleteTable" | "shadEditor.textColor.tooltip" | "shadEditor.textColor.pick" | "shadEditor.textColor.remove" | "shadEditor.highlight.tooltip" | "shadEditor.highlight.pick" | "shadEditor.highlight.remove" | "shadEditor.quickColor.tooltip" | "shadEditor.quickColor.textColor" | "shadEditor.quickColor.backgroundColors" | "shadEditor.colorName.default" | "shadEditor.colorName.blue" | "shadEditor.colorName.brown" | "shadEditor.colorName.green" | "shadEditor.colorName.grey" | "shadEditor.colorName.orange" | "shadEditor.colorName.pink" | "shadEditor.colorName.purple" | "shadEditor.colorName.red" | "shadEditor.colorName.yellow" | "shadEditor.colorPicker.label" | "shadEditor.search.tooltip" | "shadEditor.search.searchPlaceholder" | "shadEditor.search.replacePlaceholder" | "shadEditor.search.caseSensitive" | "shadEditor.search.position" | "shadEditor.imageBlock.back" | "shadEditor.imageBlock.caption" | "shadEditor.imageBlock.duplicate" | "shadEditor.imageBlock.fullScreen" | "shadEditor.imageBlock.delete" | "shadEditor.imageBlock.defaultCaption">, useI18n: () => import("../../../i18n/createI18n.ts").I18nContext<"shadEditor.toolbar.undo" | "shadEditor.toolbar.redo" | "shadEditor.toolbar.bold" | "shadEditor.toolbar.italic" | "shadEditor.toolbar.underline" | "shadEditor.toolbar.strikethrough" | "shadEditor.toolbar.subscript" | "shadEditor.toolbar.superscript" | "shadEditor.toolbar.code" | "shadEditor.toolbar.blockQuote" | "shadEditor.toolbar.bulletList" | "shadEditor.toolbar.orderedList" | "shadEditor.toolbar.taskList" | "shadEditor.text.tooltip" | "shadEditor.text.heading1" | "shadEditor.text.heading2" | "shadEditor.text.heading3" | "shadEditor.text.paragraph" | "shadEditor.text.codeBlock" | "shadEditor.align.tooltip" | "shadEditor.align.left" | "shadEditor.align.center" | "shadEditor.align.right" | "shadEditor.align.justify" | "shadEditor.link.tooltip" | "shadEditor.link.title" | "shadEditor.link.hint" | "shadEditor.link.placeholder" | "shadEditor.link.insert" | "shadEditor.link.remove" | "shadEditor.image.tooltip" | "shadEditor.image.title" | "shadEditor.image.urlHint" | "shadEditor.image.urlPlaceholder" | "shadEditor.image.orPick" | "shadEditor.table.tooltip" | "shadEditor.table.insert" | "shadEditor.table.header" | "shadEditor.table.toggleColumn" | "shadEditor.table.toggleRow" | "shadEditor.table.toggleCell" | "shadEditor.table.cells" | "shadEditor.table.merge" | "shadEditor.table.split" | "shadEditor.table.mergeOrSplit" | "shadEditor.table.row" | "shadEditor.table.insertAbove" | "shadEditor.table.insertBelow" | "shadEditor.table.deleteRow" | "shadEditor.table.column" | "shadEditor.table.insertBefore" | "shadEditor.table.insertAfter" | "shadEditor.table.deleteColumn" | "shadEditor.table.deleteTable" | "shadEditor.textColor.tooltip" | "shadEditor.textColor.pick" | "shadEditor.textColor.remove" | "shadEditor.highlight.tooltip" | "shadEditor.highlight.pick" | "shadEditor.highlight.remove" | "shadEditor.quickColor.tooltip" | "shadEditor.quickColor.textColor" | "shadEditor.quickColor.backgroundColors" | "shadEditor.colorName.default" | "shadEditor.colorName.blue" | "shadEditor.colorName.brown" | "shadEditor.colorName.green" | "shadEditor.colorName.grey" | "shadEditor.colorName.orange" | "shadEditor.colorName.pink" | "shadEditor.colorName.purple" | "shadEditor.colorName.red" | "shadEditor.colorName.yellow" | "shadEditor.colorPicker.label" | "shadEditor.search.tooltip" | "shadEditor.search.searchPlaceholder" | "shadEditor.search.replacePlaceholder" | "shadEditor.search.caseSensitive" | "shadEditor.search.position" | "shadEditor.imageBlock.back" | "shadEditor.imageBlock.caption" | "shadEditor.imageBlock.duplicate" | "shadEditor.imageBlock.fullScreen" | "shadEditor.imageBlock.delete" | "shadEditor.imageBlock.defaultCaption">, translateEnglish: import("../../../i18n/createI18n.ts").Translate<"shadEditor.toolbar.undo" | "shadEditor.toolbar.redo" | "shadEditor.toolbar.bold" | "shadEditor.toolbar.italic" | "shadEditor.toolbar.underline" | "shadEditor.toolbar.strikethrough" | "shadEditor.toolbar.subscript" | "shadEditor.toolbar.superscript" | "shadEditor.toolbar.code" | "shadEditor.toolbar.blockQuote" | "shadEditor.toolbar.bulletList" | "shadEditor.toolbar.orderedList" | "shadEditor.toolbar.taskList" | "shadEditor.text.tooltip" | "shadEditor.text.heading1" | "shadEditor.text.heading2" | "shadEditor.text.heading3" | "shadEditor.text.paragraph" | "shadEditor.text.codeBlock" | "shadEditor.align.tooltip" | "shadEditor.align.left" | "shadEditor.align.center" | "shadEditor.align.right" | "shadEditor.align.justify" | "shadEditor.link.tooltip" | "shadEditor.link.title" | "shadEditor.link.hint" | "shadEditor.link.placeholder" | "shadEditor.link.insert" | "shadEditor.link.remove" | "shadEditor.image.tooltip" | "shadEditor.image.title" | "shadEditor.image.urlHint" | "shadEditor.image.urlPlaceholder" | "shadEditor.image.orPick" | "shadEditor.table.tooltip" | "shadEditor.table.insert" | "shadEditor.table.header" | "shadEditor.table.toggleColumn" | "shadEditor.table.toggleRow" | "shadEditor.table.toggleCell" | "shadEditor.table.cells" | "shadEditor.table.merge" | "shadEditor.table.split" | "shadEditor.table.mergeOrSplit" | "shadEditor.table.row" | "shadEditor.table.insertAbove" | "shadEditor.table.insertBelow" | "shadEditor.table.deleteRow" | "shadEditor.table.column" | "shadEditor.table.insertBefore" | "shadEditor.table.insertAfter" | "shadEditor.table.deleteColumn" | "shadEditor.table.deleteTable" | "shadEditor.textColor.tooltip" | "shadEditor.textColor.pick" | "shadEditor.textColor.remove" | "shadEditor.highlight.tooltip" | "shadEditor.highlight.pick" | "shadEditor.highlight.remove" | "shadEditor.quickColor.tooltip" | "shadEditor.quickColor.textColor" | "shadEditor.quickColor.backgroundColors" | "shadEditor.colorName.default" | "shadEditor.colorName.blue" | "shadEditor.colorName.brown" | "shadEditor.colorName.green" | "shadEditor.colorName.grey" | "shadEditor.colorName.orange" | "shadEditor.colorName.pink" | "shadEditor.colorName.purple" | "shadEditor.colorName.red" | "shadEditor.colorName.yellow" | "shadEditor.colorPicker.label" | "shadEditor.search.tooltip" | "shadEditor.search.searchPlaceholder" | "shadEditor.search.replacePlaceholder" | "shadEditor.search.caseSensitive" | "shadEditor.search.position" | "shadEditor.imageBlock.back" | "shadEditor.imageBlock.caption" | "shadEditor.imageBlock.duplicate" | "shadEditor.imageBlock.fullScreen" | "shadEditor.imageBlock.delete" | "shadEditor.imageBlock.defaultCaption">;

package/dist/components/shad-editor/i18n/context.js

@@ -0,0 +1,11 @@
+import { createI18n } from "../../../i18n/index.js";
+import { SHAD_EDITOR_MESSAGES } from "./messages.js";
+/**
+ * The words of the rich text editor in the page's language: the editor (`shad-editor.svelte`) calls `provideI18n` once,
+ * and every part below it (the toolbar buttons, the menus, the image bar) calls `useI18n` and shows `$t('shadEditor.…')`.
+ * Outside an editor a part speaks English, so a part used alone keeps working.
+ */
+export const { provideI18n, useI18n, translateEnglish } = createI18n({
+    catalog: SHAD_EDITOR_MESSAGES,
+    label: 'ShadEditor'
+});

package/dist/components/shad-editor/i18n/index.d.ts

@@ -0,0 +1,8 @@
+import { type MessageOverrides, type MessageProblem } from '../../../i18n/index.ts';
+export { SHAD_EDITOR_MESSAGES, type ShadEditorMessageKey } from './messages.ts';
+/**
+ * Checks a page's `messages` against the editor's catalog without showing anything: a key that does not exist (with the
+ * nearest real one), a value that is not text, a template that does not parse, or one that asks for a value the message is
+ * never given. An empty list means every message will be used. For a test or a build step of the page.
+ */
+export declare function checkShadEditorMessages(messages: MessageOverrides): MessageProblem[];

package/dist/components/shad-editor/i18n/index.js

@@ -0,0 +1,11 @@
+import { findMessageProblems } from "../../../i18n/index.js";
+import { SHAD_EDITOR_MESSAGES } from "./messages.js";
+export { SHAD_EDITOR_MESSAGES } from "./messages.js";
+/**
+ * Checks a page's `messages` against the editor's catalog without showing anything: a key that does not exist (with the
+ * nearest real one), a value that is not text, a template that does not parse, or one that asks for a value the message is
+ * never given. An empty list means every message will be used. For a test or a build step of the page.
+ */
+export function checkShadEditorMessages(messages) {
+    return findMessageProblems(SHAD_EDITOR_MESSAGES, messages);
+}

package/dist/components/shad-editor/i18n/messages.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Every word the rich text editor (`ShadEditor`) shows, in English: the one place to read them, and the keys a page can
+ * replace with the `messages` prop of the editor.
+ *
+ * A message is plain text. `{name}` is a value the editor puts in; `{count, plural, one {# file} other {# files}}` picks
+ * the form that fits a number in the page's language. `\{`, `\}`, `\#` and `\\` write those characters themselves. See
+ * `src/lib/i18n/translator.ts` for the whole format.
+ *
+ * Keys are grouped by where the words appear. A key that is left out of a page's `messages` keeps the English text below,
+ * so a language can be added a screen at a time.
+ *
+ * The keyboard shortcuts in a tooltip ("Bold (⌘B)") are part of the message: a language that writes them differently, or
+ * a page that wants "Ctrl" for its visitors on Windows, changes them there.
+ */
+export declare const SHAD_EDITOR_MESSAGES: {
+    readonly 'shadEditor.toolbar.undo': "Undo (⌘Z)";
+    readonly 'shadEditor.toolbar.redo': "Redo (⌘⇧Z)";
+    readonly 'shadEditor.toolbar.bold': "Bold (⌘B)";
+    readonly 'shadEditor.toolbar.italic': "Italic (⌘I)";
+    readonly 'shadEditor.toolbar.underline': "Underline (⌘U)";
+    readonly 'shadEditor.toolbar.strikethrough': "Strike (⌘⇧S)";
+    readonly 'shadEditor.toolbar.subscript': "Subscript (⌘,)";
+    readonly 'shadEditor.toolbar.superscript': "Superscript (⌘.)";
+    readonly 'shadEditor.toolbar.code': "Code (⌘E)";
+    readonly 'shadEditor.toolbar.blockQuote': "Block Quote (⌘⇧B)";
+    readonly 'shadEditor.toolbar.bulletList': "Bullet List (⌘⇧8)";
+    readonly 'shadEditor.toolbar.orderedList': "Ordered List";
+    readonly 'shadEditor.toolbar.taskList': "Tasks List (⌘⇧9)";
+    readonly 'shadEditor.text.tooltip': "Text Formatting";
+    readonly 'shadEditor.text.heading1': "Heading 1";
+    readonly 'shadEditor.text.heading2': "Heading 2";
+    readonly 'shadEditor.text.heading3': "Heading 3";
+    readonly 'shadEditor.text.paragraph': "Paragraph";
+    readonly 'shadEditor.text.codeBlock': "Code Block";
+    readonly 'shadEditor.align.tooltip': "Text Alignment";
+    readonly 'shadEditor.align.left': "Align Left";
+    readonly 'shadEditor.align.center': "Align Center";
+    readonly 'shadEditor.align.right': "Align Right";
+    readonly 'shadEditor.align.justify': "Align Justify";
+    readonly 'shadEditor.link.tooltip': "Add Or Remove Link";
+    readonly 'shadEditor.link.title': "Link";
+    readonly 'shadEditor.link.hint': "Insert or remove link from selected text.";
+    readonly 'shadEditor.link.placeholder': "Enter link to attach..";
+    readonly 'shadEditor.link.insert': "Insert";
+    readonly 'shadEditor.link.remove': "Remove";
+    readonly 'shadEditor.image.tooltip': "Add Image";
+    readonly 'shadEditor.image.title': "Image";
+    readonly 'shadEditor.image.urlHint': "Insert image url";
+    readonly 'shadEditor.image.urlPlaceholder': "Enter image url...";
+    readonly 'shadEditor.image.orPick': "OR Pick an Image";
+    readonly 'shadEditor.table.tooltip': "Table";
+    readonly 'shadEditor.table.insert': "Insert Table";
+    readonly 'shadEditor.table.header': "Header";
+    readonly 'shadEditor.table.toggleColumn': "Toggle Column";
+    readonly 'shadEditor.table.toggleRow': "Toggle Row";
+    readonly 'shadEditor.table.toggleCell': "Toggle Cell";
+    readonly 'shadEditor.table.cells': "Cells";
+    readonly 'shadEditor.table.merge': "Merge";
+    readonly 'shadEditor.table.split': "Split";
+    readonly 'shadEditor.table.mergeOrSplit': "Merge or Split";
+    readonly 'shadEditor.table.row': "Row";
+    readonly 'shadEditor.table.insertAbove': "Insert Above";
+    readonly 'shadEditor.table.insertBelow': "Insert Below";
+    readonly 'shadEditor.table.deleteRow': "Delete Row";
+    readonly 'shadEditor.table.column': "Column";
+    readonly 'shadEditor.table.insertBefore': "Insert Before";
+    readonly 'shadEditor.table.insertAfter': "Insert After";
+    /** The item of the Column menu that deletes the column the cursor is in. */
+    readonly 'shadEditor.table.deleteColumn': "Delete";
+    /** The item of the table menu that deletes the whole table. */
+    readonly 'shadEditor.table.deleteTable': "Delete";
+    readonly 'shadEditor.textColor.tooltip': "Text Color";
+    readonly 'shadEditor.textColor.pick': "Pick a text color";
+    readonly 'shadEditor.textColor.remove': "Remove Color";
+    readonly 'shadEditor.highlight.tooltip': "Highlighter (⌘⇧H)";
+    readonly 'shadEditor.highlight.pick': "Pick a highlight color";
+    readonly 'shadEditor.highlight.remove': "Remove Highlight";
+    readonly 'shadEditor.quickColor.tooltip': "Quick Colors";
+    readonly 'shadEditor.quickColor.textColor': "Text Color";
+    readonly 'shadEditor.quickColor.backgroundColors': "Background Colors";
+    readonly 'shadEditor.colorName.default': "Default";
+    readonly 'shadEditor.colorName.blue': "Blue";
+    readonly 'shadEditor.colorName.brown': "Brown";
+    readonly 'shadEditor.colorName.green': "Green";
+    readonly 'shadEditor.colorName.grey': "Grey";
+    readonly 'shadEditor.colorName.orange': "Orange";
+    readonly 'shadEditor.colorName.pink': "Pink";
+    readonly 'shadEditor.colorName.purple': "Purple";
+    readonly 'shadEditor.colorName.red': "Red";
+    readonly 'shadEditor.colorName.yellow': "Yellow";
+    /** The name of the colour picker of the colour pop-ups, for a screen reader. */
+    readonly 'shadEditor.colorPicker.label': "Pick a color";
+    readonly 'shadEditor.search.tooltip': "Search And Replace Text";
+    readonly 'shadEditor.search.searchPlaceholder': "Enter Text to search..";
+    readonly 'shadEditor.search.replacePlaceholder': "Enter Text to Replace..";
+    readonly 'shadEditor.search.caseSensitive': "Case Sensitive";
+    /** Which result is shown, and how many there are: "2 / 5". */
+    readonly 'shadEditor.search.position': "{index} / {count}";
+    /** What a screen reader hears for the button that leaves the full screen view of an image. */
+    readonly 'shadEditor.imageBlock.back': "Back";
+    readonly 'shadEditor.imageBlock.caption': "Caption";
+    readonly 'shadEditor.imageBlock.duplicate': "Duplicate";
+    readonly 'shadEditor.imageBlock.fullScreen': "Full Screen";
+    readonly 'shadEditor.imageBlock.delete': "Delete";
+    /** The caption an image gets when the visitor picks Caption: it is written into the text, and the visitor then types over it. */
+    readonly 'shadEditor.imageBlock.defaultCaption': "Image Caption";
+};
+/** The name of one message. */
+export type ShadEditorMessageKey = keyof typeof SHAD_EDITOR_MESSAGES;

package/dist/components/shad-editor/i18n/messages.js

@@ -0,0 +1,116 @@
+/**
+ * Every word the rich text editor (`ShadEditor`) shows, in English: the one place to read them, and the keys a page can
+ * replace with the `messages` prop of the editor.
+ *
+ * A message is plain text. `{name}` is a value the editor puts in; `{count, plural, one {# file} other {# files}}` picks
+ * the form that fits a number in the page's language. `\{`, `\}`, `\#` and `\\` write those characters themselves. See
+ * `src/lib/i18n/translator.ts` for the whole format.
+ *
+ * Keys are grouped by where the words appear. A key that is left out of a page's `messages` keeps the English text below,
+ * so a language can be added a screen at a time.
+ *
+ * The keyboard shortcuts in a tooltip ("Bold (⌘B)") are part of the message: a language that writes them differently, or
+ * a page that wants "Ctrl" for its visitors on Windows, changes them there.
+ */
+export const SHAD_EDITOR_MESSAGES = {
+    // ===== The buttons of the toolbar: the tooltip of each =====
+    'shadEditor.toolbar.undo': 'Undo (⌘Z)',
+    'shadEditor.toolbar.redo': 'Redo (⌘⇧Z)',
+    'shadEditor.toolbar.bold': 'Bold (⌘B)',
+    'shadEditor.toolbar.italic': 'Italic (⌘I)',
+    'shadEditor.toolbar.underline': 'Underline (⌘U)',
+    'shadEditor.toolbar.strikethrough': 'Strike (⌘⇧S)',
+    'shadEditor.toolbar.subscript': 'Subscript (⌘,)',
+    'shadEditor.toolbar.superscript': 'Superscript (⌘.)',
+    'shadEditor.toolbar.code': 'Code (⌘E)',
+    'shadEditor.toolbar.blockQuote': 'Block Quote (⌘⇧B)',
+    'shadEditor.toolbar.bulletList': 'Bullet List (⌘⇧8)',
+    'shadEditor.toolbar.orderedList': 'Ordered List',
+    'shadEditor.toolbar.taskList': 'Tasks List (⌘⇧9)',
+    // ===== The menu of text styles =====
+    'shadEditor.text.tooltip': 'Text Formatting',
+    'shadEditor.text.heading1': 'Heading 1',
+    'shadEditor.text.heading2': 'Heading 2',
+    'shadEditor.text.heading3': 'Heading 3',
+    'shadEditor.text.paragraph': 'Paragraph',
+    'shadEditor.text.codeBlock': 'Code Block',
+    // ===== The menu of alignment =====
+    'shadEditor.align.tooltip': 'Text Alignment',
+    'shadEditor.align.left': 'Align Left',
+    'shadEditor.align.center': 'Align Center',
+    'shadEditor.align.right': 'Align Right',
+    'shadEditor.align.justify': 'Align Justify',
+    // ===== The link pop-up =====
+    'shadEditor.link.tooltip': 'Add Or Remove Link',
+    'shadEditor.link.title': 'Link',
+    'shadEditor.link.hint': 'Insert or remove link from selected text.',
+    'shadEditor.link.placeholder': 'Enter link to attach..',
+    'shadEditor.link.insert': 'Insert',
+    'shadEditor.link.remove': 'Remove',
+    // ===== The image pop-up =====
+    'shadEditor.image.tooltip': 'Add Image',
+    'shadEditor.image.title': 'Image',
+    'shadEditor.image.urlHint': 'Insert image url',
+    'shadEditor.image.urlPlaceholder': 'Enter image url...',
+    'shadEditor.image.orPick': 'OR Pick an Image',
+    // ===== The table menu =====
+    'shadEditor.table.tooltip': 'Table',
+    'shadEditor.table.insert': 'Insert Table',
+    'shadEditor.table.header': 'Header',
+    'shadEditor.table.toggleColumn': 'Toggle Column',
+    'shadEditor.table.toggleRow': 'Toggle Row',
+    'shadEditor.table.toggleCell': 'Toggle Cell',
+    'shadEditor.table.cells': 'Cells',
+    'shadEditor.table.merge': 'Merge',
+    'shadEditor.table.split': 'Split',
+    'shadEditor.table.mergeOrSplit': 'Merge or Split',
+    'shadEditor.table.row': 'Row',
+    'shadEditor.table.insertAbove': 'Insert Above',
+    'shadEditor.table.insertBelow': 'Insert Below',
+    'shadEditor.table.deleteRow': 'Delete Row',
+    'shadEditor.table.column': 'Column',
+    'shadEditor.table.insertBefore': 'Insert Before',
+    'shadEditor.table.insertAfter': 'Insert After',
+    /** The item of the Column menu that deletes the column the cursor is in. */
+    'shadEditor.table.deleteColumn': 'Delete',
+    /** The item of the table menu that deletes the whole table. */
+    'shadEditor.table.deleteTable': 'Delete',
+    // ===== Colours of the text and of the background =====
+    'shadEditor.textColor.tooltip': 'Text Color',
+    'shadEditor.textColor.pick': 'Pick a text color',
+    'shadEditor.textColor.remove': 'Remove Color',
+    'shadEditor.highlight.tooltip': 'Highlighter (⌘⇧H)',
+    'shadEditor.highlight.pick': 'Pick a highlight color',
+    'shadEditor.highlight.remove': 'Remove Highlight',
+    'shadEditor.quickColor.tooltip': 'Quick Colors',
+    'shadEditor.quickColor.textColor': 'Text Color',
+    'shadEditor.quickColor.backgroundColors': 'Background Colors',
+    'shadEditor.colorName.default': 'Default',
+    'shadEditor.colorName.blue': 'Blue',
+    'shadEditor.colorName.brown': 'Brown',
+    'shadEditor.colorName.green': 'Green',
+    'shadEditor.colorName.grey': 'Grey',
+    'shadEditor.colorName.orange': 'Orange',
+    'shadEditor.colorName.pink': 'Pink',
+    'shadEditor.colorName.purple': 'Purple',
+    'shadEditor.colorName.red': 'Red',
+    'shadEditor.colorName.yellow': 'Yellow',
+    /** The name of the colour picker of the colour pop-ups, for a screen reader. */
+    'shadEditor.colorPicker.label': 'Pick a color',
+    // ===== Search and replace =====
+    'shadEditor.search.tooltip': 'Search And Replace Text',
+    'shadEditor.search.searchPlaceholder': 'Enter Text to search..',
+    'shadEditor.search.replacePlaceholder': 'Enter Text to Replace..',
+    'shadEditor.search.caseSensitive': 'Case Sensitive',
+    /** Which result is shown, and how many there are: "2 / 5". */
+    'shadEditor.search.position': '{index} / {count}',
+    // ===== An image in the text: the bar over it =====
+    /** What a screen reader hears for the button that leaves the full screen view of an image. */
+    'shadEditor.imageBlock.back': 'Back',
+    'shadEditor.imageBlock.caption': 'Caption',
+    'shadEditor.imageBlock.duplicate': 'Duplicate',
+    'shadEditor.imageBlock.fullScreen': 'Full Screen',
+    'shadEditor.imageBlock.delete': 'Delete',
+    /** The caption an image gets when the visitor picks Caption: it is written into the text, and the visitor then types over it. */
+    'shadEditor.imageBlock.defaultCaption': 'Image Caption'
+};

package/dist/components/shad-editor/icons/block-quote.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: BlockQuoteProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Block Quote (⌘⇧B)</p>
+			<p>{$t('shadEditor.toolbar.blockQuote')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/bold.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: BoldProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -25,7 +27,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Bold (⌘B)</p>
+			<p>{$t('shadEditor.toolbar.bold')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/buttle-list.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: ButtleListProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -26,7 +28,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Bullet List (⌘⇧8)</p>
+			<p>{$t('shadEditor.toolbar.bulletList')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>

package/dist/components/shad-editor/icons/code.svelte

@@ -9,8 +9,10 @@
 	import * as Tooltip from '../../ui/tooltip/index.js';
 	import { Button } from '../../ui/button/index.js';
 	import { cn } from '../../../utils.js';
+	import { useI18n } from '../i18n/context.js';
 
 	let { editor }: CodeProps = $props();
+	const { t } = useI18n();
 </script>
 
 <Tooltip.Provider>
@@ -26,7 +28,7 @@
 			</Button>
 		</Tooltip.Trigger>
 		<Tooltip.Content>
-			<p>Code (⌘E)</p>
+			<p>{$t('shadEditor.toolbar.code')}</p>
 		</Tooltip.Content>
 	</Tooltip.Root>
 </Tooltip.Provider>