Поправил редактор

frontend-park-mail-ru · May 24, 2024 · 7551c67 · 7551c67
1 parent 8194ee7
commit 7551c67
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 98 deletions.
diff --git a/public/src/components/Editor/Editor.sass b/public/src/components/Editor/Editor.sass
@@ -145,6 +145,7 @@
 				cursor: pointer
 				transition: 0.2s ease
 				margin-left: 2px
+				border: 1px solid hsl(217.2 32.6% 25%)
 
 				&:hover
 					cursor: pointer

diff --git a/public/src/components/Editor/EditorWrapper.tsx b/public/src/components/Editor/EditorWrapper.tsx
@@ -2,16 +2,10 @@ import {Component} from "@veglem/screact/dist/component";
 import {VDomNode} from "@veglem/screact/dist/vdom";
 import "./Editor.sass"
 import {Editor} from "./Editor";
-import {Dropdown} from "../Dropdown/Dropdown";
 import {AppNoteStore, NoteStoreState} from "../../modules/stores/NoteStore";
 import {Tippy} from "../Tippy/Tippy";
-import {YoutubeDialogForm} from "../YoutubeDialog/YoutubeDialog";
-import {Modal} from "../Modal/Modal";
 import {isEqual} from "@veglem/screact/dist/isEqual";
-import {AppToasts} from "../../modules/toasts";
-import {AppUserStore} from "../../modules/stores/UserStore";
 import {Viewer} from "./Viewer";
-import {AppNotesStore} from "../../modules/stores/NotesStore";
 import {NoteType} from "../../utils/types";
 import {PluginProps} from "./Plugin";
 import {parseNoteTitle} from "../../modules/utils";
@@ -28,19 +22,15 @@ type EditorState = {
         left: number,
         top: number
     }
-    dropdownOpen: boolean,
-    dropdownPos: {
-        left: number,
-        top: number
-    }
-    youtube: boolean
 }
 
 type EditorProps = {
     open: boolean,
     note: NoteType,
     isOwner: boolean,
     isEditable: boolean,
+    openDropdown: () => void,
+    closeDropdown: () => void,
     onChangeTitle: (value: string) => void,
     onChangeContent: (value: PluginProps[]) => void
 }
@@ -51,17 +41,7 @@ export class EditorWrapper extends Component<EditorProps, EditorState> {
         tippyPos: {
             left: 0,
             top: 0
-        },
-        dropdownOpen: false,
-        dropdownPos: {
-            left: 0,
-            top: 0
-        },
-        youtube: false
-    }
-
-    constructor() {
-        super();
+        }
     }
 
     private self: HTMLElement
@@ -92,7 +72,7 @@ export class EditorWrapper extends Component<EditorProps, EditorState> {
             this.editor = new Editor(
                 store.note.blocks,
                 this.self,
-                {open: this.openDropdown, close: this.closeDropdown},
+                {open: this.props.openDropdown, close: this.props.closeDropdown},
                 this.props.onChangeContent,
                 {open: this.openTippy, close: this.closeTippy}
             );
@@ -114,42 +94,6 @@ export class EditorWrapper extends Component<EditorProps, EditorState> {
         }
     }
 
