https://github.com/aboveyunhai/chakra-slatejs-example

This is a richtext example of using slate.js with Chakra UI.
https://github.com/aboveyunhai/chakra-slatejs-example

chakra-ui react slate-react slatejs typescript

Last synced: 3 months ago
JSON representation

This is a richtext example of using slate.js with Chakra UI.

• Host: GitHub
• URL: https://github.com/aboveyunhai/chakra-slatejs-example
• Owner: aboveyunhai
• License: mit
• Created: 2021-01-12T22:52:12.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-01-12T23:14:30.000Z (over 3 years ago)
• Last Synced: 2024-01-16T05:56:35.105Z (5 months ago)
• Topics: chakra-ui, react, slate-react, slatejs, typescript
• Language: TypeScript
• Homepage:
• Size: 6.84 KB
• Stars: 18
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• slatejs-awesome - aboveyunhai/chakra-slatejs-example - This is a richtext example of using slate.js with Chakra UI. <br/> (0 stars / 2021-01-12 / 3 commits ) (Running the update / By Popularity)

README

        
# chakra-slatejs-example

 This is a richtext example of using slate.js with Chakra UI and Typescript.

 

 Because Chakra UI modifies some of default html css style, the example is intented to fully use Chakra basic components to achieve the same behavior from offical example.

 

 Also includes Light/Dark Mode toggler to demonstrate how to specify the richtext editor display under different color mode.

 

 CodeSandBox: [chakra-slatejs](https://codesandbox.io/s/chakra-slatejs-ptpfm?file=/src/index.tsx)

 

 Based on [Slate official RichText example](https://github.com/ianstormtaylor/slate/blob/master/site/examples/richtext.tsx)  

 and the discussion of selection bug: https://github.com/ianstormtaylor/slate/issues/3412