@pareto-engineering/design-system 4.0.0-alpha.76 → 4.0.0-alpha.78

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

@@ -1,356 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react'
-
-import {
-  useEffect,
-  useState,
-  useCallback,
-  useRef,
-} from 'react'
-
-import {
-  $getSelection,
-  $isRangeSelection,
-  FORMAT_TEXT_COMMAND,
-  FORMAT_ELEMENT_COMMAND,
-  UNDO_COMMAND,
-  REDO_COMMAND,
-  COMMAND_PRIORITY_NORMAL,
-  createCommand,
-} from 'lexical'
-import {
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-  $isListNode,
-  ListNode,
-} from '@lexical/list'
-import {
-  $isAtNodeEnd,
-} from '@lexical/selection'
-import {
-  $isLinkNode,
-  TOGGLE_LINK_COMMAND,
-} 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
-
-const componentClassName = 'toolbar'
-
-const getSelectedNode = (selection) => {
-  const { anchor, focus } = selection
-  const anchorNode = selection.anchor.getNode()
-  const focusNode = selection.focus.getNode()
-  if (anchorNode === focusNode) {
-    return anchorNode
-  }
-  const isBackward = selection.isBackward()
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode
-  }
-  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)
-  const [isItalic, setIsItalic] = useState(false)
-  const [isStrikethrough, setIsStrikethrough] = useState(false)
-  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') {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND)
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND)
-    }
-  }
-
-  const formatNumberedList = () => {
-    if (blockType !== 'ol') {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND)
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND)
-    }
-  }
-
-  const formatLink = useCallback(() => {
-    if (!isLink) {
-      // eslint-disable-next-line no-alert
-      const path = prompt('Enter the full URL. Ex: https://www.example.com')
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, path)
-    } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-    }
-  }, [editor, isLink])
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection()
-
-    // Check list selection
-    if ($isRangeSelection(selection)) {
-      const anchorNode = selection.anchor.getNode()
-      const element = anchorNode.getKey() === 'root'
-        ? anchorNode
-        : anchorNode.getTopLevelElementOrThrow()
-      if ($isListNode(element)) {
-        const parentList = $getNearestNodeOfType(anchorNode, ListNode)
-        const type = parentList ? parentList.getTag() : element.getTag()
-        setBlockType(type)
-      } else {
-        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'))
-      setIsStrikethrough(selection.hasFormat('strikethrough'))
-      setIsUnderline(selection.hasFormat('underline'))
-      setIsLink(selection.hasFormat('link'))
-
-      // Check links
-      const node = getSelectedNode(selection)
-      const parent = node.getParent()
-      if ($isLinkNode(parent) || $isLinkNode(node)) {
-        setIsLink(true)
-      } else {
-        setIsLink(false)
-      }
-    }
-  }, [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(() => {
-        updateToolbar()
-      })
-    }),
-  ), [updateToolbar, editor])
-
-  const dispatchUpdateColor = useCallback((e, payload) => {
-    e.stopPropagation()
-    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload)
-  }, [editor])
-
-  return (
-    <div className={`${baseClassName} ${componentClassName}`}>
-      <div className="group">
-        <button
-          type="button"
-          className={isBold ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}
-        >
-          <span className="icon">
-            |
-          </span>
-        </button>
-        <button
-          type="button"
-          className={isItalic ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}
-        >
-          <span className="icon">
-            &#125;
-          </span>
-        </button>
-        <button
-          type="button"
-          className={isUnderline ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}
-        >
-          <span className="icon">
-            ~
-          </span>
-        </button>
-        <button
-          type="button"
-          className={isStrikethrough ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
-        >
-          <span className="icon">
-            ?
-          </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}
-          onClick={() => formatLink()}
-        >
-          <span className="icon">
-            &#93;
-          </span>
-        </button>
-        <button
-          type="button"
-          className={blockType === 'ul' ? 'active' : undefined}
-          onClick={() => formatBulletList()}
-        >
-          <span className="icon">
-            .
-          </span>
-        </button>
-        <button
-          type="button"
-          className={blockType === 'ol' ? 'active' : undefined}
-          onClick={() => formatNumberedList()}
-        >
-          <span className="icon">
-            -
-          </span>
-        </button>
-      </div>
-
-      <div className="group">
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')}
-        >
-          <span className="icon">
-            ^
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')}
-        >
-          <span className="icon">
-            _
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')}
-        >
-          <span className="icon">
-            `
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')}
-        >
-          <span className="icon">
-            &#123;
-          </span>
-        </button>
-      </div>
-
-      <div className="group">
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(UNDO_COMMAND)}
-        >
-          <span className="icon">
-            \
-          </span>
-        </button>
-        <button
-          type="button"
-          className="flip"
-          onClick={() => editor.dispatchCommand(REDO_COMMAND)}
-        >
-          <span className="icon">
-            \
-          </span>
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default Toolbar

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

@@ -1,3 +0,0 @@
-export { default as Toolbar } from './Toolbar'
-export { default as TreeViewPlugin } from './TreeViewPlugin'
-export { default as StopPropagationPlugin } from './StopPropagationPlugin'