reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/TextBubble/components/TextDropdown.tsx

@@ -1,146 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { ChevronDown } from 'lucide-react';
-
-import { Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, icons } from '@/components';
-import { useLocale } from '@/locales';
-
-interface IPropsTextDropdown {
-  editor: any
-  disabled?: boolean
-  color?: string
-  maxHeight?: string | number
-  icon?: any
-  tooltip?: string
-}
-
-function TextDropdown(props: IPropsTextDropdown) {
-  const { t } = useLocale();
-
-  const menus = useMemo(() => {
-    return [
-      {
-        name: 'paragraph',
-        label: t('editor.paragraph.tooltip'),
-        iconName: 'Heading1',
-        isActive: () =>
-          props.editor.isActive('paragraph')
-          && !props.editor.isActive('orderedList')
-          && !props.editor.isActive('bulletList')
-          && !props.editor.isActive('taskList'),
-        action: () => props.editor.chain().focus().clearNodes().run(),
-      },
-      {
-        name: 'heading1',
-        label: t('editor.heading.h1.tooltip'),
-        isActive: () => props.editor.isActive('heading', { level: 1 }),
-        iconName: 'Heading1',
-        action: () => props.editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
-      },
-      {
-        name: 'heading2',
-        label: t('editor.heading.h2.tooltip'),
-        isActive: () => props.editor.isActive('heading', { level: 2 }),
-        iconName: 'Heading2',
-        action: () => props.editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
-      },
-      {
-        name: 'heading3',
-        label: t('editor.heading.h3.tooltip'),
-        isActive: () => props.editor.isActive('heading', { level: 3 }),
-        iconName: 'Heading3',
-        action: () => props.editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
-      },
-      {
-        name: 'bulletList',
-        label: t('editor.bulletlist.tooltip'),
-        isActive: () => props.editor.isActive('bulletList'),
-        iconName: 'List',
-        action: () => props.editor.chain().focus().clearNodes().toggleBulletList().run(),
-      },
-      {
-        name: 'numberedList',
-        label: t('editor.orderedlist.tooltip'),
-        isActive: () => props.editor.isActive('orderedList'),
-        iconName: 'ListOrdered',
-        action: () => props.editor.chain().focus().clearNodes().toggleOrderedList().run(),
-      },
-      {
-        name: 'taskList',
-        label: t('editor.tasklist.tooltip'),
-        isActive: () => props.editor.isActive('taskList'),
-        iconName: 'ListTodo',
-        action: () => props.editor.chain().focus().clearNodes().toggleTaskList().run(),
-      },
-      {
-        name: 'blockquote',
-        label: t('editor.blockquote.tooltip'),
-        isActive: () => props.editor.isActive('blockquote'),
-        iconName: 'TextQuote',
-        action: () => props.editor.chain().focus().clearNodes().toggleBlockquote().run(),
-      },
-      {
-        name: 'codeBlock',
-        label: t('editor.codeblock.tooltip'),
-        isActive: () => props.editor.isActive('codeBlock'),
-        iconName: 'Code2',
-        action: () => props.editor.chain().focus().clearNodes().toggleCodeBlock().run(),
-      },
-    ];
-  }, [props.editor, t]);
-
-  const activeItem = useMemo(() => {
-    return (
-      menus.findLast(item => item.isActive()) ?? {
-        label: 'Empty',
-      }
-    );
-  }, [menus]);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button className="flex h-[32px] gap-1 px-1.5"
-          variant="ghost"
-        >
-          <span className="whitespace-nowrap text-sm font-normal">
-            {' '}
-            {activeItem?.label}
-          </span>
-
-          <ChevronDown className="size-4" />
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="start"
-        className="w-full p-1"
-        hideWhenDetached
-        sideOffset={5}
-      >
-        {menus.map((item, index) => {
-          const Icon = icons[item.iconName as any];
-
-          return (
-            <DropdownMenuCheckboxItem
-              checked={item.isActive?.() || false}
-              className="cursor-pointer"
-              key={`text-bubble-${index}`}
-              onClick={() => item.action()}
-            >
-              <div className="flex items-center gap-2 px-2">
-                <Icon className="h3 w-3" />
-
-                <span>
-                  {' '}
-                  {item.label}
-                </span>
-              </div>
-            </DropdownMenuCheckboxItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default TextDropdown;

package/src/extensions/TextBubble/index.ts

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

package/src/extensions/TextDirection/TextDirection.ts

@@ -1,97 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Extension } from '@tiptap/core';
-
-import TextDirectionButton from '@/extensions/TextDirection/components/TextDirectionButton';
-
-const TextDirection = Extension.create({
-  name: 'text-direction',
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      types: ['heading', 'paragraph'],
-      directions: ['auto', 'ltr', 'rtl'],
-      defaultDirection: 'auto',
-      button({
-        editor,
-        extension,
-        t,
-      }: {
-        editor: any
-        extension: Extension
-        t: (...args: any[]) => string
-      }) {
-        const directions = (extension.options?.directions as any[]) || [];
-
-        const iconMap = {
-          auto: 'TextDirection',
-          ltr: 'LeftToRight',
-          rtl: 'RightToLeft',
-        } as any;
-
-        const items = directions.map(k => ({
-          title: t(`editor.textDirection.${k}.tooltip`),
-          icon: iconMap[k],
-          isActive: () => false,
-          action: () => {
-            if (k === 'auto') {
-              editor.commands?.unsetTextDirection?.();
-              return;
-            }
-
-            editor.commands?.setTextDirection?.(k);
-          },
-          disabled: false,
-        }));
-        const disabled = items.filter(k => k.disabled).length === items.length;
-
-        return {
-          component: TextDirectionButton,
-          componentProps: {
-            icon: 'TextDirection',
-            tooltip: t('editor.textDirection.tooltip'),
-            disabled,
-            items,
-          },
-        };
-      },
-    };
-  },
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          dir: {
-            default: this.options.defaultDirection,
-            parseHTML: (element: any) => {
-              if (element.attributes.dir && this.options.directions.includes(element.attributes.dir)) {
-                return element.attributes.dir.value;
-              } else {
-                return this.options.defaultDirection;
-              }
-            },
-            renderHTML: (attributes) => {
-              return { dir: attributes.dir };
-            },
-          },
-        },
-      },
-    ];
-  },
-  // @ts-expect-error
-  addCommands() {
-    return {
-      setTextDirection: (direction: any) => ({ commands }: any) => {
-        if (!this.options.directions.includes(direction)) {
-          return false;
-        }
-        return this.options.types.every((type: any) => commands.updateAttributes(type, { dir: direction }));
-      },
-      unsetTextDirection: () => ({ commands }: any) => {
-        return this.options.types.every((type: any) => commands.resetAttributes(type, 'dir'));
-      },
-    };
-  },
-});
-
-export { TextDirection };

