Compare commits

..

No commits in common. "ca216df605ee92709042332ce3fe09084ccb58bd" and "1842223a797e0fb95acb67a6bf66e81ab77dec24" have entirely different histories.

2 changed files with 13 additions and 20 deletions

View File

@ -6,7 +6,6 @@
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// Helpers...
// XXX do a caret api... // XXX do a caret api...
@ -45,9 +44,7 @@ function clickPoint(x,y){
// box corresponds the to desired coordinates. This accounts for nested // box corresponds the to desired coordinates. This accounts for nested
// elements. // elements.
// //
// XXX it would be a better idea to do a binary search instead of a liner // XXX might be a good idea to tweak this just a bit (1/2 letter) to the left...
// pass... but at this point this is not critical (unless we get
// gigantic blocks)
// XXX HACK -- is there a better way to do this??? // XXX HACK -- is there a better way to do this???
var getCharOffset = function(elem, x, y, c){ var getCharOffset = function(elem, x, y, c){
c = c ?? 0 c = c ?? 0
@ -55,20 +52,15 @@ var getCharOffset = function(elem, x, y, c){
for(var e of [...elem.childNodes]){ for(var e of [...elem.childNodes]){
// text node... // text node...
if(e instanceof Text){ if(e instanceof Text){
var prev, b for(var i=0; i < e.length; i++){
for(var i=0; i <= e.length; i++){
r.setStart(e, i) r.setStart(e, i)
r.setEnd(e, i) r.setEnd(e, i)
prev = b var b = r.getBoundingClientRect()
b = r.getBoundingClientRect()
// found target... // found target...
if(b.x >= x if(b.x >= x
&& b.y <= y && b.y <= y
&& b.bottom >= y){ && b.bottom >= y){
// get the closest gap between chars to the click... return c + i } }
return Math.abs(b.x - x) <= Math.abs(prev.x - x) ?
c + i
: c + i - 1 } }
c += i c += i
// html node... // html node...
} else { } else {
@ -95,7 +87,7 @@ var getMarkdownOffset = function(markdown, text, i){
i = i ?? text.length i = i ?? text.length
var m = 0 var m = 0
// walk both strings skipping/counting non-matching stuff... // walk both strings skipping/counting non-matching stuff...
for(var n=0; n <= i; n++, m++){ for(var n=0; n < i; n++, m++){
var c = text[n] var c = text[n]
var p = m var p = m
// walk to next match... // walk to next match...
@ -1115,8 +1107,8 @@ var Outline = {
sync: function(){ sync: function(){
var code = this.code var code = this.code
if(code){ code
code.value = this.text() } && (code.innerHTML = this.text())
return this }, return this },
@ -1485,10 +1477,10 @@ var Outline = {
var code = this.code var code = this.code
if(code){ if(code){
var t = Date.now() var t = Date.now()
this.load(code.value this.load(code.innerHTML
.replace(/&lt;/g, '<') .replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')) .replace(/&gt;/g, '>'))
console.log(`Parse: ${Date.now() - t}ms`) } console.log(`Parse: ${Date.now() - t}ms`)}
this.runPlugins('__setup__', this) this.runPlugins('__setup__', this)

View File

@ -33,7 +33,7 @@ var setup = function(){
<body onload="setup()"> <body onload="setup()">
<div class="editor"> <div class="editor">
<!-- code --> <!-- code -->
<textarea class="code"> <pre class="code">
- # Outline editor prototype - # Outline editor prototype
- An outline-based markdown editor experiment - An outline-based markdown editor experiment
- ### Infuences:: - ### Infuences::
@ -45,11 +45,12 @@ var setup = function(){
- -
- ## Bugs: - ## Bugs:
- BUG: editor: FF seems to update the style every other key press -- should be live... - 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...
- -
- ## ToDo: - ## ToDo:
- ASAP: scroll into view is bad... - ASAP: scroll into view is bad...
- ASAP: mobile browsers behave quite chaotically ignoring parts of the styling... - ASAP: mobile browsers behave quite chaotically ignoring parts of the styling...
- ASAP: call `.sync()` on all changes... - ASAP: tweak the getCharOffset(..) by about 1/2 a letter to the left...
- FEATURE: read-only mode - FEATURE: read-only mode
- export html - export html
- embed css - embed css
@ -276,7 +277,7 @@ var setup = function(){
- This is a set - This is a set
text lines text lines
- Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text - Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
- </textarea> - </pre>
<!-- outline --> <!-- outline -->
<div class="outline"></div> <div class="outline"></div>
<!-- toolbar (optional) --> <!-- toolbar (optional) -->