@centreon/ui 24.11.14 → 24.11.21

package/src/RichTextEditor/plugins/ToolbarPlugin/BlockButtons.tsx

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $createHeadingNode,
+  $isHeadingNode,
+  HeadingTagType
+} from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $findMatchingParent, mergeRegister } from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_CRITICAL,
+  SELECTION_CHANGE_COMMAND
+} from 'lexical';
+import { T, always, cond, equals, isNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import TextSizeIcon from '@mui/icons-material/TextFields';
+
+import { Menu } from '../../../components';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+interface Props {
+  disabled: boolean;
+}
+
+const blockTypeToBlockName = {
+  h3: 'Huge',
+  h5: 'Large',
+  h6: 'Small',
+  paragraph: 'Normal'
+};
+
+const blockTypes = ['h3', 'h5', 'paragraph', 'h6'];
+
+const blockTypeOptions = blockTypes.map((blockType) => ({
+  id: blockType,
+  name: blockTypeToBlockName[blockType]
+}));
+
+const BlockButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const [blockType, setBlockType] =
+    useState<keyof typeof blockTypeToBlockName>('paragraph');
+
+  const [editor] = useLexicalComposerContext();
+
+  const formatParagraph = (): void => {
+    editor.update(() => {
+      const selection = $getSelection();
+      $setBlocksType(selection, () => $createParagraphNode());
+    });
+  };
+
+  const formatHeading = (headingSize: HeadingTagType): void => {
+    if (blockType !== headingSize) {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, () => $createHeadingNode(headingSize));
+        }
+      });
+    }
+  };
+
+  const changeBlockType = (newBlockType): void => {
+    const formatFunction = cond<Array<string>, (value?) => void>([
+      [equals('h3'), always(() => formatHeading('h3'))],
+      [equals('h5'), always(() => formatHeading('h5'))],
+      [equals('h6'), always(() => formatHeading('h6'))],
+      [T, always(formatParagraph)]
+    ])(newBlockType || '');
+
+    formatFunction();
+  };
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const anchorNode = selection?.anchor.getNode();
+    const element = equals(anchorNode?.getKey(), 'root')
+      ? anchorNode
+      : $findMatchingParent(anchorNode, (e) => {
+          const parent = e.getParent();
+
+          return parent !== null && $isRootOrShadowRoot(parent);
+        }) || anchorNode?.getTopLevelElementOrThrow();
+
+    const elementKey = element?.getKey();
+    const elementDOM = editor.getElementByKey(elementKey);
+
+    if (isNil(elementDOM)) {
+      return;
+    }
+
+    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+
+    if (type in blockTypeToBlockName) {
+      setBlockType(type as keyof typeof blockTypeToBlockName);
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        updateToolbar();
+
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, updateToolbar]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      })
+    );
+  }, [editor, updateToolbar]);
+
+  return (
+    <Menu>
+      <Menu.Button
+        ariaLabel="block"
+        className={classes.button}
+        disabled={disabled}
+      >
+        <TextSizeIcon />
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        {blockTypeOptions.map(({ id, name }) => (
+          <Menu.Item
+            isActive={equals(id, blockType)}
+            key={name}
+            onClick={() => changeBlockType(id)}
+          >
+            {t(name)}
+          </Menu.Item>
+        ))}
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default BlockButtons;

package/src/RichTextEditor/plugins/ToolbarPlugin/FormatButtons.tsx

@@ -1,185 +1,124 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
-
-import { makeStyles } from 'tss-react/mui';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  EditorState,
-  FORMAT_TEXT_COMMAND,
-  RangeSelection,
-  SELECTION_CHANGE_COMMAND,
-  TextFormatType,
-  ElementNode,
-  TextNode
-} from 'lexical';
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
-import { $isAtNodeEnd } from '@lexical/selection';
-import { mergeRegister } from '@lexical/utils';
-import { useAtom } from 'jotai';
-
-import FormatBoldIcon from '@mui/icons-material/FormatBold';
-import FormatItalicIcon from '@mui/icons-material/FormatItalic';
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
-import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
-import LinkIcon from '@mui/icons-material/Link';
-import { alpha } from '@mui/material';
-
-import { IconButton } from '../../..';
-import { isInsertingLinkAtom } from '../../atoms';
-
-const LowPriority = 1;
-
-const useStyles = makeStyles()((theme) => ({
-  buttonSelected: {
-    backgroundColor: alpha(
-      theme.palette.primary.main,
-      theme.palette.action.activatedOpacity
-    )
-  },
-  container: {
-    columnGap: theme.spacing(1),
-    display: 'flex',
-    marginBottom: theme.spacing(1)
-  }
-}));
-
-const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
-  const { anchor } = selection;
-  const { 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;
-};
-
-interface Props {
-  getEditorState?: (editorState: EditorState) => void;
-}
-
-const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isUnderline, setIsUnderline] = useState(false);
-  const [isStrikeThrough, setIsStrikeThrough] = useState(false);
-  const [isLink, setIsLink] = useAtom(isInsertingLinkAtom);
-
-  const [editor] = useLexicalComposerContext();
-
-  const updateToolbar = useCallback((): void => {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-    setIsBold(selection.hasFormat('bold'));
-    setIsItalic(selection.hasFormat('italic'));
-    setIsUnderline(selection.hasFormat('underline'));
-    setIsStrikeThrough(selection.hasFormat('strikethrough'));
-
-    const node = getSelectedNode(selection);
-    const parent = node.getParent();
-    if ($isLinkNode(parent) || $isLinkNode(node)) {
-      setIsLink(true);
-    } else {
-      setIsLink(false);
-    }
-  }, [editor]);
-
-  const insertLink = useCallback(() => {
-    if (!isLink) {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
-    } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, isLink]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-
-        getEditorState?.(editorState);
-      }),
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          updateToolbar();
-
-          return false;
-        },
-        LowPriority
-      )
-    );
-  }, [editor, updateToolbar]);
-
-  const toggleTextFormat = (textFormat: TextFormatType) => (): void => {
-    editor.dispatchCommand(FORMAT_TEXT_COMMAND, textFormat);
-  };
-
-  const formatButtons = useMemo(
-    () => [
-      {
-        Icon: FormatBoldIcon,
-        isSelected: isBold,
-        onClickFunction: toggleTextFormat('bold'),
-        type: 'bold'
-      },
-      {
-        Icon: FormatItalicIcon,
-        isSelected: isItalic,
-        onClickFunction: toggleTextFormat('italic'),
-        type: 'italic'
-      },
-      {
-        Icon: FormatUnderlinedIcon,
-        isSelected: isUnderline,
-        onClickFunction: toggleTextFormat('underline'),
-        type: 'underline'
-      },
-      {
-        Icon: StrikethroughSIcon,
-        isSelected: isStrikeThrough,
-        onClickFunction: toggleTextFormat('strikethrough'),
-        type: 'strikethrough'
-      },
-      {
-        Icon: LinkIcon,
-        isSelected: isLink,
-        onClickFunction: insertLink,
-        type: 'link'
-      }
-    ],
-    [isBold, isItalic, isUnderline, isStrikeThrough, isLink]
-  );
-
-  return (
-    <>
-      {formatButtons.map(({ Icon, onClickFunction, isSelected, type }) => (
-        <IconButton
-          ariaLabel={type}
-          className={cx(isSelected && classes.buttonSelected)}
-          key={type}
-          size="medium"
-          title={type}
-          tooltipPlacement="top"
-          onClick={onClickFunction}
-        >
-          <Icon />
-        </IconButton>
-      ))}
-    </>
-  );
-};
-
-export default FormatButtons;
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import {
+  $getSelection,
+  $isRangeSelection,
+  FORMAT_TEXT_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  TextFormatType
+} from 'lexical';
+
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatTextIcon from '@mui/icons-material/FormatColorText';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
+
+import { Menu } from '../../../components';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+const LowPriority = 1;
+
+interface Props {
+  disabled: boolean;
+}
+
+const FormatButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useStyles();
+
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikeThrough, setIsStrikeThrough] = useState(false);
+
+  const [editor] = useLexicalComposerContext();
+
+  const updateToolbar = useCallback((): void => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+    setIsBold(selection.hasFormat('bold'));
+    setIsItalic(selection.hasFormat('italic'));
+    setIsUnderline(selection.hasFormat('underline'));
+    setIsStrikeThrough(selection.hasFormat('strikethrough'));
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateToolbar();
+
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const toggleTextFormat = (textFormat: TextFormatType) => (): void => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, textFormat);
+  };
+
+  const formatButtons = useMemo(
+    () => [
+      {
+        Icon: FormatBoldIcon,
+        isSelected: isBold,
+        onClickFunction: toggleTextFormat('bold'),
+        type: 'bold'
+      },
+      {
+        Icon: FormatItalicIcon,
+        isSelected: isItalic,
+        onClickFunction: toggleTextFormat('italic'),
+        type: 'italic'
+      },
+      {
+        Icon: FormatUnderlinedIcon,
+        isSelected: isUnderline,
+        onClickFunction: toggleTextFormat('underline'),
+        type: 'underline'
+      },
+      {
+        Icon: StrikethroughSIcon,
+        isSelected: isStrikeThrough,
+        onClickFunction: toggleTextFormat('strikethrough'),
+        type: 'strikethrough'
+      }
+    ],
+    [isBold, isItalic, isUnderline, isStrikeThrough]
+  );
+
+  return (
+    <Menu>
+      <Menu.Button
+        ariaLabel="format"
+        className={classes.button}
+        disabled={disabled}
+      >
+        <FormatTextIcon />
+      </Menu.Button>
+      <Menu.Items className={classes.menuItems}>
+        <div className={classes.menu}>
+          {formatButtons.map(({ Icon, onClickFunction, isSelected, type }) => (
+            <Menu.Item
+              isActive={isSelected}
+              key={type}
+              onClick={onClickFunction}
+            >
+              <Icon aria-label={type} />
+            </Menu.Item>
+          ))}
+        </div>
+      </Menu.Items>
+    </Menu>
+  );
+};
+
+export default FormatButtons;

