diff --git a/editor/_json-editor.scss b/editor/_json-editor.scss index 1aee2a8..37771e4 100644 --- a/editor/_json-editor.scss +++ b/editor/_json-editor.scss @@ -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; } } diff --git a/editor/index.html b/editor/index.html index 34ca0ac..f54d581 100644 --- a/editor/index.html +++ b/editor/index.html @@ -9,15 +9,16 @@
-
+
JSONCV
Editor
-
-
+
+
+
diff --git a/editor/main.js b/editor/main.js index 3cfc6e0..23b07fc 100644 --- a/editor/main.js +++ b/editor/main.js @@ -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) +}) diff --git a/editor/styles.scss b/editor/styles.scss index 894a3ee..8985f85 100644 --- a/editor/styles.scss +++ b/editor/styles.scss @@ -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;