How to add a new tool?

[GilbertMizrahi]

Let's say I want to add an input text that allows entering only numbers.

How I would do that?

I saw in the editor.js docs a way to create a new tool, but I don't know how to replicate that in the React example that you provided.

I tried:

import React from 'react';

 const Input = () => {
  const toolbox = {
    title: 'Input',
    icon: 'https://pics.freeicons.io/uploads/icons/png/6621521691571183084-512.png'
  };

  const render = () => {
    return <input type="text" />;
  }

  const save = (blockContent) => {
    return {
      url: blockContent.value
    };
  }

  return {
    toolbox,
    render,
    save
  };
}

export default Input

And then I imported it into the content.js file as:

import Embed from "@editorjs/embed";
import Table from "@editorjs/table";
import List from "@editorjs/list";
import Warning from "@editorjs/warning";
import Code from "@editorjs/code";
import LinkTool from "@editorjs/link";
import Image from "@editorjs/image";
import Raw from "@editorjs/raw";
import Header from "@editorjs/header";
import Quote from "@editorjs/quote";
import Marker from "@editorjs/marker";
import CheckList from "@editorjs/checklist";
import Delimiter from "@editorjs/delimiter";
import InlineCode from "@editorjs/inline-code";
import SimpleImage from "@editorjs/simple-image";
import Input from "./input/input.js"

export const EDITOR_JS_TOOLS = {
  embed: Embed,
  table: Table,
  marker: Marker,
  list: List,
  warning: Warning,
  code: Code,
  linkTool: LinkTool,
  image: Image,
  raw: Raw,
  header: Header,
  quote: Quote,
  checklist: CheckList,
  delimiter: Delimiter,
  inlineCode: InlineCode,
  simpleImage: SimpleImage,
  input: Input
};

But it doesn't work.

What am I doing wrong?

[jp-coeff]

I have a similar use case. @GilbertMizrahi were you able to achieve this?