update documentation

yoopta-editor · Jun 25, 2024 · d4bab54 · d4bab54
1 parent 298a53f
commit d4bab54
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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>