Include css as part of the editor

packages/editor/src/components/toolbar/global-styled.css

@@ -0,0 +1,227 @@
+div#header {
+    width: 100%;
+    height:50px;
+    position: absolute;
+    top: 0;
+    z-index:1000;
+}
+
+div#headerNotifier {
+    border: 1px solid rgb(241, 163, 39);
+    background-color: rgb(252, 235, 192);
+    border-radius: 3px;
+    position: fixed;
+    padding: 5px 9px;
+    color: back;
+    white-space: nowrap;
+    margin-top: 5px;
+    display: none;
+    bottom: 10px;
+}
+
+div#toolbarRight {
+    float: right;
+    white-space: nowrap;
+    vertical-align: middle;
+    justify-content: center;
+    margin: 6px 10px;
+    height: 100%;
+}
+
+#account {
+    float: right;
+    display: inline;
+}
+
+#account >img {
+    width: 36x;
+    height: 36px;
+}
+
+#accountSettingsPanel{
+    padding:10px 10px;
+}
+
+#share {
+    margin: 0 30px;
+    float: right;
+}
+
+.actionButton {
+    cursor: pointer;
+    font-family: Arial, Helvetica, sans-serif;
+    user-select: none;
+    vertical-align: middle;
+    justify-content: center;
+    padding: 10px 25px;
+    font-size: 15px;
+    min-width: 64px;
+    box-sizing: border-box;
+    font-weight: 600;
+    border-radius: 9px;
+    color: white;    
+    background-color: #ffa800;
+}
+
+.actionButton:hover {
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+div#toolbar {
+    width: 100%;
+    height: 50px;
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    min-width: 900px;
+    overflow: hidden;
+}
+
+div#toolbar .buttonContainer {
+    height: 50px;
+    padding-top: 8px;
+    padding-right: 10px;
+    padding-left: 10px;
+    float: left;
+    border-left: 1px solid lightgray;
+}
+
+div#mapName >span {
+    border-radius: 4px;
+    float: left;
+    padding: 8px;
+    min-width: 30px;
+    font-weight: bold;
+}
+
+div#backToList {
+    height: 24px;
+    width: 24px;
+    float: left;
+    margin: 13px 20px;
+}
+
+/******************************************************************************************/
+/* Buttons*/
+/******************************************************************************************/
+
+div#toolbar .buttonOn,
+div#toolbar .buttonOff,
+div#toolbar .buttonActive,
+div#toolbar .buttonOn:hover {
+    width: 28px;
+    height: 28px;
+    float: left;
+    text-align: center;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 2px;
+    margin-left: 3px;
+}
+
+div#toolbar .buttonOn:hover {
+    cursor: pointer;
+    opacity: 1;
+}
+
+div#toolbar .buttonOn {
+    opacity: 0.8;
+}
+
+div#toolbar .buttonOff {
+    opacity: 0.4;
+}
+
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+div#toolbar .buttonExtOn,
+div#toolbar .buttonExtOff,
+div#toolbar .buttonExtActive,
+div#toolbar .buttonExtOn:hover {
+    width: 40px;
+    height: 28px;
+    float: left;
+    text-align: left;
+    z-index: 4;
+    margin-top: 3px;
+    padding-top: 2px;
+    padding-left: 5px;
+    margin-left: 3px;
+}
+
+div#toolbar .buttonExtOn:hover {
+    opacity: 1;
+}
+
+div#toolbar .buttonExtActive {
+    opacity: 1;
+}
+
+div#toolbar .buttonExtOn {
+    opacity: 0.8;
+    cursor: pointer
+}
+
+div#toolbar .buttonExtOff {
+    opacity: 0.4;
+}
+
+div#exportAnchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+/***************************************************************************************************/
+/* Other toolbar styles */
+/***************************************************************************************************/
+.toolbarTip {
+    background-color: #000000;
+    padding: 5px 5px;
+    color: #f5f5f5;
+    font-size: 11px;
+}
+
+div#colorPalette {
+    border: 1px solid #bbb4d6;
+    display: none;
+    position: absolute;
+    z-index: 4;
+    width: 160px;
+    top: 89px;
+}
+
+div.toolbarPanelLink,
+div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    color: black;
+    margin: 1px;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 5px 10px;
+    font-weight: bold;
+}
+
+div.toolbarPanelLink:hover,
+div.toolbarPanelLinkSelectedLink {
+    cursor: pointer;
+    background-color: #efefef;
+}
+
+.toolbarPaneTip {
+    background-color: rgb(228, 226, 210);
+    padding: 5px 5px;
+    color: #f5f5f5;
+    font-size: 11px;
+    border-radius: 6px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    border: 3px double rgb(190, 190, 190);
+}

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

@@ -24,6 +24,7 @@ import PublicSvg from '../../../images/public.svg';
 import HistorySvg from '../../../images/history.svg';
 import PrintSvg from '../../../images/print.svg';
 import AccountSvg from '../../../images/account.svg';
+import './global-styled.css';
 
 import { HeaderContainer, ToolbarButton, ToolbarButtonExt, ToolbarRightContainer } from './styled';
 import ActionButton from '../action-button';

packages/editor/src/global-styled.css

