reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

package/src/extensions/TableOfContent/TableOfContent.ts

@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Node, mergeAttributes } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import { NodeViewTableOfContent } from '@/extensions/TableOfContent/components/NodeViewTableOfContent';
+import { TableOfContentActionButton } from '@/extensions/TableOfContent/components/TableOfContentActionButton';
+import { findNode, isTitleNode } from '@/utils/node';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    tableOfContents: {
+      setTableOfContents: () => ReturnType
+      removeTableOfContents: () => ReturnType
+    }
+  }
+}
+
+interface Options {
+  onHasOneBeforeInsert?: () => void
+}
+
+export const TableOfContents = Node.create<Options>({
+  name: 'tableOfContents',
+  group: 'block',
+  atom: true,
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      onHasOneBeforeInsert: () => {
+        return;
+      },
+      resizable: true,
+      lastColumnResizable: true,
+      allowTableNodeSelection: false,
+      button: ({ editor, t }: any) => ({
+        component: TableOfContentActionButton,
+        componentProps: {
+          disabled: false,
+          icon: 'BookMarked',
+          tooltip: t('editor.table.tooltip'),
+          editor,
+        },
+      }),
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'toc',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['toc', mergeAttributes(HTMLAttributes)];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(NodeViewTableOfContent);
+  },
+
+  // @ts-expect-error
+  addCommands() {
+    return {
+      setTableOfContents:
+        () =>
+          ({ commands, editor, view }) => {
+            const nodes = findNode(editor, this.name);
+
+            if (nodes.length > 0) {
+              // @ts-expect-error
+              this.options.onHasOneBeforeInsert();
+              return;
+            }
+
+            const titleNode = view.props.state.doc.content.firstChild as any;
+
+            if (isTitleNode(titleNode)) {
+              const pos = ((titleNode.firstChild && titleNode.firstChild.nodeSize) || 0) + 1;
+              return commands.insertContentAt(pos, { type: this.name });
+            }
+
+            return commands.insertContent({
+              type: this.name,
+            });
+          },
+      removeTableOfContents: () =>
+        ({ state, dispatch }: any) => {
+          const { tr } = state;
+          const nodeType = state.schema.nodes.tableOfContents;
+
+          state.doc.descendants((node: any, pos: any) => {
+            if (node.type === nodeType) {
+              const from = pos;
+              const to = pos + node.nodeSize;
+              tr.delete(from, to);
+            }
+          });
+
+          if (tr.docChanged) {
+            dispatch(tr);
+            return true;
+          }
+
+          return false;
+        },
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['heading'],
+        attributes: {
+          id: {
+            default: null,
+          },
+        },
+      },
+    ];
+  },
+});

