obsidian-plugin/dragonish_obsidian-heading-decorator
1
0
Fork 0
mirror of https://github.com/dragonish/obsidian-heading-decorator.git synced 2026-07-22 05:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(preview): fix render exception when heading contains inline code in live preview

Browse source 
Replace the line decoration.
This commit is contained in:
dragonish 2025-03-12 14:04:44 +08:00
parent f720bd1a1e
commit 0d4c4273dc
No known key found for this signature in database
GPG key ID: 6F42FA9E807A5177
2 changed files with 90 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/view.ts
View file

@ -203,14 +203,14 @@ export class HeadingViewPlugin implements PluginValue {
const headingClassName = isLivePreviwMode
? previewHeadingDecoratorClassName
: sourceHeadingDecoratorClassName;
const deco = Decoration.mark({
const deco = Decoration.line({
attributes: {
class: `${headingClassName} ${getPositionClassName(position)}`,
"data-heading-decorator": content,
"data-decorator-opacity": `${opacity}%`,
},
});
builder.add(line.from, line.to, deco);
builder.add(line.from, line.from, deco);
}
const newDecorations = builder.finish();

220
styles.css
View file

@ -49,251 +49,207 @@
/* preview start */
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator:not(
.cm-active .preview-custom-heading-decorator
.preview-custom-heading-decorator.after-heading-decorator:not(.cm-active):not(
:has(.cm-header.cm-formatting)
)::after {
content: attr(data-heading-decorator);
opacity: 20%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 10%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 20%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 30%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 40%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 50%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 60%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 70%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 80%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 90%;
}
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active .preview-custom-heading-decorator
)::before,
.cm-active
):not(:has(.cm-header.cm-formatting))::before,
.is-live-preview
.cm-line:not(:has(.cm-header.cm-formatting))
.preview-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active .preview-custom-heading-decorator
)::after {
.cm-active
):not(:has(.cm-header.cm-formatting))::after {
opacity: 100%;
}
/* preview end */
/* source start */
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator:not(
.cm-active
)::after {
content: attr(data-heading-decorator);
opacity: 20%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="10%"]:not(
.cm-active
)::after {
opacity: 10%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="20%"]:not(
.cm-active
)::after {
opacity: 20%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="30%"]:not(
.cm-active
)::after {
opacity: 30%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="40%"]:not(
.cm-active
)::after {
opacity: 40%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="50%"]:not(
.cm-active
)::after {
opacity: 50%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="60%"]:not(
.cm-active
)::after {
opacity: 60%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="70%"]:not(
.cm-active
)::after {
opacity: 70%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="80%"]:not(
.cm-active
)::after {
opacity: 80%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="90%"]:not(
.cm-active
)::after {
opacity: 90%;
}
.cm-formatting-header
> .source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.before-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active
)::before,
:not(.cm-formatting-header)
> .source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active .source-custom-heading-decorator
.source-custom-heading-decorator.after-heading-decorator[data-decorator-opacity="100%"]:not(
.cm-active
)::after {
opacity: 100%;
}