[Feature] RTL FreeText Font Defaults - 11.8 (#11826)

(r11.8 → 11.8)

Author: apryse-webviewer-ui

.storybook/static/assets/fonts/webfonts/NotoSansArabic.ttf

@@ -18,12 +18,24 @@ import dayjs from 'dayjs';
 import languageRules from 'constants/languageRules';
 import fireEvent from 'helpers/fireEvent';
 import Events from 'constants/events';
+import getAvailableLanguages from './getAvailableLanguages';
+import textToolNames from 'constants/textToolNames';
+import localStorageManager from 'helpers/localStorageManager';
+import { getInstanceID } from 'helpers/getRootNode';
+import setToolStyles from 'helpers/setToolStyles';
 
 let pendingLanguageTimeout;
 export default (store) => async (language) => {
   if (pendingLanguageTimeout) {
     clearTimeout(pendingLanguageTimeout);
   }
+
+  const availableLanguages = getAvailableLanguages();
+  if (!availableLanguages.includes(language)) {
+    console.warn(`Language with ISO code "${language}" is not supported.`);
+    return;
+  }
+
   await new Promise((resolve) => {
     pendingLanguageTimeout = setTimeout(async () => {
       let languageObj = null;
@@ -49,6 +61,9 @@ export default (store) => async (language) => {
         const pendingLanguagePromise = i18next.changeLanguage(language);
         setDatePickerLocale(pendingLanguagePromise, language);
         await pendingLanguagePromise;
+
+        updateTextToolDefaults();
+
         fireEvent(Events['LANGUAGE_CHANGED'], languageEventObject);
       }
       resolve();
@@ -73,3 +88,38 @@ const setDatePickerLocale = (i18nextPromise, language) => {
       });
   });
 };
+
+const applyTextToolDirectionalDefaults = (toolName, directionSpecificStyles) => {
+  const isRTL = i18next?.dir() === 'rtl';
+  const rtlDefaults = directionSpecificStyles || {};
+
+  const font = isRTL ? rtlDefaults.Font || 'Noto Sans Arabic' : 'Helvetica';
+  const textAlign = isRTL ? rtlDefaults.TextAlign || 'right' : 'left';
+
+  setToolStyles(toolName, 'Font', font);
+  setToolStyles(toolName, 'TextAlign', textAlign);
+};
+
+const updateTextToolDefaults = () => {
+  const { ToolNames } = window.Core.Tools;
+
+  for (const toolKey of textToolNames) {
+    const toolName = ToolNames[toolKey];
+    let directionSpecificStyles = null;
+
+    if (localStorageManager.isLocalStorageEnabled()) {
+      const instanceId = getInstanceID();
+      directionSpecificStyles = JSON.parse(localStorageManager.getItemSynchronous(`${instanceId}-toolData-${toolName}-${i18next.dir()}`));
+    }
+    if (directionSpecificStyles && (directionSpecificStyles.Font || directionSpecificStyles.TextAlign)) {
+      if (directionSpecificStyles.Font) {
+        setToolStyles(toolName, 'Font', directionSpecificStyles.Font);
+      }
+      if (directionSpecificStyles.TextAlign) {
+        setToolStyles(toolName, 'TextAlign', directionSpecificStyles.TextAlign);
+      }
+    } else {
+      applyTextToolDirectionalDefaults(toolName);
+    }
+  }
+};

assets/fonts/webfonts/NotoSansArabic.ttf

@@ -0,0 +1,14 @@
+export default [
+  'FREETEXT',
+  'FREETEXT2',
+  'FREETEXT3',
+  'FREETEXT4',
+  'CALLOUT',
+  'CALLOUT2',
+  'CALLOUT3',
+  'CALLOUT4',
+  'REDACTION',
+  'REDACTION2',
+  'REDACTION3',
+  'REDACTION4',
+];

src/apis/setLanguage.js

@@ -8,6 +8,7 @@ export default [
   'Cousine',
   'Liberation Serif',
   'Open Sans',
+  'Noto Sans Arabic',
   'Roboto',
   'Roboto Mono',
   'Tinos',

src/constants/textToolNames.js

@@ -2,6 +2,7 @@ import core from 'core';
 import actions from 'actions';
 import localStorageManager from 'helpers/localStorageManager';
 import { getInstanceID } from 'helpers/getRootNode';
+import i18next from 'i18next';
 
 export default (dispatch) => (tool) => {
   const toolName = tool.name;
@@ -26,6 +27,18 @@ const storeStyle = (toolName, toolStyles) => {
   try {
     const instanceId = getInstanceID();
     localStorageManager.setItemSynchronous(`${instanceId}-toolData-${toolName}`, JSON.stringify(toolStyles));
+    if (toolStyles.Font || toolStyles.TextAlign) {
+      const currentDir = i18next.dir();
+      const key = `${instanceId}-toolData-${toolName}-${currentDir}`;
+      const prevStyles = localStorageManager.getItemSynchronous(key);
+      const newStyles = {
+        Font: toolStyles.Font,
+        TextAlign: toolStyles.TextAlign
+      };
+      if (!prevStyles || prevStyles.Font !== newStyles.Font || prevStyles.TextAlign !== newStyles.TextAlign) {
+        localStorageManager.setItemSynchronous(key, JSON.stringify(newStyles));
+      }
+    }
   } catch (err) {
     console.warn(`localStorage could not be accessed. ${err.message}`);
   }

src/constants/webFonts.js

@@ -2,6 +2,7 @@ const WEBVIEWER_STORAGE_PATTERN = [
   'wc--toolData',
   'wc-viewer',
   'webviewer',
+  'default-toolData',
 ];
 
 class LocalStorageManager {