@widgetic/editor 4.0.11 → 4.1.2

package/dist/components/editors/CompositionEditorApp.svelte

@@ -24,7 +24,12 @@
 	 * The component is made for ONE composition: to edit another one, make another component.
 	 */
 	import { createEventDispatcher, onDestroy, onMount, tick } from 'svelte';
+	import { get, writable } from 'svelte/store';
 	import { createWidgeticMediaLibrary, type MediaLibraryProvider } from '@widgetic/file-browser';
+	import type { MessageOverrides } from '@widgetic/design-system/i18n';
+	import { shareTextDirection, type TextDirection } from '@widgetic/design-system/components/textDirection';
+	import { leftOnThisScreen } from '../../utils/dockPlacement';
+	import { provideEditorLanguage } from '../../i18n/language.js';
 	import PropsEditor from './PropsEditor.svelte';
 	import WidgetPreview from '../WidgetPreview.svelte';
 	import { setGoogleFontsApiKey } from '../../config';
@@ -75,6 +80,43 @@
 	export let autosaveDelayMs: number | undefined = undefined;
 	/** Writes what the layout does to the console. */
 	export let debug = false;
+	/**
+	 * The language of the editor: a BCP 47 tag ("de", "pt-BR") that sets how plurals, numbers and dates are written.
+	 * Without it, English. The words themselves come from `messages`.
+	 */
+	export let locale: string | null | undefined = undefined;
+	/**
+	 * The words of the editor in the language of the page: any of the keys of `EDITOR_MESSAGES` (and of the File
+	 * Browser's and the rich text editor's catalogs, which are inside the editor). One flat object; a key left out keeps
+	 * its English text. See `checkEditorMessages` to test it.
+	 */
+	export let messages: MessageOverrides | null | undefined = undefined;
+	/**
+	 * Which way the editor is read: "ltr" or "rtl". The page that puts it on screen sets `dir` on an element around it and the
+	 * browser turns the layout around; this prop says the same to the parts that wrap a library which writes a `dir` of its own
+	 * (the menus, the scroll areas, the File Browser and the rich text editor inside it), and to the code that places the settings
+	 * editor and the preview: with "rtl" the settings editor is on the right of the middle and the preview on its left.
+	 * It is NOT worked out from `locale`: an editor on a page that is laid out left to right can speak Arabic and still be left
+	 * to right. Left out, the editor is read the way the screen around it is, and left to right when nothing around it says.
+	 * Can change while the editor is open.
+	 */
+	export let dir: TextDirection | undefined = undefined;
+
+	// --- the direction ----------------------------------------------------------------------------------
+
+	// Every part below reads the direction from Svelte's context (the File Browser and the rich text editor too), and follows
+	// when the page changes `dir`. `textDirection` is the answer, for the editor's own decisions.
+	const givenDirection = writable<TextDirection | undefined>(dir);
+	const textDirection = shareTextDirection(givenDirection);
+	$: givenDirection.set(dir);
+
+	// --- the language -----------------------------------------------------------------------------------
+
+	// Every part of the editor reads its words from here (and the File Browser and the rich text editor inside it from
+	// what this hands them). Setting `locale` or `messages` again changes what is on the screen.
+	const language = provideEditorLanguage({ locale, messages });
+	const { t } = language;
+	$: language.update({ locale, messages });
 
 	// --- the controller -------------------------------------------------------------------------------
 
@@ -88,6 +130,8 @@
 		compositionId,
 		api,
 		autosaveDelayMs,
+		// The sentences the controller makes (why there is no preview) are made in the language of the moment.
+		translate: (key, values) => get(language.t)(key, values),
 		// The preview page hears about every change as it happens (and everything, once its page has loaded).
 		onPreviewMessage: (message: PreviewMessage) =>
 			previewRef?.sendMessageToPreview?.({ ...message })
@@ -193,7 +237,7 @@
 	$: isMobilePreview = state.deviceView === 'mobile';
 	// "Loading editor…" sits in the middle while the composition loads, and where the editor is about to appear after.
 	$: loadingCardPosition =
