Shreya Taneja, Project ManagerCopy a section with headings, a table and some styling. Paste it into a plain text field.
Everything flattens. The table becomes a run of words. The headings become sentences. The structure is gone and there is no way to get it back.
This video does that paste twice in the same app. Once into a plain field. Once into an editor. Then it opens both notes side by side.
The app is a notes tool. Nothing is mocked. Both notes save and both get opened.
Run time is seven minutes.
Text is easy. Any field holds text.
Tables are where paste handling breaks. A table is nested structure — rows inside a body, cells inside rows, alignment on each. Flatten any layer and you get a wall of words.
In the video the table arrives whole. Rows, cells, header styling. It looks the same on both sides of the copy.
If a table survives, everything simpler survives too. That is why it is the one to watch.
Rich text editor paste formatting works because the editor keeps the markup behind the content.
The clipboard carries HTML. A plain field throws it away and keeps the text. An editor reads it and keeps the structure.
So headings stay headings. Bold stays bold. Lists keep their bullets. Spacing holds.
Your template then renders what the editor stored. You are not writing a parser in between.
This is the last minute of the video and it is the best minute.
Switch the app to light mode. The editor changes with it.
No theme prop. No config object. No class you have to remember to pass down. It reads the host application and re-themes itself.
Most editors make theming your problem. You end up writing overrides, then writing more overrides when a release changes a class name.
Try it on the live demo in both modes.
The comparison is the whole argument.
Same source content. Same app. Same paste action. Two different fields.
The first note reads like a log file. The second reads like something you would publish.
Nothing changed in the app template between them. The difference is entirely in what the field stored.
bash
Setup runs under ten minutes end to end. Most of that is the AI tool working while you watch.
React and Next.js. Vue. Angular. Svelte. Plain JavaScript. Laravel through Packagist.
The quick start has a prompt for each. Copy yours and hand it to your tool.
The editor is built on Lexical, Meta's editor framework, and ships from npm.
Notes are the example. They are not the limit.
Anywhere someone types more than a sentence. Ticket bodies. Internal docs. Product descriptions. Event details. Comments. Help articles.
If your field strips formatting today, someone is already working around it. Usually by writing in a doc, pasting the result, then fixing what broke.
Paste handling alone is a project.
You need clipboard parsing. Then a sanitiser, because someone will paste from Word. Then table normalisation. Then image handling. Then the same again for Safari.
Then theming. Then mobile. Then undo across all of it.
None of it is your product. And it never finishes, because there is always one more source someone pastes from.
Does the table really survive? Yes. Rows, cells and header styling.
Do I need to configure dark mode? No. It reads the host app.
Will old notes break? No. They render as they do now.
Can I paste from Google Docs? Yes, and from Word and from web pages.
Is there a free tier? Yes.
Broken formatting is a support queue you built for yourself.
"Why did my heading disappear." "Can you fix the spacing on that note." "The table came out as one long line."
Every one of those is someone working around a field that threw their content away. They write in a doc first. They paste. They fix. They give up and send you a screenshot.
Rich text editor paste formatting removes the whole loop. They paste, it holds, they save.
Open one old note and one new note.
Old notes render exactly as before. Nothing migrates. Nothing breaks on the deploy.
New notes carry structure from the first keystroke. After a few weeks the field fills with the second kind on its own.
Then switch themes once. Confirm the editor follows. That is the whole acceptance test.
The video shows the install honestly, including the wait.
The AI tool takes a couple of minutes to add the package, wire the provider and verify the toolbar. That time is real and it is on screen.
What it is not is your time. You are watching, not typing. The two things you do by hand are creating the key and pasting it in.
The video sits above. Seven minutes, one app, two notes.
Plans and limits are on the pricing page.
00:00:00,080 --> 00:00:26,960 [Speaker 0] [lo-fi music plays] Hey. Hi, there. So on this video, we're going to see how you can integrate editor in less than 5 minutes, so just try that. If you have any web application where you want to have a rich text editor, editor is the choice to go. So once you create yourself an account on the editor there, on- once, once you log in, into the system there, you will see license key. Under license key, you will create a new license key there as per your plan supports. So I'll just name as Text 00:00:28,600 --> 00:00:38,720 [Speaker 0] Notes, whatever you can, you can call it, uh, just the name of the key that you are, uh, going to use further. And for me, it's like all the features are already enabled there, so I'll just create the key here. 00:00:40,000 --> 00:00:47,920 [Speaker 0] Once your key is created, open that key, and then you can just copy the key right over there. So currently, if I go and open this up, you will see I have... 00:00:49,060 --> 00:01:03,120 [Speaker 0] If I'm going to create a new note over here, I do not have any, any rich text editor over here. So what happens if I go and copy some information? Let's say, let's say I have to copy this information here, which is, which starts from this 00:01:04,340 --> 00:01:06,600 [Speaker 0] to... and goes up to, 00:01:08,740 --> 00:01:23,120 [Speaker 0] up to here. That's fine. So if I have to copy and paste this information over here, so I can do that part, and this is how it looks. It just keeping all in the, in the text format there. There is, like, no, no formatting at all. And even though if I just name it as 00:01:24,940 --> 00:01:26,520 [Speaker 0] Without Editor, 00:01:27,640 --> 00:01:44,860 [Speaker 0] I'll create this note, and this note is right over here. I can open that note, show you, like, how that shows up. This is how we, we are seeing that entire text here. Now, we will go in and, and we'll integrate editor over here on the application. So, so for that, what you have to do... 00:01:46,100 --> 00:01:48,780 [Speaker 0] So grab the key that you have, and then, uh, 00:01:50,020 --> 00:02:09,060 [Speaker 0] before grabbing the key, there is one more step you can, you can ease the process there. So for quick start over there, uh, we have... We are supporting these languages already. So the project is, uh, Next.js. So for Next.js, I'll pick this one, and I'll copy the prompt from here. So you do not have to do anything. You just, like, copy and paste the prompt that you have, and there you go. 00:02:10,580 --> 00:02:15,760 [Speaker 0] It's, uh, 8:54. We'll check, like, how long it will take to integrate editor now. 00:02:19,960 --> 00:02:53,500 [Speaker 0] [lo-fi music plays] So now it's asking for the key that we have, and then for the key, I told you we have this key right over here on the license key section. And you have to create your key from here, which I already have mentioned here. Once you create the key, it will start displaying here under the license section. 00:02:56,280 --> 00:02:58,040 [Speaker 0] And over here, if I go in 00:02:59,180 --> 00:03:00,680 [Speaker 0] text note, so I'll just copy this key, 00:03:01,700 --> 00:03:06,260 [Speaker 0] and key here is this one. So I have pasted the key there. 00:03:07,500 --> 00:03:18,100 [Speaker 0] Now, still on the clock here, it's, like, mo- around 2 minutes. We're trying to see, like, how long it will take further. I- even though if I just go and open this up, this is where we need editor to work. 00:03:23,420 --> 00:05:25,599 [Speaker 0] [lo-fi music plays] As you can see, the editor is already integrated there. It's just the AI is checking and verifying if everything is working fine, uh, entering up some content there and verifying if all the features provided by the editor is working fine there or not. So we're just waiting on that part to complete, and then I'll... we'll continue from there. [lo-fi music plays] Guys, now the editor is, is loaded into the system there, and then what we'll do, we'll just create one new note again, and then we'll name it as Content with Editor. 00:05:27,180 --> 00:05:30,040 [Speaker 0] I will copy and paste the same content which we had copied earlier. 00:05:32,100 --> 00:05:38,560 [Speaker 0] So I'll just copy the same content here again, and I'll try to paste it over here. So this is how the content shows up. 00:05:43,420 --> 00:05:46,840 [Speaker 0] We have these tables over here and then all that part and create the note. 00:05:48,660 --> 00:06:01,540 [Speaker 0] Now, this is content with editor and without editor. So we'll open the without editor over here. This is how the content was there earlier when we were not using editor. And when we are using editor, this is how the content looks like. 00:06:03,180 --> 00:06:46,780 [Speaker 0] So it copies the entire content, keeping the HTML and CSS intact. So this is the benefit of using the editor on your system. So it barely takes, like, less than 10 minutes to have up and running. Your editor is right on your system where you, uh, can utilize to write up rich blogs, titles, text, and, like, feature-rich content writing if something is, uh, part of your system there. Editor helps you with the same. And also, if I just go back there and move the system to the light mode and try to do something, let's say add a new note over there, it detects automatically, like, which... what is the mode of the system there, and it, uh, changes the theming accordingly there as well. So this is, you know, the power of the editor. 00:06:47,820 --> 00:07:04,180 [Speaker 0] Uh, I hope you liked what you saw there, and I'll be catching a little more videos, uh, further down the line for creating more use cases where you can use and be a part of our editor's family. Thank you. [lo-fi music plays]
Yes. Rows, cells and header styling all come across. Tables are the hardest case because they are nested structure — if a table survives the paste, simpler formatting does too.
The clipboard carries HTML alongside the text. A plain field discards the HTML and keeps only the characters, so headings, tables and styling are lost at the moment of paste.
No. The editor reads the host application's mode and re-themes itself. There is no theme prop or config object to pass.
Yes, and from web pages. The editor reads the clipboard HTML and keeps the structure rather than flattening it.
Next.js, React, Rich Text Editor, Dark Mode, Tables
Connect your own OpenAI, Anthropic, Gemini or Groq key and the editor's AI runs on your provider account at your rates. This walkthrough shows where the keys go, then generates a 500-word article with images from a single prompt.
An event management app with a plain notes field gets a real editor in under four minutes. Create a license key, hand the quick-start prompt to an AI tool, paste the key in. Then paste rich content and watch the formatting hold.
