reactjs-tiptap-editor-pro 0.2.31 → 0.2.32

package/src/extensions/Color/components/ColorActionButton.tsx

@@ -1,104 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import type { Editor } from '@tiptap/react';
-import { debounce } from 'lodash-es';
-
-import { ActionButton, Button, ColorPicker } from 'reactjs-tiptap-editor-pro/components';
-import { IconComponent } from 'reactjs-tiptap-editor-pro/components/icons';
-import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/types';
-
-interface ColorActionButtonProps {
-  editor: Editor
-  colors?: string[]
-  defaultColor?: string
-  icon?: React.ReactNode
-  tooltip?: string
-  disabled?: boolean
-  action?: ButtonViewReturnComponentProps['action']
-  isActive?: ButtonViewReturnComponentProps['isActive']
-}
-
-interface IconCProps {
-  fill?: string
-}
-
-function IconC({ fill }: IconCProps) {
-  return (
-    <svg
-      width="18px"
-      height="18px"
-      viewBox="0 0 240 240"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
-        <g transform="translate(0.000000, 0.500000)">
-          <g transform="translate(39.000000, 17.353553)">
-            <path
-              d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
-              id="矩形"
-              fill={fill || '#DF2A3F'}
-              fillRule="evenodd"
-            />
-            <path
-              d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
-              id="路径-21"
-              fill="currentColor"
-              fillRule="nonzero"
-            />
-            <path
-              d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
-              id="路径-22"
-              fill="currentColor"
-              fillRule="nonzero"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-}
-
-function ColorActionButton(props: ColorActionButtonProps) {
-  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);
-
-  function onChange(color: string | undefined) {
-    props.action?.(color);
-  }
-
-  function toggleColor() {
-    props.action?.(selectedColor);
-  }
-
-  const setSelectedColorDebounce = useCallback(
-    debounce((color: string | undefined) => {
-      setSelectedColor(color);
-    }, 350),
-    [],
-  );
-
-  return (
-    <div className="flex items-center h-[32px]">
-      <ActionButton tooltip={props?.tooltip} disabled={props?.disabled} action={toggleColor}>
-        <span className="flex items-center justify-center text-sm">
-          <IconC fill={selectedColor} />
-        </span>
-      </ActionButton>
-
-      <ColorPicker
-        selectedColor={selectedColor}
-        setSelectedColor={setSelectedColorDebounce}
-        onChange={onChange}
-        disabled={props?.disabled}
-        colors={props?.colors}
-        defaultColor={props?.defaultColor}
-      >
-        <Button variant="ghost" size="icon" className="r!ichtext-h-[32px] !w-3" disabled={props?.disabled}>
-          <IconComponent className="!w-3 !h-3 text-zinc-500" name="MenuDown" />
-        </Button>
-      </ColorPicker>
-    </div>
-  );
-}
-
-export default ColorActionButton;

package/src/extensions/Color/index.ts

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

package/src/extensions/Document/Document.ts

@@ -1,8 +0,0 @@
-import { Document as TiptapDocument } from '@tiptap/extension-document';
-
-export const Document = TiptapDocument.extend({
-  content: '(block|columns)+',
-  // echo editor is a block editor
-});
-
-export default Document;

package/src/extensions/Document/index.ts

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

package/src/extensions/Drawer/Drawer.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 { DrawerActiveButton } from 'reactjs-tiptap-editor-pro/extensions/Drawer/components/DrawerActiveButton';
-import { NodeViewDrawer } from 'reactjs-tiptap-editor-pro/extensions/Drawer/components/NodeViewDrawer/NodeViewDrawer';
-import type { GeneralOptions } from 'reactjs-tiptap-editor-pro/types';
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    drawer: {
-      setDrawer: (options: any, replace?: any) => ReturnType
-      setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType
-    }
-  }
-}
-
-export interface DrawerOptions extends GeneralOptions<DrawerOptions> {
-  /** Function for uploading files */
-  upload?: (file: File) => Promise<string>
-}
-
-export const Drawer = TiptapImage.extend<DrawerOptions>({
-  name: 'drawer',
-
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      inline: false,
-      content: '',
-      marks: '',
-      group: 'block',
-      draggable: false,
-      selectable: true,
-      atom: true,
-      HTMLAttributes: {
-        class: 'drawer',
-      },
-      button: ({ editor, t, extension }: any) => ({
-        component: DrawerActiveButton,
-        componentProps: {
-          action: () => {
-            return true;
-          },
-          isActive: () => false,
-          disabled: false,
-          editor,
-          icon: 'PencilRuler',
-          tooltip: t('editor.drawer.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(NodeViewDrawer);
-  },
-
-  // @ts-ignore
-  addCommands() {
-    return {
-      setDrawer:
-          (
-            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,
-              });
-            },
-
-      setAlignImageDrawer:
-            (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: 'imageDrawer',
-      },
-      [
-        'img',
-        mergeAttributes(
-          // @ts-ignore
-          this.options.HTMLAttributes,
-          HTMLAttributes,
-        ),
-      ],
-    ];
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'div[class=imageDrawer]',
-        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/Drawer/components/ControlDrawer/ControlDrawer.module.scss

@@ -1,85 +0,0 @@
-.wrapper {
-  background-color: white;
-  border-radius: 10px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  padding: 10px;
-  gap: 10px;
-  z-index: 100;
-  border: 1px solid #eeeeee;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-
-.tool {
-  outline: none;
-  border: none;
-  background-color: white;
-  border-radius: 5px;
-  padding: 5px;
-  cursor: pointer;
-  transition: all 0.3s;
-  color: rgb(89, 83, 83) !important;
-}
-
-
-.tool svg {
-  width: 20px;
-  height: 20px;
-}
-
-.tool:hover {
-  background-color: #f5f5f5;
-}
-
-.active {
-  background-color: #eeeeee !important;
-}
-
-.pen {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.line {
-  height: 20px;
-  width: 1px;
-  background-color: rgb(188, 185, 185);
-  margin: 0 6px;
-  transform: rotate(18deg);
-}
-
-.options {
-  margin-top: 10px;
-  padding: 10px 0 0;
-  border-top: 1px dashed #eeeeee;
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.colorWrap {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 4px 0;
-}
-.color {
-  outline: none !important;
-  border: none !important;
-  border-radius: 4px;
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  border: 1px solid #eeeeee;
-}
-
-.colorActive {
-  outline: 2px solid #2576B9 !important;
-}