reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

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

@@ -1,151 +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, upload?: any
-}
-
-const defaultCode = 'graph TB\na-->b';
-
-export const MermaidActiveButton: React.FC<IProps> = ({ editor, upload }) => {
-  const [mermaidCode, setMermaidCode] = useState(defaultCode);
-  const [svgCode, setSvgCode] = useState('');
-  const [visible, toggleVisible] = useState(false);
-  const mermaidRef = useRef<HTMLElement | null>(null);
-
-  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();
-    }
-    toggleVisible(false);
-  };
-
-  return (
-    <Dialog
-      onOpenChange={toggleVisible}
-      open={visible}
-    >
-      <DialogTrigger asChild>
-        <ActionButton
-          action={() => toggleVisible(true)}
-          icon="Mermaid"
-          tooltip="Mermaid"
-        />
-      </DialogTrigger>
-
-      <DialogContent className="z-[99999] !max-w-[1300px]">
-        <DialogTitle>
-          Mermaid
-        </DialogTitle>
-
-        <div style={{ height: '100%', borderWidth: 1 }}>
-          <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%', borderWidth: 1, minHeight: 500, background: '#fff' }}
-            />
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button
-            onClick={setMermaid}
-            type="button"
-          >
-            Save changes
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};

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

@@ -1,260 +0,0 @@
-/* eslint-disable no-unsafe-optional-chaining */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { NodeViewWrapper, isNumber } from '@tiptap/react';
-import { throttle } from 'lodash-es';
-
-import { IMAGE_MAX_SIZE, IMAGE_MIN_SIZE, IMAGE_THROTTLE_WAIT_TIME } from '@/constants';
-import { clamp } from '@/utils/utils';
-
-interface Size {
-  width: number
-  height: number
-}
-
-const ResizeDirection = {
-  TOP_LEFT: 'tl',
-  TOP_RIGHT: 'tr',
-  BOTTOM_LEFT: 'bl',
-  BOTTOM_RIGHT: 'br',
-};
-
-export function NodeViewMermaid({ editor, node, updateAttributes, getPos, selected }: any) {
-  const [maxSize, setMaxSize] = useState<Size>({
-    width: IMAGE_MAX_SIZE,
-    height: IMAGE_MAX_SIZE,
-  });
-
-  const [originalSize, setOriginalSize] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  const [resizeDirections] = useState<string[]>([
-    ResizeDirection.TOP_LEFT,
-    ResizeDirection.TOP_RIGHT,
-    ResizeDirection.BOTTOM_LEFT,
-    ResizeDirection.BOTTOM_RIGHT,
-  ]);
-
-  const [resizing, setResizing] = useState<boolean>(false);
-
-  const [resizerState, setResizerState] = useState({
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0,
-    dir: '',
-  });
-
-  const { align } = node?.attrs;
-
-  const imgAttrs = useMemo(() => {
-    const { src, alt, width: w, height: h } = node?.attrs;
-
-    const width = isNumber(w) ? `${w}px` : w;
-    const height = isNumber(h) ? `${h}px` : h;
-    return {
-      src: src || undefined,
-      alt: alt || undefined,
-      style: {
-        width: width || undefined,
-        height: height || undefined,
-      },
-    };
-  }, [node?.attrs]);
-
-  const imageMaxStyle = useMemo(() => {
-    const {
-      style: { width },
-    } = imgAttrs;
-
-    return { width: width === '100%' ? width : undefined };
-  }, [imgAttrs]);
-
-  function onImageLoad(e: Record<string, any>) {
-    setOriginalSize({
-      width: e.target.width,
-      height: e.target.height,
-    });
-  }
-
-  // https://github.com/scrumpy/tiptap/issues/361#issuecomment-540299541
-  function selectImage() {
-    editor.commands.setNodeSelection(getPos());
-  }
-
-  const getMaxSize = useCallback(
-    throttle(() => {
-      const { width } = getComputedStyle(editor.view.dom);
-      setMaxSize((prev) => {
-        return {
-          ...prev,
-          width: Number.parseInt(width, 10),
-        };
-      });
-    }, IMAGE_THROTTLE_WAIT_TIME),
-    [editor],
-  );
-
-  function onMouseDown(e: MouseEvent, dir: string) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const originalWidth = originalSize.width;
-    const originalHeight = originalSize.height;
-    const aspectRatio = originalWidth / originalHeight;
-
-    let width = Number(node.attrs.width);
-    let height = Number(node.attrs.height);
-    const maxWidth = maxSize.width;
-
-    if (width && !height) {
-      width = width > maxWidth ? maxWidth : width;
-      height = Math.round(width / aspectRatio);
-    } else if (height && !width) {
-      width = Math.round(height * aspectRatio);
-      width = width > maxWidth ? maxWidth : width;
-    } else if (!width && !height) {
-      width = originalWidth > maxWidth ? maxWidth : originalWidth;
-      height = Math.round(width / aspectRatio);
-    } else {
-      width = width > maxWidth ? maxWidth : width;
-    }
-
-    setResizing(true);
-
-    setResizerState({
-      x: e.clientX,
-      y: e.clientY,
-      w: width,
-      h: height,
-      dir,
-    });
-  }
-
-  const onMouseMove = useCallback(
-    throttle((e: MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (!resizing) {
-        return;
-      }
-
-      const { x, w, dir } = resizerState;
-
-      const dx = (e.clientX - x) * (/l/.test(dir) ? -1 : 1);
-      // const dy = (e.clientY - y) * (/t/.test(dir) ? -1 : 1)
-      const { width: wI, height: hI } = node?.attrs;
-      const ratio = wI / hI;
-
-      const width = clamp(w + dx, IMAGE_MIN_SIZE, maxSize.width);
-      const height = Math.round(width / ratio);
-
-      updateAttributes({
-        width,
-        height,
-      });
-    }, IMAGE_THROTTLE_WAIT_TIME),
-    [resizing, resizerState, maxSize, updateAttributes, node?.attrs],
-  );
-
-  const onMouseUp = useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!resizing) {
-        return;
-      }
-
-      setResizerState({
-        x: 0,
-        y: 0,
-        w: 0,
-        h: 0,
-        dir: '',
-      });
-      setResizing(false);
-
-      selectImage();
-    },
-    [resizing, selectImage],
-  );
-
-  const onEvents = useCallback(() => {
-    document?.addEventListener('mousemove', onMouseMove, true);
-    document?.addEventListener('mouseup', onMouseUp, true);
-  }, [onMouseMove, onMouseUp]);
-
-  const offEvents = useCallback(() => {
-    document?.removeEventListener('mousemove', onMouseMove, true);
-    document?.removeEventListener('mouseup', onMouseUp, true);
-  }, [onMouseMove, onMouseUp]);
-
-  useEffect(() => {
-    if (resizing) {
-      onEvents();
-    } else {
-      offEvents();
-    }
-
-    return () => {
-      offEvents();
-    };
-  }, [resizing, onEvents, offEvents]);
-
-  const resizeOb: ResizeObserver = useMemo(() => {
-    return new ResizeObserver(() => getMaxSize());
-  }, [getMaxSize]);
-
-  useEffect(() => {
-    resizeOb.observe(editor.view.dom);
-
-    return () => {
-      resizeOb.disconnect();
-    };
-  }, [editor.view.dom, resizeOb]);
-
-  return (
-    <NodeViewWrapper className="image-view"
-      style={{ ...imageMaxStyle, width: '100%', textAlign: align }}
-    >
-      <div
-        data-drag-handle
-        draggable="true"
-        style={{ ...imageMaxStyle, background: '#fff' }}
-        className={`image-view__body ${selected ? 'image-view__body--focused' : ''} ${
-          resizing ? 'image-view__body--resizing' : ''
-        }`}
-      >
-        <img
-          alt={imgAttrs.alt}
-          className="image-view__body__image block"
-          height="auto"
-          onClick={selectImage}
-          onLoad={onImageLoad}
-          src={imgAttrs.src}
-          style={imgAttrs.style}
-        />
-
-        {editor.view.editable && (selected || resizing) && (
-          <div className="image-resizer">
-            {resizeDirections?.map((direction) => {
-              return (
-                <span
-                  className={`image-resizer__handler image-resizer__handler--${direction}`}
-                  key={`image-dir-${direction}`}
-                  onMouseDown={(e: any) => onMouseDown(e, direction)}
-                >
-                </span>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </NodeViewWrapper>
-  );
-}

package/src/extensions/Mermaid/index.ts

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

package/src/extensions/MoreMark/MoreMark.ts

@@ -1,102 +0,0 @@
-import { Extension } from '@tiptap/core';
-import type { Extensions } from '@tiptap/core';
-import type { SubscriptExtensionOptions as TiptapSubscriptOptions } from '@tiptap/extension-subscript';
-import { Subscript as TiptapSubscript } from '@tiptap/extension-subscript';
-import type { SuperscriptExtensionOptions as TiptapSuperscriptOptions } from '@tiptap/extension-superscript';
-import { Superscript as TiptapSuperscript } from '@tiptap/extension-superscript';
-
-import type { Item } from '@/extensions/MoreMark/components/ActionMoreButton';
-import ActionMoreButton from '@/extensions/MoreMark/components/ActionMoreButton';
-import type { GeneralOptions } from '@/types';
-
-export interface MoreMarkOptions extends GeneralOptions<MoreMarkOptions> {
-  /**
-   * // 下标
-   *
-   * @default true
-   */
-  subscript: Partial<TiptapSubscriptOptions> | false
-  /**
-   * // 上标
-   *
-   * @default true
-   */
-  superscript: Partial<TiptapSuperscriptOptions> | false
-}
-
-export const MoreMark = Extension.create<MoreMarkOptions>({
-  name: 'moreMark',
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      button({ editor, extension, t }) {
-        const subscript = extension.options.subscript;
-        const superscript = extension.options.superscript;
-        const subBtn: Item = {
-          action: () => editor.commands.toggleSubscript(),
-          isActive: () => editor.isActive('subscript') || false,
-          disabled: !editor.can().toggleSubscript(),
-          icon: 'Subscript',
-          title: t('editor.subscript.tooltip'),
-          shortcutKeys: ['mod', '.'],
-        };
-
-        const superBtn: Item = {
-          action: () => editor.commands.toggleSuperscript(),
-          isActive: () => editor.isActive('superscript') || false,
-          disabled: !editor.can().toggleSuperscript(),
-          icon: 'Superscript',
-          title: t('editor.superscript.tooltip'),
-          shortcutKeys: ['mod', ','],
-        };
-        // const hasCode = hasExtension(editor, 'code');
-
-        const items: Item[] = [];
-
-        if (subscript !== false) {
-          items.push(subBtn);
-        }
-        if (superscript !== false) {
-          items.push(superBtn);
-        }
-        // if (hasCode) {
-        //   const codeBtn: Item = {
-        //     action: () => editor.commands.toggleCode(),
-        //     isActive: () => editor.isActive('code') || false,
-        //     disabled: !editor.can().toggleCode(),
-        //     icon: 'Code',
-        //     title: t('editor.code.tooltip'),
-        //     shortcutKeys: ['mod', 'E'],
-        //   };
-        //   if (hasCode) {
-        //     items.push(codeBtn);
-        //   }
-        // }
-
-        return {
-          component: ActionMoreButton,
-          componentProps: {
-            icon: 'Type',
-            tooltip: t('editor.moremark'),
-            disabled: !editor.isEditable,
-            items,
-          },
-        };
-      },
-    };
-  },
-
-  addExtensions() {
-    const extensions: Extensions = [];
-
-    if (this.options.subscript !== false) {
-      extensions.push(TiptapSubscript.configure(this.options.subscript));
-    }
-
-    if (this.options.superscript !== false) {
-      extensions.push(TiptapSuperscript.configure(this.options.superscript));
-    }
-
-    return extensions;
-  },
-});

package/src/extensions/MoreMark/components/ActionMoreButton.tsx

@@ -1,97 +0,0 @@
-import React, { useMemo } from 'react';
-
-import {
-  ActionButton,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  IconComponent,
-  MenuDown,
-} from '@/components';
-import type { ButtonViewReturnComponentProps } from '@/types';
-import { getShortcutKeys } from '@/utils/plateform';
-
-export interface Item {
-  title: string
-  icon?: any
-  isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>
-  action?: ButtonViewReturnComponentProps['action']
-  style?: React.CSSProperties
-  shortcutKeys?: string[]
-  disabled?: boolean
-  divider?: boolean
-  default?: boolean
-}
-interface IPropsActionMoreButton {
-  editor: any
-  disabled?: boolean
-  color?: string
-  maxHeight?: string | number
-  icon?: any
-  tooltip?: string
-  items?: Item[]
-}
-
-function ActionMoreButton(props: IPropsActionMoreButton) {
-  const active = useMemo(() => {
-    const find: any = props?.items?.find((k: any) => k.isActive());
-    if (find && !find.default) {
-      return {
-        ...find,
-        icon: find?.icon ? find?.icon : props?.icon,
-      };
-    }
-    const item: Item = {
-      title: props.tooltip as any,
-      icon: props.icon,
-      isActive: () => false,
-    };
-
-    return item;
-  }, [props]);
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild
-        disabled={props?.disabled}
-      >
-        <ActionButton
-          customClass="!w-12 h-12"
-          disabled={props?.disabled}
-          icon={props?.icon}
-          tooltip={props?.tooltip}
-        >
-          <MenuDown className="size-3 text-gray-500" />
-        </ActionButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="w-full">
-        {props?.items?.map((item: any, index) => {
-          return (
-            <DropdownMenuCheckboxItem
-              checked={active.title === item.title}
-              className="flex items-center gap-3"
-              key={`more-mark-${index}`}
-              onClick={item.action}
-            >
-              <IconComponent name={item?.icon} />
-
-              <span className="ml-1">
-                {item.title}
-              </span>
-
-              {!!item?.shortcutKeys && (
-                <span className="ml-auto text-xs tracking-widest opacity-60">
-                  {getShortcutKeys(item.shortcutKeys)}
-                </span>
-              )}
-            </DropdownMenuCheckboxItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export default ActionMoreButton;

package/src/extensions/MoreMark/index.ts

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

package/src/extensions/MultiColumn/Column.ts

@@ -1,36 +0,0 @@
-import { Node, mergeAttributes } from '@tiptap/core';
-
-export const Column = Node.create({
-  name: 'column',
-  content: 'block+',
-  isolating: true,
-
-  addOptions() {
-    return {
-      HTMLAttributes: {
-        class: 'column',
-      },
-    };
-  },
-
-  addAttributes() {
-    return {
-      index: {
-        default: 0,
-        parseHTML: element => element.getAttribute('index'),
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'div[class=column]',
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-  },
-});