Simplefy editor modes

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

@@ -31,14 +31,12 @@ import ActionButton from '../action-button';
 export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share';
 
 export type ToolbarPropsType = {
-    memoryPersistence: boolean;
-    readOnlyMode: boolean;
+    isTryMode: boolean;
     onAction: (action: ToolbarActionType) => void;
 };
 
 export default function Toolbar({
-    memoryPersistence,
-    readOnlyMode,
+    isTryMode: isTryMode,
     onAction,
 }: ToolbarPropsType): React.ReactElement {
     const intl = useIntl();
@@ -48,75 +46,71 @@ export default function Toolbar({
                 <div id="backToList">
                     <img src={BackIconSvg} />
                 </div>
-                {!memoryPersistence && (
+                {!isTryMode && (
                     <div id="persist" className="buttonContainer">
                         <ToolbarButton id="save" className="buttonOn">
                             <img src={SaveSvg} />
                         </ToolbarButton>
                     </div>
                 )}
-                {!readOnlyMode && (
-                    <>
-                        <div id="edit" className="buttonContainer">
-                            <ToolbarButton id="undoEdition" className="buttonOn">
-                                <img src={UndoSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="redoEdition" className="buttonOn">
-                                <img src={RedoSvg} />
-                            </ToolbarButton>
-                        </div>
-                        <div id="nodeStyle" className="buttonContainer">
-                            <ToolbarButton id="addTopic" className="buttonOn">
-                                <img src={TopicAddSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="deleteTopic" className="buttonOn">
-                                <img src={TopicDeleteSvg} />
-                            </ToolbarButton>
-                            <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
-                                <img src={TopicBorderSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButtonExt id="topicColor" className="buttonExtOn">
-                                <img src={TopicColorSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButtonExt id="topicShape" className="buttonExtOn">
-                                <img src={TopicShapeSvg} />
-                            </ToolbarButtonExt>
-                        </div>
-                        <div id="font" className="buttonContainer">
-                            <ToolbarButton id="fontFamily" className="buttonOn">
-                                <img src={FontTypeSvg} />
-                            </ToolbarButton>
-                            <ToolbarButtonExt id="fontSize" className="buttonExtOn">
-                                <img src={FontSizeSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButton id="fontBold" className="buttonOn">
-                                <img src={FontBoldSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="fontItalic" className="buttonOn">
-                                <img src={FontItalicSvg} />
-                            </ToolbarButton>
-                            <ToolbarButtonExt id="fontColor" className="buttonExtOn">
-                                <img src={FontColorSvg} />
-                            </ToolbarButtonExt>
-                        </div>
-                        <div id="nodeContent" className="buttonContainer">
-                            <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
-                                <img src={TopicIconSvg} />
-                            </ToolbarButtonExt>
-                            <ToolbarButton id="topicNote" className="buttonOn">
-                                <img src={TopicNoteSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="topicLink" className="buttonOn">
-                                <img src={TopicLinkSvg} />
-                            </ToolbarButton>
-                            <ToolbarButton id="topicRelation" className="buttonOn">
-                                <img src={TopicRelationSvg} />
-                            </ToolbarButton>
-                        </div>
-                        <div id="separator" className="buttonContainer"></div>
-                    </>
-                )}
-                {!memoryPersistence && (
+                <div id="edit" className="buttonContainer">
+                    <ToolbarButton id="undoEdition" className="buttonOn">
+                        <img src={UndoSvg} />
+                    </ToolbarButton>
+                    <ToolbarButton id="redoEdition" className="buttonOn">
+                        <img src={RedoSvg} />
+                    </ToolbarButton>
+                </div>
+                <div id="nodeStyle" className="buttonContainer">
+                    <ToolbarButton id="addTopic" className="buttonOn">
+                        <img src={TopicAddSvg} />
+                    </ToolbarButton>
+                    <ToolbarButton id="deleteTopic" className="buttonOn">
+                        <img src={TopicDeleteSvg} />
+                    </ToolbarButton>
+                    <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
+                        <img src={TopicBorderSvg} />
+                    </ToolbarButtonExt>
+                    <ToolbarButtonExt id="topicColor" className="buttonExtOn">
+                        <img src={TopicColorSvg} />
+                    </ToolbarButtonExt>
+                    <ToolbarButtonExt id="topicShape" className="buttonExtOn">
+                        <img src={TopicShapeSvg} />
+                    </ToolbarButtonExt>
+                </div>
+                <div id="font" className="buttonContainer">
+                    <ToolbarButton id="fontFamily" className="buttonOn">
+                        <img src={FontTypeSvg} />
+                    </ToolbarButton>
+                    <ToolbarButtonExt id="fontSize" className="buttonExtOn">
+                        <img src={FontSizeSvg} />
+                    </ToolbarButtonExt>
+                    <ToolbarButton id="fontBold" className="buttonOn">
+                        <img src={FontBoldSvg} />
+                    </ToolbarButton>
+                    <ToolbarButton id="fontItalic" className="buttonOn">
+                        <img src={FontItalicSvg} />
+                    </ToolbarButton>
+                    <ToolbarButtonExt id="fontColor" className="buttonExtOn">
+                        <img src={FontColorSvg} />
+                    </ToolbarButtonExt>
+                </div>
+                <div id="nodeContent" className="buttonContainer">
+                    <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
+                        <img src={TopicIconSvg} />
+                    </ToolbarButtonExt>
+                    <ToolbarButton id="topicNote" className="buttonOn">
+                        <img src={TopicNoteSvg} />
+                    </ToolbarButton>
+                    <ToolbarButton id="topicLink" className="buttonOn">
+                        <img src={TopicLinkSvg} />
+                    </ToolbarButton>
+                    <ToolbarButton id="topicRelation" className="buttonOn">
+                        <img src={TopicRelationSvg} />
+                    </ToolbarButton>
+                </div>
+                <div id="separator" className="buttonContainer"></div>
+                {!isTryMode && (
                     <ToolbarRightContainer>
                         <ToolbarButton
                             id="export"

packages/editor/src/index.tsx

@@ -38,14 +38,14 @@ declare global {
 
 export type EditorPropsType = {
     initCallback?: () => void;
-    mapId: number;
-    memoryPersistence: boolean;
+    mapId?: number;
+    isTryMode: boolean;
     readOnlyMode: boolean;
     locale?: string;
     onAction: (action: ToolbarActionType) => void;
 };
 
-function loadLocaleData(locale: string) {
+const loadLocaleData = (locale: string) => {
     switch (locale) {
         case 'fr':
             return FR;
@@ -65,7 +65,7 @@ const initMindplot = () => {
     document.title = `${global.mapTitle} | WiseMapping `;
 
     // Configure persistence manager ...
-    let persistence;
+    let persistence: PersistenceManager;
     if (!global.memoryPersistence && !global.readOnly) {
         persistence = new RESTPersistenceManager({
             documentUrl: '/c/restful/maps/{id}/document',
@@ -111,38 +111,26 @@ const initMindplot = () => {
     }
 };
 
-export default function Editor({
+const Editor = ({
     initCallback = initMindplot,
     mapId,
-    memoryPersistence,
-    readOnlyMode,
+    isTryMode: isTryMode,
     locale = 'en',
     onAction,
-}: EditorPropsType): React.ReactElement {
-    const [localeTranslation, setLocaleTranslation] = React.useState(null);
+}: EditorPropsType): React.ReactElement => {
     React.useEffect(() => {
-        if (localeTranslation && !global.designer) {
-            initCallback();
-        }
-    }, [localeTranslation]);
-    React.useEffect(() => {
-        const loadAndSetLocale = async () => {
-            setLocaleTranslation(await loadLocaleData(locale));
-        };
-        loadAndSetLocale();
-    }, [locale])
-    if (!localeTranslation) {
-        return null;
-    }
+        initCallback();
+    }, []);
+
     return (
-        <IntlProvider locale={locale} defaultLocale="en" messages={localeTranslation}>
+        <IntlProvider locale={locale} defaultLocale="en" messages={loadLocaleData(locale)}>
             <Toolbar
-                memoryPersistence={memoryPersistence}
-                readOnlyMode={readOnlyMode}
+                isTryMode={isTryMode}
                 onAction={onAction}
             />
             <div id="mindplot"></div>
-            <Footer showTryPanel={memoryPersistence} />
+            <Footer showTryPanel={isTryMode} />
         </IntlProvider>
     );
 }
+export default Editor;

packages/webapp/src/app.tsx

@@ -19,8 +19,8 @@ import EditorPage from './components/editor-page';
 
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface DefaultTheme extends Theme { }
 }
 
 
@@ -41,8 +41,7 @@ const App = (): ReactElement => {
     const locale = appi18n.getBrowserLocale();
 
     // global variables set server-side
-    const memoryPersistence = global.memoryPersistence;
-    const readOnlyMode = global.readOnly;
+    const istTryMode = global.memoryPersistence;
     const mapId = parseInt(global.mapId, 10);
 
     return locale.message ? (
@@ -85,12 +84,10 @@ const App = (): ReactElement => {
                                         component={MapsPage}
                                     />
                                     <Route exact path="/c/maps/:id/edit">
-                                        <EditorPage memoryPersistence={memoryPersistence}
-                                            readOnlyMode={readOnlyMode} mapId={mapId} />
+                                        <EditorPage isTryMode={istTryMode} mapId={mapId} />
                                     </Route>
                                     <Route exact path="/c/maps/:id/try">
-                                        <EditorPage memoryPersistence={memoryPersistence}
-                                            readOnlyMode={readOnlyMode} mapId={mapId} />
+                                        <EditorPage isTryMode={istTryMode} mapId={mapId} />
                                     </Route>
                                 </Switch>
                             </Router>

packages/webapp/src/components/editor-page/index.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import ActionDispatcher from '../maps-page/action-dispatcher';
 import { ActionType } from '../maps-page/action-chooser';
-import WiseEditor from '@wisemapping/editor';
+import Editor from '@wisemapping/editor';
 import AppI18n from '../../classes/app-i18n';
 
 export type EditorPropsType = {
     mapId: number;
-    memoryPersistence: boolean;
-    readOnlyMode: boolean;
+    isTryMode: boolean;
 };
 
 const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => {
@@ -18,7 +17,7 @@ const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement =>
     const userLocale = appi18n.getUserLocale();
 
     return <>
-        <WiseEditor {...props} onAction={setActiveDialog} locale={userLocale.code} />
+        <Editor {...props} onAction={setActiveDialog} locale={userLocale.code} />
         {
             activeDialog &&
             <ActionDispatcher