mirror of
https://github.com/dragonish/obsidian-heading-decorator.git
synced 2026-07-22 05:42:05 +00:00
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.
This commit is contained in:
dragonish
parent
0d4c4273dc
commit
dd6b92e792
5 changed files with 130 additions and 21 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
4
main.ts
4
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,
|
||||
|
|
|
|||
126
styles.css
126
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(
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue