@meta-1/editor 0.0.29 → 1.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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