Drawing Tool Block for the Editor.js.

• Image Uploading: Upload images directly from the user's device.
• Text Customization: Control text properties like color, size, alignment, and style.
• Linking: Add hyperlinks to text.
• Image Saving: Supports saving images as base64-encoded strings or remotely via a custom uploader.
• Configurable Height: Customize the height of the drawing tool's canvas.

Note: No server-side implementation is required for image uploading when using base64 encoding.

Install the Drawing Tool package via Yarn:

yarn add @blade47/editorjs-drawing-tool

To use the tool in your project, include it as:

import DrawingTool from '@blade47/editorjs-drawing-tool';

Add the Drawing Tool to the tools property of your Editor.js configuration:

import DrawingTool from '@blade47/drawing-tool';
const editor = new EditorJS({
  tools: {
    drawingTool: {
      class: DrawingTool,
    },
  },
});

You can also configure the tool with custom options (see the Configuration Parameters section for details).

The Drawing Tool supports the following configuration parameters:

If no custom uploader is provided in the configuration, the tool embeds images into the response as base64-encoded strings.

When the tool produces output, the data will have the following structure:

{
  "type": "drawingTool",
  "data": {
    "canvasJson": "{\"attrs\":{},\"className\":\"Layer\",\"children\":[{\"attrs\":{\"enabledAnchors\":[\"top-left\",\"top-right\",\"bottom-left\",\"bottom-right\"],\"padding\":5,\"borderStroke\":\"#00ff00\",\"anchorStroke\":\"#00ff00\",\"anchorFill\":\"#ffffff\"},\"className\":\"Transformer\"}]}",
    "canvasImages": [
      {
        "id": "image-mmxLYrn_iY-1740849273717",
        "src": "link or base64 encoded image",
        "attrs": {
          "image": {},
          "x": 258.6185044359949,
          "y": 73.33333333333331,
          "width": 582.7629911280102,
          "height": 586.6666666666667,
          "draggable": true,
          "name": "object",
          "id": "image-mmxLYrn_iY-1740849273717"
        }
      }
    ],
    "canvasHeight": 700
  }
}

export interface KonvaDrawingToolData {
  canvasJson: string | null;
  canvasImages: ImageData[];
  canvasHeight: number;
}
export interface ImageData {
  id: string;
  src: string;
  attrs: {
    x: number;
    y: number;
    width: number;
    height: number;
    scaleX: number;
    scaleY: number;
    rotation: number;
    [key: string]: unknown;
  };
}
export interface KonvaDrawingToolConfig {
  uploader?: {
    uploadImage?: (base64Image: string) => Promise<string>;
  };
}

You can provide your own method to handle image uploads. The custom uploader can be passed via the uploader configuration parameter.

The uploadImage method accepts a base64-encoded image string and should return a Promise resolving to the uploaded image's public URL.

import DrawingTool from '@blade47/drawing-tool';
const editor = new EditorJS({
  tools: {
    drawingTool: {
      class: DrawingTool,
      config: {
        uploader: {
          /**
           * Upload image file to the server and return the uploaded image URL
           * @param {string} base64Image - Base64 encoded string of the selected image
           * @return {Promise<string>}
           */
          async uploadImage(base64Image: string): Promise<string> {
            // Implement your custom upload logic here
            return MyAjax.upload(base64Image).then((link) => link);
          },
        },
      },
    },
  },
});

• Default Behavior: If no custom uploader is provided, images are embedded directly as base64-encoded data.
• Custom Uploader: The provided uploadImage method must return a URL pointing to the uploaded image.

This flexibility allows you to either keep everything client-side (base64) or implement a server-side upload mechanism tailored to your use case.