@centreon/ui 24.8.6 → 24.8.7

package/src/RichTextEditor/initialEditorState.json

@@ -1,113 +1,113 @@
-{
-  "root": {
-    "children": [
-      {
-        "children": [
-          {
-            "detail": 0,
-            "format": 0,
-            "mode": "normal",
-            "style": "",
-            "text": "hello ",
-            "type": "text",
-            "version": 1
-          },
-          {
-            "detail": 0,
-            "format": 1,
-            "mode": "normal",
-            "style": "",
-            "text": "world",
-            "type": "text",
-            "version": 1
-          }
-        ],
-        "direction": "ltr",
-        "format": "",
-        "indent": 0,
-        "type": "paragraph",
-        "version": 1
-      },
-      {
-        "children": [
-          {
-            "detail": 0,
-            "format": 0,
-            "mode": "normal",
-            "style": "",
-            "text": "How ",
-            "type": "text",
-            "version": 1
-          },
-          {
-            "detail": 0,
-            "format": 2,
-            "mode": "normal",
-            "style": "",
-            "text": "are",
-            "type": "text",
-            "version": 1
-          },
-          {
-            "detail": 0,
-            "format": 0,
-            "mode": "normal",
-            "style": "",
-            "text": " ",
-            "type": "text",
-            "version": 1
-          },
-          {
-            "detail": 0,
-            "format": 12,
-            "mode": "normal",
-            "style": "",
-            "text": "you?",
-            "type": "text",
-            "version": 1
-          }
-        ],
-        "direction": "ltr",
-        "format": "",
-        "indent": 0,
-        "type": "paragraph",
-        "version": 1
-      },
-      {
-        "children": [
-          {
-            "children": [
-              {
-                "detail": 0,
-                "format": 0,
-                "mode": "normal",
-                "style": "",
-                "text": "centreon",
-                "type": "text",
-                "version": 1
-              }
-            ],
-            "direction": "ltr",
-            "format": "",
-            "indent": 0,
-            "type": "link",
-            "version": 1,
-            "rel": "noreferrer",
-            "target": "_blank",
-            "url": "https://centreon.com"
-          }
-        ],
-        "direction": "ltr",
-        "format": "",
-        "indent": 0,
-        "type": "paragraph",
-        "version": 1
-      }
-    ],
-    "direction": "ltr",
-    "format": "",
-    "indent": 0,
-    "type": "root",
-    "version": 1
-  }
-}
+{
+  "root": {
+    "children": [
+      {
+        "children": [
+          {
+            "detail": 0,
+            "format": 0,
+            "mode": "normal",
+            "style": "",
+            "text": "hello ",
+            "type": "text",
+            "version": 1
+          },
+          {
+            "detail": 0,
+            "format": 1,
+            "mode": "normal",
+            "style": "",
+            "text": "world",
+            "type": "text",
+            "version": 1
+          }
+        ],
+        "direction": "ltr",
+        "format": "",
+        "indent": 0,
+        "type": "paragraph",
+        "version": 1
+      },
+      {
+        "children": [
+          {
+            "detail": 0,
+            "format": 0,
+            "mode": "normal",
+            "style": "",
+            "text": "How ",
+            "type": "text",
+            "version": 1
+          },
+          {
+            "detail": 0,
+            "format": 2,
+            "mode": "normal",
+            "style": "",
+            "text": "are",
+            "type": "text",
+            "version": 1
+          },
+          {
+            "detail": 0,
+            "format": 0,
+            "mode": "normal",
+            "style": "",
+            "text": " ",
+            "type": "text",
+            "version": 1
+          },
+          {
+            "detail": 0,
+            "format": 12,
+            "mode": "normal",
+            "style": "",
+            "text": "you?",
+            "type": "text",
+            "version": 1
+          }
+        ],
+        "direction": "ltr",
+        "format": "",
+        "indent": 0,
+        "type": "paragraph",
+        "version": 1
+      },
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "detail": 0,
+                "format": 0,
+                "mode": "normal",
+                "style": "",
+                "text": "centreon",
+                "type": "text",
+                "version": 1
+              }
+            ],
+            "direction": "ltr",
+            "format": "",
+            "indent": 0,
+            "type": "link",
+            "version": 1,
+            "rel": "noreferrer",
+            "target": "_blank",
+            "url": "https://centreon.com"
+          }
+        ],
+        "direction": "ltr",
+        "format": "",
+        "indent": 0,
+        "type": "paragraph",
+        "version": 1
+      }
+    ],
+    "direction": "ltr",
+    "format": "",
+    "indent": 0,
+    "type": "root",
+    "version": 1
+  }
+}

package/src/RichTextEditor/plugins/AutoLinkPlugin/index.tsx

@@ -20,15 +20,15 @@ interface LinkMatcherResult {
   url: string;
 }
 
