diff --git a/webapp/src/customtags.ts b/webapp/src/customtags.ts index 18c823a..bbe9a02 100644 --- a/webapp/src/customtags.ts +++ b/webapp/src/customtags.ts @@ -8,3 +8,5 @@ export const TaskTag = Tag.define(); export const TaskMarkerTag = Tag.define(); export const CommentTag = Tag.define(); export const CommentMarkerTag = Tag.define(); +export const BulletList = Tag.define(); +export const OrderedList = Tag.define(); diff --git a/webapp/src/editor.tsx b/webapp/src/editor.tsx index 850140c..7bd8d54 100644 --- a/webapp/src/editor.tsx +++ b/webapp/src/editor.tsx @@ -220,9 +220,12 @@ export class Editor implements AppEventDispatcher { { selector: "ATXHeading3", class: "line-h3" }, { selector: "ListItem", class: "line-li", nesting: true }, { selector: "Blockquote", class: "line-blockquote" }, + { selector: "Task", class: "line-task" }, { selector: "CodeBlock", class: "line-code" }, { selector: "FencedCode", class: "line-fenced-code" }, { selector: "Comment", class: "line-comment" }, + { selector: "BulletList", class: "line-ul" }, + { selector: "OrderedList", class: "line-ol" }, ]), keymap.of([ ...smartQuoteKeymap, @@ -292,6 +295,17 @@ export class Editor implements AppEventDispatcher { await this.dispatchAppEvent("page:click", clickEvent); }); }, + // focus: (event: FocusEvent, view: EditorView) => { + // console.log("Got focus"); + // document.body.classList.add("keyboard"); + // }, + // blur: (event: FocusEvent, view: EditorView) => { + // console.log("Lost focus"); + // document.body.classList.remove("keyboard"); + // }, + // focusout: (event: FocusEvent, view: EditorView) => { + // window.scrollTo(0, 0); + // }, }), markdown({ base: customMarkDown, diff --git a/webapp/src/parser.ts b/webapp/src/parser.ts index 4842b65..6ab2274 100644 --- a/webapp/src/parser.ts +++ b/webapp/src/parser.ts @@ -149,7 +149,6 @@ const WikiMarkdown = commonmark.configure([ TaskMarker: ct.TaskMarkerTag, Url: t.url, Comment: ct.CommentTag, - // CommentMarker: ct.CommentMarkerTag, }), ], }, diff --git a/webapp/src/styles/editor.scss b/webapp/src/styles/editor.scss index c1e4e09..f2380cc 100644 --- a/webapp/src/styles/editor.scss +++ b/webapp/src/styles/editor.scss @@ -109,29 +109,69 @@ background-color: #efefef; } - .line-li-1 { - text-indent: -2ch; - padding-left: 2ch; + // Indentation of follow-up lines + @mixin lineOverflow($baseIndent) { + text-indent: -1 * ($baseIndent + 2ch); + padding-left: $baseIndent + 2ch; + + &.line-task { + text-indent: -1 * ($baseIndent + 6ch); + padding-left: $baseIndent + 6ch; + } + + &.line-blockquote { + text-indent: -1 * ($baseIndent + 4ch); + padding-left: $baseIndent + 4ch; + } } - .line-li-1.line-li-2 { - text-indent: -4ch; - padding-left: 4ch; + .line-ul { + &.line-li-1 { + @include lineOverflow(0); + } + + &.line-li-1.line-li-2 { + @include lineOverflow(2); + } + + &.line-li-1.line-li-2.line-li-3 { + @include lineOverflow(4); + } + + &.line-li-1.line-li-2.line-li-3.line-li-4 { + @include lineOverflow(6); + } + + &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 { + @include lineOverflow(8); + } } - .line-li-1.line-li-2.line-li-3 { - text-indent: -6ch; - padding-left: 6ch; + .line-ol { + &.line-li-1 { + @include lineOverflow(1); + } + + &.line-li-1.line-li-2 { + @include lineOverflow(2); + } + + &.line-li-1.line-li-2.line-li-3 { + @include lineOverflow(4); + } + + &.line-li-1.line-li-2.line-li-3.line-li-4 { + @include lineOverflow(6); + } + + &.line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 { + @include lineOverflow(8); + } } - .line-li-1.line-li-2.line-li-3.line-li-4 { - text-indent: -8ch; - padding-left: 8ch; - } - - .line-li-1.line-li-2.line-li-3.line-li-4.line-li-5 { - text-indent: -10ch; - padding-left: 10ch; + .line-comment { + text-indent: -1 * 3ch; + padding-left: 3ch; } .task-marker { diff --git a/webapp/src/styles/filter_box.scss b/webapp/src/styles/filter_box.scss index 90d6edf..8958884 100644 --- a/webapp/src/styles/filter_box.scss +++ b/webapp/src/styles/filter_box.scss @@ -2,7 +2,7 @@ position: absolute; font-family: var(--ui-font); margin: auto; - width: 500px; + max-width: 500px; height: 600px; background-color: #fff; left: 0; diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss index 89d8b54..0670834 100644 --- a/webapp/src/styles/main.scss +++ b/webapp/src/styles/main.scss @@ -19,7 +19,7 @@ body { #top { height: 55px; - position: absolute; + position: fixed; top: 0; left: 0; right: 0; @@ -46,7 +46,7 @@ body { } #bottom { - position: absolute; + position: fixed; bottom: 0; left: 0; right: 0; @@ -61,6 +61,10 @@ body { text-align: right; } +// body.keyboard #bottom { +// bottom: 250px; +// } + #editor { position: absolute; top: 55px;