@meta-1/editor 0.0.27

package/src/editor/control/drag-handle/index.tsx

@@ -0,0 +1,85 @@
+import { type FC, useEffect, useRef, useState } from "react";
+import { HamburgerMenuIcon, PlusIcon } from "@radix-ui/react-icons";
+import type { Editor } from "@tiptap/react";
+import classNames from "classnames";
+
+import { Action, Dropdown } from "@meta-1/design";
+import { i18n } from "../../utils/locale";
+import { useContentActions } from "./use.content.actions";
+import type { NodeData } from "./use.data";
+
+export type DragHandleControlProps = {
+  className?: string;
+  editor: Editor;
+  id: string;
+  data: NodeData;
+};
+
+export const DragHandleControl: FC<DragHandleControlProps> = (props) => {
+  const { editor, data } = props;
+  const handleRef = useRef<HTMLDivElement>(null);
+  const actions = useContentActions(editor!, data.currentNode!, data.currentPos!);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    setMenuOpen(false);
+  }, [data.currentNode, data.hidden]);
+
+  const actionClassName = "w-7 h-7 !p-0";
+  return (
+    <div className="!left-0 absolute bg-black" id={props.id} ref={handleRef} style={{ top: -1000 }}>
+      <div className="absolute right-0 flex space-x-1 pr-3">
+        <Action className={actionClassName} onClick={actions.handleAdd}>
+          <PlusIcon />
+        </Action>
+        <div className="relative">
+          <Action className={classNames(actionClassName, "relative z-1")} onClick={() => setMenuOpen(true)}>
+            <HamburgerMenuIcon />
+          </Action>
+          <Dropdown
+            align="start"
+            asChild={true}
+            className={data.hidden ? "hidden" : ""}
+            items={[
+              {
+                label: i18n("dragHandle.actions.clear"),
+                type: "item",
+                id: "clear-formatting",
+              },
+              {
+                label: i18n("dragHandle.actions.duplicate"),
+                type: "item",
+                id: "duplicate",
+              },
+              {
+                type: "separator",
+                id: "separator",
+              },
+              {
+                label: i18n("dragHandle.actions.delete"),
+                type: "item",
+                id: "delete",
+              },
+            ]}
+            modal={false}
+            onItemClick={(item) => {
+              if (item.id === "clear-formatting") {
+                actions.resetTextFormatting();
+              } else if (item.id === "duplicate") {
+                actions.duplicateNode();
+              } else if (item.id === "delete") {
+                actions.deleteNode();
+              }
+            }}
+            onOpenChange={setMenuOpen}
+            open={menuOpen}
+          >
+            <Action className={classNames(actionClassName, "invisible absolute top-0 left-0 z-0")}>
+              <HamburgerMenuIcon />
+            </Action>
+          </Dropdown>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/editor/control/drag-handle/use.content.actions.ts

@@ -0,0 +1,71 @@
+import { useCallback } from "react";
+import type { ResolvedPos } from "@tiptap/pm/model";
+import type { Editor } from "@tiptap/react";
+
+export const useContentActions = (editor: Editor, resolvedPos: ResolvedPos, nodePos: number) => {
+  const currentNode = resolvedPos?.node();
+  const currentNodePos = resolvedPos?.depth === 0 ? resolvedPos?.pos : resolvedPos?.before();
+
+  const resetTextFormatting = useCallback(() => {
+    const chain = editor.chain();
+
+    chain.setNodeSelection(currentNodePos).unsetAllMarks();
+
+    if (currentNode?.type.name !== "paragraph") {
+      chain.setParagraph();
+    }
+
+    chain.run();
+  }, [editor, currentNodePos, currentNode?.type.name]);
+
+  const duplicateNode = useCallback(() => {
+    let currentPos = currentNodePos;
+    if (["imageBlock", "imageUpload", "horizontalRule"].includes(currentNode?.type.name)) {
+      currentPos = nodePos;
+    }
+    editor
+      .chain()
+      .setMeta("hideDragHandle", true)
+      .insertContentAt(currentPos + (currentNode?.nodeSize || 0), currentNode.toJSON())
+      .run();
+  }, [editor, currentNodePos, currentNode, nodePos]);
+
+  const deleteNode = useCallback(() => {
+    let currentPos = currentNodePos;
+    if (["imageBlock", "imageUpload", "horizontalRule"].includes(currentNode?.type.name)) {
+      currentPos = nodePos;
+    }
+    editor.chain().setMeta("hideDragHandle", true).setNodeSelection(currentPos).deleteSelection().run();
+  }, [editor, currentNodePos, nodePos, currentNode?.type.name]);
+
+  const handleAdd = useCallback(() => {
+    const nodePos = resolvedPos?.depth === 0 ? resolvedPos.pos + 1 : resolvedPos.after(1);
+    const insertPos = nodePos;
+    const currentNodeIsEmptyParagraph =
+      resolvedPos?.depth === 1 && currentNode?.type.name === "paragraph" && currentNode?.content?.size === 0;
+    const focusPos = currentNodeIsEmptyParagraph ? nodePos : nodePos + 2;
+
+    editor
+      .chain()
+      .command(({ dispatch, tr, state }) => {
+        if (dispatch) {
+          if (currentNodeIsEmptyParagraph) {
+            tr.insertText("/", resolvedPos.pos, resolvedPos.pos + 1);
+          } else {
+            tr.insert(insertPos, state.schema.nodes.paragraph.create(null, [state.schema.text("/")]));
+          }
+          return dispatch(tr);
+        }
+        return true;
+      })
+      .focus(focusPos)
+      .run();
+  }, [currentNode, editor, resolvedPos]);
+
+  return {
+    resetTextFormatting,
+    duplicateNode,
+    deleteNode,
+    handleAdd,
+  };
+};

package/src/editor/control/drag-handle/use.data.ts

@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+import type { ResolvedPos } from "@tiptap/pm/model";
+
+export type NodeData = {
+  currentNode?: ResolvedPos;
+  currentPos?: number;
+  handleNodeChange: (node: ResolvedPos, nodePos: number) => void;
+  setHidden: (hidden: boolean) => void;
+  hidden: boolean;
+};
+
+export const useData = (): NodeData => {
+  const [currentNode, setCurrentNode] = useState<ResolvedPos>();
+  const [currentPos, setCurrentPos] = useState<number>();
+  const [hidden, setHidden] = useState(false);
+
+  const handleNodeChange = useCallback((node: ResolvedPos, nodePos: number) => {
+    setCurrentNode(node);
+    setCurrentPos(nodePos);
+  }, []);
+
+  return {
+    currentNode,
+    currentPos,
+    handleNodeChange,
+    setHidden,
+    hidden,
+  };
+};

package/src/editor/control/drag-handle/use.handle.id.ts

@@ -0,0 +1,6 @@
+import { useMemo, useState } from "react";
+
+export const useHandleId = () => {
+  const [handleId] = useState<number>(Date.now());
+  return useMemo(() => `drag-handle-${handleId}`, [handleId]);
+};

package/src/editor/control/index.tsx

@@ -0,0 +1,35 @@
+import type { FC, RefObject } from "react";
+import type { Editor } from "@tiptap/react";
+
+import ImageBlockMenu from "../extension/image-block/components/ImageBlockMenu";
+import ColumnsMenu from "../extension/multi-column/menus/ColumnsMenu";
+import { TableColumnMenu, TableRowMenu } from "../extension/table/menus";
+import LinkMenu from "../menus/LinkMenu/LinkMenu";
+import { TextMenu } from "../menus/TextMenu";
+import { CharacterCountControl } from "./character-count";
+import { DragHandleControl } from "./drag-handle";
+import type { NodeData } from "./drag-handle/use.data";
+
+export type EditorControllerProps = {
+  limit?: number;
+  editor: Editor | null;
+  handleId: string;
+  appendTo: RefObject<HTMLElement | null>;
+  data: NodeData;
+};
+
+export const EditorController: FC<EditorControllerProps> = (props) => {
+  const { limit, data, editor, handleId, appendTo } = props;
+  return editor ? (
+    <>
+      {limit ? <CharacterCountControl editor={editor} limit={limit} /> : null}
+      <DragHandleControl data={data} editor={editor} id={handleId} />
+      <LinkMenu appendTo={appendTo} editor={editor} />
+      <TextMenu editor={editor} />
+      <ColumnsMenu appendTo={appendTo} editor={editor} />
+      <TableRowMenu appendTo={appendTo} editor={editor} />
+      <TableColumnMenu appendTo={appendTo} editor={editor} />
+      <ImageBlockMenu appendTo={appendTo} editor={editor} />
+    </>
+  ) : null;
+};