-const URL_MATCHER =
+const urlMatcher =
   /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
-const EMAIL_MATCHER =
+const emailMatcher =
   /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 
 const getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
   (text: string): LinkMatcherResult | null => {
-    const match = URL_MATCHER.exec(text);
+    const match = urlMatcher.exec(text);
 
     return (
       match && {
@@ -43,7 +43,7 @@ const getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
     );
   },
   (text: string): LinkMatcherResult | null => {
-    const match = EMAIL_MATCHER.exec(text);
+    const match = emailMatcher.exec(text);
 
     return (
       match && {

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -1,30 +1,30 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import {
   $getSelection,
   $isRangeSelection,
   $isTextNode,
   LexicalEditor
 } from 'lexical';
-import { mergeRegister } from '@lexical/utils';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
-import { useTranslation } from 'react-i18next';
 import { dec, equals, gt, isNil, replace } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
-import { Popper, IconButton, Paper, Link, Box } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
+import { Box, IconButton, Link, Paper, Popper } from '@mui/material';
 
-import { getSelectedNode } from '../utils/getSelectedNode';
-import { getDOMRangeRect } from '../utils/getDOMRangeRect';
-import { editLinkModeAtom, isInsertingLinkAtom, linkValueAtom } from '../atoms';
 import InputField from '../../InputField/Text';
+import { editLinkModeAtom, isInsertingLinkAtom, linkValueAtom } from '../atoms';
 import {
+  labelEditLink,
   labelInputLink,
-  labelSavedLink,
-  labelEditLink
+  labelSavedLink
 } from '../translatedLabels';
+import { getDOMRangeRect } from '../utils/getDOMRangeRect';
+import { getSelectedNode } from '../utils/getSelectedNode';
 
 interface FloatingLinkEditorPluginProps {
   editable: boolean;

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $getSelection,
   $isElementNode,
@@ -7,18 +8,17 @@ import {
   ElementFormatType,
   FORMAT_ELEMENT_COMMAND
 } from 'lexical';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { equals } from 'ramda';
 
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
 
 import { Menu } from '../../../components';
-import { getSelectedNode } from '../../utils/getSelectedNode';
 import { labelAlignPicker } from '../../translatedLabels';
+import { getSelectedNode } from '../../utils/getSelectedNode';
 
 import { useStyles } from './ToolbarPlugin.styles';
 

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

@@ -1,6 +1,13 @@
 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,
@@ -9,14 +16,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   SELECTION_CHANGE_COMMAND
 } from 'lexical';
-import {
-  $createHeadingNode,
-  $isHeadingNode,
-  HeadingTagType
-} from '@lexical/rich-text';
-import { $setBlocksType } from '@lexical/selection';
 import { T, always, cond, equals, isNil } from 'ramda';
-import { $findMatchingParent, mergeRegister } from '@lexical/utils';
 import { useTranslation } from 'react-i18next';
 
 import TextSizeIcon from '@mui/icons-material/TextFields';

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

@@ -1,124 +1,124 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  FORMAT_TEXT_COMMAND,
-  SELECTION_CHANGE_COMMAND,
-  TextFormatType
-} from 'lexical';
-import { mergeRegister } from '@lexical/utils';
-
-import FormatTextIcon from '@mui/icons-material/FormatColorText';
-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 { 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;
+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

@@ -1,18 +1,18 @@
 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,
-  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 LinkIcon from '@mui/icons-material/Link';
 

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

@@ -7,13 +7,13 @@ import {
   ListNode,
   REMOVE_LIST_COMMAND
 } from '@lexical/list';
-import { $getSelection, $isRootOrShadowRoot } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $findMatchingParent,
   $getNearestNodeOfType,
   mergeRegister
 } from '@lexical/utils';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRootOrShadowRoot } from 'lexical';
 import { equals, isNil } from 'ramda';
 import { useTranslation } from 'react-i18next';
 

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

@@ -1,5 +1,5 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { createCommand, LexicalCommand } from 'lexical';
+import { LexicalCommand, createCommand } from 'lexical';
 
 import MacrosIcon from '@mui/icons-material/TerminalOutlined';
 
@@ -28,14 +28,14 @@ const MacrosButton = ({ disabled }: Props): JSX.Element => {
 
   const [editor] = useLexicalComposerContext();
 
-  const INSERT_MACROS_COMMAND: LexicalCommand<string> = createCommand();
+  const insertMacrosCommand: LexicalCommand<string> = createCommand();
 
   const onClick = (macro): void => {
-    editor.dispatchCommand(INSERT_MACROS_COMMAND, macro);
+    editor.dispatchCommand(insertMacrosCommand, macro);
   };
 
   editor.registerCommand(
-    INSERT_MACROS_COMMAND,
+    insertMacrosCommand,
     (payload: string) => {
       if (!editor) {
         return false;