@widgetic/editor 4.0.10 → 4.1.0

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;