Awesome

Editorjs plugin for adding comment.

editorjs-comment plugin is design to allow developers to create custom component of there comment and pass it through config, it allows to create any comment section they want for editorjs

Features

• support typescript
• using with HTML project
• using react (JSX.Element)
• other coming soon.

Limitation

For React component, Hooks will not work since is render outside of the component, a work around is using preact signal https://preactjs.com/guide/v10/signals/

 import { signal } from "@preact-signals/safe-react";
import { withTrackSignals } from "@preact-signals/safe-react/manual";

check the example for usage

Installation

Install via NPM

npm install editorjs-comment

Load from CDN

<script src="https://cdn.jsdelivr.net/npm/editorjs-comment@latest"></script>

Usage

import Comment from 'editorjs-comment';

ediotrjs Comment must be used with the config. A function that returns a JSX.Element or HTML file must be passed to the config file CommentConfig. See the config interface.

##important interfaces

export interface RenderBody {
  commentBlockId: string | null;
  blockId: string | null;
  onClose: () => void;
  addCommentBlockData: (data: CommentBlockData) => void;
  removeBlockComments: () => void;
}

export interface CommentConfig {
  markerColor?: string;
  activeColor?: string;
  editorjsId?: string;
  renderBody: ({
    commentBlockId,
    blockId,
    addCommentBlockData,
    onClose,
    removeBlockComments,
  }: RenderBody) => HTMLElement | any //JSX.Element;
}

Usage example

const EDITOR_JS_TOOL = {

  ....
  comment: {
    class: Comment,
    inlineToolbar: true,

    config: {
      markerColor: "",
      activeColor: "pink",
      renderBody: ({
        commentBlockId,
        blockId,
        onClose,
        addCommentBlockData,
      }: {
        commentBlockId: string;
        blockId: string;
        onClose: () => void;
        addCommentBlockData: (data: any) => void;
      }) => {
        return RenderItem({
          onClose,
          blockId,
          commentId: commentBlockId,
          setCommentBlockData: addCommentBlockData,
        });
      },
    },
  },
}

RenderBody function

The renderBody is a function which is a required parameter by the config. The function must accept the RenderBody interface as shown below

export interface RenderBody {
  commentBlockId: string | null;
  blockId: string | null;
  onClose: () => void;
  addCommentBlockData: (data: CommentBlockData) => void;
  removeBlockComments: () => void;
}

parameter

This parameters will be pass to the function were the developer can access then an use it.

config parameter is CommentConfig

CommentConfig is the interface that is passed to the config option. only renderBody is required.

case study

example using react and preact/signal

//import { signal, computed, useSignal } from "@preact/signals";
import { signal } from "@preact-signals/safe-react";
import { withTrackSignals } from "@preact-signals/safe-react/manual";
import { CommentBlockData, RenderBody } from "editorjs-comment";

interface Comment {
  commentBlockId: string;
  blockId: string;
  content: string
  //... your custom fields

}
const comments = signal<Comment[]>([]);

const commentSignal = signal<Comment>(Object());

const RenderItem = ({
  commentBlockId,
  blockId,
  onClose,
  addCommentBlockData,
}: RenderBody) => {
  commentSignal.value = {
    ...Object(),
    commentBlockId,
    blockId,
  };

  const data = (value: string) => {
    commentSignal.value = { ...commentSignal.value, content: value };
  };

  //save comment to DB
  const saveComment = () => {
    

    addContractCommentApi({
      ...commentSignal.value,
    
    }).then((respo) => {
      if (respo.length > 0) {
        const data = {
          id: respo[0].commentBlockId,
          count: respo.length,
        };

        // if the data is save to the database  then call the setCommentBlockData method 
        // for every new comment section this should be call, it will highlight the selected section with marker and also add the required data to the block.
        // this can be called only once for a new comment section
        if (addCommentBlockData) {
          addCommentBlockData(data);
        }
        comments.value = respo;
      }
    });
  };

  //The commentBlockId for the current  comment section is available  to be use to query the db, depending on your logic
  const getComments = () => {

    if (!commentBlockId) {
      comments.value = [];
      return;
    }
    getContractCommentByIdApi(commentBlockId)
      .then((respon) => {
        if (respon.length > 0) {
          addCommentBlockData({
            id: respon[0].commentBlockId,
            count: respon.length,
          });
          comments.value = respon;
        }
      })
      .catch((err) => {
        comments.value = [];
        console.log(err);
      });
  };
  getComments();

  // manually render on change
  const ShowComments = withTrackSignals(() => {
    return (
      <div>
        {comments.value.map((comment, index) => (
          <div key={index}>
             <div>{comment.}</div>
          </div>
        ))}
      </div>
    );
  });

  const closeEl = () => {
    if (!onClose) return;
    onClose();
  };

  return (
    <Paper
      style={{ zIndex: 3, position: "absolute" }}
      className="comment-popover"
      contentEditable={false}
    >
      <div style={{ textAlign: "right" }} onClick={closeEl}>
        <Btn text="Close" onClick={closeEl} />
      </div>
      <div style={{ margin: 10 }}>
        <div>{text.value}</div>
        <div>
          <InputField
            label="tesv"
            type="text"
            value={commentSignal.value.content}
            onChange={data}
          />
          <Btn text="Add comment" onClick={saveComment} />
        </div>
        <div>
          <ShowComments />
        </div>
      </div>
    </Paper>
  );
};

export default RenderItem;



 //Editorjs tools 


 import Comment from "editorjs-comment";



import RenderItem from "./component";


const EDITOR_JS_TOOL = {
  // attached: {
  //   class: Attached,
  //   config:{
  //     endpoint: 'http://localhost:7000/blog/uploadFile', // Your backend file uploader endpoint
  //   }
  // },

  comment: {
    class: Comment,
    inlineToolbar: true,

    config: {
      markerColor: "grey", // optional 
      activeColor: "green",// optional
      renderBody: ({
        commentBlockId,
        blockId,
        onClose,
        addCommentBlockData,
      }: {
        commentBlockId: string;
        blockId: string;
        onClose: () => void;
        addCommentBlockData: (data: any) => void;
      }) => {
        return RenderItem({
          onClose,
          blockId,
           commentBlockId,
          addCommentBlockData
        });
      },
    },
  },


  // MyTool,
  //table: Table,

  /*   inlineImage: InlineImage,
   */


/*   paragraph: {
    class: Paragraph,
    inlineToolbar: true,
    config: {
      placeholder: "Enter project description",
    },
    tunes: ["textVariant", "alignment"],
  }, */
 
  // simpleImage: SimpleImage
};

note: This project is still in beta so changes will happen often

🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!