Merge pull request #21 from frontend-park-mail-ru/vls-65

Защита

README.md

@@ -5,15 +5,16 @@ Frontend проекта "Notion" команды scratch senior devs
 # Деплой
 * [YouNote](https://you-note.ru)
 
-# API
-* [swagger](https://you-note.ru/api/swagger/index.html)
 
 # Figma
-* [figma](https://www.figma.com/design/34KaYrmEwdC9vuisY3BoID/YouNote?node-id=0%3A1&t=mdkq7otCB1sFFwJ2-1)
+* [Figma](https://www.figma.com/design/34KaYrmEwdC9vuisY3BoID/YouNote?node-id=0%3A1&t=mdkq7otCB1sFFwJ2-1)
 
 # Реактивная библиотека
 * [ScReact](https://www.npmjs.com/package/@veglem/screact)
 
+# UI Kit
+* [UI Kit](https://www.npmjs.com/package/@veglem/ui-kit)
+
 # Авторы
 * [Михалёв Ярослав](https://github.com/YarikMix) - _frontend_
 * [Журмилов Вадим](https://github.com/veglem) - _frontend_
@@ -27,3 +28,7 @@ Frontend проекта "Notion" команды scratch senior devs
 
 # Backend
 * [Backend](https://github.com/go-park-mail-ru/2024_1_scratch_senior_devs)
+
+# Как запустить
+* npm install
+* npm run serve

package.json

@@ -8,6 +8,7 @@
     "serve": "webpack serve --node-env=development"
   },
   "devDependencies": {
+    "@veglem/ui-kit": "^1.0.8",
     "@babel/cli": "^7.23.9",
     "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-decorators": "^7.24.0",

public/index.sass

@@ -22,4 +22,5 @@ body
 		top: 20px
 
 	&.locked
+		max-height: 100vh
 		overflow: hidden

public/index.ts

@@ -2,6 +2,7 @@ import {renderDOM} from '@veglem/screact/dist/render';
 import {ScReact} from '@veglem/screact';
 import {App} from './src/App';
 import './index.sass';
+import '@veglem/ui-kit/dist/main.css';
 
 renderDOM('root', ScReact.createComponent(App, {}));
 

public/src/components/DeleteNoteDialog/DeleteNoteDialog.tsx

@@ -1,7 +1,7 @@
 import {ScReact} from '@veglem/screact';
-import {Button} from '../Button/Button';
 import './DeleteNoteDialog.sass';
 import {Img} from "../Image/Image";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class DeleteNoteDialog extends ScReact.Component<any, any>{
 
@@ -11,6 +11,8 @@ export class DeleteNoteDialog extends ScReact.Component<any, any>{
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <div className="delete-note-dialog">
                 <Img src="close.svg" className="close-modal-btn" onClick={this.props.handleClose}/>

public/src/components/DeleteTagDialog/DeleteTagDialog.tsx

@@ -1,7 +1,7 @@
 import {ScReact} from '@veglem/screact';
-import {Button} from '../Button/Button';
 import './DeleteTagDialog.sass';
 import {Img} from "../Image/Image";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class DeleteTagDialog extends ScReact.Component<any, any>{
 
@@ -11,6 +11,8 @@ export class DeleteTagDialog extends ScReact.Component<any, any>{
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <div className="delete-tag-dialog">
                 <Img src="close.svg" className="close-modal-btn" onClick={this.props.handleClose}/>

public/src/components/Dropdown/Dropdown.tsx

@@ -2,7 +2,6 @@ import {ScReact} from '@veglem/screact';
 import './Dropdown.sass';
 import {Img} from '../Image/Image';
 import {AppDispatcher} from '../../modules/dispatcher';
-import {AppNoteStore, NoteStoreActions} from '../../modules/stores/NoteStore';
 import {AppNotesStore, NotesActions} from '../../modules/stores/NotesStore';
 import {MAX_ATTACH_SIZE} from '../../utils/consts';
 import {AppToasts} from '../../modules/toasts';
@@ -47,9 +46,6 @@ export class Dropdown extends ScReact.Component<any, any> {
     };
 
     handleOnClick = (id:string) => {
-        let tag = id;
-        let attr = null;
-        let content = [];
 
         if (id === "h1") {
             insertBlockPlugin('header', 'h1')

public/src/components/Editor/Editor.ts

@@ -35,6 +35,30 @@ export class Editor {
         this.tippyCallbacks = tippy;
         this.addPlugins();
 
+        document.onpaste = (event) => {
+            const isInEditor = (node: Node) => {
+                if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).contentEditable === 'true' && !(node as HTMLElement).classList.contains("note-title")) {
+                    return true
+                } else if (node.parentElement == null) {
+                    return false
+                } else {
+                    return isInEditor(node.parentElement);
+                }
+            }
+
+
+
+            if (isInEditor(document.getSelection().anchorNode)) {
+                event.preventDefault();
+                let paste = (event.clipboardData).getData("text");
+                const selection = window.getSelection();
+                if (!selection.rangeCount) return;
+                selection.deleteFromDocument();
+                selection.getRangeAt(0).insertNode(document.createTextNode(paste));
+                selection.collapseToEnd();
+            }
+        }
+
         this.editable = document.createElement('div');
         this.editable.id = "note-editor-inner"
         this.editable.contentEditable = "true";
@@ -105,7 +129,7 @@ export class Editor {
                     : selection.anchorNode.parentElement;
 
                 scanTree(this.editable);
-                console.log(`cursor${AppUserStore.state.username}${AppNotesStore.socket_id?.toString().replaceAll('-','').toLowerCase()}`)
+
 
                 elem.dataset[`cursor${AppUserStore.state.username}${AppNotesStore.socket_id?.toString().replaceAll('-','').toLowerCase()}`] = `${getCaretPosition(elem)}`;
                 // elem.scrollIntoView();

public/src/components/Editor/Plugin.ts

@@ -1,10 +1,11 @@
 import {AppUserStore} from "../../modules/stores/UserStore";
 import {parseNoteTitle, setCursorAtNodePosition, truncate} from "../../modules/utils";
 import {AppNotesStore, NotesActions} from "../../modules/stores/NotesStore";
-import {AppNoteRequests} from "../../modules/api";
+import {AppNoteRequests, AppSharedNoteRequests} from '../../modules/api';
 import {AppDispatcher} from "../../modules/dispatcher";
 import {AppToasts} from "../../modules/toasts";
 import {AppNoteStore, NoteStoreActions} from "../../modules/stores/NoteStore";
+import {AppRouter} from '../../modules/router';
 
 interface EditorPlugin {
     pluginName: string;
@@ -494,16 +495,14 @@ export const defaultPlugins: EditorPlugin[] = [
             img.dataset.imgid = id;
             img.className = "img"
 
-
-
             if (id in AppNoteStore.state.cache) {
                 img.src = AppNoteStore.state.cache[id]
             } else {
                 AppNoteRequests.GetImage(id, AppUserStore.state.JWT, AppUserStore.state.csrf).then(url => {
                     img.src = url;
                     AppDispatcher.dispatch(NoteStoreActions.PUT_TO_CACHE, {key: id, value: url})
                 }).catch(error => {
-                    console.log(error)
+
                 })
             }
 
@@ -525,7 +524,7 @@ export const defaultPlugins: EditorPlugin[] = [
                 img.src = url;
                 AppDispatcher.dispatch(NoteStoreActions.PUT_TO_CACHE, {key: id, value: url})
             }).catch(error => {
-                console.log(error)
+
             })
 
             return img
@@ -912,7 +911,7 @@ export const insertBlockPlugin = (pluginName: string, ...args: any) => {
             });
         }
         const newNode = plugin.insertNode([], args);
-        console.log(newNode)
+
         if (newNode) {
             (nodeToReplace as HTMLElement).replaceWith(newNode);
             document.getSelection().setPosition(newNode, 0);
@@ -1051,6 +1050,8 @@ const RenderAttach = (attach_filename:string, attach_id:string) => {
 }
 
 const RenderSubNote = (subNoteId:string) => {
+
+
     const subNoteWrapper = document.createElement("button")
     subNoteWrapper.className = "subnote-wrapper"
 
@@ -1072,8 +1073,9 @@ const RenderSubNote = (subNoteId:string) => {
     subNoteContainer.appendChild(subNoteTitle)
 
     const isOwner= AppNotesStore.state.selectedNote?.owner_id == AppUserStore.state.user_id
+    const isAuth = AppUserStore.state.isAuth
 
-    if (isOwner) {
+    if (isAuth && isOwner && pluginSettings.isEditable) {
         const deleteSubNoteBtnContainer = document.createElement("div")
         deleteSubNoteBtnContainer.className = "delete-subnote-btn-container"
 
@@ -1095,7 +1097,6 @@ const RenderSubNote = (subNoteId:string) => {
             }
         }
 
-
         deleteSubNoteBtnContainer.appendChild(deleteSubNoteBtn)
         subNoteContainer.appendChild(deleteSubNoteBtnContainer)
     }
@@ -1104,35 +1105,58 @@ const RenderSubNote = (subNoteId:string) => {
 
     let loaded = false
 
-    if (subNoteId in AppNoteStore.state.cache) {
-        subNoteTitle.innerHTML = AppNoteStore.state.cache[subNoteId]
-        loaded = true
-    } else {
-        AppNoteRequests.Get(subNoteId, AppUserStore.state.JWT).then(result => {
+    // if (subNoteId in AppNoteStore.state.cache) {
+    //     subNoteTitle.innerHTML = AppNoteStore.state.cache[subNoteId]
+    //     loaded = true
+    // } else {
+    //
+    //     const request = pluginSettings.isEditable ? AppNoteRequests.Get(subNoteId, AppUserStore.state.JWT) : AppSharedNoteRequests.Get(subNoteId)
+    //     request.then(result => {
+    //         if (result.data.title == null) {
+    //             subNoteTitle.innerHTML = 'Подзаметка'
+    //         }
+    //
+    //         //subNoteWrapper.dataset.title = parseNoteTitle(result.data.title)
+    //         subNoteTitle.innerHTML = parseNoteTitle(result.data.title)
+    //
+    //         AppDispatcher.dispatch(NoteStoreActions.PUT_TO_CACHE, {key: subNoteId, value: parseNoteTitle(result.data.title)})
+    //
+    //         loaded = true
+    //
+    //     }).catch((e) => {
+    //         subNoteTitle.innerHTML = "Заметка не найдена"
+    //         subNoteWrapper.dataset.deleted = "true"
+    //     });
+    // }
+
+    const request = pluginSettings.isEditable ? AppNoteRequests.Get(subNoteId, AppUserStore.state.JWT) : AppSharedNoteRequests.Get(subNoteId)
+        request.then(result => {
             if (result.data.title == null) {
                 subNoteTitle.innerHTML = 'Подзаметка'
             }
 
-            //subNoteWrapper.dataset.title = parseNoteTitle(result.data.title)
             subNoteTitle.innerHTML = parseNoteTitle(result.data.title)
 
-            AppDispatcher.dispatch(NoteStoreActions.PUT_TO_CACHE, {key: subNoteId, value: parseNoteTitle(result.data.title)})
-
             loaded = true
 
         }).catch((e) => {
             subNoteTitle.innerHTML = "Заметка не найдена"
             subNoteWrapper.dataset.deleted = "true"
         });
-    }
 
-    if (pluginSettings.isEditable) {
-        subNoteWrapper.onclick = () => {
-            if (!subNoteWrapper.dataset.deleted && loaded) {
+    subNoteWrapper.onclick = () => {
+        if (!subNoteWrapper.dataset.deleted && loaded) {
+            if (isAuth) {
                 AppDispatcher.dispatch(NotesActions.OPEN_NOTE, subNoteId)
             } else {
-                AppToasts.error("Заметка не найдена")
+                AppSharedNoteRequests.Get(subNoteId).then(result => {
+                    AppRouter.openSharedNotePage(result)
+                }).catch((e) => {
+                    AppToasts.error("Заметка не найдена")
+                });
             }
+        } else {
+            AppToasts.error("Заметка не найдена")
         }
     }
 

public/src/components/Editor/EditorWrapper.tsx → public/src/components/EditorWrapper/EditorWrapper.tsx

@@ -1,13 +1,13 @@
 import {Component} from "@veglem/screact/dist/component";
 import {VDomNode} from "@veglem/screact/dist/vdom";
-import "./Editor.sass"
-import {Editor} from "./Editor";
+import "../Editor/Editor.sass"
+import {Editor} from "../Editor/Editor";
 import {AppNoteStore, NoteStoreState} from "../../modules/stores/NoteStore";
 import {Tippy} from "../Tippy/Tippy";
 import {isEqual} from "@veglem/screact/dist/isEqual";
-import {Viewer} from "./Viewer";
+import {Viewer} from "../Editor/Viewer";
 import {NoteType} from "../../utils/types";
-import {PluginProps} from "./Plugin";
+import {PluginProps} from "../Editor/Plugin";
 import {parseNoteTitle} from "../../modules/utils";
 
 window['mobileCheck'] = function() {
@@ -61,7 +61,7 @@ export class EditorWrapper extends Component<EditorProps, EditorState> {
     updateState = (store:NoteStoreState) => {
         this.syncTitle(store.note.title)
 
-        if (!this.props.isOwner && this.props.note?.public) {
+        if (!this.props.isOwner && this.props.note?.public && !this.props.isEditable) {
             this.self.innerHTML = ""
             new Viewer(
                 store.note.blocks,