From 91698177f2016ad3e68f02311adf793f8b5fd64e Mon Sep 17 00:00:00 2001 From: hi_go Date: Tue, 31 Jan 2023 03:00:34 +0900 Subject: [PATCH 1/2] Implement Markdown editor --- package.json | 1 + src/App.css | 4 +- src/App.tsx | 11 +- src/Auth.tsx | 22 +- src/Components/AuthInput.css | 5 + src/Components/AuthInput.tsx | 143 ++-- src/Components/MainMenu.tsx | 4 +- src/Components/Navigation.tsx | 11 +- src/Components/Notepad.css | 2 +- src/Components/Notepad.tsx | 49 +- src/Data/CredentialHandler.ts | 14 + src/Data/NotionHandler.ts | 8 +- src/Data/PreferencesHandler.ts | 7 + src/main.tsx | 10 +- yarn.lock | 1136 +++++++++++++++++++++++++++++++- 15 files changed, 1300 insertions(+), 127 deletions(-) create mode 100644 src/Components/AuthInput.css create mode 100644 src/Data/CredentialHandler.ts create mode 100644 src/Data/PreferencesHandler.ts diff --git a/package.json b/package.json index 330154b..b61ae97 100644 --- 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 index 08923e6..8fa104c 100644 --- 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 index 72d55e9..4ec6bb3 100644 --- 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 { constructor(props: any) { @@ -22,9 +21,9 @@ export class App extends React.Component - - +
+ +
); } @@ -34,8 +33,8 @@ export class App extends React.Component{ - this.setState({syncStatus : status}); + handleSyncStatusChange = (status: SyncStatus) => { + this.setState({ syncStatus: status }); } } diff --git a/src/Auth.tsx b/src/Auth.tsx index 5751383..dac216c 100644 --- 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 { @@ -14,21 +15,20 @@ export class Auth extends React.Component); + if (this.state.isAuthSucceeded) { + return (); } - return ( -
- {}} - syncStatus="OK" +
+ { }} + syncStatus="OK" /> { - this.setState({isAuthSucceeded:true}); + this.setState({ isAuthSucceeded: true }); }} />
); diff --git a/src/Components/AuthInput.css b/src/Components/AuthInput.css new file mode 100644 index 0000000..8bdd8b4 --- /dev/null +++ b/src/Components/AuthInput.css @@ -0,0 +1,5 @@ +.auth-content{ + flex-grow: 100; + flex-shrink: 100; + resize: none; +} \ No newline at end of file diff --git a/src/Components/AuthInput.tsx b/src/Components/AuthInput.tsx index 8f79dea..c05ba4b 100644 --- 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 ( - -
-
-

- To use this application, authentication on Notion is required first. -

-
    -
  1. Refer to this page and create an internal integration.
    2. -
  2. Enter the Integration Token and Database ID you obtained.
    3. -
  3. Press "Authenticate" button.
    4. -
- - - + + + +
+

+ To use this application, authentication on Notion is required first. +

+
    +
  1. Refer to this page and create an internal integration.
    2. +
  2. Enter the Integration Token and Database ID you obtained.
    3. +
  3. Press "Authenticate" button.
    4. +
+ + + - - - -
-
-
- + + + +
+
+
+ +
-
- - + +
+ ); } @@ -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 index 4989fd9..9215326 100644 --- 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"; diff --git a/src/Components/Navigation.tsx b/src/Components/Navigation.tsx index f6512a9..48f4bf5 100644 --- 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 (