reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

package/src/extensions/Drawer/components/DrawerActiveButton.tsx

@@ -0,0 +1,239 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useEffect, useRef, useState } from 'react';
+
+import type { Editor } from '@tiptap/core';
+import {
+  makeDropdownToolbar,
+  Editor as Editor4,
+} from 'easydrawer';
+// @ts-ignore
+import svg64 from 'svg64';
+
+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 ControlDrawer from 'reactjs-tiptap-editor-pro/extensions/Drawer/components/ControlDrawer/ControlDrawer';
+import { dataURLtoFile } from 'reactjs-tiptap-editor-pro/utils/file';
+import { shortId } from 'reactjs-tiptap-editor-pro/utils/shortId';
+
+interface IProps {
+  editor: Editor, upload?: any
+}
+
+let clear = false;
+
+export const DrawerActiveButton: React.FC<IProps> = ({ editor, upload }) => {
+  const [visible, toggleVisible] = useState(false);
+  const refEditor = useRef<Editor4 | null>(null);
+  const refWidget = useRef<any>(null);
+
+  const mermaidInit = () => {
+    const init = async () => {
+      const parentElement = document.querySelector('#easydrawer');
+
+      if (!parentElement) return;
+
+      refEditor.current = new Editor4(parentElement as any, {
+        wheelEventsEnabled: false,
+        disableZoom: true,
+      });
+
+      refWidget.current = makeDropdownToolbar(refEditor.current);
+      refWidget.current.addDefaultToolWidgets();
+    };
+
+    init();
+  };
+
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        mermaidInit();
+      }, 200);
+    }
+  }, [visible]);
+
+  const setSvg = async () => {
+    if (refEditor.current) {
+      const svg = refEditor.current.toSVG() as unknown as HTMLElement;
+      const contentHtml = svg.outerHTML;
+      // const { width, height } = svg.getBoundingClientRect();
+      const name = `drawer-${shortId()}.svg`;
+
+      let src = svg64(svg.outerHTML);
+
+      if (upload) {
+        const file = dataURLtoFile(src, name);
+        src = await upload(file);
+      }
+
+      editor
+        ?.chain()
+        .focus()
+        .setDrawer(
+          {
+            type: 'drawer',
+            src,
+            alt: encodeURIComponent(contentHtml),
+            width: 426,
+            height: 212
+          },
+          !!contentHtml,
+        )
+        .run();
+    }
+    toggleVisible(false);
+  };
+
+  const setColorPen = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[2] as any;
+    const shapeWidget = refWidget.current.getWidgetById('pen-1');
+
+    if (penTool && shapeWidget) {
+      penTool.setColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const setThicknessPen = (thickness: number) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[2] as any;
+    const shapeWidget = refWidget.current.getWidgetById('pen-1');
+
+    if (penTool && shapeWidget) {
+      penTool.setThickness(thickness);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const setColorHighlight = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[3] as any;
+
+    const shapeWidget = refWidget.current.getWidgetById('pen-2');
+
+    if (penTool && shapeWidget) {
+      penTool.setColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const changeShape = (type: any) => {
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (shapeWidget) {
+      shapeWidget.setShapeType(type);
+    }
+  };
+
+  const changeColorShape = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[5] as any;
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (penTool && shapeWidget) {
+      penTool.setColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const onThicknessChange = (v: any) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[5] as any;
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (penTool && shapeWidget) {
+      penTool.setThickness(v);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const changeBorderColorShape = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[5] as any;
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (penTool && shapeWidget) {
+      penTool.setBorderColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const onUndo =() => {
+    if (clear) {
+      while (refEditor.current!.history.redoStackSize > 0) {
+        refEditor.current!.history.redo();
+      }
+      clear = false;
+      return;
+    }
+
+    refEditor.current!.history.undo();
+  };
+
+  const onRedo =() => {
+    if (clear) {
+      return;
+    }
+
+    refEditor.current!.history.redo();
+  };
+
+  const onClear =() => {
+    if (clear) {
+      return;
+    }
+
+    while (refEditor.current!.history.undoStackSize > 0) {
+      onUndo();
+    }
+    clear = true;
+  };
+
+  return (
+    <Dialog
+      onOpenChange={toggleVisible}
+      open={visible}
+    >
+      <DialogTrigger asChild>
+        <ActionButton
+          action={() => toggleVisible(true)}
+          icon="PencilRuler"
+          tooltip="Drawer"
+        />
+      </DialogTrigger>
+
+      <DialogContent className="z-[99999] !max-w-[1300px]">
+        <DialogTitle>
+          Drawer
+        </DialogTitle>
+
+        <div style={{ height: '600px', width: '100%', borderWidth: 1, background: 'white', position: 'relative' }}>
+          <div
+            className='size-full'
+            id='easydrawer'
+          >
+          </div>
+
+          <ControlDrawer
+            changeBorderColorShape={changeBorderColorShape}
+            changeColorShape={changeColorShape}
+            changeShape={changeShape}
+            onClear={onClear}
+            onRedo={onRedo}
+            onThicknessChange={onThicknessChange}
+            onUndo={onUndo}
+            refEditor={refEditor}
+            setColorHighlight={setColorHighlight}
+            setColorPen={setColorPen}
+            setThicknessPen={setThicknessPen}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={setSvg}
+            type="button"
+          >
+            Save changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/extensions/Drawer/components/EditDrawerBlock.tsx

@@ -0,0 +1,238 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useEffect, useRef, useState } from 'react';
+
+import {
+  makeDropdownToolbar,
+  Editor as Editor4,
+} from 'easydrawer';
+// @ts-ignore
+import svg64 from 'svg64';
+
+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 ControlDrawer from 'reactjs-tiptap-editor-pro/extensions/Drawer/components/ControlDrawer/ControlDrawer';
+import { dataURLtoFile } from 'reactjs-tiptap-editor-pro/utils/file';
+import { shortId } from 'reactjs-tiptap-editor-pro/utils/shortId';
+
+let clear = false;
+
+export function EditDrawerBlock ({ editor, attrs, extension }: any) {
+  const [visible, toggleVisible] = useState(false);
+  const refEditor = useRef<Editor4 | null>(null);
+  const refWidget = useRef<any>(null);
+  const { alt, align } = attrs;
+  const upload = extension?.options.upload;
+
+  const mermaidInit = () => {
+    const init = async () => {
+      const parentElement = document.querySelector('#easydrawer');
+
+      if (!parentElement) return;
+
+      refEditor.current = new Editor4(parentElement as any, {
+        wheelEventsEnabled: false,
+        disableZoom: true,
+      });
+
+      refWidget.current = makeDropdownToolbar(refEditor.current);
+      refWidget.current.addDefaultToolWidgets();
+
+      refEditor.current.loadFromSVG(decodeURIComponent(alt));
+    };
+
+    init();
+  };
+
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        mermaidInit();
+      }, 200);
+    }
+  }, [visible]);
+
+  const setSvg = async () => {
+    if (refEditor.current) {
+      const svg = refEditor.current.toSVG() as unknown as HTMLElement;
+      const contentHtml = svg.outerHTML;
+      const name = `drawer-${shortId()}.svg`;
+
+      let src = svg64(svg.outerHTML);
+
+      if (upload) {
+        const file = dataURLtoFile(src, name);
+        src = await upload(file);
+      }
+
+      editor
+        ?.chain()
+        .focus()
+        .setDrawer(
+          {
+            type: 'drawer',
+            src,
+            alt: encodeURIComponent(contentHtml),
+            width: 426,
+            height: 212
+          },
+          !!contentHtml,
+        )
+        .run();
+      editor?.commands.setAlignImageDrawer(align);
+    }
+    toggleVisible(false);
+  };
+
+  const setColorPen = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[2] as any;
+    const shapeWidget = refWidget.current.getWidgetById('pen-1');
+
+    if (penTool && shapeWidget) {
+      penTool.setColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const setThicknessPen = (thickness: number) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[2] as any;
+    const shapeWidget = refWidget.current.getWidgetById('pen-1');
+
+    if (penTool && shapeWidget) {
+      penTool.setThickness(thickness);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const setColorHighlight = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[3] as any;
+
+    const shapeWidget = refWidget.current.getWidgetById('pen-2');
+
+    if (penTool && shapeWidget) {
+      penTool.setColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const changeShape = (type: any) => {
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (shapeWidget) {
+      shapeWidget.setShapeType(type);
+    }
+  };
+
+  const changeColorShape = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[5] as any;
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (penTool && shapeWidget) {
+      penTool.setColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const onThicknessChange = (v: any) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[5] as any;
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (penTool && shapeWidget) {
+      penTool.setThickness(v);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const changeBorderColorShape = (color: string) => {
+    const penTool = refEditor.current!.toolController.getPrimaryTools()[5] as any;
+    const shapeWidget = refWidget.current.getWidgetById('shape');
+
+    if (penTool && shapeWidget) {
+      penTool.setBorderColor(color);
+      shapeWidget.serializeState();
+    }
+  };
+
+  const onUndo =() => {
+    if (clear) {
+      while (refEditor.current!.history.redoStackSize > 0) {
+        refEditor.current!.history.redo();
+      }
+      clear = false;
+      return;
+    }
+
+    refEditor.current!.history.undo();
+  };
+
+  const onRedo =() => {
+    if (clear) {
+      return;
+    }
+
+    refEditor.current!.history.redo();
+  };
+
+  const onClear =() => {
+    if (clear) {
+      return;
+    }
+
+    while (refEditor.current!.history.undoStackSize > 0) {
+      onUndo();
+    }
+    clear = true;
+  };
+
+  return (
+    <Dialog
+      onOpenChange={toggleVisible}
+      open={visible}
+    >
+      <DialogTrigger asChild>
+        <ActionButton
+          action={() => toggleVisible(true)}
+          icon="Pencil"
+          tooltip="Edit Drawer"
+        />
+      </DialogTrigger>
+
+      <DialogContent className="z-[99999] !max-w-[1300px]">
+        <DialogTitle>
+          Edit Drawer
+        </DialogTitle>
+
+        <div style={{ height: '100%', borderWidth: 1, background: 'white', position: 'relative' }}>
+          <div
+            className='size-full'
+            id='easydrawer'
+          >
+          </div>
+
+          <ControlDrawer
+            changeBorderColorShape={changeBorderColorShape}
+            changeColorShape={changeColorShape}
+            changeShape={changeShape}
+            onClear={onClear}
+            onRedo={onRedo}
+            onThicknessChange={onThicknessChange}
+            onUndo={onUndo}
+            refEditor={refEditor}
+            setColorHighlight={setColorHighlight}
+            setColorPen={setColorPen}
+            setThicknessPen={setThicknessPen}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button
+            onClick={setSvg}
+            type="button"
+          >
+            Save changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}