mirror of
https://github.com/flynx/pWiki.git
synced 2025-10-31 11:00:08 +00:00
added quoting + lots of tweaks...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
14fec24aaf
commit
b8ba68c06b
@ -8,7 +8,6 @@
|
||||
|
||||
--item-indent: 2rem;
|
||||
--item-padding-ratio: 0.2;
|
||||
--item-padding: calc(1em * var(--item-padding-ratio));
|
||||
|
||||
--checkbox-size: 1.5rem;
|
||||
|
||||
@ -29,6 +28,14 @@
|
||||
/*scroll-behavior: smooth;*/
|
||||
}
|
||||
|
||||
.editor {
|
||||
--item-padding: calc(1em * var(--item-padding-ratio));
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
.editor {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -123,7 +130,7 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
.editor .outline [tabindex].focused:not(:focus)>span,
|
||||
.editor .outline [tabindex].focused:not(:focus)>textarea {
|
||||
background: rgba(0,0,0,0.05);
|
||||
background: rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
.editor .outline div[collapsed] {
|
||||
@ -264,9 +271,28 @@ editor .outline [tabindex]:focus {
|
||||
}
|
||||
|
||||
|
||||
/* Quote... */
|
||||
.editor .outline .quote>span,
|
||||
.editor .outline .quote>textarea {
|
||||
--item-padding-ratio: 0.7;
|
||||
--indent: 1rem;
|
||||
|
||||
/* 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));
|
||||
|
||||
padding: var(--item-padding) 1.5rem;
|
||||
color: rgba(0,0,0,0.8);
|
||||
|
||||
/* XXX border messes up bullet alignment... */
|
||||
/*border-left: solid 0.2em silver;*/
|
||||
box-shadow: inset 0.2em 0 0 0 silver;
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
|
||||
/* Lists... */
|
||||
/* XXX needs to be in the middle of the first span but with universal size... */
|
||||
.editor .outline .list-item:before,
|
||||
.editor .outline .list-item>span:before,
|
||||
.editor .outline .list>[tabindex]>span:not(:empty):before {
|
||||
content: "◼";
|
||||
color: gray;
|
||||
|
||||
@ -319,9 +319,10 @@ var Outline = {
|
||||
.replace(/^(?<!\\)##\s+(.*)$/m, style('heading-2'))
|
||||
.replace(/^(?<!\\)#\s+(.*)$/m, style('heading-1'))
|
||||
// style: list...
|
||||
.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
|
||||
//.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
|
||||
.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
|
||||
// style: misc...
|
||||
.replace(/^(?<!\\)>\s+(.*)$/m, style('quote'))
|
||||
.replace(/^(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
|
||||
.replace(/^(?<!\\)XXX\s+(.*)$/m, style('XXX'))
|
||||
.replace(/^(.*)\s*(?<!\\)XXX$/m, style('XXX'))
|
||||
@ -346,6 +347,20 @@ var Outline = {
|
||||
// quoting...
|
||||
.replace(/(?<!\\)\\(.)/gm, '$1')
|
||||
return elem },
|
||||
// XXX essentially here we need to remove service stuff like some
|
||||
// attributes (collapsed, id, ...)...
|
||||
// XXX also need to quote leading '- ' in block text here...
|
||||
// e.g.
|
||||
// - block
|
||||
// some text
|
||||
// - text in the above block ('-' needs to be quoted)
|
||||
// - next block
|
||||
__code2text__: function(code){
|
||||
// XXX
|
||||
},
|
||||
__text2code__: function(text){
|
||||
// XXX
|
||||
},
|
||||
|
||||
// serialization...
|
||||
data: function(elem, deep=true){
|
||||
@ -743,7 +758,9 @@ var Outline = {
|
||||
// code...
|
||||
var code = this.code
|
||||
if(code){
|
||||
this.load(code.innerHTML) }
|
||||
this.load(code.innerHTML
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')) }
|
||||
|
||||
return this },
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ var setup = function(){
|
||||
<body onload="setup()">
|
||||
<div class="editor">
|
||||
<!-- code -->
|
||||
<div class="code">
|
||||
<pre class="code">
|
||||
- # Outline editor prototype
|
||||
- An outline-based markdown editor experiment
|
||||
- ### Infuences::
|
||||
@ -59,6 +59,7 @@ var setup = function(){
|
||||
* list item
|
||||
* list item
|
||||
block text
|
||||
- NOTE: this is only a problem if making list-items manually -- disable???
|
||||
- ~do a better expand/collapse icons~
|
||||
- ~loading from DOM -- fill textarea~
|
||||
- ~focus management~
|
||||
@ -94,6 +95,7 @@ var setup = function(){
|
||||
- a
|
||||
- b
|
||||
- c
|
||||
- > quoted text
|
||||
- // C-style comment
|
||||
- ; ASM-style comment
|
||||
- XXX Highlight
|
||||
@ -108,6 +110,7 @@ var setup = function(){
|
||||
- DONE done item
|
||||
- [_] a different way to draw a checkbox
|
||||
- Inline [X] checkboxes [_]
|
||||
- link <a href="about:blank">example</a>
|
||||
-
|
||||
- ### Playground for testing
|
||||
- A
|
||||
@ -122,7 +125,7 @@ var setup = function(){
|
||||
- This is a line of text
|
||||
- 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 </div>
|
||||
- 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>
|
||||
<!-- outline -->
|
||||
<div class="outline"></div>
|
||||
<!-- toolbar (optional) -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user