-    openDropdown = (elem: HTMLElement) => {
-        const editor = document.querySelector(".note-editor-wrapper")
-        const offsetBottom = editor.clientHeight - elem.getBoundingClientRect().top
-        const dropdownOffsetTop = offsetBottom < 255 ? -225 : 20
-
-        this.setState(state => ({
-            ...state,
-            dropdownOpen: true,
-            dropdownPos: {
-                left: elem.offsetLeft + 20,
-                top: elem.offsetTop + dropdownOffsetTop
-            }
-        }))
-    }
-
-    closeDropdown = () => {
-        this.setState(state => ({
-            ...state,
-            dropdownOpen: false
-        }))
-    }
-
-    openYoutube = (elem: HTMLElement) => {
-        this.setState(state => ({
-            ...state,
-            youtube: true,
-        }))
-    }
-
-    closeYoutube = () => {
-        this.setState(state => ({
-            ...state,
-            youtube: false
-        }))
-    }
-
     openTippy = (elem: HTMLElement) => {
         this.setState(state => ({
             ...state,
@@ -162,7 +106,6 @@ export class EditorWrapper extends Component<EditorProps, EditorState> {
     }
 
     closeTippy = () => {
-
         this.setState(state => ({
             ...state,
             tippyOpen: false
@@ -182,20 +125,13 @@ export class EditorWrapper extends Component<EditorProps, EditorState> {
     render(): VDomNode {
         return (
             <div className="note-editor">
-                <Dropdown
-                    style={`left: ${this.state.dropdownPos.left}px; top: ${this.state.dropdownPos.top}px;`}
-                    onClose={this.closeDropdown}
-                    open={this.state.dropdownOpen}
-                    openYoutubeDialog={this.openYoutube}
-                />
 
-                <Tippy style={`left: ${this.state.tippyPos.left}px; top: ${this.state.tippyPos.top}px;`}
+                <Tippy
+                    style={`left: ${this.state.tippyPos.left}px; top: ${this.state.tippyPos.top}px;`}
                     open={this.state.tippyOpen}
-                       onClose={this.closeTippy}
+                    onClose={this.closeTippy}
                 />
 
-                <Modal open={this.state.youtube} content={<YoutubeDialogForm handleClose={this.closeYoutube}/>} handleClose={this.closeYoutube}/>
-
                 <div className="note-editor-content">
                     <div className="note-title" contentEditable={this.props.isEditable} oninput={this.onChangeTitle} ref={ref => this.noteTitleRef = ref}></div>
                     <div className="note-body" ref={elem => this.self = elem}></div>

diff --git a/public/src/components/Editor/Plugin.ts b/public/src/components/Editor/Plugin.ts
@@ -1022,24 +1022,24 @@ const RenderAttach = (attach_filename:string, attach_id:string) => {
     attachContainer.appendChild(fileExtensionLabel)
     attachContainer.appendChild(fileName)
 
-    const closeAttachBtnContainer = document.createElement("div")
-    closeAttachBtnContainer.className = "close-attach-btn-container"
-
-    const closeBtn = document.createElement("img")
-    closeBtn.src = "./src/assets/close.svg"
-    closeBtn.className = "close-attach-btn"
 
     if (pluginSettings.isEditable) {
+        const closeAttachBtnContainer = document.createElement("div")
+        closeAttachBtnContainer.className = "close-attach-btn-container"
+        const closeBtn = document.createElement("img")
+        closeBtn.src = "./src/assets/close.svg"
+        closeBtn.className = "close-attach-btn"
+
         closeBtn.onclick = (e) => {
             e.stopPropagation()
             attachWrapper.remove();
         }
-    }
 
+        closeAttachBtnContainer.appendChild(closeBtn)
+
+        attachContainer.appendChild(closeAttachBtnContainer)
+    }
 
-    closeAttachBtnContainer.appendChild(closeBtn)
-
-    attachContainer.appendChild(closeAttachBtnContainer)
 
     attachWrapper.appendChild(attachContainer)
 

diff --git a/public/src/components/Header/Header.sass b/public/src/components/Header/Header.sass
@@ -16,13 +16,13 @@ header
 		padding: 0 5%
 
 	&.notes
-		padding: 0 15%
+		padding: 0 10%
 
 		@media screen and (max-width: $xxl)
 			padding: 0 5%
 
 	&.fullscreen
 		padding: 0 10%
 
-		@media screen and (max-width: $lg)
+		@media screen and (max-width: $xxl)
 			padding: 0 5%
diff --git a/public/src/components/NoteEditor/NoteEditor.tsx b/public/src/components/NoteEditor/NoteEditor.tsx
@@ -19,6 +19,10 @@ import {BackgroundPicker} from "../BackgroundPicker/BackgroundPicker";
 import {NoteType} from "../../utils/types";
 import {SharePanel} from "../SharePanel/SharePanel";
 import {PluginProps} from "../Editor/Plugin";
+import {Editor} from "../Editor/Editor";
+import {parseNoteTitle} from "../../modules/utils";
+import {Dropdown} from "../Dropdown/Dropdown";
+import YoutubeDialogForm from "../YoutubeDialog/YoutubeDialog";
 
 type NoteEditorType = {
     selectedNote: NoteType
@@ -50,9 +54,17 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
         emojiModalOpen: false,
         backgroundModalOpen: false,
         shareModalOpen: false,
-        fullScreen: false
+        fullScreen: false,
+        dropdownOpen: false,
+        dropdownPos: {
+            left: 0,
+            top: 0
+        },
+        youtube: false
     };
 
+    private editorWrapperRef
+
     componentDidMount() {
         AppNotesStore.SubscribeToStore(this.updateState);
         AppNoteStore.AddSaver(this.saveNote);
@@ -231,6 +243,42 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
         })
     }
 
+    openDropdown = (elem: HTMLElement) => {
+        const editor = this.editorWrapperRef
+        const offsetBottom = editor.clientHeight - elem.getBoundingClientRect().top
+        const dropdownOffsetTop = offsetBottom < 205 ? -225 : 40
+
+        this.setState(state => ({
+            ...state,
+            dropdownOpen: true,
+            dropdownPos: {
+                left: elem.offsetLeft + 20,
+                top: elem.offsetTop + dropdownOffsetTop
+            }
+        }))
+    }
+
+    closeDropdown = () => {
+        this.setState(state => ({
+            ...state,
+            dropdownOpen: false
+        }))
+    }
+
+    openYoutube = (elem: HTMLElement) => {
+        this.setState(state => ({
+            ...state,
+            youtube: true,
+        }))
+    }
+
+    closeYoutube = () => {
+        this.setState(state => ({
+            ...state,
+            youtube: false
+        }))
+    }
+
     render() {
         const isSubNote = this.state.selectedNote?.parent != "00000000-0000-0000-0000-000000000000" ? "hidden" : ""
         const isOwner = this.state.selectedNote?.owner_id == AppUserStore.state.user_id
@@ -251,7 +299,7 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
         // console.log("123")
 
         return (
-            <div className={'note-editor-wrapper ' + (this.props.open ? ' active ' : '')  + (this.state.fullScreen ? ' fullscreen ' : '') }>
+            <div className={'note-editor-wrapper ' + (this.props.open ? ' active ' : '')  + (this.state.fullScreen ? ' fullscreen ' : '') } ref={ref => this.editorWrapperRef = ref}>
 
                 <SwipeArea enable={this.props.open} right={this.closeEditor} target=".note-editor-wrapper"/>
 
@@ -293,6 +341,8 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
                        content={<SharePanel note={this.state.selectedNote}/>}
                 />
 
+                <Modal open={this.state.youtube} content={<YoutubeDialogForm handleClose={this.closeYoutube}/>} handleClose={this.closeYoutube}/>
+
                 <div className="note-background" style={`background: ${this.state.selectedNote?.header};`}>
 
                 </div>
@@ -453,11 +503,20 @@ export class NoteEditor extends ScReact.Component<NoteEditorProps, NoteEditorTyp
 
                 <div className="bottom-panel">
 
+                    <Dropdown
+                        style={`left: ${this.state.dropdownPos.left}px; top: ${this.state.dropdownPos.top}px;`}
+                        onClose={this.closeDropdown}
+                        open={this.state.dropdownOpen}
+                        openYoutubeDialog={this.openYoutube}
+                    />
+
                     <EditorWrapper
                         open={this.state.selectedNote != null}
                         note={this.state.selectedNote}
                         isOwner={isOwner}
                         isEditable={isEditable}
+                        openDropdown={this.openDropdown}
+                        closeDropdown={this.closeDropdown}
                         onChangeTitle={(value: string) => {
                             this.props.onChangeTitle(value);
                             this.onChangeNote();

diff --git a/public/src/components/YoutubeDialog/YoutubeDialog.sass b/public/src/components/YoutubeDialog/YoutubeDialog.sass
@@ -1,3 +1,5 @@
+@import "/public/src/utils/variables.sass"
+
 #youtube-dialog-form
 	display: flex
 	flex-direction: column
@@ -7,4 +9,5 @@
 	gap: 15px
 
 	h3
-		margin-bottom: 15px
+		margin-bottom: 15px
+		color: $text-main-color
diff --git a/public/src/modules/router.tsx b/public/src/modules/router.tsx
@@ -56,15 +56,15 @@ export class Router extends ScReact.Component<any, routerState> {
     }
 
     normalizeURL = (path:string) => {
-        return path.replace(/\/\/+/g, '/').replace(/^\//, '').replace(/\/$/, '')
+        return path.replace(/\/\/+/g, '/')
     }
 
     private initPages = () => {
-        this.pages[''] = {page: HomePage, loader: HomePageLoader};
-        this.pages['login'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton};
-        this.pages['register'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton};
-        this.pages['notes'] = {page: NotesPage, loader: NotesLoader, skeleton: NotesPageSkeleton};
-        this.pages['404'] = {page: NotFoundPage };
+        this.pages['/'] = {page: HomePage, loader: HomePageLoader};
+        this.pages['/login'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton};
+        this.pages['/register'] = {page: AuthPage, loader: AuthPageLoader, skeleton: AuthPageSkeleton};
+        this.pages['/notes'] = {page: NotesPage, loader: NotesLoader, skeleton: NotesPageSkeleton};
+        this.pages['/404'] = {page: NotFoundPage };
     };
 
     public handlePopState = () => {
@@ -73,6 +73,8 @@ export class Router extends ScReact.Component<any, routerState> {
 
         let isAuth = AppUserStore.state.isAuth;
 
+        history.replaceState(null, null, path)
+
         if (path.includes('notes/')) {
             const noteId = path.split('/').at(-1);
 
@@ -92,8 +94,6 @@ export class Router extends ScReact.Component<any, routerState> {
 
             return;
         }
-
-        history.replaceState(null, null, path)
 
         const page: RouterMapValue = this.pages[path];
 
@@ -132,7 +132,7 @@ export class Router extends ScReact.Component<any, routerState> {
         let page: RouterMapValue = this.pages[path];
 
         if (path.includes('notes/')) {
-            page = this.pages['notes'];
+            page = this.pages['/notes'];
         }
 
         console.log("history.pushState")

diff --git a/public/src/pages/Home/index.tsx b/public/src/pages/Home/index.tsx
@@ -31,7 +31,7 @@ export class HomePage extends ScReact.Component<any, any> {
     }
 
     handleButtonClick = () => {
-        const url = AppUserStore.state.isAuth ? '/notes' : 'login';
+        const url = AppUserStore.state.isAuth ? '/notes' : '/login';
         AppRouter.go(url);
     };
 

diff --git a/public/src/pages/Notes/style.sass b/public/src/pages/Notes/style.sass
@@ -8,7 +8,7 @@
 	display: flex
 	justify-content: center
 	gap: 25px
-	padding: 100px 15% 75px
+	padding: 100px 10% 75px
 	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)
 	position: relative