@@ -0,0 +1,231 @@
+/********************************************************************************/
+/* Header & Toolbar Styles */
+/********************************************************************************/
+@import "bootstrap.min.css";
+
+html {
+    /* avoid bootstrap overriding font-size and breaking Mui */
+    font-size: initial;
+}
+
+body {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    overflow: hidden;
+}
+
+div#mindplot {
+    position: relative;
+    top: 50px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    overflow: hidden;
+    opacity: 1;
+    background-color: #f2f2f2;
+    background-image:  linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
+    background-size: 50px 50px;
+}
+
+.notesTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 13px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+.linkTip {
+    background-color: #dfcf3c;
+    padding: 5px 15px;
+    color: #666666;
+    /*font-weight: bold;*/
+    /*width: 100px;*/
+    font-size: 13px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+}
+
+.keyboardShortcutTip {
+    background-color: black;
+    padding: 5px 15px;
+    color: white;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+/** */
+/* Modal dialogs definitions */
+
+div.modalDialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 11000;
+    width: 500px;
+    margin: -250px 0 0 -250px;
+    background-color: #ffffff;
+    border: 1px solid #999;
+    padding: 10px;
+    overflow: auto;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding-box;
+    background-clip: padding-box;
+}
+
+div.modalDialog .content {
+    padding: 5px 5px;
+}
+
+div.modalDialog .title {
+    font-weight: bold;
+    text-shadow: 1px 1px 0 #fff;
+    border-bottom: 1px solid #eee;
+    padding: 5px 15px;
+    font-size: 18px;
+}
+
+/*---   End Modal Dialog Form  ---*/
+
+.publishModalDialog .content {
+    height: 420px;
+}
+
+.exportModalDialog .content {
+    height: 400px;
+}
+
+.shareModalDialog .content {
+    height: 440px;
+}
+
+div.shareModalDialog {
+    width: 550px;
+}
+
+.panelIcon {
+    width: 20px;
+    height: 20px;
+    margin-left: 4px;
+    margin-top: 3px;
+    cursor: pointer
+}
+
+.panelIcon:hover {
+    background-color: #efefef;
+}
+
+.popover {
+    font-size: 13px;
+    max-width: none;
+}
+
+#floating-panel {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    bottom: 20px;
+    right: 20px;
+    align-items: stretch;
+}
+
+div#position {
+    margin-top: 5px;
+}
+
+#position-button {
+    cursor: pointer;
+    border: solid black 1px;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+    background-color: #FFF;
+    border-radius: 8px;
+}
+
+#zoom-button {
+    width: 40px;
+    border: 0;
+}
+
+#zoom-plus,
+#zoom-minus {
+    border: solid black 1px;
+    height: 40px;
+    width: 40px;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+    background-position: center;
+    cursor: pointer;
+    background-color: #FFF;
+}
+
+#zoom-plus {
+    border-radius: 8px 8px 0 0;
+}
+
+#zoom-minus {
+    border-radius: 0 0 8px 8px;
+}
+
+div#shotcuts > img{
+    margin: 20px 0;
+    width: 40px;
+    height: 40px;
+}
+
+#keyboardTable {
+    font-family: Arial, verdana, serif;
+    font-size: 13px;
+    width: 100%;
+}
+
+#keyboardTable td {
+    padding: 3px;
+    white-space: nowrap;
+}
+
+#keyboardTable th {
+    padding: 5px;
+    white-space: nowrap;
+}
+
+#keyboardTable th {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+div#tryInfoPanel {
+    position: absolute;
+    margin: auto;
+    text-align: center;
+    top: 80px;
+    right: 20px;
+    width: 200px;
+    height: 300px;
+    padding: 20px;
+    font-size: 15px;
+    border-radius: 9px;
+    background-color: white;
+    border: solid 2px #ffa800;
+}
+
+#tryInfoPanel > p {
+    justify-content: center;
+    padding-bottom: 20px;
+}

packages/editor/src/index.tsx

@@ -5,9 +5,7 @@ import { IntlProvider } from 'react-intl';
 import {
     $notify,
     buildDesigner,
-    LocalStorageManager,
     PersistenceManager,
-    RESTPersistenceManager,
     DesignerOptionsBuilder,
     Designer,
     DesignerKeyboard,
@@ -16,7 +14,7 @@ import FR from './compiled-lang/fr.json';
 import ES from './compiled-lang/es.json';
 import EN from './compiled-lang/en.json';
 import DE from './compiled-lang/de.json';
-
+import './global-styled.css';
 
 declare global {
     var memoryPersistence: boolean;

packages/editor/webpack.common.js

@@ -7,8 +7,9 @@ module.exports = {
     publicPath: '',
     library: {
       type: 'umd',
-    },  },
+    },
-  stats:{
+  },
+  stats: {
     errorDetails: true
   },
   entry: {
@@ -18,24 +19,31 @@ module.exports = {
   devtool: 'source-map',
   target: 'web',
   resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
   },
   module: {
-      rules: [
+    rules: [
-          {
+      {
-              test: /\.tsx?$/,
+        test: /\.tsx?$/,
-              use: 'ts-loader',
+        use: 'ts-loader',
-              exclude: '/node_modules/'
+        exclude: '/node_modules/'
-          },
+      },
-          {
+      {
-            test: /\.(png|jpe?g|gif|svg)$/,
+        test: /\.(png|jpe?g|gif|svg)$/,
-            type: 'asset/inline',
+        type: 'asset/inline',
-          },
+      },
-          {
+      {
-            test: /\.(js|jsx)$/,
+        test: /\.(js|jsx)$/,
-            exclude: /node_modules/,
+        exclude: /node_modules/,
-            use: ['babel-loader'],
+        use: ['babel-loader'],
-          },
+      }, {
-      ],
+        test: /\.css$/i,
+        loader: 'style-loader'
+      },
+      {
+        test: /\.css$/,
+        loader: 'css-loader',
+      }
+    ],
   },
-}
+};