have contents saving to local storage

jackmuva · Dec 22, 2024 · 9106cda · 9106cda
1 parent 74076ac
commit 9106cda
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/justfrands-frontend/src/App.tsx b/justfrands-frontend/src/App.tsx
@@ -3,7 +3,7 @@ import EditorPage from './pages/EditorPage';
 
 function App() {
   return (
-    <div className='pt-20 absolute top-0 left-0 w-screen flex flex-col justify-start items-center'>
+    <div className='py-20 absolute top-0 left-0 w-screen flex flex-col justify-start items-center'>
       <EditorPage />
     </div>
   );

diff --git a/justfrands-frontend/src/components/TiptapEditor/TiptapEditor.tsx b/justfrands-frontend/src/components/TiptapEditor/TiptapEditor.tsx
@@ -12,12 +12,17 @@ import { TiptapBubbleMenu } from './TiptapBubbleMenu';
 import FileHandler from '@tiptap-pro/extension-file-handler';
 import { all, createLowlight } from 'lowlight';
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import { useEffect } from 'react';
 
 const lowlight = createLowlight(all);
 
 // define your extension array
-const extensions = [Document, Paragraph, Heading.configure({ levels: [1, 2, 3] }),
-	Text, Image, Youtube, BulletList, ListItem,
+const extensions = [Document, Paragraph, Text, Youtube, BulletList, ListItem,
+	Image.configure({
+		allowBase64: true,
+		inline: true
+	}),
+	Heading.configure({ levels: [1, 2, 3] }),
 	FileHandler.configure({
 		allowedMimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
 		onDrop: (currentEditor, files, pos) => {
@@ -61,30 +66,41 @@ const extensions = [Document, Paragraph, Heading.configure({ levels: [1, 2, 3] }
 	CodeBlockLowlight.configure({ lowlight, defaultLanguage: 'ts' })
 ];
 
-const content = `<h2>Start Typing to Begin</h2>
-		<p></p>
-		<p></p>
-		<p></p>
-		<p></p>
-		<p></p>
-		<p></p>`
-
 
 const TiptapEditor = () => {
+	const content = `<h2>Start Typing to Begin</h2>
+					<p></p>
+					<p></p>
+					<p></p>
+					<p></p>
+					<p></p>
+					<p></p>`
 	const editor = useEditor({
 		extensions,
 		content,
 		editorProps: {
 			attributes: {
 				class: 'focus:outline-none',
 			},
-		}
+		},
+		onUpdate({ editor }) {
+			console.log(editor.getHTML());
+			localStorage.setItem("content", editor.getHTML());
+		},
 	});
 
+	useEffect(() => {
+		console.log("initial", localStorage.getItem("content"));
+		if (localStorage.getItem("content")) {
+			const savedContent = localStorage.getItem("content") ?? content;
+			editor?.commands.setContent(savedContent);
+		}
+	}, []);
+
 	return (
 		<div className={"w-full h-full text-left text-black "}>
 			<TiptapMenu editor={editor}></TiptapMenu>
-			<EditorContent className='bg-stone-100 p-4 rounded-lg mt-8 h-96' editor={editor} />
+			<EditorContent className='bg-stone-100 p-4 rounded-lg mt-8 h-fit min-h-96' editor={editor} />
 			<TiptapBubbleMenu editor={editor} />
 		</div>
 	);