Merge pull request #19 from h1g0/impl-markdown-editor

Implement Markdown editor
h1g0 · Jan 30, 2023 · 4f1a902 · 4f1a902
2 parents 5c671ec + 10518e4
commit 4f1a902
Show file tree

Hide file tree

Showing 15 changed files with 1,301 additions and 128 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@blueprintjs/popover2": "^1.12.0",
     "@notionhq/client": "^2.1.1",
     "@tauri-apps/api": "^1.0.2",
+    "@uiw/react-md-editor": "^3.20.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.0"

diff --git a/src/App.css b/src/App.css
@@ -1,13 +1,13 @@
 html,
 body,
 div#root,
-.App,
+.app,
 .Notepad {
   height: 100%;
   box-sizing: border-box;
 }
 
-.App{
+.app{
   display: flex;
   flex-direction: column;
   justify-content: start;

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,6 @@ import { format } from "date-fns";
 
 import { Navigation } from './Components/Navigation';
 import { Notepad } from './Components/Notepad';
-import { Classes } from '@blueprintjs/core';
 
 export class App extends React.Component<any, { dateStr: string, syncStatus: SyncStatus }> {
   constructor(props: any) {
@@ -22,9 +21,9 @@ export class App extends React.Component<any, { dateStr: string, syncStatus: Syn
 
   render() {
     return (
-      <div className={"App"}>
-        <Navigation onDateChange={this.handleDateChange} syncStatus={this.state.syncStatus}/>
-        <Notepad dateStr={this.state.dateStr} onChangeStatus={this.handleSyncStatusChange}/>
+      <div className={"app"}>
+        <Navigation onDateChange={this.handleDateChange} syncStatus={this.state.syncStatus} />
+        <Notepad dateStr={this.state.dateStr} onChangeStatus={this.handleSyncStatusChange} />
       </div>
     );
   }
@@ -34,8 +33,8 @@ export class App extends React.Component<any, { dateStr: string, syncStatus: Syn
     window.console.debug(`Date changed: ${this.state.dateStr}`);
   }
 
-  handleSyncStatusChange = (status: SyncStatus) =>{
-    this.setState({syncStatus : status});
+  handleSyncStatusChange = (status: SyncStatus) => {
+    this.setState({ syncStatus: status });
   }
 }
 

diff --git a/src/Auth.tsx b/src/Auth.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import { Navigate } from "react-router-dom";
 import { AuthInput } from "./Components/AuthInput";
 import { Navigation } from "./Components/Navigation";
-
+import { CredentialHandler } from "./Data/CredentialHandler";
+import './App.css';
 export class Auth extends React.Component<any, {
     isAuthSucceeded: boolean,
 }> {
@@ -14,21 +15,20 @@ export class Auth extends React.Component<any, {
     }
 
     render() {
-        if(this.state.isAuthSucceeded){
-                return(<Navigate to="/"/>);
+        if (this.state.isAuthSucceeded) {
+            return (<Navigate to="/" />);
         }
-
         return (
-            <div className={"Auth"}>
-                <Navigation 
-                onDateChange={()=>{}}
-                syncStatus="OK"
+            <div className={"app"}>
+                <Navigation
+                    onDateChange={() => { }}
+                    syncStatus="OK"
                 />
                 <AuthInput
-                    token={localStorage.getItem('token') ?? ''}
-                    dbId={localStorage.getItem('dbId') ?? ''}
+                    token={CredentialHandler.get('token')}
+                    dbId={CredentialHandler.get('dbId')}
                     onClosed={() => {
-                        this.setState({isAuthSucceeded:true});
+                        this.setState({ isAuthSucceeded: true });
                     }} />
             </div>
         );

diff --git a/src/Components/AuthInput.css b/src/Components/AuthInput.css
@@ -0,0 +1,5 @@
+.auth-content{
+    flex-grow: 100;
+    flex-shrink: 100;
+    resize: none;
+}
diff --git a/src/Components/AuthInput.tsx b/src/Components/AuthInput.tsx
@@ -1,7 +1,9 @@
-import { Button, Classes, Dialog, FormGroup, InputGroup, Intent, Toaster } from "@blueprintjs/core";
+import { Button, Card, Classes, Dialog, FormGroup, InputGroup, Intent, Toaster } from "@blueprintjs/core";
 import React from "react";
 import { NotionHandler } from "../Data/NotionHandler";
-
+import { CredentialHandler } from "../Data/CredentialHandler";
+import './AuthInput.css';
+import { PreferencesHandler } from "../Data/PreferencesHandler";
 export class AuthInput extends React.Component<{
     token: string,
     dbId: string,
@@ -28,72 +30,75 @@ export class AuthInput extends React.Component<{
     }
     render() {
         return (
-            <Dialog className="AuthInput"
-                autoFocus
-                enforceFocus
-                usePortal
-                canEscapeKeyClose={false}
-                canOutsideClickClose={false}
-                isCloseButtonShown={false}
-                isOpen={this.state.isOpen}
-                onClosed={this.props.onClosed}
-                title={'Authentication Required'}
-                icon={'info-sign'}
-            >
-                <form>
-                    <div className={Classes.DIALOG_BODY}>
-                        <p>
-                            <strong>To use this application, authentication on Notion is required first.</strong>
-                        </p>
-                        <ol>
-                            <li>Refer to <strong><a href="https://developers.notion.com/docs/create-a-notion-integration" target="_blank">this page</a></strong> and create an internal integration.</li>
-                            <li>Enter the <strong>Integration Token</strong> and <strong>Database ID</strong> you obtained.</li>
-                            <li>Press "Authenticate" button.</li>
-                        </ol>
-                        <FormGroup
-                            label="Integration Token"
-                            labelFor="token-input"
-                            labelInfo="(required)"
-                        >
-                            <InputGroup
-                                id="token-input"
-                                placeholder="Integration Token"
-                                value={this.state.token}
-                                disabled={this.state.isLoading}
-                                onChange={this.handleChangeToken}
-                                intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
-                            />
-                        </FormGroup>
+            <Card className="auth-content">
+                <Dialog
+                    className={PreferencesHandler.getColorMode() === 'dark' ? Classes.DARK : ''}
+                    autoFocus
+                    enforceFocus
+                    usePortal
+                    canEscapeKeyClose={false}
+                    canOutsideClickClose={false}
+                    isCloseButtonShown={false}
+                    isOpen={this.state.isOpen}
+                    onClosed={this.props.onClosed}
+                    title={'Authentication Required'}
+                    icon={'info-sign'}
+                >
+                    <form>
+                        <div className={Classes.DIALOG_BODY}>
+                            <p>
+                                <strong>To use this application, authentication on Notion is required first.</strong>
+                            </p>
+                            <ol>
+                                <li>Refer to <strong><a href="https://developers.notion.com/docs/create-a-notion-integration" target="_blank">this page</a></strong> and create an internal integration.</li>
+                                <li>Enter the <strong>Integration Token</strong> and <strong>Database ID</strong> you obtained.</li>
+                                <li>Press "Authenticate" button.</li>
+                            </ol>
+                            <FormGroup
+                                label="Integration Token"
+                                labelFor="token-input"
+                                labelInfo="(required)"
+                            >
+                                <InputGroup
+                                    id="token-input"
+                                    placeholder="Integration Token"
+                                    value={this.state.token}
+                                    disabled={this.state.isLoading}
+                                    onChange={this.handleChangeToken}
+                                    intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
+                                />
+                            </FormGroup>
 
-                        <FormGroup
-                            label="Database ID"
-                            labelFor="dbid-input"
-                            labelInfo="(required)"
-                        >
-                            <InputGroup
-                                id="dbid-input"
-                                placeholder="Database ID"
-                                value={this.state.dbId}
-                                disabled={this.state.isLoading}
-                                onChange={this.handleChangeDbId}
-                                intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
-                            />
-                        </FormGroup>
-                    </div>
-                    <div className={Classes.DIALOG_FOOTER}>
-                        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                            <Button
-                                id="authenticate-button"
-                                intent={'primary'}
-                                loading={this.state.isLoading}
-                                disabled={!this.state.isAuthButtonEnable}
-                                onClick={this.handleClickAuthButton}
-                                type="submit"
-                            >Authenticate</Button>
+                            <FormGroup
+                                label="Database ID"
+                                labelFor="dbid-input"
+                                labelInfo="(required)"
+                            >
+                                <InputGroup
+                                    id="dbid-input"
+                                    placeholder="Database ID"
+                                    value={this.state.dbId}
+                                    disabled={this.state.isLoading}
+                                    onChange={this.handleChangeDbId}
+                                    intent={this.state.isAuthFailed ? Intent.DANGER : Intent.NONE}
+                                />
+                            </FormGroup>
+                        </div>
+                        <div className={Classes.DIALOG_FOOTER}>
+                            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                                <Button
+                                    id="authenticate-button"
+                                    intent={'primary'}
+                                    loading={this.state.isLoading}
+                                    disabled={!this.state.isAuthButtonEnable}
+                                    onClick={this.handleClickAuthButton}
+                                    type="submit"
+                                >Authenticate</Button>
+                            </div>
                         </div>
-                    </div>
-                </form>
-            </Dialog>
+                    </form>
+                </Dialog>
+            </Card>
         );
     }
 
@@ -135,13 +140,13 @@ export class AuthInput extends React.Component<{
                 });
                 this.setState({ isAuthFailed: true });
             }
-        }).finally(()=>{
+        }).finally(() => {
             this.setState({ isLoading: false });
         });
     }
 
     private saveTokenDbId(token: string, dbId: string) {
-        localStorage.setItem('token', token);
-        localStorage.setItem('dbId', dbId);
+        CredentialHandler.set('token', token);
+        CredentialHandler.set('dbId', dbId);
     }
 };
diff --git a/src/Components/MainMenu.tsx b/src/Components/MainMenu.tsx
@@ -1,5 +1,5 @@
-import { AnchorButton, Menu, MenuDivider, MenuItem, Position } from "@blueprintjs/core";
-import { MenuItem2, PlacementOptions, Popover2 } from "@blueprintjs/popover2";
+import { AnchorButton, Menu, MenuDivider } from "@blueprintjs/core";
+import { MenuItem2,  Popover2 } from "@blueprintjs/popover2";
 import React from "react";
 import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 
@@ -35,7 +35,7 @@ export class MainMenu extends React.Component<
             <Menu>
                 <MenuItem2 icon="cog" text="Settings">
                     <MenuItem2 icon="key" text={"Authentication"} href="/auth"/>
-                    <MenuItem2 icon="settings" text={"Preferenses"} href="/preferenses" disabled/>
+                    <MenuItem2 icon="settings" text={"Preferences"} href="/preferences" disabled/>
                 </MenuItem2>
                 <MenuItem2 icon="blank" text="About" href="/about" disabled/>
                 <MenuDivider />

diff --git a/src/Components/Navigation.tsx b/src/Components/Navigation.tsx
@@ -44,9 +44,10 @@ export class Navigation extends React.Component<
       icon = 'error';
       intent = 'danger';
     }
+
     return (
       <div id="navigation">
-        <Navbar className={Classes.DARK}>
+        <Navbar >
           <NavbarGroup align={Alignment.LEFT}>
             <MainMenu />
             <NavbarDivider />
@@ -65,10 +66,10 @@ export class Navigation extends React.Component<
   }
 
   handleClickMenuButton = () => {
-    if(this.state.isMenuOpen){
-      this.setState({isMenuOpen:false});
-    }else{
-      this.setState({isMenuOpen:true});
+    if (this.state.isMenuOpen) {
+      this.setState({ isMenuOpen: false });
+    } else {
+      this.setState({ isMenuOpen: true });
     }
   }
 };
diff --git a/src/Components/Notepad.css b/src/Components/Notepad.css
@@ -1,4 +1,4 @@
-#notepadText{
+.notepad-content{
     flex-grow: 100;
     flex-shrink: 100;
     resize: none;