package/src/RichTextEditor/plugins/ToolbarPlugin/LinkButton.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect } from 'react';
+
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isAtNodeEnd } from '@lexical/selection';
+import { mergeRegister } from '@lexical/utils';
+import { useAtom } from 'jotai';
+import {
+  $getSelection,
+  $isRangeSelection,
+  ElementNode,
+  RangeSelection,
+  SELECTION_CHANGE_COMMAND,
+  TextNode
+} from 'lexical';
+
+import LinkIcon from '@mui/icons-material/Link';
+
+import { IconButton } from '../../..';
+import { isInsertingLinkAtom } from '../../atoms';
+
+import { useStyles } from './ToolbarPlugin.styles';
+
+const LowPriority = 1;
+
+const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
+  const { anchor } = selection;
+  const { 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;
+};
+
+interface Props {
+  disabled: boolean;
+}
+
+const LinkButton = ({ disabled }: Props): JSX.Element => {
+  const { classes, cx } = useStyles();
+
+  const [isLink, setIsLink] = useAtom(isInsertingLinkAtom);
+
+  const [editor] = useLexicalComposerContext();
+
+  const updateToolbar = useCallback((): void => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) {
+      return;
+    }
+
+    const node = getSelectedNode(selection);
+    const parent = node.getParent();
+    if ($isLinkNode(parent) || $isLinkNode(node)) {
+      setIsLink(true);
+    } else {
+      setIsLink(false);
+    }
+  }, [editor]);
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateToolbar();
+
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  return (
+    <IconButton
+      ariaLabel="link"
+      className={cx(classes.button, { [classes.buttonSelected]: isLink })}
+      disabled={disabled}
+      key="link"
+      size="medium"
+      title="link"
+      tooltipPlacement="top"
+      onClick={insertLink}
+    >
+      <LinkIcon />
+    </IconButton>
+  );
+};
+
+export default LinkButton;