@meta-1/editor 0.0.27

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,153 @@
+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()
+      //     },
+      // },
+    ],
+  },
+];