From dd6b92e792706a56ec53da9366f73da46ea22962 Mon Sep 17 00:00:00 2001 From: dragonish Date: Wed, 12 Mar 2025 15:57:17 +0800 Subject: [PATCH] enh: optimize the interaction between the decorator and the collapse button No longer add space characters to the boundary of decorator content, instead use styles to control the spacing between decorators and headings. --- common/counter.ts | 8 +-- components/view.ts | 2 +- main.ts | 4 +- styles.css | 126 ++++++++++++++++++++++++++++++++++++ test/common/counter.spec.ts | 11 ---- 5 files changed, 130 insertions(+), 21 deletions(-) diff --git a/common/counter.ts b/common/counter.ts index d23f8b5..aab56ae 100644 --- a/common/counter.ts +++ b/common/counter.ts @@ -2,7 +2,6 @@ import type { LevelTuple, BaseDecoratorOptions, DecoratorOptions, - PostionOptions, } from "./data"; import { defaultHeadingTuple } from "./data"; import * as presets from "@jsamr/counter-style/presets"; @@ -61,7 +60,7 @@ export class Counter { return this.levels.slice(0, level); } - decorator(level: number, postion?: PostionOptions): string { + decorator(level: number): string { let result = ""; if (level < 1 || level > 6) { return result; @@ -102,11 +101,6 @@ export class Counter { result = this.decoratorOptions.levelHeadings[level - 1]; } - if (postion === "before") { - return `${result} `; - } else if (postion === "after") { - return ` ${result}`; - } return result; } } diff --git a/components/view.ts b/components/view.ts index 20138fb..5575d05 100644 --- a/components/view.ts +++ b/components/view.ts @@ -198,7 +198,7 @@ export class HeadingViewPlugin implements PluginValue { continue; } - const content = counter.decorator(level, position); + const content = counter.decorator(level); const headingClassName = isLivePreviwMode ? previewHeadingDecoratorClassName diff --git a/main.ts b/main.ts index e08ff9b..f72a626 100644 --- a/main.ts +++ b/main.ts @@ -131,7 +131,7 @@ export default class HeadingPlugin extends Plugin { const level = headings[i].level; if (lineIndex === lineStart) { - const decortorContent = counter.decorator(level, position); + const decortorContent = counter.decorator(level); decorateHTMLElement( headingElement, decortorContent, @@ -162,7 +162,7 @@ export default class HeadingPlugin extends Plugin { headingElements.forEach((headingElement) => { const level = queryHeadingLevelByElement(headingElement); - const decortorContent = counter.decorator(level, position); + const decortorContent = counter.decorator(level); decorateHTMLElement( headingElement, decortorContent, diff --git a/styles.css b/styles.css index 9a8dc5c..be069fa 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,36 @@ /* reading start */ .reading-custom-heading-decorator.before-heading-decorator::before, .reading-custom-heading-decorator.after-heading-decorator::after { + display: inline-block; content: attr(data-heading-decorator); opacity: 20%; + transition: 0.25s ease-out; +} + +.reading-custom-heading-decorator.before-heading-decorator::before { + margin-inline-end: 6px; +} + +.is-collapsed + > .reading-custom-heading-decorator.before-heading-decorator::before, +.is-collapsed + > .reading-custom-heading-decorator.before-heading-decorator[dir="auto"]::before, +.is-collapsed + > .reading-custom-heading-decorator.before-heading-decorator[dir="ltr"]::before, +.reading-custom-heading-decorator.before-heading-decorator:hover::before, +.reading-custom-heading-decorator.before-heading-decorator[dir="auto"]:hover::before, +.reading-custom-heading-decorator.before-heading-decorator[dir="ltr"]:hover::before { + translate: -12px; +} + +.is-collapsed + > .reading-custom-heading-decorator.before-heading-decorator[dir="rtl"]::before, +.reading-custom-heading-decorator.before-heading-decorator[dir="rtl"]:hover::before { + translate: 12px; +} + +.reading-custom-heading-decorator.after-heading-decorator::after { + margin-inline-start: 6px; } .reading-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]::before, @@ -56,8 +84,62 @@ .preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not( :has(.cm-header.cm-formatting) )::after { + display: inline-block; content: attr(data-heading-decorator); opacity: 20%; + transition: 0.25s ease-out; +} + +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator:not( + .cm-active + ):not(:has(.cm-header.cm-formatting))::before { + margin-inline-end: 6px; +} + +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before, +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before, +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before, +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):hover::before, +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator[dir="auto"]:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):hover::before, +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):hover::before { + translate: -12px; +} + +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):has(> .is-collapsed)::before, +.is-live-preview + .preview-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not( + .cm-active + ):not(:has(.cm-header.cm-formatting)):hover::before { + translate: 12px; +} + +.is-live-preview + .preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not( + :has(.cm-header.cm-formatting) + )::after { + margin-inline-start: 6px; } .is-live-preview @@ -169,8 +251,52 @@ .source-custom-heading-decorator.after-heading-decorator:not( .cm-active )::after { + display: inline-block; content: attr(data-heading-decorator); opacity: 20%; + transition: 0.25s ease-out; +} + +.source-custom-heading-decorator.before-heading-decorator:not( + .cm-active + )::before { + margin-inline-end: 6px; +} + +.source-custom-heading-decorator.before-heading-decorator:not(.cm-active):has( + > .is-collapsed + )::before, +.source-custom-heading-decorator.before-heading-decorator[dir="auto"]:not( + .cm-active + ):has(> .is-collapsed)::before, +.source-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not( + .cm-active + ):has(> .is-collapsed)::before, +.source-custom-heading-decorator.before-heading-decorator:not( + .cm-active + ):hover::before, +.source-custom-heading-decorator.before-heading-decorator[dir="auto"]:not( + .cm-active + ):hover::before, +.source-custom-heading-decorator.before-heading-decorator[dir="ltr"]:not( + .cm-active + ):hover::before { + translate: -12px; +} + +.source-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not( + .cm-active + ):has(> .is-collapsed)::before, +.source-custom-heading-decorator.before-heading-decorator[dir="rtl"]:not( + .cm-active + ):hover::before { + translate: 12px; +} + +.source-custom-heading-decorator.after-heading-decorator:not( + .cm-active + )::after { + margin-inline-start: 6px; } .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not( diff --git a/test/common/counter.spec.ts b/test/common/counter.spec.ts index c722981..a2ffb1f 100644 --- a/test/common/counter.spec.ts +++ b/test/common/counter.spec.ts @@ -340,17 +340,6 @@ describe("common/counter", function () { expect(counter.decorator(2)).to.equal("1.1."); }); - it("Counter.decorator with position parameter", function () { - const counter = new Counter({ - ordered: true, - styleType: "decimal", - }); - - expect(counter.decorator(1)).to.equal("1"); - expect(counter.decorator(1, "before")).to.equal("2 "); - expect(counter.decorator(2, "after")).to.equal(" 2.1"); - }); - it("Counter.decorator with ignoreTopLevel", function () { const counter1 = new Counter({ ordered: true,