@meta-1/editor 0.0.27

package/src/editor/extension/block-quote-figure/QuoteCaption/QuoteCaption.ts

@@ -0,0 +1,54 @@
+import { Node } from "@tiptap/core";
+
+export const QuoteCaption = Node.create({
+  name: "quoteCaption",
+
+  group: "block",
+
+  content: "text*",
+
+  defining: true,
+
+  isolating: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: "figcaption",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["figcaption", HTMLAttributes, 0];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      // On Enter at the end of line, create new paragraph and focus
+      Enter: ({ editor }) => {
+        const {
+          state: {
+            selection: { $from, empty },
+          },
+        } = editor;
+
+        if (!empty || $from.parent.type !== this.type) {
+          return false;
+        }
+
+        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+        if (!isAtEnd) {
+          return false;
+        }
+
+        const pos = editor.state.selection.$from.end();
+
+        return editor.chain().focus(pos).insertContentAt(pos, { type: "paragraph" }).run();
+      },
+    };
+  },
+});
+
+export default QuoteCaption;

package/src/editor/extension/block-quote-figure/QuoteCaption/index.ts

@@ -0,0 +1 @@
+export { QuoteCaption } from "./QuoteCaption";

package/src/editor/extension/block-quote-figure/index.ts

@@ -0,0 +1 @@
+export { BlockquoteFigure } from "./BlockquoteFigure";

package/src/editor/extension/document/index.ts

@@ -0,0 +1,5 @@
+import { Document as TiptapDocument } from "@tiptap/extension-document";
+
+export const Document = TiptapDocument.extend({
+  content: "(block|columns)+",
+});

package/src/editor/extension/figcaption/Figcaption.ts

