refactored code editor (#24)

This commit is contained in:
anandamarsh 2023-09-19 17:08:35 -07:00 committed by GitHub
parent f251718d62
commit faeab0790a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 54 deletions

View File

@ -1,10 +1,10 @@
import * as React from "react";
import { RendererContext, RendererOpts, LineStateType, RendererModelContainerApi } from "../types";
import { RendererContext, RendererOpts, LineStateType, RendererModelContainerApi } from "../../types";
import Editor from "@monaco-editor/react";
import { Markdown } from "../elements";
import { GlobalModel, GlobalCommandRunner } from "../model";
import { Markdown } from "../../elements";
import { GlobalModel, GlobalCommandRunner } from "../../model";
import Split from "react-split-it";
import "./split.css";
import "./split.less";
import loader from "@monaco-editor/loader";
loader.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });

52
src/view/code/split.less Normal file
View File

@ -0,0 +1,52 @@
/* example-split.css */
.code-renderer {
.jsoneditor {
border: none !important;
}
.split-horizontal {
display: flex;
width: 100%;
height: 100%;
}
.split-vertical {
display: flex;
flex-direction: column;
height: 100%;
}
.gutter {
flex-shrink: 0;
flex-grow: 0;
background: rgb(100, 100, 100);
max-width: 4px;
}
.gutter-horizontal {
cursor: col-resize;
}
.gutter-vertical {
cursor: row-resize;
}
.gutter:hover {
background: rgb(155, 155, 155);
}
.gutter-dragging:hover {
background: rgb(155, 155, 155);
}
.pane {
flex-shrink: 1;
flex-grow: 1;
position: relative;
min-width: 20rem;
}
.pane-dragging {
overflow: hidden;
}
.scrollable {
height: 100vh;
max-height: 100vh;
overflow: scroll;
}
}

View File

@ -1,50 +0,0 @@
/* example-split.css */
.jsoneditor {
border: none !important;
}
.split-horizontal {
display: flex;
width: 100%;
height: 100%;
}
.split-vertical {
display: flex;
flex-direction: column;
height: 100%;
}
.gutter {
flex-shrink: 0;
flex-grow: 0;
background: rgb(100, 100, 100);
max-width: 4px;
}
.gutter-horizontal {
cursor: col-resize;
}
.gutter-vertical {
cursor: row-resize;
}
.gutter:hover {
background: rgb(155, 155, 155);
}
.gutter-dragging:hover {
background: rgb(155, 155, 155);
}
.pane {
flex-shrink: 1;
flex-grow: 1;
position: relative;
min-width: 20rem;
}
.pane-dragging {
overflow: hidden;
}
.scrollable {
height: 100vh;
max-height: 100vh;
overflow: scroll;
}