feat(richtext-lexical): various UX and performance improvements (#6467)

AlessioGr · web-flow · commit 78579ed2bdd5 · 2024-05-22T14:42:17.000-04:00
diff --git a/packages/email-nodemailer/README.md b/packages/email-nodemailer/README.md
@@ -9,7 +9,7 @@ It abstracts all of the email functionality that was in Payload by default in 2.
 ## Installation
 
 ```sh
-pnpm add @payloadcms/email-nodemailer` nodemailer
+pnpm add @payloadcms/email-nodemailer nodemailer
 ```
 
 ## Usage
diff --git a/packages/email-resend/README.md b/packages/email-resend/README.md
@@ -5,7 +5,7 @@ This adapter allows you to send emails using the [Resend](https://resend.com) RE
 ## Installation
 
 ```sh
-pnpm add @payloadcms/email-resend`
+pnpm add @payloadcms/email-resend
 ```
 
 ## Usage
diff --git a/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx b/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx
@@ -52,7 +52,7 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
 
   const [stateData, setStateData] = useState<{} | (LinkFields & { text: string })>({})
 
-  const { closeModal, toggleModal } = useModal()
+  const { closeModal, isModalOpen, toggleModal } = useModal()
   const editDepth = useEditDepth()
   const [isLink, setIsLink] = useState(false)
   const [selectedNodes, setSelectedNodes] = useState<LexicalNode[]>([])
@@ -319,48 +319,50 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
           )}
         </div>
       </div>
-      <LinkDrawer
-        drawerSlug={drawerSlug}
-        handleModalSubmit={(fields: FormState, data: Data) => {
-          closeModal(drawerSlug)
+      {isModalOpen(drawerSlug) && (
+        <LinkDrawer
+          drawerSlug={drawerSlug}
+          handleModalSubmit={(fields: FormState, data: Data) => {
+            closeModal(drawerSlug)
 
-          const newLinkPayload = data as LinkFields & { text: string }
+            const newLinkPayload = data as LinkFields & { text: string }
 
-          const bareLinkFields: LinkFields = {
-            ...newLinkPayload,
-          }
-          delete bareLinkFields.text
-
-          // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).
-          editor.update(() => {
-            const selection = $getSelection()
-            let linkParent = null
-            if ($isRangeSelection(selection)) {
-              linkParent = getSelectedNode(selection).getParent()
-            } else {
-              if (selectedNodes.length) {
-                linkParent = selectedNodes[0].getParent()
-              }
+            const bareLinkFields: LinkFields = {
+              ...newLinkPayload,
             }
+            delete bareLinkFields.text
+
+            // See: https://github.com/facebook/lexical/pull/5536. This updates autolink nodes to link nodes whenever a change was made (which is good!).
+            editor.update(() => {
+              const selection = $getSelection()
+              let linkParent = null
+              if ($isRangeSelection(selection)) {
+                linkParent = getSelectedNode(selection).getParent()
+              } else {
+                if (selectedNodes.length) {
+                  linkParent = selectedNodes[0].getParent()
+                }
+              }
 
-            if (linkParent && $isAutoLinkNode(linkParent)) {
-              const linkNode = $createLinkNode({
-                fields: bareLinkFields,
-              })
-              linkParent.replace(linkNode, true)
-            }
-          })
-
-          // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to
-          // it being applied to the auto link node instead of the link node.
-          editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-            fields: bareLinkFields,
-            selectedNodes,
-            text: newLinkPayload.text,
-          })
-        }}
-        stateData={stateData}
-      />
+              if (linkParent && $isAutoLinkNode(linkParent)) {
+                const linkNode = $createLinkNode({
+                  fields: bareLinkFields,
+                })
+                linkParent.replace(linkNode, true)
+              }
+            })
+
+            // Needs to happen AFTER a potential auto link => link node conversion, as otherwise, the updated text to display may be lost due to
+            // it being applied to the auto link node instead of the link node.
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
+              fields: bareLinkFields,
+              selectedNodes,
+              text: newLinkPayload.text,
+            })
+          }}
+          stateData={stateData}
+        />
+      )}
     </React.Fragment>
   )
 }
