Lexical Advanced Tutorial - Tables, Code Blocks, Images, Colors, Lists, Video Embedding

Описание: In this Lexical Advanced Course we will add tables, code blocks, images, text color, background color, un ordered lists, ordered lists and Youtube Video Embdedding in our Lexical Editor. We will also see how we can add Custom Nodes like Image and Video Embedding Nodes to our Lexical Editor. This Course will help you master Lexical.

Join my discord:   / discord  
You can follow me on:   / usmanabdurrehman97  
Code: https://github.com/usmanabdurrehman/L...

Lexical Crash Course:    • The Ultimate Lexical Crash Course / Tutori...  

00:00 Intro
00:16 What we will be building
01:32 Pre-requisites
02:16 How Lexical Works
03:51 Implementing Color Picker Component
07:00 Changing Text/Background Color
13:00 Updating color state based on text selection
16:35 Adding List Nodes to nodes config
17:38 Adding Ordered/Unordered Lists
19:28 Adding List Plugin from Lexical
20:28 Remove List
21:42 Detecting if are inside a List
26:08 Making list button active
27:24 Adding Table Nodes to nodes config
28:05 Adding Table
34:40 Adding Table Theme styles
36:57 Adding Code Block
40:24 Adding Styles to Code Block
42:01 Adding Line Numbers in Code Block
45:34 Displaying Seelcted Language in Code Block
46:24 Adding Styles for Code Highlighting(variables, functions etc)
51:24 Adding Lanugage Dropdown
52:55 Changing Language based on selected code block
57:34 Changing Language from dropdown
01:00:28 Hiding/Showing other buttons if are inside a code block
01:01:58 How to make Custom Features/Nodes
01:03:34 Adding Image
01:24:39 Embedding Youtube Video
01:34:41 Outro