@pareto-engineering/design-system 4.0.0-alpha.42 → 4.0.0-alpha.43

package/src/ui/f/fields/EditorInput/common/Toolbar.jsx

@@ -1,7 +1,12 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
 
-import { useEffect, useState, useCallback } from 'react'
+import {
+  useEffect,
+  useState,
+  useCallback,
+  useRef,
+} from 'react'
 
 import {
   $getSelection,
@@ -10,6 +15,8 @@ import {
   FORMAT_ELEMENT_COMMAND,
   UNDO_COMMAND,
   REDO_COMMAND,
+  COMMAND_PRIORITY_NORMAL,
+  createCommand,
 } from 'lexical'
 import {
   INSERT_ORDERED_LIST_COMMAND,
@@ -27,6 +34,9 @@ import {
 } from '@lexical/link'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils'
+
+import { Popover } from 'ui'
+
 import styleNames from '@pareto-engineering/bem/exports'
 
 const baseClassName = styleNames.base
@@ -47,6 +57,19 @@ const getSelectedNode = (selection) => {
   return $isAtNodeEnd(anchor) ? focusNode : anchorNode
 }
 
+const defaultColor = 'var(--paragraph)'
+
+const colorOptions = [
+  'red',
+  'blue',
+  'green',
+  'yellow',
+  'orange',
+  'purple',
+  'pink',
+  'brown',
+]
+
 const Toolbar = () => {
   const [editor] = useLexicalComposerContext()
   const [isBold, setIsBold] = useState(false)
@@ -55,6 +78,9 @@ const Toolbar = () => {
   const [blockType, setBlockType] = useState('paragraph')
   const [isLink, setIsLink] = useState(false)
   const [isUnderline, setIsUnderline] = useState(false)
+  const [color, setColor] = useState(defaultColor)
+
+  const colorMenuRef = useRef(false)
 
   const formatBulletList = () => {
     if (blockType !== 'ul') {
@@ -99,6 +125,18 @@ const Toolbar = () => {
         setBlockType(element)
       }
 
+      // Check nodes for color
+      const nodes = selection.getNodes().filter((node) => node.getType() === 'text')
+      nodes.forEach((node) => {
+        const style = node.getStyle()
+        const colorProperty = style.match(/color: ([^;]+)/)
+        if (colorProperty) {
+          setColor(colorProperty[1])
+          return
+        }
+        setColor(false)
+      })
+
       // Check selection text styles
       setIsBold(selection.hasFormat('bold'))
       setIsItalic(selection.hasFormat('italic'))
@@ -117,6 +155,24 @@ const Toolbar = () => {
     }
   }, [editor])
 
+  const UPDATE_COLOR_COMMAND = createCommand()
+
+  editor.registerCommand(UPDATE_COLOR_COMMAND, (payload) => {
+    const selection = $getSelection()
+    const nodes = selection?.extract().filter((node) => node.getType() === 'text')
+    nodes?.forEach((node) => {
+      const style = node.getStyle()
+      const colorProperty = style?.match(/color: ([^;]+)/)
+      if (colorProperty && color !== payload) {
+        node.setStyle(style.replace(colorProperty[0], `color: ${payload}`))
+      } else if (colorProperty) {
+        node.setStyle(`color: ${defaultColor}`)
+      } else {
+        node.setStyle(`color: ${payload}`)
+      }
+    })
+  }, COMMAND_PRIORITY_NORMAL)
+
   useEffect(() => mergeRegister(
     editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
@@ -125,6 +181,11 @@ const Toolbar = () => {
     }),
   ), [updateToolbar, editor])
 
+  const dispatchUpdateColor = useCallback((e, payload) => {
+    e.stopPropagation()
+    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload)
+  }, [editor])
+
   return (
     <div className={`${baseClassName} ${componentClassName}`}>
       <div className="group">
@@ -164,6 +225,47 @@ const Toolbar = () => {
             ?
           </span>
         </button>
+        <button
+          type="button"
+          className={color && color !== defaultColor ? 'active color-menu-button' : 'color-menu-button'}
+          onClick={() => editor.dispatchCommand(UPDATE_COLOR_COMMAND,
+            color !== defaultColor ? defaultColor : color)}
+          ref={colorMenuRef}
+          style={{ position: 'relative' }}
+        >
+          <span
+            className="icon"
+            style={{
+              color,
+            }}
+          >
+            Q
+          </span>
+          <Popover
+            parentRef={colorMenuRef}
+          >
+            <div className="color-menu">
+              {
+                colorOptions.map((option) => (
+                  <span
+                    role="button"
+                    className="icon color-option"
+                    style={{
+                      color:option,
+                    }}
+                    onClick={(e) => dispatchUpdateColor(e, option)}
+                    onKeyDown={(e) => dispatchUpdateColor(e, option)}
+                    tabIndex={0}
+                    key={option}
+                  >
+                    o
+                  </span>
+                ))
+              }
+            </div>
+          </Popover>
+        </button>
+
         <button
           type="button"
           className={isLink ? 'active' : undefined}

package/src/ui/f/fields/EditorInput/styles.scss

@@ -15,6 +15,7 @@ $active-background: var(--hard-background-inputs);
 $default-background: var(--background-inputs);
 $default-icon-color: var(--on-background-inputs);
 $disabled-background: var(--background-inputs-30);
+$default-color-menu-padding: .5em .25em;
 
 .#{bem.$base}.editor-input {
   &.#{bem.$base}.input-wrapper {
@@ -62,6 +63,31 @@ $disabled-background: var(--background-inputs-30);
       }
     }
 
+    .color-menu-button {
+      &:hover {
+        > .#{bem.$base}.popover {
+          display: block;
+        }
+      }
+
+      > .#{bem.$base}.popover {
+        padding: $default-color-menu-padding;
+
+        .color-menu {
+          display: flex;
+          flex-wrap: wrap;
+          gap: calc($default-gap / 2);
+          justify-content: center;
+          max-width: 10em;
+          min-width: 5em;
+        }
+
+        .color-option:hover {
+          opacity: .5;
+        }
+      }
+    }
+
     > .content-editable {
       background: $default-background;
       border: $default-border;