package/src/extensions/TextDirection/components/TextDirectionButton.tsx

@@ -1,103 +0,0 @@
-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 IPropsTextDirectionButton {
-  editor: any
-  disabled?: boolean
-  color?: string
-  maxHeight?: string | number
-  icon?: any
-  tooltip?: string
-  items?: Item[]
-}
-
-function TextDirectionButton(props: IPropsTextDirectionButton) {
-  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 TextDirectionButton;

package/src/extensions/TextDirection/index.ts

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

package/src/extensions/TrailingNode/TrailingNode.ts

@@ -1,71 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-
-// @ts-ignore
-function nodeEqualsType({ types, node }) {
-  return (Array.isArray(types) && types.includes(node.type)) || node.type === types;
-}
-
-/**
- * Extension based on:
- * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
- * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
- */
-
-export interface TrailingNodeOptions {
-  node: string
-  notAfter: string[]
-}
-
-export const TrailingNode = Extension.create<TrailingNodeOptions>({
-  name: 'trailingNode',
-
-  addOptions() {
-    return {
-      node: 'paragraph',
-      notAfter: ['paragraph'],
-    };
-  },
-
-  addProseMirrorPlugins() {
-    const plugin = new PluginKey(this.name);
-    const disabledNodes = Object.entries(this.editor.schema.nodes)
-      .map(([, value]) => value)
-      .filter(node => this.options.notAfter.includes(node.name));
-
-    return [
-      new Plugin({
-        key: plugin,
-        appendTransaction: (_, __, state) => {
-          const { doc, tr, schema } = state;
-          const shouldInsertNodeAtEnd = plugin.getState(state);
-          const endPosition = doc.content.size;
-          const type = schema.nodes[this.options.node];
-
-          if (!shouldInsertNodeAtEnd) {
-            return;
-          }
-
-          return tr.insert(endPosition, type.create());
-        },
-        state: {
-          init: (_, state) => {
-            const lastNode = state.tr.doc.lastChild;
-
-            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
-          },
-          apply: (tr, value) => {
-            if (!tr.docChanged) {
-              return value;
-            }
-
-            const lastNode = tr.doc.lastChild;
-
-            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
-          },
-        },
-      }),
-    ];
-  },
-});

package/src/extensions/TrailingNode/index.ts

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

package/src/extensions/Twitter/Twitter.ts

@@ -1,161 +0,0 @@
-import { Node, mergeAttributes, nodePasteRule } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-import NodeViewTweet from '@/extensions/Twitter/components/NodeViewTweet';
-import TwitterActiveButton from '@/extensions/Twitter/components/TwitterActiveButton';
-
-const TWITTER_REGEX_GLOBAL = /(https?:\/\/)?(www\.)?x\.com\/(\w{1,15})(\/status\/(\d+))?(\/\S*)?/g;
-const TWITTER_REGEX = /^https?:\/\/(www\.)?x\.com\/(\w{1,15})(\/status\/(\d+))?(\/\S*)?$/;
-
-function isValidTwitterUrl(url: string) {
-  return url.match(TWITTER_REGEX);
-}
-
-interface TwitterOptions {
-  /**
-   * Controls if the paste handler for tweets should be added.
-   * @default true
-   * @example false
-   */
-  addPasteHandler: boolean
-
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  HTMLAttributes: Record<string, any>
-
-  /**
-   * Controls if the twitter node should be inline or not.
-   * @default false
-   * @example true
-   */
-  inline: boolean
-
-  /**
-   * The origin of the tweet.
-   * @default ''
-   * @example 'https://tiptap.dev'
-   */
-  origin: string
-}
-
-/**
- * The options for setting a tweet.
- */
-interface SetTweetOptions {
-  src: string 
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    twitter: {
-      /**
-       * Insert a tweet
-       * @param options The tweet attributes
-       * @example editor.commands.setTweet({ src: 'https://x.com/seanpk/status/1800145949580517852' })
-       */
-      setTweet: (options: SetTweetOptions) => ReturnType
-      updateTweet: (options: SetTweetOptions) => ReturnType
-    }
-  }
-}
-
-/**
- * This extension adds support for tweets.
- */
-export const Twitter = Node.create<TwitterOptions>({
-  name: 'twitter',
-  draggable: true,
-  selectable: true,
-
-  addOptions() {
-    return {
-      addPasteHandler: true,
-      HTMLAttributes: {},
-      inline: false,
-      origin: '',
-      button: ({ editor, t }: any) => ({
-        component: TwitterActiveButton,
-        componentProps: {
-          action: (src: string) => {
-            editor.commands.setTweet({ src });
-          },
-          isActive: () => false,
-          disabled: false,
-          icon: 'Twitter',
-          tooltip: t('editor.twitter.tooltip'),
-          editor,
-        },
-      }),
-    };
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(NodeViewTweet, { attrs: this.options.HTMLAttributes });
-  },
-
-  inline() {
-    return this.options.inline;
-  },
-
-  group() {
-    return this.options.inline ? 'inline' : 'block';
-  },
-
-  addAttributes() {
-    return {
-      src: {
-        default: null,
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'div[data-twitter]',
-      },
-    ];
-  },
-
-  addCommands() {
-    return {
-      setTweet:
-        (options: SetTweetOptions) =>
-          ({ commands }) => {
-            if (!isValidTwitterUrl(options.src)) {
-              return false;
-            }
-
-            return commands.insertContent({
-              type: this.name,
-              attrs: options,
-            });
-          },
-      updateTweet: (options: SetTweetOptions) => ({ commands }: any) => {
-        if (!isValidTwitterUrl(options.src)) {
-          return false;
-        }
-
-        return commands.updateAttributes(this.name, { src: options.src });
-      },
-    };
-  },
-
-  addPasteRules() {
-    if (!this.options.addPasteHandler) {
-      return [];
-    }
-
-    return [
-      nodePasteRule({
-        find: TWITTER_REGEX_GLOBAL,
-        type: this.type,
-        getAttributes: (match) => {
-          return { src: match.input };
-        },
-      }),
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['div', mergeAttributes({ 'data-twitter': '' }, HTMLAttributes)];
-  },
-});

package/src/extensions/Twitter/components/FormEditLinkTwitter.tsx

@@ -1,68 +0,0 @@
-/* eslint-disable no-unsafe-optional-chaining */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { useEffect, useState } from 'react';
-
-import { Button, Input, Label } from '@/components';
-import { Twitter } from '@/extensions/Twitter/Twitter';
-import { useLocale } from '@/locales';
-
-interface IPropsFormEditLinkTwitter {
-  editor: any
-  onSetLink: (src: string) => void
-}
-
-function FormEditLinkTwitter(props: IPropsFormEditLinkTwitter) {
-  const { t } = useLocale();
-
-  const [src, setSrc] = useState('');
-
-  useEffect(() => {
-    if (props?.editor) {
-      const { src: srcInit } = props.editor?.getAttributes(Twitter.name);
-
-      if (srcInit) {
-        setSrc(srcInit);
-      }
-    }
-  }, [props?.editor]);
-
-  function handleSubmit(event: any) {
-    event.preventDefault();
-    event.stopPropagation();
-    props?.onSetLink(src);
-  }
-
-  return (
-    <div className="border-neutral-200 rounded-lg !border bg-white p-2 shadow-sm dark:border-neutral-800 dark:bg-black">
-      <form className="flex flex-col gap-2"
-        onSubmit={handleSubmit}
-      >
-        <Label className="mb-[6px]">
-          {t('editor.link.dialog.text')}
-        </Label>
-
-        <div className="mb-[10px] flex w-full max-w-sm items-center gap-1.5">
-          <div className="relative w-full max-w-sm items-center">
-            <Input
-              className="w-80"
-              onChange={e => setSrc(e.target.value)}
-              placeholder="Text"
-              required
-              type="text"
-              value={src}
-            />
-          </div>
-        </div>
-
-        <Button className="mt-2 self-end"
-          type="submit"
-        >
-          {t('editor.link.dialog.button.apply')}
-        </Button>
-      </form>
-    </div>
-  );
-}
-
-export default FormEditLinkTwitter;

package/src/extensions/Twitter/components/NodeViewTweet.tsx

@@ -1,30 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { NodeViewWrapper, type ReactNodeViewRendererOptions } from '@tiptap/react';
-import { Tweet } from 'react-tweet';
-
-export const TWITTER_REGEX_GLOBAL = /(https?:\/\/)?(www\.)?x\.com\/(\w{1,15})(\/status\/(\d+))?(\/\S*)?/g;
-export const TWITTER_REGEX = /^https?:\/\/(www\.)?x\.com\/(\w{1,15})(\/status\/(\d+))?(\/\S*)?$/;
-
-export function isValidTwitterUrl(url: string) {
-  return url.match(TWITTER_REGEX);
-}
-
-function NodeViewTweet({ node }: { node: Partial<ReactNodeViewRendererOptions> }) {
-  // @ts-expect-error
-  const url = node?.attrs?.src || '';
-  const tweetId = url?.split('/').pop();
-
-  if (!tweetId) {
-    return null;
-  }
-
-  return (
-    <NodeViewWrapper>
-      <div data-twitter="">
-        <Tweet id={tweetId} />
-      </div>
-    </NodeViewWrapper>
-  );
-}
-
-export default NodeViewTweet;