reactjs-tiptap-editor-pro 0.2.31 → 0.2.32

package/src/extensions/Attachment/components/NodeViewAttachment/NodeViewAttachment.tsx

@@ -1,155 +0,0 @@
-/* eslint-disable no-constant-binary-expression */
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { NodeViewWrapper } from '@tiptap/react';
-import clsx from 'clsx';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import { useEditableEditor } from 'reactjs-tiptap-editor-pro/store/editableEditor';
-import { extractFileExtension, extractFilename, normalizeFileSize } from 'reactjs-tiptap-editor-pro/utils/file';
-
-import { getFileTypeIcon } from './FileIcon';
-import styles from './index.module.scss';
-
-export function NodeViewAttachment({ editor, node, updateAttributes, deleteNode, extension }: any) {
-  const $upload: any = useRef<HTMLInputElement>(null);
-
-  const isEditable = useEditableEditor();
-
-  const { hasTrigger, fileName, fileSize, fileExt, fileType, url, error } = node.attrs;
-  const [loading, setLoading] = useState(false);
-  const { t } = useLocale();
-
-  const upload = extension?.options?.upload;
-
-  const selectFile = useCallback(() => {
-    if (!isEditable || url)
-      return;
-    isEditable && $upload.current.click();
-  }, [isEditable, url]);
-
-  const handleFile = useCallback(
-    async (e: any) => {
-      const file = e.target.files && e.target.files[0];
-      if (!file)
-        return;
-
-      const fileInfo = {
-        fileName: extractFilename(file.name),
-        fileSize: file.size,
-        fileType: file.type,
-        fileExt: extractFileExtension(file.name),
-      };
-      setLoading(true);
-
-      // if (file.size > FILE_CHUNK_SIZE) {
-      //   toggleShowProgress(true)
-      // }
-
-      try {
-        const url = await upload(file);
-        updateAttributes({ ...fileInfo, url });
-        setLoading(false);
-      } catch (error: any) {
-        updateAttributes({ error: `File upload fail: ${error && error.message}` || 'Unknown error' });
-        setLoading(false);
-
-        $upload.current.value = '';
-      }
-    },
-    [setLoading, updateAttributes],
-  );
-
-  useEffect(() => {
-    if (!url && !hasTrigger) {
-      selectFile();
-      updateAttributes({ hasTrigger: true });
-    }
-  }, [url, hasTrigger, selectFile, updateAttributes]);
-
-  const onDeleteAttachment = useCallback(() => deleteNode(), [editor]);
-
-  if (isEditable && !url) {
-    return (
-      <NodeViewWrapper>
-        <div className={clsx(styles.wrap, 'render-wrapper')}>
-          <p onClick={selectFile}
-            style={{ cursor: 'pointer' }}
-          >
-            {loading
-              ? (
-                <span>
-                  {t('editor.attachment.uploading')}
-                </span>
-              )
-              : (
-                <span>
-                  {t('editor.attachment.please_upload')}
-                </span>
-              )}
-          </p>
-
-          <input hidden
-            onChange={handleFile}
-            ref={$upload}
-            type="file"
-          />
-        </div>
-      </NodeViewWrapper>
-    );
-  }
-
-  if (url) {
-    return (
-      <NodeViewWrapper>
-        <div className={clsx(styles.wrap, 'render-wrapper')}
-          onClick={selectFile}
-        >
-          <div className="flex items-center gap-[4px]">
-            <span>
-              {getFileTypeIcon(fileType)}
-            </span>
-
-            <span>
-              {fileName}
-              .
-              {fileExt}
-            </span>
-
-            <span>
-              (
-              {normalizeFileSize(fileSize)}
-              )
-            </span>
-          </div>
-
-          <ActionButton
-            action={onDeleteAttachment}
-            icon="Trash2"
-            tooltip={t('editor.delete')}
-          />
-        </div>
-      </NodeViewWrapper>
-    );
-  }
-
-  if (error !== 'null') {
-    return (
-      <NodeViewWrapper>
-        <div className={clsx(styles.wrap, 'render-wrapper')}
-          onClick={selectFile}
-        >
-          <p>
-            {error}
-          </p>
-        </div>
-      </NodeViewWrapper>
-    );
-  }
-
-  return <></>;
-}

package/src/extensions/Attachment/components/NodeViewAttachment/index.module.scss

@@ -1,23 +0,0 @@
-.attachment, /* for browser ready HTML */
-.wrap { /* for NodeView */
-  border-width: 1px !important;
-  border-radius: 4px;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 10px 0;
-
-  :global {
-    .attachment__icon {
-      width: 32px;
-      text-align: center;
-    }
-
-    .attachment__icon svg {
-      width: 32px;
-      display: inline-block;
-    }
-  }
-}
-

package/src/extensions/Attachment/index.ts

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

