@meta-1/editor 0.0.29 → 1.0.0

package/src/editor/extension/multi-column/Column.ts

@@ -1,33 +0,0 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-
-export const Column = Node.create({
-  name: "column",
-
-  content: "block+",
-
-  isolating: true,
-
-  addAttributes() {
-    return {
-      position: {
-        default: "",
-        parseHTML: (element) => element.getAttribute("data-position"),
-        renderHTML: (attributes) => ({ "data-position": attributes.position }),
-      },
-    };
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ["div", mergeAttributes(HTMLAttributes, { "data-type": "column" }), 0];
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'div[data-type="column"]',
-      },
-    ];
-  },
-});
-
-export default Column;

package/src/editor/extension/multi-column/Columns.ts

@@ -1,65 +0,0 @@
-import { Node } from "@tiptap/core";
-
-export enum ColumnLayout {
-  SidebarLeft = "sidebar-left",
-  SidebarRight = "sidebar-right",
-  TwoColumn = "two-column",
-}
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    columns: {
-      setColumns: () => ReturnType;
-      setLayout: (layout: ColumnLayout) => ReturnType;
-    };
-  }
-}
-
-export const Columns = Node.create({
-  name: "columns",
-
-  group: "columns",
-
-  content: "column column",
-
-  defining: true,
-
-  isolating: true,
-
-  addAttributes() {
-    return {
-      layout: {
-        default: ColumnLayout.TwoColumn,
-      },
-    };
-  },
-
-  addCommands() {
-    return {
-      setColumns:
-        () =>
-        ({ commands }) =>
-          commands.insertContent(
-            `<div data-type="columns"><div data-type="column" data-position="left"><p></p></div><div data-type="column" data-position="right"><p></p></div></div>`,
-          ),
-      setLayout:
-        (layout: ColumnLayout) =>
-        ({ commands }) =>
-          commands.updateAttributes("columns", { layout }),
-    };
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ["div", { "data-type": "columns", class: `layout-${HTMLAttributes.layout}` }, 0];
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'div[data-type="columns"]',
-      },
-    ];
-  },
-});
-
-export default Columns;

package/src/editor/extension/multi-column/index.ts

@@ -1,2 +0,0 @@
-export { Column } from "./Column";
-export { Columns } from "./Columns";

package/src/editor/extension/multi-column/menus/ColumnsMenu.tsx

@@ -1,82 +0,0 @@
-import { useCallback } from "react";
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
-import { sticky } from "tippy.js";
-import { v4 as uuid } from "uuid";
-
-import type { MenuProps } from "../../../menus/types";
-import { Icon } from "../../../ui/Icon";
-import { Toolbar } from "../../../ui/Toolbar";
-import { getRenderContainer } from "../../../utils";
-import { ColumnLayout } from "../Columns";
-
-export const ColumnsMenu = ({ editor, appendTo }: MenuProps) => {
-  const getReferenceClientRect = useCallback(() => {
-    const renderContainer = getRenderContainer(editor, "columns");
-    const rect = renderContainer?.getBoundingClientRect() || new DOMRect(-1000, -1000, 0, 0);
-
-    return rect;
-  }, [editor]);
-
-  const shouldShow = useCallback(() => {
-    const isColumns = editor.isActive("columns");
-    return isColumns;
-  }, [editor]);
-
-  const onColumnLeft = useCallback(() => {
-    editor.chain().focus().setLayout(ColumnLayout.SidebarLeft).run();
-  }, [editor]);
-
-  const onColumnRight = useCallback(() => {
-    editor.chain().focus().setLayout(ColumnLayout.SidebarRight).run();
-  }, [editor]);
-
-  const onColumnTwo = useCallback(() => {
-    editor.chain().focus().setLayout(ColumnLayout.TwoColumn).run();
-  }, [editor]);
-
-  return (
-    <BaseBubbleMenu
-      editor={editor}
-      pluginKey={`columnsMenu-${uuid()}`}
-      shouldShow={shouldShow}
-      tippyOptions={{
-        zIndex: 40,
-        offset: [0, 8],
-        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
-        },
-        getReferenceClientRect,
-        appendTo: () => appendTo?.current,
-        plugins: [sticky],
-        sticky: "popper",
-      }}
-      updateDelay={0}
-    >
-      <Toolbar.Wrapper>
-        <Toolbar.Button
-          active={editor.isActive("columns", { layout: ColumnLayout.SidebarLeft })}
-          onClick={onColumnLeft}
-          tooltip="Sidebar left"
-        >
-          <Icon name="PanelLeft" />
-        </Toolbar.Button>
-        <Toolbar.Button
-          active={editor.isActive("columns", { layout: ColumnLayout.TwoColumn })}
-          onClick={onColumnTwo}
-          tooltip="Two columns"
-        >
-          <Icon name="Columns2" />
-        </Toolbar.Button>
-        <Toolbar.Button
-          active={editor.isActive("columns", { layout: ColumnLayout.SidebarRight })}
-          onClick={onColumnRight}
-          tooltip="Sidebar right"
-        >
-          <Icon name="PanelRight" />
-        </Toolbar.Button>
-      </Toolbar.Wrapper>
-    </BaseBubbleMenu>
-  );
-};
-
-export default ColumnsMenu;

