Merge pull request #16 from greeenboi/new-changes

New changes

package.json

@@ -25,6 +25,7 @@
     "@tiptap/starter-kit": "^2.1.8",
     "fs": "^0.0.1-security",
     "path": "^0.12.7",
+    "prosemirror-model": "^1.19.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",

src-tauri/src/main.rs

@@ -7,6 +7,7 @@ fn greet(name: &str) -> String {
     format!("Hello, {}! You've been greeted from Rust and SuvanGS the creator!", name)
 }
 
+
 fn main() {
     tauri::Builder::default()
         .invoke_handler(tauri::generate_handler![greet])

src/App.jsx

@@ -6,50 +6,71 @@ import NoteWindow from './components/NoteWindow';
 import Highlight from '@tiptap/extension-highlight'
 import Typography from '@tiptap/extension-typography'
 import TextAlign from '@tiptap/extension-text-align'
-import Code from '@tiptap/extension-code'
-import Text from '@tiptap/extension-text'
-
+import { save } from "@tauri-apps/api/dialog";
+import { writeFile } from "@tauri-apps/api/fs";
 import { Emoticons } from './components/Emoticons';
 
 // Import the necessary Node.js modules
 // const fs = require('fs');
 // const path = require('path');
 
+
+
 const App = () => {
-  // const [editor, setEditor] = useState(null);
-  // const [note, setNote] = useState('');
 
-  // const saveAsHtml = () => {
-  //   if (editor) {
-  //     const html = editor.getHTML();
-  //     // Save the HTML content to a file
-  //     saveToFile(html);
-  //   }
-  // };
+  const saveHTMLLocally = async () => {
+    const suggestedFilename = "document.html";
+    console.log('Started Process:');
+    const htmlContent = editor.getHTML();
+    console.log(editor.getHTML());
+    try {
+
+      const filePath = await save({
+        defaultPath: suggestedFilename,
+        filters: [{ name: "HTML Files", extensions: ["html"] }],
+      });
+
+      if (!filePath) {
+        console.log('No file path selected/User Cancelled Operation');
+        return;
+      }
+
+      await writeFile({ path: filePath, contents: htmlContent, options: {} });
+
+      alert("HTML content saved successfully!");
+    } catch (error) {
+      alert("Failed to save HTML content: " + error);
+    }
+  };
+  const saveJSONLocally = async () => {
+    const suggestedFilename = "document.json";
+    console.log('Started Process:');
+    const jsonContent = editor.getJSON();
+    console.log(editor.getJSON());
+    try {
 
-  // // Function to save HTML content to a file
-  // const saveToFile = (htmlContent) => {
-  //   const fileName = 'note.html'; // Specify the file name
-  //   const filePath = path.join(__dirname, fileName); // Build the file path
+      const filePath = await save({
+        defaultPath: suggestedFilename,
+        filters: [{ name: "JSON Files", extensions: ["json"] }],
+      });
 
-  //   // Write the HTML content to the file
-  //   fs.writeFile(filePath, htmlContent, (err) => {
-  //     if (err) {
-  //       console.error('Error saving file:', err);
-  //     } else {
-  //       console.log('File saved successfully!');
-  //     }
-  //   });
-  // };
+      if (!filePath) {
+        console.log('No file path selected/User Cancelled Operation');
+        return;
+      }
 
-
+      await writeFile({ path: filePath, contents: jsonContent, options: {} });
+
+      alert("JSON content saved successfully!");
+    } catch (error) {
+      alert("Failed to save JSON content: " + error);
+    }
+  }
   const editor = useEditor({
     extensions: [
       StarterKit,
       Highlight,
       Typography,
-      Text,
-      Code,
       Emoticons,
       TextAlign.configure({
         types: ['heading', 'paragraph'],
@@ -67,15 +88,13 @@ const App = () => {
         <br/>
         <br/>
         <br/>
-        
-        
             `,
-  })
-
+  });
   return (
     <main className='window'>
-      {/* <NoteMenuBar editor={editor} /> */}
-      <NoteWindow editor={editor} />
+      <button onClick={saveHTMLLocally}>Save as HTML</button>
+      {/* <button onClick={saveJSONLocally}>Save as JSON</button> */}
+      <NoteWindow  editor={editor}/>
     </main>
   );
 };

src/components/NoteWindow.jsx

@@ -6,22 +6,21 @@ import {
     BubbleMenu,
     EditorContent,
     FloatingMenu,
-    useEditor, } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import React from 'react'
-import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
+    } from '@tiptap/react'
+
+import React, { useEffect, useRef } from 'react'
 import NoteMenuBar from './NoteMenuBar';
 
 
 
 
 
+
 export default ({ editor }) => {
-
   return (
-    <>
+    <section >
     {/* <NoteMenuBar /> */}
-    {editor && <NoteMenuBar editor={editor} />}
+      {editor && <NoteMenuBar editor={editor} />}
       {editor && <BubbleMenu className="bubble-menu" tippyOptions={{ duration: 100 }} editor={editor} >
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
@@ -69,11 +68,11 @@ export default ({ editor }) => {
           onClick={() => editor.chain().focus().toggleBulletList().run()}
           className={editor.isActive('bulletList') ? 'is-active' : ''}
         >
-          <FaListOl />
+          <FaListUl />
         </button>
         <button
           onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          className={() => editor.isActive('orderedList')}
+          className={editor.isActive('orderedList') ? 'is-active' : ''}
         >
           <FaListOl />
         </button>
@@ -86,6 +85,6 @@ export default ({ editor }) => {
       </FloatingMenu></div>}
 
       <EditorContent editor={editor} />
-    </>
+    </section>
   )
 }

src/components/styles.scss

@@ -72,8 +72,9 @@ $cursor-color: #ffffff;
 
     ol {
       list-style: decimal;
+      margin-right: 1rem; 
     }
-    
+
     ul{
         list-style: none;     
         margin: 1rem;