@@ -0,0 +1,90 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+import { Image } from "../image";
+
+export const Figcaption = Node.create({
+  name: "figcaption",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "inline*",
+
+  selectable: false,
+
+  draggable: false,
+
+  marks: "link",
+
+  parseHTML() {
+    return [
+      {
+        tag: "figcaption",
+      },
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      // On Enter at the end of line, create new paragraph and focus
+      Enter: ({ editor }) => {
+        const {
+          state: {
+            selection: { $from, empty },
+          },
+        } = editor;
+
+        if (!empty || $from.parent.type !== this.type) {
+          return false;
+        }
+
+        const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+        if (!isAtEnd) {
+          return false;
+        }
+
+        const pos = editor.state.selection.$from.end();
+
+        return editor.chain().focus(pos).insertContentAt(pos, { type: "paragraph" }).run();
+      },
+
+      // On Backspace at the beginning of line,
+      // dont delete content of image before
+      Backspace: ({ editor }) => {
+        const {
+          state: {
+            selection: { $from, empty },
+          },
+        } = editor;
+
+        if (!empty || $from.parent.type !== this.type) {
+          return false;
+        }
+
+        const isAtStart = $from.parentOffset === 0;
+
+        if (!isAtStart) {
+          return false;
+        }
+
+        // if the node before is of type image, don't do anything
+        const nodeBefore = editor.state.doc.nodeAt($from.pos - 2);
+        if (nodeBefore?.type.name === Image.name) {
+          return true;
+        }
+
+        return false;
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["figcaption", mergeAttributes(HTMLAttributes), 0];
+  },
+});
+
+export default Figcaption;

package/src/editor/extension/figcaption/index.ts

@@ -0,0 +1 @@
+export { Figcaption } from "./Figcaption";

package/src/editor/extension/figure/Figure.ts

@@ -0,0 +1,62 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+
+export const Figure = Node.create({
+  name: "figure",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  group: "block",
+
+  content: "block figcaption",
+
+  draggable: true,
+
+  defining: true,
+
+  selectable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: `figure[data-type="${this.name}"]`,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["figure", mergeAttributes(HTMLAttributes, { "data-type": this.name }), 0];
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          handleDOMEvents: {
+            // Prevent dragging child nodes from figure
+            dragstart: (view, event) => {
+              if (!event.target) {
+                return false;
+              }
+
+              const pos = view.posAtDOM(event.target as HTMLElement, 0);
+              const $pos = view.state.doc.resolve(pos);
+
+              if ($pos.parent.type.name === this.type.name) {
+                event.preventDefault();
+              }
+
+              return false;
+            },
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default Figure;

package/src/editor/extension/figure/index.ts

@@ -0,0 +1 @@
+export { Figure } from "./Figure";

package/src/editor/extension/font-size/FontSize.ts

@@ -0,0 +1,64 @@
+import { Extension } from "@tiptap/core";
+import "@tiptap/extension-text-style";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    fontSize: {
+      setFontSize: (size: string) => ReturnType;
+      unsetFontSize: () => ReturnType;
+    };
+  }
+}
+
+export const FontSize = Extension.create({
+  name: "fontSize",
+
+  addOptions() {
+    return {
+      types: ["textStyle"],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["paragraph"],
+        attributes: {
+          class: {},
+        },
+      },
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ""),
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+
+              return {
+                style: `font-size: ${attributes.fontSize}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontSize:
+        (fontSize: string) =>
+        ({ chain }) =>
+          chain().setMark("textStyle", { fontSize }).run(),
+      unsetFontSize:
+        () =>
+        ({ chain }) =>
+          chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run(),
+    };
+  },
+});
+
+export default FontSize;

package/src/editor/extension/font-size/index.ts

@@ -0,0 +1 @@
+export { FontSize } from "./FontSize";

package/src/editor/extension/global-drag-handle/clipboard-serializer.ts

@@ -0,0 +1,28 @@
+import type { Slice } from "@tiptap/pm/model";
+import type { EditorView } from "@tiptap/pm/view";
+import * as pmView from "@tiptap/pm/view";
+
+function getPmView() {
+  try {
+    return pmView;
+  } catch (_error) {
+    return null;
+  }
+}
+
+export function serializeForClipboard(view: EditorView, slice: Slice) {
+  // Newer Tiptap/ProseMirror
+  if (view && typeof view.serializeForClipboard === "function") {
+    return view.serializeForClipboard(slice);
+  }
+
+  // Older version fallback
+  const proseMirrorView = getPmView();
+  // @ts-expect-error
+  if (proseMirrorView && typeof proseMirrorView?.__serializeForClipboard === "function") {
+    // @ts-expect-error
+    return proseMirrorView.__serializeForClipboard(view, slice);
+  }
+
+  throw new Error("No supported clipboard serialization method found.");
+}

package/src/editor/extension/global-drag-handle/index.ts

@@ -0,0 +1,377 @@
+import { Extension } from "@tiptap/core";
+import { Fragment, type Node, type ResolvedPos, Slice } from "@tiptap/pm/model";
+import { NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+
+import { serializeForClipboard } from "./clipboard-serializer";
+
+export interface GlobalDragHandleOptions {
+  /**
+   * The width of the drag handle
+   */
+  dragHandleWidth: number;
+
+  /**
+   * The treshold for scrolling
+   */
+  scrollTreshold: number;
+
+  /*
+   * The css selector to query for the drag handle. (eg: '.custom-handle').
+   * If handle element is found, that element will be used as drag handle. If not, a default handle will be created
+   */
+  dragHandleSelector?: string;
+
+  onNodeChange?: (node: ResolvedPos, nodePos: number) => void;
+  onShow?: () => void;
+  onHide?: () => void;
+  uniqueId?: string;
+}
+
+function absoluteRect(node: Element) {
+  const data = node.getBoundingClientRect();
+  const modal = node.closest('[role="dialog"]');
+
+  if (modal && window.getComputedStyle(modal).transform !== "none") {
+    const modalRect = modal.getBoundingClientRect();
+
+    return {
+      top: data.top - modalRect.top,
+      left: data.left - modalRect.left,
+      width: data.width,
+    };
+  }
+  return {
+    top: data.top,
+    left: data.left,
+    width: data.width,
+  };
+}
+
+function nodeDOMAtCoords(coords: { x: number; y: number }) {
+  return document
+    .elementsFromPoint(coords.x, coords.y)
+    .find(
+      (elem: Element) =>
+        elem.parentElement?.matches?.(".ProseMirror") ||
+        elem.matches(
+          ["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3, h4, h5, h6", "div.react-renderer"].join(", "),
+        ),
+    );
+}
+
+function nodePosAtDOM(node: Element, view: EditorView, options: GlobalDragHandleOptions) {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1,
+  })?.inside;
+}
+
+function calcNodePos(pos: number, view: EditorView) {
+  const $pos = view.state.doc.resolve(pos);
+  if ($pos.depth > 1) return $pos.before($pos.depth);
+  return pos;
+}
+
+function rootNodePos(pos: number, view: EditorView) {
+  const $pos = view.state.doc.resolve(pos);
+  if ($pos.depth < 1) return pos;
+  return $pos.before(1) + 1;
+}
+
+const getRootNode = (pos: number, view: EditorView, node: Element, uniqueId: string) => {
+  const root = view.state.doc.resolve(pos);
+  if (root.node().type.name === "doc") {
+    let id = (node as HTMLElement).dataset[uniqueId];
+    if (node.classList.contains("react-renderer")) {
+      const item = node.firstElementChild as HTMLElement;
+      id = item?.dataset[uniqueId];
+    }
+    if (id) {
+      let node: Node | null = null;
+      root.node().content.descendants((n) => {
+        if (n.attrs[uniqueId] === id) {
+          node = n;
+        }
+      });
+      return node ? (node as Node).resolve(0) : root;
+    }
+  }
+  return root;
+};
+
+export function DragHandlePlugin(options: GlobalDragHandleOptions & { pluginKey: string }) {
+  let listType = "";
+
+  function handleDragStart(event: DragEvent, view: EditorView) {
+    // view.focus();
+
+    if (!event.dataTransfer) return;
+
+    const node = nodeDOMAtCoords({
+      x: event.clientX + 50 + options.dragHandleWidth,
+      y: event.clientY,
+    });
+
+    if (!(node instanceof Element)) return;
+
+    let draggedNodePos = nodePosAtDOM(node, view, options);
+    if (draggedNodePos == null || draggedNodePos < 0) return;
+    const dragNode = view.state.doc.resolve(draggedNodePos);
+    if (
+      ["tableCell", "tableRow"].includes(dragNode.node().type.name) ||
+      node.matches("div.tableWrapper, li, blockquote")
+    ) {
+      draggedNodePos = rootNodePos(draggedNodePos, view) - 1;
+    } else {
+      draggedNodePos = calcNodePos(draggedNodePos, view);
+    }
+
+    const { from, to } = view.state.selection;
+    const diff = from - to;
+
+    const fromSelectionPos = calcNodePos(from, view);
+    let differentNodeSelected = false;
+
+    const nodePos = view.state.doc.resolve(fromSelectionPos);
+
+    // Check if nodePos points to the top level node
+    if (nodePos.node().type.name === "doc") differentNodeSelected = true;
+    else {
+      const nodeSelection = NodeSelection.create(view.state.doc, nodePos.before());
+      // Check if the node where the drag event started is part of the current selection
+      differentNodeSelected = !(
+        draggedNodePos + 1 >= nodeSelection.$from.pos && draggedNodePos <= nodeSelection.$to.pos
+      );
+    }
+
+    if (!differentNodeSelected && diff !== 0 && !(view.state.selection instanceof NodeSelection)) {
+      const endSelection = NodeSelection.create(view.state.doc, to - 1);
+      const multiNodeSelection = TextSelection.create(view.state.doc, draggedNodePos, endSelection.$to.pos);
+      view.dispatch(view.state.tr.setSelection(multiNodeSelection));
+    } else {
+      const nodeSelection = NodeSelection.create(view.state.doc, draggedNodePos);
+      view.dispatch(view.state.tr.setSelection(nodeSelection));
+    }
+
+    // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
+    if (view.state.selection instanceof NodeSelection && view.state.selection.node.type.name === "listItem") {
+      listType = node.parentElement?.tagName || "";
+    }
+
+    const slice = view.state.selection.content();
+    const { dom, text } = serializeForClipboard(view, slice);
+
+    event.dataTransfer.clearData();
+    event.dataTransfer.setData("text/html", dom.innerHTML);
+    event.dataTransfer.setData("text/plain", text);
+    event.dataTransfer.effectAllowed = "copyMove";
+
+    event.dataTransfer.setDragImage(node, 0, 0);
+
+    view.dragging = { slice, move: event.ctrlKey };
+  }
+
+  let dragHandleElement: HTMLElement | null = null;
+
+  function hideDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.add("hidden");
+      options.onHide?.();
+    }
+  }
+
+  function showDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.remove("hidden");
+      options.onShow?.();
+    }
+  }
+
+  return new Plugin({
+    key: new PluginKey(options.pluginKey),
+    view: (view) => {
+      const handleBySelector = options.dragHandleSelector
+        ? document.querySelector<HTMLElement>(options.dragHandleSelector)
+        : null;
+      dragHandleElement = handleBySelector ?? document.createElement("div");
+      dragHandleElement.draggable = true;
+      dragHandleElement.dataset.dragHandle = "";
+      dragHandleElement.classList.add("drag-handle");
+
+      function onDragHandleDragStart(e: DragEvent) {
+        view.dom.classList.add("dragging");
+        handleDragStart(e, view);
+      }
+
+      dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
+
+      function onDragHandleDragEnd() {
+        view.dom.classList.remove("dragging");
+      }
+
+      dragHandleElement.addEventListener("dragend", onDragHandleDragEnd);
+
+      function onDragHandleDrag(e: DragEvent) {
+        hideDragHandle();
+        const scrollY = window.scrollY;
+        if (e.clientY < options.scrollTreshold) {
+          window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
+        } else if (window.innerHeight - e.clientY < options.scrollTreshold) {
+          window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
+        }
+      }
+
+      dragHandleElement.addEventListener("drag", onDragHandleDrag);
+
+      hideDragHandle();
+
+      if (!handleBySelector) {
+        view?.dom?.parentElement?.appendChild(dragHandleElement);
+      }
+
+      return {
+        destroy: () => {
+          if (!handleBySelector) {
+            dragHandleElement?.remove?.();
+          }
+          dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
+          dragHandleElement?.removeEventListener("dragstart", onDragHandleDragStart);
+          dragHandleElement = null;
+        },
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          if (!view.editable) {
+            return;
+          }
+
+          const node = nodeDOMAtCoords({
+            x: event.clientX + 50 + options.dragHandleWidth,
+            y: event.clientY,
+          });
+
+          const notDragging = node?.closest(".not-draggable");
+
+          if (!(node instanceof Element) || node.matches("ul, ol") || notDragging) {
+            hideDragHandle();
+            return;
+          }
+
+          const compStyle = window.getComputedStyle(node);
+          const parsedLineHeight = Number.parseInt(compStyle.lineHeight, 10);
+          const lineHeight = Number.isNaN(parsedLineHeight)
+            ? Number.parseInt(compStyle.fontSize, 10) * 1.2
+            : parsedLineHeight;
+          const paddingTop = Number.parseInt(compStyle.paddingTop, 10);
+
+          const boundingRect = node.getBoundingClientRect();
+          const draggedNodePos = view.posAtCoords({
+            left: boundingRect.left,
+            top: boundingRect.top,
+          });
+          if (draggedNodePos == null) return;
+          const rootPos = rootNodePos(draggedNodePos.pos, view);
+          const root = getRootNode(rootPos, view, node, options.uniqueId!);
+          options.onNodeChange?.(root, rootPos);
+
+          const rootNode = view.domAtPos(root.pos).node as Element;
+          let rect = absoluteRect(rootNode);
+          if (node.matches("div.react-renderer, div[data-type=horizontalRule]")) {
+            rect = absoluteRect(node);
+          }
+
+          rect.top += paddingTop;
+          rect.width = options.dragHandleWidth;
+          if (node.matches("div[data-type=horizontalRule]")) {
+            rect.top -= (boundingRect.height + 8) / 2;
+          }
+          if (root.node().type.name === "codeBlock") {
+            rect.top -= lineHeight + Number.parseInt(compStyle.fontSize, 10);
+          }
+          if (!dragHandleElement) return;
+
+          const editorRect = view.dom.getBoundingClientRect();
+          dragHandleElement.style.left = `${rect.left - rect.width}px`;
+          dragHandleElement.style.top = `${rect.top - editorRect.top}px`;
+          showDragHandle();
+        },
+        keydown: () => {
+          hideDragHandle();
+        },
+        mousewheel: () => {
+          hideDragHandle();
+        },
+        drop: (view, event) => {
+          view.dom.classList.remove("dragging");
+          hideDragHandle();
+          let droppedNode: Node | null = null;
+          const dropPos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          });
+
+          if (!dropPos) return;
+
+          if (view.state.selection instanceof NodeSelection) {
+            droppedNode = view.state.selection.node;
+          }
+          if (!droppedNode) return;
+
+          const resolvedPos = view.state.doc.resolve(dropPos.pos);
+
+          const isDroppedInsideList = resolvedPos.parent.type.name === "listItem";
+
+          // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
+          if (
+            view.state.selection instanceof NodeSelection &&
+            view.state.selection.node.type.name === "listItem" &&
+            !isDroppedInsideList &&
+            listType === "OL"
+          ) {
+            const text = droppedNode.textContent;
+            if (!text) return;
+            const paragraph = view.state.schema.nodes.paragraph?.createAndFill({}, view.state.schema.text(text));
+            const listItem = view.state.schema.nodes.listItem?.createAndFill({}, paragraph);
+            const newList = view.state.schema.nodes.orderedList?.createAndFill(null, listItem);
+            const slice = new Slice(Fragment.from(newList), 0, 0);
+            view.dragging = { slice, move: event.ctrlKey };
+          }
+        },
+      },
+    },
+  });
+}
+
+const GlobalDragHandle = Extension.create({
+  name: "globalDragHandle",
+
+  addOptions() {
+    return {
+      dragHandleWidth: 20,
+      scrollTreshold: 100,
+      uniqueId: "id",
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      DragHandlePlugin({
+        pluginKey: "globalDragHandle",
+        dragHandleWidth: this.options.dragHandleWidth,
+        scrollTreshold: this.options.scrollTreshold,
+        dragHandleSelector: this.options.dragHandleSelector,
+        onNodeChange: this.options.onNodeChange,
+        onShow: this.options.onShow,
+        onHide: this.options.onHide,
+        uniqueId: this.options.uniqueId,
+      }),
+    ];
+  },
+});
+
+export default GlobalDragHandle;