Back to Browse

Master React Slate in 1 hour

3.7K views
Sep 16, 2024
1:03:22

Hey everyone, in this tutorial I will teach you everything related to React Slate. We will cover how we can do text formatting, key bindings, add history features like undo/redo, add headings, alignment, block quotes and lists. At the end we will see how we can save slate text inside a database and how we can fetch data from a server and show it in the Slate Rich Text Editor. Code: https://github.com/usmanabdurrehman/slate-tutorials/tree/CrashCourseTutorial You can follow me on: https://www.instagram.com/usmanabdurrehman97/ Join the Discord: https://discord.gg/8BhnMwNt6D 00:00 What we will be building 00:27 Installation 00:43 Base of the Project 01:09 Slate Component 02:34 Editable Component 04:31 Explaining State Shape/Structure 07:17 Explaining Toolbar Component 07:52 Text/Mark Formatting Concept 10:04 Extending Slate Editor Types 12:51 Text/Mark Formatting Logic 18:54 renderLeaf function 23:08 Selecting Buttons based on Current Marks 25:07 Key Bindings 26:53 Undo/Redo 28:49 Element Formatting Concept 30:36 Alignment 38:55 Selecting Buttons based on Current Block/Alignment 42:42 Toggling Alignment 44:12 Headings 49:31 Block Quotes 50:49 Lists 55:07 Making Rich Text Editor a Reusable Component 59:25 Saving Data to DB 01:00:56 Writing DB Text to Slate Component 01:03:06 Outro

Download

0 formats

No download links available.

Master React Slate in 1 hour | NatokHD