From 88d77eda1b20db35f823d32368de81cf77a7e34c Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 28 Jan 2022 16:29:54 +0100 Subject: [PATCH] feat: stylo i18n Signed-off-by: peterpeterparker --- studio/src/app/config/editor.ts | 4 +--- .../src/app/editors/app-doc-editor/app-doc-editor.tsx | 11 ++++++++++- studio/src/app/plugins/code.plugin.ts | 4 +--- studio/src/app/plugins/hr.plugin.ts | 3 +-- studio/src/app/plugins/img.gif.plugin.ts | 4 +--- studio/src/app/plugins/img.storage.plugin.ts | 4 +--- studio/src/app/plugins/img.unsplash.plugin.ts | 4 +--- studio/src/app/stores/i18n.store.ts | 2 +- 8 files changed, 17 insertions(+), 19 deletions(-) diff --git a/studio/src/app/config/editor.ts b/studio/src/app/config/editor.ts index 033030d67..4eccd39d2 100644 --- a/studio/src/app/config/editor.ts +++ b/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 = { match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code', actions: [ { - text: i18n.state.editor.edit_code, + text: 'edit_code', icon: ` diff --git a/studio/src/app/editors/app-doc-editor/app-doc-editor.tsx b/studio/src/app/editors/app-doc-editor/app-doc-editor.tsx index eff41b9f0..b8908f4da 100644 --- a/studio/src/app/editors/app-doc-editor/app-doc-editor.tsx +++ b/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)} }; } diff --git a/studio/src/app/plugins/code.plugin.ts b/studio/src/app/plugins/code.plugin.ts index ed30d421d..908f81e0b 100644 --- a/studio/src/app/plugins/code.plugin.ts +++ b/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}) }; diff --git a/studio/src/app/plugins/hr.plugin.ts b/studio/src/app/plugins/hr.plugin.ts index bf677bdb5..f996b615d 100644 --- a/studio/src/app/plugins/hr.plugin.ts +++ b/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({ diff --git a/studio/src/app/plugins/img.gif.plugin.ts b/studio/src/app/plugins/img.gif.plugin.ts index a16486d7c..50c25d417 100644 --- a/studio/src/app/plugins/img.gif.plugin.ts +++ b/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: ` diff --git a/studio/src/app/plugins/img.storage.plugin.ts b/studio/src/app/plugins/img.storage.plugin.ts index dbbd1a1e2..faa932bb0 100644 --- a/studio/src/app/plugins/img.storage.plugin.ts +++ b/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', diff --git a/studio/src/app/plugins/img.unsplash.plugin.ts b/studio/src/app/plugins/img.unsplash.plugin.ts index 40a1af3aa..fa4aadbe5 100644 --- a/studio/src/app/plugins/img.unsplash.plugin.ts +++ b/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: ` diff --git a/studio/src/app/stores/i18n.store.ts b/studio/src/app/stores/i18n.store.ts index 830a156c2..b8e486115 100644 --- a/studio/src/app/stores/i18n.store.ts +++ b/studio/src/app/stores/i18n.store.ts @@ -63,4 +63,4 @@ onChange('lang', (lang: Languages) => { }); }); -export default {state}; +export default {state, onChange};