-		state.phase === 'ready' ? 'left-4 top-4' : 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
+		state.phase === 'ready' ? 'start-4 top-4' : 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
 	// A preview address that has just arrived is a page still to load: the preview says so until its frame has loaded.
 	$: startHydrating(previewSrc);
 
@@ -264,7 +308,8 @@
 
 	$: if (googleFontsApiKey) setGoogleFontsApiKey(googleFontsApiKey);
 
-	// --- the layout: settings editor left of the middle, preview right of it ------------------------
+	// --- the layout: settings editor beside the middle, preview on the other side of it -------------
+	// (the editor on the left and the preview on the right of a left to right screen; the other way round on a right to left one)
 
 	const EDITOR_WIDTH_PX = 450;
 	const EDITOR_PADDING = 20;
@@ -278,7 +323,8 @@
 	$: editorVisible =
 		state.phase === 'ready' && !state.schemasLoading && !state.schemasError && schemasAvailable;
 	// Placed once the editor is on the screen, not on every change: it must not jump back while it is being dragged.
-	$: if (editorVisible) requestDock();
+	// It is placed again when the screen turns around, because the pair is the mirror of itself.
+	$: if (editorVisible && $textDirection) requestDock();
 
 	function log(message: string, details?: unknown) {
 		if (!debug) return;
@@ -294,7 +340,7 @@
 		void tick().then(() => requestAnimationFrame(() => dockFloatingEditorOnce()));
 	}
 
-	/** Editor left of the middle, preview right of it, each EDITOR_PADDING from the middle. */
+	/** Editor on one side of the middle, preview on the other, each EDITOR_PADDING from the middle: the editor starts the line, the preview follows it. */
 	function dockFloatingEditorOnce() {
 		if (!editorShellEl) return;
 		try {
@@ -304,9 +350,9 @@
 
 			const middleX = Math.round(shellWidth / 2);
 			const previewHeight = state.previewHeight + PREVIEW_CHROME_HEIGHT;
-			const leftEditor = Math.max(EDITOR_PADDING, middleX - EDITOR_PADDING - EDITOR_WIDTH_PX);
+			const leftEditor = leftOnThisScreen($textDirection, Math.max(EDITOR_PADDING, middleX - EDITOR_PADDING - EDITOR_WIDTH_PX), EDITOR_WIDTH_PX, shellWidth);
 			const topEditor = EDITOR_PADDING;
-			const leftPreview = middleX + EDITOR_PADDING;
+			const leftPreview = leftOnThisScreen($textDirection, middleX + EDITOR_PADDING, state.previewWidth, shellWidth);
 			const topPreview = Math.max(EDITOR_PADDING, Math.round((shellHeight - previewHeight) / 2));
 
 			void tick().then(() => {
@@ -314,6 +360,7 @@
 				previewRef?.setShellPosition?.(leftPreview, topPreview);
 			});
 			log('Docked the editor and the preview', {
+				direction: $textDirection,
 				height: floatingEditorHeight,
 				middleX,
 				leftEditor,
@@ -362,6 +409,7 @@
 
 <div
 	class="composition-editor-ct relative h-full min-h-0 w-full overflow-hidden {className}"
+	dir={$textDirection}
 	{style}
 	bind:this={editorShellEl}
 >
@@ -410,7 +458,7 @@
 			role="alert"
 			class="composition-editor-error absolute left-1/2 top-1/2 z-30 flex w-max max-w-sm -translate-x-1/2 -translate-y-1/2 flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
 		>
-			<p class="text-sm text-red-600">{failureMessage(state.loadError, 'load')}</p>
+			<p class="text-sm text-red-600">{failureMessage(state.loadError, 'load', $t)}</p>
 			<button
 				type="button"
 				class="retry-load-btn w-fit cursor-pointer rounded-lg bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200 focus:outline-none focus-visible:outline-none"
@@ -418,7 +466,7 @@
 					void controller.load();
 				}}
 			>
-				Try again
+				{$t('editor.app.tryAgain')}
 			</button>
 		</div>
 	{:else if state.phase !== 'ready' || state.schemasLoading}
@@ -426,12 +474,12 @@
 			role="status"
 			class="composition-editor-loading absolute z-30 rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm {loadingCardPosition}"
 		>
-			Loading editor…
+			{$t('editor.app.loading')}
 		</div>
 	{:else if state.schemasError}
 		<div
 			role="alert"
-			class="composition-editor-error absolute left-4 top-4 z-30 flex max-w-sm flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
+			class="composition-editor-error absolute start-4 top-4 z-30 flex max-w-sm flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
 		>
 			<span class="text-xs text-red-600">{state.schemasError}</span>
 			<button
@@ -441,14 +489,20 @@
 					void controller.reloadSchemas();
 				}}
 			>
