reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

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

@@ -0,0 +1,104 @@
+import { useCallback, useState } from 'react';
+
+import type { Editor } from '@tiptap/react';
+import { debounce } from 'lodash-es';
+
+import { ActionButton, Button, ColorPicker } from '@/components';
+import { IconComponent } from '@/components/icons';
+import type { ButtonViewReturnComponentProps } from '@/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

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

package/src/extensions/Document/Document.ts

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

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

package/src/extensions/Drawer/Drawer.ts

@@ -0,0 +1,177 @@
+/* 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 '@/extensions/Drawer/components/DrawerActiveButton';
+import { NodeViewDrawer } from '@/extensions/Drawer/components/NodeViewDrawer/NodeViewDrawer';
+import type { GeneralOptions } from '@/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

@@ -0,0 +1,85 @@
+.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;
+}