reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

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

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

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

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

@@ -0,0 +1,235 @@
+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 };