
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
@react-editor-js/core
Advanced tools
npm install --save react-editor-js @editorjs/editorjs @editorjs/paragraph ...other plugins
import { createReactEditorJS } from 'react-editor-js'
const ReactEditorJS = createReactEditorJS()
<ReactEditorJS defaultValue={blocks} />
Allow all options of editor-js
Name | Type | Description |
---|---|---|
defaulltValue | OutputData | Initial data when using editor js as uncontrolled component. highly recommend it |
value | OutputData | data when using editor js as controlled component. ⚠️ Don't use it with onChange prop. Infinite loops can occur. |
onInitialize | (editorCore?: EditorCore) => void | Call after editor-js is initialized |
There is an only Paragraph block already included in Editor.js. Probably you want to use several Block Tools that should be installed and connected.
To add more Block Tools, simply add them to your repo and pass them as tools
-property to your editor:
npm install --save-dev @editorjs/checklist
import { createReactEditorJS } from 'react-editor-js'
import CheckList from '@editorjs/checklist'
const ReactEditorJS = createReactEditorJS()
<ReactEditorJS defaultValue={blocks} tools={{ checkList: CheckList }} />
We recommend to create a tools.js
file and export your tools as a constant. Here is an example using all of the default plugins:
// tools.js
import Embed from '@editorjs/embed'
import Table from '@editorjs/table'
import Paragraph from '@editorjs/paragraph'
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'
export const EDITOR_JS_TOOLS = {
// NOTE: Paragraph is default tool. Declare only when you want to change paragraph option.
// paragraph: Paragraph,
embed: Embed,
table: Table,
list: List,
warning: Warning,
code: Code,
linkTool: LinkTool,
image: Image,
raw: Raw,
header: Header,
quote: Quote,
marker: Marker,
checklist: CheckList,
delimiter: Delimiter,
inlineCode: InlineCode,
simpleImage: SimpleImage,
}
import { createReactEditorJS } from 'react-editor-js'
import { EDITOR_JS_TOOLS } from './tools'
const ReactEditorJS = createReactEditorJS()
<ReactEditorJS defaultValue={blocks} tools={EDITOR_JS_TOOLS} />
You can read more about plugins/tools at editor-js: Tools installation
It's simpleeeee
<ReactEditorJS holder="custom">
<div id="custom" />
</ReactEditorJS>
The editor-js instance is inaccessible. However, you can access the abstracted editor-js for isomorphic react-editor-js.
// abstracted editor-js interface
interface EditorCore {
destroy(): Promise<void>
clear(): Promise<void>
save(): Promise<OutputData>
render(data: OutputData): Promise<void>
}
const editorCore = React.useRef(null)
const handleInitialize = React.useCallback((instance) => {
editorCore.current = instance
}, [])
const handleSave = React.useCallback(() => {
const savedData = await editorCore.current.save();
}, [])
<ReactEditorJS onInitialize={handleInitialize} defaultValue={blocks} />
You should set linkTool config. 💪🏻
import LinkTool from '@editorjs/link'
<ReactEditorJS
defaultValue={blocks}
tools={{
linkTool: {
class: LinkTool,
config: {
endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching
}
}
}}
/>
FAQs
The unofficial editor-js component for React on client
The npm package @react-editor-js/core receives a total of 11,875 weekly downloads. As such, @react-editor-js/core popularity was classified as popular.
We found that @react-editor-js/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.