feat(richtext-lexical): improve draggable block indicator style and animations

Author: AlessioGr

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/getNodeCloseToPoint.ts

@@ -15,7 +15,7 @@ const Indeterminate = 0
 
 type Props = {
   anchorElem: HTMLElement
-  cache_treshold?: number
+  cache_threshold?: number
   editor: LexicalEditor
   /** fuzzy makes the search not exact. If no exact match found, find the closes node instead of returning null */
   fuzzy?: boolean
@@ -51,7 +51,7 @@ function isPointClose(previous: Point, current: Point, threshold: number = 20):
 export function getNodeCloseToPoint(props: Props): Output {
   const {
     anchorElem,
-    cache_treshold = 20,
+    cache_threshold = 20,
     editor,
     fuzzy = false,
     horizontalOffset = 0,
@@ -63,13 +63,13 @@ export function getNodeCloseToPoint(props: Props): Output {
 
   // Use cache
   if (
-    cache_treshold > 0 &&
+    cache_threshold > 0 &&
     cache.props &&
     cache.result &&
     cache.props.fuzzy === props.fuzzy &&
     cache.props.horizontalOffset === props.horizontalOffset &&
     cache.props.useEdgeAsDefault === props.useEdgeAsDefault &&
-    isPointClose(cache.props.point, props.point, cache_treshold)
+    isPointClose(cache.props.point, props.point, cache_threshold)
   ) {
     if (verbose) {
       //console.log('Returning cached result')

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.scss

@@ -53,3 +53,11 @@
     transition: none;
   }
 }
+
+
+.rich-text-lexical {
+  .ContentEditable__root > * {
+    will-change: margin-top, margin-bottom;
+    transition: margin-top 0.08s, margin-bottom 0.08s;
+  }
+}

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx

@@ -55,8 +55,11 @@ function hideTargetLine(
     targetLineElem.style.opacity = '0'
   }
   if (lastTargetBlockElem) {
-    lastTargetBlockElem.style.opacity = '1'
-    lastTargetBlockElem.style.transform = 'translate(0, 0)'
+    lastTargetBlockElem.style.opacity = ''
+    lastTargetBlockElem.style.transform = ''
+    // Delete marginBottom and marginTop values we set
+    lastTargetBlockElem.style.marginBottom = ''
+    lastTargetBlockElem.style.marginTop = ''
     //lastTargetBlockElem.style.border = 'none'
   }
 }
@@ -139,7 +142,7 @@ function useDraggableBlockMenu(
         isFoundNodeEmptyParagraph,
       } = getNodeCloseToPoint({
         anchorElem,
-        cache_treshold: 0,
+        cache_threshold: 0,
         editor,
         horizontalOffset: -distanceFromScrollerElem,
         point: new Point(event.x, event.y),

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts

@@ -36,20 +36,39 @@ export function setTargetLine(
     lineTop += targetBlockElemHeight / 2
   }
 
-  const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT
+  const targetElemTranslate = 0
+  let targetElemTranslate2 = 0
+
+  if (!isFoundNodeEmptyParagraph) {
+    if (isBelow) {
+      targetElemTranslate2 = -TARGET_LINE_HALF_HEIGHT
+    } else {
+      targetElemTranslate2 = TARGET_LINE_HALF_HEIGHT
+    }
+  }
+
+  let top = lineTop - anchorTop + targetElemTranslate2
+  if (!isBelow) {
+    top -= TARGET_LINE_HALF_HEIGHT * 2
+  }
   const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE
 
   targetLineElem.style.transform = `translate(${left}px, ${top}px)`
   targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`
   targetLineElem.style.opacity = '.4'
 
-  targetBlockElem.style.opacity = '0.4'
+  /**
+   * Move around element below or above the line (= the target / targetBlockElem)
+   */
+  //targetBlockElem.style.opacity = '0.4'
   if (!isFoundNodeEmptyParagraph) {
     // move lastTargetBlockElem down 50px to make space for targetLineElem (which is 50px height)
+    targetBlockElem.style.transform = `translate(0, ${targetElemTranslate}px)`
     if (isBelow) {
-      targetBlockElem.style.transform = `translate(0, ${-TARGET_LINE_HALF_HEIGHT / 1.9}px)`
+      // add to existing marginBottom plus the height of targetLineElem
+      targetBlockElem.style.marginBottom = TARGET_LINE_HALF_HEIGHT * 2 + 'px'
     } else {
-      targetBlockElem.style.transform = `translate(0, ${TARGET_LINE_HALF_HEIGHT / 1.9}px)`
+      targetBlockElem.style.marginTop = TARGET_LINE_HALF_HEIGHT * 2 + 'px'
     }
   }
 
@@ -59,8 +78,12 @@ export function setTargetLine(
   }
 
   if (lastTargetBlockElem && lastTargetBlockElem !== targetBlockElem) {
-    lastTargetBlockElem.style.opacity = '1'
-    lastTargetBlockElem.style.transform = 'translate(0, 0)'
+    lastTargetBlockElem.style.opacity = ''
+    lastTargetBlockElem.style.transform = ''
+
+    // Delete marginBottom and marginTop values we set
+    lastTargetBlockElem.style.marginBottom = ''
+    lastTargetBlockElem.style.marginTop = ''
     //lastTargetBlockElem.style.border = 'none'
   }
 }