feat: stylo i18n (#1458)

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

studio/src/app/config/editor.ts

@@ -1,7 +1,5 @@
 import {h1, h2, h3, StyloConfig, ul} from '@deckdeckgo/stylo';
 
-import i18n from '../stores/i18n.store';
-
 import {imgStorage} from '../plugins/img.storage.plugin';
 import {imgUnsplash} from '../plugins/img.unsplash.plugin';
 import {imgGif} from '../plugins/img.gif.plugin';
@@ -15,7 +13,7 @@ export const editorConfig: Partial<StyloConfig> = {
       match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code',
       actions: [
         {
-          text: i18n.state.editor.edit_code,
+          text: 'edit_code',
           icon: `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
             <polygon points='364.13 125.25 87 403 64 448 108.99 425 386.75 147.87 364.13 125.25' style='fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
             <path d='M420.69,68.69,398.07,91.31l22.62,22.63,22.62-22.63a16,16,0,0,0,0-22.62h0A16,16,0,0,0,420.69,68.69Z' style='fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>

studio/src/app/editors/app-doc-editor/app-doc-editor.tsx

@@ -62,8 +62,12 @@ export class AppDocEditor implements ComponentInterface {
   // Hack: we need to clean DOM first on reload as we mix both intrinsect elements and dom elements (content editable)
   private reloadAfterRender: boolean = false;
 
+  private i18nListener: () => void | undefined;
+
   componentWillLoad() {
     this.updateEditorToolbarConfig();
+
+    this.i18nListener = i18n.onChange('lang', () => this.updateEditorToolbarConfig());
   }
 
   async componentDidLoad() {
@@ -84,6 +88,8 @@ export class AppDocEditor implements ComponentInterface {
     this.docImageEvents.destroy();
 
     this.destroy();
+
+    this.i18nListener?.();
   }
 
   /**
@@ -135,7 +141,10 @@ export class AppDocEditor implements ComponentInterface {
   private updateEditorToolbarConfig() {
     this.editorConfig = {
       ...this.editorConfig,
-      lang: i18n.state.lang,
+      i18n: {
+        lang: i18n.state.lang,
+        custom: {...i18n.state.editor}
+      },
       toolbar: {palette: colorStore.state.history.slice(0, 11)}
     };
   }

studio/src/app/plugins/code.plugin.ts

@@ -1,11 +1,9 @@
 import {StyloPlugin, StyloPluginCreateParagraphsParams} from '@deckdeckgo/stylo';
 
-import i18n from '../stores/i18n.store';
-
 import {openCodeModal} from '../utils/editor/plugin.utils';
 
 export const code: StyloPlugin = {
-  text: i18n.state.editor.code,
+  text: 'code',
   icon: 'code',
   createParagraphs: (pluginParams: StyloPluginCreateParagraphsParams) => openCodeModal({pluginParams})
 };

studio/src/app/plugins/hr.plugin.ts

@@ -1,8 +1,7 @@
-import i18n from '../stores/i18n.store';
 import {createEmptyElement, StyloPlugin, StyloPluginCreateParagraphsParams, transformParagraph} from '@deckdeckgo/stylo';
 
 export const hr: StyloPlugin = {
-  text: i18n.state.editor.separator,
+  text: 'separator',
   icon: 'hr',
   createParagraphs: async ({container, paragraph}: StyloPluginCreateParagraphsParams) =>
     transformParagraph({

studio/src/app/plugins/img.gif.plugin.ts

@@ -1,11 +1,9 @@
 import {StyloPlugin, StyloPluginCreateParagraphsParams} from '@deckdeckgo/stylo';
 
-import i18n from '../stores/i18n.store';
-
 import {openPluginModal} from '../utils/editor/plugin.utils';
 
 export const imgGif: StyloPlugin = {
-  text: i18n.state.editor.gifs,
+  text: 'gifs',
   icon: `<svg width="32" height="32" viewBox="0 0 512 512" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;">
         <path d="M464,128C464,101.508 442.492,80 416,80L96,80C69.508,80 48,101.508 48,128L48,384C48,410.492 69.508,432 96,432L416,432C442.492,432 464,410.492 464,384L464,128Z" style="fill:none;stroke:currentColor;stroke-width:32px;"/>
         <g transform="matrix(1,0,0,0.843266,1.54944,39.8473)">

studio/src/app/plugins/img.storage.plugin.ts

@@ -1,14 +1,12 @@
 import {StorageFile} from '@deckdeckgo/editor';
 import {StyloPlugin, StyloPluginCreateParagraphsParams} from '@deckdeckgo/stylo';
 
-import i18n from '../stores/i18n.store';
-
 import {StorageOfflineProvider} from '../providers/storage/storage.offline.provider';
 
 import {createParagraphImage} from '../utils/editor/plugin.utils';
 
 export const imgStorage: StyloPlugin = {
-  text: i18n.state.editor.image,
+  text: 'image',
   icon: 'img',
   files: {
     accept: 'image/x-png,image/jpeg,image/gif,image/svg+xml,image/webp',

studio/src/app/plugins/img.unsplash.plugin.ts

@@ -1,11 +1,9 @@
 import {StyloPlugin, StyloPluginCreateParagraphsParams} from '@deckdeckgo/stylo';
 
-import i18n from '../stores/i18n.store';
-
 import {openPluginModal} from '../utils/editor/plugin.utils';
 
 export const imgUnsplash: StyloPlugin = {
-  text: i18n.state.editor.stock_photo,
+  text: 'stock_photo',
   icon: `<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
       <path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z" fill="currentColor" fill-rule="nonzero" />
     </svg>

studio/src/app/stores/i18n.store.ts

@@ -63,4 +63,4 @@ onChange('lang', (lang: Languages) => {
   });
 });
 
-export default {state};
+export default {state, onChange};