Message migration WIP

packages/editor/lang/en.json

@@ -1,26 +1,77 @@
 {
-    "editor.try-welcome": {
-        "defaultMessage": "This edition space showcases some of the mindmap editor capabilities!"
-    },
-    "editor.try-welcome-description": {
-		"defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free."
-    },
-	"editor.try-welcome-mobile": {
-		"defaultMessage": "This edition space showcases some of the mindmap capabilities!"
-	},
-    "editor.try-welcome-description-mobile": {
-        "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies."
-    },
-    "editor.edit-mobile": {
-        "defaultMessage": "Note for mobile devices."
-    },
-    "editor.edit-description-mobile": {
-        "defaultMessage": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities."
-    },
-    "login.signup": {
-        "defaultMessage": "Sign Up"
-    },
-    "action.share": {
-        "defaultMessage": "Share"
-    }
+  "action.accept": {
+    "defaultMessage": "Accept"
+  },
+  "action.cancel": {
+    "defaultMessage": "Cancel"
+  },
+  "appbar.back-to-map-list": {
+    "defaultMessage": "Back to maps list"
+  },
+  "appbar.button-signup": {
+    "defaultMessage": "Sign Up"
+  },
+  "appbar.shared-button": {
+    "defaultMessage": "Share"
+  },
+  "appbar.tooltip-export": {
+    "defaultMessage": "Export"
+  },
+  "appbar.tooltip-history": {
+    "defaultMessage": "Changes History"
+  },
+  "appbar.tooltip-info": {
+    "defaultMessage": "Information"
+  },
+  "appbar.tooltip-print": {
+    "defaultMessage": "Print"
+  },
+  "appbar.tooltip-publish": {
+    "defaultMessage": "Publish"
+  },
+  "appbar.tooltip-redo": {
+    "defaultMessage": "Redo"
+  },
+  "appbar.tooltip-save": {
+    "defaultMessage": "Save"
+  },
+  "appbar.tooltip-shared": {
+    "defaultMessage": "Share for Collaboration"
+  },
+  "appbar.tooltip-signup": {
+    "defaultMessage": "Sign Up"
+  },
+  "appbar.tooltip-starred": {
+    "defaultMessage": "Starred"
+  },
+  "appbar.tooltip-undo": {
+    "defaultMessage": "Undo"
+  },
+  "editor.edit-description-mobile": {
+    "defaultMessage": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities."
+  },
+  "editor.edit-mobile": {
+    "defaultMessage": "Note for mobile devices."
+  },
+  "editor.try-welcome": {
+    "defaultMessage": "This edition space showcases some of the mindmap editor capabilities!"
+  },
+  "editor.try-welcome-description": {
+    "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free."
+  },
+  "editor.try-welcome-description-mobile": {
+    "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies."
+  },
+  "editor.try-welcome-mobile": {
+    "defaultMessage": "This edition space showcases some of the mindmap editor capabilities!"
+  },
+  "link.help_text": {
+    "defaultMessage": "Address is not valid"
+  },
+  "link.placeholder": {
+    "defaultMessage": "https://www.example.com"
+  },
+  "note.label": {
+    "defaultMessage": "Note"
+  }
 }

packages/editor/package.json

@@ -9,7 +9,7 @@
     "test:integration": "start-server-and-test 'yarn playground' http-get://localhost:8081 'yarn cy:run'",
     "test": "yarn test:integration",
     "test:unit": "jest ./test/unit/* --detectOpenHandles",
-    "i18n:extract": "formatjs extract 'src/**/*.ts*' --ignore 'src/@types/**/*' --out-file lang/es.json",
+    "i18n:extract": "formatjs extract 'src/**/*.ts*' --ignore 'src/@types/**/*' --out-file lang/en.json",
     "i18n:compile": "for lang in {'es','en','fr','de','zh','ru'};do formatjs compile lang/${lang}.json --ast --out-file src/compiled-lang/${lang}.json;done"
   },
   "repository": "http://www.wisemapping.com",

packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx

@@ -18,10 +18,10 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import { $msg } from '@wisemapping/mindplot';
 import React from 'react';
 import NodeProperty from '../../../../classes/model/node-property';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