-				Retry
+				{$t('editor.app.retry')}
 			</button>
 		</div>
 	{:else if schemasAvailable}
+		<!--
+			The panel is placed from the left edge of the editor's area, so it says `position: absolute` itself: the class of the
+			same name loses to the `relative` the panel's own root carries, and a relative box moves from where it sits in the flow,
+			which is the left edge only on a left to right screen (on a right to left one it sits at the right edge, and a `left` of
+			720px puts it 720px beyond that: out of sight).
+		-->
 		<PropsEditor
 			bind:this={propsEditorRef}
 			class="composition-props-editor absolute z-20 shadow-lg"
-			style="left: {EDITOR_PADDING}px; top: {EDITOR_PADDING}px;"
+			style="position: absolute; left: {EDITOR_PADDING}px; top: {EDITOR_PADDING}px; /* rtl-ok: the dock puts the panel in pixels from the left edge as soon as it is on screen (see dockFloatingEditorOnce) */"
 			designSchema={state.designSchema}
 			contentSchema={propsEditorContentSchema}
 			initialDesignValues={state.designValues}
@@ -473,9 +527,9 @@
 	{#if state.phase === 'ready' && state.saveError}
 		<div
 			role="alert"
-			class="composition-editor-save-error absolute bottom-4 left-4 z-30 flex max-w-sm flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
+			class="composition-editor-save-error absolute bottom-4 start-4 z-30 flex max-w-sm flex-col gap-2 rounded-lg border border-red-200 bg-white p-4 shadow-sm"
 		>
-			<p class="text-sm text-red-600">{failureMessage(state.saveError, 'save')}</p>
+			<p class="text-sm text-red-600">{failureMessage(state.saveError, 'save', $t)}</p>
 			<button
 				type="button"
 				class="retry-save-btn w-fit cursor-pointer rounded-lg bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200 focus:outline-none focus-visible:outline-none"
@@ -483,7 +537,7 @@
 					void controller.save('manual');
 				}}
 			>
-				Try again
+				{$t('editor.app.tryAgain')}
 			</button>
 		</div>
 	{/if}

package/dist/components/editors/CompositionEditorApp.svelte.d.ts

@@ -1,4 +1,6 @@
 import { type MediaLibraryProvider } from '@widgetic/file-browser';
+import type { MessageOverrides } from '@widgetic/design-system/i18n';
+import { type TextDirection } from '@widgetic/design-system/components/textDirection';
 import { type TokenReason } from '../../composition/compositionApi.js';
 import { type CompositionEditorState, type EditorFailure } from '../../composition/compositionEditorController.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -33,6 +35,24 @@ declare const CompositionEditorApp: $$__sveltets_2_IsomorphicComponent<{
     /** The key the font pickers list Google Fonts with. Without one only the fonts that need no key are listed. */ googleFontsApiKey?: string;
     /** Wait this long after the last change before saving by itself; `0` turns saving by itself off. Read once, when the editor starts. */ autosaveDelayMs?: number | undefined;
     /** Writes what the layout does to the console. */ debug?: boolean;
