editor-jsx
v0.0.9
Published
JSX Dialect for Editor.js
Downloads
12
Readme
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
- [x] Add skelton
- [x] Add types for custom JSX elements
- [ ] Add a parser for JSX and syntax of Editor.js tools
- [x] Prototyping(Add a simple parser)
- [x] Styles API support
- [ ] Access params of constructor as props
- [ ] JSX as props
- [ ] Add unit & integration testing
- [ ] Add implements of diff or reconcile
- [x] 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 - [email protected]
Inspired
- https://github.com/preactjs/preact