package/src/extensions/BaseKit.ts

@@ -1,253 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import type { AnyExtension } from '@tiptap/core';
-import { Extension } from '@tiptap/core';
-import type { CharacterCountOptions } from '@tiptap/extension-character-count';
-import CharacterCount from '@tiptap/extension-character-count';
-import type { DropcursorOptions } from '@tiptap/extension-dropcursor';
-import { Dropcursor } from '@tiptap/extension-dropcursor';
-import type { FocusOptions } from '@tiptap/extension-focus';
-import Focus from '@tiptap/extension-focus';
-import { Gapcursor } from '@tiptap/extension-gapcursor';
-import type { HardBreakOptions } from '@tiptap/extension-hard-break';
-import { HardBreak } from '@tiptap/extension-hard-break';
-import type { ListItemOptions } from '@tiptap/extension-list-item';
-import { ListItem } from '@tiptap/extension-list-item';
-import type { ParagraphOptions } from '@tiptap/extension-paragraph';
-import { Paragraph } from '@tiptap/extension-paragraph';
-import type { PlaceholderOptions } from '@tiptap/extension-placeholder';
-import { Placeholder } from '@tiptap/extension-placeholder';
-import { Text } from '@tiptap/extension-text';
-import type { TextStyleOptions } from '@tiptap/extension-text-style';
-import { TextStyle } from '@tiptap/extension-text-style';
-
-import { Document } from 'reactjs-tiptap-editor-pro/extensions/Document';
-import { Column, MultiColumn } from 'reactjs-tiptap-editor-pro/extensions/MultiColumn';
-import { Selection } from 'reactjs-tiptap-editor-pro/extensions/Selection';
-import type { TextBubbleOptions } from 'reactjs-tiptap-editor-pro/extensions/TextBubble';
-import { TextBubble } from 'reactjs-tiptap-editor-pro/extensions/TextBubble';
-import type { TrailingNodeOptions } from 'reactjs-tiptap-editor-pro/extensions/TrailingNode';
-import { TrailingNode } from 'reactjs-tiptap-editor-pro/extensions/TrailingNode';
-import { localeActions } from 'reactjs-tiptap-editor-pro/locales';
-
-/**
- * Represents the interface for options in the base toolkit.
- */
-export interface BaseKitOptions {
-  /**
-   * Whether to enable the document option
-   *
-   * @default true
-   */
-  document: false
-  /**
-   * Whether to enable the document option
-   *
-   * @default false
-   */
-  multiColumn?: boolean
-  /**
-   * Whether to enable the text option
-   *
-   * @default true
-   */
-  text: false
-
-  /**
-   * Whether to enable the Gapcursor
-   *
-   * @default true
-   */
-  gapcursor: false
-
-  /**
-   * Dropcursor options or false, indicating whether to enable the drop cursor
-   *
-   * @default true
-   */
-  dropcursor: Partial<DropcursorOptions> | false
-
-  /**
-   * character count options or false, indicating whether to enable character count
-   *
-   * @default true
-   */
-  characterCount: Partial<CharacterCountOptions> | false
-
-  /**
-   * HardBreak options or false, indicating whether to enable hard breaks
-   *
-   * @default true
-   */
-  hardBreak: Partial<HardBreakOptions> | false
-
-  /**
-   * Placeholder options or false, indicating whether to enable placeholders
-   *
-   * @default true
-   */
-  placeholder: Partial<PlaceholderOptions> | false
-
-  /**
-   * Paragraph options or false, indicating whether to enable paragraph functionality
-   *
-   * @default true
-   */
-  paragraph: Partial<ParagraphOptions> | false
-
-  /**
-   * Focus options or false, indicating whether to enable focus functionality
-   *
-   * @default true
-   */
-  focus: Partial<FocusOptions> | false
-
-  /**
-   * ListItem options or false, indicating whether to enable list item functionality
-   *
-   * @default true
-   */
-  listItem: Partial<ListItemOptions> | false
-
-  /**
-   * Text Style options or false, indicating whether to enable text style functionality
-   *
-   * @default true
-   */
-  textStyle: Partial<TextStyleOptions> | false
-
-  /**
-   * Bubble options, taking `BubbleOptions<BaseKitOptions>` as parameters, indicating whether to enable the bubble functionality
-   */
-  // bubble: Partial<BubbleOptions<BaseKitOptions>>;
-  bubble: any
-
-  /**
-   * Iframe options or false, indicating whether to enable the iframe
-   *
-   * @default true
-   */
-  // iframe: Partial<IframeOptions> | false;
-
-  /**
-   * Trailing node options or false, indicating whether to enable the trailing node
-   *
-   * @default true
-   */
-  trailingNode: Partial<TrailingNodeOptions> | false
-  /**
-   * textBubble options or false, indicating whether to enable the textBubble
-   *
-   * @default true
-   */
-  textBubble: Partial<TextBubbleOptions> | false
-  /**
-   * selection options or false, indicating whether to enable the selection
-   *
-   * @default true
-   */
-  selection: any | false
-}
-
-export const BaseKit = Extension.create<BaseKitOptions>({
-  name: 'base-kit',
-
-  addExtensions() {
-    const extensions: AnyExtension[] = [];
-
-    if (this.options.document !== false) {
-      extensions.push(Document.configure());
-    }
-
-    if (this.options.placeholder !== false) {
-      extensions.push(
-        Placeholder.configure({
-          placeholder: ({ node, pos, editor }) => {
-            if (node?.type?.name === 'columns' || node?.content?.size !== 0) {
-              return '';
-            }
-
-            if (node?.type?.name === 'heading') {
-              // @ts-expect-error
-              return `${localeActions.t(`editor.heading.h${node.attrs.level}.tooltip`)}`;
-            }
-            if (node?.type?.name === 'codeBlock' || node?.type?.name === 'table') {
-              return '';
-            }
-            if (editor.extensionManager.extensions.some(ext => ext.name === 'slashCommand')) {
-              return localeActions.t('editor.slash');
-            }
-            if (pos === 0) {
-              return localeActions.t('editor.content');
-            }
-            return localeActions.t('editor.content');
-          },
-          ...this.options.placeholder,
-        }),
-      );
-    }
-
-    if (this.options.focus !== false) {
-      extensions.push(
-        Focus.configure({
-          className: 'focus',
-          ...this.options.focus,
-        }),
-      );
-    }
-
-    if (this.options.text !== false) {
-      extensions.push(Text.configure());
-    }
-    if (this.options.textBubble !== false) {
-      extensions.push(TextBubble.configure());
-    }
-
-    if (this.options.gapcursor !== false) {
-      extensions.push(Gapcursor.configure());
-    }
-
-    if (this.options.dropcursor !== false) {
-      extensions.push(
-        Dropcursor.configure({
-          ...this.options.dropcursor,
-          width: 2,
-          class: 'ProseMirror-dropcursor border-black',
-        }),
-      );
-    }
-
-    if (this.options.characterCount !== false) {
-      extensions.push(CharacterCount.configure(this.options.characterCount));
-    }
-
-    if (this.options.paragraph !== false) {
-      extensions.push(Paragraph.configure(this.options.paragraph));
-    }
-
-    if (this.options.hardBreak !== false) {
-      extensions.push(HardBreak.configure(this.options.hardBreak));
-    }
-
-    if (this.options.listItem !== false) {
-      extensions.push(ListItem.configure(this.options.listItem));
-    }
-
-    if (this.options.textStyle !== false) {
-      extensions.push(TextStyle.configure(this.options.textStyle));
-    }
-
-    if (this.options.trailingNode !== false) {
-      extensions.push(TrailingNode.configure(this.options.trailingNode));
-    }
-
-    if (this.options.selection !== false) {
-      extensions.push(Selection);
-    }
-
-    if (this.options.multiColumn !== false) {
-      extensions.push(Column, MultiColumn);
-    }
-
-    return extensions;
-  },
-});

