add plain text to exports

yoopta-editor · Jun 24, 2024 · 5fdbd75 · 5fdbd75
1 parent 494b887
commit 5fdbd75
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 16 deletions.
diff --git a/packages/core/editor/src/plugins/SlateEditorComponent.tsx b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
@@ -209,9 +209,11 @@ const SlateEditorComponent = <TKeys extends string, TProps, TOptions>({
     (event: React.FocusEvent) => {
       if (editor.readOnly) return;
 
-      IS_FOCUSED_EDITOR.set(editor, true);
-      // [TODO] - as test
-      editor.emit('focus', true);
+      if (!editor.isFocused()) {
+        IS_FOCUSED_EDITOR.set(editor, true);
+        // [TODO] - as test
+        editor.emit('focus', true);
+      }
       eventHandlers?.onFocus?.(event);
     },
     [eventHandlers.onFocus, editor.readOnly],
@@ -224,7 +226,6 @@ const SlateEditorComponent = <TKeys extends string, TProps, TOptions>({
       eventHandlers?.onPaste?.(event);
 
       const data = event.clipboardData;
-
       const html = data.getData('text/html');
       const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
 

diff --git a/packages/core/exports/src/html/serialize.ts b/packages/core/exports/src/html/serialize.ts
@@ -1,7 +1,7 @@
 import { YooEditor, YooptaBlockData, SlateElement, YooptaContentValue } from '@yoopta/editor';
 
 export function getPluginByInlineElement(plugins: YooEditor['plugins'], elementType: string) {
-  const plugin = Object.values(plugins).find((plugin) => plugin.type === plugin.elements?.[elementType].original);
+  const plugin = Object.values(plugins).find((plugin) => plugin.type === plugin.elements?.[elementType].rootPlugin);
   return plugin;
 }
 
@@ -49,7 +49,8 @@ export function serialize(editor: YooEditor, blocksData: YooptaBlockData[]) {
 
     if (plugin && plugin.parsers?.html?.serialize) {
       const content = serializeChildren(blockData.value[0].children, editor.plugins);
-      return plugin.parsers.html.serialize(blockData.value[0] as SlateElement, content);
+      const text = plugin.parsers.html.serialize(blockData.value[0] as SlateElement, content);
+      return `${text}\n`;
     }
 
     return '';

diff --git a/packages/core/exports/src/index.ts b/packages/core/exports/src/index.ts
@@ -7,14 +7,14 @@ import { serializeText } from './text/serialize';
 
 const markdown = { deserialize: deserializeMarkdown, serialize: serializeMarkdown };
 const html = { deserialize: deserializeHTML, serialize: serializeHTML };
-const text = { deserialize: deserializeText, serialize: serializeText };
+const plainText = { deserialize: deserializeText, serialize: serializeText };
 
 const yooptaExports = {
   markdown,
   html,
-  text,
+  plainText,
 };
 
-export { markdown, html, text };
+export { markdown, html, plainText };
 
 export default yooptaExports;
diff --git a/packages/core/exports/src/text/deserialize.ts b/packages/core/exports/src/text/deserialize.ts
@@ -1 +1,13 @@
-export function deserializeText() {}
+import { buildBlockData, generateId, YooEditor, YooptaContentValue } from '@yoopta/editor';
+
+export function deserializeText(editor: YooEditor, text: string): YooptaContentValue {
+  const blockId = generateId();
+  const paragraphBlock = buildBlockData({
+    id: blockId,
+    value: [{ id: generateId(), children: [{ text }] }],
+  });
+
+  return {
+    [blockId]: paragraphBlock,
+  };
+}
diff --git a/packages/core/exports/src/text/serialize.ts b/packages/core/exports/src/text/serialize.ts
@@ -1 +1,11 @@
-export function serializeText() {}
+import { YooEditor, YooptaContentValue } from '@yoopta/editor';
+import { serializeHTML } from '../html/serialize';
+
+export function serializeText(editor: YooEditor, content: YooptaContentValue) {
+  const htmlString = serializeHTML(editor, content);
+  console.log('htmlString', htmlString);
+
+  const div = document.createElement('div');
+  div.innerHTML = htmlString;
+  return div.innerText;
+}
diff --git a/packages/development/src/pages/dev/index.tsx b/packages/development/src/pages/dev/index.tsx
@@ -6,10 +6,8 @@ import YooptaEditor, {
   YooptaBlockData,
   YooptaContentValue,
 } from '@yoopta/editor';
-import { html, markdown } from '@yoopta/exports';
+import { html, markdown, plainText } from '@yoopta/exports';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { MarkdownPreview } from '../../components/parsers/markdown/MarkdownPreview/MarkdownPreview';
-import { HtmlPreview } from '../../components/parsers/html/HtmlPreview/HtmlPreview';
 import { MARKS } from '../../utils/yoopta/marks';
 import { YOOPTA_PLUGINS } from '../../utils/yoopta/plugins';
 import { TOOLS } from '../../utils/yoopta/tools';
@@ -213,10 +211,10 @@ const Buttons = ({ onSubmit }: any) => {
         className="bg-[#007aff] mr-4 text-[#fff] px-4 py-2 rounded-md"
         onClick={() => {
           const data = editor.getEditorValue();
-          console.log('MD serialize data \n', markdown.serialize(editor, data));
+          console.log('plain text serialize data \n', plainText.serialize(editor, data));
         }}
       >
-        Serialize to Markdown
+        Serialize to Plaintext
       </button>
       <button
         className="bg-[#007aff] mr-4 text-[#fff] px-4 py-2 rounded-md"