@blocknote/core 0.1.0-alpha.3

package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.tsx

@@ -0,0 +1,266 @@
+import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
+import * as pv from "prosemirror-view";
+import { EditorView } from "prosemirror-view";
+import ReactDOM from "react-dom";
+import { DragHandle } from "./components/DragHandle";
+
+const serializeForClipboard = (pv as any).__serializeForClipboard;
+// code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
+
+let horizontalAnchor: number;
+function getHorizontalAnchor() {
+  if (!horizontalAnchor) {
+    const firstBlockGroup = document.querySelector(
+      ".ProseMirror > [class*='blockGroup']"
+    ) as HTMLElement | undefined; // first block group node
+    if (firstBlockGroup) {
+      horizontalAnchor = absoluteRect(firstBlockGroup).left;
+    } // Anchor to the left of the first block group
+  }
+  return horizontalAnchor;
+}
+
+export function createRect(rect: DOMRect) {
+  let newRect = {
+    left: rect.left + document.body.scrollLeft,
+    top: rect.top + document.body.scrollTop,
+    width: rect.width,
+    height: rect.height,
+    bottom: 0,
+    right: 0,
+  };
+  newRect.bottom = newRect.top + newRect.height;
+  newRect.right = newRect.left + newRect.width;
+  return newRect;
+}
+
+export function absoluteRect(element: HTMLElement) {
+  return createRect(element.getBoundingClientRect());
+}
+
+function blockPosAtCoords(
+  coords: { left: number; top: number },
+  view: EditorView
+) {
+  let block = getDraggableBlockFromCoords(coords, view);
+
+  if (block && block.node.nodeType === 1) {
+    // TODO: this uses undocumented PM APIs? do we need this / let's add docs?
+    const docView = (view as any).docView;
+    let desc = docView.nearestDesc(block.node, true);
+    if (!desc || desc === docView) {
+      return null;
+    }
+    return desc.posBefore;
+  }
+  return null;
+}
+
+function getDraggableBlockFromCoords(
+  coords: { left: number; top: number },
+  view: EditorView
+) {
+  let pos = view.posAtCoords(coords);
+  if (!pos) {
+    return undefined;
+  }
+  let node = view.domAtPos(pos.pos).node as HTMLElement;
+
+  if (node === view.dom) {
+    // mouse over root
+    return undefined;
+  }
+
+  while (
+    node &&
+    node.parentNode &&
+    node.parentNode !== view.dom &&
+    !node.hasAttribute?.("data-id")
+  ) {
+    node = node.parentNode as HTMLElement;
+  }
+  if (!node) {
+    return undefined;
+  }
+  return { node, id: node.getAttribute("data-id")! };
+}
+
+function dragStart(e: DragEvent, view: EditorView) {
+  if (!e.dataTransfer) {
+    return;
+  }
+
+  let coords = {
+    left: view.dom.clientWidth / 2, // take middle of editor
+    top: e.clientY,
+  };
+  let pos = blockPosAtCoords(coords, view);
+  if (pos != null) {
+    view.dispatch(
+      view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
+    );
+
+    let slice = view.state.selection.content();
+    let { dom, text } = serializeForClipboard(view, slice);
+
+    e.dataTransfer.clearData();
+    e.dataTransfer.setData("text/html", dom.innerHTML);
+    e.dataTransfer.setData("text/plain", text);
+    e.dataTransfer.effectAllowed = "move";
+    const block = getDraggableBlockFromCoords(coords, view);
+    e.dataTransfer.setDragImage(block?.node as any, 0, 0);
+    view.dragging = { slice, move: true };
+  }
+}
+
+export const createDraggableBlocksPlugin = () => {
+  let dropElement: HTMLElement | undefined;
+
+  const WIDTH = 48;
+
+  // When true, the drag handle with be anchored at the same level as root elements
+  // When false, the drag handle with be just to the left of the element
+  const horizontalPosAnchoredAtRoot = true;
+
+  let menuShown = false;
+  let addClicked = false;
+
+  const onShow = () => {
+    menuShown = true;
+  };
+  const onHide = () => {
+    menuShown = false;
+  };
+  const onAddClicked = () => {
+    addClicked = true;
+  };
+
+  return new Plugin({
+    key: new PluginKey("DraggableBlocksPlugin"),
+    view(editorView) {
+      dropElement = document.createElement("div");
+      dropElement.setAttribute("draggable", "true");
+      dropElement.style.position = "absolute";
+      dropElement.style.height = "24px"; // default height
+      document.body.append(dropElement);
+
+      dropElement.addEventListener("dragstart", (e) =>
+        dragStart(e, editorView)
+      );
+
+      return {
+        // update(view, prevState) {},
+        destroy() {
+          if (!dropElement) {
+            throw new Error("unexpected");
+          }
+          dropElement.parentNode!.removeChild(dropElement);
+          dropElement = undefined;
+        },
+      };
+    },
+    props: {
+      // handleDOMEvents: {
+
+      // },
+      //   handleDOMEvents: {
+      //     dragend(view, event) {
+      //       //   setTimeout(() => {
+      //       //     let node = document.querySelector(".ProseMirror-hideselection");
+      //       //     if (node) {
+      //       //       node.classList.remove("ProseMirror-hideselection");
+      //       //     }
+      //       //   }, 50);
+      //       return true;
+      //     },
+      handleKeyDown(_view, _event) {
+        if (!dropElement) {
+          throw new Error("unexpected");
+        }
+        menuShown = false;
+        addClicked = false;
+        ReactDOM.render(<></>, dropElement);
+        return false;
+      },
+      handleDOMEvents: {
+        // drag(view, event) {
+        //   // event.dataTransfer!.;
+        //   return false;
+        // },
+        mouseleave(_view, _event: any) {
+          if (!dropElement) {
+            throw new Error("unexpected");
+          }
+          // TODO
+          // dropElement.style.display = "none";
+          return true;
+        },
+        mousedown(_view, _event: any) {
+          if (!dropElement) {
+            throw new Error("unexpected");
+          }
+          menuShown = false;
+          addClicked = false;
+          ReactDOM.render(<></>, dropElement);
+          return false;
+        },
+        mousemove(view, event: any) {
+          if (!dropElement) {
+            throw new Error("unexpected");
+          }
+
+          if (menuShown || addClicked) {
+            // The submenu is open, don't move draghandle
+            // Or if the user clicked the add button
+            return true;
+          }
+          const coords = {
+            left: view.dom.clientWidth / 2, // take middle of editor
+            top: event.clientY,
+          };
+          const block = getDraggableBlockFromCoords(coords, view);
+
+          if (!block) {
+            console.warn("Perhaps we should hide element?");
+            return true;
+          }
+
+          // I want the dim of the blocks content node
+          // because if the block contains other blocks
+          // Its dims change, moving the position of the drag handle
+          const blockContent = block.node.firstChild as HTMLElement;
+
+          if (!blockContent) {
+            return true;
+          }
+
+          const rect = absoluteRect(blockContent);
+          const win = block.node.ownerDocument.defaultView!;
+          const dropElementRect = dropElement.getBoundingClientRect();
+          const left =
+            (horizontalPosAnchoredAtRoot ? getHorizontalAnchor() : rect.left) -
+            WIDTH +
+            win.pageXOffset;
+          rect.top +=
+            rect.height / 2 - dropElementRect.height / 2 + win.pageYOffset;
+
+          dropElement.style.left = left + "px";
+          dropElement.style.top = rect.top + "px";
+
+          ReactDOM.render(
+            <DragHandle
+              onShow={onShow}
+              onHide={onHide}
+              onAddClicked={onAddClicked}
+              key={block.id + ""}
+              view={view}
+              coords={coords}
+            />,
+            dropElement
+          );
+          return true;
+        },
+      },
+    },
+  });
+};

