{"id":13770564,"url":"https://github.com/Jungwoo-An/react-editor-js","last_synced_at":"2025-05-11T03:32:54.194Z","repository":{"id":37431433,"uuid":"179398051","full_name":"Jungwoo-An/react-editor-js","owner":"Jungwoo-An","description":"⚛️📝The unofficial editor-js component for React","archived":false,"fork":false,"pushed_at":"2024-01-04T18:44:15.000Z","size":133952,"stargazers_count":972,"open_issues_count":40,"forks_count":78,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-07T18:06:18.223Z","etag":null,"topics":["editor-js","react","typescript-library","wysiwyg"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-editor-js-v2-34bfl","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jungwoo-An.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-04-04T01:24:05.000Z","updated_at":"2025-05-07T06:49:05.000Z","dependencies_parsed_at":"2024-01-06T20:55:12.707Z","dependency_job_id":null,"html_url":"https://github.com/Jungwoo-An/react-editor-js","commit_stats":{"total_commits":117,"total_committers":9,"mean_commits":13.0,"dds":"0.28205128205128205","last_synced_commit":"9a6843c8cb53e100a676cc04a1b441250438944a"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jungwoo-An%2Freact-editor-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jungwoo-An%2Freact-editor-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jungwoo-An%2Freact-editor-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jungwoo-An%2Freact-editor-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jungwoo-An","download_url":"https://codeload.github.com/Jungwoo-An/react-editor-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253141534,"owners_count":21860541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor-js","react","typescript-library","wysiwyg"],"created_at":"2024-08-03T17:00:39.173Z","updated_at":"2025-05-11T03:32:49.166Z","avatar_url":"https://github.com/Jungwoo-An.png","language":"TypeScript","funding_links":[],"categories":["Libraries","TypeScript"],"sub_categories":["JavaScript"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Logo\" src=\"static/react-editor-js.png\" width=\"100%\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv\u003e\n\n[![npm version](https://badge.fury.io/js/react-editor-js.svg)](https://badge.fury.io/js/react-editor-js)\n![LICENSE](https://img.shields.io/npm/l/react-editor-js?color=blue)\n[![Github Build Status](https://github.com/Jungwoo-An/react-editor-js/workflows/release/badge.svg)](https://github.com/Jungwoo-An/react-editor-js/actions)\n[![Semantic Release enabled](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n\u003c/div\u003e\n\n## 🍞 DEMO\n\n- [CodeSandbox](https://codesandbox.io/s/react-editor-js-v2-34bfl)\n\n## 🍀 Supported Official Plugin\n\n- [x] Paragraph (default)\n- [x] Embed\n- [x] Table\n- [x] List\n- [x] Warning\n- [x] Code\n- [x] Link\n- [x] Image\n- [x] Raw\n- [x] Header\n- [x] Quote\n- [x] Marker\n- [x] CheckList\n- [x] Delimiter\n- [x] InlineCode\n- [x] SimpleImage\n\n## 🤟🏻 Getting Started\n\n### Install via npm (or yarn)\n\n```bash\nnpm install --save react-editor-js @editorjs/editorjs @editorjs/paragraph ...other plugins\n```\n\n```tsx\nimport { createReactEditorJS } from 'react-editor-js'\n\nconst ReactEditorJS = createReactEditorJS()\n\n\u003cReactEditorJS defaultValue={blocks} /\u003e\n```\n\n## 📙 API\n\nAllow all options of [editor-js](https://github.com/codex-team/editor.js/blob/master/types/configs/editor-config.d.ts)\n\n| Name               | Type                                                                            | Description                                                                                                                                           |\n| ------------------ | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| defaultValue | OutputData                                                                         | Initial data when using editor js as [uncontrolled component](https://ko.reactjs.org/docs/uncontrolled-components.html). highly recommend it                                                                                                         |\n| value | OutputData                                                                         | data when using editor js as [controlled component](https://ko.reactjs.org/docs/forms.html#controlled-components). \u003cbr\u003e ⚠️ Don't use it with onChange prop. Infinite loops can occur.                                                                                                         |\n| onInitialize            | (editorCore?: EditorCore) =\u003e void                                                   | Call after editor-js is initialized                                                                                       |\n\n## 🧐 FAQ\n\n### How can I install plugins?\n\nThere is an only Paragraph block already included in Editor.js. Probably you want to use several Block Tools that should be installed and connected.\n\nTo add more Block Tools, simply add them to your repo and pass them as `tools`-property to your editor:\n\n```\nnpm install --save-dev @editorjs/checklist\n```\n\n```tsx\nimport { createReactEditorJS } from 'react-editor-js'\nimport CheckList from '@editorjs/checklist'\n\nconst ReactEditorJS = createReactEditorJS()\n\n\u003cReactEditorJS defaultValue={blocks} tools={{ checkList: CheckList }} /\u003e\n```\n\nWe recommend to create a `tools.js` file and export your tools as a constant. Here is an example using all of the default plugins:\n\n```ts\n// tools.js\nimport Embed from '@editorjs/embed'\nimport Table from '@editorjs/table'\nimport Paragraph from '@editorjs/paragraph'\nimport List from '@editorjs/list'\nimport Warning from '@editorjs/warning'\nimport Code from '@editorjs/code'\nimport LinkTool from '@editorjs/link'\nimport Image from '@editorjs/image'\nimport Raw from '@editorjs/raw'\nimport Header from '@editorjs/header'\nimport Quote from '@editorjs/quote'\nimport Marker from '@editorjs/marker'\nimport CheckList from '@editorjs/checklist'\nimport Delimiter from '@editorjs/delimiter'\nimport InlineCode from '@editorjs/inline-code'\nimport SimpleImage from '@editorjs/simple-image'\n\nexport const EDITOR_JS_TOOLS = {\n  // NOTE: Paragraph is default tool. Declare only when you want to change paragraph option.\n  // paragraph: Paragraph,\n  embed: Embed,\n  table: Table,\n  list: List,\n  warning: Warning,\n  code: Code,\n  linkTool: LinkTool,\n  image: Image,\n  raw: Raw,\n  header: Header,\n  quote: Quote,\n  marker: Marker,\n  checklist: CheckList,\n  delimiter: Delimiter,\n  inlineCode: InlineCode,\n  simpleImage: SimpleImage,\n}\n```\n\n```tsx\nimport { createReactEditorJS } from 'react-editor-js'\nimport { EDITOR_JS_TOOLS } from './tools'\n\nconst ReactEditorJS = createReactEditorJS()\n\n\u003cReactEditorJS defaultValue={blocks} tools={EDITOR_JS_TOOLS} /\u003e\n```\n\nYou can read more about plugins/tools at [editor-js: Tools installation](https://editorjs.io/getting-started#tools-installation)\n\n### How do I use custom element?\n\nIt's simpleeeee\n\n```tsx\n\u003cReactEditorJS holder=\"custom\"\u003e\n  \u003cdiv id=\"custom\" /\u003e\n\u003c/ReactEditorJS\u003e\n```\n\n### How to access editor-js instance?\n\nThe editor-js instance is inaccessible. However, you can access the abstracted editor-js for isomorphic react-editor-js.\n\n```ts\n// abstracted editor-js interface\ninterface EditorCore {\n  destroy(): Promise\u003cvoid\u003e\n\n  clear(): Promise\u003cvoid\u003e\n\n  save(): Promise\u003cOutputData\u003e\n\n  render(data: OutputData): Promise\u003cvoid\u003e\n}\n```\n\n```tsx\nconst editorCore = React.useRef(null)\n\nconst handleInitialize = React.useCallback((instance) =\u003e {\n  editorCore.current = instance\n}, [])\n\nconst handleSave = React.useCallback(async () =\u003e {\n  const savedData = await editorCore.current.save();\n}, [])\n\n\u003cReactEditorJS onInitialize={handleInitialize} defaultValue={blocks} /\u003e\n```\n\nIf you want to access low-level instance, you can use `dangerouslyLowLevelInstance`\n\n⚠️ dangerouslyLowLevelInstance depends on the execution environment.\n\n| Environment | Instnace Type |\n| - | - |\n| Browser | EditorJS instance|\n| NodeJS | null |\n\n```tsx\nconst editorCore = React.useRef(null)\n\nconst handleInitialize = React.useCallback((instance) =\u003e {\n  editorCore.current = instance\n}, [])\n\nconst handleSave = React.useCallback(async () =\u003e {\n  const savedData = await editorCore.current.dangerouslyLowLevelInstance?.save();\n}, [])\n\n\u003cReactEditorJS onInitialize={handleInitialize} defaultValue={blocks} /\u003e\n```\n\n### Haven't received data from server (when use Link)\n\nYou should set linkTool [config](https://github.com/editor-js/link#usage). 💪🏻\n\n```tsx\nimport LinkTool from '@editorjs/link'\n\n\u003cReactEditorJS\n  defaultValue={blocks}\n  tools={{\n    linkTool: {\n      class: LinkTool,\n      config: {\n        endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching\n      }\n    }\n  }}\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJungwoo-An%2Freact-editor-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJungwoo-An%2Freact-editor-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJungwoo-An%2Freact-editor-js/lists"}