tom/edentext
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduce formatting marks

Browse Source
This commit is contained in:
Steffen Becker committed 2026-05-28 17:39:34 +02:00
1 parent 416a405d0f
commit e03b1d04ec
8 files changed
+210 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/editor.css
+76
View File
@@ -156,6 +156,73 @@
height: 0;
}
/* Formatting marks (Toggle in extended toolbar).
Zero-width inline-block with visible overflow: the ¶ glyph renders just
past the last character without consuming line width — so right/center/
justify alignment of the actual text is preserved. The leading NBSP in
the content gives a small visual gap from the text. */
.paper.show-formatting-marks .tiptap p::after,
.paper.show-formatting-marks .tiptap h1::after,
.paper.show-formatting-marks .tiptap h2::after,
.paper.show-formatting-marks .tiptap h3::after {
content: '\00A0¶';
display: inline-block;
width: 0;
overflow: visible;
white-space: pre;
color: var(--color-primary);
opacity: 0.5;
font-family: var(--font-sans);
font-weight: 400;
user-select: none;
pointer-events: none;
}
.paper.show-formatting-marks .tiptap li > p::after {
content: '\00A0¶';
}
/* Empty block fix: when a paragraph/heading/li-paragraph contains only the
ProseMirror trailing-break BR, the inline ::after would otherwise render
on a second line below the BR, doubling the block's height and shifting
the page-break calculation. Pull ::after out of flow via absolute positioning. */
.paper.show-formatting-marks .tiptap p:has(> br.ProseMirror-trailingBreak:only-child),
.paper.show-formatting-marks .tiptap h1:has(> br.ProseMirror-trailingBreak:only-child),
.paper.show-formatting-marks .tiptap h2:has(> br.ProseMirror-trailingBreak:only-child),
.paper.show-formatting-marks .tiptap h3:has(> br.ProseMirror-trailingBreak:only-child),
.paper.show-formatting-marks .tiptap li > p:has(> br.ProseMirror-trailingBreak:only-child) {
position: relative;
}
.paper.show-formatting-marks .tiptap p:has(> br.ProseMirror-trailingBreak:only-child)::after,
.paper.show-formatting-marks .tiptap h1:has(> br.ProseMirror-trailingBreak:only-child)::after,
.paper.show-formatting-marks .tiptap h2:has(> br.ProseMirror-trailingBreak:only-child)::after,
.paper.show-formatting-marks .tiptap h3:has(> br.ProseMirror-trailingBreak:only-child)::after,
.paper.show-formatting-marks .tiptap li > p:has(> br.ProseMirror-trailingBreak:only-child)::after {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
}
.paper.show-formatting-marks .tiptap .pm-space-mark {
position: relative;
}
.paper.show-formatting-marks .tiptap .pm-space-mark::before {
content: '·';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
opacity: 0.55;
font-weight: 700;
pointer-events: none;
user-select: none;
}
/* Print styles: proper A4 pagination */
@media print {
.editor {
@@ -185,4 +252,13 @@
size: A4;
margin: 25.4mm;
}
.paper.show-formatting-marks .tiptap p::after,
.paper.show-formatting-marks .tiptap h1::after,
.paper.show-formatting-marks .tiptap h2::after,
.paper.show-formatting-marks .tiptap h3::after,
.paper.show-formatting-marks .tiptap li > p::after,
.paper.show-formatting-marks .tiptap .pm-space-mark::before {
content: none;
}
}