diff --git a/packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx b/packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx
@@ -113,33 +113,14 @@ function useAddBlockHandle(
 
   useEffect(() => {
     if (menuRef.current && hoveredElement?.node) {
-      editor.getEditorState().read(() => {
-        // Check if blockNode is an empty text node
-        let isEmptyParagraph = true
-        if (
-          hoveredElement.node.getType() !== 'paragraph' ||
-          hoveredElement.node.getTextContent() !== ''
-        ) {
-          isEmptyParagraph = false
-        }
-
-        setHandlePosition(
-          hoveredElement?.elem,
-          menuRef.current,
-          anchorElem,
-          isEmptyParagraph
-            ? blockHandleHorizontalOffset
-            : blockHandleHorizontalOffset - (editorConfig?.admin?.hideGutter ? 20 : 0),
-        )
-      })
+      setHandlePosition(
+        hoveredElement?.elem,
+        menuRef.current,
+        anchorElem,
+        blockHandleHorizontalOffset,
+      )
     }
-  }, [
-    anchorElem,
-    hoveredElement,
-    editor,
-    blockHandleHorizontalOffset,
-    editorConfig?.admin?.hideGutter,
-  ])
+  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])
 
   const handleAddClick = useCallback(
     (event) => {
diff --git a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.scss b/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.scss
@@ -45,7 +45,7 @@
 .draggable-block-target-line {
   pointer-events: none;
   background: var(--theme-elevation-200);
-  border: 1px solid var(--theme-elevation-650);
+  //border: 1px solid var(--theme-elevation-650);
   border-radius: 4px;
   height: 50px;
   position: absolute;
diff --git a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx b/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx
@@ -57,11 +57,10 @@ function hideTargetLine(
   }
   if (lastTargetBlockElem) {
     lastTargetBlockElem.style.opacity = ''
-    lastTargetBlockElem.style.transform = ''
     // Delete marginBottom and marginTop values we set
     lastTargetBlockElem.style.marginBottom = ''
     lastTargetBlockElem.style.marginTop = ''
-    //lastTargetBlockElem.style.border = 'none'
+    //lastTargetBlock.style.border = 'none'
   }
 }
 
@@ -77,10 +76,15 @@ function useDraggableBlockMenu(
   const debugHighlightRef = useRef<HTMLDivElement>(null)
   const isDraggingBlockRef = useRef<boolean>(false)
   const [draggableBlockElem, setDraggableBlockElem] = useState<HTMLElement | null>(null)
-  const [lastTargetBlockElem, setLastTargetBlockElem] = useState<HTMLElement | null>(null)
+  const [lastTargetBlock, setLastTargetBlock] = useState<{
+    boundingBox?: DOMRect
+    elem: HTMLElement | null
+    isBelow: boolean
+  }>(null)
+
   const { editorConfig } = useEditorConfigContext()
 
-  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : -8
+  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -44 : -8
 
   useEffect(() => {
     /**
@@ -211,11 +215,15 @@ function useDraggableBlockMenu(
       }
 
       if (draggableBlockElem !== targetBlockElem) {
-        setTargetLine(
-          blockHandleHorizontalOffset,
+        const { isBelow, willStayInSamePosition } = setTargetLine(
+          editorConfig?.admin?.hideGutter ? '0px' : '3rem',
+          blockHandleHorizontalOffset +
+            (editorConfig?.admin?.hideGutter
+              ? menuRef?.current?.getBoundingClientRect()?.width ?? 0
+              : -menuRef?.current?.getBoundingClientRect()?.width ?? 0),
           targetLineElem,
           targetBlockElem,
-          lastTargetBlockElem,
+          lastTargetBlock,
           pageY,
           anchorElem,
           event,
@@ -227,12 +235,23 @@ function useDraggableBlockMenu(
         // Calling preventDefault() adds the green plus icon to the cursor,
         // indicating that the drop is allowed.
         event.preventDefault()
+
+        if (!willStayInSamePosition) {
+          setLastTargetBlock({
+            boundingBox: targetBlockElem.getBoundingClientRect(),
+            elem: targetBlockElem,
+            isBelow,
+          })
+        }
       } else {
-        hideTargetLine(targetLineElem, lastTargetBlockElem)
+        hideTargetLine(targetLineElem, lastTargetBlock?.elem)
+        setLastTargetBlock({
+          boundingBox: targetBlockElem.getBoundingClientRect(),
+          elem: targetBlockElem,
+          isBelow: false,
+        })
       }
 
-      setLastTargetBlockElem(targetBlockElem)
-
       return true
     }
 
@@ -313,6 +332,51 @@ function useDraggableBlockMenu(
         if (draggableBlockElem !== null) {
           setDraggableBlockElem(null)
         }
+
+        // find all previous elements with lexical-block-highlighter class and remove them
+        const allPrevHighlighters = document.querySelectorAll('.lexical-block-highlighter')
+        allPrevHighlighters.forEach((highlighter) => {
+          highlighter.remove()
+        })
+
+        const newInsertedElem = editor.getElementByKey(draggedNode.getKey())
+        setTimeout(() => {
+          // add new temp html element to newInsertedElem with the same height and width and the class block-selected
+          // to highlight the new inserted element
+          const newInsertedElemRect = newInsertedElem.getBoundingClientRect()
+
+          const highlightElem = document.createElement('div')
+          highlightElem.className = 'lexical-block-highlighter'
+
+          // if html data-theme is dark, set the highlighter color to white
+          if (document.documentElement.getAttribute('data-theme') === 'dark') {
+            highlightElem.style.backgroundColor = 'white'
+          } else {
+            highlightElem.style.backgroundColor = 'black'
+          }
+
+          highlightElem.style.transition = 'opacity 0.1s ease-in-out'
+          highlightElem.style.zIndex = '1'
+          highlightElem.style.pointerEvents = 'none'
+          highlightElem.style.boxSizing = 'border-box'
+          highlightElem.style.borderRadius = '4px'
+          highlightElem.style.position = 'absolute'
+          document.body.appendChild(highlightElem)
+
+          highlightElem.style.opacity = '0.1'
+
+          highlightElem.style.height = `${newInsertedElemRect.height + 8}px`
+          highlightElem.style.width = `${newInsertedElemRect.width + 8}px`
+          highlightElem.style.top = `${newInsertedElemRect.top + window.scrollY - 4}px`
+          highlightElem.style.left = `${newInsertedElemRect.left - 4}px`
+
+          setTimeout(() => {
+            highlightElem.style.opacity = '0'
+            setTimeout(() => {
+              highlightElem.remove()
+            }, 1000)
+          }, 3000)
+        }, 120)
       })
 
       return true
@@ -332,8 +396,9 @@ function useDraggableBlockMenu(
     blockHandleHorizontalOffset,
     anchorElem,
     editor,
-    lastTargetBlockElem,
+    lastTargetBlock,
     draggableBlockElem,
+    editorConfig?.admin?.hideGutter,
   ])
 
   function onDragStart(event: ReactDragEvent<HTMLDivElement>): void {
@@ -355,7 +420,7 @@ function useDraggableBlockMenu(
 
   function onDragEnd(): void {
     isDraggingBlockRef.current = false
-    hideTargetLine(targetLineRef.current, lastTargetBlockElem)
+    hideTargetLine(targetLineRef.current, lastTargetBlock?.elem)
   }
 
   return createPortal(
diff --git a/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts b/packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts
diff --git a/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.scss b/packages/richtext-lexical/src/field/lexical/ui/ContentEditable.scss
diff --git a/packages/ui/src/elements/Tooltip/index.scss b/packages/ui/src/elements/Tooltip/index.scss
