Merge pull request #23 from abdowns/dev

Dev

web/package.json

@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tiptap/pm": "^2.0.3",
+    "@tiptap/react": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.3",
+    "html-react-parser": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.13.0"

web/src/components/note/contentblock/contentblock.css

@@ -1,3 +1,7 @@
+.contentblock {
+    margin: 2vh;
+}
+
 .contentblock > h1 {
     font-size: 32px;
     font-weight: 700;
@@ -10,4 +14,17 @@
 
 .contentblock > img {
     max-width: 100%;
+}
+
+.contentblock-border {
+    padding: 1vh;
+
+    border: solid;
+    border-color: white;
+    border-width: 1px;
+    border-radius: 10px;
+}
+
+.contentblock-border:hover {
+    border-color: lightgray;
 }

web/src/components/note/contentblock/headerblock.css

@@ -4,7 +4,10 @@
     font-weight: bold;
     width: 100%;
 
+    outline: none;
+
     padding-bottom: 4px;
+    margin-bottom: 2vh;
     border-bottom: 2px solid #888888;
 }
 

web/src/components/note/contentblock/textblock.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import parse from 'html-react-parser';
 
 import "./contentblock.css";
 
@@ -9,19 +10,28 @@ interface TextBlockProps {
 }
 
 export default function TextBlock(props: TextBlockProps) {
-    const [editing, setEditing] = useState(false);
-    const [text, setText] = useState(props.text);
+    const [editing, setEditing] = useState(true);
+    const [content, setContent] = useState<string>('');
 
-    function toggleEditing() {
-        setEditing(!editing);
+    function saveContent(htmlContent: string) {
+        setContent(htmlContent);
+        setEditing(false);
+    }
+
+    function handleClick() {
+        if (!editing) {
+            setEditing(true);
+        }
     }
 
     return (
-        <div className="contentblock" onClick={() => {}}>
+        <div 
+        className={editing ? 'contentblock' : 'contentblock contentblock-border'} 
+        onClick={handleClick}>
             {
                 (editing)
-                ? <Editor text={'test'} setText={setText}/>
-                : <p> {text} </p>
+                ? <Editor htmlContent={content} closeCallback={saveContent}/>
+                : parse(content)
             }
         </div>
     )

web/src/components/note/editor/editor-temp.tsx

@@ -0,0 +1,37 @@
+import { useRef } from 'react';
+
+import './editor.css'
+
+interface EditorProps {
+    text: string;
+    setText: (_v: string) => void;
+}
+
+export default function Editor(props: EditorProps) {
+    // const textArea = document.getElementById('editor-textarea');
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+    function autoResize() {
+        // ta.style.height = 'auto';
+        // ta.style.height = ta.scrollHeight + 'px';
+
+        const textArea = textAreaRef.current;
+        if (textArea) {
+            textArea.style.height = 'auto';
+            textArea.style.height = textArea.scrollHeight + 'px';
+
+            console.log(textArea.scrollHeight)
+        }
+    }
+
+    return (
+        <div className='editor-main'>
+            <textarea 
+                id='editor-textarea'
+                onInput={autoResize}
+                ref={textAreaRef}
+                defaultValue={props.text}
+            />
+        </div>
+    );
+}

web/src/components/note/editor/editor.css

@@ -1,21 +1,95 @@
-.editor-main {
+.editor-wrapper {
+    position: relative;
+
+    background-color: #202123;
+    border-radius: 10px;
+
+    z-index: 2;
+}
+
+.editor-content {
+    background-color: white;
+
+    padding-left: 10px;
+    padding-right: 10px;
+
     border: solid;
-    border-color: lightgray;
+    border-color: #202123;
     border-width: 2px;
     border-radius: 5px;
+
+    font-family: 'Inter', sans-serif;
+    font-size: 20;
+}
+
+.ProseMirror:focus {
+    outline: none;
 }
 
-.editor-main > textarea {
-    background-color: red;
+.editor-toolbar {
+    display: flex;
+    height: 4vh;
+    align-items: center;
+
+    background-color: #202123;
+
+    border-radius: 10px;
+}
+
+.editor-button {
+    background-color: #202123;
+
+    width: 2.5vh;
+    height: 2.5vh;
 
-    width: 100%;
-    height: 100px;
     margin: 10px;
 
     border: none;
-    outline: none;
-    resize: none;
+    border-radius: 5px;
 
-    font-family: 'Inter', sans-serif;
-    font-size: 20;
+    cursor: pointer;
+}
+
+.editor-button:hover {
+    background-color: #383a3d;
+}
+
+.is-active {
+    background-color: #383a3d;
+}
+
+.editor-divider {
+    display: inline;
+
+    width: 1px;
+    height: 2vh;
+    margin-left: 8px;
+    margin-right: 8px;
+
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.editor-closebutton {
+    background-color: #202123;
+
+    width: 2.5vh;
+    height: 2.5vh;
+
+    margin: 10px;
+    margin-left: auto;
+
+    border: none;
+    border-radius: 5px;
+
+    cursor: pointer;
+}
+
+.editor-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    z-index: 1;
 }

web/src/components/note/editor/editor.tsx

@@ -1,36 +1,116 @@
-import { useRef } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { Icon } from '@iconify/react';
 
-import './editor.css'
+import './editor.css';
 
 interface EditorProps {
-    text: string;
-    setText: (_v: string) => void;
+    htmlContent: string;
+
+    closeCallback: (_content: string) => void;
 }
 
-export default function Editor(props: EditorProps) {
-    // const textArea = document.getElementById('editor-textarea');
-    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+interface ToolbarProps {
+    editor: any;
+
+    closeCallback: () => void;
+}
 
-    function autoResize() {
-        // ta.style.height = 'auto';
-        // ta.style.height = ta.scrollHeight + 'px';
+interface ButtonProps {
+    id: string;
+    icon: string;
+
+    callback: () => void;
+}
+
+export default function Editor(props: EditorProps) {
+    const editor = useEditor({
+        extensions: [
+            StarterKit
+        ],
+        content: props.htmlContent
+    });
 
-        const textArea = textAreaRef.current;
-        if (textArea) {
-            textArea.style.height = 'auto';
-            textArea.style.height = textArea.scrollHeight + 'px';
+    if (!editor) {
+        return null;
+    }
 
-            console.log(textArea.scrollHeight)
-        }
+    function saveContent() {
+        const htmlContent = editor.getHTML();
+        props.closeCallback(htmlContent);
     }
 
     return (
-        <div className='editor-main'>
-            <textarea 
-                id='editor-textarea'
-                onInput={autoResize}
-                ref={textAreaRef}
-                defaultValue={props.text}
+        <div>
+            <div className='editor-wrapper'>
+                <Toolbar editor={editor} closeCallback={saveContent}/>
+                <EditorContent className='editor-content' editor={editor}/>
+            </div>
+            <div className='editor-overlay' onClick={saveContent}/>
+        </div>
+    );
+}
+
+function Toolbar(props: ToolbarProps) {
+    const buttonList: ButtonProps[] = [
+        {
+            id: 'bold',
+            icon: 'fe:bold',
+            callback: () => props.editor.chain().focus().toggleBold().run()
+        },
+        {
+            id: 'italic',
+            icon: 'fe:italic',
+            callback: () => props.editor.chain().focus().toggleItalic().run()
+        },
+        {
+            id: 'strike',
+            icon: 'mi:strikethrough',
+            callback: () => props.editor.chain().focus().toggleStrike().run()
+        },
+        {
+            id: 'codeBlock',
+            icon: 'fe:code',
+            callback: () => props.editor.chain().focus().toggleCodeBlock().run()
+        },
+        {
+            id: 'divider',
+            icon: 'none',
+            callback: () => {}
+        },
+        {
+            id: 'bulletList',
+            icon: 'fe:list-bullet',
+            callback: () => props.editor.chain().focus().toggleBulletList().run()
+        },
+        {
+            id: 'orderedList',
+            icon: 'fe:list-order',
+            callback: () => props.editor.chain().focus().toggleOrderedList().run()
+        },
+    ];
+
+    return (
+        <div className='editor-toolbar'>
+            {buttonList.map((button, i) => {
+                if (button.id === 'divider') {
+                    return <div className='editor-divider'/>
+                } else {
+                    return <Icon
+                        key={i}
+                        icon={button.icon}
+                        color='#FFFFFF'
+                        onClick={button.callback}
+                        className={props.editor.isActive(button.id) ? 'editor-button is-active' : 'editor-button'}
+                    />
+                }
+            })}
+
+            <Icon
+                icon='fe:close'
+                color='#FFFFFF'
+                onClick={props.closeCallback}
+                className='editor-closebutton'
             />
         </div>
     );

web/src/routes/note/note.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import './note.css';
+import './note.css';{}
 
 import { NoteData, ContentBlock } from '../../interfaces';
 import Popover from '../../components/popover/popover';
@@ -58,7 +58,7 @@ export default function Note(props: NoteData) {
 
             <div className='notebody'>
                 {blocks.map((blockData, i) => {
-                    switch (blockData.type) {
+                    switch (blockData.type) { 
                         case 'header':
                             return <HeaderBlock text={blockData.data.text} key={i} />