diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index aaa6f27..1f1eed5 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -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; diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index c01085f..b7956ae 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -319,9 +319,10 @@ var Outline = { .replace(/^(?\s+(.*)$/m, style('quote')) .replace(/^(?')) } return this }, } diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index ba03379..e5474ee 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -27,7 +27,7 @@ var setup = function(){
-
+ 
 - # 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 example
 	- 
   - ### 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
+ - 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