Feature/articles: Move blocks around

src/components/NFTArticle/SlateEditor/RenderElements.module.scss

@@ -29,6 +29,7 @@
       color: var(--color-white);
     }
 
+
     &>div {
       width: 30px;
     }
@@ -45,7 +46,6 @@
   }
 
   &:not(.opened) {
-
     &:hover,
     &.buttons_visible {
       .buttons {
@@ -54,6 +54,24 @@
       }
     }
   }
+
+  &.insertAbove {
+    &::after {
+      top: 0;
+   }
+  }
+
+  &.dragOver {
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: var(--color-secondary);
+    }
+  }
 }
 
 .add_block_wrapper {
@@ -65,4 +83,4 @@
   .add_block {
     transform: translateX(-50%);
   }
-}
+}

src/components/NFTArticle/SlateEditor/RenderElements.tsx

@@ -1,7 +1,13 @@
 import style from "./RenderElements.module.scss"
 import cs from "classnames"
 import { ReactEditor, RenderElementProps, useSlateStatic } from "slate-react"
-import React, { PropsWithChildren, useEffect, useMemo, useState } from "react"
+import React, {
+  PropsWithChildren,
+  DragEvent,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import { AddBlock } from "./UI/AddBlock"
 import { getArticleBlockDefinition } from "./Blocks"
 import { Path, Transforms, Node } from "slate"
@@ -37,7 +43,11 @@ function EditableElementWrapper({
   const [showAddBlock, setShowAddBlock] = useState<boolean>(false)
   const [showExtraMenu, setShowExtraMenu] = useState<boolean>(false)
   const [showSettings, setShowSettings] = useState<boolean>(false)
+  const [isDragOver, setIsDragOver] = useState<boolean>(false)
+  const [isDragging, setIsDragging] = useState<boolean>(false)
+  const [insertAbove, setInsertAbove] = useState<boolean>(false)
 
+  const draggableRef = useRef(null)
   const editor = useSlateStatic()
   const path = ReactEditor.findPath(editor, element)
 
@@ -72,6 +82,81 @@ function EditableElementWrapper({
     }
   }
 
+  const handleStartDragging = () => {
+    if (!draggableRef.current) return
+    ;(draggableRef.current as HTMLElement).setAttribute("draggable", "true")
+    setIsDragging(true)
+  }
+
+  const handleEndDragging = () => {
+    if (!draggableRef.current) return
+    ;(draggableRef.current as HTMLElement).setAttribute("draggable", "false")
+    setIsDragging(false)
+  }
+
+  const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
+    if (!isDragging) return
+    const domElement = (e.target as HTMLElement).children[0] as HTMLElement
+    if (!domElement) return
+    ReactEditor.deselect(editor)
+    const fromPath = ReactEditor.findPath(editor, element)
+    e.dataTransfer.setDragImage(domElement, domElement.offsetWidth, 0)
+    e.dataTransfer.setData("text/plain", JSON.stringify(fromPath))
+  }
+
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    const elemPath = ReactEditor.findPath(editor, element)
+    // For the first block we want to be able to drop elements above it
+    if (elemPath[0] === 0) {
+      const { height, top } = (e.target as HTMLElement).getBoundingClientRect()
+      if (e.clientY < top + height / 2) {
+        setInsertAbove(true)
+      } else {
+        setInsertAbove(false)
+      }
+    } else if (insertAbove) {
+      setInsertAbove(false)
+    }
+    setIsDragOver(true)
+  }
+
+  const handleDragLeave = () => {
+    setIsDragOver(false)
+  }
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(false)
+    const data = e.dataTransfer.getData("text/plain")
+    if (!data) return
+    const at = JSON.parse(e.dataTransfer.getData("text/plain")) as Path
+    const targetPath = ReactEditor.findPath(editor, element)
+    const insertAfter = !insertAbove && at[0] > targetPath[0]
+    Transforms.moveNodes(editor, {
+      at,
+      to: insertAfter ? Path.next(targetPath) : targetPath,
+    })
+  }
+
+  const handleMoveDown = () => {
+    const at = ReactEditor.findPath(editor, element)
+    if (at[0] === editor.children.length - 1) return
+    const to = Path.next(at)
+    Transforms.moveNodes(editor, { at, to })
+    Transforms.select(editor, to)
+    Transforms.collapse(editor)
+  }
+
+  const handleMoveUp = () => {
+    const at = ReactEditor.findPath(editor, element)
+    if (at[0] === 0) return
+    const to = Path.previous(at)
+    Transforms.moveNodes(editor, { at, to })
+    Transforms.select(editor, to)
+    Transforms.collapse(editor)
+  }
+
   const deleteNode = () => {
     Transforms.removeNodes(editor, {
       at: path,
@@ -98,9 +183,17 @@ function EditableElementWrapper({
 
   return (
     <div
+      ref={draggableRef}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDragEnd={handleEndDragging}
+      onDrop={handleDrop}
       className={cs(style.element_wrapper, {
         [style.opened]: showAddBlock || showExtraMenu,
         [style.buttons_visible]: selected,
+        [style.dragOver]: isDragOver,
+        [style.insertAbove]: insertAbove,
       })}
     >
       {children}
@@ -118,6 +211,7 @@ function EditableElementWrapper({
           <div />
         )}
         <button
+          className={style.add_button}
           type="button"
           contentEditable={false}
           onClick={withStopPropagation(() => setShowAddBlock(true))}
@@ -132,6 +226,31 @@ function EditableElementWrapper({
         >
           <i className="fa-solid fa-ellipsis" aria-hidden />
         </button>
+        <button
+          onPointerDown={handleStartDragging}
+          onPointerUp={handleEndDragging}
+          type="button"
+          contentEditable={false}
+          tabIndex={-1}
+        >
+          <i className="fa-solid fa-grip-dots" />
+        </button>
+        <button
+          type="button"
+          contentEditable={false}
+          tabIndex={-1}
+          onClick={handleMoveUp}
+        >
+          <i className="fa-solid fa-arrow-up" />
+        </button>
+        <button
+          type="button"
+          contentEditable={false}
+          tabIndex={-1}
+          onClick={handleMoveDown}
+        >
+          <i className="fa-solid fa-arrow-down" />
+        </button>
       </div>
       {showAddBlock && (
         <>

src/containers/Article/Editor/AutosaveArticle.tsx

@@ -40,6 +40,7 @@ const _AutosaveArticle = ({
         minted: isMinted,
       },
     })
+
     const article = loadLocalArticle(id);
     if (JSON.stringify(article.form) !== JSON.stringify(articleFormState)) {
       setStatus('failed')