package/src/extensions/TableOfContent/components/NodeViewTableOfContent.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { useCallback, useEffect, useState } from 'react';
+
+import { NodeViewWrapper } from '@tiptap/react';
+import cls from 'clsx';
+
+import { useLocale } from '@/locales';
+import { useEditableEditor } from '@/store/editableEditor';
+
+import styles from './index.module.scss';
+
+function arrToTree(tocs: any) {
+  const result = [] as any;
+  const levels = [result];
+
+  tocs.forEach((o: any) => {
+    let offset = -1;
+    let parent = levels[o.level + offset];
+
+    while (!parent) {
+      offset -= 1;
+      parent = levels[o.level + offset];
+    }
+
+    parent.push({ ...o, children: (levels[o.level] = []) });
+  });
+
+  return result;
+}
+
+export function NodeViewTableOfContent({ editor }: any) {
+  const isEditable = useEditableEditor();
+  const [items, setItems] = useState([]);
+  const { t } = useLocale();
+
+  const handleUpdate = useCallback(() => {
+    const headings = [] as any;
+    const transaction = editor.state.tr;
+
+    editor.state.doc.descendants((node: any, pos: any) => {
+      if (node.type.name === 'heading') {
+        const id = `heading-${headings.length + 1}`;
+
+        if (node.attrs.id !== id) {
+          transaction.setNodeMarkup(pos, undefined, {
+            ...node.attrs,
+            id,
+          });
+        }
+
+        headings.push({
+          level: node.attrs.level,
+          text: node.textContent,
+          id,
+        });
+      }
+    });
+
+    transaction.setMeta('addToHistory', false);
+    transaction.setMeta('preventUpdate', true);
+    editor.view.dispatch(transaction);
+
+    setItems(headings);
+    editor.eventEmitter && editor.eventEmitter.emit('TableOfContents', arrToTree(headings));
+  }, [editor]);
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    if (!editor.options.editable) {
+      handleUpdate();
+      return;
+    }
+
+    editor.on('update', handleUpdate);
+
+    return () => {
+      editor.off('update', handleUpdate);
+    };
+  }, [editor, handleUpdate]);
+
+  useEffect(() => {
+    handleUpdate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <NodeViewWrapper className={cls('tableOfContent', styles.toc, isEditable && styles.visible)}>
+      {isEditable
+        ? (
+          <div style={{ position: 'relative' }}>
+            <p className="text-[20px] mb-[8px] font-semibold">
+              {t('editor.table_of_content')}
+            </p>
+
+            <ul className={styles.list}>
+              {items.map((item: any, index) => (
+                <li className={styles.item}
+                  key={`table-of-content-${index}`}
+                  style={{ paddingLeft: `${item.level - 1}rem` }}
+                >
+                  <a href={`#${item.id}`}>
+                    {item.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )
+        : null}
+    </NodeViewWrapper>
+  );
+}

package/src/extensions/TableOfContent/components/TableOfContentActionButton.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+
+import type { Editor } from '@tiptap/core';
+import { ActionButton } from '@/components/ActionButton';
+import { TableOfContents } from '@/extensions/TableOfContent/TableOfContent';
+import { useActive } from '@/hooks/useActive';
+
+export function TableOfContentActionButton({ editor, icon, tooltip }: { editor: Editor, tooltip: string, icon: string }) {
+  const isTaskListActive = useActive(editor, TableOfContents.name);
+
+  const tableOfContent = useCallback(() => {
+    if (isTaskListActive) {
+      editor.chain().focus().removeTableOfContents().run();
+      return;
+    }
+    editor.chain().focus().setTableOfContents().run();
+  }, [editor, isTaskListActive]);
+
+  return (
+    <ActionButton
+      action={tableOfContent}
+      isActive={() => isTaskListActive || false}
+      icon={icon}
+      tooltip={tooltip}
+    />
+  );
+}

package/src/extensions/TableOfContent/components/index.module.scss

@@ -0,0 +1,40 @@
+.toc {
+  width: max-content;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  opacity: 0.75;
+
+  &.visible {
+    padding: 0.75rem;
+    margin: 0.75em 0;
+  }
+
+  .list {
+    padding: 0;
+    margin: 0 0 12px;
+    list-style: none;
+
+  }
+
+  .item {
+    a:hover {
+      opacity: 0.5;
+    }
+
+    &--3 {
+      padding-left: 1rem;
+    }
+
+    &--4 {
+      padding-left: 2rem;
+    }
+
+    &--5 {
+      padding-left: 3rem;
+    }
+
+    &--6 {
+      padding-left: 4rem;
+    }
+  }
+}

package/src/extensions/TableOfContent/index.ts

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

package/src/extensions/TaskList/TaskList.ts

@@ -0,0 +1,46 @@
+import type { TaskItemOptions } from '@tiptap/extension-task-item';
+import { TaskItem } from '@tiptap/extension-task-item';
+import type { TaskListOptions as TiptapTaskListOptions } from '@tiptap/extension-task-list';
+import { TaskList as TiptapTaskList } from '@tiptap/extension-task-list';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/types';
+
+/**
+ * Represents the interface for task list options, extending TiptapTaskListOptions and GeneralOptions.
+ */
+export interface TaskListOptions extends TiptapTaskListOptions, GeneralOptions<TaskListOptions> {
+  /** options for task items */
+  taskItem: Partial<TaskItemOptions>
+}
+
+export const TaskList = TiptapTaskList.extend<TaskListOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      HTMLAttributes: {
+        class: 'task-list',
+      },
+      taskItem: {
+        HTMLAttributes: {
+          class: 'task-list-item',
+        },
+      },
+      button: ({ editor, t }) => ({
+        component: ActionButton,
+        componentProps: {
+          action: () => editor.commands.toggleTaskList(),
+          isActive: () => editor.isActive('taskList') || false,
+          disabled: false,
+          icon: 'ListTodo',
+          shortcutKeys: ['shift', 'mod', '9'],
+          tooltip: t('editor.tasklist.tooltip'),
+        },
+      }),
+    };
+  },
+
+  addExtensions() {
+    return [TaskItem.configure(this.options.taskItem)];
+  },
+});

package/src/extensions/TaskList/index.ts

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

package/src/extensions/TextAlign/TextAlign.ts

