Fix title encodding.

packages/editor/src/components/action-widget/pane/map-title/index.tsx

@@ -0,0 +1,92 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import React, { useEffect, useState } from 'react';
+import Tooltip from '@mui/material/Tooltip';
+import { Typography } from '@mui/material';
+import MapInfo from '../../../../classes/model/map-info';
+import { TitleInput } from './styled';
+import DesignerKeyboard from '@wisemapping/mindplot/src/components/DesignerKeyboard';
+
+type MapTitleProp = {
+  mapInfo: MapInfo;
+};
+
+type Status = 'disabled' | 'enabled' | 'active-edition';
+
+const MapTitle = ({ mapInfo }: MapTitleProp) => {
+  const [state, setState] = useState<Status>('disabled');
+  const [title, setTitle] = useState<string>(mapInfo.getTitle());
+
+  useEffect(() => {
+    if (state === 'active-edition') {
+      DesignerKeyboard.pause();
+    } else {
+      DesignerKeyboard.resume();
+    }
+  }, [state]);
+
+  const handleOnMouseEnter = (): void => {
+    if (state === 'disabled') {
+      setState('enabled');
+    }
+  };
+
+  const handleOnMouseLeave = (): void => {
+    if (state === 'enabled') {
+      setState('disabled');
+    }
+  };
+  const handleOnClick = (): void => {
+    setState('active-edition');
+  };
+
+  const handleSubmit = (e: React.KeyboardEvent): void => {
+    console.log(e.key);
+    if (e.key === 'Enter') {
+      setState('disabled');
+    }
+  };
+
+  return (
+    <Tooltip title={title}>
+      <span onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
+        {state === 'disabled' ? (
+          <Typography
+            className="truncated"
+            variant="body1"
+            component="div"
+            sx={{ marginX: '1.5rem' }}
+          >
+            {title}
+          </Typography>
+        ) : (
+          <TitleInput
+            style={{ width: title.length + 'ch' }}
+            onClick={handleOnClick}
+            value={title}
+            onKeyDown={handleSubmit}
+            onChange={(event) => setTitle(event.target.value)}
+            id="title-input"
+          />
+        )}
+      </span>
+    </Tooltip>
+  );
+};
+
+export default MapTitle;

packages/editor/src/components/action-widget/pane/map-title/styled.ts

@@ -0,0 +1,34 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import styled from 'styled-components';
+
+export const TitleInput = styled.input`
+  margin: 0;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+  margin-left: 1.3rem;
+  margin-right: 1.3rem;
+  background-color: #f5f5f5;
+  border: 1px gray dashed;
+  &:focus {
+    border: 1px black solid;
+  }
+`;

packages/editor/test/playground/index.html

@@ -41,6 +41,7 @@
 			<li><a href="/viewmode.html?id=complex">Complex</a></li>
 			<li><a href="/viewmode.html?id=huge">Huge</a></li>
 			<li><a href="/viewmode.html?id=icon-sample">Icon Sample</a></li>
+			<li><a href="/viewmode.html?id=emoji">UTF-8 Emoji</a></li>
 		</ul>
 		<p><span class="section">Editor Mode:</span>Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.</p>
 		<ul>

packages/editor/test/playground/map-render/samples/emoji.wxml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<map version="tango"><topic central="true" text="😀😀😀😀😀😀😀😀"/></map>

packages/webapp/src/classes/client/rest-client/index.ts

@@ -227,9 +227,9 @@ export default class RestClient implements Client {
     const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
       this.axios
         .post(
-          `${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(model.title)}&description=${
-            model.description ? model.description : ''
-          }`,
+          `${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(
+            model.title,
+          )}&description=${encodeURIComponent(model.description ? model.description : '')}`,
           model.content,
           { headers: { 'Content-Type': 'application/xml' } },
         )
@@ -382,9 +382,9 @@ export default class RestClient implements Client {
     const handler = (success: (mapId: number) => void, reject: (error: ErrorInfo) => void) => {
       this.axios
         .post(
-          `${this.baseUrl}/c/restful/maps?title=${model.title}&description=${
-            model.description ? model.description : ''
-          }`,
+          `${this.baseUrl}/c/restful/maps?title=${encodeURIComponent(
+            model.title,
+          )}&description=${encodeURIComponent(model.description ? model.description : '')}`,
           null,
           { headers: { 'Content-Type': 'application/json' } },
         )