+    /**
+         * The language of the editor: a BCP 47 tag ("de", "pt-BR") that sets how plurals, numbers and dates are written.
+         * Without it, English. The words themselves come from `messages`.
+         */ locale?: string | null | undefined;
+    /**
+         * The words of the editor in the language of the page: any of the keys of `EDITOR_MESSAGES` (and of the File
+         * Browser's and the rich text editor's catalogs, which are inside the editor). One flat object; a key left out keeps
+         * its English text. See `checkEditorMessages` to test it.
+         */ messages?: MessageOverrides | null | undefined;
+    /**
+         * Which way the editor is read: "ltr" or "rtl". The page that puts it on screen sets `dir` on an element around it and the
+         * browser turns the layout around; this prop says the same to the parts that wrap a library which writes a `dir` of its own
+         * (the menus, the scroll areas, the File Browser and the rich text editor inside it), and to the code that places the settings
+         * editor and the preview: with "rtl" the settings editor is on the right of the middle and the preview on its left.
+         * It is NOT worked out from `locale`: an editor on a page that is laid out left to right can speak Arabic and still be left
+         * to right. Left out, the editor is read the way the screen around it is, and left to right when nothing around it says.
+         * Can change while the editor is open.
+         */ dir?: TextDirection | undefined;
     save?: () => Promise<boolean>;
     flush?: () => Promise<boolean>;
     isDirty?: () => boolean;

package/dist/components/editors/EmbedEditor.svelte

@@ -13,12 +13,14 @@ import { onMount } from 'svelte';
 import { toast, CopyableHeader } from '@widgetic/design-system/components';
 import OK from '../icons/ok.svelte';
 import PropsEditor from './PropsEditor.svelte';
+import { useEditorLanguage } from '../../i18n/language';
 
 /** Component configuration — existing public props and methods are preserved. */
 let className = '';
 export { className as class };
 export let style = '';
-export let embedHeaderText = 'Embed code';
+/** The title of the code box. Without one, the editor's own word in the language of the page. */
+export let embedHeaderText: string | undefined = undefined;
 export let embedCode = '';
 export let height = 720;
 export let embedSchema: any;
@@ -33,6 +35,9 @@ export let saveDirty = false;
 /** True while a save request is in flight. */
 export let saveSaving = false;
 
+// The words of the editor in the language of the page: the editor above this one chose it (see `provideEditorLanguage`).
+const { t } = useEditorLanguage();
+
 // Loading is currently local initialization; preserve the loading/error presentation.
 let loading = true;
 let wrapperElement = null;
@@ -52,9 +57,11 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
     ...options,
     duration: 5000,
     unstyled: true,
