reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

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

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

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

package/src/extensions/TextDirection/TextDirection.ts

@@ -0,0 +1,97 @@
+/* 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

@@ -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 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

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

package/src/extensions/TrailingNode/TrailingNode.ts

@@ -0,0 +1,71 @@
+/* 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

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

package/src/extensions/Twitter/Twitter.ts

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

@@ -0,0 +1,68 @@
+/* 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

@@ -0,0 +1,30 @@
+/* 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;