reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

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

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { truncate } from 'lodash-es';
-
-import { ActionButton, Separator } from '@/components';
-import { useLocale } from '@/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

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

package/src/extensions/ListItem/ListItem.ts

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

package/src/extensions/ListItem/index.ts

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

package/src/extensions/Mention/Mention.ts

@@ -1,100 +0,0 @@
-import BulitInMention from '@tiptap/extension-mention';
-// import { getMentionUser } from 'services/user'
-// import { MentionList } from '@/wrappers/mention-list'
-import { ReactRenderer } from '@tiptap/react';
-import tippy from 'tippy.js';
-import { getDatasetAttribute } from '@/utils/dom-dataset';
-import { NodeViewMentionList } from '@/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

@@ -1,94 +0,0 @@
-/* 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

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

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

package/src/extensions/Mermaid/Mermaid.ts

@@ -1,177 +0,0 @@
-/* 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 '@/extensions/Mermaid/components/MermaidActiveButton';
-import { NodeViewMermaid } from '@/extensions/Mermaid/components/NodeViewMermaid/NodeViewMermaid';
-import type { GeneralOptions } from '@/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

@@ -1,155 +0,0 @@
-/* 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 '@/components/ActionButton';
-import { Button } from '@/components/ui';
-import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { Textarea } from '@/components/ui/textarea';
-import { dataURLtoFile } from '@/utils/file';
-import { shortId } from '@/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>
-  );
-};