mirror of
https://github.com/flynx/pWiki.git
synced 2025-12-25 12:21:58 +00:00
Compare commits
2 Commits
bb3ba95ae3
...
8368ee43aa
| Author | SHA1 | Date | |
|---|---|---|---|
| 8368ee43aa | |||
| 25b2b4af47 |
@ -30,6 +30,7 @@
|
||||
text-size-adjust: 180%;
|
||||
}
|
||||
|
||||
:host,
|
||||
.editor {
|
||||
--item-padding: calc(1em * var(--item-padding-ratio));
|
||||
}
|
||||
@ -38,75 +39,96 @@
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
:host,
|
||||
.editor {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editor .code {
|
||||
.code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* header */
|
||||
.editor .header {
|
||||
.header {
|
||||
margin: 1em var(--outline-padding);
|
||||
padding-bottom: 1.2em;
|
||||
|
||||
border-bottom: solid 1px rgba(0,0,0,0.15);
|
||||
}
|
||||
.editor .header:empty {
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
.editor .header .path-item {
|
||||
.path-item {
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
/* XXX needs more work... */
|
||||
max-width: 10rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.editor .header .path-item:hover {
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.editor .header .path-item:first-child {
|
||||
&:first-child {
|
||||
padding-left: 3em;
|
||||
margin-left: -2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.editor .outline {
|
||||
.outline {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
padding: 1em var(--outline-padding);
|
||||
padding-bottom: 1.2em;
|
||||
}
|
||||
|
||||
/* virtual empty block... */
|
||||
.editor .outline:empty:after {
|
||||
&:empty:after {
|
||||
content: "Empty";
|
||||
display: block;
|
||||
font-style: italic;
|
||||
color: rgba(0,0,0,0.2);
|
||||
}
|
||||
.editor .outline:empty:hover:after {
|
||||
&:empty:hover:after {
|
||||
}
|
||||
|
||||
|
||||
.editor .outline .block {
|
||||
.block .block {
|
||||
margin-left: var(--item-indent);
|
||||
}
|
||||
.block {
|
||||
position: relative;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
/* focus... */
|
||||
&:focus {
|
||||
/*outline: solid 0.2em silver;*/
|
||||
outline: none;
|
||||
}
|
||||
.editor.block-offsets .outline .block {
|
||||
border-left: solid 1px silver;
|
||||
&:focus>.text {
|
||||
background: rgba(0,0,0,0.07);
|
||||
}
|
||||
.editor .outline .block .block,
|
||||
.editor.crop .outline .block[cropped] .block,
|
||||
.editor.crop .outline .block[cropped] .block[cropped] {
|
||||
margin-left: var(--item-indent);
|
||||
&.focused:not(:focus)>.text {
|
||||
background: rgba(0,0,0,0.01);
|
||||
border-bottom: solid 2px rgba(0,0,0,0.03);
|
||||
}
|
||||
.editor .outline .block>.text {
|
||||
|
||||
/* collapsed block... */
|
||||
&[collapsed] {
|
||||
border-bottom: solid 1px silver;
|
||||
&>.children {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* select... */
|
||||
/* XXX are we selecting subtrees or blocks??? */
|
||||
&[selected]>.text {
|
||||
background: silver;
|
||||
}
|
||||
|
||||
&>.text {
|
||||
--v-margin: 0;
|
||||
|
||||
display: block;
|
||||
@ -127,80 +149,46 @@
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
/* show/hide node's view/code... */
|
||||
/*.editor .outline .block>.code:focus+.view,*/
|
||||
.editor .outline .block>.code:not(:focus) {
|
||||
|
||||
&>.code {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: calc(2 * var(--item-padding) + 1em);
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
/* show/hide node's view/code... */
|
||||
/*&:focus+.view,*/
|
||||
&:not(:focus) {
|
||||
opacity: 0;
|
||||
}
|
||||
/* hide .view content but show before/after -- keep bulets and touch zones... */
|
||||
.editor .outline .block>.code:focus+.view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
&:focus+.view {
|
||||
visibility: hidden;
|
||||
}
|
||||
.editor .outline .block>.code:focus+.view:before,
|
||||
.editor .outline .block>.code:focus+.view:after {
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
visibility: visible;
|
||||
margin-top: calc(-1 * var(--v-margin));
|
||||
margin-bottom: calc(-1 * var(--v-margin));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* click through the .view text to the .code */
|
||||
.editor .outline .block>.view {
|
||||
&>.view {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* block hover... */
|
||||
.editor .outline:empty:hover:after,
|
||||
.editor .outline .block:hover>.view {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0,0,0,0.01) 0%,
|
||||
rgba(0,0,0,0.01) 80%,
|
||||
rgba(0,0,0,0.03) 100%);
|
||||
}
|
||||
.editor .outline .block>.view:blank {
|
||||
content: " ";
|
||||
}
|
||||
.editor .outline .block>.code {
|
||||
height: calc(2 * var(--item-padding) + 1em);
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* clickable things in view */
|
||||
.editor .outline .block>.view a,
|
||||
.editor .outline .block>.view pre,
|
||||
.editor .outline .block>.view input {
|
||||
& a,
|
||||
& pre,
|
||||
& input {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
/* focus... */
|
||||
editor .outline .block:focus {
|
||||
/*outline: solid 0.2em silver;*/
|
||||
outline: none;
|
||||
}
|
||||
.editor .outline .block:focus>.text {
|
||||
background: rgba(0,0,0,0.07);
|
||||
}
|
||||
.editor .outline .block.focused:not(:focus)>.text {
|
||||
background: rgba(0,0,0,0.01);
|
||||
border-bottom: solid 2px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
/* collapsed block... */
|
||||
.editor .outline .block[collapsed] {
|
||||
border-bottom: solid 1px silver;
|
||||
}
|
||||
/* hide children... */
|
||||
.editor .outline .block[collapsed]>.children {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* click/tap zones for expand button... */
|
||||
.editor .outline .block>.view:before,
|
||||
.editor .outline .block>.view:after {
|
||||
&:before,
|
||||
&:after {
|
||||
--size: 3rem;
|
||||
|
||||
content: "";
|
||||
@ -233,67 +221,84 @@ editor .outline .block:focus {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* left indicator */
|
||||
.editor .outline .block>.view:before {
|
||||
&:before {
|
||||
justify-content: right;
|
||||
left: calc(-1 * var(--size));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* indicators... */
|
||||
/* left indicator bullet */
|
||||
/* XXX not sure about this yet... */
|
||||
.editor .outline .block>.view:before {
|
||||
&>.view:before {
|
||||
content: "●";
|
||||
color: rgba(0,0,0,0.07);
|
||||
}
|
||||
.editor .outline .block>.view:empty:before {
|
||||
&>.view:empty:before {
|
||||
content: "";
|
||||
}
|
||||
/* right indicator (collapse/expand) */
|
||||
.editor .outline .block>.view:after {
|
||||
&>.view:after {
|
||||
color: silver;
|
||||
}
|
||||
.editor .outline .block:has(.block)>.view:after {
|
||||
&:has(.block)>.view:after {
|
||||
content: "○";
|
||||
}
|
||||
.editor .outline .block[collapsed]>.view:after {
|
||||
&[collapsed]>.view:after {
|
||||
content: "●";
|
||||
}
|
||||
|
||||
/* select... */
|
||||
/* XXX are we selecting subtrees or blocks??? */
|
||||
.editor .outline [selected]>.text {
|
||||
background: silver;
|
||||
}
|
||||
|
||||
/* block hover... */
|
||||
&:empty:hover:after,
|
||||
.block:not(.focused):hover>.view {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0,0,0,0.01) 0%,
|
||||
rgba(0,0,0,0.01) 80%,
|
||||
rgba(0,0,0,0.03) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* NOTE: the organization after this point does not feel right/clean,
|
||||
* not sure how to do this better...
|
||||
*/
|
||||
|
||||
/* crop... */
|
||||
/* NOTE: also see rules for: .editor .outline .block .block
|
||||
* ...can we avoid this?? (XXX) */
|
||||
.editor.crop .outline .block:not([cropped]) {
|
||||
&.crop .outline .block {
|
||||
&[cropped] .block,
|
||||
&[cropped] .block[cropped] {
|
||||
margin-left: var(--item-indent);
|
||||
}
|
||||
|
||||
&:not([cropped]) {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.editor.crop .outline .block:not([cropped])>.text {
|
||||
&:not([cropped])>.text {
|
||||
display: none;
|
||||
}
|
||||
.editor.crop .outline .block,
|
||||
.editor.crop .outline .block[cropped] {
|
||||
&,
|
||||
&[cropped] {
|
||||
margin-left: 0;
|
||||
}
|
||||
.editor.crop .outline .block[cropped] .text {
|
||||
&[cropped] .text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* toolbar... */
|
||||
.editor .toolbar {
|
||||
.toolbar {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
.editor .toolbar button {
|
||||
|
||||
button {
|
||||
--margin: 0.1em;
|
||||
|
||||
display: block;
|
||||
@ -304,6 +309,17 @@ editor .outline .block:focus {
|
||||
|
||||
font-size: var(--button-size);
|
||||
}
|
||||
}
|
||||
|
||||
&.block-offsets .outline .block {
|
||||
border-left: solid 1px silver;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -312,50 +328,50 @@ editor .outline .block:focus {
|
||||
|
||||
/*------------------------------------------------------ Headings ---*/
|
||||
|
||||
.editor .outline .heading-1,
|
||||
.editor .outline .heading-2,
|
||||
.editor .outline .heading-3,
|
||||
.editor .outline .heading-4,
|
||||
.editor .outline .heading-5,
|
||||
.editor .outline .heading-6 {
|
||||
:host .outline,
|
||||
.editor .outline {
|
||||
.heading-1,
|
||||
.heading-2,
|
||||
.heading-3,
|
||||
.heading-4,
|
||||
.heading-5,
|
||||
.heading-6 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.editor .outline .heading-1>.text,
|
||||
.editor .outline .heading-2>.text,
|
||||
.editor .outline .heading-3>.text,
|
||||
.editor .outline .heading-4>.text,
|
||||
.editor .outline .heading-5>.text,
|
||||
.editor .outline .heading-6>.text {
|
||||
|
||||
&>.text {
|
||||
font-weight: bold;
|
||||
}
|
||||
.editor .outline .heading-1>.text,
|
||||
.editor .outline .heading-2>.text,
|
||||
.editor .outline .heading-3>.text {
|
||||
}
|
||||
.heading-1>.text,
|
||||
.heading-2>.text,
|
||||
.heading-3>.text {
|
||||
border-bottom: solid 1px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.editor .outline .heading-1>.text {
|
||||
.heading-1>.text {
|
||||
--font-size: 2.5em;
|
||||
}
|
||||
.editor .outline .heading-2>.text {
|
||||
.heading-2>.text {
|
||||
--font-size: 1.9em;
|
||||
}
|
||||
.editor .outline .heading-3>.text {
|
||||
.heading-3>.text {
|
||||
--font-size: 1.5em;
|
||||
}
|
||||
.editor .outline .heading-4>.text {
|
||||
.heading-4>.text {
|
||||
--font-size: 1.3em;
|
||||
}
|
||||
.editor .outline .heading-5>.text {
|
||||
.heading-5>.text {
|
||||
--font-size: 1.1em;
|
||||
}
|
||||
.editor .outline .heading-6>.text {
|
||||
.heading-6>.text {
|
||||
--font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------- Quote ---*/
|
||||
|
||||
:host .outline .quote>.text,
|
||||
.editor .outline .quote>.text {
|
||||
--indent: 1rem;
|
||||
--v-margin: 0.7rem;
|
||||
@ -376,88 +392,90 @@ editor .outline .block:focus {
|
||||
|
||||
/*---------------------------------------------------------- List ---*/
|
||||
|
||||
.editor .outline .list-item>.view:before,
|
||||
.editor .outline .list>.children>.block>.view:before {
|
||||
:host .outline,
|
||||
.editor .outline {
|
||||
.list-item>.view:before,
|
||||
.list>.children {
|
||||
&>.block>.view:before {
|
||||
content: "◼";
|
||||
color: gray;
|
||||
}
|
||||
.editor .outline
|
||||
.list>.children
|
||||
>.list>.children>.block>.view:before {
|
||||
&>.list>.children {
|
||||
&>.block>.view:before {
|
||||
content: "●";
|
||||
}
|
||||
.editor .outline
|
||||
.list>.children
|
||||
>.list>.children
|
||||
>.list>.children>.block>.view:before {
|
||||
&>.list>.children {
|
||||
&>.block>.view:before {
|
||||
content: "○";
|
||||
}
|
||||
.editor .outline
|
||||
.list>.children
|
||||
>.list>.children
|
||||
>.list>.children
|
||||
>.list>.children>.block>.view:before {
|
||||
&>.list>.children {
|
||||
&>.block>.view:before {
|
||||
content: "▪";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* hide bullets on empty nodes unless they are edited... */
|
||||
.editor .outline .list>.children>.block>.code:not(:focus)+.view:empty:before {
|
||||
content: "";
|
||||
&>.block>.code:not(:focus)+.view:empty:before {
|
||||
content: "" !important;
|
||||
}
|
||||
/* hide bullets on empty nodes... *//*
|
||||
.editor .outline .list>.children>.block>.view:empty:before {
|
||||
&>.block>.view:empty:before {
|
||||
content: "";
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------ Numbered lists ---*/
|
||||
|
||||
:host .outline .numbered-list>.children,
|
||||
.editor .outline .numbered-list>.children {
|
||||
counter-reset: numbered-list;
|
||||
}
|
||||
.editor .outline .numbered-list>.children>.block>.view:not(:empty):before {
|
||||
|
||||
&>.block>.view:not(:empty):before {
|
||||
counter-increment: numbered-list;
|
||||
content: counter(numbered-list) ".";
|
||||
color: gray;
|
||||
}
|
||||
.editor .outline
|
||||
.numbered-list>.children
|
||||
>.numbered-list>.children>.block>.view:not(:empty):before {
|
||||
&>.numbered-list>.children {
|
||||
&>.block>.view:not(:empty):before {
|
||||
counter-increment: numbered-list;
|
||||
content: counter(numbered-list, lower-alpha) ".";
|
||||
color: gray;
|
||||
}
|
||||
.editor .outline
|
||||
.numbered-list>.children
|
||||
>.numbered-list>.children
|
||||
>.numbered-list>.children>.block>.view:not(:empty):before {
|
||||
&>.numbered-list>.children {
|
||||
&>.block>.view:not(:empty):before {
|
||||
counter-increment: numbered-list;
|
||||
content: counter(numbered-list, lower-roman) ".";
|
||||
color: gray;
|
||||
}
|
||||
.editor .outline
|
||||
.numbered-list>.children
|
||||
>.numbered-list>.children
|
||||
>.numbered-list>.children
|
||||
>.numbered-list>.children>.block>.view:not(:empty):before {
|
||||
&>.numbered-list>.children {
|
||||
&>.block>.view:not(:empty):before {
|
||||
counter-increment: numbered-list;
|
||||
content: counters(numbered-list, ".") ".";
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------ hr block ---*/
|
||||
|
||||
.editor .outline .list>.children>.block.hr>.view:before {
|
||||
:host .outline,
|
||||
.editor .outline {
|
||||
.list>.children>.block.hr>.view:before {
|
||||
content: "";
|
||||
}
|
||||
.editor .outline .numbered-list>.children>.block.hr>.view:before {
|
||||
.numbered-list>.children>.block.hr>.view:before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------- Notes ---*/
|
||||
|
||||
:host .outline .NOTE,
|
||||
.editor .outline .NOTE {
|
||||
--margin: 1rem;
|
||||
--padding-h: 2rem;
|
||||
@ -467,56 +485,64 @@ editor .outline .block:focus {
|
||||
padding: var(--padding-v) var(--padding-h);
|
||||
border: solid 2px silver;
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* XXX this prevents it from being accesible via click/tap... */
|
||||
.editor .outline .NOTE>.view:empty {
|
||||
&>.view:empty {
|
||||
display: none;
|
||||
}
|
||||
.editor .outline .NOTE:focus>.view:empty {
|
||||
&:focus>.view:empty {
|
||||
display: block;
|
||||
}
|
||||
.editor .outline .NOTE>.view:empty ~ .children {
|
||||
&>.view:empty ~ .children {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
.editor .outline .NOTE>.view:before {
|
||||
&>.view:before {
|
||||
content: "" !important;
|
||||
}
|
||||
/* correct the right click zone... */
|
||||
/* XXX need to account for nesting... (???) */
|
||||
.editor .outline .block.NOTE>.view:after,
|
||||
.editor .outline .block.NOTE .block>.view:after {
|
||||
&.block>.view:after,
|
||||
&.block .block>.view:after {
|
||||
margin-right: calc(-1 * var(--padding-h));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------------------------------------------- Status ---*/
|
||||
|
||||
.editor .outline .block.DONE>.view {
|
||||
:host .outline .block,
|
||||
.editor .outline .block {
|
||||
&.DONE>.view {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.editor .outline .block.REJECT>.view {
|
||||
&.REJECT>.view {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------- Highlightes ---*/
|
||||
|
||||
.editor .outline .highlight {
|
||||
:host .outline,
|
||||
.editor .outline {
|
||||
.highlight {
|
||||
font-weight: bold;
|
||||
background: yellow;
|
||||
}
|
||||
.editor .outline .XXX>.view {
|
||||
.XXX>.view {
|
||||
background: yellow;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------ Comments ---*/
|
||||
|
||||
:host.hide-comments .outline .comment,
|
||||
.editor.hide-comments .outline .comment {
|
||||
display: none;
|
||||
}
|
||||
:host .outline .comment>.view,
|
||||
.editor .outline .comment>.view {
|
||||
color: silver;
|
||||
}
|
||||
@ -524,7 +550,9 @@ editor .outline .block:focus {
|
||||
|
||||
/*---------------------------------------------------- Checkboxes ---*/
|
||||
|
||||
.editor .outline .block.todo>.view {
|
||||
:host .outline .block,
|
||||
.editor .outline .block {
|
||||
&.todo>.view {
|
||||
width: calc(
|
||||
100%
|
||||
- var(--checkbox-size)
|
||||
@ -533,8 +561,8 @@ editor .outline .block:focus {
|
||||
var(--checkbox-size)
|
||||
+ var(--checkbox-margin));
|
||||
}
|
||||
.editor .outline .block.check>.view input[type=checkbox],
|
||||
.editor .outline .block.todo>.view input[type=checkbox] {
|
||||
&.check>.view input[type=checkbox],
|
||||
&.todo>.view input[type=checkbox] {
|
||||
height: var(--checkbox-size);
|
||||
width: var(--checkbox-size);
|
||||
|
||||
@ -547,84 +575,101 @@ editor .outline .block:focus {
|
||||
/* NOTE: this appears to be needed for the em sizes above to work correctly */
|
||||
font-size: 1em;
|
||||
}
|
||||
.editor .outline .block.check.focused>.view input[type=checkbox].selected,
|
||||
.editor .outline .block.todo.focused>.view input[type=checkbox].selected {
|
||||
&.check.focused>.view input[type=checkbox].selected,
|
||||
&.todo.focused>.view input[type=checkbox].selected {
|
||||
outline: solid 0.2em silver;
|
||||
}
|
||||
.editor .outline .block.check:focus>.view input[type=checkbox].selected,
|
||||
.editor .outline .block.todo:focus>.view input[type=checkbox].selected {
|
||||
&.check:focus>.view input[type=checkbox].selected,
|
||||
&.todo:focus>.view input[type=checkbox].selected {
|
||||
outline: solid 0.2em gray;
|
||||
}
|
||||
.editor .outline .block.todo>.view input[type=checkbox]:first-child {
|
||||
&.todo>.view input[type=checkbox]:first-child {
|
||||
margin-left: calc(
|
||||
-1 * var(--checkbox-size)
|
||||
- var(--checkbox-margin));
|
||||
}
|
||||
/* correct the left click zone... */
|
||||
.editor .outline .block.todo>.view:before {
|
||||
&.todo>.view:before {
|
||||
margin-left: calc(
|
||||
-1 * var(--checkbox-size)
|
||||
- var(--checkbox-margin));
|
||||
}
|
||||
/* status... */
|
||||
.editor .outline .block>.view .completion[completion]:before {
|
||||
&>.view .completion[completion]:before {
|
||||
content: "(" attr(completion) ")";
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------------------------------------- Code ---*/
|
||||
|
||||
.editor .outline .block>.view pre,
|
||||
.editor .outline .block>.view>code,
|
||||
.editor .outline .block>.view :not(pre)>code {
|
||||
:host .outline .block>.view,
|
||||
.editor .outline .block>.view {
|
||||
/* XXX for some reason if we omit & where not needed, colors will not apply... */
|
||||
& pre,
|
||||
&>code,
|
||||
& :not(pre)>code {
|
||||
padding: 0.1em 0.3em;
|
||||
font-family: monospace;
|
||||
background: rgba(0,0,0,0.07);
|
||||
border-radius: 0.2em;
|
||||
outline: none;
|
||||
}
|
||||
.editor .outline .block>.view pre>code {
|
||||
& pre>code {
|
||||
display: block;
|
||||
padding: 0.6em 0.6em;
|
||||
padding-bottom: 0.8em;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------------------------------------------- Tables ---*/
|
||||
|
||||
:host .outline .block>.view>table,
|
||||
.editor .outline .block>.view>table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.editor .outline .block>.view>table tr:nth-child(odd) {
|
||||
|
||||
/* XXX for some reason if we omit & where not needed, colors will not apply... */
|
||||
& tr:nth-child(odd) {
|
||||
background: rgba(0,0,0,0.03);
|
||||
}
|
||||
.editor .outline .block>.view>table tr:first-child {
|
||||
& tr:first-child {
|
||||
font-weight: bold;
|
||||
border-bottom: solid 0.1rem silver;
|
||||
background: transparent;
|
||||
}
|
||||
.editor .outline .block>.view>table td {
|
||||
& td {
|
||||
height: calc(1em + var(--item-padding) * 2);
|
||||
padding: 0 1em;
|
||||
/*text-align: center;*/
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/********************************************************* Testing ***/
|
||||
|
||||
.editor.show-click-zones .outline .block>.view:before,
|
||||
.editor.show-click-zones .outline .block>.view:after {
|
||||
:host.show-click-zones .outline .block,
|
||||
.editor.show-click-zones .outline .block {
|
||||
&>.view {
|
||||
&:before,
|
||||
&:before,
|
||||
&:after {
|
||||
background: rgba(0,0,0,0.03);
|
||||
border: solid 1px silver;
|
||||
}
|
||||
.editor.show-click-zones .outline .block:hover>.view:before,
|
||||
.editor.show-click-zones .outline .block:hover>.view:after {
|
||||
}
|
||||
&:hover>.view {
|
||||
&:before,
|
||||
&:after {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
/**********************************************************************
|
||||
* vim:set ts=4 sw=4 : */
|
||||
|
||||
@ -766,6 +766,9 @@ var Outline = {
|
||||
change_interval: 1000,
|
||||
tab_size: 4,
|
||||
carot_jump_edge_then_block: false,
|
||||
// XXX not sure what should the default be...
|
||||
// XXX this should not affect editing...
|
||||
trim_block_text: false,
|
||||
|
||||
|
||||
// Plugins...
|
||||
@ -1077,7 +1080,12 @@ var Outline = {
|
||||
if(this.__code2html__){
|
||||
// NOTE: we are ignoring the .collapsed attr here
|
||||
parsed = this.__code2html__(data.text, {...data})
|
||||
html.innerHTML = parsed.text
|
||||
html.innerHTML =
|
||||
parsed.text.length == 0 ?
|
||||
parsed.text
|
||||
// NOTE: adding a space here is done to prevent the browser
|
||||
// from hiding the last newline...
|
||||
: parsed.text + ' '
|
||||
// heading...
|
||||
this.__styles != null
|
||||
&& node.classList.remove(...this.__styles)
|
||||
@ -1085,7 +1093,12 @@ var Outline = {
|
||||
&& node.classList.add(...parsed.style)
|
||||
delete parsed.style
|
||||
} else {
|
||||
html.innerHTML = data.text }
|
||||
html.innerHTML =
|
||||
data.text.length == 0 ?
|
||||
data.text
|
||||
// NOTE: adding a space here is done to prevent the browser
|
||||
// from hiding the last newline...
|
||||
: data.text + ' ' }
|
||||
text.value = data.text
|
||||
// XXX this does not seem to work until we click in the textarea...
|
||||
text.autoUpdateSize() }
|
||||
@ -2021,7 +2034,6 @@ var Outline = {
|
||||
elem.selectionStart = elem.value.length
|
||||
elem.selectionEnd = elem.value.length
|
||||
} else {
|
||||
console.log('---', c)
|
||||
var m = getMarkdownOffset(elem.value, view.innerText, c)
|
||||
elem.focus()
|
||||
elem.selectionStart = c + m
|
||||
@ -2240,6 +2252,10 @@ Object.assign(
|
||||
//var toolbar = document.createElement('div')
|
||||
//toolbar.classList.add('toolbar')
|
||||
|
||||
// XXX can't yet get rid of the editor element here...
|
||||
// - handling autofocus of host vs. shadow???
|
||||
// - CSS not working correctly yet...
|
||||
// ...is this feasible???
|
||||
editor.append(
|
||||
style,
|
||||
header,
|
||||
@ -2275,11 +2291,23 @@ Object.assign(
|
||||
return this.dom?.querySelector('.toolbar') },
|
||||
set toolbar(val){},
|
||||
|
||||
// NOTE: this is here to break recursion of trying to set
|
||||
// html's value both in .code that is called both when
|
||||
// setting .value and from .attributeChangedCallback(..)
|
||||
get __code(){
|
||||
return this.code },
|
||||
set __code(value){
|
||||
if(value == null){
|
||||
return }
|
||||
// XXX is this the right way to do this???
|
||||
this.__sessionStorage
|
||||
&& (sessionStorage[this.__sessionStorage] = value)
|
||||
this.__localStorage
|
||||
&& (localStorage[this.__localStorage] = value) },
|
||||
get code(){
|
||||
return this.hasAttribute('value') ?
|
||||
this.getAttribute('value')
|
||||
: HTMLElement.decode(this.innerHTML) },
|
||||
// XXX
|
||||
set code(value){
|
||||
if(value == null){
|
||||
return }
|
||||
@ -2288,11 +2316,7 @@ Object.assign(
|
||||
this.setAttribute('value', value)
|
||||
} else {
|
||||
this.innerHTML = HTMLElement.encode(value) }
|
||||
// XXX is this the right way to do this???
|
||||
this.__sessionStorage
|
||||
&& (sessionStorage[this.__sessionStorage] = value)
|
||||
this.__localStorage
|
||||
&& (localStorage[this.__localStorage] = value) },
|
||||
this.__code = value },
|
||||
|
||||
// XXX do we need this???
|
||||
// ...rename .code -> .value ???
|
||||
@ -2309,20 +2333,21 @@ Object.assign(
|
||||
|
||||
// XXX do we need to before == after ???
|
||||
attributeChangedCallback(name, before, after){
|
||||
var value
|
||||
if(name == 'local-storage'){
|
||||
this.__localStorage = after
|
||||
// XXX setting code here because we will load at .setup(..)
|
||||
// ...the problem is that if we change the attr
|
||||
// we need to call .load(..)
|
||||
this.code = localStorage[after] ?? '' }
|
||||
value = this.code = localStorage[after] ?? '' }
|
||||
|
||||
if(name == 'session-storage'){
|
||||
if(value && name == 'session-storage'){
|
||||
this.__sessionStorage = after
|
||||
this.code = sessionStorage[after] ?? '' }
|
||||
|
||||
if(name == 'value'){
|
||||
console.log('---', before, '->', after) }
|
||||
value = this.code = sessionStorage[after] ?? '' }
|
||||
|
||||
if(!value && name == 'value'){
|
||||
// see notes for .__code
|
||||
value = this.__code = after }
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
@ -41,7 +41,7 @@ HTMLElement.decode = function(str){
|
||||
var span = document.createElement('span')
|
||||
// XXX
|
||||
return str
|
||||
.replace(/%lt;/g, '<')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/&/g, '&') }
|
||||
/*/
|
||||
|
||||
@ -48,8 +48,7 @@ var setup = function(){
|
||||
-
|
||||
- ## Bugs:
|
||||
focused:: true
|
||||
- BUG: html decode/encode broken...
|
||||
- `HTMLElement.decode(HTMLElement.encode('a\nb\nc')) -> 'abc'` and not `'a\nb\nc'`!!!
|
||||
- BUG: `.trim_block_text` should not affect editing...
|
||||
- BUG: mobile browsers behave quite chaotically ignoring parts of the styling...
|
||||
- FF:
|
||||
- zooming on edited field
|
||||
@ -59,31 +58,42 @@ var setup = function(){
|
||||
-
|
||||
- ## ToDo:
|
||||
- trailing whitespace is ignored in `.view`... (BUG?)
|
||||
- this node has a second empty line
|
||||
|
||||
- there are several ways to deal with this:#
|
||||
- remove trailing whitespace completely on refocus (a-la logseq)
|
||||
- show whitespace in both modes
|
||||
- keep current behavior
|
||||
- demos:
|
||||
-
|
||||
_BTW: leading whitespace is shown..._
|
||||
- add options to save to `.sessionStorage` / `.localStorage`
|
||||
- Q: should we select text without first focusing??
|
||||
- _...logseq does not do this either_
|
||||
leading whitespace...
|
||||
- trailing whitespace...
|
||||
|
||||
- empty block is not correctly shown\:
|
||||
-
|
||||
|
||||
|
||||
- _it seams that HTML ignores the last newline if it is not followed by anything_
|
||||
- there are four ways to deal with this:#
|
||||
- trim whitespace on refocus
|
||||
- show whitespace in both modes
|
||||
- REJECT remove trailing whitespace completely on refocus (a-la logseq)
|
||||
- REJECT keep current behavior
|
||||
- I do not believe in keeping whitespace in edit and hiding it in view (POLS)
|
||||
- custom element / web component
|
||||
- Q: can we get rid of the editor block??:
|
||||
- CSS breaks if we do...
|
||||
- need to figure out a way to handle autofocus for host/editor uniformly
|
||||
- DONE data interface:
|
||||
collapsed:: true
|
||||
- the "natural" way to pass data is to use the same mechanism as `<textarea>` the problem is that we can't extend `HTMLTextAreaElement` as it can not have shadow dom (reject?)
|
||||
- adding an explicit textarea element is an odd requirement (reject?)
|
||||
- seems that the least bad way to go is to use the `value` attribute
|
||||
- DONE API: directly mixin Outline?
|
||||
- `.value` / `.code` should be both updated internally and also load new content when updated externally -- not yet sure how...
|
||||
- DONE `.value` / `.code` should be both updated internally and also load new content when updated externally -- not yet sure how...
|
||||
- events
|
||||
- test nesting...
|
||||
-
|
||||
- selection
|
||||
- multiple node selection (via shift+motion)
|
||||
- touch/mouse (???)
|
||||
- Q: should we select text (mouse/touch) without first focusing??
|
||||
- _...logseq does not do this either_
|
||||
- now this is possible by dragging from a click zone...
|
||||
- copy/paste nodes/trees
|
||||
- numbered lists: add counters to a depth of 6-7...
|
||||
- _or find a way to make them repeat..._
|
||||
@ -137,6 +147,7 @@ var setup = function(){
|
||||
- empty item height is a bit off...
|
||||
- search?
|
||||
- _...not sure if search should be internal or external yet..._
|
||||
- DONE add options to save to `.sessionStorage` / `.localStorage`
|
||||
- DONE might be a good idea to focus the prev (empty) node if pressing `Enter` at 0 position
|
||||
collapsed:: true
|
||||
- <- place cursor here and press enter
|
||||
@ -223,6 +234,7 @@ var setup = function(){
|
||||
- DONE split out
|
||||
- DONE define api (see: `<editor>.__code2text__(..) / <editor>.__text2code__(..)`)
|
||||
- CSS
|
||||
- DONE nested rules (experiment)
|
||||
- separate out settings
|
||||
- separate out theming
|
||||
- Actions -- move user actions (code in `.keyboard`) into methods
|
||||
@ -422,7 +434,11 @@ var setup = function(){
|
||||
|
||||
<hr>
|
||||
|
||||
<outline-editor session-storage="outline-editor-test"></outline-editor>
|
||||
<outline-editor
|
||||
session-storage="outline-editor-test"
|
||||
value="- ## Session storage
|
||||
- default value, edit to change
|
||||
- this should survive reloads"></outline-editor>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user