@meta-1/editor 0.0.27

package/src/editor/extension/slash-command/index.ts

@@ -0,0 +1,277 @@
+import { type Editor, Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import { ReactRenderer } from "@tiptap/react";
+import Suggestion, { type SuggestionKeyDownProps, type SuggestionProps } from "@tiptap/suggestion";
+import tippy from "tippy.js";
+
+import { getGroups } from "./groups";
+import { MenuList } from "./MenuList";
+import type { Group } from "./types";
+
+const extensionName = "slashCommand";
+
+// biome-ignore lint/suspicious/noExplicitAny: <popup>
+let popup: any;
+
+export type SlashCommandProps = {
+  groups?: Group[];
+};
+
+export const SlashCommand = Extension.create({
+  name: extensionName,
+
+  priority: 200,
+
+  addOptions(): SlashCommandProps {
+    return {
+      groups: [],
+    };
+  },
+
+  onCreate() {
+    popup = tippy("body", {
+      interactive: true,
+      trigger: "manual",
+      placement: "bottom-start",
+      theme: "slash-command",
+      maxWidth: "16rem",
+      offset: [16, 8],
+      popperOptions: {
+        strategy: "fixed",
+        modifiers: [
+          {
+            name: "flip",
+            enabled: false,
+          },
+        ],
+      },
+    });
+  },
+
+  addProseMirrorPlugins() {
+    const { groups: extendGroups } = this.options as SlashCommandProps;
+    return [
+      Suggestion({
+        editor: this.editor,
+        char: "/",
+        allowSpaces: true,
+        startOfLine: true,
+        pluginKey: new PluginKey(extensionName),
+        allow: ({ state, range }) => {
+          const $from = state.doc.resolve(range.from);
+          const isRootDepth = $from.depth === 1;
+          const isParagraph = $from.parent.type.name === "paragraph";
+          const isStartOfNode = $from.parent.textContent?.charAt(0) === "/";
+          // TODO
+          const isInColumn = this.editor.isActive("column");
+
+          const afterContent = $from.parent.textContent?.substring($from.parent.textContent?.indexOf("/"));
+          const isValidAfterContent = !afterContent?.endsWith("  ");
+
+          return (
+            ((isRootDepth && isParagraph && isStartOfNode) || (isInColumn && isParagraph && isStartOfNode)) &&
+            isValidAfterContent
+          );
+        },
+        // biome-ignore lint/suspicious/noExplicitAny: <props>
+        command: ({ editor, props }: { editor: Editor; props: any }) => {
+          const { view, state } = editor;
+          const { $head, $from } = view.state.selection;
+
+          const end = $from.pos;
+          const from = $head?.nodeBefore
+            ? end - ($head.nodeBefore.text?.substring($head.nodeBefore.text?.indexOf("/")).length ?? 0)
+            : $from.start();
+
+          const tr = state.tr.deleteRange(from, end);
+          view.dispatch(tr);
+
+          props.action(editor);
+          view.focus();
+        },
+        items: ({ query }: { query: string }) => {
+          const presetsGroups = getGroups();
+          const startGroups = extendGroups?.filter((group) => group.position === "start") || [];
+          const endGroups = extendGroups?.filter((group) => group.position === "end") || [];
+          const all = [...startGroups, ...presetsGroups, ...endGroups];
+          const withFilteredCommands = all.map((group) => ({
+            ...group,
+            commands: group.commands
+              .filter((item) => {
+                const labelNormalized = item.label?.toLowerCase().trim();
+                const queryNormalized = query.toLowerCase().trim();
+
+                if (item.aliases) {
+                  const aliases = item.aliases.map((alias) => alias.toLowerCase().trim());
+
+                  return labelNormalized?.includes(queryNormalized) || aliases.includes(queryNormalized);
+                }
+
+                return labelNormalized?.includes(queryNormalized);
+              })
+              .filter((command) => (command.shouldBeHidden ? !command.shouldBeHidden(this.editor) : true)),
+          }));
+
+          const withoutEmptyGroups = withFilteredCommands.filter((group) => {
+            if (group.commands.length > 0) {
+              return true;
+            }
+
+            return false;
+          });
+
+          const withEnabledSettings = withoutEmptyGroups.map((group) => ({
+            ...group,
+            commands: group.commands.map((command) => ({
+              ...command,
+              isEnabled: true,
+            })),
+          }));
+
+          return withEnabledSettings;
+        },
+        render: () => {
+          // biome-ignore lint/suspicious/noExplicitAny: <component>
+          let component: any;
+
+          let scrollHandler: (() => void) | null = null;
+
+          return {
+            onStart: (props: SuggestionProps) => {
+              component = new ReactRenderer(MenuList, {
+                props,
+                editor: props.editor,
+              });
+
+              const { view } = props.editor;
+
+              const _editorNode = view.dom as HTMLElement;
+
+              const getReferenceClientRect = () => {
+                if (!props.clientRect) {
+                  return props.editor.storage[extensionName].rect;
+                }
+
+                const rect = props.clientRect();
+
+                if (!rect) {
+                  return props.editor.storage[extensionName].rect;
+                }
+
+                let yPos = rect.y;
+
+                if (rect.top + component.element.offsetHeight + 40 > window.innerHeight) {
+                  const diff = rect.top + component.element.offsetHeight - window.innerHeight + 40;
+                  yPos = rect.y - diff;
+                }
+
+                // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen
+                // const editorXOffset = editorNode.getBoundingClientRect().x
+                return new DOMRect(rect.x, yPos, rect.width, rect.height);
+              };
+
+              scrollHandler = () => {
+                popup?.[0].setProps({
+                  getReferenceClientRect,
+                });
+              };
+
+              view.dom.parentElement?.addEventListener("scroll", scrollHandler);
+
+              popup?.[0].setProps({
+                getReferenceClientRect,
+                appendTo: () => document.body,
+                content: component.element,
+              });
+
+              popup?.[0].show();
+            },
+
+            onUpdate(props: SuggestionProps) {
+              component.updateProps(props);
+
+              const { view } = props.editor;
+
+              //const editorNode = view.dom as HTMLElement
+
+              const getReferenceClientRect = () => {
+                if (!props.clientRect) {
+                  return props.editor.storage[extensionName].rect;
+                }
+
+                const rect = props.clientRect();
+
+                if (!rect) {
+                  return props.editor.storage[extensionName].rect;
+                }
+
+                // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen
+                return new DOMRect(rect.x, rect.y, rect.width, rect.height);
+              };
+
+              const scrollHandler = () => {
+                popup?.[0].setProps({
+                  getReferenceClientRect,
+                });
+              };
+
+              view.dom.parentElement?.addEventListener("scroll", scrollHandler);
+
+              props.editor.storage[extensionName].rect = props.clientRect
+                ? getReferenceClientRect()
+                : {
+                    width: 0,
+                    height: 0,
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                  };
+              popup?.[0].setProps({
+                getReferenceClientRect,
+              });
+            },
+
+            onKeyDown(props: SuggestionKeyDownProps) {
+              if (props.event.key === "Escape") {
+                popup?.[0].hide();
+
+                return true;
+              }
+
+              if (!popup?.[0].state.isShown) {
+                popup?.[0].show();
+              }
+
+              return component.ref?.onKeyDown(props);
+            },
+
+            onExit(props) {
+              popup?.[0].hide();
+              if (scrollHandler) {
+                const { view } = props.editor;
+                view.dom.parentElement?.removeEventListener("scroll", scrollHandler);
+              }
+              component.destroy();
+            },
+          };
+        },
+      }),
+    ];
+  },
+
+  addStorage() {
+    return {
+      rect: {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+      },
+    };
+  },
+});
+
+export default SlashCommand;

package/src/editor/extension/slash-command/types.ts

@@ -0,0 +1,25 @@
+import type { Editor } from "@tiptap/core";
+import type { icons } from "lucide-react";
+
+export interface Group {
+  name: string;
+  title: string;
+  commands: Command[];
+  position?: "start" | "end";
+}
+
+export interface Command {
+  name: string;
+  label: string;
+  description: string;
+  aliases?: string[];
+  iconName: keyof typeof icons;
+  action: (editor: Editor) => void;
+  shouldBeHidden?: (editor: Editor) => boolean;
+}
+
+export interface MenuListProps {
+  editor: Editor;
+  items: Group[];
+  command: (command: Command) => void;
+}

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

@@ -0,0 +1,126 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+import { getCellsInColumn, isRowSelected, selectRow } from "./utils";
+
+export interface TableCellOptions {
+  // biome-ignore lint/suspicious/noExplicitAny: <HTMLAttributes>
+  HTMLAttributes: Record<string, any>;
+}
+
+export const TableCell = Node.create<TableCellOptions>({
+  name: "tableCell",
+
+  content: "block+", // TODO: Do not allow table in table
+
+  tableRole: "cell",
+
+  isolating: true,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "td" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["td", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+        parseHTML: (element) => {
+          const colspan = element.getAttribute("colspan");
+          const value = colspan ? Number.parseInt(colspan, 10) : 1;
+
+          return value;
+        },
+      },
+      rowspan: {
+        default: 1,
+        parseHTML: (element) => {
+          const rowspan = element.getAttribute("rowspan");
+          const value = rowspan ? Number.parseInt(rowspan, 10) : 1;
+
+          return value;
+        },
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [Number.parseInt(colwidth, 10)] : null;
+
+          return value;
+        },
+      },
+      style: {
+        default: null,
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const { isEditable } = this.editor;
+
+    return [
+      new Plugin({
+        props: {
+          decorations: (state) => {
+            if (!isEditable) {
+              return DecorationSet.empty;
+            }
+
+            const { doc, selection } = state;
+            const decorations: Decoration[] = [];
+            const cells = getCellsInColumn(0)(selection);
+
+            if (cells) {
+              cells.forEach(({ pos }: { pos: number }, index: number) => {
+                decorations.push(
+                  Decoration.widget(pos + 1, () => {
+                    const rowSelected = isRowSelected(index)(selection);
+                    let className = "grip-row";
+
+                    if (rowSelected) {
+                      className += " selected";
+                    }
+
+                    if (index === 0) {
+                      className += " first";
+                    }
+
+                    if (index === cells.length - 1) {
+                      className += " last";
+                    }
+
+                    const grip = document.createElement("a");
+
+                    grip.className = className;
+                    grip.addEventListener("mousedown", (event) => {
+                      event.preventDefault();
+                      event.stopImmediatePropagation();
+
+                      this.editor.view.dispatch(selectRow(index)(this.editor.state.tr));
+                    });
+
+                    return grip;
+                  }),
+                );
+              });
+            }
+
+            return DecorationSet.create(doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
+});

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

@@ -0,0 +1,89 @@
+import TiptapTableHeader from "@tiptap/extension-table-header";
+import { Plugin } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+import { getCellsInRow, isColumnSelected, selectColumn } from "./utils";
+
+export const TableHeader = TiptapTableHeader.extend({
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? colwidth.split(",").map((item) => Number.parseInt(item, 10)) : null;
+
+          return value;
+        },
+      },
+      style: {
+        default: null,
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const { isEditable } = this.editor;
+
+    return [
+      new Plugin({
+        props: {
+          decorations: (state) => {
+            if (!isEditable) {
+              return DecorationSet.empty;
+            }
+
+            const { doc, selection } = state;
+            const decorations: Decoration[] = [];
+            const cells = getCellsInRow(0)(selection);
+
+            if (cells) {
+              cells.forEach(({ pos }: { pos: number }, index: number) => {
+                decorations.push(
+                  Decoration.widget(pos + 1, () => {
+                    const colSelected = isColumnSelected(index)(selection);
+                    let className = "grip-column";
+
+                    if (colSelected) {
+                      className += " selected";
+                    }
+
+                    if (index === 0) {
+                      className += " first";
+                    }
+
+                    if (index === cells.length - 1) {
+                      className += " last";
+                    }
+
+                    const grip = document.createElement("a");
+
+                    grip.className = className;
+                    grip.addEventListener("mousedown", (event) => {
+                      event.preventDefault();
+                      event.stopImmediatePropagation();
+
+                      this.editor.view.dispatch(selectColumn(index)(this.editor.state.tr));
+                    });
+
+                    return grip;
+                  }),
+                );
+              });
+            }
+
+            return DecorationSet.create(doc, decorations);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default TableHeader;

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

@@ -0,0 +1,8 @@
+import TiptapTableRow from "@tiptap/extension-table-row";
+
+export const TableRow = TiptapTableRow.extend({
+  allowGapCursor: false,
+  content: "tableCell*",
+});
+
+export default TableRow;

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

@@ -0,0 +1,9 @@
+import TiptapTable from "@tiptap/extension-table";
+
+export const Table = TiptapTable.configure({
+  allowTableNodeSelection: true,
+  resizable: true,
+  lastColumnResizable: false,
+});
+
+export default Table;

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

@@ -0,0 +1,4 @@
+export { TableCell } from "./Cell";
+export { TableHeader } from "./Header";
+export { TableRow } from "./Row";
+export { Table } from "./Table";

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

@@ -0,0 +1,73 @@
+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 { isColumnGripSelected } from "./utils";
+
+export const TableColumnMenu = React.memo(({ editor, appendTo }: MenuProps): ReactElement => {
+  const shouldShow = useCallback(
+    ({ view, state, from }: ShouldShowProps) => {
+      if (!state) {
+        return false;
+      }
+
+      return isColumnGripSelected({ editor, view, state, from: from || 0 });
+    },
+    [editor],
+  );
+
+  const onAddColumnBefore = useCallback(() => {
+    editor.chain().focus().addColumnBefore().run();
+  }, [editor]);
+
+  const onAddColumnAfter = useCallback(() => {
+    editor.chain().focus().addColumnAfter().run();
+  }, [editor]);
+
+  const onDeleteColumn = useCallback(() => {
+    editor.chain().focus().deleteColumn().run();
+  }, [editor]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey="tableColumnMenu"
+      shouldShow={shouldShow}
+      tippyOptions={{
+        zIndex: 40,
+        appendTo: () => {
+          return appendTo?.current;
+        },
+        offset: [0, 15],
+        popperOptions: {
+          modifiers: [{ name: "flip", enabled: false }],
+        },
+      }}
+      updateDelay={0}
+    >
+      <Toolbar.Wrapper isVertical>
+        <Item
+          close={false}
+          iconComponent={<Icon name="ArrowLeftToLine" />}
+          label={i18n("tableColumnMenu.onAddColumnBefore")}
+          onClick={onAddColumnBefore}
+        />
+        <Item
+          close={false}
+          iconComponent={<Icon name="ArrowRightToLine" />}
+          label={i18n("tableColumnMenu.onAddColumnAfter")}
+          onClick={onAddColumnAfter}
+        />
+        <Item close={false} icon="Trash" label={i18n("tableColumnMenu.onDeleteColumn")} onClick={onDeleteColumn} />
+      </Toolbar.Wrapper>
+    </BaseBubbleMenu>
+  );
+});
+
+TableColumnMenu.displayName = "TableColumnMenu";
+
+export default TableColumnMenu;

package/src/editor/extension/table/menus/TableColumn/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 isColumnGripSelected = ({
+  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 gripColumn = container?.querySelector?.("a.grip-column.selected");
+
+  return !!gripColumn;
+};
+
+export default isColumnGripSelected;