#1044 Text Tool: Add special symbols

packages/ketcher-react/src/icons/index.tsx

@@ -111,6 +111,7 @@ import UndoIcon from './files/undo.svg'
 import ZoomInIcon from './files/zoom-in.svg'
 import ZoomOutIcon from './files/zoom-out.svg'
 import FunctionalGroupsIcon from './files/functional-groups.svg'
+import TextSpecialSymbolsIcon from './files/text-special-symbols.svg'
 import Save1Icon from './files/save-1.svg'
 import Open1Icon from './files/open-1.svg'
 import ResetIcon from './files/reset.svg'
@@ -253,7 +254,8 @@ const icons = {
   '3dviewer': ThreeDViewerIcon,
   '3dviewer-white': ThreeDViewerWhiteIcon,
   debugging: DebuggingIcon,
-  'debugging-white': DebuggingWhiteIcon
+  'debugging-white': DebuggingWhiteIcon,
+  'text-special-symbols': TextSpecialSymbolsIcon
 }
 
 function emptyIcon() {

packages/ketcher-react/src/script/ui/views/modal/components/Text/SpecialSymbols/SpecialSymbolsButton.module.less

@@ -0,0 +1,63 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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 '../../../../../../../style/variables';
+@import '../../../../../../../style/mixins';
+
+.textButton {
+  .btn();
+
+  border: 0;
+  padding: 0;
+  position: relative;
+  cursor: pointer;
+  margin: 4px;
+  .button-size(large);
+
+  & > svg {
+    fill: #666;
+    transition: 0.2s;
+  }
+
+  &:hover {
+    background-image: none;
+    & > svg {
+      fill: #000;
+    }
+  }
+}
+
+.button-size(@dim) {
+  .set-size(@dim);
+
+  width: @button-size;
+  height: @button-size;
+  margin: @button-grow;
+
+  & > svg {
+    position: absolute;
+    top: 0.1em;
+    left: 0.1em;
+    font-size: @icon-size;
+    width: @icon-size;
+    height: @icon-size;
+  }
+}
+
+// stylelint-disable-next-line selector-pseudo-class-no-unknown
+:global(.smallEditor) .textButton {
+  .button-size(small);
+}

packages/ketcher-react/src/script/ui/views/modal/components/Text/SpecialSymbols/SpecialSymbolsButton.tsx

@@ -0,0 +1,75 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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 { useState } from 'react'
+import { SpecialSymbolsList } from '../SpecialSymbolsList/SpecialSymbolsList'
+import classes from './SpecialSymbolsButton.module.less'
+import Icon from '../../../../../component/view/icon'
+import { EditorState, Modifier } from 'draft-js'
+
+const SpecialSymbolsButton = ({ editorState, setEditorState, styles }) => {
+  const [showSpecialSymbols, setShowSpecialSymbols] = useState(false)
+
+  const handleClose = event => {
+    event.stopPropagation()
+    event.preventDefault()
+    setShowSpecialSymbols(false)
+  }
+
+  const closeSymbolsList = event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      handleClose(event)
+    }
+  }
+
+  const addSymbol = (e, value) => {
+    e.preventDefault()
+    const selection = editorState.getSelection()
+    const contentState = editorState.getCurrentContent()
+    let nextEditorState
+    const nextContentState = Modifier.replaceText(
+      contentState,
+      selection,
+      value,
+      styles
+    )
+    nextEditorState = EditorState.push(
+      editorState,
+      nextContentState,
+      'insert-characters'
+    )
+    setEditorState(nextEditorState)
+    setShowSpecialSymbols(false)
+  }
+
+  return (
+    <div onBlur={closeSymbolsList}>
+      <button
+        title="symbols"
+        onMouseDown={e => {
+          e.preventDefault()
+          setShowSpecialSymbols(!showSpecialSymbols)
+        }}
+        className={classes.textButton}
+      >
+        <Icon name="text-special-symbols" />
+      </button>
+      {showSpecialSymbols && <SpecialSymbolsList select={addSymbol} />}
+    </div>
+  )
+}
+
+export { SpecialSymbolsButton }

packages/ketcher-react/src/script/ui/views/modal/components/Text/SpecialSymbolsList/SpecialSymbolsList.module.less

@@ -0,0 +1,24 @@
+.window {
+  position: absolute;
+  width: 113px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  background-color: white;
+  z-index: 10;
+  height: 200px;
+  overflow: auto;
+  border-radius: 10px;
+}
+
+.button {
+  width: 30px;
+  height: 30px;
+  border: none;
+  margin: 1px;
+  background-color: transparent;
+  &:hover {
+    color: white;
+    background-color: #343434;
+  }
+}

packages/ketcher-react/src/script/ui/views/modal/components/Text/SpecialSymbolsList/SpecialSymbolsList.tsx

@@ -0,0 +1,89 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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 classes from './SpecialSymbolsList.module.less'
+
+const SpecialSymbolsList = ({ select }) => {
+  const symbols = [
+    'α',
+    'β',
+    'γ',
+    'δ',
+    'ε',
+    'ζ',
+    'η',
+    'θ',
+    'ι',
+    'κ',
+    'λ',
+    'μ',
+    'ν',
+    'ξ',
+    'ο',
+    'π',
+    'ρ',
+    'σ',
+    'τ',
+    'υ',
+    'φ',
+    'χ',
+    'ψ',
+    'ω',
+    '℃',
+    '℉',
+    'Å',
+    '°',
+    'ħ',
+    '±',
+    '‰',
+    '√',
+    '←',
+    '→',
+    '↚',
+    '↛',
+    '↔',
+    '⇌',
+    '∏',
+    '∑',
+    '∞',
+    '∂',
+    '∆',
+    '∫',
+    '≈',
+    '≠',
+    '≤',
+    '≥'
+  ]
+  return (
+    <div className={classes.window}>
+      {symbols.map((symbol, id) => {
+        return (
+          <button
+            className={classes.button}
+            key={`symbol-${id}`}
+            value={symbol}
+            onMouseDown={event => {
+              select(event, symbol)
+            }}
+          >
+            {symbol}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+export { SpecialSymbolsList }

packages/ketcher-react/src/script/ui/views/modal/components/Text/Text.module.less

@@ -22,6 +22,7 @@
   padding: 0 10px;
   box-sizing: border-box;
   word-wrap: break-word;
+  line-height: normal;
 }
 
 .controlPanel {

packages/ketcher-react/src/script/ui/views/modal/components/Text/Text.tsx

@@ -36,6 +36,7 @@ import { TextCommand } from 'ketcher-core'
 import classes from './Text.module.less'
 import { connect } from 'react-redux'
 import createStyles from 'draft-js-custom-styles'
+import { SpecialSymbolsButton } from './SpecialSymbols/SpecialSymbolsButton'
 
 const { styles, customStyleFn } = createStyles(['font-size'])
 
@@ -170,6 +171,11 @@ const Text = (props: TextProps) => {
             />
           )
         })}
+        <SpecialSymbolsButton
+          editorState={editorState}
+          setEditorState={setEditorState}
+          styles={currentStyle}
+        />
       </ul>
       <div className={classes.textEditorInput}>
         <Editor