852 lines
29 KiB
TypeScript
852 lines
29 KiB
TypeScript
import { EditorView } from "@codemirror/view";
|
|
import { isolateHistory } from "@codemirror/commands";
|
|
import { throttle } from "@silverbulletmd/silverbullet/lib/async";
|
|
import {
|
|
getNameFromPath,
|
|
getOffsetFromHeader,
|
|
getOffsetFromLineColumn,
|
|
getPathExtension,
|
|
isMarkdownPath,
|
|
type Path,
|
|
} from "@silverbulletmd/silverbullet/lib/ref";
|
|
import type { PageMeta } from "@silverbulletmd/silverbullet/type/index";
|
|
import type {
|
|
PageCreatingContent,
|
|
PageCreatingEvent,
|
|
} from "@silverbulletmd/silverbullet/type/event";
|
|
import {
|
|
notFoundError,
|
|
offlineError,
|
|
} from "@silverbulletmd/silverbullet/constants";
|
|
import {
|
|
createEditorState,
|
|
externalUpdate,
|
|
} from "./codemirror/editor_state.ts";
|
|
import { externalSource } from "./codemirror/external_presence.ts";
|
|
import { diffAndPrepareChanges } from "./codemirror/cm_util.ts";
|
|
import { computeExternalChanges } from "./external_merge.ts";
|
|
import { parsePageMetaLastModified } from "./lib/page_meta.ts";
|
|
import { DocumentEditor } from "./document_editor.ts";
|
|
import { fsEndpoint } from "./spaces/constants.ts";
|
|
import { parseMarkdown } from "./markdown_parser/parser.ts";
|
|
import type { Client } from "./client.ts";
|
|
import type { LocationState } from "./navigator.ts";
|
|
|
|
const frontMatterRegex = /^---\n(([^\n]|\n)*?)---\n/;
|
|
|
|
const autoSaveInterval = 1000;
|
|
|
|
/**
|
|
* Manages content lifecycle: loading, saving, reloading, and editor mode switching
|
|
* for both markdown pages and non-markdown documents.
|
|
*/
|
|
export class ContentManager {
|
|
documentEditor: DocumentEditor | null = null;
|
|
saveTimeout?: ReturnType<typeof setTimeout>;
|
|
private scrollRestoreCleanup?: () => void;
|
|
// Last content known to be on disk (base for 3-way external merges)
|
|
private lastKnownDiskText = "";
|
|
// lastModified backing lastKnownDiskText, used to reject an apply whose
|
|
// fetched content is older than what's already applied (out-of-order
|
|
// resolution of overlapping reloads for the same page)
|
|
private lastKnownDiskModified?: number;
|
|
// Resolves once the in-flight write has updated the base above
|
|
private pendingWrite?: Promise<void>;
|
|
debouncedUpdateEvent = throttle(() => {
|
|
this.client.eventHook
|
|
.dispatchEvent("editor:updated")
|
|
.catch((e) => console.error("Error dispatching editor:updated event", e));
|
|
}, 1000);
|
|
|
|
constructor(private client: Client) {}
|
|
|
|
// Save the current page or document
|
|
save(immediate = false): Promise<void> {
|
|
return new Promise((resolve, reject) => {
|
|
if (this.saveTimeout) {
|
|
clearTimeout(this.saveTimeout);
|
|
}
|
|
this.saveTimeout = setTimeout(
|
|
() => {
|
|
if (
|
|
!this.client.ui.viewState.unsavedChanges ||
|
|
this.client.isReadOnlyMode()
|
|
) {
|
|
// No unsaved changes, or read-only mode, not gonna save
|
|
return resolve();
|
|
}
|
|
|
|
if (this.isDocumentEditor()) {
|
|
console.log(
|
|
"Requesting save for document",
|
|
this.client.currentPath(),
|
|
);
|
|
void this.client.dispatchAppEvent(
|
|
"editor:documentSaving",
|
|
this.client.currentPath(),
|
|
);
|
|
|
|
// Only thing we can really do is request a save
|
|
this.documentEditor.requestSave();
|
|
|
|
return resolve();
|
|
} else {
|
|
// Do not save while IME composition is active
|
|
if (this.client.editorView.composing) {
|
|
// Re-schedule save after composition likely ends
|
|
this.saveTimeout = setTimeout(
|
|
this.save.bind(this),
|
|
autoSaveInterval,
|
|
);
|
|
return resolve();
|
|
}
|
|
|
|
console.log("Saving page", this.client.currentPath());
|
|
void this.client.dispatchAppEvent(
|
|
"editor:pageSaving",
|
|
this.client.currentName(),
|
|
);
|
|
const text = this.client.editorView.state.sliceDoc(0);
|
|
const writePromise = this.client.space.writePage(
|
|
this.client.currentName(),
|
|
text,
|
|
);
|
|
// Separate from the promise save() returns: waiters need the base
|
|
// updated, not the events and meta fetch that follow it.
|
|
const baseUpdated = writePromise.then(
|
|
(meta) =>
|
|
this.adoptOwnWriteAsBase(
|
|
text,
|
|
parsePageMetaLastModified(meta.lastModified),
|
|
),
|
|
() => {}, // errors are reported by the .catch() below
|
|
);
|
|
this.pendingWrite = baseUpdated;
|
|
void baseUpdated.then(() => {
|
|
if (this.pendingWrite === baseUpdated) {
|
|
this.pendingWrite = undefined;
|
|
}
|
|
});
|
|
writePromise
|
|
.then(async (meta) => {
|
|
this.client.ui.viewDispatch({ type: "page-saved" });
|
|
await this.client.dispatchAppEvent(
|
|
"editor:pageSaved",
|
|
this.client.currentName(),
|
|
meta,
|
|
);
|
|
|
|
// At this all the essential stuff is done, let's proceed
|
|
resolve();
|
|
|
|
// In the background we'll fetch any enriched meta data, if any
|
|
const enrichedMeta =
|
|
await this.client.objectIndex.getObjectByRef(
|
|
this.client.currentName(),
|
|
"page",
|
|
this.client.currentName(),
|
|
);
|
|
if (enrichedMeta) {
|
|
this.client.ui.viewDispatch({
|
|
type: "update-current-page-meta",
|
|
meta: enrichedMeta,
|
|
});
|
|
|
|
// Skip during IME composition
|
|
if (!this.client.editorView.composing) {
|
|
// Trigger editor re-render to update Lua widgets
|
|
// with the new metadata
|
|
this.client.editorView.dispatch({});
|
|
}
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
this.client.ui.flashNotification(
|
|
"Could not save page, retrying again in 10 seconds",
|
|
"error",
|
|
);
|
|
this.saveTimeout = setTimeout(this.save.bind(this), 10000);
|
|
reject(e);
|
|
});
|
|
}
|
|
},
|
|
immediate ? 0 : autoSaveInterval,
|
|
);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Records the text we just wrote as the new base, unless a newer state was
|
|
* adopted while this write was in flight: dragging the base backwards would
|
|
* make the next merge apply that newer change a second time.
|
|
*/
|
|
private adoptOwnWriteAsBase(text: string, modified: number | undefined) {
|
|
if (
|
|
modified !== undefined &&
|
|
this.lastKnownDiskModified !== undefined &&
|
|
modified < this.lastKnownDiskModified
|
|
) {
|
|
return;
|
|
}
|
|
this.lastKnownDiskText = text;
|
|
this.lastKnownDiskModified = modified;
|
|
}
|
|
|
|
async reloadEditor() {
|
|
if (!this.client.systemReady) return;
|
|
|
|
console.log("Reloading editor");
|
|
clearTimeout(this.saveTimeout);
|
|
|
|
try {
|
|
if (isMarkdownPath(this.client.currentPath())) {
|
|
await this.loadPage({ path: this.client.currentPath() }, false);
|
|
} else {
|
|
await this.loadDocumentEditor({ path: this.client.currentPath() });
|
|
}
|
|
} catch {
|
|
console.log(this.client.currentPath());
|
|
console.error("There was an error during reload");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Cleanly leave the current page/document before navigating to a new one:
|
|
* unwatches the file, saves pending changes, and waits for index processing.
|
|
* Returns { previousPath, loadingDifferentPath }.
|
|
*/
|
|
private async leaveCurrentPage(newPath: string) {
|
|
const previousPath = this.client.ui.viewState.current?.path;
|
|
const loadingDifferentPath = previousPath ? previousPath !== newPath : true;
|
|
|
|
if (previousPath) {
|
|
this.client.space.unwatchFile(previousPath);
|
|
await this.save(true);
|
|
// Wait for index to process the saved page so the next page renders
|
|
// with up-to-date widget data. Skip during initial indexing though:
|
|
// the queue may contain hundreds of files and blocking navigation on
|
|
// a full drain would make the app feel unresponsive. Cap the wait so
|
|
// a backed-up queue (e.g. just after sync) doesn't stall navigation
|
|
// for many seconds: fresh widget data is a nice-to-have.
|
|
if (await this.client.objectIndex.hasFullIndexCompleted()) {
|
|
await Promise.race([
|
|
this.client.objectIndex.awaitIndexQueueDrain(),
|
|
new Promise<void>((resolve) => setTimeout(resolve, 2000)),
|
|
]);
|
|
}
|
|
}
|
|
|
|
if (loadingDifferentPath) {
|
|
// Drop session prewarmed widget results: iframe widgets key prewarms
|
|
// by bodyText alone, so without this the next page would reuse the
|
|
// previous page's query results.
|
|
this.client.widgetCache.clearPrewarm();
|
|
}
|
|
|
|
return { previousPath, loadingDifferentPath };
|
|
}
|
|
|
|
async loadDocumentEditor(locationState: LocationState) {
|
|
const path = locationState.path;
|
|
if (isMarkdownPath(path)) throw Error("This is a markdown path");
|
|
|
|
const { previousPath, loadingDifferentPath } =
|
|
await this.leaveCurrentPage(path);
|
|
|
|
const extension = getPathExtension(path as Path);
|
|
|
|
// Create the document editor if it doesn't already exist
|
|
if (
|
|
!this.isDocumentEditor() ||
|
|
this.documentEditor.extension !== extension
|
|
) {
|
|
try {
|
|
await this.switchToDocumentEditor(extension);
|
|
} catch (e: any) {
|
|
// If there is no document editor we will open the file raw
|
|
if (e.message.includes("Couldn't find")) {
|
|
this.client.openUrl(
|
|
`${document.baseURI.replace(/\/*$/, "") + fsEndpoint}/${path}`,
|
|
);
|
|
throw new Error("Opened externally");
|
|
}
|
|
|
|
throw e;
|
|
}
|
|
|
|
if (!this.isDocumentEditor()) {
|
|
throw new Error("Problem setting up document editor");
|
|
}
|
|
}
|
|
|
|
// This can throw, but that will be catched and handled upstream.
|
|
const doc = await this.client.space.readDocument(path);
|
|
|
|
this.documentEditor!.openFile(doc.data, doc.meta, locationState.details);
|
|
|
|
this.client.space.watchFile(path);
|
|
|
|
this.client.ui.viewDispatch({
|
|
type: "document-editor-loaded",
|
|
meta: doc.meta,
|
|
path: path,
|
|
});
|
|
|
|
this.client.eventHook
|
|
.dispatchEvent(
|
|
loadingDifferentPath
|
|
? "editor:documentLoaded"
|
|
: "editor:documentReloaded",
|
|
path,
|
|
previousPath,
|
|
)
|
|
.catch(console.error);
|
|
}
|
|
|
|
async loadPage(
|
|
locationState: LocationState,
|
|
navigateWithinPage: boolean = true,
|
|
) {
|
|
const path = locationState.path;
|
|
if (!isMarkdownPath(path)) throw Error("This is not a markdown path");
|
|
|
|
const { previousPath, loadingDifferentPath } =
|
|
await this.leaveCurrentPage(path);
|
|
const pageName = getNameFromPath(path);
|
|
|
|
// Fetch next page to open
|
|
let doc;
|
|
let markerIndex = -1;
|
|
try {
|
|
doc = await this.client.space.readPage(pageName);
|
|
} catch (e: any) {
|
|
if (
|
|
e.message !== notFoundError.message &&
|
|
e.message !== offlineError.message
|
|
) {
|
|
// If the error is not a "not found" or "offline" error, rethrow it
|
|
throw e;
|
|
}
|
|
|
|
if (e.message === offlineError.message) {
|
|
console.info(
|
|
"Currently offline, will assume page doesn't exist:",
|
|
pageName,
|
|
);
|
|
}
|
|
|
|
// Scenarios:
|
|
// 1. We got a not found error -> Create an empty page
|
|
// 2. We got a offline error (which meant that the service worker didn't locally retrieve the page either so likely it doesn't exist) -> Create a new page
|
|
// Either way... we create an empty page!
|
|
|
|
console.log(`Page doesn't exist, creating new page: ${pageName}`);
|
|
|
|
// Mock up the page. We won't yet safe it, because the user may not even
|
|
// want to create that page
|
|
doc = {
|
|
text: "",
|
|
meta: {
|
|
ref: pageName,
|
|
tags: ["page"],
|
|
name: pageName,
|
|
lastModified: "",
|
|
created: "",
|
|
perm: "rw",
|
|
} as PageMeta,
|
|
};
|
|
|
|
// Let's dispatch a editor:pageCreating event to see if anybody wants to do something before the page is created
|
|
const results = (await this.client.dispatchAppEvent(
|
|
"editor:pageCreating",
|
|
{
|
|
name: pageName,
|
|
} as PageCreatingEvent,
|
|
)) as PageCreatingContent[];
|
|
|
|
if (results.length === 1) {
|
|
doc.text = results[0].text;
|
|
doc.meta.perm = results[0].perm;
|
|
// check for |^| and remove it; record position to place cursor later
|
|
const cursorMarker = "|^|";
|
|
const idx = doc.text.indexOf(cursorMarker);
|
|
if (idx !== -1) {
|
|
markerIndex = idx;
|
|
doc.text =
|
|
doc.text.slice(0, idx) + doc.text.slice(idx + cursorMarker.length);
|
|
}
|
|
} else if (results.length > 1) {
|
|
console.error(
|
|
"Multiple responses for editor:pageCreating event, this is not supported",
|
|
);
|
|
}
|
|
}
|
|
|
|
// This could create an invalid editor state, but that doesn't matter, we'll update it later
|
|
this.switchToPageEditor();
|
|
|
|
// Record last-opened time best-effort and non-blocking: this is a write
|
|
// to the shared index store, and awaiting it would stall navigation
|
|
// behind an in-progress reindex for no user-visible benefit.
|
|
void this.client.pageMetaAugmenter
|
|
.setAugmentation(pageName, { lastOpened: Date.now() })
|
|
.catch((e) =>
|
|
console.warn("Could not record lastOpened for", pageName, e),
|
|
);
|
|
|
|
this.client.ui.viewDispatch({
|
|
type: "page-loaded",
|
|
meta: doc.meta,
|
|
path: path,
|
|
});
|
|
|
|
await this.refreshCurrentPageMeta(pageName, doc.meta);
|
|
|
|
// When loading a different page OR if the page is read-only (in which case we don't want to apply local patches, because there's no point)
|
|
if (loadingDifferentPath || doc.meta.perm === "ro") {
|
|
// Fresh state, nothing to diff against yet: doc.text *is* the new base.
|
|
this.lastKnownDiskText = doc.text;
|
|
this.lastKnownDiskModified = parsePageMetaLastModified(
|
|
doc.meta.lastModified,
|
|
);
|
|
const editorState = createEditorState(
|
|
this.client,
|
|
pageName,
|
|
doc.text,
|
|
doc.meta.perm === "ro",
|
|
);
|
|
this.client.editorView.setState(editorState);
|
|
} else {
|
|
// Same-page reload: applyExternalPatches diffs against the base from
|
|
// the *previous* load (this.lastKnownDiskText, untouched above) and
|
|
// updates it to doc.text itself.
|
|
this.applyExternalPatches(
|
|
doc.text,
|
|
parsePageMetaLastModified(doc.meta.lastModified),
|
|
);
|
|
}
|
|
|
|
this.client.space.watchFile(path);
|
|
|
|
if (navigateWithinPage) {
|
|
// Setup scroll position, cursor position, etc
|
|
try {
|
|
this.navigateWithinPage(locationState);
|
|
} catch {
|
|
// We don't really care if this fails.
|
|
}
|
|
}
|
|
// Note: these events are dispatched asynchronously deliberately (not waiting for results)
|
|
this.client.eventHook
|
|
.dispatchEvent(
|
|
loadingDifferentPath ? "editor:pageLoaded" : "editor:pageReloaded",
|
|
pageName,
|
|
previousPath ? getNameFromPath(previousPath) : undefined,
|
|
)
|
|
.catch(console.error);
|
|
|
|
// If a cursor marker was found for a newly-created page, place the
|
|
// cursor there now (after navigateWithinPage so it doesn't get
|
|
// overwritten by default positioning).
|
|
if (markerIndex !== -1) {
|
|
try {
|
|
const pos = Math.max(
|
|
0,
|
|
Math.min(markerIndex, this.client.editorView.state.doc.length),
|
|
);
|
|
this.client.editorView.dispatch({
|
|
selection: { anchor: pos },
|
|
effects: [EditorView.scrollIntoView(pos, { y: "center" })],
|
|
});
|
|
this.client.editorView.focus();
|
|
} catch (e) {
|
|
console.error("Failed to set cursor at cursor marker:", e);
|
|
}
|
|
}
|
|
}
|
|
|
|
isDocumentEditor(): this is { documentEditor: DocumentEditor } & this {
|
|
return this.documentEditor !== null;
|
|
}
|
|
|
|
switchToPageEditor() {
|
|
if (!this.isDocumentEditor()) return;
|
|
|
|
// Deliberately not awaiting this function as destroying & last-save can be handled in the background
|
|
this.documentEditor.destroy();
|
|
// @ts-expect-error: This is there the hacked type-guard from isDocumentEditor fails
|
|
this.documentEditor = null;
|
|
|
|
this.client.rebuildEditorState();
|
|
|
|
document.getElementById("sb-editor")!.classList.remove("hide-cm");
|
|
}
|
|
|
|
async switchToDocumentEditor(extension: string) {
|
|
if (this.documentEditor) {
|
|
// Deliberately not awaiting this function as destroying & last-save can be handled in the background
|
|
this.documentEditor.destroy();
|
|
}
|
|
|
|
// This is probably not the best way to hide the codemirror editor, but it works
|
|
document.getElementById("sb-editor")!.classList.add("hide-cm");
|
|
|
|
this.documentEditor = new DocumentEditor(
|
|
document.getElementById("sb-editor")!,
|
|
this.client,
|
|
(path, content) => {
|
|
this.client.space
|
|
.writeDocument(path, content)
|
|
.then(async (meta) => {
|
|
this.client.ui.viewDispatch({ type: "document-editor-saved" });
|
|
|
|
await this.client.dispatchAppEvent(
|
|
"editor:documentSaved",
|
|
path,
|
|
meta,
|
|
);
|
|
})
|
|
.catch(() => {
|
|
this.client.ui.flashNotification(
|
|
"Could not save document, retrying again in 10 seconds",
|
|
"error",
|
|
);
|
|
this.saveTimeout = setTimeout(this.save.bind(this), 10000);
|
|
});
|
|
},
|
|
);
|
|
|
|
await this.documentEditor.init(extension);
|
|
|
|
// We have to rebuild the editor state here to update the keymap correctly
|
|
// This is a little hacky but any other solution would pose a larger rewrite
|
|
this.client.rebuildEditorState();
|
|
this.client.editorView.contentDOM.blur();
|
|
}
|
|
|
|
setEditorText(newText: string, shouldIsolateHistory = false) {
|
|
const currentText = this.client.editorView.state.sliceDoc();
|
|
const allChanges = diffAndPrepareChanges(currentText, newText);
|
|
this.client.editorView.dispatch({
|
|
changes: allChanges,
|
|
annotations: shouldIsolateHistory ? isolateHistory.of("full") : undefined,
|
|
});
|
|
}
|
|
|
|
// Applies an external (storage-side) content change as a minimal,
|
|
// cursor-preserving transaction: a 3-way merge against the last known
|
|
// on-disk text so unsaved local edits survive. The transaction is marked
|
|
// externalUpdate (skips the save-on-change handler) and isolated in undo
|
|
// history, so a single undo reverts exactly this external change.
|
|
// Returns whether a change was actually dispatched, so callers can skip
|
|
// follow-up work (meta refresh, notifications) for a dropped/no-op apply.
|
|
private applyExternalPatches(
|
|
newText: string,
|
|
modified: number | undefined,
|
|
source = "external",
|
|
): boolean {
|
|
if (
|
|
modified !== undefined &&
|
|
this.lastKnownDiskModified !== undefined &&
|
|
modified < this.lastKnownDiskModified
|
|
) {
|
|
// Two reloads for this page were in flight and this older one resolved
|
|
// last (e.g. a direct reloadEditor racing an SSE-triggered
|
|
// reloadPageContent). Applying it would revert already-applied,
|
|
// newer content.
|
|
console.log(
|
|
"Dropping stale external patch, older than already-applied content",
|
|
{ source, modified, lastKnownDiskModified: this.lastKnownDiskModified },
|
|
);
|
|
return false;
|
|
}
|
|
const currentText = this.client.editorView.state.sliceDoc();
|
|
const changes = computeExternalChanges(
|
|
this.lastKnownDiskText,
|
|
newText,
|
|
currentText,
|
|
);
|
|
this.lastKnownDiskText = newText;
|
|
this.lastKnownDiskModified = modified;
|
|
if (changes.empty) {
|
|
return false;
|
|
}
|
|
this.client.editorView.dispatch({
|
|
changes,
|
|
annotations: [
|
|
isolateHistory.of("full"),
|
|
externalUpdate.of(true),
|
|
externalSource.of(source),
|
|
],
|
|
});
|
|
return true;
|
|
}
|
|
|
|
// Fetch the current page's content from storage and apply it as an
|
|
// external patch -- the live-edit path (no full loadPage, no editor state
|
|
// rebuild). Still refreshes enriched page meta and dispatches
|
|
// editor:pageReloaded when a real change was applied, so plugs and
|
|
// frontmatter-derived UI (page decorations) stay in sync with the file
|
|
// that changed on disk, per the documented contract of that event.
|
|
async reloadPageContent(source = "external"): Promise<void> {
|
|
const path = this.client.currentPath();
|
|
// Defensive, not currently reachable from the file:changed listener
|
|
// (which already gates on isMarkdownPath before calling in): kept so
|
|
// this method stays safe to call directly with an unchecked path, which
|
|
// future callers (e.g. an SSE push handler) may do.
|
|
if (!isMarkdownPath(path)) {
|
|
return this.reloadEditor();
|
|
}
|
|
const doc = await this.client.space.readPage(getNameFromPath(path));
|
|
// A write that finished during the read left the base behind what the read
|
|
// returned, so merging now would re-insert our own text. After the read,
|
|
// not before: it's writes overlapping the *fetch* that strand the base.
|
|
// Not covered by ownWrite -- a write overlapping another space operation
|
|
// dispatches no event of its own, and surfaces later via a probe instead.
|
|
if (this.pendingWrite) {
|
|
await this.pendingWrite;
|
|
}
|
|
// The user may have navigated to a different page while this fetch was
|
|
// in flight. Applying now would diff/merge page-A content against
|
|
// whatever page is currently open -- bail out rather than corrupt it.
|
|
if (this.client.currentPath() !== path) {
|
|
return;
|
|
}
|
|
const pageName = getNameFromPath(path);
|
|
const applied = this.applyExternalPatches(
|
|
doc.text,
|
|
parsePageMetaLastModified(doc.meta.lastModified),
|
|
source,
|
|
);
|
|
if (!applied) {
|
|
return;
|
|
}
|
|
|
|
await this.refreshCurrentPageMeta(pageName, doc.meta);
|
|
|
|
// Note: dispatched asynchronously deliberately (not waiting for
|
|
// results), matching the full-reload path in loadPage.
|
|
this.client.eventHook
|
|
.dispatchEvent("editor:pageReloaded", pageName, pageName)
|
|
.catch(console.error);
|
|
}
|
|
|
|
// Re-fetches enriched (indexed) page meta -- e.g. frontmatter-derived page
|
|
// decorations -- and pushes it into viewState.current.meta and the body's
|
|
// decoration classes. Shared by loadPage and the live reloadPageContent
|
|
// path so an external edit's frontmatter changes show up without
|
|
// requiring navigation away and back.
|
|
private async refreshCurrentPageMeta(
|
|
pageName: string,
|
|
fallbackMeta: PageMeta,
|
|
): Promise<void> {
|
|
if (!(await this.client.objectIndex.hasFullIndexCompleted())) {
|
|
return;
|
|
}
|
|
try {
|
|
const enrichedMeta =
|
|
(await this.client.objectIndex.getObjectByRef(
|
|
pageName,
|
|
"page",
|
|
pageName,
|
|
)) ?? fallbackMeta;
|
|
|
|
const body = document.body;
|
|
body.removeAttribute("class");
|
|
|
|
if (enrichedMeta.pageDecoration?.cssClasses) {
|
|
body.className = enrichedMeta.pageDecoration.cssClasses
|
|
.join(" ")
|
|
.replaceAll(/[^a-zA-Z0-9-_ ]/g, "");
|
|
}
|
|
|
|
this.client.ui.viewDispatch({
|
|
type: "update-current-page-meta",
|
|
meta: enrichedMeta,
|
|
});
|
|
|
|
// Trigger editor re-render to update Lua widgets with the new metadata
|
|
this.client.editorView.dispatch({});
|
|
} catch (e: any) {
|
|
console.log(
|
|
`There was an error trying to fetch enriched metadata: ${e.message}`,
|
|
);
|
|
}
|
|
}
|
|
|
|
private navigateWithinPage(pageState: LocationState) {
|
|
if (!isMarkdownPath(pageState.path)) return;
|
|
|
|
// We can't use getOffsetFromRef here, because it is asyncronous.
|
|
let pos: number | undefined;
|
|
|
|
// Don't use getOffsetFromRef, so we can show error messages
|
|
if (pageState.details?.type === "header") {
|
|
const pageText = this.client.editorView.state.sliceDoc();
|
|
|
|
pos = getOffsetFromHeader(
|
|
parseMarkdown(pageText),
|
|
pageState.details.header,
|
|
);
|
|
|
|
if (pos === -1) {
|
|
this.client.ui.flashNotification(
|
|
`Could not find header "${pageState.details.header}"`,
|
|
"error",
|
|
);
|
|
|
|
pos = undefined;
|
|
}
|
|
} else if (pageState.details?.type === "position") {
|
|
pos = Math.max(
|
|
0,
|
|
Math.min(
|
|
pageState.details.pos,
|
|
this.client.editorView.state.doc.length,
|
|
),
|
|
);
|
|
} else if (pageState.details?.type === "linecolumn") {
|
|
const pageText = this.client.editorView.state.sliceDoc();
|
|
|
|
pos = getOffsetFromLineColumn(
|
|
pageText,
|
|
pageState.details.line,
|
|
pageState.details.column,
|
|
);
|
|
}
|
|
|
|
if (pos !== undefined) {
|
|
this.client.editorView.dispatch({
|
|
selection: { anchor: pos },
|
|
effects: EditorView.scrollIntoView(pos, {
|
|
y: "start",
|
|
yMargin: 5,
|
|
}),
|
|
});
|
|
|
|
// If a position was specified, we bail out and ignore any cached state
|
|
return;
|
|
}
|
|
|
|
let adjustedPosition = false;
|
|
|
|
// Was a particular scroll position persisted?
|
|
if (pageState.scrollTop && pageState.scrollTop > 0) {
|
|
this.restoreScrollPosition(pageState.scrollTop);
|
|
adjustedPosition = true;
|
|
}
|
|
|
|
// Was a particular cursor/selection set?
|
|
if (pageState.selection?.anchor) {
|
|
this.client.editorView.dispatch({
|
|
selection: pageState.selection,
|
|
});
|
|
adjustedPosition = true;
|
|
}
|
|
|
|
// If not: just put the cursor at the top of the page, right after the frontmatter
|
|
if (!adjustedPosition && this.scrollRestoreCleanup) {
|
|
// No scroll position to restore, cancel any pending restoration
|
|
this.scrollRestoreCleanup();
|
|
this.scrollRestoreCleanup = undefined;
|
|
}
|
|
if (!adjustedPosition) {
|
|
// Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_.
|
|
const pageText = this.client.editorView.state.sliceDoc();
|
|
|
|
// Default the cursor to be at position 0
|
|
let initialCursorPos = 0;
|
|
const match = frontMatterRegex.exec(pageText);
|
|
if (match) {
|
|
// Frontmatter found, put cursor after it
|
|
initialCursorPos = match[0].length;
|
|
}
|
|
// By default scroll to the top
|
|
this.client.editorView.scrollDOM.scrollTop = 0;
|
|
this.client.editorView.dispatch({
|
|
selection: { anchor: initialCursorPos },
|
|
// And then scroll down if required
|
|
scrollIntoView: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Restores scroll position after page navigation, accounting for async widget
|
|
* rendering that may change the page layout. Uses a MutationObserver to
|
|
* re-apply the scroll position whenever the DOM changes (e.g. widgets finish
|
|
* rendering), with a timeout to stop after the layout has stabilized.
|
|
*/
|
|
private restoreScrollPosition(scrollTop: number) {
|
|
// Cancel any previous scroll restoration
|
|
if (this.scrollRestoreCleanup) {
|
|
this.scrollRestoreCleanup();
|
|
}
|
|
|
|
const scrollDOM = this.client.editorView.scrollDOM;
|
|
let settled = false;
|
|
|
|
const applyScroll = () => {
|
|
if (settled) return;
|
|
// Skip no-op writes so the observer below doesn't fight CodeMirror's
|
|
// own scroll-anchoring on widget-unrelated mutations.
|
|
if (scrollDOM.scrollTop !== scrollTop) {
|
|
scrollDOM.scrollTop = scrollTop;
|
|
}
|
|
};
|
|
|
|
// Hide the editor until CodeMirror has done its first measure pass: a
|
|
// sync set after setState gets clamped to 0 because scrollHeight isn't
|
|
// established yet, and without hiding the browser paints once at 0.
|
|
scrollDOM.style.visibility = "hidden";
|
|
applyScroll();
|
|
requestAnimationFrame(() => {
|
|
applyScroll();
|
|
scrollDOM.style.visibility = "";
|
|
});
|
|
|
|
// Watch for DOM mutations (widget rendering) and re-apply scroll position
|
|
const observer = new MutationObserver(() => {
|
|
applyScroll();
|
|
});
|
|
|
|
observer.observe(scrollDOM, {
|
|
childList: true,
|
|
subtree: true,
|
|
attributes: true,
|
|
// Watch for style changes (widget height changes)
|
|
attributeFilter: ["style", "class"],
|
|
});
|
|
|
|
// Also handle user scroll: if the user manually scrolls, stop restoring
|
|
const onUserScroll = () => {
|
|
cleanup();
|
|
};
|
|
// Delay attaching the scroll listener so our own scroll assignments don't
|
|
// trigger it
|
|
const scrollListenerTimer = setTimeout(() => {
|
|
scrollDOM.addEventListener("scroll", onUserScroll, { once: true });
|
|
}, 100);
|
|
|
|
// Stop restoring after a reasonable timeout (widgets should be done by then)
|
|
const timeout = setTimeout(() => {
|
|
cleanup();
|
|
}, 2000);
|
|
|
|
const cleanup = () => {
|
|
if (settled) return;
|
|
settled = true;
|
|
scrollDOM.style.visibility = "";
|
|
observer.disconnect();
|
|
clearTimeout(timeout);
|
|
clearTimeout(scrollListenerTimer);
|
|
scrollDOM.removeEventListener("scroll", onUserScroll);
|
|
if (this.scrollRestoreCleanup === cleanup) {
|
|
this.scrollRestoreCleanup = undefined;
|
|
}
|
|
};
|
|
|
|
this.scrollRestoreCleanup = cleanup;
|
|
}
|
|
}
|