From 94ef144c0f8b5a35b23944e432800354651ee54f Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 29 Sep 2023 02:47:07 +0300 Subject: [PATCH] split out css + minor fix... Signed-off-by: Alex A. Naanou --- experiments/outline-editor/editor.css | 61 +++++++++++++++++++++++++++ experiments/outline-editor/editor.js | 6 +-- experiments/outline-editor/index.html | 61 +-------------------------- 3 files changed, 65 insertions(+), 63 deletions(-) create mode 100755 experiments/outline-editor/editor.css diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css new file mode 100755 index 0000000..1222f0f --- /dev/null +++ b/experiments/outline-editor/editor.css @@ -0,0 +1,61 @@ + +:root { + font-family: sans-serif; + font-size: 5mm; +} + +.editor [tabindex] { + position: relative; +} +.editor div [tabindex] { + margin-left: 2em; +} +.editor [tabindex]>span, +.editor [tabindex]>textarea { + --padding: 0.2em; + + display: block; + width: 100%; + /* XXX this is a tiny bit off and using textarea's height here is off too... */ + min-height: 1em; + padding: var(--padding); + margin: 0; + + font-family: sans-serif; + font-size: 5mm; + white-space: pre; + + outline: none; + border: none; +} +.editor [tabindex]>textarea { + height: calc(2 * var(--padding) + 1em); + overflow: hidden; + resize: none; +} + +/* show/hide node's view/code... */ +.editor [tabindex]>span+textarea:not(:focus), +/* XXX not sure how to do this without :has(..)... */ +.editor [tabindex]:has(>span+textarea:focus)>span:has(+textarea), +.editor [tabindex]:focus>span+textarea { + position: absolute; + opacity: 0; + top: 0; +} + +.editor div[collapsed] { + border-bottom: solid 1px silver; +} +.editor div[collapsed] div { + display: none; +} + +.editor div:focus { + /*outline: solid 0.2em silver;*/ + outline: none; +} +.editor div:focus>span, +.editor div:focus>textarea { + background: silver; +} diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index c26bb2e..ed2a6fa 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -314,10 +314,10 @@ var Outline = { // indent... Tab: function(evt){ evt.preventDefault() - var editable = this.get('editable') + var edited = this.get('edited') var node = this.indent(!evt.shiftKey) - ;(editable ? - editable + ;(edited ? + edited : node)?.focus() }, // edit mode... diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index 0ff2253..b6f58e1 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -1,67 +1,8 @@ +