mirror of
https://github.com/flynx/pWiki.git
synced 2025-12-25 12:21:58 +00:00
Compare commits
4 Commits
1842223a79
...
ca216df605
| Author | SHA1 | Date | |
|---|---|---|---|
| ca216df605 | |||
| 4cefc92faf | |||
| dea1a6d7ff | |||
| 670d8b5760 |
@ -6,6 +6,7 @@
|
||||
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
// Helpers...
|
||||
|
||||
// XXX do a caret api...
|
||||
|
||||
@ -44,7 +45,9 @@ 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 it would be a better idea to do a binary search instead of a liner
|
||||
// pass... but at this point this is not critical (unless we get
|
||||
// gigantic blocks)
|
||||
// XXX HACK -- is there a better way to do this???
|
||||
var getCharOffset = function(elem, x, y, c){
|
||||
c = c ?? 0
|
||||
@ -52,15 +55,20 @@ var getCharOffset = function(elem, x, y, c){
|
||||
for(var e of [...elem.childNodes]){
|
||||
// text node...
|
||||
if(e instanceof Text){
|
||||
for(var i=0; i < e.length; i++){
|
||||
var prev, b
|
||||
for(var i=0; i <= e.length; i++){
|
||||
r.setStart(e, i)
|
||||
r.setEnd(e, i)
|
||||
var b = r.getBoundingClientRect()
|
||||
prev = b
|
||||
b = r.getBoundingClientRect()
|
||||
// found target...
|
||||
if(b.x >= x
|
||||
&& b.y <= y
|
||||
&& b.bottom >= y){
|
||||
return c + i } }
|
||||
// get the closest gap between chars to the click...
|
||||
return Math.abs(b.x - x) <= Math.abs(prev.x - x) ?
|
||||
c + i
|
||||
: c + i - 1 } }
|
||||
c += i
|
||||
// html node...
|
||||
} else {
|
||||
@ -87,7 +95,7 @@ var getMarkdownOffset = function(markdown, text, i){
|
||||
i = i ?? text.length
|
||||
var m = 0
|
||||
// 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 p = m
|
||||
// walk to next match...
|
||||
@ -1107,8 +1115,8 @@ var Outline = {
|
||||
|
||||
sync: function(){
|
||||
var code = this.code
|
||||
code
|
||||
&& (code.innerHTML = this.text())
|
||||
if(code){
|
||||
code.value = this.text() }
|
||||
return this },
|
||||
|
||||
|
||||
@ -1477,7 +1485,7 @@ var Outline = {
|
||||
var code = this.code
|
||||
if(code){
|
||||
var t = Date.now()
|
||||
this.load(code.innerHTML
|
||||
this.load(code.value
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>'))
|
||||
console.log(`Parse: ${Date.now() - t}ms`) }
|
||||
|
||||
@ -33,7 +33,7 @@ var setup = function(){
|
||||
<body onload="setup()">
|
||||
<div class="editor">
|
||||
<!-- code -->
|
||||
<pre class="code">
|
||||
<textarea class="code">
|
||||
- # Outline editor prototype
|
||||
- An outline-based markdown editor experiment
|
||||
- ### Infuences::
|
||||
@ -45,12 +45,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...
|
||||
-
|
||||
- ## 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...
|
||||
- ASAP: call `.sync()` on all changes...
|
||||
- FEATURE: read-only mode
|
||||
- export html
|
||||
- embed css
|
||||
@ -277,7 +276,7 @@ var setup = function(){
|
||||
- This is a set
|
||||
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
|
||||
- </pre>
|
||||
- </textarea>
|
||||
<!-- outline -->
|
||||
<div class="outline"></div>
|
||||
<!-- toolbar (optional) -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user