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: 12 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 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-12T23:14:30.000Z (over 5 years ago)
- Last Synced: 2025-04-05T20:11:14.747Z (about 1 year ago)
- Topics: chakra-ui, react, slate-react, slatejs, typescript
- Language: TypeScript
- Homepage:
- Size: 6.84 KB
- Stars: 19
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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