@meta-1/editor 0.0.29 → 1.0.0

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

@@ -1,54 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,90 +0,0 @@
-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

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

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

@@ -1,62 +0,0 @@
-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

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

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

@@ -1,64 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,377 +0,0 @@
-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;