feat: change i18n configuration method (#190)

Changes the localization behavior to apply only for fields explicitly marked as localized (those with "Enable localization for this field" enabled in the Content-Types Builder). The previous logic, which applied localization automatically when i18n was detected (unless ignorei18n was set to true), has been replaced.

BREAKING CHANGE: Localization is no longer applied automatically for all fields when i18n is detected. It now applies only to fields explicitly configured for localization in the Content-Types Builder.

admin/src/components/EditorProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import type { InputProps } from '@strapi/strapi/admin';
 
-import { type Preset, getConfiguredPreset } from '../config';
+import { type Preset, getClonedPreset, setUpLanguage } from '../config';
 import type { WordCountPluginStats } from './CKEReact';
 
 type EditorProviderBaseProps = Pick<
@@ -12,6 +12,7 @@ type EditorProviderBaseProps = Pick<
   presetName: string;
   wordsLimit?: number;
   charsLimit?: number;
+  isFieldLocalized: boolean;
 };
 
 type EditorContextValue = EditorProviderBaseProps & {
@@ -46,21 +47,24 @@ export function EditorProvider({
   wordsLimit,
   charsLimit,
   children,
+  isFieldLocalized,
 }: EditorProviderProps) {
   const [preset, setPreset] = useState<Preset | null>(null);
   const [error, setError] = useState<string | null>(fieldError ?? null);
 
   useEffect(() => {
     (async () => {
-      const currentPreset = await getConfiguredPreset(presetName);
+      const currentPreset = getClonedPreset(presetName);
+
+      await setUpLanguage(currentPreset.editorConfig, isFieldLocalized);
 
       if (placeholder) {
         currentPreset.editorConfig.placeholder = placeholder;
       }
 
       setPreset(currentPreset);
     })();
-  }, [presetName, placeholder]);
+  }, [presetName, placeholder, isFieldLocalized]);
 
   useEffect(() => {
     setError(fieldError ?? null);
@@ -106,6 +110,7 @@ export function EditorProvider({
       wordsLimit,
       charsLimit,
       validateInputLength,
+      isFieldLocalized,
     }),
     [
       name,
@@ -121,6 +126,7 @@ export function EditorProvider({
       preset,
       error,
       validateInputLength,
+      isFieldLocalized,
     ]
   );
 

admin/src/components/Field.tsx

@@ -14,6 +14,11 @@ type CKEditorFieldProps = Readonly<
           maxLengthWords: number;
           maxLengthCharacters: number;
         };
+        pluginOptions?: {
+          i18n?: {
+            localized?: boolean;
+          };
+        };
       };
     }
 >;
@@ -30,6 +35,7 @@ function Field({
   required = false,
 }: CKEditorFieldProps) {
   const { preset, maxLengthWords, maxLengthCharacters } = attribute.options;
+  const isFieldLocalized = attribute?.pluginOptions?.i18n?.localized ?? false;
 
   return (
     <EditorProvider
@@ -44,6 +50,7 @@ function Field({
       presetName={preset}
       wordsLimit={maxLengthWords}
       charsLimit={maxLengthCharacters}
+      isFieldLocalized={isFieldLocalized}
     >
       <Editor />
     </EditorProvider>

admin/src/config/index.ts

@@ -1,4 +1,5 @@
 export * from './types';
+export * from './language';
 export * from './pluginConfig';
 export * from './colors';
 export * from './defaultPreset';

admin/src/config/language.ts

@@ -1,24 +1,23 @@
 import type { EditorConfig } from './types';
 import { getPreferedLanguage } from '../utils/localStorage';
 
-export async function setUpLanguage(config: EditorConfig): Promise<void> {
-  const i18nLang = detecti18n();
-  const preferedLanguage = getPreferedLanguage();
-
-  if (typeof config.language === 'object') {
-    if (Boolean(i18nLang) && !config.language.ignorei18n) {
-      config.language.content = i18nLang;
-    }
-  } else {
+export async function setUpLanguage(
+  config: EditorConfig,
+  isFieldLocalized: boolean
+): Promise<void> {
+  if (typeof config.language !== 'object') {
     config.language = {
       ui: config.language,
-      content: i18nLang,
-      ignorei18n: false,
+      content: config.language,
       textPartLanguage: undefined,
     };
   }
 
-  config.language.ui ||= preferedLanguage;
+  config.language.ui ||= getPreferedLanguage();
+
+  if (isFieldLocalized) {
+    config.language.content = detecti18n();
+  }
 
   if (config.language.ui !== 'en') {
     await importLang(config, config.language.ui);

admin/src/config/presets.ts

@@ -1,12 +1,11 @@
 import { defaultPreset } from './defaultPreset';
-import { setUpLanguage } from './language';
 import type { Field, PluginConfig, Preset } from './types';
 
 export const pluginPresets: Record<string, Preset> = {
   default: defaultPreset,
 };
 
-export async function getConfiguredPreset(presetName: string): Promise<Preset> {
+export function getClonedPreset(presetName: string): Preset {
   const { presets: userPresets, dontMergePresets } = window.SH_CKE_CONFIG || {};
 
   if (dontMergePresets && !userPresets) {
@@ -23,8 +22,6 @@ export async function getConfiguredPreset(presetName: string): Promise<Preset> {
     },
   };
 
-  await setUpLanguage(clonedPreset.editorConfig);
-
   return clonedPreset;
 }
 

admin/src/config/types.ts

@@ -1,7 +1,4 @@
-import type {
-  EditorConfig as CKE5EditorConfig,
-  LanguageConfig as CKE5LanguageConfig,
-} from 'ckeditor5';
+import type { EditorConfig as CKE5EditorConfig } from 'ckeditor5';
 import type { Interpolation } from 'styled-components';
 import type { ExportToGlobal } from './expToGlobal';
 
@@ -46,13 +43,7 @@ export type PartialIsNotAllowedForNewPresets = {
   editorConfig?: Partial<EditorConfig>;
 };
 
-export type EditorConfig = Omit<CKE5EditorConfig, 'language'> & {
-  language?: string | Language;
-};
-
-export type Language = CKE5LanguageConfig & {
-  ignorei18n?: boolean;
-};
+export type EditorConfig = CKE5EditorConfig;
 
 export type Field = {
   metadatas: Metadata;

yarn.lock

@@ -559,7 +559,7 @@
     "@ckeditor/ckeditor5-engine" "43.3.1"
     ckeditor5 "43.3.1"
 
-"@ckeditor/ckeditor5-react@^9.4.0":
+"@ckeditor/ckeditor5-react@^9.3.1":
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-9.4.0.tgz#2d750ed585a4668931be089da7a02e823c706f16"
   integrity sha512-8PU7YUV0ZKYP10akKgarT8nq5QxEDPmuj6Wn5dl/DJ7qroDx6VuC/ysCYcgljseimbDNYDjPQKhatNEcsMd7Ew==