From 41fdf0511edb11a11a97b8620f3c81d1b0fdd948 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 19 Oct 2023 02:36:08 +0300 Subject: [PATCH] bugfix + minor refactoring... Signed-off-by: Alex A. Naanou --- experiments/outline-editor/editor.css | 12 +++++++----- experiments/outline-editor/editor.js | 5 ++++- experiments/outline-editor/index.html | 4 +--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index 5207123..7e13f6e 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -80,6 +80,8 @@ margin-left: var(--item-indent); } .editor .outline .block>.text { + --v-margin: 0; + display: block; width: 100%; /* XXX this is a tiny bit off and using .code's height here is off too... */ @@ -88,7 +90,7 @@ padding-bottom: var(--item-padding); padding-left: 0; padding-right: 0; - margin: 0; + margin: var(--v-margin) 0; box-sizing: border-box; font-family: sans-serif; @@ -113,6 +115,8 @@ .editor .outline .block>.code:focus+.view:before, .editor .outline .block>.code:focus+.view:after { visibility: visible; + margin-top: calc(-1 * var(--v-margin)); + margin-bottom: calc(-1 * var(--v-margin)); } /* click through the .view text to the .code */ .editor .outline .block>.view { @@ -201,6 +205,7 @@ editor .outline .block:focus { background: transparent; } + /* left indicator */ .editor .outline .block>.view:before { justify-content: right; @@ -294,15 +299,12 @@ editor .outline .block:focus { .editor .outline .quote>.text { --indent: 1rem; - --margin: 0.7rem; + --v-margin: 0.7rem; --item-padding-ratio: 0.7; /* XXX for some reason if this is not set here it will not see the new --item-padding-ratio */ --item-padding: calc(1rem * var(--item-padding-ratio)); - margin-top: var(--margin); - margin-bottom: var(--margin); - padding: var(--item-padding) 1.5rem; color: rgba(0,0,0,0.8); diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index f49a7d1..93270d6 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -44,11 +44,13 @@ function clickPoint(x,y){ // box corresponds the to desired coordinates. This accounts for nested // elements. // +// XXX might be a good idea to tweak this just a bit (1/2 letter) to the left... // XXX HACK -- is there a better way to do this??? var getCharOffset = function(elem, x, y, c){ c = c ?? 0 var r = document.createRange() for(var e of [...elem.childNodes]){ + // text node... if(e instanceof Text){ for(var i=0; i < e.length; i++){ r.setStart(e, i) @@ -60,12 +62,13 @@ var getCharOffset = function(elem, x, y, c){ && b.bottom >= y){ return c + i } } c += i - + // html node... } else { var res = getCharOffset(e, x, y, c) if(!(res instanceof Array)){ return res } ;[c, res] = res } } + // no result was found... return arguments.length > 3 ? [c, null] : null } diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index 8a01d2a..12b61f0 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -46,12 +46,11 @@ var setup = function(){ - ## Bugs: - BUG: editor: FF seems to update the style every other key press -- should be live... - BUG: last node seems to get trash tags added to it's end... - - BUG: quote block bullet is off in edit mode: - - > quoted text - - ## ToDo: - ASAP: scroll into view is bad... - ASAP: mobile browsers behave quite chaotically ignoring parts of the styling... + - ASAP: tweak the getCharOffset(..) by about 1/2 a letter to the left... - FEATURE: read-only mode - export html - embed css @@ -110,7 +109,6 @@ var setup = function(){ - #### Click in this line and see where the cursor goes - _not sure how..._ - DONE click to select/edit node must retain click position in text... - - _...need a bit of tuning -- where in the char a click is made and where the cursor is placed..._ - DONE checkbox navigation via `alt-` collapsed:: true - _might be a good idea to include also TODO/DONE navigation -- not yet sure how to mark undone blocks (i.e. the ones marked with TODO in Logseg)..._