package/src/editor/extension/multi-column/menus/index.ts

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

package/src/editor/extension/selection/Selection.ts

@@ -1,36 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
-
-export const Selection = Extension.create({
-  name: "selection",
-
-  addProseMirrorPlugins() {
-    const { editor } = this;
-
-    return [
-      new Plugin({
-        key: new PluginKey("selection"),
-        props: {
-          decorations(state) {
-            if (state.selection.empty) {
-              return null;
-            }
-
-            if (editor.isFocused) {
-              return null;
-            }
-
-            return DecorationSet.create(state.doc, [
-              Decoration.inline(state.selection.from, state.selection.to, {
-                class: "selection",
-              }),
-            ]);
-          },
-        },
-      }),
-    ];
-  },
-});
-
-export default Selection;

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

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

package/src/editor/extension/slash-command/MenuList.tsx

@@ -1,145 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-import { DropdownButton } from "../../ui/Dropdown";
-import { Icon } from "../../ui/Icon";
-import { Surface } from "../../ui/Surface";
-import type { Command, MenuListProps } from "./types";
-
-export const MenuList = React.forwardRef((props: MenuListProps, ref) => {
-  const scrollContainer = useRef<HTMLDivElement>(null);
-  const activeItem = useRef<HTMLButtonElement>(null);
-  const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);
-  const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
-
-  // Anytime the groups change, i.e. the user types to narrow it down, we want to
-  // reset the current selection to the first menu item
-  useEffect(() => {
-    setSelectedGroupIndex(0);
-    setSelectedCommandIndex(0);
-  }, [props.items]);
-
-  const selectItem = useCallback(
-    (groupIndex: number, commandIndex: number) => {
-      const command = props.items[groupIndex].commands[commandIndex];
-      props.command(command);
-    },
-    [props],
-  );
-
-  React.useImperativeHandle(ref, () => ({
-    onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {
-      if (event.key === "ArrowDown") {
-        if (!props.items.length) {
-          return false;
-        }
-
-        const commands = props.items[selectedGroupIndex].commands;
-
-        let newCommandIndex = selectedCommandIndex + 1;
-        let newGroupIndex = selectedGroupIndex;
-
-        if (commands.length - 1 < newCommandIndex) {
-          newCommandIndex = 0;
-          newGroupIndex = selectedGroupIndex + 1;
-        }
-
-        if (props.items.length - 1 < newGroupIndex) {
-          newGroupIndex = 0;
-        }
-
-        setSelectedCommandIndex(newCommandIndex);
-        setSelectedGroupIndex(newGroupIndex);
-
-        return true;
-      }
-
-      if (event.key === "ArrowUp") {
-        if (!props.items.length) {
-          return false;
-        }
-
-        let newCommandIndex = selectedCommandIndex - 1;
-        let newGroupIndex = selectedGroupIndex;
-
-        if (newCommandIndex < 0) {
-          newGroupIndex = selectedGroupIndex - 1;
-          newCommandIndex = props.items[newGroupIndex]?.commands.length - 1 || 0;
-        }
-
-        if (newGroupIndex < 0) {
-          newGroupIndex = props.items.length - 1;
-          newCommandIndex = props.items[newGroupIndex].commands.length - 1;
-        }
-
-        setSelectedCommandIndex(newCommandIndex);
-        setSelectedGroupIndex(newGroupIndex);
-
-        return true;
-      }
-
-      if (event.key === "Enter") {
-        if (!props.items.length || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
-          return false;
-        }
-
-        selectItem(selectedGroupIndex, selectedCommandIndex);
-
-        return true;
-      }
-
-      return false;
-    },
-  }));
-
-  useEffect(() => {
-    if (activeItem.current && scrollContainer.current) {
-      const offsetTop = activeItem.current.offsetTop;
-      const offsetHeight = activeItem.current.offsetHeight;
-      scrollContainer.current.scrollTop = offsetTop - offsetHeight;
-    }
-  }, []);
-
-  const createCommandClickHandler = useCallback(
-    (groupIndex: number, commandIndex: number) => {
-      return () => {
-        selectItem(groupIndex, commandIndex);
-      };
-    },
-    [selectItem],
-  );
-
-  if (!props.items.length) {
-    return null;
-  }
-
-  return (
-    <Surface className="mb-8 max-h-[min(80vh,24rem)] flex-wrap overflow-auto p-2 text-black" ref={scrollContainer}>
-      <div className="grid grid-cols-1 gap-0.5">
-        {props.items.map((group, groupIndex: number) => (
-          <React.Fragment key={`${group.title}-wrapper`}>
-            <div
-              className="col-[1/-1] mx-2 mt-4 select-none font-semibold text-[0.65rem] text-neutral-500 uppercase tracking-wider first:mt-0.5"
-              key={`${group.title}`}
-            >
-              {group.title}
-            </div>
-            {group.commands.map((command: Command, commandIndex: number) => (
-              <DropdownButton
-                isActive={selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex}
-                key={`${command.label}`}
-                onClick={createCommandClickHandler(groupIndex, commandIndex)}
-              >
-                <Icon className="mr-1" name={command.iconName} />
-                {command.label}
-              </DropdownButton>
-            ))}
-          </React.Fragment>
-        ))}
-      </div>
-    </Surface>
-  );
-});
-
-MenuList.displayName = "MenuList";
-
-export default MenuList;

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