package/src/extensions/DraggableBlocks/components/DragHandle.module.css

@@ -0,0 +1,33 @@
+.dragHandle {
+  /* position: absolute; */
+  transition: opacity 300ms;
+  width: 20px;
+  height: 24px;
+
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 10 24"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  cursor: grab;
+  border-radius: 3px;
+}
+
+/* .dragHandle:active {
+  cursor:  !important;
+} */
+
+.dragHandleAdd:hover,
+.dragHandle:hover {
+  background-color: #eee;
+}
+
+.dragHandleAdd {
+  /* position: absolute; */
+  transition: opacity 300ms;
+
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  cursor: pointer;
+  border-radius: 3px;
+}

package/src/extensions/DraggableBlocks/components/DragHandle.tsx

@@ -0,0 +1,108 @@
+import Tippy from "@tippyjs/react";
+import { TextSelection } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { useState } from "react";
+import { AiOutlinePlus } from "react-icons/ai";
+import { findBlock } from "../../Blocks/helpers/findBlock";
+import { SlashMenuPluginKey } from "../../SlashMenu/SlashMenuExtension";
+import styles from "./DragHandle.module.css";
+import DragHandleMenu from "./DragHandleMenu";
+
+export const DragHandle = (props: {
+  view: EditorView;
+  coords: { left: number; top: number };
+  onShow?: () => void;
+  onHide?: () => void;
+  onAddClicked?: () => void;
+}) => {
+  const [clicked, setClicked] = useState<boolean>(false);
+  const [deleted, setDeleted] = useState<boolean>(false);
+
+  const onDelete = () => {
+    const pos = props.view.posAtCoords(props.coords);
+    if (!pos) {
+      return;
+    }
+    const currentBlock = findBlock(
+      TextSelection.create(props.view.state.doc, pos.pos)
+    );
+
+    if (currentBlock) {
+      if (props.view.dispatch) {
+        props.view.dispatch(
+          props.view.state.tr.deleteRange(
+            currentBlock.pos,
+            currentBlock.pos + currentBlock.node.nodeSize
+          )
+        );
+      }
+      setDeleted(true);
+    }
+  };
+
+  const onAddClick = () => {
+    setClicked(true);
+    if (props.onAddClicked) {
+      props.onAddClicked();
+    }
+    const pos = props.view.posAtCoords(props.coords);
+    if (!pos) {
+      return;
+    }
+    const currentBlock = findBlock(
+      TextSelection.create(props.view.state.doc, pos.pos)
+    );
+    if (!currentBlock) {
+      return;
+    }
+    // If current blocks content is empty dont create a new block
+    if (currentBlock.node.firstChild?.textContent.length !== 0) {
+      // Create new block after current block
+      const endOfBlock = currentBlock.pos + currentBlock.node.nodeSize;
+      let newBlock =
+        props.view.state.schema.nodes["tccontent"].createAndFill()!;
+      props.view.state.tr.insert(endOfBlock, newBlock);
+      props.view.dispatch(props.view.state.tr.insert(endOfBlock, newBlock));
+      props.view.dispatch(
+        props.view.state.tr.setSelection(
+          new TextSelection(props.view.state.tr.doc.resolve(endOfBlock + 1))
+        )
+      );
+    }
+    // Focus and activate slash menu
+    props.view.focus();
+    props.view.dispatch(
+      props.view.state.tr.scrollIntoView().setMeta(SlashMenuPluginKey, {
+        // TODO import suggestion plugin key
+        activate: true,
+        type: "drag",
+      })
+    );
+  };
+
+  if (deleted || clicked) {
+    return null;
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <AiOutlinePlus
+        size={24}
+        fillOpacity={"0.25"}
+        className={styles.dragHandleAdd}
+        onClick={onAddClick}
+      />
+      <Tippy
+        content={<DragHandleMenu onDelete={onDelete} />}
+        placement={"left"}
+        trigger={"click"}
+        duration={0}
+        interactiveBorder={100}
+        interactive={true}
+        onShow={props.onShow}
+        onHide={props.onHide}>
+        <div className={styles.dragHandle} />
+      </Tippy>
+    </div>
+  );
+};