+    // The toast puts itself in place with its own classes below (fixed, at the end of the line), so the corner that the
+    // toaster knows is only a name it needs.
     position: 'bottom-right',
     classes: {
-      toast: 'embed-editor-toast flex items-center gap-3 fixed bottom-5 right-5',
+      toast: 'embed-editor-toast flex items-center gap-3 fixed bottom-5 end-5',
       title: 'embed-editor-toast-title',
       description: 'embed-editor-toast-description',
       closeButton: 'embed-editor-toast-close-button'
@@ -99,7 +106,7 @@ export function getPosition() {
     {showSaveButton}
     {saveDirty}
     {saveSaving}
-    title="Edit Options"
+    title={$t('editor.embed.title')}
     dragHandleClass="text-forest-green"
     headerClass={!loading && embedCode ? 'bg-grey2' : ''}
     showSchemaError={false}
@@ -108,28 +115,32 @@ export function getPosition() {
   >
     {#snippet headerContent()}
       {#if loading}
-        <div class="embed-editor-loading subtext text-grey5 flex items-center justify-center h-full">Loading...</div>
+        <div class="embed-editor-loading subtext text-grey5 flex items-center justify-center h-full">{$t('editor.embed.loading')}</div>
       {:else if !embedCode}
         <div class="embed-editor-error flex flex-col items-center justify-center h-full">
-          <div class="embed-editor-error-title text-error text-lg font-medium">No embed code available</div>
-          <div class="embed-editor-error-code text-grey5 subtext mt-1">Error code: EMBED_CODE_NOT_FOUND</div>
+          <div class="embed-editor-error-title text-error text-lg font-medium">{$t('editor.embed.noCode')}</div>
+          <div class="embed-editor-error-code text-grey5 subtext mt-1">{$t('editor.failure.errorCode', { code: 'EMBED_CODE_NOT_FOUND' })}</div>
         </div>
       {:else}
         <!-- The only additional panel: code display, help link and clipboard control. -->
-        <section class="embed-editor-code-header header-hover-area relative shrink-0 bg-grey2" aria-label="Embed code header area">
+        <section class="embed-editor-code-header header-hover-area relative shrink-0 bg-grey2" aria-label={$t('editor.embed.headerArea')}>
           <CopyableHeader
-            headerText={embedHeaderText}
+            headerText={embedHeaderText ?? $t('editor.embed.codeHeader')}
             content={embedCode}
-            helpText="Read more about embedding"
+            helpText={$t('editor.embed.readMore')}
             helpUrl="/embed"
             showStandaloneCopyButton={true}
-            standaloneCopyButtonText="Copy to clipboard"
+            standaloneCopyButtonText={$t('editor.embed.copy')}
+            copiedTitle={$t('editor.embed.copied')}
+            copiedDescription={$t('editor.embed.copiedDone')}
+            copyFailedTitle={$t('editor.embed.copyFailed')}
+            copyFailedDescription={$t('editor.embed.copyFailedHint')}
             showButtonText={false}
             buttonClass="bg-grey2 text-grey7 hover:bg-white rounded-small focus:outline-none focus-visible:outline-none focus:shadow-none focus-visible:shadow-none"
-            style="border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large);"
+            style="border-start-start-radius: var(--radius-large); border-start-end-radius: var(--radius-large);"
             on:copy={() => {
-              showToast('success', 'Copied to clipboard', {
-                description: 'Paste it anywhere on your site.',
+              showToast('success', $t('editor.embed.copied'), {
+                description: $t('editor.embed.copiedHint'),
                 icon: OK
               });
             }}
@@ -161,16 +172,16 @@ export function getPosition() {
     border-radius: var(--radius-medium) !important;
   }
   :global(.embed-editor-container .accordion-item[data-position="first"]) {
-    border-top-left-radius: var(--radius-medium) !important;
-    border-top-right-radius: var(--radius-medium) !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-start-start-radius: var(--radius-medium) !important;
+    border-start-end-radius: var(--radius-medium) !important;
+    border-end-start-radius: 0 !important;
+    border-end-end-radius: 0 !important;
   }
   :global(.embed-editor-container .accordion-item[data-position="last"]) {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-    border-bottom-left-radius: var(--radius-medium) !important;
-    border-bottom-right-radius: var(--radius-medium) !important;
+    border-start-start-radius: 0 !important;
+    border-start-end-radius: 0 !important;
+    border-end-start-radius: var(--radius-medium) !important;
+    border-end-end-radius: var(--radius-medium) !important;
     margin-bottom: 0 !important;
   }
   :global(.embed-editor-container .accordion-trigger) {
@@ -224,7 +235,7 @@ export function getPosition() {
   :global(.embed-editor-toast) {
     position: fixed !important;
     bottom: 20px !important;
-    right: 20px !important;
+    inset-inline-end: 20px !important;
     top: auto !important;
     display: flex !important;
     align-items: center !important;

package/dist/components/editors/EmbedEditor.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const EmbedEditor: $$__sveltets_2_IsomorphicComponent<{
     /** Component configuration — existing public props and methods are preserved. */ class?: string;
     style?: string;
-    embedHeaderText?: string;
+    /** The title of the code box. Without one, the editor's own word in the language of the page. */ embedHeaderText?: string | undefined;
     embedCode?: string;
     height?: number;
     embedSchema: any;