reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

package/src/extensions/Link/components/LinkViewBlock.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { truncate } from 'lodash-es';
+
+import { ActionButton, Separator } from 'reactjs-tiptap-editor-pro/components';
+import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
+
+interface IPropsLinkViewBlock {
+  editor: any
+  link: string
+  onClear?: any
+  onEdit?: any
+}
+
+function LinkViewBlock(props: IPropsLinkViewBlock) {
+  const { t } = useLocale();
+
+  return (
+    <div className="flex items-center gap-2 p-2 bg-white !border rounded-lg shadow-sm dark:bg-black border-neutral-200 dark:border-neutral-800">
+      <a
+        href={props?.link}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm underline break-all"
+      >
+        {truncate(props?.link, {
+          length: 50,
+          omission: '…',
+        })}
+      </a>
+      {props?.link && <Separator orientation="vertical" className="!h-4" />}
+      <div className="flex flex-nowrap">
+        <ActionButton
+          icon="Pencil"
+          tooltip={t('editor.link.edit.tooltip')}
+          action={() => {
+            props?.onEdit();
+          }}
+          tooltipOptions={{ sideOffset: 15 }}
+        />
+        <ActionButton
+          icon="Unlink"
+          tooltip={t('editor.link.unlink.tooltip')}
+          action={() => {
+            props?.onClear();
+          }}
+          tooltipOptions={{ sideOffset: 15 }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default LinkViewBlock;

package/src/extensions/Link/index.ts

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

package/src/extensions/ListItem/ListItem.ts

@@ -0,0 +1 @@
+export { default } from '@tiptap/extension-list-item';

package/src/extensions/ListItem/index.ts

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

package/src/extensions/Mention/Mention.ts

@@ -0,0 +1,100 @@
+import BulitInMention from '@tiptap/extension-mention';
+// import { getMentionUser } from 'services/user'
+// import { MentionList } from 'reactjs-tiptap-editor-pro/wrappers/mention-list'
+import { ReactRenderer } from '@tiptap/react';
+import tippy from 'tippy.js';
+import { getDatasetAttribute } from 'reactjs-tiptap-editor-pro/utils/dom-dataset';
+import { NodeViewMentionList } from 'reactjs-tiptap-editor-pro/extensions/Mention/components/NodeViewMentionList/NodeViewMentionList';
+
+const MOCK_USERS = [
+  {
+    id: '1',
+    name: 'John Doe',
+  },
+  {
+    id: '2',
+    name: 'Jane Doe',
+  },
+  {
+    id: '3',
+    name: 'Alice',
+  },
+  {
+    id: '4',
+    name: 'Bob',
+  },
+];
+
+const suggestion = {
+  items: async ({ query }: any) => {
+    const data = MOCK_USERS.map(item => item.name);
+    return data.filter(item => item.toLowerCase().startsWith(query.toLowerCase()));
+  },
+
+  render: () => {
+    let component: any;
+    let popup: any;
+
+    return {
+      onStart: (props: any) => {
+        component = new ReactRenderer(NodeViewMentionList, {
+          props,
+          editor: props.editor,
+        });
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        });
+      },
+
+      onUpdate(props: any) {
+        component.updateProps(props);
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        });
+      },
+
+      onKeyDown(props: any) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide();
+
+          return true;
+        }
+
+        return component.ref?.onKeyDown(props);
+      },
+
+      onExit() {
+        popup[0].destroy();
+        component.destroy();
+      },
+    };
+  },
+} as any;
+
+export const Mention = BulitInMention.extend({
+  addAttributes() {
+    return {
+      id: {
+        default: '',
+        parseHTML: getDatasetAttribute('id'),
+      },
+      label: {
+        default: '',
+        parseHTML: getDatasetAttribute('label'),
+      },
+    };
+  },
+}).configure({
+  HTMLAttributes: {
+    class: 'mention',
+  },
+  suggestion,
+});

