@meta-1/editor 0.0.29 → 1.0.0

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

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

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

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

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

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

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

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

@@ -1,73 +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 { 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

@@ -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 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;