fix(Designer): Floating Link Doesn't Disappear On Outer Click (#4108)

* unshow floating link on outer clicked & editor/mainEditor are not focused * fixed edit mode disabled once outer focus issue
Azure · Feb 14, 2024 · 2481280 · 2481280
1 parent 4031b05
commit 2481280
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/libs/designer-ui/src/lib/editor/base/index.tsx b/libs/designer-ui/src/lib/editor/base/index.tsx
@@ -229,7 +229,9 @@ export const BaseEditor = ({
         {tokens && !htmlEditor ? (
           <PastePlugin segmentMapping={tokenMapping} loadParameterValueFromString={loadParameterValueFromString} />
         ) : null}
-        {htmlEditor && floatingAnchorElem ? <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} /> : null}
+        {htmlEditor && floatingAnchorElem ? (
+          <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} isMainEditorFocused={isEditorFocused} />
+        ) : null}
         {children}
         {tokens && isTokenPickerOpened ? getTokenPicker(editorId, labelId ?? '', tokenPickerMode, valueType, setIsTokenPickerOpened) : null}
       </div>

diff --git a/libs/designer-ui/src/lib/editor/base/plugins/FloatingLinkEditor.tsx b/libs/designer-ui/src/lib/editor/base/plugins/FloatingLinkEditor.tsx
@@ -4,6 +4,7 @@ import type { IButtonStyles } from '@fluentui/react';
 import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $findMatchingParent, mergeRegister } from '@lexical/utils';
+import { useOutsideClick } from '@microsoft/utils-logic-apps';
 import type { GridSelection, LexicalEditor, NodeSelection, RangeSelection } from 'lexical';
 import {
   $getSelection,
@@ -35,11 +36,13 @@ function FloatingLinkEditor({
   isLink,
   setIsLink,
   anchorElem,
+  isMainEditorFocused,
 }: {
   editor: LexicalEditor;
   isLink: boolean;
   setIsLink: Dispatch<boolean>;
   anchorElem: HTMLElement;
+  isMainEditorFocused: boolean;
 }): JSX.Element {
   const { isInverted } = useTheme();
   const editorRef = useRef<HTMLDivElement | null>(null);
@@ -48,6 +51,31 @@ function FloatingLinkEditor({
   const [editedLinkUrl, setEditedLinkUrl] = useState('');
   const [isEditMode, setEditMode] = useState(false);
   const [lastSelection, setLastSelection] = useState<RangeSelection | GridSelection | NodeSelection | null>(null);
+  const [showFloatingLink, setShowFloatingLink] = useState(isMainEditorFocused);
+
+  useEffect(() => {
+    if (isMainEditorFocused) {
+      setShowFloatingLink(isMainEditorFocused);
+    }
+  }, [isMainEditorFocused]);
+
+  useOutsideClick([editorRef], () => {
+    if (!isMainEditorFocused && showFloatingLink) {
+      setShowFloatingLink(false);
+      setEditMode(false);
+    }
+  });
+
+  useEffect(() => {
+    editor.registerCommand<boolean>(
+      TOGGLE_LINK_COMMAND,
+      (_) => {
+        setShowFloatingLink(true);
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, showFloatingLink]);
 
   const updateLinkEditor = useCallback(() => {
     const selection = $getSelection();
@@ -184,7 +212,7 @@ function FloatingLinkEditor({
 
   return (
     <div ref={editorRef} className={css('msla-html-link-editor', isInverted && 'inverted')}>
-      {!isLink ? null : isEditMode ? (
+      {!showFloatingLink || !isLink ? null : isEditMode ? (
         <div className="msla-html-link-view">
           <TextField
             styles={{ root: { padding: '4px', width: '80%' } }}
@@ -249,7 +277,15 @@ function FloatingLinkEditor({
   );
 }
 
-const FloatingLinkEditorToolbar = ({ editor, anchorElem }: { editor: LexicalEditor; anchorElem: HTMLElement }): JSX.Element => {
+const FloatingLinkEditorToolbar = ({
+  editor,
+  anchorElem,
+  isMainEditorFocused,
+}: {
+  editor: LexicalEditor;
+  anchorElem: HTMLElement;
+  isMainEditorFocused: boolean;
+}): JSX.Element => {
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
 
@@ -285,13 +321,25 @@ const FloatingLinkEditorToolbar = ({ editor, anchorElem }: { editor: LexicalEdit
   }, [editor, updateToolbar]);
 
   return createPortal(
-    <FloatingLinkEditor editor={activeEditor} isLink={isLink} anchorElem={anchorElem} setIsLink={setIsLink} />,
+    <FloatingLinkEditor
+      editor={activeEditor}
+      isLink={isLink}
+      anchorElem={anchorElem}
+      isMainEditorFocused={isMainEditorFocused}
+      setIsLink={setIsLink}
+    />,
     anchorElem
   );
 };
 
-export default function FloatingLinkEditorPlugin({ anchorElem = document.body }: { anchorElem?: HTMLElement }): JSX.Element | null {
+export default function FloatingLinkEditorPlugin({
+  anchorElem = document.body,
+  isMainEditorFocused,
+}: {
+  anchorElem?: HTMLElement;
+  isMainEditorFocused: boolean;
+}): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
 
-  return <FloatingLinkEditorToolbar editor={editor} anchorElem={anchorElem} />;
+  return <FloatingLinkEditorToolbar editor={editor} isMainEditorFocused={isMainEditorFocused} anchorElem={anchorElem} />;
 }