package/src/extensions/Blockquote/Blockquote.ts

@@ -1,31 +0,0 @@
-import type { BlockquoteOptions as TiptapBlockquoteOptions } from '@tiptap/extension-blockquote';
-import { Blockquote as TiptapBlockquote } from '@tiptap/extension-blockquote';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-
-export interface BlockquoteOptions
-  extends TiptapBlockquoteOptions,
-  GeneralOptions<BlockquoteOptions> {}
-
-export const Blockquote = TiptapBlockquote.extend<BlockquoteOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      HTMLAttributes: {
-        class: 'blockquote',
-      },
-      button: ({ editor, t }: any) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => editor.commands.toggleBlockquote(),
-          isActive: () => editor.isActive('blockquote') || false,
-          disabled: !editor.can().toggleBlockquote(),
-          icon: 'TextQuote',
-          shortcutKeys: ['shift', 'mod', 'B'],
-          tooltip: t('editor.blockquote.tooltip'),
-        },
-      }),
-    };
-  },
-});

package/src/extensions/Blockquote/index.ts

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

package/src/extensions/Bold/Bold.ts

@@ -1,26 +0,0 @@
-import type { BoldOptions as TiptapImageOptions } from '@tiptap/extension-bold';
-import { Bold as TiptapBold } from '@tiptap/extension-bold';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-
-export interface BoldOptions extends TiptapImageOptions, GeneralOptions<BoldOptions> {}
-
-export const Bold = TiptapBold.extend<BoldOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button: ({ editor, t }: any) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => editor.commands.toggleBold(),
-          isActive: () => editor.isActive('bold') || false,
-          disabled: !editor.can().toggleBold(),
-          icon: 'Bold',
-          shortcutKeys: ['mod', 'B'],
-          tooltip: t('editor.bold.tooltip'),
-        },
-      }),
-    };
-  },
-});