+import { FormattedMessage } from 'react-intl';
 
 const SaveAndDelete = (props: {
   model: NodeProperty;
@@ -31,11 +31,11 @@ const SaveAndDelete = (props: {
   return (
     <Box component="span">
       <Button color="primary" variant="outlined" onClick={props.submitHandler} sx={{ mr: 1 }}>
-        {$msg('ACCEPT')}
+        <FormattedMessage id="action.accept" defaultMessage="Accept" />
       </Button>
 
       <Button color="primary" variant="contained" onClick={props.closeModal}>
-        {$msg('CANCEL')}
+        <FormattedMessage id="action.cancel" defaultMessage="Cancel" />
       </Button>
 
       {props.model.getValue() && props.model.getValue().trim() !== '' && (

packages/editor/src/components/action-widget/pane/topic-link/index.tsx

@@ -16,7 +16,6 @@
  *   limitations under the License.
  */
 import { useState } from 'react';
-import { $msg } from '@wisemapping/mindplot';
 import NodeProperty from '../../../../classes/model/node-property';
 import Box from '@mui/material/Box';
 import React from 'react';
@@ -25,16 +24,15 @@ import Link from '@mui/material/Link';
 import IconButton from '@mui/material/IconButton';
 import SaveAndDelete from '../save-and-delete';
 import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined';
+import { useIntl } from 'react-intl';
 
 /**
  * Url form for toolbar and node contextual editor
  */
 const TopicLink = (props: { closeModal: () => void; urlModel: NodeProperty }) => {
   const [url, setUrl] = useState(props.urlModel.getValue());
+  const intl = useIntl();
 
-  /**
-   * if url is valid set model value and calls closeModal
-   */
   const submitHandler = () => {
     if (checkURL(url)) {
       props.closeModal();
@@ -62,8 +60,15 @@ const TopicLink = (props: { closeModal: () => void; urlModel: NodeProperty }) =>
       <Input
         autoFocus
         error={!isValidUrl}
-        helperText={isValidUrl ? '' : $msg('URL_ERROR')}
-        placeholder={$msg('PASTE_URL_HERE')}
+        helperText={
+          isValidUrl
+            ? ''
+            : intl.formatMessage({ id: 'link.help_text', defaultMessage: 'Address is not valid' })
+        }
+        placeholder={intl.formatMessage({
+          id: 'link.placeholder',
+          defaultMessage: 'https://www.example.com',
+        })}
         label="URL"
         value={url}
         onChange={(event) => setUrl(event.target.value)}

packages/editor/src/components/action-widget/pane/topic-note/index.tsx

@@ -16,17 +16,18 @@
  *   limitations under the License.
  */
 import Box from '@mui/material/Box';
-import { $msg } from '@wisemapping/mindplot';
 import React, { useState } from 'react';
 import NodeProperty from '../../../../classes/model/node-property';
 import Input from '../../input';
 import SaveAndDelete from '../save-and-delete';
+import { useIntl } from 'react-intl';
 
 /**
  * Note form for toolbar and node contextual editor
  */
 const TopicNote = (props: { closeModal: () => void; noteModel: NodeProperty | null }) => {
   const [note, setNote] = useState(props.noteModel.getValue());
+  const intl = useIntl();
 
   const submitHandler = () => {
     props.closeModal();
@@ -38,7 +39,7 @@ const TopicNote = (props: { closeModal: () => void; noteModel: NodeProperty | nu
       <Input
         autoFocus
         multiline
-        label={$msg('NOTE')}
+        label={intl.formatMessage({ id: 'note.label', defaultMessage: 'Note' })}
         variant="outlined"
         fullWidth
         rows={12}

packages/editor/src/components/app-bar/index.tsx

@@ -34,13 +34,13 @@ import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ArrowBackIosNewOutlinedIcon from '@mui/icons-material/ArrowBackIosNewOutlined';
 import Typography from '@mui/material/Typography';
-import { $msg } from '@wisemapping/mindplot';
 import UndoAndRedo from '../action-widget/button/undo-and-redo';
 import Button from '@mui/material/Button';
 import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
 import IconButton from '@mui/material/IconButton';
 import { ToolbarActionType } from '../toolbar/ToolbarActionType';
 import MapInfo from '../../classes/model/map-info';
+import { useIntl } from 'react-intl';
 
 interface AppBarProps {
   model: Editor;
@@ -53,8 +53,14 @@ const appBarDivisor = {
   render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
 };
 
+const keyTooltip = (msg: string, key: string): string => {
+  const isMac = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  return `${msg} (${isMac ? '⌘' : 'Ctrl'} + ${key})`;
+};
+
 const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarProps) => {
   const [isStarred, setStarred] = useState<undefined | boolean>(undefined);
+  const intl = useIntl();
 
   const handleStarredOnClick = () => {
     const newStatus = !isStarred;
@@ -70,11 +76,13 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
       });
   }, []);
 
-  console.log(``);
   const config: ActionConfig[] = [
     {
       icon: <ArrowBackIosNewOutlinedIcon />,
-      tooltip: $msg('BACK_TO_MAP_LIST'),
+      tooltip: intl.formatMessage({
+        id: 'appbar.back-to-map-list',
+        defaultMessage: 'Back to maps list',
+      }),
       onClick: () => history.back(),
     },
     {
@@ -100,7 +108,10 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
         <UndoAndRedo
           configuration={{
             icon: <UndoOutlinedIcon />,
-            tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
+            tooltip: keyTooltip(
+              intl.formatMessage({ id: 'appbar.tooltip-undo', defaultMessage: 'Undo' }),
+              'Z',
+            ),
             onClick: () => designer.undo(),
           }}
           disabledCondition={(event) => event.undoSteps > 0}
@@ -114,7 +125,10 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
         <UndoAndRedo
           configuration={{
             icon: <RedoOutlinedIcon />,
-            tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
+            tooltip: keyTooltip(
+              intl.formatMessage({ id: 'appbar.tooltip-redo', defaultMessage: 'Redo' }),
+              'Shift + Z',
+            ),
             onClick: () => designer.redo(),
           }}
           disabledCondition={(event) => event.redoSteps > 0}
@@ -126,65 +140,80 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
     null,
     {
       icon: <SaveOutlinedIcon />,
-      tooltip: $msg('SAVE') + ' (' + $msg('CTRL') + ' + S)',
       onClick: () => {
         model.save(true);
       },
+      tooltip: keyTooltip(
+        intl.formatMessage({ id: 'appbar.tooltip-save', defaultMessage: 'Save' }),
+        'S',
+      ),
       visible: !capability.isHidden('save'),
       disabled: () => !model?.isMapLoadded(),
     },
     {
       icon: <RestoreOutlinedIcon />,
-      tooltip: $msg('HISTORY'),
       onClick: () => onAction('history'),
+      tooltip: intl.formatMessage({
+        id: 'appbar.tooltip-history',
+        defaultMessage: 'Changes History',
+      }),
       visible: !capability.isHidden('history'),
     },
     appBarDivisor,
     {
-      tooltip: $msg('STARRED'),
       render: () => (
-        <IconButton size="small" onClick={handleStarredOnClick}>
-          <StarRateRoundedIcon
-            color="action"
-            style={{
-              color: isStarred ? 'yellow' : 'gray',
-            }}
-          />
-        </IconButton>
+        <Tooltip
+          title={intl.formatMessage({ id: 'appbar.tooltip-starred', defaultMessage: 'Starred' })}
+        >
+          <IconButton size="small" onClick={handleStarredOnClick}>
+            <StarRateRoundedIcon
+              color="action"
+              style={{
+                color: isStarred ? 'yellow' : 'gray',
+              }}
+            />
+          </IconButton>
+        </Tooltip>
       ),
-
       visible: !capability.isHidden('starred'),
       disabled: () => isStarred !== undefined,
     },
     {
       icon: <FileDownloadOutlinedIcon />,
-      tooltip: $msg('EXPORT'),
       onClick: () => onAction('export'),
+      tooltip: intl.formatMessage({ id: 'appbar.tooltip-export', defaultMessage: 'Export' }),
       visible: !capability.isHidden('export'),
     },
     {
       icon: <PrintOutlinedIcon />,
-      tooltip: $msg('PRINT'),
       onClick: () => onAction('print'),
+      tooltip: intl.formatMessage({ id: 'appbar.tooltip-print', defaultMessage: 'Print' }),
       visible: !capability.isHidden('print'),
     },
     {
       icon: <HelpOutlineOutlinedIcon />,
       onClick: () => onAction('info'),
-      tooltip: $msg('MAP_INFO'),
+      tooltip: intl.formatMessage({ id: 'appbar.tooltip-info', defaultMessage: 'Information' }),
       visible: !capability.isHidden('info'),
     },
     {
       icon: <CloudUploadOutlinedIcon />,
       onClick: () => onAction('publish'),
-      tooltip: $msg('PUBLISH'),
+      tooltip: intl.formatMessage({ id: 'appbar.tooltip-publish', defaultMessage: 'Publish' }),
       visible: !capability.isHidden('publish'),
     },
     {
       render: () => (
-        <Button variant="contained" onClick={() => onAction('share')}>
-          {$msg('COLLABORATE')}
-        </Button>
+        <Tooltip
+          title={intl.formatMessage({
+            id: 'appbar.tooltip-shared',
+            defaultMessage: 'Share for Collaboration',
+          })}
+        >
+          <Button variant="contained" onClick={() => onAction('share')}>
+            {intl.formatMessage({ id: 'appbar.shared-button', defaultMessage: 'Share' })}
+          </Button>
+        </Tooltip>
       ),
       visible: !capability.isHidden('share'),
     },
@@ -194,9 +223,13 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
     },
     {
       render: () => (
-        <Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
-          {$msg('SIGN_UP')}
-        </Button>
+        <Tooltip
+          title={intl.formatMessage({ id: 'appbar.tooltip-signup', defaultMessage: 'Sign Up' })}
+        >
+          <Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
+            {intl.formatMessage({ id: 'appbar.button-signup', defaultMessage: 'Sign Up' })}
+          </Button>
+        </Tooltip>
       ),
       visible: !capability.isHidden('sign-up'),
     },

packages/editor/src/components/toolbar/index.tsx

@@ -132,7 +132,7 @@ export const ToolbarSubmenu = (props: {
                   key={i}
                   configuration={o as ActionConfig}
                   elevation={props.elevation + 3}
-                ></ToolbarMenuItem>
+                />
               );
             } else {
               return <span key={i}>{o.render(() => setOpen(false))}</span>;
@@ -180,7 +180,7 @@ export const ToolbarMenuItem = (props: {
           configuration={props.configuration}
           vertical={props.vertical}
           elevation={props.elevation || 0}
-        ></ToolbarSubmenu>
+        />
       );
     else return null;
   }

packages/editor/src/components/warning-dialog/index.tsx

@@ -31,20 +31,41 @@ const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactEle
   const intl = useIntl();
   const [dialogClass, setDialogClass] = useState('tryInfoPanel');
 
-  var titleKey = undefined;
-  var descriptionKey = undefined;
-
+  let msgExt, msg: string;
   if (capability.mode !== 'viewonly' && capability.mode !== 'showcase' && capability.isMobile) {
-    titleKey = 'editor.edit-mobile';
-    descriptionKey = 'editor.edit-description-mobile';
+    msg = intl.formatMessage({
+      id: 'editor.edit-mobile',
+      defaultMessage: 'Note for mobile devices.',
+    });
+    msgExt = intl.formatMessage({
+      id: 'editor.edit-description-mobile',
+      defaultMessage:
+        'Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities.',
+    });
   }
+
   if (capability.mode === 'showcase' && capability.isMobile) {
-    titleKey = 'editor.try-welcome-mobile';
-    descriptionKey = 'editor.edit-description-mobile';
+    msg = intl.formatMessage({
+      id: 'editor.try-welcome-mobile',
+      defaultMessage: 'This edition space showcases some of the mindmap editor capabilities!',
+    });
+    msgExt = intl.formatMessage({
+      id: 'editor.try-welcome-description-mobile',
+      defaultMessage:
+        'Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies.',
+    });
   }
+
   if (capability.mode === 'showcase' && !capability.isMobile) {
-    titleKey = 'editor.try-welcome';
-    descriptionKey = 'editor.try-welcome-description';
+    msg = intl.formatMessage({
+      id: 'editor.try-welcome',
+      defaultMessage: 'This edition space showcases some of the mindmap editor capabilities!',
+    });
+    msgExt = intl.formatMessage({
+      id: 'editor.try-welcome-description',
+      defaultMessage:
+        'Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free.',
+    });
   }
 
   // if the toolbar is present, the alert must not overlap
@@ -53,7 +74,7 @@ const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactEle
   return (
     <>
       <Notifier id="headerNotifier"></Notifier>
-      {(titleKey || message) && (
+      {(msgExt || message) && (
         <div className={dialogClass + ' ' + alertTopAdjustmentStyle}>
           <div className="tryInfoPanelInner">
             <div className="closeButton">
@@ -67,11 +88,7 @@ const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactEle
                 <img src={CloseDialogSvg} />
               </button>
             </div>
-            {titleKey && (
-              <p>
-                {intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })}
-              </p>
-            )}
+            {msgExt && <p>{`${msg} ${msgExt}`}</p>}
             {message && <p>{message}</p>}
           </div>
         </div>

packages/mindplot/src/components/lang/en.js

@@ -1,4 +1,7 @@
 const EN = {
+  SAVING: 'Saving ...',
+  SAVE_COMPLETE: 'Save Complete',
+
   ZOOM_IN: 'Zoom In',
   ZOOM_OUT: 'Zoom Out',
   TOPIC_SHAPE: 'Topic Shape',
@@ -18,22 +21,10 @@ const EN = {
   FONT_SIZE: 'Text Size',
   FONT_BOLD: 'Text Bold',
   FONT_ITALIC: 'Text Italic',
-  UNDO: 'Undo',
-  REDO: 'Redo',
   INSERT: 'Insert',
-  SAVE: 'Save',
-  NOTE: 'Note',
   ADD_TOPIC: 'Add Topic',
   LOADING: 'Loading ...',
-  EXPORT: 'Export',
-  PRINT: 'Print',
-  PUBLISH: 'Publish',
-  COLLABORATE: 'Share',
-  HISTORY: 'History',
-  DISCARD_CHANGES: 'Discard Changes',
   FONT_COLOR: 'Text Color',
-  SAVING: 'Saving ...',
-  SAVE_COMPLETE: 'Save Complete',
   ZOOM_IN_ERROR: 'Zoom too high.',
   ZOOM_ERROR: 'No more zoom can be applied.',
   ONLY_ONE_TOPIC_MUST_BE_SELECTED: 'Could not create a topic. Only one topic must be selected.',
@@ -53,13 +44,8 @@ const EN = {
   RELATIONSHIP_COULD_NOT_BE_CREATED: 'Relationship could not be created. A parent relationship topic must be selected first.',
   SELECTION_COPIED_TO_CLIPBOARD: 'Topics copied to the clipboard',
   WRITE_YOUR_TEXT_HERE: 'Write your note here ...',
-  REMOVE: 'Remove',
-  ACCEPT: 'Accept',
-  CANCEL: 'Cancel',
   LINK: 'Link',
-  OPEN_LINK: 'Open URL',
   SESSION_EXPIRED: 'Your session has expired, please log-in again.',
-  URL_ERROR: 'URL not valid',
   ACTION: 'Action',
   CREATE_SIBLING_TOPIC: 'Create Sibling Topic',
   CREATE_CHILD_TOPIC: 'Create Child Topic',
@@ -81,9 +67,7 @@ const EN = {
   KEYBOARD_SHORTCUTS_MSG: 'Keyboard shortcuts can help you save time by allowing you to never take your hands off the keyboard to use the mouse.',
   COPY_AND_PASTE_TOPICS: 'Copy and Paste Topics',
   MULTIPLE_LINES: 'Add multiple text lines',
-  BACK_TO_MAP_LIST: 'Back to Maps List',
   KEYBOARD_SHOTCUTS: 'Keyboard Shorcuts',
-  PASTE_URL_HERE: 'Paste your url address here:',
   CTRL: 'Ctrl',
   SPACE_BAR: 'Space Bar',
   K_INSERT: 'Insert',
@@ -91,11 +75,9 @@ const EN = {
   K_DELETE: 'Delete',
   BACKSPACE: 'Backspace',
   CENTER_POSITION: 'Zoom To Fit',
-  MAP_INFO: 'Information',
   FONT_FORMAT: 'Font Format',
   FONT_INCREASE: 'Font Size Increase',
   FONT_DECREASE: 'Font Size Decrease',
-  SIGN_UP: 'Sign Up',
 };
 
 export default EN;

packages/mindplot/src/components/lang/ru.js

@@ -84,7 +84,6 @@ const EN = {
   BACK_TO_MAP_LIST: 'Back to Maps List',
   KEYBOARD_SHOTCUTS: 'Keyboard Shorcuts',
   PASTE_URL_HERE: 'Вставьте нужный URL-адрес здесь:',
-  CTRL: 'Ctrl',
   SPACE_BAR: 'Space Bar',
   K_INSERT: 'Insert',
   MOUSE_CLICK: 'Mouse Click',

packages/mindplot/src/components/lang/zh.js

@@ -84,7 +84,6 @@ const ZH = {
   BACK_TO_MAP_LIST: '回到脑图列表',
   KEYBOARD_SHOTCUTS: '键盘快捷键',
   PASTE_URL_HERE: '在此处粘贴所需的 URL 地址:',
-  CTRL: 'Ctrl',
   SPACE_BAR: 'Space Bar',
   K_INSERT: 'Insert',
   MOUSE_CLICK: 'Mouse Click',