reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

package/src/extensions/Emoji/components/EmojiPicker/EmojiPicker.tsx

@@ -0,0 +1,61 @@
+import type React from 'react';
+import { useCallback } from 'react';
+
+import { ActionButton, Popover, PopoverContent, PopoverTrigger } from '@/components';
+import { EmojiPicker, EmojiPickerContent, EmojiPickerFooter, EmojiPickerSearch } from '@/components/ui/emoji-picker';
+
+interface IProps {
+  showClear?: boolean
+  onSelectEmoji: (arg: string) => void
+  children: React.ReactNode
+}
+
+function EmojiPickerWrap({ onSelectEmoji, children }: IProps) {
+
+  return (
+    <Popover modal>
+      <PopoverTrigger asChild>
+        {children}
+      </PopoverTrigger>
+
+      <PopoverContent align="start"
+        className="size-full p-2"
+        hideWhenDetached
+        side="bottom"
+      >
+        <EmojiPicker
+          className="!h-[342px]"
+          onEmojiSelect={({ emoji }) => {
+            onSelectEmoji(emoji);
+          }}
+        >
+          <EmojiPickerSearch />
+          <EmojiPickerContent />
+          <EmojiPickerFooter />
+        </EmojiPicker>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function EmojiPickerComponent({ editor, icon, ...props }: any) {
+  const setEmoji = useCallback(
+    (emoji: any) => {
+      const { selection } = editor.state;
+      const { $anchor } = selection;
+      return editor.chain().insertContentAt($anchor.pos, emoji).run();
+    },
+    [editor],
+  );
+
+  return (
+    <EmojiPickerWrap onSelectEmoji={setEmoji}>
+      <ActionButton
+        icon={icon}
+        tooltip={props?.tooltip}
+      />
+    </EmojiPickerWrap>
+  );
+}
+
+export default EmojiPickerComponent;

package/src/extensions/Emoji/index.ts

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

package/src/extensions/Excalidraw/Excalidraw.ts

@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+import { ExcalidrawActiveButton } from '@/extensions/Excalidraw/components/ExcalidrawActiveButton';
+import NodeViewExcalidraw from '@/extensions/Excalidraw/components/NodeViewExcalidraw/NodeViewExcalidraw';
+import { getDatasetAttribute, nodeAttrsToDataset } from '@/utils/dom-dataset';
+
+const DEFAULT_MIND_DATA = { elements: [] };
+
+export interface IExcalidrawAttrs {
+  defaultShowPicker?: boolean
+  createUser?: any
+  width?: number | string
+  height?: number
+  data?: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    excalidraw: {
+      setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType
+    }
+  }
+}
+
+export const Excalidraw = Node.create({
+  name: 'excalidraw',
+  group: 'block',
+  selectable: true,
+  atom: true,
+  draggable: true,
+  inline: false,
+
+  addAttributes() {
+    return {
+      defaultShowPicker: {
+        default: false,
+      },
+      createUser: {
+        default: null,
+      },
+      width: {
+        default: '100%',
+        parseHTML: getDatasetAttribute('width'),
+      },
+      height: {
+        default: 240,
+        parseHTML: getDatasetAttribute('height'),
+      },
+      data: {
+        default: DEFAULT_MIND_DATA,
+        parseHTML: getDatasetAttribute('data', true),
+      },
+    };
+  },
+
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      HTMLAttributes: {
+        class: 'excalidraw',
+      },
+      button: ({ editor }: any) => ({
+        component: ExcalidrawActiveButton,
+        componentProps: {
+          editor,
+        },
+      }),
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[class=excalidraw]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes, node }: any) {
+    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, nodeAttrsToDataset(node))];
+  },
+
+  addCommands() {
+    return {
+      setExcalidraw:
+        options =>
+          ({ tr, commands, chain }) => {
+            options = options || {};
+            options.data = options.data || DEFAULT_MIND_DATA;
+
+            // @ts-ignore
+            if (tr.selection?.node?.type?.name == this.name) {
+              return commands.updateAttributes(this.name, options);
+            }
+
+            return chain()
+              .insertContent({
+                type: this.name,
+                attrs: options,
+              })
+              .run();
+          },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(NodeViewExcalidraw);
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /^\$excalidraw\$$/,
+        type: this.type,
+        getAttributes: () => {
+          return { width: '100%' };
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/Excalidraw/components/ExcalidrawActiveButton.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { useCallback, useEffect, useState } from 'react';
+
+import type { Editor } from '@tiptap/core';
+
+import { ActionButton } from '@/components/ActionButton';
+import { Button } from '@/components/ui';
+import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { OPEN_EXCALIDRAW_SETTING_MODAL, cancelSubject, subject } from '@/utils/_event';
+
+interface IProps {
+  editor: Editor
+}
+
+export const ExcalidrawActiveButton: React.FC<IProps> = ({ editor }) => {
+  const [Excalidraw, setExcalidraw] = useState<any>(null);
+  const [data, setData] = useState({});
+  const [initialData, setInitialData] = useState({ elements: [], appState: { isLoading: false }, files: null });
+  const [visible, toggleVisible] = useState(false);
+  const [loading, toggleLoading] = useState(true);
+  const [error, setError] = useState<any>(null);
+
+  const renderEditor = useCallback(
+    (div: any) => {
+      if (!div)
+        return;
+
+      import('@excalidraw/excalidraw')
+        .then((res) => {
+          setExcalidraw(res.Excalidraw);
+        })
+        .catch(setError)
+        .finally(() => toggleLoading(false));
+    },
+    [toggleLoading],
+  );
+
+  const renderExcalidraw: any = useCallback((app: any) => {
+    setTimeout(() => {
+      app.refresh();
+    });
+  }, []);
+
+  const onChange = useCallback((elements: any, appState: any, files: any) => {
+    // appState.collaborators = [];
+    setData({
+      elements,
+      appState: { isLoading: false },
+      files,
+    });
+  }, []);
+
+  const save = useCallback(() => {
+    if (!Excalidraw) {
+      toggleVisible(false);
+      return;
+    }
+
+    // const currentScrollTop = document.querySelector('main#js-tocs-container')?.scrollTop
+    editor.chain().focus().setExcalidraw({ data }).run();
+    // setTimeout(() => {
+    //   // @ts-expect-error
+    //   document.querySelector('main#js-tocs-container').scrollTop = currentScrollTop
+    // })
+    toggleVisible(false);
+  }, [Excalidraw, editor, data, toggleVisible]);
+
+  useEffect(() => {
+    const handler = (data: any) => {
+      toggleVisible(true);
+      data && setInitialData(data.data);
+    };
+
+    subject(OPEN_EXCALIDRAW_SETTING_MODAL, handler);
+
+    return () => {
+      cancelSubject(OPEN_EXCALIDRAW_SETTING_MODAL, handler);
+    };
+  }, [editor, toggleVisible]);
+
+  return (
+    <Dialog
+      onOpenChange={toggleVisible}
+      open={visible}
+    >
+      <DialogTrigger asChild>
+        <ActionButton
+          action={() => toggleVisible(true)}
+          icon="Excalidraw"
+          tooltip="Excalidraw"
+        />
+      </DialogTrigger>
+
+      <DialogContent className="z-[99999] !max-w-[1300px]">
+        <DialogTitle>
+          Excalidraw
+        </DialogTitle>
+
+        <div style={{ height: '100%', borderWidth: 1 }}>
+          {loading && (
+            <p>
+              Loading...
+            </p>
+          )}
+
+          {error && <p>
+            {(error && error.message) || 'Error'}
+          </p>}
+
+          <div ref={renderEditor}
+            style={{ width: '100%', height: 600 }}
+          >
+            {!loading && !error && Excalidraw
+              ? (
+                <Excalidraw initialData={initialData}
+                  langCode="en"
+                  onChange={onChange}
+                  ref={renderExcalidraw}
+                />
+              )
+              : null}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={save}
+            type="button"
+          >
+            Save changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/extensions/Excalidraw/components/NodeViewExcalidraw/NodeViewExcalidraw.tsx

@@ -0,0 +1,178 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { NodeViewWrapper } from '@tiptap/react';
+import clsx from 'clsx';
+import deepEqual from 'deep-equal';
+import { Resizable } from 're-resizable';
+import VisibilitySensor from 'react-visibility-sensor';
+
+// import { clamp, getEditorContainerDOMSize } from '@/utils'
+import { ActionButton } from '@/components/ActionButton';
+import { Excalidraw } from '@/extensions/Excalidraw/Excalidraw';
+import { clamp } from '@/utils/utils';
+
+import styles from './index.module.scss';
+
+const MIN_ZOOM = 10;
+const MAX_ZOOM = 200;
+const ZOOM_STEP = 15;
+
+const INHERIT_SIZE_STYLE = { width: '100%', height: '100%', maxWidth: '100%' };
+
+function NodeViewExcalidraw({ editor, node, updateAttributes }: any) {
+  const exportToSvgRef: any = useRef(null);
+  // const isEditable = editor.isEditable
+  const isActive = editor.isActive(Excalidraw.name);
+  // const { width: maxWidth } = getEditorContainerDOMSize(editor)
+  const { data, width, height } = node.attrs;
+  const [Svg, setSvg] = useState<SVGElement | null>(null);
+  const [loading, toggleLoading] = useState(true);
+  const [error, setError] = useState<any>(null);
+  const [visible, toggleVisible] = useState(false);
+  const [zoom, setZoomState] = useState(100);
+
+  const onViewportChange = useCallback(
+    (visible: any) => {
+      if (visible) {
+        toggleVisible(true);
+      }
+    },
+    [toggleVisible],
+  );
+
+  const setZoom = useCallback((type: 'minus' | 'plus') => {
+    return () => {
+      setZoomState(currentZoom =>
+        clamp(type === 'minus' ? currentZoom - ZOOM_STEP : currentZoom + ZOOM_STEP, MIN_ZOOM, MAX_ZOOM),
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    let isUnmount = false;
+
+    import('@excalidraw/excalidraw')
+      .then((res) => {
+        if (!isUnmount) {
+          exportToSvgRef.current = res.exportToSvg;
+        }
+      })
+      .catch(err => !isUnmount && setError(err))
+      .finally(() => !isUnmount && toggleLoading(false));
+
+    return () => {
+      isUnmount = true;
+    };
+  }, [toggleLoading, data]);
+
+  useEffect(() => {
+    let isUnmount = false;
+
+    const setContent = async () => {
+      if (isUnmount || loading || error || !visible || !data)
+        return;
+
+      const svg: SVGElement = await exportToSvgRef.current(data);
+
+      if (isUnmount)
+        return;
+
+      svg.setAttribute('width', '100%');
+      svg.setAttribute('height', '100%');
+      svg.setAttribute('display', 'block');
+
+      setSvg(svg);
+    };
+
+    setContent();
+
+    return () => {
+      isUnmount = true;
+    };
+  }, [data, loading, error, visible]);
+
+  const onResize = (size: any) => {
+    updateAttributes({ width: size.width, height: size.height });
+  };
+
+  return (
+    <NodeViewWrapper className={clsx(styles.wrap, isActive && styles.isActive)}>
+      <VisibilitySensor onChange={onViewportChange}>
+        <Resizable
+          size={{ width: Number.parseInt(width), height: Number.parseInt(height) }}
+          onResizeStop={(e, direction, ref, d) => {
+            onResize({
+              width: Number.parseInt(width) + d.width,
+              height: Number.parseInt(height) + d.height,
+            });
+          }}
+        >
+          <div
+            className={clsx(styles.renderWrap, 'render-wrapper')}
+            style={{ ...INHERIT_SIZE_STYLE, overflow: 'hidden' }}
+          >
+            {error && (
+              <div style={INHERIT_SIZE_STYLE}>
+                <p>
+                  {error.message || error}
+                </p>
+              </div>
+            )}
+
+            {loading && <p>
+              Loading...
+            </p>}
+
+            {!loading && !error && visible && (
+              <div
+                dangerouslySetInnerHTML={{ __html: Svg?.outerHTML ?? '' }}
+                style={{
+                  height: '100%',
+                  maxHeight: '100%',
+                  padding: 24,
+                  overflow: 'hidden',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  transform: `scale(${zoom / 100})`,
+                  transition: 'all ease-in-out .3s',
+                }}
+              />
+            )}
+
+            <div className={styles.title}>
+              {/* <Space>
+                <span className={styles.icon}>
+                  <IconMind />
+                </span>
+                绘图
+              </Space> */}
+            </div>
+
+            <div className={styles.handlerWrap}>
+              <ActionButton
+                action={setZoom('minus')}
+                icon="ZoomOut"
+                tooltip="Zoom Out"
+              />
+
+              <ActionButton
+                action={setZoom('plus')}
+                icon="ZoomIn"
+                tooltip="Zoom In"
+              />
+            </div>
+          </div>
+        </Resizable>
+      </VisibilitySensor>
+    </NodeViewWrapper>
+  );
+}
+
+export default React.memo(NodeViewExcalidraw, (prevProps, nextProps) => {
+  if (deepEqual(prevProps.node.attrs, nextProps.node.attrs)) {
+    return true;
+  }
+
+  return false;
+});

package/src/extensions/Excalidraw/components/NodeViewExcalidraw/index.module.scss

@@ -0,0 +1,43 @@
+.wrap {
+  position: relative;
+  max-width: 100%;
+  overflow: visible;
+  line-height: 0;
+
+  .renderWrap {
+    border: 1px dashed hsl(var(--border)) !important;
+    border-radius: 6px;
+
+    &::after {
+      background-color: transparent !important;
+    }
+  }
+
+  .title {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 2;
+
+    .icon {
+      display: flex;
+      width: 18px;
+      height: 18px;
+      color: #fff;
+      background-color: #f80;
+      border-radius: 2px;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .handlerWrap {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    z-index: 2;
+    padding: 2px 4px;
+    border: 1px solid hsl(var(--border));
+    border-radius: 6px;
+  }
+}

package/src/extensions/Excalidraw/index.ts

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

package/src/extensions/ExportPdf/ExportPdf.ts

@@ -0,0 +1,25 @@
+import { Extension } from '@tiptap/core';
+
+import { ActionButton } from '@/components';
+import { printEditorContent } from '@/utils/pdf';
+
+export const ExportPdf = Extension.create<any>({
+  name: 'exportPdf',
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      button: ({ editor, t }: any) => ({
+        component: ActionButton,
+        componentProps: {
+          action: () => {
+            printEditorContent(editor);
+          },
+          icon: 'ExportPdf',
+          tooltip: t('editor.exportPdf.tooltip'),
+          isActive: () => false,
+          disabled: false,
+        },
+      }),
+    };
+  },
+});

package/src/extensions/ExportPdf/index.ts

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

package/src/extensions/ExportWord/ExportWord.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { Extension } from '@tiptap/core';
+import { Packer, WidthType } from 'docx';
+import { DocxSerializer, defaultMarks, defaultNodes } from 'prosemirror-docx';
+
+import { ActionButton } from '@/components';
+import type { GeneralOptions } from '@/types';
+import { downloadFromBlob } from '@/utils/download';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    exportWord: {
+      exportToWord: () => ReturnType
+    }
+  }
+}
+export interface ExportWordOptions extends GeneralOptions<ExportWordOptions> {}
+
+const nodeSerializer = {
+  ...defaultNodes,
+  hardBreak: defaultNodes.hard_break,
+  codeBlock: defaultNodes.code_block,
+  orderedList: defaultNodes.ordered_list,
+  listItem: defaultNodes.list_item,
+  bulletList: defaultNodes.bullet_list,
+  horizontalRule: defaultNodes.horizontal_rule,
+  // Requirement Buffer on browser
+  image(state: any, node: any) {
+    // No image
+    state.renderInline(node);
+    state.closeBlock(node);
+  },
+  table(state: any, node: any) {
+    state.table(node, {
+      tableOptions: {
+        width: {
+          size: 100,
+          type: WidthType.PERCENTAGE,
+        },
+      },
+    });
+  },
+};
+const docxSerializer = new DocxSerializer(nodeSerializer, defaultMarks);
+
+export const ExportWord = Extension.create<ExportWordOptions>({
+  name: 'exportWord',
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      button: ({ editor, t }: any) => ({
+        component: ActionButton,
+        componentProps: {
+          icon: 'ExportWord',
+          action: () => {
+            editor?.commands.exportToWord();
+          },
+          tooltip: t('editor.exportWord.tooltip'),
+          isActive: () => false,
+          disabled: false,
+        },
+      }),
+    };
+  },
+  // @ts-expect-error
+  addCommands() {
+    return {
+      exportToWord:
+        () =>
+          async ({ editor }) => {
+            const opts: any = {
+              getImageBuffer: async (src: string) => {
+                const response = await fetch(src);
+                const arrayBuffer = await response.arrayBuffer();
+                return new Uint8Array(arrayBuffer);
+              },
+            };
+
+            const wordDocument = docxSerializer.serialize(editor.state.doc as any, opts);
+
+            Packer.toBlob(wordDocument).then(blob => downloadFromBlob(new Blob([blob]), 'export-document.docx'));
+
+            return true;
+          },
+    };
+  },
+});

package/src/extensions/ExportWord/index.ts

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