feat: dragHandle menu

Author: Debbl

.eslintrc.json

@@ -70,7 +70,8 @@
             "fixStyle": "separate-type-imports",
             "prefer": "type-imports"
           }
-        ]
+        ],
+        "@typescript-eslint/no-explicit-any": "off"
       }
     }
   ]

package.json

@@ -35,6 +35,7 @@
     "@bytemd/react": "^1.21.0",
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/units": "^5.7.0",
+    "@floating-ui/react": "^0.27.5",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.16",
     "@mysten/dapp-kit": "^0.11.1",
@@ -136,7 +137,7 @@
     "eslint-plugin-perfectionist": "4.8.0",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-tailwindcss": "3.15.1",
-    "eslint-plugin-unused-imports": "3.0.0",
+    "eslint-plugin-unused-imports": "3.2.0",
     "husky": "9.1.7",
     "ksio": "^0.0.3",
     "lint-staged": "15.3.0",

src/shared/components/control/block-editor/BlockEditor.js src/shared/components/control/block-editor/BlockEditor.tsx

@@ -23,6 +23,8 @@ import {
   ImageResizer, handleCommandNavigation,
 } from 'novel';
 
+import type { EditorInstance} from 'novel';
+
 import { isFunction } from '../../../utils';
 import BlockEditorBubble from './bubble';
 import DragHandle from './DragHandle';
@@ -32,8 +34,15 @@ import { slashCommand, suggestionItems } from './slash';
 
 const extensions = [...defaultExtensions, slashCommand];
 
-function BlockEditor({ className, data, onChange, editable = false }) {
-  const handleUpdate = ({ editor }) => {
+interface BlockEditorProps {
+  className?: string;
+  data: any;
+  onChange: (data: any) => void;
+  editable?: boolean;
+}
+
+function BlockEditor({ className, data, onChange, editable = false }: BlockEditorProps) {
+  const handleUpdate = ({ editor }: { editor: EditorInstance }) => {
     isFunction(onChange) && onChange(editor.getJSON());
   };
 
@@ -64,7 +73,7 @@ function BlockEditor({ className, data, onChange, editable = false }) {
               {suggestionItems.map(item => (
                 <EditorCommandItem
                   value={item.title}
-                  onCommand={val => item.command(val)}
+                  onCommand={val => item.command?.(val)}
                   className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-neutral-200 aria-selected:bg-neutral-200"
                   key={item.title}
                 >

src/shared/components/control/block-editor/DragHandle.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useInteractions, useFloating, useClick } from '@floating-ui/react';
+import { useEditor } from 'novel';
+import { useState } from 'react';
+
+import type { ReactNode } from 'react';
+
+function Item({ children, onClick }: { children: ReactNode; onClick: () => void }) {
+  return (
+    <div className="cursor-pointer rounded-sm px-2 py-1 hover:bg-gray-900" onClick={onClick}>
+      {children}
+    </div>
+  );
+}
+
+function DragHandle() {
+  const { editor } = useEditor();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    placement: 'left-start',
+    open: isOpen,
+    onOpenChange: setIsOpen,
+  });
+  const click = useClick(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click]);
+
+  const insertNewBlockBelow = () => {
+    if (!editor) return;
+
+    return editor
+      .chain()
+      .focus()
+      .command(({ tr }) => {
+        const { $from } = tr.selection;
+        const insertPos = $from.after($from.depth);
+        tr.insert(insertPos, editor.schema.nodes.paragraph.create());
+
+        setIsOpen(false);
+        return true;
+      })
+      .run();
+  };
+  const deleteBlock = () => {
+    if (!editor) return;
+
+    return editor
+      .chain()
+      .focus()
+      .command(({ tr }) => {
+        const { $from } = tr.selection;
+        tr.delete($from.before($from.depth), $from.after($from.depth));
+
+        setIsOpen(false);
+        return true;
+      })
+      .run();
+  };
+
+  return (
+    <>
+      <div className="BlockEditor-dragHandle" ref={refs.setReference} {...getReferenceProps()} />
+
+      {isOpen && (
+        <div
+          className="flex flex-col gap-2 rounded-md border py-1 px-2 border-gray-300 bg-background shadow-md"
+          ref={refs.setFloating}
+          style={floatingStyles}
+          {...getFloatingProps()}
+        >
+          <Item onClick={deleteBlock}>Delete</Item>
+          <Item onClick={insertNewBlockBelow}>Insert</Item>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default DragHandle;