Merge pull request #1574 from RodriSanchez1/fix/textExportPDF

Fix / Support languages that uses characters different than Latin alphabet

Author: RodriSanchez1

src/components/Settings/Export/Export.constants.js

@@ -70,6 +70,58 @@ export const PDF_GRID_BORDER = {
   }
 };
 
+export const FONTS = {
+  Roboto: {
+    normal: 'Roboto-Regular.ttf',
+    bold: 'Roboto-Regular.ttf'
+  },
+  Khmer: {
+    normal: 'Khmer-Regular.ttf',
+    bold: 'Khmer-Regular.ttf'
+  },
+  Tajawal: {
+    normal: 'Tajawal-Regular.ttf',
+    bold: 'Tajawal-Regular.ttf'
+  },
+  Sarabun: {
+    normal: 'Sarabun-Regular.ttf',
+    bold: 'Sarabun-Regular.ttf'
+  },
+  Hind: {
+    normal: 'Hind-Regular.ttf',
+    bold: 'Hind-Regular.ttf'
+  },
+  NotoSansHebrew: {
+    normal: 'NotoSansHebrew-Regular.ttf',
+    bold: 'NotoSansHebrew-Regular.ttf'
+  },
+  NotoSansJP: {
+    normal:
+      'https://cboardgroupqadiag.blob.core.windows.net/fonts/NotoSansJP-Regular.ttf',
+    bold:
+      'https://cboardgroupqadiag.blob.core.windows.net/fonts/NotoSansJP-Regular.ttf'
+  },
+  NotoSansKR: {
+    normal:
+      'https://cboardgroupqadiag.blob.core.windows.net/fonts/NotoSansKR.otf',
+    bold: 'https://cboardgroupqadiag.blob.core.windows.net/fonts/NotoSansKR.otf'
+  },
+  AnekDevanagari: {
+    normal: 'AnekDevanagari-Regular.ttf',
+    bold: 'AnekDevanagari-Regular.ttf'
+  },
+  NotoSansSC: {
+    normal:
+      'https://cboardgroupqadiag.blob.core.windows.net/fonts/NotoSansSC-Regular.otf',
+    bold:
+      'https://cboardgroupqadiag.blob.core.windows.net/fonts/NotoSansSC-Regular.otf'
+  },
+  NotoSerifBengali: {
+    normal: 'NotoSerifBengali-Regular.ttf',
+    bold: 'NotoSerifBengali-Regular.ttf'
+  }
+};
+
 export const PICSEEPAL_IMAGES_WIDTH = {
   column: {
     1: 130,

src/components/Settings/Export/Export.container.js

@@ -33,40 +33,56 @@ export class ExportContainer extends PureComponent {
 
     const { boards, intl, activeBoardId, showNotification } = this.props;
     // TODO: Make this block easier to follow.
-    if (type === 'openboard' && singleBoard) {
-      await EXPORT_HELPERS.openboardExportAdapter(singleBoard, intl);
-    } else if (type === 'cboard') {
-      await EXPORT_HELPERS.cboardExportAdapter(boards, singleBoard);
-    } else if (type === 'picsee_pdf') {
-      if (singleBoard) {
-        await EXPORT_HELPERS[exportConfig.callback]([singleBoard], intl, true);
+    try {
+      if (type === 'openboard' && singleBoard) {
+        await EXPORT_HELPERS.openboardExportAdapter(singleBoard, intl);
+      } else if (type === 'cboard') {
+        await EXPORT_HELPERS.cboardExportAdapter(boards, singleBoard);
+      } else if (type === 'picsee_pdf') {
+        if (singleBoard) {
+          await EXPORT_HELPERS[exportConfig.callback](
+            [singleBoard],
+            intl,
+            true
+          );
+        } else {
+          const currentBoard = boards.filter(
+            board => board.id === activeBoardId
+          );
+          await EXPORT_HELPERS[exportConfig.callback](currentBoard, intl, true);
+        }
+      } else if (type !== 'pdf' && !singleBoard) {
+        await EXPORT_HELPERS[exportConfig.callback](boards, intl);
       } else {
-        const currentBoard = boards.filter(board => board.id === activeBoardId);
-        await EXPORT_HELPERS[exportConfig.callback](currentBoard, intl, true);
+        if (singleBoard) {
+          await EXPORT_HELPERS[exportConfig.callback]([singleBoard], intl);
+        } else {
+          const currentBoard = boards.filter(
+            board => board.id === activeBoardId
+          );
+          await EXPORT_HELPERS[exportConfig.callback](currentBoard, intl);
+        }
       }
-    } else if (type !== 'pdf' && !singleBoard) {
-      await EXPORT_HELPERS[exportConfig.callback](boards, intl);
-    } else {
-      if (singleBoard) {
-        await EXPORT_HELPERS[exportConfig.callback]([singleBoard], intl);
-      } else {
-        const currentBoard = boards.filter(board => board.id === activeBoardId);
-        await EXPORT_HELPERS[exportConfig.callback](currentBoard, intl);
-      }
-    }
-    const showBoardDowloadedNotification = () => {
-      if (isAndroid())
-        return showNotification(
-          intl.formatMessage(messages.boardDownloadedCva)
-        );
-      if (isIOS())
-        return showNotification(
-          intl.formatMessage(messages.boardDownloadedCvaIOS)
-        );
-      return showNotification(intl.formatMessage(messages.boardDownloaded));
-    };
+      const showBoardDowloadedNotification = () => {
+        if (isAndroid())
+          return showNotification(
+            intl.formatMessage(messages.boardDownloadedCva)
+          );
+        if (isIOS())
+          return showNotification(
+            intl.formatMessage(messages.boardDownloadedCvaIOS)
+          );
+        return showNotification(intl.formatMessage(messages.boardDownloaded));
+      };
 
-    showBoardDowloadedNotification();
+      showBoardDowloadedNotification();
+    } catch (e) {
+      console.error(e);
+      const message = e.reason?.message?.startsWith('Failed to fetch')
+        ? messages.downloadNoConnectionError
+        : messages.boardDownloadError;
+      showNotification(intl.formatMessage(message));
+    }
     doneCallback();
   };
 

src/components/Settings/Export/Export.helpers.js

@@ -15,6 +15,7 @@ import {
   NOT_FOUND_IMAGE,
   EMPTY_IMAGE,
   PDF_GRID_BORDER,
+  FONTS,
   PICSEEPAL_GRID_WIDTH,
   PDF_GRID_WIDTH,
   PDF_BORDER_WIDTH,
@@ -39,27 +40,6 @@ import mongoose from 'mongoose';
 import * as utils from '../../../components/FixedGrid/utils';
 
 pdfMake.vfs = pdfFonts.pdfMake.vfs;
-// Add all supported fonts for languages
-pdfMake.fonts = {
-  Khmer: {
-    normal: 'Khmer-Regular.ttf',
-    bold: 'Khmer-Regular.ttf'
-  },
-  Roboto: {
-    normal: 'Roboto-Regular.ttf',
-    bold: 'Roboto-Medium.ttf',
-    italics: 'Roboto-Italic.ttf',
-    bolditalics: 'Roboto-MediumItalic.ttf'
-  },
-  Tajawal: {
-    normal: 'Tajawal-Regular.ttf',
-    bold: 'Tajawal-Bold.ttf'
-  },
-  THSarabunNew: {
-    normal: 'THSarabunNew.ttf',
-    bold: 'THSarabunNew.ttf'
-  }
-};
 
 const imageElement = new Image();
 
@@ -866,21 +846,7 @@ export async function cboardExportAdapter(allBoards = [], board) {
 }
 
 export async function pdfExportAdapter(boards = [], intl, picsee = false) {
-  // change font according to locale
-  let font = 'Roboto';
-  switch (intl?.locale) {
-    case 'km':
-      font = 'Khmer';
-      break;
-    case 'ar':
-      font = 'Tajawal';
-      break;
-    case 'th':
-      font = 'THSarabunNew';
-      break;
-    default:
-      font = 'Roboto';
-  }
+  const font = definePDFfont(intl);
 
   const docDefinition = {
     pageSize: 'A4',
@@ -971,16 +937,81 @@ export async function pdfExportAdapter(boards = [], intl, picsee = false) {
     }
     if (isAndroid() || isIOS()) {
       requestCvaWritePermissions();
-      pdfObj.getBuffer(buffer => {
-        var blob = new Blob([buffer], { type: 'application/pdf' });
-        const name = 'Download/' + prefix + EXPORT_CONFIG_BY_TYPE.pdf.filename;
-        writeCvaFile(name, blob);
-      });
+      const getBuffer = callback => {
+        pdfObj.getBuffer(buffer => {
+          var blob = new Blob([buffer], { type: 'application/pdf' });
+          const name =
+            'Download/' + prefix + EXPORT_CONFIG_BY_TYPE.pdf.filename;
+          writeCvaFile(name, blob);
+          callback();
+        });
+      };
+      await generatePDF(getBuffer);
     } else {
       // On a browser simply use download!
-      pdfObj.download(prefix + EXPORT_CONFIG_BY_TYPE.pdf.filename);
+      const dowloadPDF = callback =>
+        pdfObj.download(prefix + EXPORT_CONFIG_BY_TYPE.pdf.filename, callback);
+      await generatePDF(dowloadPDF);
+    }
+  }
+}
+
+//To handle PDF generation errors
+function generatePDF(callback) {
+  return new Promise((resolve, reject) => {
+    function unhandled(e) {
+      reject(e);
     }
+    setTimeout(() => {
+      window.removeEventListener('unhandledrejection', unhandled);
+      reject(new Error('timeout'));
+    }, 20000);
+    window.addEventListener('unhandledrejection', unhandled);
+    callback(resolve);
+  });
+}
+
+function definePDFfont(intl) {
+  const pdfFonts = { Roboto: FONTS['Roboto'] };
+  // change font according to locale
+  let font = 'Roboto';
+  switch (intl?.locale) {
+    case 'km':
+      font = 'Khmer';
+      break;
+    case 'ar':
+      font = 'Tajawal';
+      break;
+    case 'th':
+      font = 'Sarabun';
+      break;
+    case 'hi':
+      font = 'Hind';
+      break;
+    case 'he':
+      font = 'NotoSansHebrew';
+      break;
+    case 'ja':
+      font = 'NotoSansJP';
+      break;
+    case 'ko':
+      font = 'NotoSansKR';
+      break;
+    case 'ne':
+      font = 'AnekDevanagari';
+      break;
+    case 'zh':
+      font = 'NotoSansSC';
+      break;
+    case 'bn':
+      font = 'NotoSerifBengali';
+      break;
+    default:
+      font = 'Roboto';
   }
+  pdfFonts[font] = FONTS[font];
+  pdfMake.fonts = pdfFonts;
+  return font;
 }
 
 export default {

src/components/Settings/Export/Export.messages.js

@@ -40,5 +40,13 @@ export default defineMessages({
   boards: {
     id: 'cboard.components.Settings.Export.boards',
     defaultMessage: 'Boards'
+  },
+  boardDownloadError: {
+    id: 'cboard.components.Settings.Export.boardDownloadedError',
+    defaultMessage: 'Ups..Something went wrong. Please try again'
+  },
+  downloadNoConnectionError: {
+    id: 'cboard.components.Settings.Export.downloadNoConnectionError',
+    defaultMessage: 'Need internet connection to download the PDF.'
   }
 });

src/translations/src/cboard.json

@@ -443,6 +443,8 @@
   "cboard.components.Settings.Export.boardDownloaded": "Your boards were downloaded",
   "cboard.components.Settings.Export.boardDownloadedCva": "Your boards were downloaded. Find your file under the downloads folder",
   "cboard.components.Settings.Export.boardDownloadedCvaIOS": "Your board was downloaded. Find your file under 'On My device' folder",
+  "cboard.components.Settings.Export.boardDownloadedError": "Ups..Something went wrong. Please try again",
+  "cboard.components.Settings.Export.downloadNoConnectionError": "Need internet connection to download the PDF.",
   "cboard.components.Settings.Export.boards": "Boards",
   "cboard.components.Settings.Import.import": "Import",
   "cboard.components.Settings.Import.importSecondary": "This option will import JUST the new boards detected. It WILL NOT import the default boards included on Cboard. Supported formats are {cboardLink} format or {link} format.",