package/src/extensions/Mention/components/NodeViewMentionList/NodeViewMentionList.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable react/display-name */
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+
+import type { Editor } from '@tiptap/core';
+import clsx from 'clsx';
+import scrollIntoView from 'scroll-into-view-if-needed';
+
+import styles from './index.module.scss';
+
+interface IProps {
+  editor: Editor
+  items: Array<string>
+  command: any
+}
+
+export const NodeViewMentionList: React.FC<IProps> = forwardRef((props, ref) => {
+  const $container: any = useRef<HTMLDivElement>(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const selectItem = (index: any) => {
+    const userName = props.items[index];
+    if (!userName)
+      return;
+    props.command({ id: userName, label: userName });
+  };
+
+  const upHandler = () => {
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+  };
+
+  const downHandler = () => {
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
+
+  const enterHandler = () => {
+    selectItem(selectedIndex);
+  };
+
+  useEffect(() => setSelectedIndex(0), [props.items]);
+
+  useEffect(() => {
+    if (Number.isNaN(selectedIndex + 1))
+      return;
+    const el = $container.current.querySelector(`span:nth-of-type(${selectedIndex + 1})`);
+    el && scrollIntoView(el, { behavior: 'smooth', scrollMode: 'if-needed' });
+  }, [selectedIndex]);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: any) => {
+      if (event.key === 'ArrowUp') {
+        upHandler();
+        return true;
+      }
+
+      if (event.key === 'ArrowDown') {
+        downHandler();
+        return true;
+      }
+
+      if (event.key === 'Enter') {
+        enterHandler();
+        return true;
+      }
+
+      return false;
+    },
+  }));
+
+  return (
+    <div className={clsx('listUsers', styles.listUsers)}>
+      <div ref={$container}>
+        {props.items.length > 0
+          ? (
+            props.items.map((item, index) => (
+              <span
+                className={clsx('itemUser', styles.itemUser, index === selectedIndex ? styles.selectedUser : '')}
+                key={index}
+                onClick={() => selectItem(index)}
+              >
+                {item}
+              </span>
+            ))
+          )
+          : (
+            <div className={clsx('itemUserEmpty', styles.itemUser)}>
+              Empty
+            </div>
+          )}
+      </div>
+    </div>
+  );
+});

package/src/extensions/Mention/components/NodeViewMentionList/index.module.scss

@@ -0,0 +1,38 @@
+.listUsers {
+  width: 160px;
+  max-height: 320px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: 4px;
+  box-shadow: rgb(9 30 66 / 31%) 0 0 1px, rgb(9 30 66 / 25%) 0 4px 8px -2px;
+}
+
+.itemUser {
+  display: flex;
+  width: 100%;
+  padding: 12px 12px 11px;
+  color: rgb(9 30 66);
+  text-decoration: none;
+  cursor: pointer;
+  background-color: rgb(255 255 255);
+  border: 0;
+  border-radius: 0;
+  flex: 0 0 auto;
+  align-items: center;
+
+  &:hover {
+    background-color: #f4f5f7;
+  }
+
+  img {
+    width: 1em;
+    height: 1em;
+  }
+}
+
+.selectedUser {
+  color: rgb(0 82 204);
+  text-decoration: none;
+  background-color: rgb(222 235 255);
+  fill: rgb(222 235 255);
+}

package/src/extensions/Mention/index.ts

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

package/src/extensions/Mermaid/Mermaid.ts