@@ -0,0 +1,68 @@
+import type { Editor, Extension } from '@tiptap/core';
+import type { TextAlignOptions as TiptapTextAlignOptions } from '@tiptap/extension-text-align';
+import TiptapTextAlign from '@tiptap/extension-text-align';
+
+import TextAlignMenuButton from '@/extensions/TextAlign/components/TextAlignMenuButton';
+import type { GeneralOptions } from '@/types';
+
+type Alignments = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Represents the interface for text align options, extending TiptapTextAlignOptions and GeneralOptions.
+ */
+export interface TextAlignOptions extends TiptapTextAlignOptions, GeneralOptions<TextAlignOptions> {
+  /**
+   * List of available alignment options
+   *
+   * @default ['left', 'center', 'right', 'justify']
+   */
+  alignments: Alignments[]
+}
+export const TextAlign = TiptapTextAlign.extend<TextAlignOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      types: ['heading', 'paragraph', 'list_item', 'title'],
+      button({
+        editor,
+        extension,
+        t,
+      }: {
+        editor: Editor
+        extension: Extension
+        t: (...args: any[]) => string
+      }) {
+        const alignments = (extension.options?.alignments as Alignments[]) || [];
+        const shortcutKeysMap = {
+          left: ['mod', 'Shift', 'L'],
+          center: ['mod', 'Shift', 'E'],
+          right: ['mod', 'Shift', 'R'],
+          justify: ['mod', 'Shift', 'J'],
+        };
+        const iconMap = {
+          left: 'AlignLeft',
+          center: 'AlignCenter',
+          right: 'AlignRight',
+          justify: 'AlignJustify',
+        };
+        const items = alignments.map(k => ({
+          title: t(`editor.textalign.${k}.tooltip`),
+          icon: iconMap[k],
+          shortcutKeys: shortcutKeysMap[k],
+          isActive: () => editor.isActive({ textAlign: k }) || false,
+          action: () => editor.commands?.setTextAlign?.(k),
+          disabled: !editor?.can?.()?.setTextAlign?.(k),
+        }));
+        const disabled = items.filter(k => k.disabled).length === items.length;
+        return {
+          component: TextAlignMenuButton,
+          componentProps: {
+            icon: 'AlignJustify',
+            tooltip: t('editor.textalign.tooltip'),
+            disabled,
+            items,
+          },
+        };
+      },
+    };
+  },
+});

package/src/extensions/TextAlign/components/TextAlignMenuButton.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo } from 'react';
+
+import { ActionButton, IconComponent } from '@/components';
+import { Popover, PopoverContent, PopoverTrigger, Toggle, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui';
+import type { ButtonViewReturnComponentProps } from '@/types';
+import { getShortcutKey } from '@/utils/plateform';
+
+export interface Item {
+  title: string
+  icon?: any
+  isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>
+  action?: ButtonViewReturnComponentProps['action']
+  style?: React.CSSProperties
+  shortcutKeys?: string[]
+  disabled?: boolean
+  divider?: boolean
+  default?: boolean
+}
+interface IPropsTextAlignMenuButton {
+  editor: any
+  disabled?: boolean
+  color?: string
+  maxHeight?: string | number
+  icon?: any
+  tooltip?: string
+  items?: Item[]
+}
+
+function TextAlignMenuButton(props: IPropsTextAlignMenuButton) {
+  const active = useMemo(() => {
+    const find: any = props?.items?.find((k: any) => k.isActive());
+    if (find && !find.default) {
+      return {
+        ...find,
+        icon: find.icon ? find.icon : props.icon,
+      };
+    }
+    const item: Item = {
+      title: props?.tooltip as any,
+      icon: props.icon,
+      isActive: () => false,
+    };
+
+    return item;
+  }, [props]);
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild
+        disabled={props?.disabled}
+      >
+        <ActionButton
+          customClass="!w-12 h-12"
+          disabled={props?.disabled}
+          icon={props?.icon}
+          tooltip={props?.tooltip}
+        >
+          <IconComponent className="ml-1 size-3 text-zinc-500"
+            name="MenuDown"
+          />
+        </ActionButton>
+      </PopoverTrigger>
+
+      <PopoverContent
+        align="start"
+        className="flex w-full min-w-4 flex-row gap-1 !p-[4px]"
+        side="bottom"
+      >
+        {props?.items?.map((item, index) => {
+          return (
+            <Tooltip key={`text-align-${index}`}>
+              <TooltipTrigger asChild>
+                <Toggle
+                  className="size-7 p-1"
+                  data-state={active.title === item.title ? 'on' : 'off'}
+                  onClick={item?.action}
+                  pressed={active.title === item.title}
+                  size="sm"
+                >
+                  {item?.icon && <IconComponent name={item.icon} />}
+                </Toggle>
+              </TooltipTrigger>
+
+              <TooltipContent className="flex flex-col items-center">
+                <span>
+                  {item.title}
+                </span>
+
+                {!!item.shortcutKeys?.length && (
+                  <span>
+                    {item.shortcutKeys?.map(item => getShortcutKey(item)).join(' ')}
+                  </span>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default TextAlignMenuButton;

package/src/extensions/TextAlign/index.ts

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

package/src/extensions/TextBubble/TextBubble.ts

@@ -0,0 +1,22 @@
+import { Extension } from '@tiptap/core';
+
+import TextDropdown from './components/TextDropdown';
+import type { GeneralOptions } from '@/types';
+
+export interface TextBubbleOptions extends GeneralOptions<TextBubbleOptions> {}
+
+export const TextBubble = Extension.create<TextBubbleOptions>({
+  name: 'text-bubble',
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      toolbar: false,
+      button: () => ({
+        component: TextDropdown,
+        componentProps: {},
+      }),
+    };
+  },
+});
+
+export default TextBubble;