fix: editor background fill entire height

fix: adding attachment does not create a new draft fix: save draft on text area changes
zextras · Jan 13, 2022 · 561c551 · 561c551
1 parent f24ac93
commit 561c551
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 82 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/views/app/detail-panel/edit/edit-view.jsx b/src/views/app/detail-panel/edit/edit-view.jsx
@@ -3,6 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+/*
+ * SPDX-FileCopyrightText: 2021 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 import React, { useCallback, useEffect, useMemo, useRef, useState, useContext } from 'react';
 import {
 	Button,
@@ -100,7 +105,9 @@ const EditorWrapper = styled.div`
 	> .tox:not(.tox-tinymce-inline) {
 		width: 100%;
 		border: none;
-
+		.tox-editor-container {
+			height: 300px;
+		}
 		.tox-editor-header {
 			padding: ${(props) => props.theme.sizes.padding.large};
 			background-color: ${(props) => props.theme.palette.gray6.regular};
@@ -193,16 +200,7 @@ export default function EditView({ mailId, folderId, setHeader, toggleAppBoard }
 		[mailId, boardContext?.mailId]
 	);
 
-	const oldEditorId = useMemo(
-		() =>
-			find(
-				map(Object.keys(editors), (key) => ({ ...editors[key] })),
-				{ oldId: activeMailId }
-			)?.editorId,
-		[activeMailId, editors]
-	);
-
-	const editorId = useMemo(() => oldEditorId ?? generateId(), [oldEditorId]);
+	const editorId = useMemo(() => activeMailId ?? generateId(), [activeMailId]);
 
 	const getItems = (items) =>
 		items.map((el) => ({
@@ -292,49 +290,6 @@ export default function EditView({ mailId, folderId, setHeader, toggleAppBoard }
 		}
 	}, [activeMailId, dispatch]);
 
-	useEffect(() => {
-		if (!activeMailId) {
-			return;
-		}
-		if (!editors[editorId] && messages[activeMailId] && !oldEditorId) {
-			dispatch(
-				createEditor({
-					settings,
-					editorId,
-					id: action === ActionsType.EDIT_AS_DRAFT ? activeMailId : undefined,
-					original: messages[activeMailId] ?? undefined,
-					boardContext,
-					action,
-					change,
-					accounts,
-					labels: {
-						to: `${t('label.to', 'To')}:`,
-						from: `${t('label.from', 'From')}:`,
-						cc: `${t('label.cc', 'CC')}:`,
-						subject: `${t('label.subject', 'Subject')}:`,
-						sent: `${t('label.sent', 'Sent')}:`
-					}
-				})
-			);
-		} else {
-			setEditor(editors[oldEditorId || editorId]);
-		}
-	}, [
-		folderId,
-		dispatch,
-		activeMailId,
-		messages,
-		editors,
-		editorId,
-		action,
-		change,
-		accounts,
-		t,
-		boardContext,
-		settings,
-		oldEditorId
-	]);
-
 	const sendMailCb = useCallback(() => {
 		setBtnSendLabel(t('label.sending', 'Sending'));
 		setBtnSendDisabled(true);
@@ -516,30 +471,28 @@ export default function EditView({ mailId, folderId, setHeader, toggleAppBoard }
 	}, [editor?.subject, setHeader, updateBoard, action, t]);
 
 	useEffect(() => {
-		if (!activeMailId) {
-			if (!editors[editorId]) {
-				dispatch(
-					createEditor({
-						settings,
-						editorId,
-						id: action === ActionsType.EDIT_AS_DRAFT ? activeMailId : undefined,
-						boardContext,
-						original: messages[activeMailId] ?? undefined,
-						action,
-						change,
-						accounts,
-						labels: {
-							to: `${t('label.to', 'To')}:`,
-							from: `${t('label.from', 'From')}:`,
-							cc: `${t('label.cc', 'CC')}:`,
-							subject: `${t('label.subject', 'Subject')}:`,
-							sent: `${t('label.sent', 'Sent')}:`
-						}
-					})
-				);
-			} else {
-				setEditor(editors[editorId]);
-			}
+		if (!editors[editorId]) {
+			dispatch(
+				createEditor({
+					settings,
+					editorId,
+					id: action === ActionsType.EDIT_AS_DRAFT ? activeMailId : undefined,
+					original: messages[activeMailId ?? editorId],
+					boardContext,
+					action,
+					change,
+					accounts,
+					labels: {
+						to: `${t('label.to', 'To')}:`,
+						from: `${t('label.from', 'From')}:`,
+						cc: `${t('label.cc', 'CC')}:`,
+						subject: `${t('label.subject', 'Subject')}:`,
+						sent: `${t('label.sent', 'Sent')}:`
+					}
+				})
+			);
+		} else {
+			setEditor(editors[editorId]);
 		}
 	}, [
 		editors,
@@ -553,7 +506,8 @@ export default function EditView({ mailId, folderId, setHeader, toggleAppBoard }
 		change,
 		boardContext,
 		settings,
-		activeMailId
+		activeMailId,
+		editor
 	]);
 
 	useEffect(() => {
@@ -623,8 +577,8 @@ export default function EditView({ mailId, folderId, setHeader, toggleAppBoard }
 			<Container onDragOver={(event) => onDragOverEvent(event)}>
 				<Container
 					mainAlignment="flex-start"
-					height="100%"
-					style={{ position: 'relative', maxHeight: '100%' }}
+					height="fill"
+					style={{ position: 'relative', maxHeight: '100%', overflowY: 'auto' }}
 					background="gray5"
 					padding={{ top: 'small', bottom: 'medium', horizontal: 'large' }}
 				>