reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/SlashCommand/groups.ts

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

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

package/src/extensions/SlashCommand/types.ts

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

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

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

package/src/extensions/Subscript/Subscript.ts

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

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

package/src/extensions/Table/Cell.ts

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

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

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