reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/extensions/TableOfContent/TableOfContent.ts

@@ -1,124 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Node, mergeAttributes } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-
-import { NodeViewTableOfContent } from 'reactjs-tiptap-editor-pro/extensions/TableOfContent/components/NodeViewTableOfContent';
-import { TableOfContentActionButton } from 'reactjs-tiptap-editor-pro/extensions/TableOfContent/components/TableOfContentActionButton';
-import { findNode, isTitleNode } from 'reactjs-tiptap-editor-pro/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

@@ -1,116 +0,0 @@
-/* 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 'reactjs-tiptap-editor-pro/locales';
-import { useEditableEditor } from 'reactjs-tiptap-editor-pro/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

@@ -1,27 +0,0 @@
-import React, { useCallback } from 'react';
-
-import type { Editor } from '@tiptap/core';
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components/ActionButton';
-import { TableOfContents } from 'reactjs-tiptap-editor-pro/extensions/TableOfContent/TableOfContent';
-import { useActive } from 'reactjs-tiptap-editor-pro/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

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

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

package/src/extensions/TaskList/TaskList.ts

@@ -1,46 +0,0 @@
-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 'reactjs-tiptap-editor-pro/components';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/TextAlign/TextAlign.ts

@@ -1,68 +0,0 @@
-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 'reactjs-tiptap-editor-pro/extensions/TextAlign/components/TextAlignMenuButton';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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

@@ -1,103 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { ActionButton, IconComponent } from 'reactjs-tiptap-editor-pro/components';
-import { Popover, PopoverContent, PopoverTrigger, Toggle, Tooltip, TooltipContent, TooltipTrigger } from 'reactjs-tiptap-editor-pro/components/ui';
-import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
-import { getShortcutKey } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/TextBubble/TextBubble.ts

@@ -1,22 +0,0 @@
-import { Extension } from '@tiptap/core';
-
-import TextDropdown from './components/TextDropdown';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/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;