Add support og localization based on i18n-react

packages/threat-composer-app/src/containers/App/index.tsx

@@ -13,23 +13,32 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
+import { useReloadedTranslation } from '@aws/threat-composer';
+import { I18nProvider } from '@cloudscape-design/components/i18n';
+import messages from '@cloudscape-design/components/i18n/messages/all.all';
 import { FC } from 'react';
 import Full from './components/Full';
 import Standalone from './components/Standalone';
 import getComposerMode from '../../utils/getComposerMode';
 
-
 /**
  * Demo app for threat-composer
  */
 const App: FC = () => {
   const composerMode = getComposerMode();
 
   console.log('App-ComposerMode', composerMode);
-
-  return (composerMode === 'ThreatsOnly' || composerMode === 'EditorOnly') ? (
-    <Standalone composeMode={composerMode} />
-  ) : (<Full />);
+  const { i18n } = useReloadedTranslation();
+  console.log('LANG', i18n.language);
+  return (
+    <I18nProvider locale={i18n.language} messages={[messages]}>
+      {composerMode === 'ThreatsOnly' || composerMode === 'EditorOnly' ? (
+        <Standalone composeMode={composerMode} />
+      ) : (
+        <Full />
+      )}
+    </I18nProvider>
+  );
 };
 
 export default App;

packages/threat-composer-app/src/utils/convertToDocx/config.ts

@@ -20,6 +20,7 @@ import {
   AlignmentType,
 } from 'docx';
 
+
 export const ORDERED_LIST_REF = 'ordered';
 export const INDENT = 0.5;
 

packages/threat-composer-app/src/utils/convertToDocx/convertMarkdown/index.ts

@@ -19,24 +19,25 @@ import gfm from 'remark-gfm';
 import markdown from 'remark-parse';
 import { unified } from 'unified';
 import docx from './plugin';
+import { bidirectionalOfText } from './utils';
 import fetchImage from '../fetchImage';
 
-const processor = unified()
-  .use(markdown)
-  .use(gfm)
-  .use(frontmatter)
-  .use(docx,
-    {
-      output: 'sections',
-      imageResolver: fetchImage,
-    },
-  );
-
 /**
  * Convert the markdown into Docx format
  * @param content
  */