package/src/extensions/Bold/index.ts

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

package/src/extensions/BulletList/BulletList.ts

@@ -1,28 +0,0 @@
-import type { BulletListOptions as TiptapBulletListOptions } from '@tiptap/extension-bullet-list';
-import { BulletList as TiptapBulletList } from '@tiptap/extension-bullet-list';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-
-export interface BulletListOptions
-  extends TiptapBulletListOptions,
-  GeneralOptions<BulletListOptions> {}
-
-export const BulletList = TiptapBulletList.extend<BulletListOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button: ({ editor, t }) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => editor.commands.toggleBulletList(),
-          isActive: () => editor.isActive('bulletList') || false,
-          disabled: false,
-          shortcutKeys: ['shift', 'mod', '8'],
-          icon: 'List',
-          tooltip: t('editor.bulletlist.tooltip'),
-        },
-      }),
-    };
-  },
-});

package/src/extensions/BulletList/index.ts

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

package/src/extensions/Clear/Clear.ts

@@ -1,24 +0,0 @@
-import { Node } from '@tiptap/core';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-
-export interface ClearOptions extends GeneralOptions<ClearOptions> {}
-
-export const Clear = Node.create<ClearOptions>({
-  name: 'clear',
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button: ({ editor, t }) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
-          disabled: !editor.can().chain().focus().clearNodes().unsetAllMarks().run(),
-          icon: 'Eraser',
-          tooltip: t('editor.clear.tooltip'),
-        },
-      }),
-    };
-  },
-});

package/src/extensions/Clear/index.ts

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

package/src/extensions/Code/Code.ts

@@ -1,26 +0,0 @@
-import type { CodeOptions as TiptapCodeOptions } from '@tiptap/extension-code';
-import { Code as TiptapCode } from '@tiptap/extension-code';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-
-export interface CodeOptions extends TiptapCodeOptions, GeneralOptions<CodeOptions> {}
-
-export const Code = TiptapCode.extend<CodeOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button: ({ editor, t }) => ({
-        component: ActionButton,
-        componentProps: {
-          action: () => editor.commands.toggleCode(),
-          isActive: () => editor.isActive('code') || false,
-          disabled: !editor.can().toggleCode(),
-          icon: 'Code',
-          shortcutKeys: ['mod', 'E'],
-          tooltip: t('editor.code.tooltip'),
-        },
-      }),
-    };
-  },
-});

package/src/extensions/Code/index.ts

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

package/src/extensions/CodeBlock/CodeBlock.ts

@@ -1,54 +0,0 @@
-import type { BundledLanguage, BundledTheme } from 'shiki';
-import type { CodeBlockOptions as CodeBlockExtOptions } from '@tiptap/extension-code-block';
-import CodeBlockExt from '@tiptap/extension-code-block';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-import { ShikiPlugin } from 'reactjs-tiptap-editor-pro/extensions/CodeBlock/shiki-plugin';
-import CodeBlockActiveButton from 'reactjs-tiptap-editor-pro/extensions/CodeBlock/components/CodeBlockActiveButton';
-import { DEFAULT_LANGUAGE_CODE_BLOCK } from 'reactjs-tiptap-editor-pro/constants';
-import { NodeViewCodeBlock } from 'reactjs-tiptap-editor-pro/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock';
-
-export interface CodeBlockOptions
-  extends GeneralOptions<CodeBlockExtOptions> {
-  languages?: BundledLanguage[]
-  defaultTheme: BundledTheme
-}
-
-export const CodeBlock = CodeBlockExt.extend<CodeBlockOptions>({
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      languages: [],
-      button: ({ editor, t, extension }: any) => {
-        const languages = extension?.options?.languages?.length ? extension?.options?.languages : DEFAULT_LANGUAGE_CODE_BLOCK;
-
-        return {
-          component: CodeBlockActiveButton,
-          componentProps: {
-            action: (language = 'js') => editor.commands.setCodeBlock({
-              language,
-            }),
-            isActive: () => editor.isActive('codeBlock') || false,
-            disabled: !editor.can().toggleCodeBlock(),
-            icon: 'Code2',
-            tooltip: t('editor.codeblock.tooltip'),
-            languages,
-          },
-        };
-      },
-    };
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer(NodeViewCodeBlock);
-  },
-  addProseMirrorPlugins() {
-    return [
-      ...(this.parent?.() || []),
-      ShikiPlugin({
-        name: this.name,
-        defaultLanguage: null,
-        defaultTheme: this.options.defaultTheme,
-      }),
-    ];
-  },
-});