flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2025-10-31 02:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added quoting + lots of tweaks...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-10-11 03:29:20 +03:00
parent 14fec24aaf
commit b8ba68c06b
3 changed files with 53 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
experiments/outline-editor/editor.css
View File

@ -8,7 +8,6 @@
--item-indent: 2rem; --item-indent: 2rem;
--item-padding-ratio: 0.2; --item-padding-ratio: 0.2;
--item-padding: calc(1em * var(--item-padding-ratio));
--checkbox-size: 1.5rem; --checkbox-size: 1.5rem;
@ -29,6 +28,14 @@
/*scroll-behavior: smooth;*/ /*scroll-behavior: smooth;*/
} }
.editor {
--item-padding: calc(1em * var(--item-padding-ratio));
}
/*********************************************************************/
.editor { .editor {
display: block; display: block;
position: relative; position: relative;
@ -123,7 +130,7 @@ editor .outline [tabindex]:focus {
} }
.editor .outline [tabindex].focused:not(:focus)>span, .editor .outline [tabindex].focused:not(:focus)>span,
.editor .outline [tabindex].focused:not(:focus)>textarea { .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] { .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... */ /* Lists... */
/* XXX needs to be in the middle of the first span but with universal size... */ /* 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 { .editor .outline .list>[tabindex]>span:not(:empty):before {
content: "◼"; content: "◼";
color: gray; color: gray;

21
experiments/outline-editor/editor.js
View File

@ -319,9 +319,10 @@ var Outline = {
.replace(/^(?<!\\)##\s+(.*)$/m, style('heading-2')) .replace(/^(?<!\\)##\s+(.*)$/m, style('heading-2'))
.replace(/^(?<!\\)#\s+(.*)$/m, style('heading-1')) .replace(/^(?<!\\)#\s+(.*)$/m, style('heading-1'))
// style: list... // style: list...
.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item')) //.replace(/^(?<!\\)[-\*]\s+(.*)$/m, style('list-item'))
.replace(/^\s*(.*)(?<!\\):\s*$/m, style('list')) .replace(/^\s*(.*)(?<!\\):\s*$/m, style('list'))
// style: misc... // style: misc...
.replace(/^(?<!\\)>\s+(.*)$/m, style('quote'))
.replace(/^(?<!\\)((\/\/|;)\s+.*)$/m, style('comment')) .replace(/^(?<!\\)((\/\/|;)\s+.*)$/m, style('comment'))
.replace(/^(?<!\\)XXX\s+(.*)$/m, style('XXX')) .replace(/^(?<!\\)XXX\s+(.*)$/m, style('XXX'))
.replace(/^(.*)\s*(?<!\\)XXX$/m, style('XXX')) .replace(/^(.*)\s*(?<!\\)XXX$/m, style('XXX'))
@ -346,6 +347,20 @@ var Outline = {
// quoting... // quoting...
.replace(/(?<!\\)\\(.)/gm, '$1') .replace(/(?<!\\)\\(.)/gm, '$1')
return elem }, 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... // serialization...
data: function(elem, deep=true){ data: function(elem, deep=true){
@ -743,7 +758,9 @@ var Outline = {
// code... // code...
var code = this.code var code = this.code
if(code){ if(code){
this.load(code.innerHTML) } this.load(code.innerHTML
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')) }
return this }, return this },
} }

7
experiments/outline-editor/index.html
View File

@ -27,7 +27,7 @@ var setup = function(){
<body onload="setup()"> <body onload="setup()">
<div class="editor"> <div class="editor">
<!-- code --> <!-- code -->
<div 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::
@ -59,6 +59,7 @@ var setup = function(){
* list item * list item
* list item * list item
block text block text
- NOTE: this is only a problem if making list-items manually -- disable???
- ~do a better expand/collapse icons~ - ~do a better expand/collapse icons~
- ~loading from DOM -- fill textarea~ - ~loading from DOM -- fill textarea~
- ~focus management~ - ~focus management~
@ -94,6 +95,7 @@ var setup = function(){
- a - a
- b - b
- c - c
- &gt; quoted text
- // C-style comment - // C-style comment
- ; ASM-style comment - ; ASM-style comment
- XXX Highlight - XXX Highlight
@ -108,6 +110,7 @@ var setup = function(){
- DONE done item - DONE done item
- [_] a different way to draw a checkbox - [_] a different way to draw a checkbox
- Inline [X] checkboxes [_] - Inline [X] checkboxes [_]
- link <a href="about:blank">example</a>
- -
- ### Playground for testing - ### Playground for testing
- A - A
@ -122,7 +125,7 @@ var setup = function(){
- This is a line of text - This is a line of text
- 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 </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 --> <!-- outline -->
<div class="outline"></div> <div class="outline"></div>
<!-- toolbar (optional) --> <!-- toolbar (optional) -->