@meta-1/editor 0.0.27

package/src/editor/extension/table/menus/TableRow/index.tsx

@@ -0,0 +1,74 @@
+import React, { type ReactElement, useCallback } from "react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
+
+import type { MenuProps, ShouldShowProps } from "../../../../menus/types";
+import { Icon } from "../../../../ui/Icon";
+import { Item } from "../../../../ui/PopoverMenu";
+import { Toolbar } from "../../../../ui/Toolbar";
+import { i18n } from "../../../../utils/locale";
+import { isRowGripSelected } from "./utils";
+
+export const TableRowMenu = React.memo(({ editor, appendTo }: MenuProps): ReactElement => {
+  const shouldShow = useCallback(
+    ({ view, state, from }: ShouldShowProps) => {
+      if (!(state && from)) {
+        return false;
+      }
+
+      return isRowGripSelected({ editor, view, state, from });
+    },
+    [editor],
+  );
+
+  const onAddRowBefore = useCallback(() => {
+    editor.chain().focus().addRowBefore().run();
+  }, [editor]);
+
+  const onAddRowAfter = useCallback(() => {
+    editor.chain().focus().addRowAfter().run();
+  }, [editor]);
+
+  const onDeleteRow = useCallback(() => {
+    editor.chain().focus().deleteRow().run();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey="tableRowMenu"
+      shouldShow={shouldShow}
+      tippyOptions={{
+        zIndex: 40,
+        appendTo: () => {
+          return appendTo?.current;
+        },
+        placement: "left",
+        offset: [0, 15],
+        popperOptions: {
+          modifiers: [{ name: "flip", enabled: false }],
+        },
+      }}
+      updateDelay={0}
+    >
+      <Toolbar.Wrapper isVertical>
+        <Item
+          close={false}
+          iconComponent={<Icon name="ArrowUpToLine" />}
+          label={i18n("tableColumnMenu.onAddRowBefore")}
+          onClick={onAddRowBefore}
+        />
+        <Item
+          close={false}
+          iconComponent={<Icon name="ArrowDownToLine" />}
+          label={i18n("tableColumnMenu.onAddRowAfter")}
+          onClick={onAddRowAfter}
+        />
+        <Item close={false} icon="Trash" label={i18n("tableColumnMenu.onDeleteRow")} onClick={onDeleteRow} />
+      </Toolbar.Wrapper>
+    </BaseBubbleMenu>
+  );
+});
+
+TableRowMenu.displayName = "TableRowMenu";
+
+export default TableRowMenu;

package/src/editor/extension/table/menus/TableRow/utils.ts

@@ -0,0 +1,38 @@
+import type { EditorState } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+import type { Editor } from "@tiptap/react";
+
+import { Table } from "../..";
+import { isTableSelected } from "../../utils";
+
+export const isRowGripSelected = ({
+  editor,
+  view,
+  state,
+  from,
+}: {
+  editor: Editor;
+  view: EditorView;
+  state: EditorState;
+  from: number;
+}) => {
+  const domAtPos = view.domAtPos(from).node as HTMLElement;
+  const nodeDOM = view.nodeDOM(from) as HTMLElement;
+  const node = nodeDOM || domAtPos;
+
+  if (!(editor.isActive(Table.name) && node) || isTableSelected(state.selection)) {
+    return false;
+  }
+
+  let container = node;
+
+  while (container && !["TD", "TH"].includes(container.tagName)) {
+    container = container.parentElement!;
+  }
+
+  const gripRow = container?.querySelector?.("a.grip-row.selected");
+
+  return !!gripRow;
+};
+
+export default isRowGripSelected;

package/src/editor/extension/table/menus/index.tsx

@@ -0,0 +1,2 @@
+export { TableColumnMenu } from "./TableColumn";
+export { TableRowMenu } from "./TableRow";

package/src/editor/extension/table/utils.ts

@@ -0,0 +1,258 @@
+import { findParentNode } from "@tiptap/core";
+import type { Node, ResolvedPos } from "@tiptap/pm/model";
+import type { Selection, Transaction } from "@tiptap/pm/state";
+import { CellSelection, TableMap } from "@tiptap/pm/tables";
+
+const CELL_ROLE_REGEX = /cell/i;
+
+// biome-ignore lint/suspicious/noExplicitAny: <isRectSelected>
+export const isRectSelected = (rect: any) => (selection: CellSelection) => {
+  const map = TableMap.get(selection.$anchorCell.node(-1));
+  const start = selection.$anchorCell.start(-1);
+  const cells = map.cellsInRect(rect);
+  const selectedCells = map.cellsInRect(
+    map.rectBetween(selection.$anchorCell.pos - start, selection.$headCell.pos - start),
+  );
+
+  for (let i = 0, count = cells.length; i < count; i += 1) {
+    if (selectedCells.indexOf(cells[i]) === -1) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+export const findTable = (selection: Selection) =>
+  findParentNode((node) => node.type.spec.tableRole && node.type.spec.tableRole === "table")(selection);
+
+// biome-ignore lint/suspicious/noExplicitAny: <isCellSelection>
+export const isCellSelection = (selection: any) => selection instanceof CellSelection;
+
+// biome-ignore lint/suspicious/noExplicitAny: <isColumnSelected>
+export const isColumnSelected = (columnIndex: number) => (selection: any) => {
+  if (isCellSelection(selection)) {
+    const map = TableMap.get(selection.$anchorCell.node(-1));
+
+    return isRectSelected({
+      left: columnIndex,
+      right: columnIndex + 1,
+      top: 0,
+      bottom: map.height,
+    })(selection);
+  }
+
+  return false;
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <isRowSelected>
+export const isRowSelected = (rowIndex: number) => (selection: any) => {
+  if (isCellSelection(selection)) {
+    const map = TableMap.get(selection.$anchorCell.node(-1));
+
+    return isRectSelected({
+      left: 0,
+      right: map.width,
+      top: rowIndex,
+      bottom: rowIndex + 1,
+    })(selection);
+  }
+
+  return false;
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <isTableSelected>
+export const isTableSelected = (selection: any) => {
+  if (isCellSelection(selection)) {
+    const map = TableMap.get(selection.$anchorCell.node(-1));
+
+    return isRectSelected({
+      left: 0,
+      right: map.width,
+      top: 0,
+      bottom: map.height,
+    })(selection);
+  }
+
+  return false;
+};
+
+export const getCellsInColumn = (columnIndex: number | number[]) => (selection: Selection) => {
+  const table = findTable(selection);
+  if (table) {
+    const map = TableMap.get(table.node);
+    const indexes = Array.isArray(columnIndex) ? columnIndex : Array.from([columnIndex]);
+
+    return indexes.reduce(
+      (acc, index) => {
+        if (index >= 0 && index <= map.width - 1) {
+          const cells = map.cellsInRect({
+            left: index,
+            right: index + 1,
+            top: 0,
+            bottom: map.height,
+          });
+
+          return acc.concat(
+            cells.map((nodePos) => {
+              const node = table.node.nodeAt(nodePos);
+              const pos = nodePos + table.start;
+
+              return { pos, start: pos + 1, node };
+            }),
+          );
+        }
+
+        return acc;
+      },
+      [] as { pos: number; start: number; node: Node | null | undefined }[],
+    );
+  }
+  return null;
+};
+
+export const getCellsInRow = (rowIndex: number | number[]) => (selection: Selection) => {
+  const table = findTable(selection);
+
+  if (table) {
+    const map = TableMap.get(table.node);
+    const indexes = Array.isArray(rowIndex) ? rowIndex : Array.from([rowIndex]);
+
+    return indexes.reduce(
+      (acc, index) => {
+        if (index >= 0 && index <= map.height - 1) {
+          const cells = map.cellsInRect({
+            left: 0,
+            right: map.width,
+            top: index,
+            bottom: index + 1,
+          });
+
+          return acc.concat(
+            cells.map((nodePos) => {
+              const node = table.node.nodeAt(nodePos);
+              const pos = nodePos + table.start;
+              return { pos, start: pos + 1, node };
+            }),
+          );
+        }
+
+        return acc;
+      },
+      [] as { pos: number; start: number; node: Node | null | undefined }[],
+    );
+  }
+
+  return null;
+};
+
+export const getCellsInTable = (selection: Selection) => {
+  const table = findTable(selection);
+
+  if (table) {
+    const map = TableMap.get(table.node);
+    const cells = map.cellsInRect({
+      left: 0,
+      right: map.width,
+      top: 0,
+      bottom: map.height,
+    });
+
+    return cells.map((nodePos) => {
+      const node = table.node.nodeAt(nodePos);
+      const pos = nodePos + table.start;
+
+      return { pos, start: pos + 1, node };
+    });
+  }
+
+  return null;
+};
+
+export const findParentNodeClosestToPos = ($pos: ResolvedPos, predicate: (node: Node) => boolean) => {
+  for (let i = $pos.depth; i > 0; i -= 1) {
+    const node = $pos.node(i);
+
+    if (predicate(node)) {
+      return {
+        pos: i > 0 ? $pos.before(i) : 0,
+        start: $pos.start(i),
+        depth: i,
+        node,
+      };
+    }
+  }
+
+  return null;
+};
+
+export const findCellClosestToPos = ($pos: ResolvedPos) => {
+  const predicate = (node: Node) => node.type.spec.tableRole && CELL_ROLE_REGEX.test(node.type.spec.tableRole);
+
+  return findParentNodeClosestToPos($pos, predicate);
+};
+
+const select = (type: "row" | "column") => (index: number) => (tr: Transaction) => {
+  const table = findTable(tr.selection);
+  const isRowSelection = type === "row";
+
+  if (table) {
+    const map = TableMap.get(table.node);
+
+    // Check if the index is valid
+    if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
+      const left = isRowSelection ? 0 : index;
+      const top = isRowSelection ? index : 0;
+      const right = isRowSelection ? map.width : index + 1;
+      const bottom = isRowSelection ? index + 1 : map.height;
+
+      const cellsInFirstRow = map.cellsInRect({
+        left,
+        top,
+        right: isRowSelection ? right : left + 1,
+        bottom: isRowSelection ? top + 1 : bottom,
+      });
+
+      const cellsInLastRow =
+        bottom - top === 1
+          ? cellsInFirstRow
+          : map.cellsInRect({
+              left: isRowSelection ? left : right - 1,
+              top: isRowSelection ? bottom - 1 : top,
+              right,
+              bottom,
+            });
+
+      const head = table.start + cellsInFirstRow[0];
+      const anchor = table.start + (cellsInLastRow?.at(-1) ?? 0);
+      const $head = tr.doc.resolve(head);
+      const $anchor = tr.doc.resolve(anchor);
+
+      return tr.setSelection(new CellSelection($anchor, $head));
+    }
+  }
+  return tr;
+};
+
+export const selectColumn = select("column");
+
+export const selectRow = select("row");
+
+export const selectTable = (tr: Transaction) => {
+  const table = findTable(tr.selection);
+
+  if (table) {
+    const { map } = TableMap.get(table.node);
+
+    if (map?.length) {
+      const head = table.start + map[0];
+      const anchor = table.start + (map?.at(-1) ?? 0);
+      const $head = tr.doc.resolve(head);
+      const $anchor = tr.doc.resolve(anchor);
+
+      return tr.setSelection(new CellSelection($anchor, $head));
+    }
+  }
+
+  return tr;
+};

package/src/editor/extension/task-item/index.ts

@@ -0,0 +1 @@
+export { TaskItem } from "./task-item";

package/src/editor/extension/task-item/task-item.ts

@@ -0,0 +1,225 @@
+import { type KeyboardShortcutCommand, mergeAttributes, Node, wrappingInputRule } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+
+export interface TaskItemOptions {
+  /**
+   * A callback function that is called when the checkbox is clicked while the editor is in readonly mode.
+   * @param node The prosemirror node of the task item
+   * @param checked The new checked state
+   * @returns boolean
+   */
+  onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean;
+
+  /**
+   * Controls whether the task items can be nested or not.
+   * @default false
+   * @example true
+   */
+  nested: boolean;
+
+  /**
+   * HTML attributes to add to the task item element.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+
+  // biome-ignore lint/suspicious/noExplicitAny: <HTMLAttributes>
+  HTMLAttributes: Record<string, any>;
+
+  /**
+   * The node type for taskList nodes
+   * @default 'taskList'
+   * @example 'myCustomTaskList'
+   */
+  taskListTypeName: string;
+}
+
+/**
+ * Matches a task item to a - [ ] on input.
+ */
+export const inputRegex = /^\s*(\[([( |x])?\])\s$/;
+
+/**
+ * This extension allows you to create task items.
+ * @see https://www.tiptap.dev/api/nodes/task-item
+ */
+export const TaskItem = Node.create<TaskItemOptions>({
+  name: "taskItem",
+
+  addOptions() {
+    return {
+      nested: false,
+      HTMLAttributes: {},
+      taskListTypeName: "taskList",
+    };
+  },
+
+  content() {
+    return this.options.nested ? "paragraph block*" : "paragraph+";
+  },
+
+  defining: true,
+
+  addAttributes() {
+    return {
+      checked: {
+        default: false,
+        keepOnSplit: false,
+        parseHTML: (element) => {
+          const dataChecked = element.getAttribute("data-checked");
+
+          return dataChecked === "" || dataChecked === "true";
+        },
+        renderHTML: (attributes) => ({
+          "data-checked": attributes.checked,
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `li[data-type="${this.name}"]`,
+        priority: 51,
+      },
+    ];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "li",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": this.name,
+      }),
+      [
+        "label",
+        [
+          "input",
+          {
+            type: "checkbox",
+            checked: node.attrs.checked ? "checked" : null,
+          },
+        ],
+        ["span"],
+      ],
+      ["div", 0],
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    const shortcuts: {
+      [key: string]: KeyboardShortcutCommand;
+    } = {
+      Enter: () => this.editor.commands.splitListItem(this.name),
+      "Shift-Tab": () => this.editor.commands.liftListItem(this.name),
+    };
+
+    if (!this.options.nested) {
+      return shortcuts;
+    }
+
+    return {
+      ...shortcuts,
+      Tab: () => this.editor.commands.sinkListItem(this.name),
+    };
+  },
+
+  addNodeView() {
+    return ({ node, HTMLAttributes, getPos, editor }) => {
+      const listItem = document.createElement("li");
+      const checkboxWrapper = document.createElement("label");
+      const checkboxStyler = document.createElement("span");
+      const checkbox = document.createElement("input");
+      const content = document.createElement("div");
+
+      checkboxWrapper.contentEditable = "false";
+      checkbox.type = "checkbox";
+      checkbox.addEventListener("mousedown", (event) => event.preventDefault());
+      checkbox.addEventListener("change", (event) => {
+        // if the editor isn't editable and we don't have a handler for
+        // readonly checks we have to undo the latest change
+        if (!(editor.isEditable || this.options.onReadOnlyChecked)) {
+          checkbox.checked = !checkbox.checked;
+
+          return;
+        }
+
+        // biome-ignore lint/suspicious/noExplicitAny: <checked>
+        const { checked } = event.target as any;
+
+        if (editor.isEditable && typeof getPos === "function") {
+          editor
+            .chain()
+            .focus(undefined, { scrollIntoView: false })
+            .command(({ tr }) => {
+              const position = getPos();
+
+              if (typeof position !== "number") {
+                return false;
+              }
+              const currentNode = tr.doc.nodeAt(position);
+
+              tr.setNodeMarkup(position, undefined, {
+                ...currentNode?.attrs,
+                checked,
+              });
+
+              return true;
+            })
+            .run();
+        }
+        if (!editor.isEditable && this.options.onReadOnlyChecked && !this.options.onReadOnlyChecked(node, checked)) {
+          checkbox.checked = !checkbox.checked;
+        }
+      });
+
+      for (const [key, value] of Object.entries(this.options.HTMLAttributes)) {
+        listItem.setAttribute(key, value);
+      }
+
+      listItem.dataset.checked = node.attrs.checked;
+      if (node.attrs.checked) {
+        checkbox.setAttribute("checked", "checked");
+      }
+
+      checkboxWrapper.append(checkbox, checkboxStyler);
+      listItem.append(checkboxWrapper, content);
+
+      for (const [key, value] of Object.entries(HTMLAttributes)) {
+        listItem.setAttribute(key, value);
+      }
+
+      return {
+        dom: listItem,
+        contentDOM: content,
+        update: (updatedNode) => {
+          if (updatedNode.type !== this.type) {
+            return false;
+          }
+
+          listItem.dataset.checked = updatedNode.attrs.checked;
+          if (updatedNode.attrs.checked) {
+            checkbox.setAttribute("checked", "checked");
+          } else {
+            checkbox.removeAttribute("checked");
+          }
+
+          return true;
+        },
+      };
+    };
+  },
+
+  addInputRules() {
+    return [
+      wrappingInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          checked: match.at(-1) === "x",
+        }),
+      }),
+    ];
+  },
+});

package/src/editor/extension/task-list/index.ts

@@ -0,0 +1 @@
+export { TaskList } from "./task-list";

package/src/editor/extension/task-list/task-list.ts

@@ -0,0 +1,81 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TaskListOptions {
+  /**
+   * The node type name for a task item.
+   * @default 'taskItem'
+   * @example 'myCustomTaskItem'
+   */
+  itemTypeName: string;
+
+  /**
+   * The HTML attributes for a task list node.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+
+  // biome-ignore lint/suspicious/noExplicitAny: <HTMLAttributes>
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    taskList: {
+      /**
+       * Toggle a task list
+       * @example editor.commands.toggleTaskList()
+       */
+      toggleTaskList: () => ReturnType;
+    };
+  }
+}
+
+/**
+ * This extension allows you to create task lists.
+ * @see https://www.tiptap.dev/api/nodes/task-list
+ */
+export const TaskList = Node.create<TaskListOptions>({
+  name: "taskList",
+
+  addOptions() {
+    return {
+      itemTypeName: "taskItem",
+      HTMLAttributes: {},
+    };
+  },
+
+  group: "block list",
+
+  content() {
+    return `${this.options.itemTypeName}+`;
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `ul[data-type="${this.name}"]`,
+        priority: 51,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["ul", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { "data-type": this.name }), 0];
+  },
+
+  addCommands() {
+    return {
+      toggleTaskList:
+        () =>
+        ({ commands }) => {
+          return commands.toggleList(this.name, this.options.itemTypeName);
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-9": () => this.editor.commands.toggleTaskList(),
+    };
+  },
+});

package/src/editor/extension/trailing-node/index.ts

@@ -0,0 +1 @@
+export { TrailingNode } from "./trailing-node";