| null = null;
const AUTOSAVE_DEBOUNCE_MS = 1000;
+ const OUTLINE_REFRESH_DEBOUNCE_MS = 200;
function scheduleAutosave(): void {
if (autosaveTimer !== null) {
@@ -212,8 +218,37 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
}
}
+ function cancelOutlineRefresh(): void {
+ if (outlineRefreshTimer !== null) {
+ clearTimeout(outlineRefreshTimer);
+ outlineRefreshTimer = null;
+ }
+ }
+
+ function applyOutlineUpdate(state: MarkdownWorkspaceState, nextOutline: MarkdownWorkspaceState['outline']): void {
+ if (areOutlineItemsEqual(state.outline, nextOutline)) {
+ return;
+ }
+ state.outline = nextOutline;
+ if (!state.outline.some((item) => item.id === state.activeHeadingId)) {
+ state.activeHeadingId = state.outline[0]?.id ?? null;
+ }
+ markdownTocHandle?.refresh(state.outline, state.activeHeadingId);
+ }
+
+ function scheduleOutlineRefresh(state: MarkdownWorkspaceState): void {
+ if (outlineRefreshTimer !== null) {
+ clearTimeout(outlineRefreshTimer);
+ }
+ outlineRefreshTimer = setTimeout(() => {
+ outlineRefreshTimer = null;
+ applyOutlineUpdate(state, extractMarkdownOutline(state.draftContent));
+ }, OUTLINE_REFRESH_DEBOUNCE_MS);
+ }
+
function disposeHandles(): void {
cancelAutosave();
+ cancelOutlineRefresh();
markdownEditorHandle?.destroy();
markdownEditorHandle = undefined;
markdownTocHandle?.dispose();
@@ -235,7 +270,6 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
options: { keepDraft?: boolean } = {}
): void {
const nextDraftContent = options.keepDraft ? state.draftContent : content;
- state.sourceContent = content;
state.fullDocumentContent = content;
state.draftContent = nextDraftContent;
state.outline = extractMarkdownOutline(content);
@@ -279,15 +313,13 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
function getState(payload: RenderPayload): MarkdownWorkspaceState {
const cleanedContent = stripReadStatusLine(payload.content);
- if (!workspaceState || workspaceState.filePath !== payload.filePath || workspaceState.sourceContent !== cleanedContent) {
+ if (!workspaceState || workspaceState.filePath !== payload.filePath || workspaceState.fullDocumentContent !== cleanedContent) {
const outline = extractMarkdownOutline(cleanedContent);
workspaceState = {
filePath: payload.filePath,
- sourceContent: cleanedContent,
fullDocumentContent: cleanedContent,
draftContent: cleanedContent,
outline,
- mode: 'edit',
dirty: false,
activeHeadingId: outline[0]?.id ?? null,
pendingAnchor: null,
@@ -321,6 +353,13 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
const notice = [state.error, state.notice]
.find((value): value is string => typeof value === 'string' && value.trim().length > 0);
+ // While loading the full document, suppress the editor entirely so the
+ // user never sees the partial source briefly (especially in raw mode,
+ // where it would otherwise read as the content actually being edited).
+ const mainContent = state.loadingDocument
+ ? 'Loading full document…
'
+ : renderMarkdownEditorShell({ view: state.editorView });
+
return {
notice,
html: `
@@ -328,7 +367,7 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
${tocHtml}
- ${renderMarkdownEditorShell({ view: state.editorView })}
+ ${mainContent}
@@ -404,7 +443,17 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
return extractMarkdownOutline(readPayloadContent(payload)).map((item) => ({ id: item.id, text: item.text }));
}
- function findHeading(anchor: string): HTMLElement | null {
+ function resolveOutlineHeading(anchor: string): MarkdownWorkspaceState['outline'][number] | null {
+ const trimmedAnchor = anchor.trim();
+ if (!workspaceState || !trimmedAnchor) {
+ return null;
+ }
+
+ const slug = slugifyMarkdownHeading(trimmedAnchor);
+ return workspaceState.outline.find((item) => item.id === trimmedAnchor || item.id === slug) ?? null;
+ }
+
+ function findDomHeading(anchor: string): HTMLElement | null {
const trimmedAnchor = anchor.trim();
if (!trimmedAnchor) {
return null;
@@ -414,7 +463,16 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
}
function scrollHeadingIntoView(anchor: string): boolean {
- const heading = findHeading(anchor);
+ const outlineHeading = resolveOutlineHeading(anchor);
+ if (outlineHeading && typeof outlineHeading.line === 'number') {
+ markdownEditorHandle?.revealLine(outlineHeading.line, outlineHeading.id);
+ if (workspaceState) {
+ workspaceState.activeHeadingId = outlineHeading.id;
+ }
+ return true;
+ }
+
+ const heading = findDomHeading(anchor);
if (!heading) {
return false;
}
@@ -522,11 +580,10 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
const range = parseReadRange(payload.content);
if (!range?.isPartial) {
if (options.keepEditMode) {
- state.mode = 'edit';
state.editorView = 'markdown';
state.notice = null;
state.error = null;
- state.draftContent = state.sourceContent;
+ state.draftContent = state.fullDocumentContent;
state.dirty = false;
dependencies.rerender();
}
@@ -553,9 +610,8 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
nextState.loadingDocument = false;
nextState.notice = null;
nextState.error = null;
- syncStateFromContent(nextState, nextState.sourceContent);
+ syncStateFromContent(nextState, nextState.fullDocumentContent);
if (options.keepEditMode) {
- nextState.mode = 'edit';
nextState.editorView = 'markdown';
dependencies.rerender();
}
@@ -631,7 +687,6 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
return;
}
- state.mode = 'edit';
state.draftContent = state.fullDocumentContent;
state.dirty = false;
state.editorView = 'markdown';
@@ -678,7 +733,8 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
state.notice = null;
try {
- const blocks = computeEditBlocks(state.fullDocumentContent, state.draftContent);
+ const savedContent = state.draftContent;
+ const blocks = computeEditBlocks(state.fullDocumentContent, savedContent);
if (blocks.length === 0) {
state.saving = false;
state.saveIndicator = 'idle';
@@ -728,17 +784,18 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
throw err;
}
- state.fullDocumentContent = state.draftContent;
- state.sourceContent = state.draftContent;
- state.outline = extractMarkdownOutline(state.sourceContent);
- state.dirty = false;
+ const hasNewUnsavedDraft = state.draftContent !== savedContent;
+ state.fullDocumentContent = savedContent;
+ if (!hasNewUnsavedDraft) {
+ state.outline = extractMarkdownOutline(state.fullDocumentContent);
+ }
+ state.dirty = hasNewUnsavedDraft;
state.saving = false;
- state.saveIndicator = 'saved';
+ state.saveIndicator = hasNewUnsavedDraft ? 'idle' : 'saved';
if (!state.outline.some((item) => item.id === state.activeHeadingId)) {
state.activeHeadingId = state.outline[0]?.id ?? null;
}
- const savedContent = state.draftContent;
const currentPayload = dependencies.getCurrentPayload();
if (currentPayload) {
const statusLineMatch = currentPayload.content.match(/^(\[Reading [^\]]+\]\r?\n(?:\r?\n)?)/);
@@ -750,13 +807,17 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
if (revert) {
revert.disabled = !isUndoAvailable(state);
}
- flashSaveStatus('Saved', 'saved', 1800, () => {
- if (!state.dirty && !state.saving) {
- state.saveIndicator = 'idle';
- return true;
- }
- return false;
- });
+ if (hasNewUnsavedDraft) {
+ scheduleAutosave();
+ } else {
+ flashSaveStatus('Saved', 'saved', 1800, () => {
+ if (!state.dirty && !state.saving) {
+ state.saveIndicator = 'idle';
+ return true;
+ }
+ return false;
+ });
+ }
dependencies.trackUiEvent?.('markdown_saved', {
file_extension: getFileExtensionForAnalytics(state.filePath),
blocks: blocks.length,
@@ -838,7 +899,7 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
action: 'save_mine',
});
// Re-run saveDocument. computeEditBlocks will diff against
- // the fresh sourceContent that keepDraft: true left in place,
+ // the fresh disk baseline that keepDraft: true left in place,
// so hunks the user actually modified win over disk on
// those specific lines and disk-only changes elsewhere are
// preserved.
@@ -919,6 +980,9 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
currentFilePath: payload.filePath,
searchLinks: (query) => searchLinkTargets(payload.filePath, query),
loadHeadings: (targetPath) => loadLinkHeadings(payload.filePath, targetPath),
+ onOpenLink: (href) => {
+ void navigateLink(payload, href);
+ },
onChange: (value) => {
state.draftContent = value;
state.dirty = value !== state.fullDocumentContent;
@@ -932,14 +996,7 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
if (state.dirty) {
scheduleAutosave();
}
- const nextOutline = extractMarkdownOutline(value);
- if (!areOutlineItemsEqual(state.outline, nextOutline)) {
- state.outline = nextOutline;
- if (!state.outline.some((item) => item.id === state.activeHeadingId)) {
- state.activeHeadingId = state.outline[0]?.id ?? null;
- }
- markdownTocHandle?.refresh(state.outline, state.activeHeadingId);
- }
+ scheduleOutlineRefresh(state);
if (state.dirty && state.saveIndicator === 'saved') {
state.saveIndicator = 'idle';
}
@@ -977,22 +1034,6 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
void requestFullscreen();
});
- if (wrapper) {
- wrapper.addEventListener('click', (event) => {
- const target = event.target as HTMLElement | null;
- const link = target?.closest('a[href]');
- if (!link || !link.closest('.markdown-doc')) {
- return;
- }
- const href = link.getAttribute('href');
- if (!href) {
- return;
- }
-
- event.preventDefault();
- void navigateLink(payload, href);
- });
- }
const tocShell = document.querySelector('.document-outline-shell') as HTMLElement | null;
if (tocShell && wrapper) {
@@ -1017,10 +1058,41 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
function getCopyText(payload: RenderPayload): string | null {
const state = getState(payload);
- const source = state.draftContent;
- return state.editorView === 'raw'
- ? source
- : (getRenderedMarkdownCopyText(source) || source);
+ return state.draftContent;
+ }
+
+ function expandPartialPayload(payload: RenderPayload, direction: 'before' | 'after', loadedContent: string): RenderPayload {
+ const state = getState(payload);
+ const range = parseReadRange(payload.content);
+ if (!range?.isPartial) {
+ return payload;
+ }
+
+ const cleanLoaded = stripReadStatusLine(loadedContent);
+ const nextBaseline = direction === 'before'
+ ? joinDocumentChunks(cleanLoaded, state.fullDocumentContent)
+ : joinDocumentChunks(state.fullDocumentContent, cleanLoaded);
+ const nextDraft = direction === 'before'
+ ? joinDocumentChunks(cleanLoaded, state.draftContent)
+ : joinDocumentChunks(state.draftContent, cleanLoaded);
+ const newFrom = direction === 'before' ? 1 : range.fromLine;
+ const newTo = direction === 'after' ? range.totalLines : range.toLine;
+ const lineCount = newTo - newFrom + 1;
+ const remaining = range.totalLines - newTo;
+ const isStillPartial = newFrom > 1 || newTo < range.totalLines;
+ const statusLine = isStillPartial
+ ? `[Reading ${lineCount} lines from ${newFrom === 1 ? 'start' : `line ${newFrom}`} (total: ${range.totalLines} lines, ${remaining} remaining)]\n`
+ : '';
+
+ state.fullDocumentContent = nextBaseline;
+ state.draftContent = nextDraft;
+ state.outline = extractMarkdownOutline(nextDraft);
+ state.dirty = nextDraft !== nextBaseline;
+ if (!state.outline.some((item) => item.id === state.activeHeadingId)) {
+ state.activeHeadingId = state.outline[0]?.id ?? null;
+ }
+
+ return { ...payload, content: statusLine + nextBaseline };
}
async function handleInlineExitFromFullscreen(originalPayload?: RenderPayload): Promise {
@@ -1046,7 +1118,7 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
buildBody,
clear,
disposeHandles,
- ensureCompletePayload,
+ expandPartialPayload,
getCopyText,
getState,
handleInlineExitFromFullscreen,
@@ -1058,7 +1130,6 @@ export function createMarkdownController(dependencies: MarkdownControllerDepende
requestEditMode,
requestFullscreen,
saveDocument,
- setEditorView,
};
}
diff --git a/src/ui/file-preview/src/markdown/editor.ts b/src/ui/file-preview/src/markdown/editor.ts
index 0188c484..9cb157fa 100644
--- a/src/ui/file-preview/src/markdown/editor.ts
+++ b/src/ui/file-preview/src/markdown/editor.ts
@@ -1,9 +1,7 @@
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import Image from '@tiptap/extension-image';
-import { Markdown } from 'tiptap-markdown';
-import { restoreWikiLinks, rewriteWikiLinks } from './linking.js';
-import { createSlugTracker } from './slugify.js';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { markdown } from '@codemirror/lang-markdown';
+import { EditorSelection, EditorState, RangeSetBuilder } from '@codemirror/state';
+import { Decoration, EditorView, ViewPlugin, WidgetType, keymap, type DecorationSet } from '@codemirror/view';
export type MarkdownEditorView = 'raw' | 'markdown';
@@ -19,6 +17,104 @@ export interface MarkdownLinkHeading {
text: string;
}
+interface MarkdownLinkRange {
+ from: number;
+ labelFrom: number;
+ labelTo: number;
+ to: number;
+ label: string;
+ href: string;
+ kind: 'markdown' | 'wiki';
+}
+
+function isEscaped(text: string, index: number): boolean {
+ let slashCount = 0;
+ for (let current = index - 1; current >= 0 && text[current] === '\\'; current -= 1) {
+ slashCount += 1;
+ }
+ return slashCount % 2 === 1;
+}
+
+function readBareMarkdownHref(value: string): string {
+ const trimmed = value.trim();
+ if (trimmed.startsWith('<')) {
+ const closeIndex = trimmed.indexOf('>');
+ return closeIndex >= 0 ? trimmed.slice(1, closeIndex).trim() : trimmed;
+ }
+
+ let depth = 0;
+ for (let index = 0; index < trimmed.length; index += 1) {
+ const char = trimmed[index];
+ if (char === '(' && !isEscaped(trimmed, index)) {
+ depth += 1;
+ } else if (char === ')' && depth > 0 && !isEscaped(trimmed, index)) {
+ depth -= 1;
+ } else if (/\s/.test(char) && depth === 0) {
+ return trimmed.slice(0, index);
+ }
+ }
+
+ return trimmed;
+}
+
+function findMarkdownLinksInLine(text: string): Array<{ start: number; end: number; label: string; href: string }> {
+ const links: Array<{ start: number; end: number; label: string; href: string }> = [];
+ let index = 0;
+
+ while (index < text.length) {
+ const start = text.indexOf('[', index);
+ if (start < 0) {
+ break;
+ }
+ if (text[start - 1] === '!' || isEscaped(text, start)) {
+ index = start + 1;
+ continue;
+ }
+
+ let labelEnd = start + 1;
+ while (labelEnd < text.length && (text[labelEnd] !== ']' || isEscaped(text, labelEnd))) {
+ if (text[labelEnd] === '\n') {
+ break;
+ }
+ labelEnd += 1;
+ }
+ if (text[labelEnd] !== ']' || text[labelEnd + 1] !== '(') {
+ index = start + 1;
+ continue;
+ }
+
+ let depth = 1;
+ let hrefEnd = labelEnd + 2;
+ while (hrefEnd < text.length && depth > 0) {
+ const char = text[hrefEnd];
+ if (char === '\n') {
+ break;
+ }
+ if (char === '(' && !isEscaped(text, hrefEnd)) {
+ depth += 1;
+ } else if (char === ')' && !isEscaped(text, hrefEnd)) {
+ depth -= 1;
+ }
+ hrefEnd += 1;
+ }
+ if (depth !== 0) {
+ index = start + 1;
+ continue;
+ }
+
+ const hrefContent = text.slice(labelEnd + 2, hrefEnd - 1);
+ links.push({
+ start,
+ end: hrefEnd,
+ label: text.slice(start + 1, labelEnd),
+ href: readBareMarkdownHref(hrefContent),
+ });
+ index = hrefEnd;
+ }
+
+ return links;
+}
+
export interface MarkdownEditorHandle {
destroy: () => void;
focus: () => void;
@@ -95,7 +191,7 @@ export function renderMarkdownEditorShell(options: {
return `
- ${isMarkdownView ? `` : ''}
+ ${isMarkdownView ? `` : ''}
@@ -111,35 +207,254 @@ function applyRawTab(textarea: HTMLTextAreaElement): void {
textarea.selectionEnd = start + 1;
}
-/**
- * Walk the prose-mirror DOM and assign slug-based id attributes to headings
- * so the outline's revealLine can scroll to them. Re-run after every update;
- * no-op writes are skipped so identical ids don't dirty the style engine.
- */
-function syncHeadingIds(root: HTMLElement): void {
- const nextSlug = createSlugTracker();
- const headings = Array.from(root.querySelectorAll('h1, h2, h3, h4, h5, h6'));
- for (const heading of headings) {
- const text = heading.textContent?.trim() ?? '';
- if (!text) {
- if (heading.hasAttribute('id')) {
- heading.removeAttribute('id');
- }
- if (heading.hasAttribute('data-heading-id')) {
- heading.removeAttribute('data-heading-id');
+function isInlineMarkerAt(source: string, index: number, marker: string): boolean {
+ if (!source.startsWith(marker, index)) {
+ return false;
+ }
+ if (marker === '*') {
+ return source[index - 1] !== '*' && source[index + 1] !== '*';
+ }
+ return true;
+}
+
+class BulletWidget extends WidgetType {
+ eq(other: WidgetType): boolean {
+ return other instanceof BulletWidget;
+ }
+ toDOM(): HTMLElement {
+ const span = document.createElement('span');
+ span.className = 'cm-md-bullet';
+ span.textContent = '•';
+ return span;
+ }
+ // CodeMirror's default is to treat events from inside a widget as belonging
+ // to it (so clicks won't move the caret). We want clicks on the bullet to
+ // place the caret at the underlying marker position, like normal text.
+ ignoreEvent(): boolean {
+ return false;
+ }
+}
+
+const SHARED_BULLET_WIDGET = new BulletWidget();
+
+const UNORDERED_LIST_PREFIX = /^(\s*)[-*+]\s+/;
+const ORDERED_LIST_PREFIX = /^\s*\d+[.)]\s+/;
+const BLOCKQUOTE_PREFIX = /^\s*>\s?/;
+const HORIZONTAL_RULE_LINE = /^\s*(?:-{3,}|\*{3,}|_{3,})\s*$/;
+
+// Order matters: longer prefixes first so `**` is matched before `*`.
+const SPANNING_WRAPPER_KINDS: ReadonlyArray<{ prefix: string; suffix: string; className: string }> = [
+ { prefix: '**', suffix: '**', className: 'cm-md-strong-text' },
+ { prefix: '~~', suffix: '~~', className: 'cm-md-strike-text' },
+ { prefix: '*', suffix: '*', className: 'cm-md-emphasis-text' },
+ { prefix: '`', suffix: '`', className: 'cm-md-inline-code-text' },
+];
+
+interface MarkerRange {
+ from: number;
+ to: number;
+ className?: string;
+ widget?: WidgetType;
+}
+
+function buildMarkdownLineDecorations(view: EditorView): DecorationSet {
+ const builder = new RangeSetBuilder();
+ const addAbsoluteMark = (
+ ranges: MarkerRange[],
+ from: number,
+ to: number,
+ className: string
+ ): void => {
+ if (to > from) {
+ ranges.push({ from, to, className });
+ }
+ };
+ const addMark = (
+ ranges: MarkerRange[],
+ lineFrom: number,
+ from: number,
+ to: number,
+ className: string
+ ): void => {
+ if (to > from) {
+ ranges.push({ from: lineFrom + from, to: lineFrom + to, className });
+ }
+ };
+
+ const collectSpanningWrapperRanges = (): MarkerRange[] => {
+ const source = view.state.doc.toString();
+ const ranges: MarkerRange[] = [];
+ // Single linear scan that recognizes all wrapper kinds at once. Order
+ // matters only for length tie-breaks (longer markers first); `*` vs `**`
+ // is already disambiguated by isInlineMarkerAt's neighbor check.
+ const opens: Array = SPANNING_WRAPPER_KINDS.map(() => null);
+ let index = 0;
+ while (index < source.length) {
+ let consumed = 0;
+ for (let kind = 0; kind < SPANNING_WRAPPER_KINDS.length; kind += 1) {
+ const { prefix, suffix, className } = SPANNING_WRAPPER_KINDS[kind];
+ const openPos = opens[kind];
+ if (openPos === null) {
+ if (isInlineMarkerAt(source, index, prefix)) {
+ opens[kind] = index;
+ consumed = prefix.length;
+ break;
+ }
+ continue;
+ }
+ if (isInlineMarkerAt(source, index, suffix)) {
+ const contentFrom = openPos + prefix.length;
+ const contentTo = index;
+ if (source.slice(contentFrom, contentTo).includes('\n')) {
+ addAbsoluteMark(ranges, openPos, contentFrom, 'cm-md-hidden-marker');
+ let line = view.state.doc.lineAt(contentFrom);
+ while (line.from <= contentTo) {
+ addAbsoluteMark(
+ ranges,
+ Math.max(contentFrom, line.from),
+ Math.min(contentTo, line.to),
+ className
+ );
+ if (line.to >= contentTo || line.number >= view.state.doc.lines) {
+ break;
+ }
+ line = view.state.doc.line(line.number + 1);
+ }
+ addAbsoluteMark(ranges, contentTo, index + suffix.length, 'cm-md-hidden-marker');
+ }
+ opens[kind] = null;
+ consumed = suffix.length;
+ break;
+ }
}
- continue;
+ index += consumed > 0 ? consumed : 1;
+ }
+ return ranges;
+ };
+
+ const spanningInlineRanges = collectSpanningWrapperRanges();
+
+ const collectInlineRanges = (text: string, lineFrom: number): MarkerRange[] => {
+ const ranges: MarkerRange[] = [];
+ for (const match of text.matchAll(/\[([^\]\n]+)\]\(([^)\n]+)\)/g)) {
+ const start = match.index ?? 0;
+ const label = match[1] ?? '';
+ if (text[start - 1] === '!' || label.startsWith('![')) {
+ continue;
+ }
+ addMark(ranges, lineFrom, start, start + 1, 'cm-md-hidden-marker');
+ addMark(ranges, lineFrom, start + 1, start + 1 + label.length, 'cm-md-link-text');
+ addMark(ranges, lineFrom, start + 1 + label.length, start + match[0].length, 'cm-md-hidden-marker');
+ }
+ for (const match of text.matchAll(/\[\[([^\]\n]+)\]\]/g)) {
+ const start = match.index ?? 0;
+ const body = match[1] ?? '';
+ const pipeIndex = body.lastIndexOf('|');
+ const labelStart = pipeIndex >= 0 ? pipeIndex + 1 : 0;
+ const label = body.slice(labelStart);
+ addMark(ranges, lineFrom, start, start + 2, 'cm-md-hidden-marker');
+ if (labelStart > 0) {
+ addMark(ranges, lineFrom, start + 2, start + 2 + labelStart, 'cm-md-hidden-marker');
+ }
+ addMark(ranges, lineFrom, start + 2 + labelStart, start + 2 + labelStart + label.length, 'cm-md-link-text');
+ addMark(ranges, lineFrom, start + 2 + labelStart + label.length, start + match[0].length, 'cm-md-hidden-marker');
+ }
+ for (const match of text.matchAll(/(`+)([^`\n]+)\1/g)) {
+ const start = match.index ?? 0;
+ const ticks = match[1]?.length ?? 1;
+ addMark(ranges, lineFrom, start, start + ticks, 'cm-md-hidden-marker');
+ addMark(ranges, lineFrom, start + ticks, start + match[0].length - ticks, 'cm-md-inline-code-text');
+ addMark(ranges, lineFrom, start + match[0].length - ticks, start + match[0].length, 'cm-md-hidden-marker');
+ }
+ for (const match of text.matchAll(/\*\*([^*\n]+)\*\*/g)) {
+ const start = match.index ?? 0;
+ addMark(ranges, lineFrom, start, start + 2, 'cm-md-hidden-marker');
+ addMark(ranges, lineFrom, start + 2, start + match[0].length - 2, 'cm-md-strong-text');
+ addMark(ranges, lineFrom, start + match[0].length - 2, start + match[0].length, 'cm-md-hidden-marker');
}
- const headingId = nextSlug(text);
- if (heading.id !== headingId) {
- heading.id = headingId;
+ for (const match of text.matchAll(/~~([^~\n]+)~~/g)) {
+ const start = match.index ?? 0;
+ addMark(ranges, lineFrom, start, start + 2, 'cm-md-hidden-marker');
+ addMark(ranges, lineFrom, start + 2, start + match[0].length - 2, 'cm-md-strike-text');
+ addMark(ranges, lineFrom, start + match[0].length - 2, start + match[0].length, 'cm-md-hidden-marker');
}
- if (heading.getAttribute('data-heading-id') !== headingId) {
- heading.setAttribute('data-heading-id', headingId);
+ for (const match of text.matchAll(/(^|[^*])\*([^*\n]+)\*/g)) {
+ const start = (match.index ?? 0) + (match[1]?.length ?? 0);
+ addMark(ranges, lineFrom, start, start + 1, 'cm-md-hidden-marker');
+ addMark(ranges, lineFrom, start + 1, start + match[0].length - (match[1]?.length ?? 0) - 1, 'cm-md-emphasis-text');
+ addMark(ranges, lineFrom, start + match[0].length - (match[1]?.length ?? 0) - 1, start + match[0].length - (match[1]?.length ?? 0), 'cm-md-hidden-marker');
+ }
+ return ranges.sort((left, right) => left.from - right.from || left.to - right.to);
+ };
+
+ for (const { from, to } of view.visibleRanges) {
+ let line = view.state.doc.lineAt(from);
+ while (line.from <= to) {
+ const text = line.text;
+ const headingMatch = /^(#{1,6})\s+/.exec(text);
+ let className = '';
+ const markerRanges: MarkerRange[] = [];
+ if (headingMatch) {
+ className = `cm-md-heading cm-md-heading-${headingMatch[1].length}`;
+ addMark(markerRanges, line.from, 0, headingMatch[0].length, 'cm-md-hidden-marker');
+ } else if (BLOCKQUOTE_PREFIX.test(text)) {
+ className = 'cm-md-quote';
+ const marker = text.match(BLOCKQUOTE_PREFIX);
+ addMark(markerRanges, line.from, 0, marker?.[0].length ?? 0, 'cm-md-hidden-marker');
+ } else {
+ const unorderedMatch = UNORDERED_LIST_PREFIX.exec(text);
+ if (unorderedMatch) {
+ className = 'cm-md-list cm-md-list-unordered';
+ const markerStart = unorderedMatch[1].length;
+ markerRanges.push({
+ from: line.from + markerStart,
+ to: line.from + markerStart + 1,
+ widget: SHARED_BULLET_WIDGET,
+ });
+ } else if (ORDERED_LIST_PREFIX.test(text)) {
+ className = 'cm-md-list cm-md-list-ordered';
+ } else if (HORIZONTAL_RULE_LINE.test(text)) {
+ className = 'cm-md-rule';
+ }
+ }
+
+ if (className) {
+ builder.add(line.from, line.from, Decoration.line({ class: className }));
+ }
+ markerRanges.push(...spanningInlineRanges.filter((range) => range.to > line.from && range.from < line.to));
+ markerRanges.push(...collectInlineRanges(text, line.from));
+ for (const range of markerRanges.sort((left, right) => left.from - right.from || left.to - right.to)) {
+ if (range.widget) {
+ builder.add(range.from, range.to, Decoration.replace({ widget: range.widget }));
+ } else if (range.className) {
+ builder.add(range.from, range.to, Decoration.mark({ class: range.className }));
+ }
+ }
+ if (line.to >= to || line.number >= view.state.doc.lines) {
+ break;
+ }
+ line = view.state.doc.line(line.number + 1);
}
}
+ return builder.finish();
}
+const markdownLinePreviewPlugin = ViewPlugin.fromClass(class {
+ decorations: DecorationSet;
+
+ constructor(view: EditorView) {
+ this.decorations = buildMarkdownLineDecorations(view);
+ }
+
+ update(update: { docChanged: boolean; viewportChanged: boolean; view: EditorView }) {
+ if (update.docChanged || update.viewportChanged) {
+ this.decorations = buildMarkdownLineDecorations(update.view);
+ }
+ }
+}, {
+ decorations: (plugin) => plugin.decorations,
+});
+
export function mountMarkdownEditor(options: {
target: HTMLElement;
value: string;
@@ -148,6 +463,7 @@ export function mountMarkdownEditor(options: {
currentFilePath: string;
searchLinks?: (query: string) => Promise;
loadHeadings?: (filePath: string) => Promise;
+ onOpenLink?: (href: string) => void | Promise;
onChange: (value: string) => void;
onBlur?: () => void;
}): MarkdownEditorHandle {
@@ -177,86 +493,304 @@ export function mountMarkdownEditor(options: {
if (options.view === 'markdown') {
options.target.replaceChildren();
+ let suppressChange = false;
+ let positionToolbar: (preferredPoint?: { x: number; y: number }) => void = () => {};
+ let activePopoverLink: MarkdownLinkRange | null = null;
+ let popoverHideTimer: ReturnType | null = null;
+ const view = new EditorView({
+ parent: options.target,
+ state: EditorState.create({
+ doc: options.value,
+ extensions: [
+ history(),
+ markdown(),
+ EditorView.lineWrapping,
+ markdownLinePreviewPlugin,
+ keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
+ EditorView.updateListener.of((update) => {
+ if (!suppressChange && update.docChanged) {
+ options.onChange(update.state.doc.toString());
+ }
+ if (update.selectionSet || update.focusChanged) {
+ window.requestAnimationFrame(() => positionToolbar());
+ }
+ }),
+ ],
+ }),
+ });
+ const linkPopover = document.createElement('div');
+ linkPopover.className = 'markdown-link-popover';
+ linkPopover.hidden = true;
+ shell?.appendChild(linkPopover);
- const getTiptapMarkdown = (): string => {
- const storage = tiptap.storage as { markdown?: { getMarkdown: () => string } };
- return restoreWikiLinks(storage.markdown?.getMarkdown() ?? '');
- };
-
- const tiptap = new Editor({
- element: options.target,
- extensions: [
- StarterKit.configure({
- heading: { levels: [1, 2, 3, 4, 5, 6] },
- codeBlock: { HTMLAttributes: { class: 'code-viewer' } },
- link: {
- openOnClick: false,
- autolink: true,
- HTMLAttributes: { 'data-markdown-link': 'true' },
- },
- }),
- Image.configure({ allowBase64: true, inline: true }),
- Markdown.configure({
- html: true,
- tightLists: true,
- bulletListMarker: '-',
- linkify: true,
- breaks: false,
- transformPastedText: true,
- transformCopiedText: false,
- }),
- ],
- content: rewriteWikiLinks(options.value),
- editorProps: {
- attributes: {
- class: 'markdown-editor-surface markdown-editor-surface--markdown markdown markdown-doc',
- role: 'textbox',
- 'aria-multiline': 'true',
- },
- },
- onUpdate: ({ editor }) => {
- syncHeadingIds(editor.view.dom as HTMLElement);
- options.onChange(getTiptapMarkdown());
- },
- onSelectionUpdate: () => {
- updateContextMenu();
- },
- onBlur: ({ event }) => {
- if (shouldIgnoreBlur(shell, event as FocusEvent)) {
- return;
+ const getValue = (): string => view.state.doc.toString();
+
+ const getSelectedText = (): string => {
+ const selection = view.state.selection.main;
+ return view.state.doc.sliceString(selection.from, selection.to);
+ };
+
+ const insertText = (insert: string, selectFrom?: number, selectTo?: number): void => {
+ const selection = view.state.selection.main;
+ if (typeof selectFrom === 'number') {
+ view.dispatch({
+ changes: { from: selection.from, to: selection.to, insert },
+ selection: EditorSelection.range(selection.from + selectFrom, selection.from + (selectTo ?? selectFrom)),
+ userEvent: 'input',
+ });
+ } else {
+ view.dispatch({
+ changes: { from: selection.from, to: selection.to, insert },
+ userEvent: 'input',
+ });
+ }
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
+ };
+
+ const findEnclosingWrapper = (prefix: string, suffix: string = prefix): { from: number; contentFrom: number; contentTo: number; to: number } | null => {
+ const selection = view.state.selection.main;
+ const line = view.state.doc.lineAt(selection.from);
+ if (selection.to > line.to) {
+ return null;
+ }
+ const lineText = line.text;
+ const relativeFrom = selection.from - line.from;
+ const relativeTo = selection.to - line.from;
+ let openIndex = lineText.lastIndexOf(prefix, Math.max(0, relativeFrom - 1));
+ while (openIndex >= 0) {
+ const contentFrom = openIndex + prefix.length;
+ const closeIndex = lineText.indexOf(suffix, Math.max(contentFrom, relativeTo));
+ if (closeIndex >= 0 && contentFrom <= relativeFrom && relativeTo <= closeIndex) {
+ return {
+ from: line.from + openIndex,
+ contentFrom: line.from + contentFrom,
+ contentTo: line.from + closeIndex,
+ to: line.from + closeIndex + suffix.length,
+ };
}
- if (contextMenu) {
- contextMenu.hidden = true;
+ openIndex = lineText.lastIndexOf(prefix, openIndex - 1);
+ }
+ return null;
+ };
+
+ const findWrapperRanges = (prefix: string, suffix: string = prefix): Array<{
+ from: number;
+ contentFrom: number;
+ contentTo: number;
+ to: number;
+ }> => {
+ const source = view.state.doc.toString();
+ const ranges: Array<{ from: number; contentFrom: number; contentTo: number; to: number }> = [];
+ let open: number | null = null;
+ for (let index = 0; index < source.length;) {
+ if (open === null && isInlineMarkerAt(source, index, prefix)) {
+ open = index;
+ index += prefix.length;
+ continue;
}
- options.onBlur?.();
- },
- });
+ if (open !== null && isInlineMarkerAt(source, index, suffix)) {
+ ranges.push({
+ from: open,
+ contentFrom: open + prefix.length,
+ contentTo: index,
+ to: index + suffix.length,
+ });
+ open = null;
+ index += suffix.length;
+ continue;
+ }
+ index += 1;
+ }
+ return ranges;
+ };
- const editorDom = tiptap.view.dom as HTMLElement;
- syncHeadingIds(editorDom);
+ const selectionTouchesOnlyMarkedText = (prefix: string, suffix: string = prefix): boolean => {
+ const selection = view.state.selection.main;
+ if (selection.empty) {
+ return false;
+ }
+ const source = view.state.doc.toString();
+ const ranges = findWrapperRanges(prefix, suffix);
+ let sawContent = false;
+
+ for (let position = selection.from; position < selection.to; position += 1) {
+ const char = source[position];
+ if (!char || /\s/.test(char)) {
+ continue;
+ }
+ const isMarker = ranges.some((range) => (
+ (range.from <= position && position < range.contentFrom)
+ || (range.contentTo <= position && position < range.to)
+ ));
+ if (isMarker) {
+ continue;
+ }
+ sawContent = true;
+ const isCovered = ranges.some((range) => range.contentFrom <= position && position < range.contentTo);
+ if (!isCovered) {
+ return false;
+ }
+ }
+
+ return sawContent;
+ };
- const updateContextMenu = (): void => {
- if (!contextMenu) {
+ const getBoundaryWrapperState = (prefix: string, suffix: string = prefix): { startsInside: boolean; endsInside: boolean } => {
+ const selection = view.state.selection.main;
+ const ranges = findWrapperRanges(prefix, suffix);
+ return {
+ startsInside: ranges.some((range) => range.contentFrom <= selection.from && selection.from < range.contentTo),
+ endsInside: ranges.some((range) => range.contentFrom < selection.to && selection.to <= range.contentTo),
+ };
+ };
+
+ const removeWrappersTouchingSelection = (prefix: string, suffix: string = prefix): boolean => {
+ const selection = view.state.selection.main;
+ const changes = findWrapperRanges(prefix, suffix)
+ .filter((range) => range.contentTo > selection.from && range.contentFrom < selection.to)
+ .flatMap((range) => [
+ { from: range.from, to: range.contentFrom, insert: '' },
+ { from: range.contentTo, to: range.to, insert: '' },
+ ])
+ .sort((left, right) => left.from - right.from);
+
+ if (changes.length === 0) {
+ return false;
+ }
+
+ const removedBefore = (position: number): number => changes.reduce((total, change) => (
+ change.to <= position ? total + (change.to - change.from) : total
+ ), 0);
+ view.dispatch({
+ changes,
+ selection: EditorSelection.range(
+ Math.max(0, selection.from - removedBefore(selection.from)),
+ Math.max(0, selection.to - removedBefore(selection.to))
+ ),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
+ return true;
+ };
+
+ const toggleWrapper = (prefix: string, suffix: string = prefix, placeholder = 'text'): void => {
+ const selected = getSelectedText();
+ const selection = view.state.selection.main;
+
+ if (selected.startsWith(prefix) && selected.endsWith(suffix) && selected.length >= prefix.length + suffix.length) {
+ const body = selected.slice(prefix.length, selected.length - suffix.length);
+ view.dispatch({
+ changes: { from: selection.from, to: selection.to, insert: body },
+ selection: EditorSelection.range(selection.from, selection.from + body.length),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
return;
}
- const { from, to, empty } = tiptap.state.selection;
- if (empty || !tiptap.isFocused) {
- contextMenu.hidden = true;
+
+ const hasSurroundingMarkers = selection.from >= prefix.length
+ && view.state.doc.sliceString(selection.from - prefix.length, selection.from) === prefix
+ && view.state.doc.sliceString(selection.to, selection.to + suffix.length) === suffix;
+ if (hasSurroundingMarkers) {
+ view.dispatch({
+ changes: [
+ { from: selection.from - prefix.length, to: selection.from, insert: '' },
+ { from: selection.to, to: selection.to + suffix.length, insert: '' },
+ ],
+ selection: EditorSelection.range(selection.from - prefix.length, selection.to - prefix.length),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
return;
}
- const start = tiptap.view.coordsAtPos(from);
- const end = tiptap.view.coordsAtPos(to);
- const shellEl = shell as HTMLElement | null;
- if (!shellEl) {
+
+ if (!selection.empty && selectionTouchesOnlyMarkedText(prefix, suffix)) {
+ if (removeWrappersTouchingSelection(prefix, suffix)) {
+ return;
+ }
+ }
+
+ const enclosingWrapper = findEnclosingWrapper(prefix, suffix);
+ if (enclosingWrapper) {
+ const cursor = selection.empty
+ ? Math.max(enclosingWrapper.from, selection.from - prefix.length)
+ : selection.from - prefix.length;
+ view.dispatch({
+ changes: [
+ { from: enclosingWrapper.from, to: enclosingWrapper.contentFrom, insert: '' },
+ { from: enclosingWrapper.contentTo, to: enclosingWrapper.to, insert: '' },
+ ],
+ selection: EditorSelection.cursor(Math.max(enclosingWrapper.from, cursor)),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
return;
}
- const shellRect = shellEl.getBoundingClientRect();
- const midX = (start.left + end.right) / 2;
- contextMenu.hidden = false;
- const left = Math.max(12, midX - shellRect.left - contextMenu.offsetWidth / 2);
- const top = Math.max(12, start.top - shellRect.top - contextMenu.offsetHeight - 10);
- contextMenu.style.left = `${left}px`;
- contextMenu.style.top = `${top}px`;
+
+ if (!selection.empty) {
+ const { startsInside, endsInside } = getBoundaryWrapperState(prefix, suffix);
+ const body = selected;
+ const insertPrefix = startsInside ? '' : prefix;
+ const insertSuffix = endsInside ? '' : suffix;
+ const insert = `${insertPrefix}${body}${insertSuffix}`;
+ view.dispatch({
+ changes: { from: selection.from, to: selection.to, insert },
+ selection: EditorSelection.range(
+ selection.from + insertPrefix.length,
+ selection.from + insertPrefix.length + body.length
+ ),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
+ return;
+ }
+
+ const body = selected || placeholder;
+ insertText(`${prefix}${body}${suffix}`, prefix.length, prefix.length + body.length);
+ };
+
+ const updateSelectedLines = (mapLine: (line: string, index: number) => string): void => {
+ const doc = view.state.doc;
+ const selection = view.state.selection.main;
+ const fromLine = doc.lineAt(selection.from);
+ const toLine = doc.lineAt(selection.to);
+ const changes: Array<{ from: number; to: number; insert: string }> = [];
+ for (let lineNumber = fromLine.number; lineNumber <= toLine.number; lineNumber += 1) {
+ const line = doc.line(lineNumber);
+ const nextLine = mapLine(line.text, lineNumber - fromLine.number);
+ if (nextLine !== line.text) {
+ changes.push({ from: line.from, to: line.to, insert: nextLine });
+ }
+ }
+ if (changes.length > 0) {
+ view.dispatch({ changes, userEvent: 'input' });
+ }
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
+ };
+
+ const setHeadingLevel = (level: 0 | 1 | 2 | 3 | 4 | 5 | 6): void => {
+ updateSelectedLines((line) => {
+ const stripped = line.replace(/^\s{0,3}#{1,6}\s+/, '');
+ if (level === 0) {
+ return stripped;
+ }
+ const existing = line.match(/^\s{0,3}(#{1,6})\s+/);
+ if (existing?.[1].length === level) {
+ return stripped;
+ }
+ return `${'#'.repeat(level)} ${stripped || 'Heading'}`;
+ });
+ };
+
+ const toggleLinePrefix = (prefix: string, pattern: RegExp): void => {
+ updateSelectedLines((line) => pattern.test(line) ? line.replace(pattern, '') : `${prefix}${line || 'List item'}`);
};
const setLinkHeadingOptions = (headings: MarkdownLinkHeading[] = [], placeholder: string = 'None'): void => {
@@ -400,18 +934,86 @@ export function mountMarkdownEditor(options: {
renderLinkResults();
};
- const openLinkModalForSelection = (): void => {
+ const findMarkdownLinkInLine = (line: { from: number; text: string }, relativeFrom: number, relativeTo: number = relativeFrom): MarkdownLinkRange | null => {
+ for (const link of findMarkdownLinksInLine(line.text)) {
+ const { start, end, label, href } = link;
+ if (start <= relativeFrom && relativeTo <= end) {
+ return {
+ from: line.from + start,
+ labelFrom: line.from + start + 1,
+ labelTo: line.from + start + 1 + label.length,
+ to: line.from + end,
+ label,
+ href,
+ kind: 'markdown',
+ };
+ }
+ }
+
+ for (const match of line.text.matchAll(/\[\[([^\]\n]+)\]\]/g)) {
+ const start = match.index ?? 0;
+ const end = start + match[0].length;
+ if (start <= relativeFrom && relativeTo <= end) {
+ const body = match[1] ?? '';
+ const pipeIndex = body.lastIndexOf('|');
+ const label = pipeIndex >= 0 ? body.slice(pipeIndex + 1) : body;
+ const labelOffset = pipeIndex >= 0 ? 2 + pipeIndex + 1 : 2;
+ return {
+ from: line.from + start,
+ labelFrom: line.from + start + labelOffset,
+ labelTo: line.from + start + labelOffset + label.length,
+ to: line.from + end,
+ label,
+ href: match[0],
+ kind: 'wiki',
+ };
+ }
+ }
+
+ return null;
+ };
+
+ const findMarkdownLinkAtPosition = (position: number): MarkdownLinkRange | null => {
+ const safePosition = Math.max(0, Math.min(view.state.doc.length, position));
+ const line = view.state.doc.lineAt(safePosition);
+ const relativePosition = safePosition - line.from;
+ return findMarkdownLinkInLine(line, relativePosition, relativePosition);
+ };
+
+ const findEnclosingMarkdownLink = (): MarkdownLinkRange | null => {
+ const selection = view.state.selection.main;
+ const line = view.state.doc.lineAt(selection.from);
+ if (selection.to > line.to) {
+ return null;
+ }
+ return findMarkdownLinkInLine(line, selection.from - line.from, selection.to - line.from);
+ };
+
+ const openLinkModalForSelection = (existingLink?: MarkdownLinkRange): void => {
if (!linkModal) {
return;
}
- const selectedText = tiptap.state.doc.textBetween(tiptap.state.selection.from, tiptap.state.selection.to, ' ').trim();
+ if (existingLink) {
+ view.dispatch({ selection: EditorSelection.range(existingLink.from, existingLink.to) });
+ }
+ const selectedText = existingLink?.label ?? getSelectedText().trim();
linkModal.removeAttribute('hidden');
- updateLinkMode('url');
+ updateLinkMode(existingLink?.kind === 'wiki' ? 'file' : 'url');
if (linkLabelInput) {
linkLabelInput.value = selectedText;
}
if (linkInput) {
- linkInput.value = '';
+ linkInput.value = existingLink?.kind === 'markdown' ? existingLink.href : '';
+ }
+ if (linkAliasInput) {
+ linkAliasInput.value = existingLink?.kind === 'wiki' ? existingLink.label : '';
+ }
+ if (linkSearchInput) {
+ linkSearchInput.value = '';
+ }
+ if (existingLink?.kind === 'wiki') {
+ linkSearchInput?.focus();
+ } else if (linkInput) {
linkInput.focus();
}
linkSearchResults = [];
@@ -429,23 +1031,17 @@ export function mountMarkdownEditor(options: {
return;
}
const label = linkLabelInput?.value?.trim() || href;
- const { from, to, empty } = tiptap.state.selection;
- if (empty) {
- tiptap.chain().focus().insertContent({
- type: 'text',
- text: label,
- marks: [{ type: 'link', attrs: { href } }],
- }).run();
+ const existingLink = findEnclosingMarkdownLink();
+ if (existingLink) {
+ view.dispatch({
+ changes: { from: existingLink.from, to: existingLink.to, insert: `[${label}](${href})` },
+ selection: EditorSelection.range(existingLink.from + 1, existingLink.from + 1 + label.length),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
} else {
- tiptap.chain()
- .focus()
- .deleteRange({ from, to })
- .insertContent({
- type: 'text',
- text: label,
- marks: [{ type: 'link', attrs: { href } }],
- })
- .run();
+ insertText(`[${label}](${href})`, 1, 1 + label.length);
}
} else if (selectedLinkItem) {
const selectedHeadingId = linkHeadingSelect?.value?.trim();
@@ -453,24 +1049,19 @@ export function mountMarkdownEditor(options: {
const alias = linkAliasInput?.value?.trim();
const pathPart = selectedLinkItem.path === options.currentFilePath ? '' : selectedLinkItem.wikiPath;
const wikiLink = `[[${pathPart}${selectedHeadingId ? `#${selectedHeadingId}` : ''}${alias ? `|${alias}` : ''}]]`;
- const href = `${selectedLinkItem.relativePath}${selectedHeadingId ? `#${selectedHeadingId}` : ''}`;
const label = alias || selectedHeadingText || selectedLinkItem.title;
- const { from, to, empty } = tiptap.state.selection;
- const insertChain = tiptap.chain().focus();
- if (!empty) {
- insertChain.deleteRange({ from, to });
+ const existingLink = findEnclosingMarkdownLink();
+ if (existingLink) {
+ view.dispatch({
+ changes: { from: existingLink.from, to: existingLink.to, insert: wikiLink },
+ selection: EditorSelection.range(existingLink.from + 2, existingLink.from + 2 + label.length),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
+ } else {
+ insertText(wikiLink, 2, 2 + label.length);
}
- insertChain.insertContent({
- type: 'text',
- text: label,
- marks: [{
- type: 'link',
- attrs: {
- href,
- title: `mcp-wiki:${encodeURIComponent(wikiLink)}`,
- },
- }],
- }).run();
}
closeLinkModal();
};
@@ -483,24 +1074,37 @@ export function mountMarkdownEditor(options: {
}
switch (format) {
case 'bold':
- tiptap.chain().focus().toggleBold().run();
+ toggleWrapper('**', '**', 'bold text');
break;
case 'italic':
- tiptap.chain().focus().toggleItalic().run();
+ toggleWrapper('*', '*', 'italic text');
break;
case 'strike':
- tiptap.chain().focus().toggleStrike().run();
+ toggleWrapper('~~', '~~', 'struck text');
break;
case 'quote':
- tiptap.chain().focus().toggleBlockquote().run();
+ toggleLinePrefix('> ', BLOCKQUOTE_PREFIX);
break;
case 'list':
- tiptap.chain().focus().toggleBulletList().run();
+ toggleLinePrefix('- ', UNORDERED_LIST_PREFIX);
break;
case 'code':
- tiptap.chain().focus().toggleCode().run();
+ toggleWrapper('`', '`', 'code');
break;
case 'link':
+ {
+ const existingLink = findEnclosingMarkdownLink();
+ if (existingLink) {
+ view.dispatch({
+ changes: { from: existingLink.from, to: existingLink.to, insert: existingLink.label },
+ selection: EditorSelection.range(existingLink.from, existingLink.from + existingLink.label.length),
+ userEvent: 'input',
+ });
+ view.focus();
+ window.requestAnimationFrame(() => positionToolbar());
+ break;
+ }
+ }
openLinkModalForSelection();
break;
}
@@ -512,111 +1116,206 @@ export function mountMarkdownEditor(options: {
return;
}
if (value === 'p') {
- tiptap.chain().focus().setParagraph().run();
+ setHeadingLevel(0);
return;
}
const match = /^h([1-6])$/.exec(value);
if (match) {
const level = Number.parseInt(match[1], 10) as 1 | 2 | 3 | 4 | 5 | 6;
- tiptap.chain().focus().toggleHeading({ level }).run();
+ setHeadingLevel(level);
}
};
- const linkPopover = document.createElement('div');
- linkPopover.className = 'markdown-link-popover';
- linkPopover.hidden = true;
- editorDom.parentElement?.appendChild(linkPopover);
- let popoverHideTimer: ReturnType | null = null;
-
- const showLinkPopover = (anchor: HTMLAnchorElement): void => {
- if (popoverHideTimer) {
- clearTimeout(popoverHideTimer);
- popoverHideTimer = null;
+ const handleLinkModeFileClick = (): void => updateLinkMode('file');
+ const handleLinkModeUrlClick = (): void => {
+ updateLinkMode('url');
+ linkInput?.focus();
+ };
+ const handleSearchInput = (): void => { void runLinkSearch(); };
+ const handleModalBackdropClick = (e: MouseEvent): void => {
+ if (e.target === linkModal) {
+ closeLinkModal();
}
- const href = anchor.getAttribute('href') ?? '';
- linkPopover.innerHTML = ``;
- linkPopover.hidden = false;
+ };
+ const handleFocusOut = (event: FocusEvent): void => {
+ if (shouldIgnoreBlur(shell, event)) {
+ return;
+ }
+ if (contextMenu) {
+ contextMenu.hidden = true;
+ }
+ options.onBlur?.();
+ };
- linkPopover.querySelector('#link-popover-open')?.addEventListener('click', (e) => {
- e.preventDefault();
- e.stopPropagation();
- linkPopover.hidden = true;
- anchor.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
- }, { once: true });
+ positionToolbar = (preferredPoint?: { x: number; y: number }): void => {
+ if (!contextMenu || !shell) {
+ return;
+ }
- linkPopover.querySelector('#link-popover-edit')?.addEventListener('click', (e) => {
- e.preventDefault();
- e.stopPropagation();
- linkPopover.hidden = true;
- if (!linkModal) {
- return;
- }
- const pos = tiptap.view.posAtDOM(anchor, 0);
- if (pos >= 0) {
- const endPos = pos + (anchor.textContent?.length ?? 0);
- tiptap.chain().focus().setTextSelection({ from: pos, to: endPos }).run();
- }
- const label = anchor.textContent?.trim() ?? '';
- linkModal.removeAttribute('hidden');
- updateLinkMode('url');
- if (linkInput) { linkInput.value = href; }
- if (linkLabelInput) { linkLabelInput.value = label; }
- }, { once: true });
-
- const rect = anchor.getBoundingClientRect();
- const parent = editorDom.parentElement;
- if (!parent) {
+ const activeElement = document.activeElement;
+ if (!view.hasFocus && activeElement && !shell.contains(activeElement)) {
+ contextMenu.hidden = true;
return;
}
- const parentRect = parent.getBoundingClientRect();
- linkPopover.style.left = `${Math.max(4, rect.left - parentRect.left)}px`;
- linkPopover.style.top = `${rect.bottom - parentRect.top + 4}px`;
+
+ const selection = view.state.selection.main;
+ const fromCoords = view.coordsAtPos(selection.from);
+ const toCoords = view.coordsAtPos(selection.to);
+ const shellRect = (shell as HTMLElement).getBoundingClientRect();
+ let clientX = preferredPoint?.x ?? fromCoords?.left ?? shellRect.left + shellRect.width / 2;
+ let clientY = preferredPoint?.y ?? fromCoords?.top ?? shellRect.top + 24;
+
+ if (!selection.empty && fromCoords && toCoords) {
+ clientX = (fromCoords.left + toCoords.right) / 2;
+ clientY = Math.min(fromCoords.top, toCoords.top);
+ }
+
+ contextMenu.hidden = false;
+ const toolbarWidth = contextMenu.offsetWidth || 1;
+ const toolbarHeight = contextMenu.offsetHeight || 1;
+ const minLeft = 8;
+ const maxLeft = Math.max(minLeft, shellRect.width - toolbarWidth - 8);
+ const unclampedLeft = clientX - shellRect.left - toolbarWidth / 2;
+ const left = Math.min(Math.max(unclampedLeft, minLeft), maxLeft);
+ let top = clientY - shellRect.top - toolbarHeight - 10;
+ if (top < 8) {
+ top = clientY - shellRect.top + 18;
+ }
+ const maxTop = Math.max(8, shellRect.height - toolbarHeight - 8);
+ top = Math.min(Math.max(top, 8), maxTop);
+ contextMenu.style.left = `${left}px`;
+ contextMenu.style.top = `${top}px`;
};
- const hideLinkPopover = (): void => {
+ const hideLinkPopover = (delayMs = 180): void => {
+ if (popoverHideTimer) {
+ clearTimeout(popoverHideTimer);
+ }
popoverHideTimer = setTimeout(() => {
linkPopover.hidden = true;
- }, 200);
+ activePopoverLink = null;
+ popoverHideTimer = null;
+ }, delayMs);
};
- const handleMouseOver = (e: MouseEvent): void => {
- const target = (e.target as HTMLElement)?.closest?.('a[href]') as HTMLAnchorElement | null;
- if (target && editorDom.contains(target)) {
- showLinkPopover(target);
- }
- };
- const handleMouseOut = (e: MouseEvent): void => {
- const target = (e.target as HTMLElement)?.closest?.('a[href]');
- if (target) {
- hideLinkPopover();
+ const showLinkPopover = (link: MarkdownLinkRange, clientX: number, clientY: number): void => {
+ if (!shell) {
+ return;
}
- };
- const handlePopoverEnter = (): void => {
if (popoverHideTimer) {
clearTimeout(popoverHideTimer);
popoverHideTimer = null;
}
+ activePopoverLink = link;
+ linkPopover.innerHTML = `
+
+
+ `;
+ linkPopover.hidden = false;
+
+ // Position alongside the link rather than below it so the mouse can
+ // travel from the link to the popover without crossing another line —
+ // moving down would otherwise hover the next line's link and replace
+ // this popover before the user can click.
+ const fromCoords = view.coordsAtPos(link.labelFrom);
+ const toCoords = view.coordsAtPos(link.labelTo);
+ const shellRect = (shell as HTMLElement).getBoundingClientRect();
+ const popoverWidth = linkPopover.offsetWidth || 1;
+ const popoverHeight = linkPopover.offsetHeight || 1;
+ const gap = 8;
+ const linkRight = toCoords?.right ?? clientX;
+ const linkLeft = fromCoords?.left ?? clientX;
+ const linkTop = fromCoords?.top ?? clientY;
+ const linkBottom = fromCoords?.bottom ?? clientY;
+ const linkMid = (linkTop + linkBottom) / 2;
+ let anchorLeft = linkRight + gap;
+ if (anchorLeft + popoverWidth > shellRect.right - gap) {
+ anchorLeft = linkLeft - popoverWidth - gap;
+ }
+ const anchorTop = linkMid - popoverHeight / 2;
+ const left = Math.min(
+ Math.max(anchorLeft - shellRect.left, gap),
+ Math.max(gap, shellRect.width - popoverWidth - gap)
+ );
+ const top = Math.min(
+ Math.max(anchorTop - shellRect.top, gap),
+ Math.max(gap, shellRect.height - popoverHeight - gap)
+ );
+ linkPopover.style.left = `${left}px`;
+ linkPopover.style.top = `${top}px`;
};
- const handlePopoverLeave = (): void => {
- hideLinkPopover();
+
+ const handleLinkMouseMove = (event: MouseEvent): void => {
+ const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+ if (typeof pos !== 'number') {
+ hideLinkPopover();
+ return;
+ }
+ const link = findMarkdownLinkAtPosition(pos);
+ if (!link) {
+ hideLinkPopover();
+ return;
+ }
+ showLinkPopover(link, event.clientX, event.clientY);
};
- const handleLinkModeFileClick = (): void => updateLinkMode('file');
- const handleLinkModeUrlClick = (): void => {
- updateLinkMode('url');
- linkInput?.focus();
+
+ const handleLinkPopoverMouseDown = (event: MouseEvent): void => {
+ event.preventDefault();
};
- const handleSearchInput = (): void => { void runLinkSearch(); };
- const handleModalBackdropClick = (e: MouseEvent): void => {
- if (e.target === linkModal) {
- closeLinkModal();
+
+ const handleLinkPopoverClick = (event: MouseEvent): void => {
+ const button = (event.target as HTMLElement | null)?.closest('button');
+ if (!button || !activePopoverLink) {
+ return;
+ }
+ event.preventDefault();
+ event.stopPropagation();
+ const link = activePopoverLink;
+ linkPopover.hidden = true;
+ activePopoverLink = null;
+
+ if (button.id === 'link-popover-open') {
+ void options.onOpenLink?.(link.href);
+ return;
+ }
+
+ if (button.id === 'link-popover-edit') {
+ openLinkModalForSelection(link);
}
};
- editorDom.addEventListener('mouseover', handleMouseOver);
- editorDom.addEventListener('mouseout', handleMouseOut);
- linkPopover.addEventListener('mouseenter', handlePopoverEnter);
- linkPopover.addEventListener('mouseleave', handlePopoverLeave);
+ const handleEditorMouseUp = (event: MouseEvent): void => {
+ positionToolbar({ x: event.clientX, y: event.clientY });
+ };
+ const handleEditorKeyUp = (): void => {
+ positionToolbar();
+ };
+ const handleEditorFocusIn = (): void => {
+ positionToolbar();
+ };
+ const handleFormatMouseDown = (event: MouseEvent): void => {
+ event.preventDefault();
+ };
+
+ view.dom.addEventListener('focusout', handleFocusOut);
+ view.dom.addEventListener('mousemove', handleLinkMouseMove);
+ view.dom.addEventListener('mouseleave', () => hideLinkPopover());
+ view.dom.addEventListener('mouseup', handleEditorMouseUp);
+ view.dom.addEventListener('keyup', handleEditorKeyUp);
+ view.dom.addEventListener('focusin', handleEditorFocusIn);
+ const handleLinkPopoverMouseEnter = (): void => {
+ if (popoverHideTimer) {
+ clearTimeout(popoverHideTimer);
+ popoverHideTimer = null;
+ }
+ };
+ const handleLinkPopoverMouseLeave = (): void => hideLinkPopover();
+ linkPopover.addEventListener('mousedown', handleLinkPopoverMouseDown);
+ linkPopover.addEventListener('click', handleLinkPopoverClick);
+ linkPopover.addEventListener('mouseenter', handleLinkPopoverMouseEnter);
+ linkPopover.addEventListener('mouseleave', handleLinkPopoverMouseLeave);
formatButtons.forEach((button) => button.addEventListener('click', handleFormatClick));
+ formatButtons.forEach((button) => button.addEventListener('mousedown', handleFormatMouseDown));
blockStyleSelect?.addEventListener('change', handleBlockStyleChange);
linkModeFile?.addEventListener('click', handleLinkModeFileClick);
linkModeUrl?.addEventListener('click', handleLinkModeUrlClick);
@@ -626,17 +1325,23 @@ export function mountMarkdownEditor(options: {
linkModal?.addEventListener('click', handleModalBackdropClick);
if (typeof options.initialScrollTop === 'number') {
- editorDom.scrollTop = options.initialScrollTop;
+ view.scrollDOM.scrollTop = options.initialScrollTop;
}
renderLinkResults();
return {
destroy: () => {
- editorDom.removeEventListener('mouseover', handleMouseOver);
- editorDom.removeEventListener('mouseout', handleMouseOut);
- linkPopover.removeEventListener('mouseenter', handlePopoverEnter);
- linkPopover.removeEventListener('mouseleave', handlePopoverLeave);
+ view.dom.removeEventListener('focusout', handleFocusOut);
+ view.dom.removeEventListener('mousemove', handleLinkMouseMove);
+ view.dom.removeEventListener('mouseup', handleEditorMouseUp);
+ view.dom.removeEventListener('keyup', handleEditorKeyUp);
+ view.dom.removeEventListener('focusin', handleEditorFocusIn);
+ linkPopover.removeEventListener('mousedown', handleLinkPopoverMouseDown);
+ linkPopover.removeEventListener('click', handleLinkPopoverClick);
+ linkPopover.removeEventListener('mouseenter', handleLinkPopoverMouseEnter);
+ linkPopover.removeEventListener('mouseleave', handleLinkPopoverMouseLeave);
formatButtons.forEach((button) => button.removeEventListener('click', handleFormatClick));
+ formatButtons.forEach((button) => button.removeEventListener('mousedown', handleFormatMouseDown));
blockStyleSelect?.removeEventListener('change', handleBlockStyleChange);
linkModeFile?.removeEventListener('click', handleLinkModeFileClick);
linkModeUrl?.removeEventListener('click', handleLinkModeUrlClick);
@@ -644,34 +1349,31 @@ export function mountMarkdownEditor(options: {
linkApply?.removeEventListener('click', handleLinkApply);
linkCancel?.removeEventListener('click', closeLinkModal);
linkModal?.removeEventListener('click', handleModalBackdropClick);
- linkPopover.remove();
if (popoverHideTimer) { clearTimeout(popoverHideTimer); }
- tiptap.destroy();
+ linkPopover.remove();
+ view.destroy();
options.target.replaceChildren();
},
focus: () => {
- tiptap.commands.focus();
+ view.focus();
},
- getValue: () => getTiptapMarkdown(),
+ getValue,
setValue: (value: string) => {
- tiptap.commands.setContent(rewriteWikiLinks(value), { emitUpdate: false });
- syncHeadingIds(editorDom);
+ suppressChange = true;
+ view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
+ suppressChange = false;
},
- revealLine: (_lineNumber: number, headingId?: string) => {
- if (headingId) {
- const heading = editorDom.querySelector(`#${CSS.escape(headingId)}`);
- if (heading) {
- heading.scrollIntoView({ block: 'start', inline: 'nearest' });
- editorDom.scrollTop = Math.max(editorDom.scrollTop - 24, 0);
- heading.setAttribute('tabindex', '-1');
- heading.focus({ preventScroll: true });
- return;
- }
- }
- tiptap.commands.focus();
+ revealLine: (lineNumber: number) => {
+ const targetLine = Math.max(1, Math.min(view.state.doc.lines, Math.floor(lineNumber)));
+ const line = view.state.doc.line(targetLine);
+ view.dispatch({
+ selection: EditorSelection.cursor(line.from),
+ effects: EditorView.scrollIntoView(line.from, { y: 'start', yMargin: 48 }),
+ });
+ view.focus();
},
setScrollTop: (scrollTop: number) => {
- editorDom.scrollTop = Math.max(0, scrollTop);
+ view.scrollDOM.scrollTop = Math.max(0, scrollTop);
},
};
}
@@ -718,9 +1420,6 @@ export function mountMarkdownEditor(options: {
textarea.addEventListener('keydown', handleKeyDown);
textarea.addEventListener('focusout', handleFocusOut);
autosize();
- if (typeof options.initialScrollTop === 'number') {
- textarea.scrollTop = options.initialScrollTop;
- }
return {
destroy: () => {
diff --git a/src/ui/file-preview/src/markdown/linking.ts b/src/ui/file-preview/src/markdown/linking.ts
index dfe0baac..c7d6c1bc 100644
--- a/src/ui/file-preview/src/markdown/linking.ts
+++ b/src/ui/file-preview/src/markdown/linking.ts
@@ -15,9 +15,6 @@ interface ParsedWikiLink {
alias?: string;
}
-const WIKI_LINK_PATTERN = /\[\[([^\]|#]*)(?:#([^\]|]+))?(?:\|([^\]]+))?\]\]/g;
-const FENCE_PATTERN = /^(`{3,}|~{3,})/;
-
function encodeLinkPath(pathValue: string): string {
return encodeURI(normalizePathSeparators(pathValue));
}
@@ -43,22 +40,6 @@ function parseWikiLink(rawHref: string): ParsedWikiLink | null {
};
}
-function buildWikiDisplayText(link: ParsedWikiLink): string {
- if (link.alias && link.alias.length > 0) {
- return link.alias;
- }
-
- if (link.path && link.anchor) {
- return `${link.path}#${link.anchor}`;
- }
-
- if (link.path) {
- return link.path;
- }
-
- return link.anchor ?? '';
-}
-
function appendMarkdownExtension(pathValue: string): string {
if (/\.[A-Za-z0-9_-]+$/.test(pathValue)) {
return pathValue;
@@ -92,51 +73,6 @@ function buildWikiHref(link: ParsedWikiLink): string {
return `${encodedPath}#${slugifyMarkdownHeading(link.anchor)}`;
}
-function rewriteWikiLinksInPlainText(segment: string): string {
- return segment.replace(WIKI_LINK_PATTERN, (match) => {
- const parsed = parseWikiLink(match);
- if (!parsed) {
- return match;
- }
-
- const displayText = buildWikiDisplayText(parsed);
- const href = buildWikiHref(parsed);
- return `[${displayText}](${href} "mcp-wiki:${encodeURIComponent(match)}")`;
- });
-}
-
-function replaceWikiLinksOutsideInlineCode(line: string): string {
- let result = '';
- let cursor = 0;
-
- while (cursor < line.length) {
- const codeStart = line.indexOf('`', cursor);
- if (codeStart === -1) {
- result += rewriteWikiLinksInPlainText(line.slice(cursor));
- break;
- }
-
- result += rewriteWikiLinksInPlainText(line.slice(cursor, codeStart));
-
- let delimiterEnd = codeStart;
- while (delimiterEnd < line.length && line[delimiterEnd] === '`') {
- delimiterEnd += 1;
- }
-
- const delimiter = line.slice(codeStart, delimiterEnd);
- const codeEnd = line.indexOf(delimiter, delimiterEnd);
- if (codeEnd === -1) {
- result += line.slice(codeStart);
- break;
- }
-
- result += line.slice(codeStart, codeEnd + delimiter.length);
- cursor = codeEnd + delimiter.length;
- }
-
- return result;
-}
-
function decodeAnchorFragment(fragment: string | undefined): string | undefined {
if (!fragment || fragment.length === 0) {
return undefined;
@@ -199,47 +135,6 @@ function resolveFileTargetPath(currentPath: string, rawPath: string): string {
return normalizeFilePath(fromFileUrl(resolvedUrl));
}
-/**
- * Invert `rewriteWikiLinks`: convert `[alias](href "mcp-wiki:ENCODED")` links
- * back to their original `[[...]]` form. Used when serializing a WYSIWYG
- * edit session back to markdown — the `mcp-wiki:` title prefix is the
- * round-trip marker written by `rewriteWikiLinks`.
- */
-export function restoreWikiLinks(markdown: string): string {
- return markdown.replace(/\[([^\]]*)\]\(([^)\s]*)(?:\s+"mcp-wiki:([^"]+)")\)/g, (_, _alias, _href, encoded) => {
- try {
- return decodeURIComponent(encoded);
- } catch {
- return `[[${encoded}]]`;
- }
- });
-}
-
-export function rewriteWikiLinks(source: string): string {
- const lines = source.split('\n');
- let activeFence: string | null = null;
-
- return lines.map((line) => {
- const trimmedStart = line.trimStart();
- const fenceMatch = trimmedStart.match(FENCE_PATTERN);
- if (fenceMatch) {
- const marker = fenceMatch[1];
- if (!activeFence) {
- activeFence = marker;
- } else if (marker[0] === activeFence[0] && marker.length >= activeFence.length) {
- activeFence = null;
- }
- return line;
- }
-
- if (activeFence) {
- return line;
- }
-
- return replaceWikiLinksOutsideInlineCode(line);
- }).join('\n');
-}
-
export function resolveMarkdownLink(currentPath: string, rawHref: string): ResolvedMarkdownLink {
const wikiLink = parseWikiLink(rawHref);
if (wikiLink) {
diff --git a/src/ui/file-preview/src/markdown/outline.ts b/src/ui/file-preview/src/markdown/outline.ts
index 36ec29a0..ea853237 100644
--- a/src/ui/file-preview/src/markdown/outline.ts
+++ b/src/ui/file-preview/src/markdown/outline.ts
@@ -1,21 +1,87 @@
import type { DocumentOutlineItem } from '../document-outline.js';
-import { createMarkdownIt, prepareMarkdownSource, readHeadingProjection } from './parser.js';
+import { GFM, parser } from '@lezer/markdown';
import { createSlugTracker } from './slugify.js';
-const outlineParser = createMarkdownIt();
+
+const outlineParser = parser.configure([GFM]);
+const HEADING_NODE_PATTERN = /^(?:ATXHeading|SetextHeading)([1-6])$/;
+
+function buildLineStarts(source: string): number[] {
+ const starts = [0];
+ for (let index = 0; index < source.length; index += 1) {
+ if (source[index] === '\n') {
+ starts.push(index + 1);
+ }
+ }
+ return starts;
+}
+
+function lineNumberForOffset(lineStarts: number[], offset: number): number {
+ let low = 0;
+ let high = lineStarts.length - 1;
+ while (low <= high) {
+ const mid = Math.floor((low + high) / 2);
+ if (lineStarts[mid] <= offset) {
+ low = mid + 1;
+ } else {
+ high = mid - 1;
+ }
+ }
+ return Math.max(1, high + 1);
+}
+
+function stripInlineMarkdown(text: string): string {
+ return text
+ .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+ .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+ .replace(/\[\[([^\]|#]*(?:#[^\]|]+)?)(?:\|([^\]]+))?\]\]/g, (_match, target, alias) => alias || target)
+ .replace(/`([^`]+)`/g, '$1')
+ .replace(/\*\*([^*]+)\*\*/g, '$1')
+ .replace(/__([^_]+)__/g, '$1')
+ .replace(/~~([^~]+)~~/g, '$1')
+ .replace(/(^|[^*])\*([^*]+)\*/g, '$1$2')
+ .replace(/(^|[^_])_([^_]+)_/g, '$1$2')
+ .replace(/<[^>]+>/g, '')
+ .replace(/\\([\\`*{}\[\]()#+\-.!_>~|])/g, '$1')
+ .trim();
+}
+
+function readHeadingText(source: string, from: number, to: number, nodeName: string): string {
+ const rawHeading = source.slice(from, to);
+ const isSetext = nodeName.startsWith('SetextHeading');
+ const text = isSetext
+ ? rawHeading.split(/\r?\n/)[0] ?? ''
+ : rawHeading
+ .replace(/^\s{0,3}#{1,6}\s*/, '')
+ .replace(/\s+#+\s*$/, '');
+ return stripInlineMarkdown(text);
+}
export function extractMarkdownOutline(source: string): DocumentOutlineItem[] {
- const tokens = outlineParser.parse(prepareMarkdownSource(source), {});
+ const tree = outlineParser.parse(source);
+ const cursor = tree.cursor();
const nextSlug = createSlugTracker();
const outline: DocumentOutlineItem[] = [];
+ const lineStarts = buildLineStarts(source);
- for (let index = 0; index < tokens.length; index += 1) {
- const heading = readHeadingProjection(tokens, index, nextSlug);
- if (!heading) {
- continue;
+ cursor.iterate((node) => {
+ const match = node.name.match(HEADING_NODE_PATTERN);
+ if (!match) {
+ return;
}
- outline.push(heading);
- }
+ const level = Number.parseInt(match[1], 10);
+ const text = readHeadingText(source, node.from, node.to, node.name);
+ if (!text) {
+ return;
+ }
+
+ outline.push({
+ id: nextSlug(text),
+ text,
+ level,
+ line: lineNumberForOffset(lineStarts, node.from),
+ });
+ });
return outline;
}
diff --git a/src/ui/file-preview/src/markdown/parser.ts b/src/ui/file-preview/src/markdown/parser.ts
deleted file mode 100644
index 83888b6a..00000000
--- a/src/ui/file-preview/src/markdown/parser.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-// markdown-it is intentionally typed locally here to avoid maintaining ambient module declarations.
-import MarkdownIt from 'markdown-it';
-import type { MarkdownSlugTracker } from './slugify.js';
-import { rewriteWikiLinks } from './linking.js';
-import { extractInlineText } from './utils.js';
-
-export interface MarkdownToken {
- type?: string;
- tag?: string;
- map?: number[];
- children?: unknown;
- content?: unknown;
- attrSet?: (name: string, value: string) => void;
- attrGet?: (name: string) => string | null;
- attrs?: Array<[string, string]>;
-}
-
-interface MarkdownItInstance {
- render: (source: string, env?: Record) => string;
- parse: (source: string, env?: Record) => MarkdownToken[];
- renderer: {
- rules: Record string>;
- };
-}
-
-type MarkdownItConstructor = new (options?: {
- html?: boolean;
- linkify?: boolean;
- typographer?: boolean;
- highlight?: (code: string, language: string) => string;
-}) => MarkdownItInstance;
-
-export interface MarkdownHeadingProjection {
- id: string;
- text: string;
- level: number;
- line: number;
-}
-
-const MarkdownItCtor = MarkdownIt as unknown as MarkdownItConstructor;
-
-export function createMarkdownIt(options: {
- highlight?: (code: string, language: string) => string;
-} = {}): MarkdownItInstance {
- return new MarkdownItCtor({
- html: false,
- linkify: true,
- typographer: false,
- ...(options.highlight ? { highlight: options.highlight } : {}),
- });
-}
-
-export function prepareMarkdownSource(source: string): string {
- return rewriteWikiLinks(source);
-}
-
-export function readHeadingProjection(
- tokens: MarkdownToken[],
- index: number,
- nextSlug: MarkdownSlugTracker
-): MarkdownHeadingProjection | null {
- const token = tokens[index];
- if (token?.type !== 'heading_open' || typeof token.tag !== 'string') {
- return null;
- }
-
- const level = Number.parseInt(token.tag.replace(/^h/i, ''), 10);
- if (!Number.isFinite(level)) {
- return null;
- }
-
- const inlineToken = tokens[index + 1] as Record | undefined;
- const text = extractInlineText(inlineToken).trim();
- if (!text) {
- return null;
- }
-
- const lineMap = Array.isArray(token.map) ? token.map : undefined;
- return {
- id: nextSlug(text),
- text,
- level,
- line: typeof lineMap?.[0] === 'number' ? lineMap[0] + 1 : index + 1,
- };
-}
diff --git a/src/ui/file-preview/src/markdown/preview.ts b/src/ui/file-preview/src/markdown/preview.ts
deleted file mode 100644
index a8364d63..00000000
--- a/src/ui/file-preview/src/markdown/preview.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { renderMarkdown } from '../components/markdown-renderer.js';
-
-export function getRenderedMarkdownCopyText(content: string): string {
- const html = renderMarkdown(content);
- const normalizedHtml = html
- .replace(/<\s*br\s*\/?>/gi, '\n')
- .replace(/<\/p>/gi, '\n\n')
- .replace(/<\/h[1-6]>/gi, '\n\n')
- .replace(/<\/li>/gi, '\n')
- .replace(//gi, '- ')
- .replace(/<[^>]+>/g, '');
-
- return normalizedHtml
- .replace(/ /g, ' ')
- .replace(/&/g, '&')
- .replace(/</g, '<')
- .replace(/>/g, '>')
- .replace(/'/g, "'")
- .replace(/"/g, '"')
- .replace(/\n{3,}/g, '\n\n')
- .trim();
-}
-
diff --git a/src/ui/file-preview/src/markdown/utils.ts b/src/ui/file-preview/src/markdown/utils.ts
deleted file mode 100644
index a7a0e7ca..00000000
--- a/src/ui/file-preview/src/markdown/utils.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export function extractInlineText(token: Record | undefined): string {
- if (!token) {
- return '';
- }
-
- const children = Array.isArray(token.children) ? token.children : [];
- if (children.length === 0) {
- return typeof token.content === 'string' ? token.content : '';
- }
-
- return children.map((child) => {
- if (typeof child.content === 'string') {
- return child.content;
- }
- return '';
- }).join('');
-}
diff --git a/src/ui/file-preview/src/model.ts b/src/ui/file-preview/src/model.ts
index df5adc6e..98730cd0 100644
--- a/src/ui/file-preview/src/model.ts
+++ b/src/ui/file-preview/src/model.ts
@@ -6,11 +6,9 @@ export type RenderPayload = FilePreviewStructuredContent & { content: string };
export interface MarkdownWorkspaceState {
filePath: string;
- sourceContent: string;
fullDocumentContent: string;
draftContent: string;
outline: DocumentOutlineItem[];
- mode: 'edit';
dirty: boolean;
activeHeadingId: string | null;
pendingAnchor: string | null;
diff --git a/src/ui/file-preview/src/panel-actions.ts b/src/ui/file-preview/src/panel-actions.ts
index 47051145..7b3703fa 100644
--- a/src/ui/file-preview/src/panel-actions.ts
+++ b/src/ui/file-preview/src/panel-actions.ts
@@ -160,7 +160,6 @@ export function attachPanelActions(options: {
return;
}
- const currentContent = stripReadStatusLine(options.payload.content);
const loadLines = async (button: HTMLButtonElement, direction: 'before' | 'after'): Promise => {
const originalText = button.textContent;
button.textContent = 'Loading…';
@@ -180,24 +179,11 @@ export function attachPanelActions(options: {
const newText = extractToolText(result);
if (newText && typeof newText === 'string') {
- const cleanNew = stripReadStatusLine(newText);
- const merged = direction === 'before'
- ? `${cleanNew}${cleanNew.endsWith('\n') ? '' : '\n'}${currentContent}`
- : `${currentContent}${currentContent.endsWith('\n') ? '' : '\n'}${cleanNew}`;
-
- const newFrom = direction === 'before' ? 1 : range.fromLine;
- const newTo = direction === 'after' ? range.totalLines : range.toLine;
- const lineCount = newTo - newFrom + 1;
- const remaining = range.totalLines - newTo;
- const isStillPartial = newFrom > 1 || newTo < range.totalLines;
- const statusLine = isStillPartial
- ? `[Reading ${lineCount} lines from ${newFrom === 1 ? 'start' : `line ${newFrom}`} (total: ${range.totalLines} lines, ${remaining} remaining)]\n`
- : '';
-
- options.render({
- ...options.payload,
- content: statusLine + merged,
- }, options.htmlMode, options.getIsExpanded());
+ options.render(
+ options.markdownController.expandPartialPayload(options.payload, direction, newText),
+ options.htmlMode,
+ options.getIsExpanded()
+ );
return;
}
} catch {
diff --git a/src/ui/styles/apps/file-preview.css b/src/ui/styles/apps/file-preview.css
index afdfe7d8..45ae19b9 100644
--- a/src/ui/styles/apps/file-preview.css
+++ b/src/ui/styles/apps/file-preview.css
@@ -397,28 +397,41 @@ html:has(.fullscreen) #app {
max-width: none;
}
-.markdown-editor-context-menu {
+.markdown-editor-loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: min(50vh, 480px);
+ color: var(--markdown-muted);
+ font-size: 14px;
+}
+
+.markdown-editor-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 6px;
- background: #171717;
- border: 1px solid color-mix(in srgb, var(--border) 34%, transparent);
- border-radius: 10px;
position: absolute;
- z-index: 20;
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+ width: fit-content;
+ margin: 0;
+ z-index: 22;
+ background: color-mix(in srgb, var(--panel) 92%, transparent);
+ border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
+ border-radius: 10px;
+ box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
+ backdrop-filter: blur(12px);
+ transform: translateZ(0);
}
-.markdown-editor-context-menu[hidden] {
+.markdown-editor-toolbar[hidden] {
display: none;
}
.markdown-format-button {
border: none;
background: transparent;
- color: rgba(255, 255, 255, 0.9);
+ color: var(--text);
border-radius: 6px;
width: 32px;
height: 32px;
@@ -433,11 +446,149 @@ html:has(.fullscreen) #app {
}
.markdown-format-button:hover {
- background: rgba(255, 255, 255, 0.14);
+ background: color-mix(in srgb, var(--panel-subtle) 72%, transparent);
}
-.markdown-format-button--swatch {
- padding: 0;
+.markdown-editor-root .cm-editor {
+ min-height: min(70vh, 800px);
+ width: 100%;
+ color: var(--markdown-text);
+ background: transparent;
+ outline: none;
+}
+
+.markdown-editor-root .cm-focused {
+ outline: none;
+}
+
+.markdown-editor-root .cm-scroller {
+ min-height: min(70vh, 800px);
+ overflow: auto;
+ font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+}
+
+.markdown-editor-root .cm-content {
+ max-width: 780px;
+ min-height: min(70vh, 800px);
+ margin: 0 auto;
+ padding: 30px 28px 42px;
+ line-height: 1.78;
+ caret-color: var(--text);
+}
+
+.markdown-editor-root .cm-line {
+ padding: 0 2px;
+ color: var(--markdown-muted);
+}
+
+.markdown-editor-root .cm-md-hidden-marker {
+ display: inline-block;
+ width: 0;
+ min-width: 0;
+ max-width: 0;
+ overflow: hidden;
+ opacity: 0;
+ white-space: pre;
+}
+
+.markdown-editor-root .cm-md-strong-text {
+ color: var(--markdown-text);
+ font-weight: 700;
+}
+
+.markdown-editor-root .cm-md-emphasis-text {
+ font-style: italic;
+}
+
+.markdown-editor-root .cm-md-strike-text {
+ text-decoration: line-through;
+}
+
+.markdown-editor-root .cm-md-link-text {
+ color: inherit;
+ text-decoration: underline;
+ text-decoration-color: color-mix(in srgb, var(--text-secondary) 45%, transparent);
+ text-underline-offset: 0.18em;
+}
+
+.markdown-editor-root .cm-md-inline-code-text {
+ font-family: var(--font-mono, ui-monospace, monospace);
+ font-size: .9em;
+ background: var(--inline-code-bg);
+ color: var(--inline-code-text);
+ border: 1px solid var(--inline-code-border);
+ border-radius: 6px;
+ padding: 1px 5px;
+}
+
+.markdown-editor-root .cm-md-heading {
+ color: var(--markdown-text);
+ letter-spacing: -0.015em;
+}
+
+.markdown-editor-root .cm-md-heading-1 {
+ padding-top: 4px;
+ padding-bottom: 12px;
+ font-size: 28px;
+ line-height: 1.25;
+ font-weight: 700;
+}
+
+.markdown-editor-root .cm-md-heading-2 {
+ padding-top: 22px;
+ padding-bottom: 8px;
+ font-size: 22px;
+ line-height: 1.3;
+ font-weight: 650;
+}
+
+.markdown-editor-root .cm-md-heading-3 {
+ padding-top: 16px;
+ padding-bottom: 6px;
+ font-size: 18px;
+ line-height: 1.35;
+ font-weight: 620;
+}
+
+.markdown-editor-root .cm-md-quote {
+ margin: 8px 0;
+ border-left: 3px solid color-mix(in srgb, var(--border) 70%, transparent);
+ color: var(--markdown-muted);
+ font-style: italic;
+}
+
+.markdown-editor-root .cm-md-list {
+ line-height: 1.65;
+ position: relative;
+ padding-left: 1.15em;
+}
+
+.markdown-editor-root .cm-md-bullet {
+ color: var(--markdown-text);
+ line-height: inherit;
+}
+
+.markdown-editor-root .cm-md-rule {
+ color: color-mix(in srgb, var(--markdown-muted) 45%, transparent);
+ letter-spacing: 0.12em;
+}
+
+.markdown-editor-root .cm-activeLine {
+ background: color-mix(in srgb, var(--panel-subtle) 42%, transparent);
+}
+
+.markdown-editor-root .cm-selectionBackground,
+.markdown-editor-root .cm-content ::selection {
+ background: color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+.markdown-editor-root .cm-cursor {
+ border-left-color: var(--text);
+}
+
+.markdown-editor-root .cm-matchingBracket,
+.markdown-editor-root .cm-nonmatchingBracket {
+ background: color-mix(in srgb, var(--panel-subtle) 70%, transparent);
}
.markdown-format-size {
@@ -447,14 +598,14 @@ html:has(.fullscreen) #app {
height: 32px;
border-radius: 6px;
overflow: hidden;
- background: rgba(255, 255, 255, 0.08);
+ background: color-mix(in srgb, var(--panel-subtle) 72%, transparent);
}
.markdown-format-size select {
height: 32px;
border: none;
background: transparent;
- color: rgba(255, 255, 255, 0.9);
+ color: var(--text);
padding: 0 8px;
font: inherit;
font-size: 12px;
@@ -464,7 +615,7 @@ html:has(.fullscreen) #app {
.markdown-format-sep {
width: 1px;
height: 20px;
- background: rgba(255, 255, 255, 0.14);
+ background: color-mix(in srgb, var(--border) 65%, transparent);
}
.markdown-link-modal {
@@ -781,7 +932,7 @@ html:has(.fullscreen) #app {
.markdown-link-popover {
position: absolute;
- z-index: 10;
+ z-index: 24;
display: flex;
align-items: center;
gap: 2px;
@@ -817,18 +968,6 @@ html:has(.fullscreen) #app {
position: relative;
}
-.markdown-editor-surface {
- flex: 1 1 auto;
- min-height: min(70vh, 760px);
- outline: none;
-}
-
-.markdown-editor-surface--markdown {
- max-width: none;
- margin: 0;
- padding: 22px 24px 28px;
-}
-
.markdown-editor-textarea {
width: 100%;
min-height: min(70vh, 760px);
@@ -1010,110 +1149,6 @@ html:has(.fullscreen) #app {
.markdown p { margin: 1em 0; }
.markdown ul, .markdown ol { margin: .8em 0; padding-left: 1.4rem; }
-.markdown-doc {
- max-width: 720px;
- margin: 0 auto;
- padding: 32px 28px 36px;
- line-height: 1.8;
- color: var(--markdown-text);
- font-size: 16px;
- background: transparent;
- border: 0;
- border-radius: 0;
-}
-
-.markdown-doc h1 {
- margin: 0 0 24px;
- font-size: 28px;
- font-weight: 600;
- line-height: 1.25;
- letter-spacing: -0.02em;
- color: var(--markdown-text);
-}
-
-.markdown-doc h2 {
- margin: 36px 0 16px;
- font-size: 22px;
- font-weight: 600;
- line-height: 1.3;
- letter-spacing: -0.01em;
- color: var(--markdown-text);
-}
-
-.markdown-doc h3 {
- margin: 28px 0 12px;
- font-size: 18px;
- font-weight: 600;
- line-height: 1.35;
- color: var(--markdown-text);
-}
-
-.markdown-doc p {
- font-size: 15px;
- line-height: 1.75;
- color: var(--markdown-muted);
- margin: 0 0 1.2em;
-}
-
-.markdown-doc li {
- font-size: 15px;
- line-height: 1.7;
- color: var(--markdown-muted);
- margin-bottom: 0.3em;
-}
-
-.markdown-doc ul, .markdown-doc ol {
- margin: 8px 0 20px;
- padding-left: 1.3em;
-}
-
-.markdown-doc blockquote {
- margin: 20px 0;
- padding: 2px 0 2px 20px;
- border-left: 3px solid color-mix(in srgb, var(--border) 70%, transparent);
- color: var(--markdown-muted);
- font-style: italic;
-}
-
-.markdown-doc hr {
- border: none;
- border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
- margin: 32px 0;
-}
-
-.markdown-doc img {
- max-width: 100%;
- border-radius: 8px;
- margin: 16px 0;
-}
-
-.markdown-doc code:not(.hljs) {
- font-family: var(--font-mono, ui-monospace, monospace);
- font-size: .9em;
- background: var(--inline-code-bg);
- color: var(--inline-code-text);
- border: 1px solid var(--inline-code-border);
- border-radius: 6px;
- padding: 2px 6px;
-}
-
-.markdown-doc .code-viewer {
- margin: 14px 0;
- border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
- border-radius: 10px;
-}
-
-.markdown-doc a {
- color: inherit;
- text-decoration: underline;
- text-decoration-color: color-mix(in srgb, var(--text-secondary) 45%, transparent);
- text-underline-offset: 0.18em;
-}
-
-.markdown-doc a:hover {
- text-decoration-color: currentcolor;
-}
-
/* ── HTML frame ── */
.html-rendered-frame {
@@ -1171,14 +1206,6 @@ html:has(.fullscreen) #app {
min-height: 58vh;
padding: 14px;
}
- .markdown-editor-surface--markdown {
- padding: 16px;
- }
- .markdown-doc { padding: 16px; }
- .markdown-doc h1 { font-size: 27px; }
- .markdown-doc h2 { font-size: 22px; }
- .markdown-doc h3 { font-size: 18px; }
- .markdown-doc p, .markdown-doc li { font-size: 15px; }
}
/* ── Directory tree ── */
diff --git a/test/test-markdown-preview.js b/test/test-markdown-preview.js
index 5f48ebb0..fe62d66c 100644
--- a/test/test-markdown-preview.js
+++ b/test/test-markdown-preview.js
@@ -1,10 +1,8 @@
import assert from 'assert';
import { pathToFileURL } from 'url';
-import { renderMarkdown } from '../dist/ui/file-preview/src/components/markdown-renderer.js';
-import { resolveMarkdownLink, rewriteWikiLinks } from '../dist/ui/file-preview/src/markdown/linking.js';
+import { resolveMarkdownLink } from '../dist/ui/file-preview/src/markdown/linking.js';
import { extractMarkdownOutline } from '../dist/ui/file-preview/src/markdown/outline.js';
-import { getRenderedMarkdownCopyText } from '../dist/ui/file-preview/src/markdown/preview.js';
import { renderMarkdownEditorShell } from '../dist/ui/file-preview/src/markdown/editor.js';
import { createMarkdownController } from '../dist/ui/file-preview/src/markdown/controller.js';
import { createSlugTracker, slugifyMarkdownHeading } from '../dist/ui/file-preview/src/markdown/slugify.js';
@@ -125,40 +123,28 @@ async function testLinkResolution() {
console.log('✓ anchors, file links, absolute paths, external URLs, and wiki links resolve correctly');
}
-async function testWikiRewriteAndRendering() {
- console.log('\n--- Test 4: wiki link rewrite and rendering ---');
+async function testOutlineFromMarkdownSource() {
+ console.log('\n--- Test 4: source-backed outline text ---');
- const rewritten = rewriteWikiLinks('See [[Meeting Notes#Action Items|Actions]] and `[[Code]]`.');
- assert.ok(rewritten.includes('[Actions](./Meeting%20Notes.md#action-items "mcp-wiki:'), 'Wiki links should rewrite to markdown links with round-trip metadata');
- assert.ok(rewritten.includes('`[[Code]]`'), 'Inline code should remain untouched');
- const multiTickRewrite = rewriteWikiLinks('Use ``[[Code]]`` and `code [[still-not-link]]` samples.');
- assert.ok(multiTickRewrite.includes('``[[Code]]``'), 'Multi-backtick inline code should remain untouched');
- assert.ok(multiTickRewrite.includes('`code [[still-not-link]]`'), 'Wiki links inside inline code should stay literal');
-
- const fencedRewrite = rewriteWikiLinks([
- '````md',
- '```',
- '[[Inside Code]]',
- '````',
- '[[Outside Code]]',
- ].join('\n'));
- assert.ok(fencedRewrite.includes('[[Inside Code]]'), 'Long code fences should remain open until a matching-length close fence appears');
- assert.ok(fencedRewrite.includes('[Outside Code](./Outside%20Code.md "mcp-wiki:'), 'Wiki links outside closed fences should still rewrite');
-
- const html = renderMarkdown([
+ const outline = extractMarkdownOutline([
'# Title',
'## Details',
'## Details',
'',
- 'Go to [[Meeting Notes#Action Items|Actions]].',
+ '### Linked [Section](#details)',
].join('\n'));
- assert.ok(html.includes('id="title"'), 'Rendered markdown should include slugged heading ids');
- assert.ok(html.includes('id="details-2"'), 'Duplicate headings should receive unique ids');
- assert.ok(html.includes('href="./Meeting%20Notes.md#action-items"'), 'Rendered markdown should keep rewritten wiki links');
- assert.ok(html.includes('data-wiki-link="[[Meeting Notes#Action Items|Actions]]"'), 'Rendered markdown should preserve original wiki-link syntax for editing');
+ assert.deepStrictEqual(
+ outline.map((item) => ({ id: item.id, text: item.text, level: item.level })),
+ [
+ { id: 'title', text: 'Title', level: 1 },
+ { id: 'details', text: 'Details', level: 2 },
+ { id: 'details-2', text: 'Details', level: 2 },
+ { id: 'linked-section', text: 'Linked Section', level: 3 },
+ ],
+ );
- console.log('✓ markdown rendering uses preview heading ids and rewritten wiki links');
+ console.log('✓ outline text strips inline markdown and dedupes heading slugs');
}
async function testFailedSaveResyncsEditBaseline() {
@@ -274,7 +260,6 @@ async function testFailedSaveResyncsEditBaseline() {
'omega',
'',
].join('\n'), 'The simulated disk should keep the partial save');
- assert.strictEqual(state.sourceContent, diskContent, 'Source content should match the latest disk contents');
assert.strictEqual(state.fullDocumentContent, diskContent, 'The full document baseline should match the latest disk contents');
assert.strictEqual(state.draftContent, [
'alpha updated',
@@ -370,6 +355,80 @@ async function testSuccessfulSaveResetsUndoBaseline() {
console.log('✓ successful saves clear undo state against the latest saved content');
}
+async function testInFlightSaveKeepsNewerDraftDirty() {
+ console.log('\n--- Test 13: in-flight saves keep newer drafts dirty ---');
+
+ const payload = {
+ fileName: 'notes.md',
+ filePath: '/Users/tester/docs/notes.md',
+ fileType: 'markdown',
+ content: 'alpha\n',
+ };
+
+ const previousWindow = globalThis.window;
+ const previousDocument = globalThis.document;
+ globalThis.window = { setTimeout: globalThis.setTimeout };
+ globalThis.document = {
+ getElementById: () => null,
+ querySelector: () => null,
+ };
+
+ let resolveEditBlock;
+ let savedString = null;
+
+ const controller = createMarkdownController({
+ callTool: async (name, args) => {
+ if (name !== 'edit_block') {
+ throw new Error(`Unexpected tool call: ${name}`);
+ }
+ savedString = args.new_string;
+ await new Promise((resolve) => {
+ resolveEditBlock = resolve;
+ });
+ return {
+ content: [{ type: 'text', text: 'Successfully applied 1 edit(s) to notes.md' }],
+ structuredContent: {
+ fileName: payload.fileName,
+ filePath: payload.filePath,
+ fileType: payload.fileType,
+ },
+ };
+ },
+ getAvailableDisplayModes: () => ['inline', 'fullscreen'],
+ getCurrentDisplayMode: () => 'inline',
+ getCurrentPayload: () => payload,
+ setExpanded: () => {},
+ storePayloadOverride: () => {},
+ rerender: () => {},
+ updateSaveStatus: () => {},
+ });
+
+ try {
+ const state = controller.getState(payload);
+ state.draftContent = 'beta\n';
+ state.dirty = true;
+
+ const savePromise = controller.saveDocument();
+ await new Promise((resolve) => setTimeout(resolve, 0));
+
+ state.draftContent = 'gamma\n';
+ state.dirty = true;
+ resolveEditBlock();
+ await savePromise;
+
+ assert.strictEqual(savedString, 'beta\n', 'The in-flight save should write the original save snapshot');
+ assert.strictEqual(state.fullDocumentContent, 'beta\n', 'The saved snapshot should become the disk baseline');
+ assert.strictEqual(state.draftContent, 'gamma\n', 'Newer local edits should remain in the draft');
+ assert.strictEqual(state.dirty, true, 'Newer local edits should stay dirty after the older save completes');
+ } finally {
+ controller.disposeHandles();
+ globalThis.window = previousWindow;
+ globalThis.document = previousDocument;
+ }
+
+ console.log('✓ in-flight saves keep newer local edits dirty');
+}
+
async function testFullscreenWorkspaceHelpers() {
console.log('\n--- Test 6: fullscreen document helpers ---');
@@ -399,10 +458,22 @@ async function testFullscreenWorkspaceHelpers() {
async function testCopyFormatsAndEditorShell() {
console.log('\n--- Test 8: copy formats and editor shell ---');
- const renderedCopy = getRenderedMarkdownCopyText('# Title\n\n- First\n- Second\n\n**Bold** text');
- assert.ok(renderedCopy.includes('Title'), 'Rendered copy should preserve heading text');
- assert.ok(renderedCopy.includes('- First'), 'Rendered copy should preserve list text');
- assert.ok(renderedCopy.includes('Bold text'), 'Rendered copy should flatten formatted inline text');
+ const copySource = '# Title\n\n- First\n- Second\n\n**Bold** text';
+ const controller = createMarkdownController({
+ getAvailableDisplayModes: () => ['inline', 'fullscreen'],
+ getCurrentDisplayMode: () => 'inline',
+ getCurrentPayload: () => undefined,
+ setExpanded: () => {},
+ storePayloadOverride: () => {},
+ rerender: () => {},
+ updateSaveStatus: () => {},
+ });
+ assert.strictEqual(controller.getCopyText({
+ fileName: 'notes.md',
+ filePath: '/Users/tester/docs/notes.md',
+ fileType: 'markdown',
+ content: copySource,
+ }), copySource, 'Copy should preserve markdown source exactly');
const markdownShell = renderMarkdownEditorShell({
view: 'markdown',
@@ -424,7 +495,7 @@ async function testCopyFormatsAndEditorShell() {
assert.ok(!rawShell.includes('markdown-editor-context-menu'), 'Raw mode should not include markdown formatting context controls');
assert.ok(!rawShell.includes('data-format="bold"'), 'Raw mode should not include formatting buttons');
- console.log('✓ raw/rendered copy support and mode-specific editor shell are wired');
+ console.log('✓ source copy support and mode-specific editor shell are wired');
}
async function testPartialDocumentBecomesNewEditBaseline() {
@@ -468,7 +539,6 @@ async function testPartialDocumentBecomesNewEditBaseline() {
await controller.requestEditMode(partialPayload);
const nextState = controller.getState(currentPayload);
- assert.strictEqual(nextState.mode, 'edit');
assert.strictEqual(nextState.fullDocumentContent, fullContent, 'The full document should replace the truncated edit baseline');
assert.strictEqual(nextState.draftContent, fullContent, 'Draft content should start from the full document');
assert.strictEqual(controller.isUndoAvailable(nextState), false, 'Undo should stay disabled until the user edits the full document');
@@ -525,13 +595,14 @@ export default async function runTests() {
await testSlugGeneration();
await testOutlineExtraction();
await testLinkResolution();
- await testWikiRewriteAndRendering();
+ await testOutlineFromMarkdownSource();
await testFullscreenWorkspaceHelpers();
await testCopyFormatsAndEditorShell();
await testPartialDocumentBecomesNewEditBaseline();
await testRefreshDoesNotMisclassifyMarkdownContentAsDeletion();
await testFailedSaveResyncsEditBaseline();
await testSuccessfulSaveResetsUndoBaseline();
+ await testInFlightSaveKeepsNewerDraftDirty();
console.log('\n✅ Markdown preview tests passed!');
return true;
} catch (error) {