Some changes and use monaco for text viewable files

Author: CubesterYT

package-lock.json

@@ -63,6 +63,7 @@
     "lodash.defaultsdeep": "4.6.1",
     "lodash.omit": "4.5.0",
     "lodash.throttle": "4.0.1",
+    "monaco-editor": "^0.28.1",
     "omggif": "1.0.9",
     "papaparse": "5.3.0",
     "postcss-import": "^12.0.0",
@@ -78,6 +79,7 @@
     "react-ga": "2.5.3",
     "react-intl": "2.9.0",
     "react-modal": "3.9.1",
+    "react-monaco-editor": "^0.28.0",
     "react-popover": "0.5.10",
     "react-redux": "5.0.7",
     "react-responsive": "5.0.0",
@@ -129,6 +131,7 @@
     "jest": "^29.7.0",
     "jest-junit": "7.0.0",
     "mkdirp": "1.0.3",
+    "monaco-editor-webpack-plugin": "^4.2.0",
     "raf": "3.4.1",
     "react-test-renderer": "16.14.0",
     "redux-mock-store": "1.5.3",

package.json

@@ -1,3 +1,4 @@
+@import "../../css/colors.css";
 @import "../../css/units.css";
 
 .viewer-container {
@@ -21,4 +22,119 @@
     max-height: calc(50 * $space);
     border-radius: 0.25rem;
     margin: 1rem
+}
+
+.editor-header-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.editor-surface {
+    width: 100%;
+    height: 24rem;
+    margin-top: calc(2 * $space);
+    border: 1px solid $ui-black-transparent;
+    border-radius: 0.25rem;
+    overflow: hidden;
+}
+
+.info-row {
+    margin-top: $space;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+}
+
+[dir="ltr"] .info-row .attribute + .attribute {
+    margin-left: calc(2 * $space);
+}
+
+[dir="rtl"] .info-row .attribute + .attribute {
+    margin-right: calc(2 * $space);
+}
+
+.input-group {
+    display: flex;
+    align-items: center;
+}
+
+.name-input {
+    min-width: 20rem;
+}
+
+[dir="ltr"] .button-group {
+    margin-left: 1rem;
+}
+
+[dir="rtl"] .button-group {
+    margin-right: 1rem;
+}
+
+.button-group {
+    display: flex;
+}
+
+.button {
+    height: 2rem;
+    padding: 0.35rem;
+    outline: none;
+    background: $ui-white;
+    border-radius: 0;
+    border: 1px solid $ui-black-transparent;
+    cursor: pointer;
+    font-size: 0.85rem;
+    user-select: none;
+    margin: 0;
+    position: relative;
+}
+
+.button:not(:last-child) {
+    border-right: none;
+}
+
+[dir="rtl"] .button:not(:last-child) {
+    border-left: none;
+    border-right: 1px solid $ui-black-transparent;
+}
+
+.button-group .button:first-child,
+[dir="rtl"] .button-group .button:last-child {
+    border-radius: $form-radius 0 0 $form-radius;
+}
+
+.button-group .button:last-child,
+[dir="rtl"] .button-group .button:first-child {
+    border-radius: 0 $form-radius $form-radius 0;
+}
+
+.button:active {
+    background: $looks-transparent;
+}
+
+.button:focus::before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    border: 1px solid $looks-secondary;
+    z-index: 1;
+}
+
+.button > img {
+    flex-grow: 1;
+    max-width: 100%;
+    max-height: 100%;
+    min-width: 1.25rem;
+}
+
+[dir="rtl"] .undo-icon,
+[dir="rtl"] .redo-icon {
+    transform: scaleX(-1);
+}
+
+.button:disabled > img {
+    opacity: 0.25;
 }