Message migration WIP

2024-11-10 17:33:24 +01:00 · 2022-10-22 17:49:46 -07:00 · 2022-10-22 17:49:46 -07:00 · fac343187f
commit fac343187f
parent 52f278e65a
11 changed files with 191 additions and 104 deletions
--- a/packages/editor/lang/en.json
+++ b/packages/editor/lang/en.json
@ -1,26 +1,77 @@
 {
+  "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-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.try-welcome-mobile": {
+    "defaultMessage": "This edition space showcases some of the mindmap editor capabilities!"
  },
-    "editor.edit-description-mobile": {
-        "defaultMessage": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities."
+  "link.help_text": {
+    "defaultMessage": "Address is not valid"
  },
-    "login.signup": {
-        "defaultMessage": "Sign Up"
+  "link.placeholder": {
+    "defaultMessage": "https://www.example.com"
  },
-    "action.share": {
-        "defaultMessage": "Share"
+  "note.label": {
+    "defaultMessage": "Note"
  }
 }
--- a/packages/editor/package.json
+++ b/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",
--- a/packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx
+++ b/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() !== '' && (
--- a/packages/editor/src/components/action-widget/pane/topic-link/index.tsx
+++ b/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)}
--- a/packages/editor/src/components/action-widget/pane/topic-note/index.tsx
+++ b/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}
--- a/packages/editor/src/components/app-bar/index.tsx
+++ b/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,23 +140,31 @@ 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: () => (
+        <Tooltip
+          title={intl.formatMessage({ id: 'appbar.tooltip-starred', defaultMessage: 'Starred' })}
+        >
          <IconButton size="small" onClick={handleStarredOnClick}>
            <StarRateRoundedIcon
              color="action"
@ -151,40 +173,47 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
              }}
            />
          </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: () => (
+        <Tooltip
+          title={intl.formatMessage({
+            id: 'appbar.tooltip-shared',
+            defaultMessage: 'Share for Collaboration',
+          })}
+        >
          <Button variant="contained" onClick={() => onAction('share')}>
-          {$msg('COLLABORATE')}
+            {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: () => (
+        <Tooltip
+          title={intl.formatMessage({ id: 'appbar.tooltip-signup', defaultMessage: 'Sign Up' })}
+        >
          <Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
-          {$msg('SIGN_UP')}
+            {intl.formatMessage({ id: 'appbar.button-signup', defaultMessage: 'Sign Up' })}
          </Button>
+        </Tooltip>
      ),
      visible: !capability.isHidden('sign-up'),
    },
--- a/packages/editor/src/components/toolbar/index.tsx
+++ b/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;
  }
--- a/packages/editor/src/components/warning-dialog/index.tsx
+++ b/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>
--- a/packages/mindplot/src/components/lang/en.js
+++ b/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;
--- a/packages/mindplot/src/components/lang/ru.js
+++ b/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',
--- a/packages/mindplot/src/components/lang/zh.js
+++ b/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',