#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 Symbols from './files/symbols.svg'
 
 const icons = {
   about: AboutIcon,
@@ -217,6 +218,7 @@ const icons = {
   'shape-rectangle': ShapeRectangleIcon,
   'shape-polyline': ShapePolylineIcon,
   'shape-line': ShapeLineIcon,
+  symbols: Symbols,
   'not-found': NotFoundIcon
 }
 

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,58 @@
+/****************************************************************************
+ * 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'
+
+export interface SpecialSymbolsButtonProps {
+  select: (symbol: string) => void
+}
+
+const SpecialSymbolsButton = ({ select }: SpecialSymbolsButtonProps) => {
+  const [showSpecialSymbols, setShowSpecialSymbols] = useState(false)
+
+  const handleClose = event => {
+    event.stopPropagation()
+    event.preventDefault()
+    setShowSpecialSymbols(false)
+  }
+  const handleOpen = () => {
+    setShowSpecialSymbols(true)
+  }
+  const closeSymbolsList = event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      handleClose(event)
+    }
+  }
+  return (
+    <div onBlur={closeSymbolsList}>
+      <button
+        title="symbols"
+        onClick={handleOpen}
+        className={classes.textButton}
+      >
+        <Icon name="symbols" />
+        {showSpecialSymbols && (
+          <SpecialSymbolsList hideMenu={handleClose} select={select} />
+        )}
+      </button>
+    </div>
+  )
+}
+
+export { SpecialSymbolsButton }

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

@@ -0,0 +1,25 @@
+.window {
+  position: absolute;
+  width: 113px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  background-color: white;
+  z-index: 10;
+  height: 200px;
+  overflow: auto;
+  top: 100%;
+  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,96 @@
+/****************************************************************************
+ * 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'
+import { SpecialSymbolsButtonProps } from '../SpecialSymbols/SpecialSymbolsButton'
+import React from 'react'
+
+interface SpecialSymbolsListProps extends SpecialSymbolsButtonProps {
+  hideMenu: (event: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+const SpecialSymbolsList = ({ select, hideMenu }: SpecialSymbolsListProps) => {
+  const symbols = [
+    'α',
+    'β',
+    'γ',
+    'δ',
+    'ε',
+    'ζ',
+    'η',
+    'θ',
+    'ι',
+    'κ',
+    'λ',
+    'μ',
+    'ν',
+    'ξ',
+    'ο',
+    'π',
+    'ρ',
+    'σ',
+    'τ',
+    'υ',
+    'φ',
+    'χ',
+    'ψ',
+    'ω',
+    '℃',
+    '℉',
+    'Å',
+    '°',
+    'ħ',
+    '±',
+    '‰',
+    '√',
+    '←',
+    '→',
+    '↚',
+    '↛',
+    '↔',
+    '⇌',
+    '∏',
+    '∑',
+    '∞',
+    '∂',
+    '∆',
+    '∫',
+    '≈',
+    '≠',
+    '≤',
+    '≥'
+  ]
+  return (
+    <div className={classes.window}>
+      {symbols.map((symbol, id) => {
+        return (
+          <button
+            className={classes.button}
+            key={`symbol-${id}`}
+            value={symbol}
+            onClick={event => {
+              select(symbol)
+              hideMenu(event)
+            }}
+          >
+            {symbol}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+export { SpecialSymbolsList }

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

@@ -24,7 +24,8 @@ import {
   RichUtils,
   convertFromRaw,
   convertToRaw,
-  getDefaultKeyBinding
+  getDefaultKeyBinding,
+  Modifier
 } from 'draft-js'
 import { useCallback, useState } from 'react'
 
@@ -36,6 +37,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'])
 
@@ -99,6 +101,26 @@ const Text = (props: TextProps) => {
     setEditorState(state)
   }
 
+  const addText = value => {
+    const selection = editorState.getSelection()
+    const contentState = editorState.getCurrentContent()
+    let nextEditorState
+    if (selection.isCollapsed()) {
+      const nextContentState = Modifier.insertText(
+        contentState,
+        selection,
+        value
+      )
+      nextEditorState = EditorState.push(
+        editorState,
+        nextContentState,
+        'insert-characters'
+      )
+    }
+
+    setEditorState(nextEditorState)
+  }
+
   const currentStyle = editorState.getCurrentInlineStyle()
 
   const toggleStyle = useCallback(
@@ -170,6 +192,7 @@ const Text = (props: TextProps) => {
             />
           )
         })}
+        <SpecialSymbolsButton select={addText} />
       </ul>
       <div className={classes.textEditorInput}>
         <Editor