{"id":13449809,"url":"https://github.com/diegocouto/react-slate-elements","last_synced_at":"2025-10-20T03:49:11.005Z","repository":{"id":35033654,"uuid":"198812953","full_name":"diegocouto/react-slate-elements","owner":"diegocouto","description":"A collection of elements to use with Slate.","archived":false,"fork":false,"pushed_at":"2022-12-10T23:37:43.000Z","size":2218,"stargazers_count":8,"open_issues_count":20,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T14:50:22.523Z","etag":null,"topics":["react","reactjs","rich-text-editor","slate","slate-react","slatejs"],"latest_commit_sha":null,"homepage":"https://diegocouto.github.io/react-slate-elements/","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/diegocouto.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}},"created_at":"2019-07-25T10:47:45.000Z","updated_at":"2023-11-21T04:58:26.000Z","dependencies_parsed_at":"2023-01-15T12:30:26.085Z","dependency_job_id":null,"html_url":"https://github.com/diegocouto/react-slate-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/diegocouto/react-slate-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegocouto%2Freact-slate-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegocouto%2Freact-slate-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegocouto%2Freact-slate-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegocouto%2Freact-slate-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diegocouto","download_url":"https://codeload.github.com/diegocouto/react-slate-elements/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegocouto%2Freact-slate-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270945167,"owners_count":24672873,"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","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","reactjs","rich-text-editor","slate","slate-react","slatejs"],"created_at":"2024-07-31T06:00:57.505Z","updated_at":"2025-10-20T03:49:10.935Z","avatar_url":"https://github.com/diegocouto.png","language":"TypeScript","funding_links":[],"categories":["Running the update"],"sub_categories":["By Popularity"],"readme":"# React Slate Elements\n\n`react-slate-elements` is a set of React components to make your life easier when building your own rich text editor using Slate. Check it out:\n\n![demo](https://user-images.githubusercontent.com/1069623/61877723-4a1c4580-aef8-11e9-9fa2-a1e095de4470.png)\n\n**[View demo](https://diegocouto.github.com/react-slate-elements)** 👈\n\n## Getting started\n\nInstall it as any other package:\n\n    yarn add react-slate-elements\n\nNow let's see how to put it into action:\n\n```javascript\nimport React, { useState, useCallback } from 'react';\nimport { Value } from 'slate';\nimport { Editor } from 'slate-react';\nimport { EditorSchema, EditorToolbar, Bold } from 'react-slate-elements';\n\nconst plugins = [\n  Bold.Plugin,\n]\n\nconst App = () =\u003e {\n  const [value, setValue] = useState(Value.fromJS(initialValue));\n  const [editor, setEditorRef] = useState(null);\n\n  const onChangeValue = ({ value }) =\u003e setValue(value);\n  const onRenderEditor = useCallback(ref =\u003e setEditorRef(ref), []);\n\n  const renderMark = (props, editor, next) =\u003e {\n    switch (props.mark.type) {\n      case Bold.TYPE:\n        return Bold.Mark(props);\n      default:\n        return next();\n    }\n  }\n\n  return (\n    \u003cdiv style={{ margin: 20 }}\u003e\n      \u003cEditorToolbar editor={editor}\u003e\n        \u003cBold.Button /\u003e\n      \u003c/EditorToolbar\u003e\n\n      \u003cEditor\n        ref={onRenderEditor}\n        schema={EditorSchema}\n        value={value}\n        onChange={onChangeValue}\n        renderMark={renderMark}\n        plugins={plugins}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst initialValue = {\n  document: {\n    nodes: [\n      {\n        object: 'block',\n        type: 'paragraph',\n        nodes: [\n          {\n            object: 'text',\n            text: 'A line of text in a paragraph.',\n          },\n        ],\n      },\n    ],\n  },\n};\n\nexport default App;\n```\n\nAlthough it's an arguably quite simple example, all the main concepts are present here and you'll be able to easily extend it to fulfill all your requirements.\n\nIn order to allow a bold mark to be used we've:\n\n1. Added a condition to verify if it should be applied or not on Slate's `renderMark` function. We check if the current node has the `Bold.TYPE` and, if positive, we render the mark accordingly through `Bold.Mark(props)`;\n2. Included the `\u003cBold.Button /\u003e` inside our `\u003cEditorToolbar editor={editor}\u003e`, so we'll have a button to toggle this mark;\n3. Added the `Bold.Plugin` into our editors' plugin array. Because of this, we can press `Cmd+b` to toggle our bold mark without having to press the toolbar button.\n\nFor a complete example, you can [check the code used on the demonstration](https://github.com/diegocouto/react-slate-elements/blob/master/examples/src/App.tsx) page.\n\n## Available Components\n\n**UI**\n\n- [x] [EditorToolbar](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/ui/EditorToolbar.tsx)\n- [x] [Separator](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/ui/Separator.tsx)\n\n**Mark**\n\n- [x] [Bold](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/marks/bold/index.tsx)\n- [x] [Code](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/marks/code/index.tsx)\n- [x] [Italic](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/marks/italic/index.tsx)\n- [x] [Underline](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/marks/underline/index.tsx)\n\n**Blocks**\n\n- [x] [Blockquote](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/blocks/blockquote/index.tsx)\n- [x] [BulletList](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/blocks/bullet-list/index.tsx)\n- [x] [OrderedList](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/blocks/ordered-list/index.tsx)\n- [x] [ListItem](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/blocks/list-item/index.tsx)\n- [x] [Paragraph](https://github.com/diegocouto/react-slate-elements/blob/master/src/components/blocks/paragraph/index.tsx)\n\n**Helpers**\n\n- [x] [EditorSchema](https://github.com/diegocouto/react-slate-elements/blob/master/src/helpers/EditorSchema.ts)\n\n**Plugins**\n\n- [x] [SymbolsReplacer](https://github.com/diegocouto/react-slate-elements/blob/master/src/plugins/SymbolsReplacer.ts)\n\n## Big thanks 👏\n\nAll icons used here are part of the [MaterialDesign project](https://github.com/Templarian/MaterialDesign).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegocouto%2Freact-slate-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegocouto%2Freact-slate-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegocouto%2Freact-slate-elements/lists"}