reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

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

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

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

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

package/src/extensions/MoreMark/MoreMark.ts

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

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

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

package/src/extensions/MultiColumn/Column.ts

@@ -0,0 +1,36 @@
+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];
+  },
+});