@@ -1,153 +0,0 @@
-import { i18n } from "../../utils/locale";
-import type { Group } from "./types";
-
-export const getGroups = (): Group[] => [
-  {
-    name: "format",
-    title: i18n("slashCommand.group.format"),
-    commands: [
-      {
-        name: "heading1",
-        label: i18n("slashCommand.heading1.title"),
-        iconName: "Heading1",
-        description: i18n("slashCommand.heading1.description"),
-        aliases: ["h1"],
-        action: (editor) => {
-          editor.chain().focus().setHeading({ level: 1 }).run();
-        },
-      },
-      {
-        name: "heading2",
-        label: i18n("slashCommand.heading2.title"),
-        iconName: "Heading2",
-        description: i18n("slashCommand.heading2.description"),
-        aliases: ["h2"],
-        action: (editor) => {
-          editor.chain().focus().setHeading({ level: 2 }).run();
-        },
-      },
-      {
-        name: "heading3",
-        label: i18n("slashCommand.heading3.title"),
-        iconName: "Heading3",
-        description: i18n("slashCommand.heading3.description"),
-        aliases: ["h3"],
-        action: (editor) => {
-          editor.chain().focus().setHeading({ level: 3 }).run();
-        },
-      },
-      {
-        name: "bulletList",
-        label: i18n("slashCommand.bulletList.title"),
-        iconName: "List",
-        description: i18n("slashCommand.bulletList.description"),
-        aliases: ["ul"],
-        action: (editor) => {
-          editor.chain().focus().toggleBulletList().run();
-        },
-      },
-      {
-        name: "numberedList",
-        label: i18n("slashCommand.numberedList.title"),
-        iconName: "ListOrdered",
-        description: i18n("slashCommand.numberedList.description"),
-        aliases: ["ol"],
-        action: (editor) => {
-          editor.chain().focus().toggleOrderedList().run();
-        },
-      },
-      {
-        name: "taskList",
-        label: i18n("slashCommand.taskList.title"),
-        iconName: "ListTodo",
-        description: i18n("slashCommand.taskList.description"),
-        aliases: ["todo"],
-        action: (editor) => {
-          editor.chain().focus().toggleTaskList().run();
-        },
-      },
-      {
-        name: "blockquote",
-        label: i18n("slashCommand.blockquote.title"),
-        iconName: "Quote",
-        description: i18n("slashCommand.blockquote.description"),
-        action: (editor) => {
-          editor.chain().focus().setBlockquote().run();
-        },
-      },
-      {
-        name: "codeBlock",
-        label: i18n("slashCommand.codeBlock.title"),
-        iconName: "SquareCode",
-        description: i18n("slashCommand.codeBlock.description"),
-        shouldBeHidden: (editor) => editor.isActive("columns"),
-        action: (editor) => {
-          editor.chain().focus().setCodeBlock().run();
-        },
-      },
-    ],
-  },
-  {
-    name: "insert",
-    title: i18n("slashCommand.group.insert"),
-    commands: [
-      {
-        name: "table",
-        label: i18n("slashCommand.table.title"),
-        iconName: "Table",
-        description: i18n("slashCommand.table.description"),
-        shouldBeHidden: (editor) => editor.isActive("columns"),
-        action: (editor) => {
-          editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: false }).run();
-        },
-      },
-      {
-        name: "image",
-        label: i18n("slashCommand.image.title"),
-        iconName: "Image",
-        description: i18n("slashCommand.image.description"),
-        aliases: ["img"],
-        action: (editor) => {
-          editor.chain().focus().setImageUpload().run();
-        },
-      },
-      // {
-      //     name: 'columns',
-      //     label: t("列"),
-      //     iconName: 'Columns2',
-      //     description: t("添加两列内容"),
-      //     aliases: ['cols'],
-      //     shouldBeHidden: editor => editor.isActive('columns'),
-      //     action: editor => {
-      //         editor
-      //             .chain()
-      //             .focus()
-      //             //.setColumns()
-      //             .focus(editor.state.selection.head - 1)
-      //             .run()
-      //     },
-      // },
-      {
-        name: "horizontalRule",
-        label: i18n("slashCommand.horizontalRule.title"),
-        iconName: "Minus",
-        description: i18n("slashCommand.horizontalRule.description"),
-        aliases: ["hr"],
-        action: (editor) => {
-          editor.chain().focus().setHorizontalRule().run();
-        },
-      },
-      // {
-      //     name: 'toc',
-      //     label: t("表格内容"),
-      //     iconName: 'Book',
-      //     aliases: ['outline'],
-      //     description: t("插入表格内容"),
-      //     shouldBeHidden: editor => editor.isActive('columns'),
-      //     action: editor => {
-      //         editor.chain().focus()//.insertTableOfContents().run()
-      //     },
-      // },
-    ],
-  },
-];