@@ -0,0 +1,177 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import type { CommandProps } from '@tiptap/core';
+import { mergeAttributes } from '@tiptap/core';
+import TiptapImage from '@tiptap/extension-image';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import { MermaidActiveButton } from 'reactjs-tiptap-editor-pro/extensions/Mermaid/components/MermaidActiveButton';
+import { NodeViewMermaid } from 'reactjs-tiptap-editor-pro/extensions/Mermaid/components/NodeViewMermaid/NodeViewMermaid';
+import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mermaid: {
+      setMermaid: (options: any, replace?: any) => ReturnType
+      setAlignImageMermaid: (align: 'left' | 'center' | 'right') => ReturnType
+    }
+  }
+}
+
+export interface MermaidOptions extends GeneralOptions<MermaidOptions> {
+  /** Function for uploading files */
+  upload?: (file: File) => Promise<string>
+}
+
+export const Mermaid = TiptapImage.extend<MermaidOptions>({
+  name: 'mermaid',
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      inline: false,
+      content: '',
+      marks: '',
+      group: 'block',
+      draggable: false,
+      selectable: true,
+      atom: true,
+      HTMLAttributes: {
+        class: 'mermaid',
+      },
+      button: ({ editor, t, extension }: any) => ({
+        component: MermaidActiveButton,
+        componentProps: {
+          action: () => {
+            return true;
+          },
+          isActive: () => false,
+          disabled: false,
+          editor,
+          icon: 'Mermaid',
+          tooltip: t('editor.mermaid.tooltip'),
+          upload: extension?.options?.upload,
+        },
+      }),
+    };
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector('img') as any;
+
+          const width = img?.getAttribute('width');
+
+          return width ? Number.parseInt(width, 10) : 320;
+        },
+        renderHTML: (attributes) => {
+          return {
+            width: attributes.width,
+          };
+        },
+      },
+      height: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector('img') as any;
+
+          const height = img?.getAttribute('height');
+
+          return height ? Number.parseInt(height, 10) : 212;
+        },
+        renderHTML: (attributes) => {
+          return {
+            height: attributes.height,
+          };
+        },
+      },
+      align: {
+        default: 'center',
+        parseHTML: element => element.getAttribute('align'),
+        renderHTML: (attributes) => {
+          return {
+            align: attributes.align,
+          };
+        },
+      },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(NodeViewMermaid);
+  },
+
+  // @ts-ignore
+  addCommands() {
+    return {
+      setMermaid:
+          (
+            options: { src: string, alt?: string },
+            replace?: boolean,
+          ) =>
+            ({ commands, editor }: CommandProps) => {
+              if (replace) {
+                return commands.insertContent({
+                  type: this.name,
+                  attrs: options,
+                });
+              }
+              return commands.insertContentAt(editor.state.selection.anchor, {
+                type: this.name,
+                attrs: options,
+              });
+            },
+
+      setAlignImageMermaid:
+            (align: any) =>
+              ({ commands }: any) => {
+                return commands.updateAttributes(this.name, { align });
+              },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { align } = HTMLAttributes;
+
+    const style = align ? `text-align: ${align};` : '';
+    return [
+      'div', // Parent element
+      {
+        style,
+        class: 'imageMermaid',
+      },
+      [
+        'img',
+        mergeAttributes(
+          // @ts-ignore
+          this.options.HTMLAttributes,
+          HTMLAttributes,
+        ),
+      ],
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'div[class=imageMermaid]',
+        getAttrs: (element) => {
+          const img = element.querySelector('img');
+
+          const width = img?.getAttribute('width');
+          const height = img?.getAttribute('height');
+
+          return {
+            src: img?.getAttribute('src'),
+            alt: img?.getAttribute('alt'),
+            width: width ? Number.parseInt(width, 10) : null,
+            height: height ? Number.parseInt(height, 10) : null,
+            align: img?.getAttribute('align') || element.style.textAlign || null,
+          };
+        },
+      },
+    ];
+  },
+});

