feat(notes): man kan se hvad man skriver
Release / Build and publish image (push) Failing after 10m0s
Release / Build and publish image (push) Failing after 10m0s
Formatering vises, mens man skriver. Overskrifter, fed, kursiv, kode, citater, punkter, #tags og [[links]]. Et spejl bag et gennemsigtigt tekstfelt — samme greb som hurtig tilføjelse bruger til at vise, hvad parseren forstod. En contenteditable ville lade teksten style direkte og ville også ødelægge fortryd, autokorrektur og IME. Det er en dårlig byttehandel i det ene sted i programmet, hvor nogen skriver en halv time i træk. Mærkerne bliver stående, dæmpede. Obsidian skjuler dem uden for den linje, markøren står i; at dæmpe dem altid er en mindre idé, der ikke flytter tekst under markøren mens den bevæger sig — og den overlever mødet med et tekstfelt. Overskrifter skifter vægt og farve, aldrig størrelse: en større skrift ville fylde flere linjer end tekstfeltet gør, og så skred alt nedenunder. Hele risikoen ved grebet er, at de to lag skal flugte tegn for tegn. Prøven måler det frem for at stole på det: skrifttype, linjehøjde, ombrydning, polstring og den faktiske højde af de to lag med samme tekst i. Undervejs: kursiv-passet slugte " og " efter et fed-udtryk, fordi den løse stjerne stadig var synlig for det. Hvert pas læser nu en kopi, hvor de tidligere pas' tegn er blændet ud. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Kristian Wind
co-authored by
Claude Opus 5
Claude Opus 5
parent
5f04fe56bc
commit
5757f06e7a
@@ -1954,3 +1954,49 @@ test('en note kan skrives, findes igen, og peger på det den nævner', async ({
|
||||
|
||||
expect(trouble).toEqual([]);
|
||||
});
|
||||
|
||||
test('noteeditoren viser formatering, og lagene flugter', async ({ page }) => {
|
||||
const trouble = watchForTrouble(page);
|
||||
await page.goto('/noter');
|
||||
|
||||
await page.getByRole('button', { name: 'Ny note' }).click();
|
||||
const body = page.getByLabel('Notens tekst');
|
||||
await body.fill(
|
||||
'# Overskrift\n\nDette er **fed** og *kursiv* og `kode`.\n\nHandler om #Firma og [[En anden note]].\n- et punkt\n> et citat'
|
||||
);
|
||||
|
||||
// The marks are still there — this is a mirror, not a renderer — but they are
|
||||
// drawn as what they mean.
|
||||
const mirror = page.locator('.mirror');
|
||||
await expect(mirror.locator('.bold')).toHaveText('**fed**');
|
||||
await expect(mirror.locator('.italic')).toHaveText('*kursiv*');
|
||||
await expect(mirror.locator('.code')).toHaveText('`kode`');
|
||||
await expect(mirror.locator('.tag')).toHaveText('#Firma');
|
||||
await expect(mirror.locator('.wikilink')).toHaveText('[[En anden note]]');
|
||||
await expect(mirror.locator('.h1')).toContainText('Overskrift');
|
||||
|
||||
// The whole risk of the technique: two layers that must line up character for
|
||||
// character. If they drift, the formatting slides away from the text as the
|
||||
// note grows, and it is unusable — so this measures rather than trusts.
|
||||
const drift = await page.evaluate(() => {
|
||||
const ta = document.querySelector('.paper textarea');
|
||||
const mi = document.querySelector('.paper .mirror');
|
||||
const a = getComputedStyle(ta), b = getComputedStyle(mi);
|
||||
return {
|
||||
font: a.fontSize === b.fontSize && a.fontFamily === b.fontFamily,
|
||||
line: a.lineHeight === b.lineHeight,
|
||||
wrap: a.whiteSpace === b.whiteSpace,
|
||||
padding: a.paddingTop === b.paddingTop && a.paddingLeft === b.paddingLeft,
|
||||
// And the rendered height, which is what actually proves it: the same text
|
||||
// laid out twice has to take the same room.
|
||||
heights: Math.abs(ta.scrollHeight - mi.scrollHeight)
|
||||
};
|
||||
});
|
||||
expect(drift.font, 'skrifttypen er ikke ens').toBe(true);
|
||||
expect(drift.line, 'linjehøjden er ikke ens').toBe(true);
|
||||
expect(drift.wrap, 'ombrydningen er ikke ens').toBe(true);
|
||||
expect(drift.padding, 'polstringen er ikke ens').toBe(true);
|
||||
expect(drift.heights, 'lagene fylder ikke det samme').toBeLessThanOrEqual(2);
|
||||
|
||||
expect(trouble).toEqual([]);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
/**
|
||||
* Just enough Markdown to see what you are writing.
|
||||
*
|
||||
* Not a renderer: the output is the same text, in the same order, with parts
|
||||
* wrapped so they can be styled. That matters because it sits behind a textarea
|
||||
* and has to line up with it character for character — a renderer that dropped
|
||||
* the `**` or reflowed a list would drift out of alignment on the first bold word.
|
||||
*
|
||||
* So the marks stay, dimmed. Obsidian hides them except in the line the cursor is
|
||||
* in; dimming them always is simpler, does not move text under the cursor as it
|
||||
* travels, and still lets you read a document at a glance. It is a smaller idea
|
||||
* that survives contact with a textarea.
|
||||
*/
|
||||
|
||||
const INLINE = [
|
||||
// Order matters: the longer fence first, or `**bold**` is read as two italics.
|
||||
{ kind: 'code', re: /`([^`\n]+)`/g },
|
||||
{ kind: 'bold', re: /\*\*([^*\n]+)\*\*/g },
|
||||
{ kind: 'italic', re: /\*([^*\n]+)\*/g },
|
||||
{ kind: 'tag', re: /(?:^|(?<=\s))#[\p{L}\p{N}_-]{1,64}/gu },
|
||||
{ kind: 'wikilink', re: /\[\[[^\]\n]{1,200}\]\]/g }
|
||||
];
|
||||
|
||||
/**
|
||||
* segmentsOf splits one line into pieces, each with the kind it should be drawn
|
||||
* as. A piece with no kind is ordinary text.
|
||||
*/
|
||||
function inlineSegments(line) {
|
||||
const marks = [];
|
||||
|
||||
// Each pass reads a copy with the earlier passes' characters blanked out.
|
||||
//
|
||||
// Skipping overlaps after the fact is not enough, and the failure is subtle:
|
||||
// after `**fed**` is claimed as bold, a plain overlap check still lets the
|
||||
// italic pass start at the leftover `*` and run to the next one — swallowing
|
||||
// " og " and leaving the actual italic word unmarked. Blanking means a later
|
||||
// pass cannot see the characters at all.
|
||||
let masked = line;
|
||||
const blank = (start, end) =>
|
||||
(masked = masked.slice(0, start) + '\u0000'.repeat(end - start) + masked.slice(end));
|
||||
|
||||
for (const { kind, re } of INLINE) {
|
||||
re.lastIndex = 0;
|
||||
let m;
|
||||
while ((m = re.exec(masked))) {
|
||||
marks.push({ kind, start: m.index, end: m.index + m[0].length });
|
||||
}
|
||||
for (const mark of marks) blank(mark.start, mark.end);
|
||||
}
|
||||
marks.sort((a, b) => a.start - b.start);
|
||||
|
||||
const out = [];
|
||||
let at = 0;
|
||||
for (const mark of marks) {
|
||||
if (mark.start > at) out.push({ text: line.slice(at, mark.start) });
|
||||
out.push({ text: line.slice(mark.start, mark.end), kind: mark.kind });
|
||||
at = mark.end;
|
||||
}
|
||||
if (at < line.length) out.push({ text: line.slice(at) });
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* linesOf turns a body into lines, each with a block kind and its inline pieces.
|
||||
* Every line is returned, blank ones included, or the mirror would be one line
|
||||
* short of the textarea for every empty line in the note.
|
||||
*/
|
||||
export function linesOf(body) {
|
||||
return body.split('\n').map((line) => {
|
||||
const heading = /^(#{1,6})\s/.exec(line);
|
||||
if (heading) {
|
||||
return { block: `h${heading[1].length}`, parts: inlineSegments(line) };
|
||||
}
|
||||
if (/^\s*[-*+]\s/.test(line)) return { block: 'list', parts: inlineSegments(line) };
|
||||
if (/^\s*\d+\.\s/.test(line)) return { block: 'list', parts: inlineSegments(line) };
|
||||
if (/^\s*>\s?/.test(line)) return { block: 'quote', parts: inlineSegments(line) };
|
||||
return { block: 'p', parts: inlineSegments(line) };
|
||||
});
|
||||
}
|
||||
@@ -14,6 +14,7 @@
|
||||
import { api, humanMessage } from '$lib/api.js';
|
||||
import { app } from '$lib/stores.svelte.js';
|
||||
import { t } from '$lib/i18n.svelte.js';
|
||||
import { linesOf } from '$lib/markdown.js';
|
||||
|
||||
let notes = $state([]);
|
||||
let selected = $state(null);
|
||||
@@ -101,6 +102,12 @@
|
||||
|
||||
// What the note points at, for the panel under the editor.
|
||||
let links = $derived(selected?.links ?? []);
|
||||
|
||||
// The styled twin of what is in the textarea. Recomputed on every keystroke,
|
||||
// which sounds expensive and is not: it is a split and a handful of regexes
|
||||
// over a page of text, and it runs in the same frame as the character that
|
||||
// caused it.
|
||||
let lines = $derived(linesOf(draft));
|
||||
</script>
|
||||
|
||||
<svelte:head><title>{t('notes.title')} · verdande</title></svelte:head>
|
||||
@@ -140,14 +147,33 @@
|
||||
|
||||
<section class="editor">
|
||||
{#if selected}
|
||||
<textarea
|
||||
bind:value={draft}
|
||||
oninput={typed}
|
||||
onblur={save}
|
||||
spellcheck="true"
|
||||
aria-label={t('notes.body')}
|
||||
placeholder={t('notes.placeholder')}
|
||||
></textarea>
|
||||
<!-- The mirror sits behind the textarea and must match it exactly: same font,
|
||||
same size, same padding, same wrapping. Any difference shows up as
|
||||
formatting that drifts away from the text as the note grows.
|
||||
|
||||
A contenteditable would let the text be styled directly and would also
|
||||
break undo, autocorrect and IME input — a bad trade in the one place in
|
||||
this program where somebody writes for half an hour at a stretch. -->
|
||||
<div class="paper">
|
||||
<div class="mirror" aria-hidden="true">
|
||||
{#each lines as line}
|
||||
<div class={line.block}>
|
||||
{#each line.parts as part}
|
||||
{#if part.kind}<span class={part.kind}>{part.text}</span>{:else}{part.text}{/if}
|
||||
{/each}{#if !line.parts.length} {/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
bind:value={draft}
|
||||
oninput={typed}
|
||||
onblur={save}
|
||||
spellcheck="true"
|
||||
aria-label={t('notes.body')}
|
||||
placeholder={t('notes.placeholder')}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<span class="hint">{saving ? t('notes.saving') : t('notes.saved')}</span>
|
||||
@@ -261,23 +287,94 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
/* Everything below exists to keep two layers in lockstep. The shared rules are
|
||||
set on both at once on purpose: a font-size on one and not the other is a
|
||||
whole line of drift by the bottom of a long note. */
|
||||
.paper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 50vh;
|
||||
resize: none;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.paper textarea,
|
||||
.paper .mirror {
|
||||
font: inherit;
|
||||
font-size: var(--text-base, 1rem);
|
||||
line-height: 1.6;
|
||||
padding: var(--s2) 0;
|
||||
border: 0;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
word-break: normal;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
textarea {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
resize: none;
|
||||
background: none;
|
||||
/* Transparent, so what is read is the mirror underneath. The caret keeps its
|
||||
own colour or there would be nothing to type against. */
|
||||
color: transparent;
|
||||
caret-color: var(--ink);
|
||||
}
|
||||
|
||||
textarea::selection {
|
||||
background: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mirror {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
color: var(--ink);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Headings change weight and colour, never size: a larger font would take more
|
||||
lines than the textarea does and everything below it would slide. */
|
||||
.mirror .h1,
|
||||
.mirror .h2,
|
||||
.mirror .h3,
|
||||
.mirror .h4,
|
||||
.mirror .h5,
|
||||
.mirror .h6 {
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.mirror .h1 {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.mirror .quote {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.mirror .bold {
|
||||
font-weight: 620;
|
||||
}
|
||||
|
||||
.mirror .italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mirror .code {
|
||||
font-family: var(--mono, ui-monospace, monospace);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.mirror .tag,
|
||||
.mirror .wikilink {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user