package/src/extensions/DraggableBlocks/components/DragHandleMenu.module.css

@@ -0,0 +1,10 @@
+.menuList {
+  color: var(--N800);
+  background-color: white;
+  border: 1px solid var(--N40);
+  box-shadow: 0px 4px 8px rgba(9, 30, 66, 0.25),
+    0px 0px 1px rgba(9, 30, 66, 0.31);
+  border-radius: 4px;
+  max-width: 320;
+  margin: 16px auto;
+}

package/src/extensions/DraggableBlocks/components/DragHandleMenu.tsx

@@ -0,0 +1,18 @@
+import styles from "./DragHandleMenu.module.css";
+import { MenuGroup, ButtonItem } from "@atlaskit/menu";
+
+type Props = {
+  onDelete: () => void;
+};
+
+const DragHandleMenu = (props: Props) => {
+  return (
+    <div className={styles.menuList}>
+      <MenuGroup>
+        <ButtonItem onClick={props.onDelete}>Delete</ButtonItem>
+      </MenuGroup>
+    </div>
+  );
+};
+
+export default DragHandleMenu;

package/src/extensions/Hyperlinks/HyperlinkMark.tsx

@@ -0,0 +1,16 @@
+import { Link } from "@tiptap/extension-link";
+import { createHyperlinkMenuPlugin } from "./HyperlinkMenuPlugin";
+
+/**
+ * This custom link includes a special menu for editing/deleting/opening the link.
+ * The menu will be triggered by hovering over the link with the mouse,
+ * or by moving the cursor inside the link text
+ */
+const Hyperlink = Link.extend({
+  priority: 500,
+  addProseMirrorPlugins() {
+    return [...(this.parent?.() || []), createHyperlinkMenuPlugin()];
+  },
+});
+
+export default Hyperlink;

