reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/components/menus/components/BubbleMenuIframe.tsx

@@ -1,143 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { BubbleMenu } from '@tiptap/react';
-import { useAttributes } from '@/hooks/useAttributes';
-import { ActionButton } from '@/components/ActionButton';
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Button, Input } from '@/components/ui';
-import { SizeSetter } from '@/components/SizeSetter/SizeSetter';
-import { useLocale } from '@/locales';
-import type { IIframeAttrs } from '@/extensions/Iframe';
-import { Iframe } from '@/extensions/Iframe';
-import { deleteNode } from '@/utils/delete-node';
-
-export function BubbleMenuIframe({ editor }: any) {
-  const { t } = useLocale();
-  const { width, height, url } = useAttributes<IIframeAttrs>(editor, Iframe.name, {
-    width: 0,
-    height: 0,
-    url: '',
-    defaultShowPicker: false,
-  });
-  const [visible, toggleVisible] = useState(false);
-  const [formUrl, setFormUrl] = useState('');
-
-  const handleCancel = useCallback(() => {
-    toggleVisible(false);
-  }, [toggleVisible]);
-
-  useEffect(() => {
-    if (visible)
-      setFormUrl(url as any);
-  }, [visible, url]);
-
-  const handleOk = useCallback(() => {
-    editor
-      .chain()
-      .updateAttributes(Iframe.name, {
-        url: formUrl,
-      })
-      .setNodeSelection(editor.state.selection.from)
-      .focus()
-      .run();
-    toggleVisible(false);
-  }, [editor, formUrl, toggleVisible]);
-
-  const visitLink = useCallback(() => {
-    window.open(url, '_blank');
-  }, [url]);
-
-  const openEditLinkModal = useCallback(() => {
-    toggleVisible(true);
-  }, [toggleVisible]);
-
-  const setSize = useCallback(
-    (size: any) => {
-      editor.chain().updateAttributes(Iframe.name, size).setNodeSelection(editor.state.selection.from).focus().run();
-    },
-    [editor],
-  );
-  const shouldShow = useCallback(() => editor.isActive(Iframe.name) && !url, [editor, url]);
-  const deleteMe = useCallback(() => deleteNode(Iframe.name, editor), [editor]);
-
-  return (
-    <>
-      <BubbleMenu
-        className="bubble-menu"
-        editor={editor}
-        pluginKey="iframe-bubble-menu"
-        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={visitLink}
-            icon="Eye"
-            tooltip="Visit Link"
-          />
-          <ActionButton
-            action={openEditLinkModal}
-            icon="Pencil"
-            tooltip="Open Edit Link"
-          />
-
-          <SizeSetter width={width as any} height={height as any} onOk={setSize}>
-            <ActionButton
-              icon="Settings"
-              tooltip={t('editor.settings')}
-            />
-          </SizeSetter>
-
-          <ActionButton
-            action={deleteMe}
-            icon="Trash2"
-            tooltip={t('editor.delete')}
-          />
-        </div>
-      </BubbleMenu>
-
-      <Dialog
-        open={visible}
-        onOpenChange={toggleVisible}
-      >
-        <DialogTrigger />
-
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              Edit Link Iframe
-            </DialogTitle>
-          </DialogHeader>
-
-          <Input
-            value={formUrl}
-            onInput={(e: any) => setFormUrl(e.target.value)}
-            type="url"
-            autoFocus
-            placeholder="Enter link"
-          />
-
-          <DialogFooter>
-            <Button onClick={handleCancel}>
-              Cancel
-            </Button>
-            <Button onClick={handleOk}>
-              OK
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

package/src/components/menus/components/BubbleMenuKatex.tsx

@@ -1,136 +0,0 @@
-import { BubbleMenu } from '@tiptap/react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { HelpCircle, Pencil, Trash2 } from 'lucide-react';
-import katex from 'katex';
-import { Katex } from '@/extensions';
-import { deleteNode } from '@/utils/delete-node';
-import { useAttributes } from '@/hooks/useAttributes';
-import type { IKatexAttrs } from '@/extensions/Katex';
-import { Textarea } from '@/components/ui/textarea';
-import { ActionButton } from '@/components/ActionButton';
-import { Button } from '@/components/ui';
-
-function BubbleMenuKatex({ editor, ...props }: any) {
-  const attrs = useAttributes<IKatexAttrs>(editor, Katex.name, {
-    text: '',
-    defaultShowPicker: false,
-  });
-  const { text, defaultShowPicker } = attrs;
-
-  const [currentValue, setCurrentValue] = useState('');
-  const [visible, toggleVisible] = useState(false);
-
-  const shouldShow = useCallback(() => editor.isActive(Katex.name), [editor]);
-
-  const deleteMe = useCallback(() => deleteNode(Katex.name, editor), [editor]);
-
-  const submit = useCallback(() => {
-    editor.chain().focus().setKatex({ text: currentValue }).run();
-    toggleVisible(false);
-  }, [editor, currentValue]);
-
-  useEffect(() => {
-    if (defaultShowPicker) {
-      toggleVisible(true);
-      editor.chain().updateAttributes(Katex.name, { defaultShowPicker: false }).focus().run();
-    }
-  }, [editor, defaultShowPicker, toggleVisible]);
-
-  useEffect(() => {
-    if (visible)
-      setCurrentValue(text || '');
-  }, [visible]);
-
-  const formatText = useMemo(() => {
-    try {
-      return katex.renderToString(`${currentValue}`);
-    } catch {
-      return currentValue;
-    }
-  }, [currentValue]);
-
-  const previewContent = useMemo(
-    () => {
-      if (`${currentValue}`.trim()) {
-        return (
-          <span contentEditable={false} dangerouslySetInnerHTML={{ __html: formatText || '' }}></span>
-        );
-      }
-
-      return null;
-    },
-    [currentValue, formatText],
-  );
-
-  return (
-    <BubbleMenu
-      editor={editor}
-      pluginKey="Katex-bubble-menu"
-      shouldShow={shouldShow}
-      tippyOptions={{
-        popperOptions: {
-          modifiers: [{ name: 'flip', enabled: false }],
-        },
-        placement: 'bottom-start',
-        offset: [-2, 16],
-        zIndex: 9999,
-        onHidden: () => {
-          toggleVisible(false);
-        },
-      }}
-    >
-      {props?.disabled
-        ? (
-          <></>
-        )
-        : (
-          <div className="p-2 bg-white !border rounded-lg shadow-sm dark:bg-black border-neutral-200 dark:border-neutral-800">
-            {visible
-              ? (
-                <>
-                  <Textarea
-                    value={currentValue}
-                    onChange={e => setCurrentValue(e.target.value)}
-                    autoFocus
-                    placeholder="Formula text"
-                    rows={3}
-                    defaultValue={text}
-                    style={{ marginBottom: 8 }}
-                  />
-
-                  {previewContent && (
-                    <div className="my-[10px] p-[10px] rounded-[6px] !border-[1px] whitespace-nowrap overflow-auto">
-                      {previewContent}
-                    </div>
-                  )}
-
-                  <div className="flex items-center justify-between gap-[6px]">
-                    <Button onClick={submit} className="flex-1">
-                      Submit
-                    </Button>
-
-                    <a href="https://katex.org/docs/supported" target="_blank" rel="noreferrer noopener">
-                      <HelpCircle size={16} />
-                    </a>
-                  </div>
-                </>
-              )
-              : (
-                <div className="flex items-center justify-center gap-[6px]">
-                  <ActionButton tooltip="Edit" action={() => toggleVisible(!visible)}>
-                    <Pencil size={16} />
-                  </ActionButton>
-
-                  <ActionButton tooltip="Delete" action={deleteMe}>
-                    <Trash2 size={16} />
-                  </ActionButton>
-                </div>
-              )}
-          </div>
-        )}
-
-    </BubbleMenu>
-  );
-}
-
-export default BubbleMenuKatex;

package/src/components/menus/components/BubbleMenuLink.tsx

@@ -1,99 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import type { Editor } from '@tiptap/react';
-import { BubbleMenu } from '@tiptap/react';
-
-import LinkEditBlock from '@/extensions/Link/components/LinkEditBlock';
-import LinkViewBlock from '@/extensions/Link/components/LinkViewBlock';
-
-export interface BubbleMenuLinkProps {
-  editor: Editor
-  disabled?: boolean
-}
-
-function BubbleMenuLink({ editor, disabled }: BubbleMenuLinkProps) {
-  const [showEdit, setShowEdit] = useState(false);
-
-  const link = useMemo(() => {
-    const { href: link } = editor.getAttributes('link');
-    return link as string;
-  }, [editor]);
-
-  const shouldShow = useCallback(({ editor }: { editor: Editor }) => {
-    const isActive = editor.isActive('link');
-    return isActive;
-  }, []);
-
-  const onSetLink = (url: string, text?: string, openInNewTab?: boolean) => {
-    editor
-      .chain()
-      .extendMarkRange('link')
-      .insertContent({
-        type: 'text',
-        text,
-        marks: [
-          {
-            type: 'link',
-            attrs: {
-              href: url,
-              target: openInNewTab ? '_blank' : '',
-            },
-          },
-        ],
-      })
-      .setLink({ href: url })
-      .focus()
-      .run();
-    setShowEdit(false);
-  };
-
-  const unSetLink = useCallback(() => {
-    editor.chain().extendMarkRange('link').unsetLink().focus().run();
-    setShowEdit(false);
-  }, [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
-                ? (
-                  <LinkEditBlock onSetLink={onSetLink} editor={editor} />
-                )
-                : (
-                  <LinkViewBlock
-                    editor={editor}
-                    onClear={unSetLink}
-                    onEdit={() => {
-                      setShowEdit(true);
-                    }}
-                    link={link}
-                  />
-                )}
-            </>
-          )}
-      </BubbleMenu>
-    </>
-  );
-}
-
-export { BubbleMenuLink };

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 '@/components';
-import { Image, ImageGif, Video } from '@/extensions';
-import { useLocale } from '@/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 };