@centreon/ui 24.9.4 → 24.9.6

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

@@ -1,11 +1,4 @@
-import { useEffect, useState } from 'react';
-
-import {
-  AutoLinkPlugin,
-  LinkMatcher
-} from '@lexical/react/LexicalAutoLinkPlugin';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
+import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
 
 interface LinkAttributes {
   rel?: null | string;
@@ -20,21 +13,19 @@ interface LinkMatcherResult {
   url: string;
 }
 
-const urlMatcher =
+const URL_MATCHER =
   /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
-const emailMatcher =
+const EMAIL_MATCHER =
   /(([^<>()[\]\\.,;:\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> => [
+const MATCHERS = [
   (text: string): LinkMatcherResult | null => {
-    const match = urlMatcher.exec(text);
+    const match = URL_MATCHER.exec(text);
 
     return (
       match && {
-        attributes: openLinkInNewTab
-          ? { rel: 'noreferrer', target: '_blank' }
-          : undefined,
+        attributes: { rel: 'noreferrer', target: '_blank' },
         index: match.index,
         length: match[0].length,
         text: match[0],
@@ -43,7 +34,7 @@ const getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
     );
   },
   (text: string): LinkMatcherResult | null => {
-    const match = emailMatcher.exec(text);
+    const match = EMAIL_MATCHER.exec(text);
 
     return (
       match && {
@@ -56,47 +47,8 @@ const getMatchers = (openLinkInNewTab: boolean): Array<LinkMatcher> => [
   }
 ];
 
-const AutoCompleteLinkPlugin = ({
-  openLinkInNewTab
-}: {
-  openLinkInNewTab: boolean;
-}): JSX.Element | null => {
-  const [editor] = useLexicalComposerContext();
-  const [hasFocus, setFocus] = useState(false);
-
-  useEffect(
-    () =>
-      editor.registerCommand(
-        BLUR_COMMAND,
-        () => {
-          setFocus(false);
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-    []
-  );
-
-  useEffect(
-    () =>
-      editor.registerCommand(
-        FOCUS_COMMAND,
-        () => {
-          setFocus(true);
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-    []
-  );
-
-  if (!hasFocus) {
-    return null;
-  }
-
-  return <AutoLinkPlugin matchers={getMatchers(openLinkInNewTab)} />;
+const AutoCompleteLinkPlugin = (): JSX.Element => {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
 };
 
 export default AutoCompleteLinkPlugin;

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -1,34 +1,33 @@
 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 { dec, equals, gt, isNil, replace } from 'ramda';
+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 { equals, isNil } from 'ramda';
 
+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 InputField from '../../InputField/Text';
+import { getSelectedNode } from '../utils/getSelectedNode';
+import { getDOMRangeRect } from '../utils/getDOMRangeRect';
 import { editLinkModeAtom, isInsertingLinkAtom, linkValueAtom } from '../atoms';
+import InputField from '../../InputField/Text';
 import {
-  labelEditLink,
   labelInputLink,
-  labelSavedLink
+  labelSavedLink,
+  labelEditLink
 } from '../translatedLabels';
-import { getDOMRangeRect } from '../utils/getDOMRangeRect';
-import { getSelectedNode } from '../utils/getSelectedNode';
 
 interface FloatingLinkEditorPluginProps {
   editable: boolean;
-  openLinkInNewTab: boolean;
 }
 
 interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
@@ -37,7 +36,6 @@ interface UseFloatingLinkEditorProps extends FloatingLinkEditorPluginProps {
 
 interface FloatingLinkEditorProps {
   editor: LexicalEditor;
-  openLinkInNewTab: boolean;
 }
 
 interface TooltipPosition {
@@ -46,8 +44,7 @@ interface TooltipPosition {
 }
 
 const FloatingLinkEditor = ({
-  editor,
-  openLinkInNewTab
+  editor
 }: FloatingLinkEditorProps): JSX.Element | null => {
   const nativeSelection = window.getSelection();
   const rootElement = editor.getRootElement();
@@ -56,7 +53,6 @@ const FloatingLinkEditor = ({
     x: 0,
     y: 0
   });
-  const [editedUrl, setEditedUrl] = useState('');
 
   const [editMode, setEditMode] = useAtom(editLinkModeAtom);
   const [linkUrl, setLinkUrl] = useAtom(linkValueAtom);
@@ -66,47 +62,24 @@ const FloatingLinkEditor = ({
   const acceptOrCancelNewLinkValue = useCallback(
     (event): void => {
       const { value } = event.target;
-
-      event.preventDefault();
-
       if (event.key === 'Enter') {
+        event.preventDefault();
+
         if (value !== '') {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-            target: openLinkInNewTab ? '_blank' : undefined,
+            target: '_blank',
             url: value
           });
         }
         setEditMode(false);
-      }
-
-      if (event.key === 'Escape') {
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
         setEditMode(false);
       }
     },
     [setEditMode, setLinkUrl]
   );
 
-  const enterInEditMode = useCallback(() => {
-    setEditedUrl(linkUrl);
-    setEditMode(true);
-  }, [linkUrl]);
-
-  const changeValue = useCallback((event): void => {
-    const { value } = event.target;
-
-    const matched = value.match(/https?:\/\//g);
-
-    if (gt(matched.length, 1)) {
-      setEditedUrl(
-        replace(matched.join(''), matched[dec(matched.length)], value)
-      );
-
-      return;
-    }
-
-    setEditedUrl(value);
-  }, []);
-
   useEffect(() => {
     const isPositioned =
       rangeRect && (!equals(rangeRect.x, 0) || !equals(rangeRect.y, 0));
@@ -133,12 +106,7 @@ const FloatingLinkEditor = ({
   const yOffset = tooltipPosition.y - rootElementY + 30;
 
   return (
-    <Popper
-      open
-      anchorEl={rootElement}
-      placement="top-start"
-      sx={{ zIndex: 'tooltip' }}
-    >
+    <Popper open anchorEl={rootElement} placement="top-start">
       <Paper
         sx={{
           transform: `translate3d(${xOffset}px, ${
@@ -149,10 +117,9 @@ const FloatingLinkEditor = ({
         {editMode ? (
           <InputField
             autoFocus
-            dataTestId="InputLinkField"
+            defaultValue={linkUrl}
             label={t(labelInputLink)}
             size="small"
-            value={editedUrl}
             onBlur={(event): void => {
               const { value } = event.target;
 
@@ -163,8 +130,7 @@ const FloatingLinkEditor = ({
               }
               setEditMode(false);
             }}
-            onChange={changeValue}
-            onKeyUp={acceptOrCancelNewLinkValue}
+            onKeyDown={acceptOrCancelNewLinkValue}
           />
         ) : (
           <Box component="span" sx={{ margin: '10px' }}>
@@ -172,7 +138,7 @@ const FloatingLinkEditor = ({
               aria-label={labelSavedLink}
               href={linkUrl}
               rel="noreferrer noopener"
-              target={openLinkInNewTab ? '_blank' : undefined}
+              target="_blank"
               variant="button"
             >
               {linkUrl}
@@ -181,7 +147,7 @@ const FloatingLinkEditor = ({
               aria-label={labelEditLink}
               size="small"
               sx={{ marginLeft: '5px' }}
-              onClick={enterInEditMode}
+              onClick={(): void => setEditMode(true)}
             >
               <EditIcon fontSize="small" />
             </IconButton>
@@ -194,8 +160,7 @@ const FloatingLinkEditor = ({
 
 const useFloatingTextFormatToolbar = ({
   editor,
-  editable,
-  openLinkInNewTab
+  editable
 }: UseFloatingLinkEditorProps): JSX.Element | null => {
   const [isText, setIsText] = useState(false);
   const isInsertingLink = useAtomValue(isInsertingLinkAtom);
@@ -270,18 +235,15 @@ const useFloatingTextFormatToolbar = ({
     return null;
   }
 
-  return (
-    <FloatingLinkEditor editor={editor} openLinkInNewTab={openLinkInNewTab} />
-  );
+  return <FloatingLinkEditor editor={editor} />;
 };
 
 const FloatingActionsToolbarPlugin = ({
-  editable,
-  openLinkInNewTab
+  editable
 }: FloatingLinkEditorPluginProps): JSX.Element | null => {
   const [editor] = useLexicalComposerContext();
 
-  return useFloatingTextFormatToolbar({ editable, editor, openLinkInNewTab });
+  return useFloatingTextFormatToolbar({ editable, editor });
 };
 
 export default FloatingActionsToolbarPlugin;