-const convertMarkdown = async (content: string) => {
+const convertMarkdown = async (content: string, defaultDir: boolean = false) => {
+  const processor = unified()
+    .use(markdown)
+    .use(gfm)
+    .use(frontmatter)
+    .use(docx,
+      {
+        output: 'sections',
+        imageResolver: fetchImage,
+        bidirectional: bidirectionalOfText(content, defaultDir),
+      },
+    );
   const doc = await processor.process(content);
   const sections = await doc.result;
 

packages/threat-composer-app/src/utils/convertToDocx/convertMarkdown/transformer.ts

@@ -130,6 +130,7 @@ type Context = Readonly<{
   images: ImageDataMap;
   indent: number;
   list?: ListInfo;
+  bidirectional?: boolean;
 }>;
 
 export interface DocxOptions
@@ -153,6 +154,7 @@ export interface DocxOptions
    * **You must set** if your markdown includes images. See example for [browser](https://github.com/inokawa/remark-docx/blob/main/stories/playground.stories.tsx) and [Node.js](https://github.com/inokawa/remark-docx/blob/main/src/index.spec.ts).
    */
   imageResolver?: ImageResolver;
+  bidirectional?: boolean;
 }
 
 export type DocxChild = Paragraph | Table | TableOfContents;
@@ -181,13 +183,15 @@ export const mdastToDocx = async (
     revision,
     styles,
     background,
+    bidirectional,
   }: DocxOptions,
   images: ImageDataMap,
 ): Promise<any> => {
   const { nodes, footnotes } = convertNodes(node.children, {
     deco: {},
     images,
     indent: 0,
+    bidirectional: bidirectional,
   });
   const doc = new Document({
     title,
@@ -258,10 +262,10 @@ const convertNodes = (
       case 'tableCell':
         invariant(false, 'unreachable');
       case 'html':
-        results.push(buildHtml(node));
+        results.push(buildHtml(node, ctx));
         break;
       case 'code':
-        results.push(buildCode(node));
+        results.push(buildCode(node, ctx));
         break;
       case 'yaml':
         // FIXME: unimplemented
@@ -328,7 +332,7 @@ const convertNodes = (
 const buildParagraph = ({ children }: mdast.Paragraph, ctx: Context) => {
   const list = ctx.list;
   const { nodes } = convertNodes(children, ctx);
-
+  console.log('ctx', ctx);
   if (list && list.checked != null) {
     nodes.unshift(
       new CheckBox({
@@ -341,6 +345,7 @@ const buildParagraph = ({ children }: mdast.Paragraph, ctx: Context) => {
   return new Paragraph({
     children: nodes,
     style: 'normalPara',
+    bidirectional: ctx.bidirectional,
     indent:
       ctx.indent > 0
         ? {
@@ -390,6 +395,7 @@ const buildHeading = ({ children, depth }: mdast.Heading, ctx: Context) => {
   const { nodes } = convertNodes(children, ctx);
   return new Paragraph({
     heading,
+    bidirectional: ctx.bidirectional,
     children: nodes,
   });
 };
@@ -447,6 +453,7 @@ const buildTable = ({ children, align }: mdast.Table, ctx: Context) => {
   });
 
   return new Table({
+    visuallyRightToLeft: ctx.bidirectional,
     rows: children.map((r, index) => {
       return index === 0 ? buildTableHeaderRow(r, ctx, cellAligns) : buildTableRow(r, ctx, cellAligns);
     }),
@@ -505,16 +512,18 @@ const buildTableCell = (
   });
 };
 
-const buildHtml = ({ value }: mdast.HTML) => {
+const buildHtml = ({ value }: mdast.HTML, ctx: Context) => {
   // FIXME: transform to text for now
   return new Paragraph({
+    bidirectional: ctx.bidirectional,
     children: [buildText(value, {})],
   });
 };
 
-const buildCode = ({ value, lang: _lang, meta: _meta }: mdast.Code) => {
+const buildCode = ({ value, lang: _lang, meta: _meta }: mdast.Code, ctx: Context) => {
   // FIXME: transform to text for now
   return new Paragraph({
+    bidirectional: ctx.bidirectional,
     children: [buildText(value, {})],
   });
 };
@@ -565,6 +574,7 @@ const buildFootnote = ({ children }: mdast.Footnote, ctx: Context) => {
   // FIXME: transform to paragraph for now
   const { nodes } = convertNodes(children, ctx);
   return new Paragraph({
+    bidirectional: ctx.bidirectional,
     children: nodes,
   });
 };

packages/threat-composer-app/src/utils/convertToDocx/convertMarkdown/utils.ts

@@ -13,6 +13,8 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  ******************************************************************************************************************** */
+import { getTextDirection } from '@aws/threat-composer';
+
 export const unreachable = (_: never): never => {
   throw new Error('unreachable');
 };
@@ -23,3 +25,9 @@ export const unreachable = (_: never): never => {
 export function invariant(cond: any, message: string): asserts cond {
   if (!cond) throw new Error(message);
 }
+
+export function bidirectionalOfText(text: string, defaultDir: boolean): boolean {
+  const dir = getTextDirection(text);
+  console.log('bid', text, dir, defaultDir);
+  return dir === 'rtl' || (dir === 'auto' && defaultDir);
+}

packages/threat-composer-app/src/utils/convertToDocx/getApplicationInfo.ts

@@ -15,22 +15,26 @@
  ******************************************************************************************************************** */
 import { DataExchangeFormat } from '@aws/threat-composer';
 import { HeadingLevel, TextRun, Paragraph } from 'docx';
+import { i18n } from 'i18next';
 import convertMarkdown from './convertMarkdown';
 
 const getApplicationInfo = async (
   data: DataExchangeFormat,
+  defaultDir: boolean = false,
+  t?: i18n['t'],
 ) => {
   const children: any[] = [];
-
   children.push(new Paragraph({
+    bidirectional: defaultDir,
     heading: HeadingLevel.HEADING_1,
     children: [
-      new TextRun('Application Info'),
+      new TextRun(((s) => t ? t(s) : s)('Application Info')),
     ],
   }));
 
   if (data.applicationInfo?.description) {
-    const sections = await convertMarkdown(data.applicationInfo?.description);
+    const description = data.applicationInfo?.description;
+    const sections = await convertMarkdown(description, defaultDir);
     children.push(...sections);
   }
 

packages/threat-composer-app/src/utils/convertToDocx/getApplicationName.ts

@@ -15,14 +15,17 @@
  ******************************************************************************************************************** */
 import { DataExchangeFormat, escapeMarkdown } from '@aws/threat-composer';
 import { Paragraph, HeadingLevel, TextRun } from 'docx';
+import { bidirectionalOfText } from './convertMarkdown/utils';
 
 export const getApplicationName = async (
   data: DataExchangeFormat,
+  defaultDir: boolean = false,
 ) => {
   if (data.applicationInfo?.name) {
     const title = escapeMarkdown(data.applicationInfo?.name);
     return [
       new Paragraph({
+        bidirectional: bidirectionalOfText(title, defaultDir),
         heading: HeadingLevel.TITLE,
         children: [
           new TextRun(title),

packages/threat-composer-app/src/utils/convertToDocx/getArchitecture.ts

@@ -15,43 +15,49 @@
  ******************************************************************************************************************** */
 import { DataExchangeFormat } from '@aws/threat-composer';
 import { Paragraph, HeadingLevel, TextRun } from 'docx';
+import { i18n } from 'i18next';
 import convertMarkdown from './convertMarkdown';
 import getImage from './getImage';
 
 const getArchitecture = async (
   data: DataExchangeFormat,
+  defaultDir: boolean = false,
+  t?: i18n['t'],
 ) => {
   const children: any[] = [];
-
+  const translate = ((s: string): string => t ? t(s) : s);
   children.push(new Paragraph({
+    bidirectional: defaultDir,
     heading: HeadingLevel.HEADING_1,
     children: [
-      new TextRun('Architecture'),
+      new TextRun(translate('Architecture')),
     ],
   }));
 
   if (data.architecture) {
     if (data.architecture.description) {
       children.push(new Paragraph({
+        bidirectional: defaultDir,
         heading: HeadingLevel.HEADING_2,
         children: [
-          new TextRun('Introduction'),
+          new TextRun(translate('Introduction')),
         ],
       }));
 
-      const sections = await convertMarkdown(data.architecture.description);
+      const sections = await convertMarkdown(data.architecture.description, defaultDir);
       children.push(...sections);
     }
 
     if (data.architecture.image) {
       children.push(new Paragraph({
+        bidirectional: defaultDir,
         heading: HeadingLevel.HEADING_2,
         children: [
-          new TextRun('Architecture Diagram'),
+          new TextRun(translate('Architecture Diagram')),
         ],
       }));
 
-      const image = await getImage(data.architecture.image);
+      const image = await getImage(data.architecture.image, defaultDir);
       children.push(image);
     }
   }