gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show editor output in right column

This commit is contained in:
Reorx 2023-02-03 12:02:32 +08:00
parent 2ad28aaa84
commit bf2e5aeec1
4 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
editor/_json-editor.scss
View File

@ -44,8 +44,6 @@
.editor-container { .editor-container {
font-size: 14px; font-size: 14px;
h1 {}
h2 {}
h3 { h3 {
margin: 12px 0 12px 0; margin: 12px 0 12px 0;
} }
@ -57,7 +55,7 @@
padding: 2px 4px; padding: 2px 4px;
} }
textarea { textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: var(--font-default);
line-height: 1.3; line-height: 1.3;
padding: var(--gap); padding: var(--gap);
} }
@ -181,7 +179,7 @@
.je-edit-json--textarea { .je-edit-json--textarea {
width: 300px; width: 300px;
height: 400px; height: 400px;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace; font-family: var(--font-mono);
font-size: 12px; font-size: 12px;
} }
} }

7
editor/index.html
View File

@ -9,15 +9,16 @@
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<div class="sidebar"> <div class="sidebar column">
<div> <div>
<div>JSONCV</div> <div>JSONCV</div>
<div>Editor</div> <div>Editor</div>
</div> </div>
<div class="editor-toc"></div> <div class="editor-toc"></div>
</div> </div>
<div class="middle editor-container"></div> <div class="middle column editor-container"></div>
<div class="right"> <div class="right column">
<div class="editor-output code-block"></div>
</div> </div>
</div> </div>

6
editor/main.js
View File

@ -99,3 +99,9 @@ editor.on('ready',() => {
el.id = schemapath el.id = schemapath
}) })
}) })
// listen to change
const elOutput = document.querySelector('.editor-output')
editor.on('change', () => {
elOutput.textContent = JSON.stringify(editor.getValue(), null, 2)
})

19
editor/styles.scss
View File

@ -11,11 +11,13 @@
--yellow-1: #FFEC99; --yellow-1: #FFEC99;
--green-0: #D3F9D8; --green-0: #D3F9D8;
--green-1: #B2F2BB; --green-1: #B2F2BB;
--font-default: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
} }
html { html {
font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-family: var(--font-default);
} }
body { body {
@ -27,16 +29,20 @@ body {
grid-template-columns: 150px 1fr 1fr; grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 100vh; grid-template-rows: 100vh;
> .column {
overflow-y: auto;
}
.sidebar { .sidebar {
padding: var(--gap); padding: var(--gap);
} }
.middle { .middle {
padding-right: var(--gap2); padding-right: var(--gap2);
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
overflow-y: auto;
} }
.right { .right {
background-color: #eee; background-color: #eee;
padding: var(--gap);
} }
} }
@ -61,6 +67,15 @@ body {
} }
} }
.code-block {
font-size: 12px;
font-family: var(--font-mono);
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
}
@keyframes bgFade { @keyframes bgFade {
0% { 0% {
background-color: #FFF3BF; background-color: #FFF3BF;