reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

package/src/extensions/SlashCommand/groups.ts

@@ -0,0 +1,183 @@
+import type { Extensions } from '@tiptap/core';
+
+import { Image, Video, type HeadingOptions } from '@/extensions';
+import { actionDialogImage } from '@/extensions/Image/store';
+import { actionDialogVideo } from '@/extensions/Video/store';
+import { localeActions } from '@/locales';
+
+import type { SlashCommandOptions } from './SlashCommand';
+import type { Group } from './types';
+
+export function renderGroups(extensions: Extensions, renderGroupItem?: SlashCommandOptions['renderGroupItem']) {
+  const groups: Group[] = [
+    {
+      name: 'format',
+      title: localeActions.t('editor.slash.format'),
+      commands: [],
+    },
+    {
+      name: 'insert',
+      title: localeActions.t('editor.slash.insert'),
+      commands: [],
+    },
+  ];
+
+  extensions.forEach((extension) => {
+    /* Format */
+    if (extension.name.toLowerCase() === 'heading') {
+      extension.options.levels.forEach((level: HeadingOptions['levels'][number]) => {
+        groups[0].commands.push({
+          name: `heading${level}`,
+          label: localeActions.t(`editor.heading.h${level}.tooltip`),
+          aliases: [`h${level}`, 'bt', `bt${level}`],
+          iconName: `Heading${level}`,
+          action: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setHeading({ level }).run();
+          },
+        });
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'bulletlist') {
+      groups[0].commands.push({
+        name: 'bulletList',
+        label: localeActions.t('editor.bulletlist.tooltip'),
+        aliases: ['ul', 'yxlb'],
+        iconName: 'List',
+        action: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).toggleBulletList().run();
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'orderedlist') {
+      groups[0].commands.push({
+        name: 'numberedList',
+        label: localeActions.t('editor.orderedlist.tooltip'),
+        aliases: ['ol', 'yxlb'],
+        iconName: 'ListOrdered',
+        action: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'tasklist') {
+      groups[0].commands.push({
+        name: 'taskList',
+        label: localeActions.t('editor.tasklist.tooltip'),
+        iconName: 'ListTodo',
+        description: 'Task list with todo items',
+        aliases: ['todo'],
+        action: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).toggleTaskList().run();
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'blockquote') {
+      groups[0].commands.push({
+        name: 'blockquote',
+        label: localeActions.t('editor.blockquote.tooltip'),
+        description: '插入引入格式',
+        aliases: ['yr'],
+        iconName: 'TextQuote',
+        action: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).setBlockquote().run();
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'codeblock') {
+      groups[0].commands.push({
+        name: 'codeBlock',
+        label: localeActions.t('editor.codeblock.tooltip'),
+        iconName: 'Code2',
+        description: 'Code block with syntax highlighting',
+        shouldBeHidden: editor => editor.isActive('columns'),
+        action: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).setCodeBlock().run();
+        },
+      });
+    }
+
+    /* Insert */
+    if (extension.name.toLowerCase() === Image.name) {
+      groups[1].commands.push({
+        name: 'image',
+        label: localeActions.t('editor.image.tooltip'),
+        iconName: 'ImageUp',
+        description: 'Insert a image',
+        aliases: ['image', 'tp', 'tupian'],
+        shouldBeHidden: editor => editor.isActive('columns'),
+        action: ({ editor, range }: any) => {
+          editor.chain().focus().deleteRange(range).run();
+
+          actionDialogImage.setOpen(editor.id, true);
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === Video.name) {
+      groups[1].commands.push({
+        name: 'video',
+        label: localeActions.t('editor.video.tooltip'),
+        iconName: 'Video',
+        description: 'Insert a video',
+        aliases: ['video', 'sp', 'shipin'],
+        shouldBeHidden: editor => editor.isActive('columns'),
+        action: ({ editor, range }: any) => {
+          editor.chain().focus().deleteRange(range).run();
+          actionDialogVideo.setOpen(editor.id, true);
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'table') {
+      groups[1].commands.push({
+        name: 'table',
+        label: localeActions.t('editor.table.tooltip'),
+        iconName: 'Table',
+        description: 'Insert a table',
+        aliases: ['table', 'bg', 'biaoge', 'biao'],
+        shouldBeHidden: editor => editor.isActive('columns'),
+        action: ({ editor, range }) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .insertTable({ rows: 3, cols: 3, withHeaderRow: false })
+            .run();
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'horizontalrule') {
+      groups[1].commands.push({
+        name: 'horizontalRule',
+        label: localeActions.t('editor.horizontalrule.tooltip'),
+        iconName: 'Minus',
+        description: 'Insert a horizontal divider',
+        aliases: ['hr', 'fgx', 'fg'],
+        action: ({ editor, range }) => {
+          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+        },
+      });
+    }
+
+    if (extension.name.toLowerCase() === 'columns') {
+      groups[1].commands.push({
+        name: 'columns',
+        label: localeActions.t('editor.columns.tooltip'),
+        iconName: 'Columns2',
+        description: 'Add two column content',
+        action: ({ editor }) => {
+          editor.chain().focus().insertColumns({ cols: 2 }).run();
+        },
+      });
+    }
+    renderGroupItem?.(extension, groups);
+  });
+
+  return groups;
+}

package/src/extensions/SlashCommand/index.ts

@@ -0,0 +1 @@
+export * from './SlashCommand';

package/src/extensions/SlashCommand/types.ts

@@ -0,0 +1,24 @@
+import type { Editor, Range } from '@tiptap/core';
+
+export interface Group {
+  name: string
+  title: string
+  commands: Command[]
+}
+
+export interface Command {
+  name: string
+  label: string
+  description?: string
+  aliases?: string[]
+  iconName?: any
+  iconUrl?: string
+  action: ({ editor, range }: { editor: Editor, range: Range }) => void
+  shouldBeHidden?: (editor: Editor) => boolean
+}
+
+export interface MenuListProps {
+  editor: Editor
+  items: Group[]
+  command: (command: Command) => void
+}

package/src/extensions/Strike/Strike.ts

@@ -0,0 +1,26 @@
+import type { StrikeOptions as TiptapStrikeOptions } from '@tiptap/extension-strike';
+import { Strike as TiptapStrike } from '@tiptap/extension-strike';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/types';
+
+export interface StrikeOptions extends TiptapStrikeOptions, GeneralOptions<StrikeOptions> {}
+
+export const Strike = TiptapStrike.extend<StrikeOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      button: ({ editor, t }: any) => ({
+        component: ActionButton,
+        componentProps: {
+          action: () => editor.commands.toggleStrike(),
+          isActive: () => editor.isActive('strike') || false,
+          disabled: !editor.can().toggleStrike(),
+          icon: 'Strikethrough',
+          shortcutKeys: ['shift', 'mod', 'S'],
+          tooltip: t('editor.strike.tooltip'),
+        },
+      }),
+    };
+  },
+});

package/src/extensions/Strike/index.ts

@@ -0,0 +1 @@
+export * from './Strike';

package/src/extensions/Subscript/Subscript.ts

@@ -0,0 +1,88 @@
+import type { Extensions } from '@tiptap/core';
+import { Extension } from '@tiptap/core';
+import type { SubscriptExtensionOptions as TiptapSubscriptOptions } from '@tiptap/extension-subscript';
+import { Subscript as TiptapSubscript } from '@tiptap/extension-subscript';
+import type { SuperscriptExtensionOptions as TiptapSuperscriptOptions } from '@tiptap/extension-superscript';
+import { Superscript as TiptapSuperscript } from '@tiptap/extension-superscript';
+
+import { ActionButton } from '@/components';
+import type { ButtonViewReturn, GeneralOptions } from '@/types';
+
+/**
+ * Represents the interface for subscript and superscript options, extending GeneralOptions.
+ */
+export interface SubAndSuperScriptOptions extends GeneralOptions<SubAndSuperScriptOptions> {
+  /**
+   * subscript options or false, indicating whether subscript is enabled
+   *
+   * @default true
+   */
+  subscript: Partial<TiptapSubscriptOptions> | false
+  /**
+   * superscript options or false, indicating whether superscript is enabled
+   *
+   * @default true
+   */
+  superscript: Partial<TiptapSuperscriptOptions> | false
+}
+
+export const SubAndSuperScript = Extension.create<SubAndSuperScriptOptions>({
+  name: 'subAndSuperScript',
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      button: ({ editor, extension, t }) => {
+        const subscript = extension.options.subscript;
+        const superscript = extension.options.superscript;
+
+        const subBtn: ButtonViewReturn = {
+          component: ActionButton,
+          componentProps: {
+            action: () => editor.commands.toggleSubscript(),
+            isActive: () => editor.isActive('subscript') || false,
+            disabled: !editor.can().toggleSubscript(),
+            icon: 'Subscript',
+            tooltip: t('editor.subscript.tooltip'),
+          },
+        };
+
+        const superBtn: ButtonViewReturn = {
+          component: ActionButton,
+          componentProps: {
+            action: () => editor.commands.toggleSuperscript(),
+            isActive: () => editor.isActive('superscript') || false,
+            disabled: !editor.can().toggleSuperscript(),
+            icon: 'Superscript',
+            tooltip: t('editor.superscript.tooltip'),
+          },
+        };
+
+        const items: ButtonViewReturn[] = [];
+
+        if (subscript !== false) {
+          items.push(subBtn);
+        }
+        if (superscript !== false) {
+          items.push(superBtn);
+        }
+
+        return items;
+      },
+    };
+  },
+
+  addExtensions() {
+    const extensions: Extensions = [];
+
+    if (this.options.subscript !== false) {
+      extensions.push(TiptapSubscript.configure(this.options.subscript));
+    }
+
+    if (this.options.superscript !== false) {
+      extensions.push(TiptapSuperscript.configure(this.options.superscript));
+    }
+
+    return extensions;
+  },
+});

package/src/extensions/Subscript/index.ts

@@ -0,0 +1 @@
+export * from './Subscript';

package/src/extensions/Table/Cell.ts

@@ -0,0 +1,131 @@
+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 {
+  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/extensions/Table/Header.ts

@@ -0,0 +1,93 @@
+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/extensions/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/extensions/Table/Table.ts

@@ -0,0 +1,60 @@
+import TiptapTable from '@tiptap/extension-table';
+import type { TableCellOptions } from '@tiptap/extension-table-cell';
+import type { TableHeaderOptions } from '@tiptap/extension-table-header';
+import type { TableRowOptions } from '@tiptap/extension-table-row';
+
+import TableActionButton from '@/extensions/Table/components/TableActionButton';
+import type { GeneralOptions } from '@/types';
+
+import { TableCell } from './Cell';
+import { TableCellBackground } from './cell-background';
+import type { TableCellBackgroundOptions } from './cell-background';
+import { TableHeader } from './Header';
+import { TableRow } from './Row';
+
+export interface TableOptions extends GeneralOptions<TableOptions> {
+  HTMLAttributes: Record<string, any>
+  resizable: boolean
+  handleWidth: number
+  cellMinWidth: number
+  lastColumnResizable: boolean
+  allowTableNodeSelection: boolean
+  /** options for table rows */
+  tableRow: Partial<TableRowOptions>
+  /** options for table headers */
+  tableHeader: Partial<TableHeaderOptions>
+  /** options for table cells */
+  tableCell: Partial<TableCellOptions>
+  /** options for table cell background */
+  tableCellBackground: Partial<TableCellBackgroundOptions>
+}
+export const Table = TiptapTable.extend<TableOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      resizable: true,
+      lastColumnResizable: false,
+      allowTableNodeSelection: false,
+      button: ({ editor, t }: any) => ({
+        component: TableActionButton,
+        componentProps: {
+          disabled: editor.isActive('table') || false,
+          icon: 'Table',
+          tooltip: t('editor.table.tooltip'),
+          editor,
+        },
+      }),
+    };
+  },
+
+  addExtensions() {
+    return [
+      TableRow.configure(this.options.tableRow),
+      TableHeader.configure(this.options.tableHeader),
+      TableCell.configure(this.options.tableCell),
+      TableCellBackground.configure(this.options.tableCellBackground),
+    ];
+  },
+});
+
+export default Table;