[WIP] #15 Html Editor improvements

package.json

@@ -36,6 +36,7 @@
         "react-dom": "^18.0.0",
         "react-konva": "^18.0.0-0",
         "react-redux": "^7.2.6",
+        "react-resize-detector": "^7.0.0",
         "react-router-dom": "^6.2.2",
         "react-scripts": "5.0.0",
         "react-split": "^2.0.14",

src/hooks/useTitle.ts

@@ -0,0 +1,15 @@
+import useRouteContextEffect from './useRouteContextEffect';
+import produceState from '../utils/produceState';
+
+const useTitle = (title: string) => {
+    useRouteContextEffect(
+        (setRouteContentState) => {
+            produceState(setRouteContentState, (context) => {
+                context.title = title;
+            });
+        },
+        [title]
+    );
+};
+
+export default useTitle;

src/pages/dataUrlViewPage/DataUrlViewPage.tsx

@@ -3,8 +3,7 @@ import useQuery from '../../hooks/useQuery';
 import styles from './DataUrlViewPage.module.scss';
 import { Navigate } from 'react-router-dom';
 import { routes } from '../../constants/router/routes';
-import useRouteContextEffect from '../../hooks/useRouteContextEffect';
-import produceState from '../../utils/produceState';
+import useTitle from '../../hooks/useTitle';
 
 export interface DataUrlViewPageQueryParams {
     data?: string;
@@ -18,14 +17,7 @@ const DataUrlViewPage: FunctionComponent = () => {
         return <Navigate to={routes.dataUrl.path} />;
     }
 
-    useRouteContextEffect(
-        (setRouteContentState) => {
-            produceState(setRouteContentState, (context) => {
-                context.title = title ?? routes.dataUrlView.title;
-            });
-        },
-        [title]
-    );
+    useTitle(title ?? routes.dataUrlView.title);
 
     return (
         <div className={styles.container}>

src/pages/htmlEditorPage/HtmlEditorPage.module.scss

@@ -1,14 +1,26 @@
 @import '../../styles/main';
 
+.titleExtra {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
 .container {
     @include monacoBackground;
 
     .containerRow {
         height: 100%;
         display: flex;
         flex-direction: row;
+        flex: 1;
+        overflow: hidden;
+        max-width: 100%;
 
         .col {
+            @include monacoBackground;
+
             display: flex;
             flex-direction: column;
 
@@ -17,57 +29,63 @@
 
             &:only-child {
                 flex: 1;
+
+                & > * {
+                    max-width: 100%;
+                    overflow: auto;
+                }
             }
         }
 
         .leftCol {
-            &:not(:only-child) {
-                border-right: 1px solid;
-                @include borderColor;
-            }
-
-            .editorTabs {
-                flex: 1;
-                display: flex;
-
-                & > *:last-child {
-                    display: flex;
-                }
-
-                .editorTab {
-                    flex: 1;
-                    display: flex;
-
-                    .editor {
-                        flex: 1;
-                    }
-                }
-
-                .tabTitleWrapper {
-                    height: 20px !important;
-                    width: 50px !important;
-
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: center;
-                    align-items: center;
-
-                    .tabTitle {
-                        font-size: 28px;
-                    }
-                }
-            }
         }
 
         .rightCol {
-            background: white;
+            .tabTitleWrapper {
+                .tabTitle {
+                    font-size: 24px;
+                }
+            }
         }
 
         .resultFrame {
             flex: 1;
             border: none;
             max-width: 100%;
             overflow: auto;
+            background: white;
+        }
+    }
+}
+
+.editorTabs {
+    flex: 1;
+    display: flex;
+
+    & > *:last-child {
+        display: flex;
+    }
+
+    .editorTab {
+        flex: 1;
+        display: flex;
+
+        .editor {
+            flex: 1;
+        }
+    }
+
+    .tabTitleWrapper {
+        height: 20px !important;
+        width: 50px !important;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        .tabTitle {
+            font-size: 28px;
         }
     }
 }

src/pages/htmlEditorPage/HtmlEditorPage.scss

@@ -10,4 +10,9 @@
 .gutter.gutter-horizontal {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
     cursor: col-resize;
+    z-index: 1;
+
+    border-right: 1px solid;
+    border-left: 1px solid;
+    @include borderColor;
 }