reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

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

@@ -0,0 +1,155 @@
+/* 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 '@/components';
+import { useLocale } from '@/locales';
+import { useEditableEditor } from '@/store/editableEditor';
+import { extractFileExtension, extractFilename, normalizeFileSize } from '@/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

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

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

package/src/extensions/BaseKit.ts

@@ -0,0 +1,253 @@
+/* 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 '@/extensions/Document';
+import { Column, MultiColumn } from '@/extensions/MultiColumn';
+import { Selection } from '@/extensions/Selection';
+import type { TextBubbleOptions } from '@/extensions/TextBubble';
+import { TextBubble } from '@/extensions/TextBubble';
+import type { TrailingNodeOptions } from '@/extensions/TrailingNode';
+import { TrailingNode } from '@/extensions/TrailingNode';
+import { localeActions } from '@/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

@@ -0,0 +1,31 @@
+import type { BlockquoteOptions as TiptapBlockquoteOptions } from '@tiptap/extension-blockquote';
+import { Blockquote as TiptapBlockquote } from '@tiptap/extension-blockquote';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/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

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

package/src/extensions/Bold/Bold.ts

@@ -0,0 +1,26 @@
+import type { BoldOptions as TiptapImageOptions } from '@tiptap/extension-bold';
+import { Bold as TiptapBold } from '@tiptap/extension-bold';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/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

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

package/src/extensions/BulletList/BulletList.ts

@@ -0,0 +1,28 @@
+import type { BulletListOptions as TiptapBulletListOptions } from '@tiptap/extension-bullet-list';
+import { BulletList as TiptapBulletList } from '@tiptap/extension-bullet-list';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/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

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

package/src/extensions/Clear/Clear.ts

@@ -0,0 +1,24 @@
+import { Node } from '@tiptap/core';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/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

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

package/src/extensions/Code/Code.ts

@@ -0,0 +1,26 @@
+import type { CodeOptions as TiptapCodeOptions } from '@tiptap/extension-code';
+import { Code as TiptapCode } from '@tiptap/extension-code';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/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

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

package/src/extensions/CodeBlock/CodeBlock.ts

@@ -0,0 +1,54 @@
+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 '@/types';
+import { ShikiPlugin } from '@/extensions/CodeBlock/shiki-plugin';
+import CodeBlockActiveButton from '@/extensions/CodeBlock/components/CodeBlockActiveButton';
+import { DEFAULT_LANGUAGE_CODE_BLOCK } from '@/constants';
+import { NodeViewCodeBlock } from '@/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,
+      }),
+    ];
+  },
+});