package/src/extensions/Hyperlinks/HyperlinkMenuPlugin.tsx

@@ -0,0 +1,200 @@
+import Tippy from "@tippyjs/react";
+import { getMarkRange } from "@tiptap/core";
+import { Mark, ResolvedPos } from "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import ReactDOM from "react-dom";
+import rootStyles from "../../root.module.css";
+import { HyperlinkBasicMenu } from "./menus/HyperlinkBasicMenu";
+import {
+  HyperlinkEditMenu,
+  HyperlinkEditorMenuProps,
+} from "./menus/HyperlinkEditMenu";
+const PLUGIN_KEY = new PluginKey("HyperlinkMenuPlugin");
+
+/**
+ * a helper function that wraps a Tippy around a HyperlinkEditMenu
+ * @param props has {text, url, onSubmit and anchorPos}
+ * @returns a Tippy instance whose content is a editMenu
+ */
+const tippyWrapperHyperlinkEditMenu = (
+  props: HyperlinkEditorMenuProps & {
+    anchorPos: { left: number; top: number; width: number; height: number };
+  }
+) => {
+  const { anchorPos, ...editMenuProps } = props;
+  return (
+    <Tippy
+      getReferenceClientRect={() => anchorPos as any}
+      content={<HyperlinkEditMenu {...editMenuProps}></HyperlinkEditMenu>}
+      interactive={true}
+      interactiveBorder={30}
+      showOnCreate={true}
+      trigger={"click"} // so that we don't hide on mouse out
+      hideOnClick
+      className={rootStyles.bnRoot}
+      appendTo={document.body}>
+      <div></div>
+    </Tippy>
+  );
+};
+
+export const createHyperlinkMenuPlugin = () => {
+  // as we always use Tippy appendTo(document.body), we can just create an element
+  // that we use for ReactDOM, but it isn't used anywhere (except by React internally)
+  const fakeRenderTarget = document.createElement("div");
+
+  let hoveredLink: HTMLAnchorElement | undefined;
+  let menuState: "cursor-based" | "mouse-based" | "hidden" = "hidden";
+  let nextTippyKey = 0;
+
+  return new Plugin({
+    key: PLUGIN_KEY,
+    view() {
+      return {
+        update: async (view, _prevState) => {
+          const selection = view.state.selection;
+          if (selection.from !== selection.to) {
+            // don't show menu when we have an active selection
+            if (menuState !== "hidden") {
+              menuState = "hidden";
+              ReactDOM.render(<></>, fakeRenderTarget);
+            }
+            return;
+          }
+
+          let pos: number | undefined;
+          let resPos: ResolvedPos | undefined;
+          let linkMark: Mark | undefined;
+          let basedOnCursorPos = false;
+          if (hoveredLink) {
+            pos = view.posAtDOM(hoveredLink.firstChild!, 0);
+            resPos = view.state.doc.resolve(pos);
+            // based on https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/helpers/getMarkRange.ts
+            const start = resPos.parent.childAfter(resPos.parentOffset).node;
+            linkMark = start?.marks.find((m) => m.type.name.startsWith("link"));
+          }
+
+          if (
+            !linkMark &&
+            (view.hasFocus() || menuState === "cursor-based") // prevents re-opening menu after submission. Only open cursor-based menu if editor has focus
+          ) {
+            // no hovered link mark, try get from cursor position
+            pos = selection.from;
+            resPos = view.state.doc.resolve(pos);
+            const start = resPos.parent.childAfter(resPos.parentOffset).node;
+            linkMark = start?.marks.find((m) => m.type.name.startsWith("link"));
+            basedOnCursorPos = true;
+          }
+
+          if (!linkMark || !pos || !resPos) {
+            // The mouse-based popup takes care of hiding itself (tippy)
+            // Because the cursor-based popup is has "showOnCreate", we want to hide it manually
+            // if the cursor moves way
+            if (menuState === "cursor-based") {
+              menuState = "hidden";
+              ReactDOM.render(<></>, fakeRenderTarget);
+            }
+            return;
+          }
+
+          const range = getMarkRange(resPos, linkMark.type, linkMark.attrs);
+          if (!range) {
+            return;
+          }
+          const text = view.state.doc.textBetween(range.from, range.to);
+          const url = linkMark.attrs.href;
+
+          const anchorPos = {
+            // use the 'median' position of the range
+            ...view.coordsAtPos(Math.round((range.from + range.to) / 2)),
+            height: 0, // needed to satisfy types
+            width: 0,
+          };
+
+          const foundLinkMark = linkMark; // typescript workaround for event handlers
+
+          // A URL has to begin with http(s):// to be interpreted as an absolute path
+          const editHandler = (href: string, text: string) => {
+            menuState = "hidden";
+            ReactDOM.render(<></>, fakeRenderTarget);
+
+            // update the mark with new href
+            (foundLinkMark as any).attrs = { ...foundLinkMark.attrs, href }; // TODO: invalid assign to attrs
+            // insertText actually replaces the range with text
+            const tr = view.state.tr.insertText(text, range.from, range.to);
+            // the former range.to is no longer in use
+            tr.addMark(range.from, range.from + text.length, foundLinkMark);
+            view.dispatch(tr);
+          };
+
+          const removeHandler = () => {
+            view.dispatch(
+              view.state.tr
+                .removeMark(range.from, range.to, foundLinkMark.type)
+                .setMeta("preventAutolink", true)
+            );
+          };
+
+          // the hyperlinkEditMenu will be positioned at the same place as hyperlinkBasicMenu
+          // this is achieved by making this editMenu a property of the basicMenu below
+          // and returning this editMenu directly by introducing another isEditing state
+          const hyperlinkEditMenu = tippyWrapperHyperlinkEditMenu({
+            anchorPos,
+            text,
+            url,
+            onSubmit: editHandler,
+          });
+
+          const hyperlinkBasicMenu = (
+            <Tippy
+              key={nextTippyKey + ""} // it could be tippy has "hidden" itself after mouseout. We use a key to get a new instance with a clean state.
+              getReferenceClientRect={() => anchorPos as any}
+              content={
+                <HyperlinkBasicMenu
+                  editMenu={hyperlinkEditMenu}
+                  removeHandler={removeHandler}
+                  href={url}></HyperlinkBasicMenu>
+              }
+              onHide={() => {
+                nextTippyKey++;
+                menuState = "hidden";
+              }}
+              aria={{ expanded: false }}
+              interactive={true}
+              interactiveBorder={30}
+              triggerTarget={hoveredLink}
+              showOnCreate={basedOnCursorPos}
+              appendTo={document.body}>
+              <div></div>
+            </Tippy>
+          );
+          ReactDOM.render(hyperlinkBasicMenu, fakeRenderTarget);
+          menuState = basedOnCursorPos ? "cursor-based" : "mouse-based";
+        },
+      };
+    },
+
+    props: {
+      handleDOMEvents: {
+        // update view when an <a> is hovered over
+        mouseover(view, event: any) {
+          const newHoveredLink =
+            event.target instanceof HTMLAnchorElement &&
+            event.target.nodeName === "A"
+              ? event.target
+              : undefined;
+
+          if (newHoveredLink !== hoveredLink) {
+            // dispatch a meta transaction to make sure the view gets updated
+            hoveredLink = newHoveredLink;
+
+            view.dispatch(
+              view.state.tr.setMeta(PLUGIN_KEY, { hoveredLinkChanged: true })
+            );
+          }
+          return false;
+        },
+      },
+    },
+  });
+};