reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/components/menus/components/BubbleMenuMedia.tsx

@@ -1,235 +0,0 @@
-import { Fragment, useMemo } from 'react';
-
-import type { Editor } from '@tiptap/react';
-import { BubbleMenu as BubbleMenuReact } from '@tiptap/react';
-
-import { Separator, getBubbleImage, getBubbleImageGif, getBubbleVideo } from 'reactjs-tiptap-editor-pro/components';
-import { Image, ImageGif, Video } from 'reactjs-tiptap-editor-pro/extensions';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-
-interface IPropsBubbleMenu {
-  editor: Editor
-  disabled?: boolean
-}
-
-const tippyOptions = {
-  maxWidth: 'auto',
-  zIndex: 20,
-  appendTo: 'parent',
-  moveTransition: 'transform 0.1s ease-out',
-};
-
-function ItemA({ item, disabled, editor }: any) {
-  const Comp = item.component;
-
-  if (!Comp) {
-    return <></>;
-  }
-
-  return (
-    <Fragment>
-      {item.type === 'divider'
-        ? (
-          <Separator className="!mx-1 !my-2 !h-[16px]"
-            orientation="vertical"
-          />
-        )
-        : (
-          <Comp
-            {...item.componentProps}
-            disabled={disabled || item?.componentProps?.disabled}
-            editor={editor}
-          />
-        )}
-    </Fragment>
-  );
-}
-
-function isImageNode(node: any) {
-  return node.type.name === Image.name;
-}
-
-function isImageGifNode(node: any) {
-  return node.type.name === ImageGif.name;
-}
-
-function isVideoNode(node: any) {
-  return node.type.name === Video.name;
-}
-
-function BubbleMenuImage(props: IPropsBubbleMenu) {
-  const { lang } = useLocale();
-
-  const shouldShow = ({ editor }: any) => {
-    const { selection } = editor.view.state;
-    const { $from, to } = selection;
-    let isImage = false;
-
-    editor.view.state.doc.nodesBetween($from.pos, to, (node: any) => {
-      if (isImageNode(node)) {
-        isImage = true;
-        return false; // Stop iteration if an image is found
-      }
-    });
-
-    return isImage;
-  };
-
-  const items = useMemo(() => {
-    if (props.disabled) {
-      return [];
-    }
-    return getBubbleImage(props.editor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.disabled, props.editor, lang]);
-
-  return (
-    <>
-      <BubbleMenuReact
-        editor={props?.editor}
-        shouldShow={shouldShow}
-        tippyOptions={tippyOptions as any}
-      >
-        {items?.length
-          ? (
-            <div className="pointer-events-auto w-auto select-none rounded-sm !border border-neutral-200 bg-background px-3 py-2 shadow-sm transition-all dark:border-neutral-800">
-              <div className="relative flex h-[26px] flex-nowrap items-center justify-start whitespace-nowrap">
-                {items?.map((item: any, key: any) => {
-                  return (
-                    <ItemA
-                      disabled={props.disabled}
-                      editor={props.editor}
-                      item={item}
-                      key={`bubbleMenu-image-${key}`}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          )
-          : (
-            <></>
-          )}
-      </BubbleMenuReact>
-    </>
-  );
-}
-
-function BubbleMenuImageGif(props: IPropsBubbleMenu) {
-  const { lang } = useLocale();
-
-  const shouldShow = ({ editor }: any) => {
-    const { selection } = editor.view.state;
-    const { $from, to } = selection;
-    let isImage = false;
-
-    editor.view.state.doc.nodesBetween($from.pos, to, (node: any) => {
-      if (isImageGifNode(node)) {
-        isImage = true;
-        return false; // Stop iteration if an image is found
-      }
-    });
-
-    return isImage;
-  };
-
-  const items = useMemo(() => {
-    if (props.disabled) {
-      return [];
-    }
-    return getBubbleImageGif(props.editor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.disabled, props.editor, lang]);
-
-  return (
-    <>
-      <BubbleMenuReact
-        editor={props?.editor}
-        shouldShow={shouldShow}
-        tippyOptions={tippyOptions as any}
-      >
-        {items?.length
-          ? (
-            <div className="pointer-events-auto w-auto select-none rounded-sm !border border-neutral-200 bg-background px-3 py-2 shadow-sm transition-all dark:border-neutral-800">
-              <div className="relative flex h-[26px] flex-nowrap items-center justify-start whitespace-nowrap">
-                {items?.map((item: any, key: any) => {
-                  return (
-                    <ItemA
-                      disabled={props.disabled}
-                      editor={props.editor}
-                      item={item}
-                      key={`bubbleMenu-image-gif-${key}`}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          )
-          : (
-            <></>
-          )}
-      </BubbleMenuReact>
-    </>
-  );
-}
-
-function BubbleMenuVideo(props: IPropsBubbleMenu) {
-  const { lang } = useLocale();
-
-  const shouldShow = ({ editor }: any) => {
-    const { selection } = editor.view.state;
-    const { $from, to } = selection;
-    let isVideo = false;
-
-    editor.view.state.doc.nodesBetween($from.pos, to, (node: any) => {
-      if (isVideoNode(node)) {
-        isVideo = true;
-        return false;
-      }
-    });
-
-    return isVideo;
-  };
-
-  const items = useMemo(() => {
-    if (props.disabled) {
-      return [];
-    }
-
-    return getBubbleVideo(props.editor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.editor, props.disabled, lang]);
-
-  return (
-    <>
-      <BubbleMenuReact
-        editor={props?.editor}
-        shouldShow={shouldShow}
-        tippyOptions={tippyOptions as any}
-      >
-        {items?.length
-          ? (
-            <div className="pointer-events-auto w-auto select-none rounded-sm !border border-neutral-200 bg-background px-3 py-2 shadow-sm transition-all dark:border-neutral-800">
-              <div className="relative flex h-[26px] flex-nowrap items-center justify-start whitespace-nowrap">
-                {items?.map((item: any, key: any) => {
-                  return (
-                    <ItemA
-                      disabled={props.disabled}
-                      editor={props.editor}
-                      item={item}
-                      key={`bubbleMenu-video-${key}`}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          )
-          : (
-            <></>
-          )}
-      </BubbleMenuReact>
-    </>
-  );
-}
-
-export { BubbleMenuImage, BubbleMenuVideo, BubbleMenuImageGif };

package/src/components/menus/components/BubbleMenuMermaid.tsx

@@ -1,128 +0,0 @@
-import { Fragment, useMemo } from 'react';
-
-import type { Editor } from '@tiptap/react';
-import { BubbleMenu as BubbleMenuReact } from '@tiptap/react';
-
-import { Separator, getBubbleMermaid } from 'reactjs-tiptap-editor-pro/components';
-import { Mermaid } from 'reactjs-tiptap-editor-pro/extensions';
-import { EditMermaidBlock } from 'reactjs-tiptap-editor-pro/extensions/Mermaid/components/EditMermaidBlock';
-import { useAttributes } from 'reactjs-tiptap-editor-pro/hooks/useAttributes';
-import { useExtension } from 'reactjs-tiptap-editor-pro/hooks/useExtension';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-
-interface IPropsBubbleMenu {
-  editor: Editor
-  disabled?: boolean
-}
-
-const tippyOptions = {
-  maxWidth: 'auto',
-  zIndex: 20,
-  appendTo: 'parent',
-  moveTransition: 'transform 0.1s ease-out',
-};
-
-function ItemA({ item, disabled, editor }: any) {
-  const Comp = item.component;
-
-  if (!Comp) {
-    return <></>;
-  }
-
-  return (
-    <Fragment>
-      {item.type === 'divider'
-        ? (
-          <Separator className="!mx-1 !my-2 !h-[16px]"
-            orientation="vertical"
-          />
-        )
-        : (
-          <Comp
-            {...item.componentProps}
-            disabled={disabled || item?.componentProps?.disabled}
-            editor={editor}
-          />
-        )}
-    </Fragment>
-  );
-}
-
-function isMermaidNode(node: any) {
-  return node.type.name === 'mermaid';
-}
-
-function BubbleMenuMermaid(props: IPropsBubbleMenu) {
-  const { lang } = useLocale();
-
-  const attrs = useAttributes<any>(props.editor, Mermaid.name);
-
-  const extension = useExtension(props.editor, Mermaid.name);
-
-  const shouldShow = ({ editor }: any) => {
-    const { selection } = editor.view.state;
-    const { $from, to } = selection;
-    let isMermaid = false;
-
-    editor.view.state.doc.nodesBetween($from.pos, to, (node: any) => {
-      if (isMermaidNode(node)) {
-        isMermaid = true;
-        return false; // Stop iteration if an mermaid is found
-      }
-    });
-
-    return isMermaid;
-  };
-
-  const items = useMemo(() => {
-    if (props.disabled) {
-      return [];
-    }
-    return getBubbleMermaid(props.editor);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.disabled, props.editor, lang]);
-
-  return (
-    <>
-      <BubbleMenuReact
-        editor={props?.editor}
-        shouldShow={shouldShow}
-        tippyOptions={tippyOptions as any}
-      >
-        {items?.length
-          ? (
-            <div className="pointer-events-auto w-auto select-none rounded-sm !border border-neutral-200 bg-background px-3 py-2 shadow-sm transition-all dark:border-neutral-800">
-              <div className="relative flex h-[26px] flex-nowrap items-center justify-start whitespace-nowrap">
-                {items?.map((item: any, key: any) => {
-                  if (item.type === 'edit' && attrs?.src) {
-                    return (
-                      <EditMermaidBlock
-                        attrs={attrs}
-                        editor={props.editor}
-                        extension={extension}
-                        key={`bubbleMenu-mermaid-${key}`}
-                      />
-                    );
-                  }
-
-                  return (
-                    <ItemA
-                      disabled={props.disabled}
-                      editor={props.editor}
-                      item={item}
-                      key={`bubbleMenu-mermaid-${key}`}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          )
-          : (
-            <></>
-          )}
-      </BubbleMenuReact>
-    </>
-  );
-}
-
-export { BubbleMenuMermaid };

package/src/components/menus/components/BubbleMenuText.tsx

@@ -1,102 +0,0 @@
-import { useMemo } from 'react';
-
-import type { Editor } from '@tiptap/core';
-import { TextSelection } from '@tiptap/pm/state';
-import { BubbleMenu } from '@tiptap/react';
-
-import { Separator, getBubbleText } from 'reactjs-tiptap-editor-pro/components';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import { type ShouldShowProps } from 'reactjs-tiptap-editor-pro/types';
-
-export interface BubbleMenuTextProps {
-  editor: Editor
-  disabled?: boolean
-  items?: string[]
-}
-
-const tippyOptions = {
-  maxWidth: 'auto',
-  zIndex: 20,
-  moveTransition: 'transform 0.1s ease-out',
-};
-
-export function ItemA({ item, disabled, editor }: any) {
-  const Comp = item.component;
-
-  if (!Comp) {
-    return <></>;
-  }
-
-  return (
-    <Comp
-      {...item.componentProps}
-      disabled={disabled || item?.componentProps?.disabled}
-      editor={editor}
-    />
-  );
-}
-
-function BubbleMenuText(props: BubbleMenuTextProps) {
-  const { t, lang } = useLocale();
-
-  const shouldShow = ({ editor }: ShouldShowProps) => {
-    const { selection } = editor.view.state;
-    const { $from, to } = selection;
-
-    // check content select length is not empty
-    if ($from.pos === to) {
-      return false;
-    }
-
-    return selection instanceof TextSelection;
-  };
-
-  const items = useMemo(() => {
-    if (props.disabled || !props?.editor) {
-      return [];
-    }
-
-    return getBubbleText(props.editor, t, props.items);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.disabled, props.editor, props.items, lang, t]);
-
-  return (
-    <BubbleMenu editor={props?.editor}
-      shouldShow={shouldShow}
-      tippyOptions={tippyOptions as any}
-    >
-      {items?.length
-        ? (
-          <div className="pointer-events-auto w-auto select-none rounded-sm !border border-neutral-200 bg-background px-3 py-2 shadow-sm transition-all dark:border-neutral-800">
-            <div className="relative flex h-[26px] flex-nowrap items-center justify-start gap-[4px] whitespace-nowrap">
-              {items?.map((item: any, key: any) => {
-                if (item?.type === 'divider') {
-                  return (
-                    <Separator
-                      className="!mx-1 !my-2 !h-[16px]"
-                      key={`bubbleMenu-divider-${key}`}
-                      orientation="vertical"
-                    />
-                  );
-                }
-
-                return (
-                  <ItemA
-                    disabled={props.disabled}
-                    editor={props.editor}
-                    item={item}
-                    key={`bubbleMenu-text-${key}`}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        )
-        : (
-          <></>
-        )}
-    </BubbleMenu>
-  );
-}
-
-export { BubbleMenuText };

package/src/components/menus/components/BubbleMenuTwitter.tsx

@@ -1,91 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import type { Editor } from '@tiptap/react';
-import { BubbleMenu } from '@tiptap/react';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components/ActionButton';
-import { Twitter } from 'reactjs-tiptap-editor-pro/extensions';
-import FormEditLinkTwitter from 'reactjs-tiptap-editor-pro/extensions/Twitter/components/FormEditLinkTwitter';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import { deleteNode } from 'reactjs-tiptap-editor-pro/utils/delete-node';
-
-export interface BubbleMenuTwitterProps {
-  editor: Editor
-  disabled?: boolean
-}
-
-function BubbleMenuTwitter({ editor, disabled }: BubbleMenuTwitterProps) {
-  const [showEdit, setShowEdit] = useState(false);
-  const { t } = useLocale();
-
-  const shouldShow = useCallback(({ editor }: { editor: Editor }) => {
-    const isActive = editor.isActive(Twitter.name);
-    return isActive;
-  }, []);
-
-  const onSetLink = (src: string) => {
-    editor.commands.updateTweet({ src });
-    setShowEdit(false);
-  };
-
-  const deleteMe = useCallback(() => deleteNode(Twitter.name, editor), [editor]);
-
-  return (
-    <>
-      <BubbleMenu
-        editor={editor}
-        shouldShow={shouldShow}
-        tippyOptions={{
-          popperOptions: {
-            modifiers: [{ name: 'flip', enabled: false }],
-          },
-          placement: 'bottom-start',
-          offset: [-2, 16],
-          zIndex: 9999,
-          onHidden: () => {
-            setShowEdit(false);
-          },
-        }}
-      >
-        {disabled
-          ? (
-            <></>
-          )
-          : (
-            <>
-              {showEdit
-                ? (
-                  <FormEditLinkTwitter
-                    editor={editor}
-                    onSetLink={onSetLink}
-                  />
-                )
-                : (
-                  <div className="flex items-center gap-2 rounded-lg !border border-neutral-200 bg-white p-2 shadow-sm dark:border-neutral-800 dark:bg-black">
-                    <div className="flex flex-nowrap">
-                      <ActionButton
-                        icon="Pencil"
-                        tooltip={t('editor.link.edit.tooltip')}
-                        tooltipOptions={{ sideOffset: 15 }}
-                        action={() => {
-                          setShowEdit(true);
-                        }}
-                      />
-
-                      <ActionButton
-                        action={deleteMe}
-                        icon="Trash"
-                        tooltip={t('editor.delete')}
-                        tooltipOptions={{ sideOffset: 15 }}
-                      />
-                    </div>
-                  </div>
-                )}
-            </>
-          )}
-      </BubbleMenu>
-    </>
-  );
-}
-
-export { BubbleMenuTwitter };

package/src/components/menus/components/ColumnsBubbleMenu.tsx

@@ -1,59 +0,0 @@
-import { useCallback } from 'react';
-
-import { BubbleMenu } from '@tiptap/react';
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components/ActionButton';
-import { deleteNode } from 'reactjs-tiptap-editor-pro/utils/delete-node';
-import { MultiColumn } from 'reactjs-tiptap-editor-pro/extensions';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-
-export function ColumnsBubbleMenu({ editor }: any) {
-  const { t } = useLocale();
-
-  const shouldShow = useCallback(() => editor.isActive(MultiColumn.name), [editor]);
-  const deleteMe = useCallback(() => deleteNode(MultiColumn.name, editor), [editor]);
-  const addColBefore = useCallback(() => editor.chain().focus().addColBefore().run(), [editor]);
-  const addColAfter = useCallback(() => editor.chain().focus().addColAfter().run(), [editor]);
-  const deleteCol = useCallback(() => editor.chain().focus().deleteCol().run(), [editor]);
-
-  return (
-    <BubbleMenu
-      pluginKey="columns-bubble-menu"
-      editor={editor}
-      shouldShow={shouldShow}
-      tippyOptions={{
-        popperOptions: {
-          modifiers: [{ name: 'flip', enabled: false }],
-        },
-        placement: 'bottom-start',
-        offset: [-2, 16],
-        zIndex: 9999,
-        // onHidden: () => {
-        //   toggleVisible(false)
-        // },
-      }}
-    >
-      <div className="w-auto px-3 py-2 transition-all !border rounded-sm shadow-sm pointer-events-auto select-none border-neutral-200 dark:border-neutral-800 bg-background">
-        <ActionButton
-          action={addColBefore}
-          icon="ColumnAddLeft"
-          tooltip={t('editor.table.menu.insertColumnBefore')}
-        />
-        <ActionButton
-          action={addColAfter}
-          icon="ColumnAddRight"
-          tooltip={t('editor.table.menu.insertColumnAfter')}
-        />
-        <ActionButton
-          action={deleteCol}
-          icon="DeleteColumn"
-          tooltip={t('editor.table.menu.deleteColumn')}
-        />
-        <ActionButton
-          action={deleteMe}
-          icon="Trash2"
-          tooltip={t('editor.table.menu.delete_column')}
-        />
-      </div>
-    </BubbleMenu>
-  );
-}