{"id":16920768,"url":"https://github.com/dherault/react-block-text","last_synced_at":"2025-07-31T19:32:57.886Z","repository":{"id":178451454,"uuid":"661863953","full_name":"dherault/react-block-text","owner":"dherault","description":"A block text editor for React","archived":false,"fork":false,"pushed_at":"2025-01-06T13:16:40.000Z","size":889,"stargazers_count":33,"open_issues_count":1,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-22T21:38:26.410Z","etag":null,"topics":["block-editor","react","text-editor"],"latest_commit_sha":null,"homepage":"https://react-block-text.web.app","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/dherault.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-03T20:46:07.000Z","updated_at":"2025-04-26T14:28:13.000Z","dependencies_parsed_at":"2025-06-22T21:33:44.721Z","dependency_job_id":"0729227e-f93f-49d8-8630-0164664e4f63","html_url":"https://github.com/dherault/react-block-text","commit_stats":null,"previous_names":["dherault/react-rich-text"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dherault/react-block-text","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-block-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-block-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-block-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-block-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dherault","download_url":"https://codeload.github.com/dherault/react-block-text/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-block-text/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263957683,"owners_count":23535603,"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":["block-editor","react","text-editor"],"created_at":"2024-10-13T19:49:32.842Z","updated_at":"2025-07-06T19:03:20.730Z","avatar_url":"https://github.com/dherault.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Block Text\n\n[![npm version](https://badge.fury.io/js/react-block-text.svg)](https://badge.fury.io/js/react-block-text)\n[![PRs](https://img.shields.io/badge/PRs-Welcome!-darkGreen)](https://github.com/dherault/react-block-text/pulls)\n\nA block text editor for React.\n\nThis is an open-source clone of the famous [Notion.so](https://notion.so) editor. Although not entirely feature complete, it comes with some basic blocks and offers a similar UI.\n\nProject status: In-development beta. The API will be stable starting with v1.\n\n## Disclamer\n\nThis project is uncompleted. Do not use in production as it holds some bugs.\n\n## Demo\n\n[See it live in your browser!](https://react-block-text.web.app/)\n\n## Installation\n\n```bash\nnpm install --save react-block-text\n```\n```bash\nyarn add react-block-text\n```\n\n### Note for ViteJs users\n\nYou might need to [add globalThis](https://github.com/vitejs/vite/discussions/7915) to your app.\n\n## Usage\n\n```jsx\nimport { useState } from 'react'\nimport ReactBlockText, { headerPlugin, imagePlugin, listPlugin, quotePlugin, todoPlugin } from 'react-block-text'\n\nconst plugins = [\n  ...headerPlugin(),\n  ...todoPlugin(),\n  ...listPlugin(),\n  ...quotePlugin(),\n  ...imagePlugin({\n    onSubmitFile: /* See image plugin section */,\n    onSubmitUrl: /* ... */,\n    getUrl: /* ... */,\n    maxFileSize: '5 MB', /* Optional, displayed in the file upload dialog */\n  }),\n]\n\nfunction Editor() {\n  const [value, setValue] = useState('')\n\n  return (\n    \u003cReactBlockText\n      value={value}\n      onChange={setValue}\n      plugins={plugins}\n    /\u003e\n  )\n}\n```\n\n### Note for multiple instances in SPA\n\nWhen implementing multiple instances of the editor on separate pages in a SPA, you might need to set the key prop in order to make in work when transitioning pages:\n\n```tsx\n\u003cReactBlockText\n  key={someUniqueKey}\n  // ...\n/\u003e\n```\n\n## Options\n\n```ts\ntype ReactBlockTextProps = {\n  // The data for the editor\n  value?: string\n  // An array of plugin\n  plugins?: ReactBlockTextPlugins\n  // Enable read only mode\n  readOnly?: boolean\n  // Padding top of the editor\n  paddingTop?: number\n  // Padding bottom of the editor\n  paddingBottom?: number\n  // Padding left of the editor\n  paddingLeft?: number\n  // Padding right of the editor\n  paddingRight?: number\n  // The primary color for selection, drag and drop, and buttons\n  primaryColor?: string | null | undefined\n  // The default text color, to align with your design-system\n  textColor?: string | null | undefined\n  // Called when the value changes\n  onChange?: (value: string) =\u003e void\n  // Called when the user saves the editor with cmd/ctrl+s\n  onSave?: () =\u003e void\n}\n```\n\n## Plugins\n\n### Header\n\nAdds support for 3 types of headers.\n\n### Todo\n\nAdds support for todo lists with checkboxes.\n\n### List\n\nAdds support for ordered and unordered lists.\n\n### Quote\n\nAdds support for block quotes.\n\n### Image\n\nAdds support for images.\n\nThree functions are required for the plugin to work:\n\n```ts\ntype ReactBlockTextImagePluginSubmitter = () =\u003e {\n  progress: number  // Between 0 and 1\n  imageKey?: string // The reference to the image once it's uploaded\n  isError?: boolean // If true, the upload failed and an error will be displayed in the editor\n}\n\nfunction onSubmitFile(file: File): Promise\u003cReactBlockTextImagePluginSubmitter\u003e\nfunction onSubmitUrl(file: File): Promise\u003cReactBlockTextImagePluginSubmitter\u003e\nfunction getUrl(imageKey: string): Promise\u003cstring\u003e\n```\n\nThe returned promises should resolve to a function that returns the progress of the upload as a number between 0 and 1 and eventually a `imageKey` corresponding to the image on your server. Using S3 or Firebase storage this is typically the storage path of the image. This `ReactBlockTextImagePluginSubmitter` function will be called periodically to update the progress of the upload and save the imageKey into the value prop.\n\n`getUrl` should return the url of the image on your server based on the `imageKey`. Of course you can set `imageKey` directly to the URL and make `getUrl` an identity function.\n\nFor a Firebase example, see [the demo files](https://github.com/dherault/react-block-text/blob/main/demo/src/App.tsx).\n\n### Community plugins\n\nCreate your own plugin based on the template provided by this repository and I'll add it here!\n\n## License\n\nMIT\n\nThis project is not affiliated with Notion Labs, Inc.\n\n\u003c!-- Notion Labs, [hire me!](https://dherault.com) --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdherault%2Freact-block-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdherault%2Freact-block-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdherault%2Freact-block-text/lists"}