reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

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

@@ -0,0 +1,128 @@
+import { Fragment, useMemo } from 'react';
+
+import type { Editor } from '@tiptap/react';
+import { BubbleMenu as BubbleMenuReact } from '@tiptap/react';
+
+import { Separator, getBubbleMermaid } from '@/components';
+import { Mermaid } from '@/extensions';
+import { EditMermaidBlock } from '@/extensions/Mermaid/components/EditMermaidBlock';
+import { useAttributes } from '@/hooks/useAttributes';
+import { useExtension } from '@/hooks/useExtension';
+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 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

@@ -0,0 +1,102 @@
+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 '@/components';
+import { useLocale } from '@/locales';
+import { type ShouldShowProps } from '@/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

@@ -0,0 +1,91 @@
+import { useCallback, useState } from 'react';
+
+import type { Editor } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react';
+
+import { ActionButton } from '@/components/ActionButton';
+import { Twitter } from '@/extensions';
+import FormEditLinkTwitter from '@/extensions/Twitter/components/FormEditLinkTwitter';
+import { useLocale } from '@/locales';
+import { deleteNode } from '@/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

@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+
+import { BubbleMenu } from '@tiptap/react';
+import { ActionButton } from '@/components/ActionButton';
+import { deleteNode } from '@/utils/delete-node';
+import { MultiColumn } from '@/extensions';
+import { useLocale } from '@/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>
+  );
+}