From d4bab54948702a086f76e53796a51318fbfa7ef7 Mon Sep 17 00:00:00 2001
From: Darginec05 <devopsbanda@gmail.com>
Date: Tue, 25 Jun 2024 19:54:57 +0200
Subject: [PATCH] update documentation

---
 README.md                       |   1 -
 package.json                    |   2 +-
 packages/core/exports/README.md | 106 ++++++++++++++++++++------------
 3 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 39d5f95b7..0ad2b5e95 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,6 @@
 
 [![RepoRater](https://repo-rater.eddiehub.io/api/badge?owner=Darginec05&name=Yoopta-Editor)](https://repo-rater.eddiehub.io/rate?owner=Darginec05&name=Yoopta-Editor)
 ![npm](https://img.shields.io/npm/v/@yoopta/editor)
-![license](https://img.shields.io/npm/l/@yoopta/editor)
 ![downloads](https://img.shields.io/npm/dm/@yoopta/editor)
 [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/Darginec05)
 
diff --git a/package.json b/package.json
index 7fceaef2d..92b36ffb4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   ],
   "private": true,
   "scripts": {
-    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/exports --scope @yoopta/link --scope @yoopta/file --scope @yoopta/image --parallel --ignore development",
+    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/exports --scope @yoopta/link --scope @yoopta/marks --scope @yoopta/file --scope @yoopta/image --parallel --ignore development",
     "build": "yarn clean && yarn lerna run build --parallel --ignore development",
     "clean": "find ./packages -type d -name dist ! -path './packages/development/*' -exec rm -rf {} +",
     "serve": "yarn lerna run dev --scope=development",
diff --git a/packages/core/exports/README.md b/packages/core/exports/README.md
index f9ef05b5e..87bf50d61 100644
--- a/packages/core/exports/README.md
+++ b/packages/core/exports/README.md
@@ -23,29 +23,25 @@ import { html } from '@yoopta/exports';
 const Editor = () => {
   const editor = useMemo(() => createYooptaEditor(), []);
 
-  const deserializeHTML = () => {};
+  // from html to @yoopta content
+  const deserializeHTML = () => {
+    const htmlString = '<h1>First title</h1>';
+    const content = html.deserialize(editor, htmlString);
+
+    editor.setEditorValue(content);
+  };
+
+  // from @yoopta content to html string
+  const serializeHTML = () => {
+    const data = editor.getEditorValue();
+    const htmlString = html.serialize(editor, data);
+    console.log('html string', htmlString);
+  };
 
   return (
     <div>
-      <button
-        onClick={() => {
-          const htmlString = '<h1>First title</h1>';
-          const value = html.deserialize(editor, htmlString);
-
-          editor.setEditorValue(value);
-        }}
-      >
-        Deserialize from html to content
-      </button>
-
-      <button
-        onClick={() => {
-          const data = editor.getEditorValue();
-          const htmlString = html.serialize(editor, data);
-        }}
-      >
-        Serialize from content to html
-      </button>
+      <button onClick={deserializeHTML}>Deserialize from html to content</button>
+      <button onClick={serializeHTML}>Serialize from content to html</button>
 
       <YooptaEditor editor={editor} plugins={plugins} />
     </div>
@@ -63,29 +59,59 @@ import { markdown } from '@yoopta/exports';
 const Editor = () => {
   const editor = useMemo(() => createYooptaEditor(), []);
 
-  const deserializeHTML = () => {};
+  // from markdown to @yoopta content
+  const deserializeMarkdown = () => {
+    const markdownString = '# First title';
+    const value = markdown.deserialize(editor, markdownString);
+
+    editor.setEditorValue(value);
+  };
+
+  // from @yoopta content to markdown string
+  const serializeMarkdown = () => {
+    const data = editor.getEditorValue();
+    const markdownString = markdown.serialize(editor, data);
+    console.log('markdown string', markdownString);
+  };
+
+  return (
+    <div>
+      <button onClick={deserializeMarkdown}>Deserialize from markdown to content</button>
+      <button onClick={serializeMarkdown}>Serialize from content to markdown</button>
+
+      <YooptaEditor editor={editor} plugins={plugins} />
+    </div>
+  );
+};
+```
+
+Plain text exports/imports example
+
+```jsx
+import { plainText } from '@yoopta/exports';
+
+const Editor = () => {
+  const editor = useMemo(() => createYooptaEditor(), []);
+
+  // from plain text to @yoopta content
+  const deserializeText = () => {
+    const textString = '# First title';
+    const value = plainText.deserialize(editor, textString);
+
+    editor.setEditorValue(value);
+  };
+
+  // from @yoopta content to plain text string
+  const serializeText = () => {
+    const data = editor.getEditorValue();
+    const textString = plainText.serialize(editor, data);
+    console.log('plain text string', textString);
+  };
 
   return (
     <div>
-      <button
-        onClick={() => {
-          const markdownString = '# First title';
-          const value = markdown.deserialize(editor, markdownString);
-
-          editor.setEditorValue(value);
-        }}
-      >
-        Deserialize from markdown to content
-      </button>
-
-      <buttonw
-        onClick={() => {
-          const data = editor.getEditorValue();
-          const markdownString = markdown.serialize(editor, data);
-        }}
-      >
-        Serialize from content to markdown
-      </button>
+      <button onClick={deserializeText}>Deserialize from plain text to content</button>
+      <button onClick={serializeText}>Serialize from content to plain text</button>
 
       <YooptaEditor editor={editor} plugins={plugins} />
     </div>