package/src/extensions/Mermaid/components/EditMermaidBlock.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useEffect, useRef, useState } from 'react';
+
+import type { Editor } from '@tiptap/core';
+import mermaid from 'mermaid';
+// @ts-ignore
+import svg64 from 'svg64';
+
+import { ActionButton } from 'reactjs-tiptap-editor-pro/components/ActionButton';
+import { Button } from 'reactjs-tiptap-editor-pro/components/ui';
+import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from 'reactjs-tiptap-editor-pro/components/ui/dialog';
+import { Textarea } from 'reactjs-tiptap-editor-pro/components/ui/textarea';
+import { dataURLtoFile } from 'reactjs-tiptap-editor-pro/utils/file';
+import { shortId } from 'reactjs-tiptap-editor-pro/utils/shortId';
+
+interface IProps {
+  editor: Editor, attrs?: any, extension?: any
+}
+
+const defaultCode = 'graph TB\na-->b';
+
+export const EditMermaidBlock: React.FC<IProps> = ({ editor, attrs, extension }) => {
+  const { alt, align } = attrs;
+  const [mermaidCode, setMermaidCode] = useState(decodeURIComponent(alt ?? defaultCode));
+  const [svgCode, setSvgCode] = useState('');
+  const [visible, toggleVisible] = useState(false);
+  const mermaidRef = useRef<HTMLElement | null>(null);
+
+  const upload = extension?.options.upload;
+
+  const renderMermaid = async (value: any) => {
+    try {
+      const { svg } = await mermaid.render('mermaid-svg', value);
+      setSvgCode(svg);
+    } catch {
+      setSvgCode('');
+    }
+  };
+
+  const mermaidInit = () => {
+    mermaid.initialize({
+      darkMode: false,
+      startOnLoad: false,
+      // fontFamily:'',
+      fontSize: 12,
+      theme: 'base',
+    });
+    renderMermaid(mermaidCode);
+  };
+
+  useEffect(() => {
+    if (visible) {
+      mermaidInit();
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (visible) {
+      renderMermaid(mermaidCode);
+    }
+  }, [mermaidCode]);
+
+  const setMermaid = async () => {
+    if (mermaidCode === '') {
+      return;
+    }
+    if (mermaidCode) {
+      const svg = mermaidRef.current!.querySelector('svg') as unknown as HTMLElement;
+      const { width, height } = svg.getBoundingClientRect();
+      const name = `mermaid-${shortId()}.svg`;
+      // const { size } = new Blob([svg.outerHTML], {
+      //   type: 'image/svg+xml',
+      // })
+
+      let src = svg64(svg.outerHTML);
+
+      if (upload) {
+        const file = dataURLtoFile(src, name);
+        src = await upload(file);
+      }
+
+      editor
+        ?.chain()
+        .focus()
+        .setMermaid(
+          {
+            type: 'mermaid',
+            src,
+            alt: encodeURIComponent(mermaidCode),
+            width,
+            height,
+          },
+          !!mermaidCode,
+        )
+        .run();
+      editor?.commands.setAlignImageMermaid(align);
+    }
+    toggleVisible(false);
+  };
+
+  return (
+    <Dialog
+      onOpenChange={toggleVisible}
+      open={visible}
+    >
+      <DialogTrigger asChild>
+        <ActionButton
+          action={() => toggleVisible(true)}
+          icon="Pencil"
+          tooltip="Edit Mermaid"
+        />
+      </DialogTrigger>
+
+      <DialogContent className="z-[99999] !max-w-[1300px]">
+        <DialogTitle>
+          Edit Mermaid
+        </DialogTitle>
+
+        <div style={{ height: '100%', border: '1px solid hsl(var(--border))' }}>
+          <div className="flex gap-[10px] rounded-[10px] p-[10px]">
+            <Textarea
+              autoFocus
+              className="flex-1"
+              defaultValue={defaultCode}
+              onChange={e => setMermaidCode(e.target.value)}
+              placeholder="Text"
+              required
+              rows={10}
+              value={mermaidCode}
+              style={{
+                color: 'hsl(var(--foreground))',
+              }}
+            />
+
+            <div
+              className="flex flex-1 items-center justify-center rounded-[10px] p-[10px]"
+              dangerouslySetInnerHTML={{ __html: svgCode }}
+              ref={mermaidRef as any}
+              style={{ height: '100%', border: '1px solid hsl(var(--border))', minHeight: 500, background: '#fff' }}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={setMermaid}
+            type="button"
+          >
+            Save changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};