reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

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

@@ -1,61 +0,0 @@
-import type React from 'react';
-import { useCallback } from 'react';
-
-import { ActionButton, Popover, PopoverContent, PopoverTrigger } from 'reactjs-tiptap-editor-pro/components';
-import { EmojiPicker, EmojiPickerContent, EmojiPickerFooter, EmojiPickerSearch } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/Excalidraw/Excalidraw.ts

@@ -1,123 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Node, mergeAttributes, nodeInputRule } from '@tiptap/core';
-import { ReactNodeViewRenderer } from '@tiptap/react';
-
-import { ExcalidrawActiveButton } from 'reactjs-tiptap-editor-pro/extensions/Excalidraw/components/ExcalidrawActiveButton';
-import NodeViewExcalidraw from 'reactjs-tiptap-editor-pro/extensions/Excalidraw/components/NodeViewExcalidraw/NodeViewExcalidraw';
-import { getDatasetAttribute, nodeAttrsToDataset } from 'reactjs-tiptap-editor-pro/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

@@ -1,138 +0,0 @@
-/* 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 '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 { OPEN_EXCALIDRAW_SETTING_MODAL, cancelSubject, subject } from 'reactjs-tiptap-editor-pro/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

@@ -1,178 +0,0 @@
-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 'reactjs-tiptap-editor-pro/utils'
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components/ActionButton';
-import { Excalidraw } from 'reactjs-tiptap-editor-pro/extensions/Excalidraw/Excalidraw';
-import { clamp } from 'reactjs-tiptap-editor-pro/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

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

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

package/src/extensions/ExportPdf/ExportPdf.ts

@@ -1,25 +0,0 @@
-import { Extension } from '@tiptap/core';
-
-import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
-import { printEditorContent } from 'reactjs-tiptap-editor-pro/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

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

package/src/extensions/ExportWord/ExportWord.ts

@@ -1,87 +0,0 @@
-/* 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 'reactjs-tiptap-editor-pro/components';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-import { downloadFromBlob } from 'reactjs-tiptap-editor-pro/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

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