🚨 editor-jsx has moved to @bento-editor/plugin-declarative 🚨

⚔️ editor-jsx - JSX Dialect for Editor.js ⚔️

🚜 CURRENTLY IN EARLY DEVELOPMENT 🚜

Breaking changes often may occur

Live Demo ・ Report Bugs | Request Features

About editor-jsx

motivation

Getting started

npm i @editorjs/editorjs editor-jsx

Strongly recommended to use with TypeScript

npm i -D typescript

Usage

With TypeScript

/* @jsx h */
import { h, createTool } from "editor-jsx";
import type { EditorJSX } from "editor-jsx";
import EditorJS from "@editorjs/editorjs";

const CustomTool: EditorJSX.Tool = () => {
  const handleClick = () => {
    console.log("clicked");
  };
  const handleSave: EditorJSX.ToolAttributes<{ value: string }>["save"] = (
    blockContent
  ) => console.log(blockContent.value);
  return (
    <tool
      save={handleSave}
      validate={undefined}
      renderSettings={undefined}
      destory={undefined}
      onPaste={undefined}
      merge={undefined}
      static_get_pasteConfig={undefined}
      static_get_sanitize={undefined}
      static_get_shortcut={undefined}
      static_get_conversionConfig={undefined}
      static_get_enableLineBreaks={undefined}
      static_get_isReadOnlySupported={undefined}
      static_get_toolbox={{ title: "CustomTool", icon: <span>🔮</span> }}
    >
      <div>
        <button onClick={handleClick}>button</button>
      </div>
    </tool>
  );
};

const CustomInlineTool: EditorJSX.InlineTool = () => {
  return (
    <inlineTool
      surround={() => {}}
      checkState={() => {}}
      renderActions={undefined}
      clear={undefined}
      static_get_isInline={true}
      get_shortcut={undefined}
      static_get_sanitize={undefined}
      static_get_title={undefined}
    >
      <div>
        <span>InlineTool</span>
      </div>
    </inlineTool>
  );
};

const CustomBlockTune: EditorJSX.BlockTune = () => {
  return (
    <blockTune
      save={undefined}
      wrap={undefined}
      static_get_isTune={true}
      static_prepare={undefined}
      static_reset={undefined}
    >
      <div>
        <span>BlockTune</span>
        <div>
          <span>nested</span>
        </div>
        <span />
        <div>
          <button>button</button>
        </div>
      </div>
    </blockTune>
  );
};

const customTool = createTool(<CustomTool />, null);
const customInlineTool = createTool(<CustomInlineTool />, null);
const customBlockTune = createTool(<CustomBlockTune />, null);

const e = document.createElement("div");
e.id = "editorjs";
document.body.appendChild(e);

new EditorJS({
  holderId: "editorjs",
  tools: {
    customTool,
    CustomInlineTool: { class: customInlineTool },
    CustomBlockTune: { class: customBlockTune },
  },
});

If the @jsx h comment is not enabled, you can use editor-jsx by modifying @babel/plugin-transform-react-jsx pragma or compilerOptions.jsxFactory in tsconfig.json as follows.

.babelrc (with @babel-transform-react-jsx)

{
  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
}

tsconfig.json (with tsc)

{
  "compilerOptions": {
    "jsxFactory": "h"
  }
}

Roadmap

• Add skelton
• Add types for custom JSX elements
• Add a parser for JSX and syntax of Editor.js tools
  • Prototyping(Add a simple parser)
  • Styles API support
  • Access params of constructor as props
  • JSX as props
• Add unit & integration testing
• Add implements of diff or reconcile
• Add functions for transforming JSX nodes to plugin class syntax
• A11y support

Contributing

git clone https://github.com/shuta13/editor-jsx.git && cd editor-jsx && npm ci

License

MIT License

Contact

shuta13 - hollystarsun@gmail.com

Inspired

• https://github.com/preactjs/preact