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

7
editor/index.html
View File

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

6
editor/main.js
View File

@ -99,3 +99,9 @@ editor.on('ready',() => {
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;
--green-0: #D3F9D8;
--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 {
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 {
@ -27,16 +29,20 @@ body {
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 100vh;
> .column {
overflow-y: auto;
}
.sidebar {
padding: var(--gap);
}
.middle {
padding-right: var(--gap2);
margin-left: var(--sidebar-width);
overflow-y: auto;
}
.right {
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 {
0% {
background-color: #FFF3BF;