1
0
silverbullet/web/client.ts

1070 lines
31 KiB
TypeScript
Raw Normal View History

// Third party web dependencies
2022-04-25 08:33:38 +00:00
import {
CompletionContext,
2022-04-25 08:33:38 +00:00
CompletionResult,
2022-04-04 13:25:07 +00:00
EditorView,
2023-05-29 07:53:49 +00:00
gitIgnoreCompiler,
SyntaxNode,
syntaxTree,
} from "../common/deps.ts";
2023-12-21 17:37:50 +00:00
import { Space } from "./space.ts";
import { FilterOption } from "./types.ts";
import { ensureSettingsAndIndex } from "../common/util.ts";
import { EventHook } from "../plugos/hooks/event.ts";
2023-07-14 11:44:30 +00:00
import { AppCommand } from "./hooks/command.ts";
2022-12-21 15:08:51 +00:00
import { PathPageNavigator } from "./navigator.ts";
2023-07-14 11:58:16 +00:00
2023-07-14 14:48:35 +00:00
import { AppViewState, BuiltinSettings } from "./types.ts";
2023-07-14 11:58:16 +00:00
import type { AppEvent, CompleteEvent } from "../plug-api/app_event.ts";
2023-08-29 19:17:29 +00:00
import { throttle } from "$sb/lib/async.ts";
import { PlugSpacePrimitives } from "../common/spaces/plug_space_primitives.ts";
import { EventedSpacePrimitives } from "../common/spaces/evented_space_primitives.ts";
2023-08-29 19:17:29 +00:00
import {
ISyncService,
NoSyncSyncService,
pageSyncInterval,
SyncService,
} from "./sync_service.ts";
import { simpleHash } from "../common/crypto.ts";
import { SyncStatus } from "../common/spaces/sync.ts";
import { HttpSpacePrimitives } from "../common/spaces/http_space_primitives.ts";
import { FallbackSpacePrimitives } from "../common/spaces/fallback_space_primitives.ts";
2023-05-29 07:53:49 +00:00
import { FilteredSpacePrimitives } from "../common/spaces/filtered_space_primitives.ts";
import { validatePageName } from "$sb/lib/page.ts";
2023-07-14 11:44:30 +00:00
import { ClientSystem } from "./client_system.ts";
2023-07-14 11:58:16 +00:00
import { createEditorState } from "./editor_state.ts";
import { OpenPages } from "./open_pages.ts";
2023-07-14 12:22:26 +00:00
import { MainUI } from "./editor_ui.tsx";
import { cleanPageRef } from "$sb/lib/resolve.ts";
2023-08-26 06:31:51 +00:00
import { SpacePrimitives } from "../common/spaces/space_primitives.ts";
import { CodeWidgetButton, FileMeta, PageMeta } from "$sb/types.ts";
import { DataStore } from "../plugos/lib/datastore.ts";
import { IndexedDBKvPrimitives } from "../plugos/lib/indexeddb_kv_primitives.ts";
import { DataStoreMQ } from "../plugos/lib/mq.datastore.ts";
import { DataStoreSpacePrimitives } from "../common/spaces/datastore_space_primitives.ts";
import {
EncryptedSpacePrimitives,
} from "../common/spaces/encrypted_space_primitives.ts";
import { LimitedMap } from "../common/limited_map.ts";
2023-07-14 11:44:30 +00:00
const frontMatterRegex = /^---\n(([^\n]|\n)*?)---\n/;
2023-07-14 11:44:30 +00:00
const autoSaveInterval = 1000;
declare global {
interface Window {
// Injected via index.html
silverBulletConfig: {
spaceFolderPath: string;
2023-08-30 15:25:54 +00:00
syncOnly: boolean;
clientEncryption: boolean;
};
2023-07-14 14:56:20 +00:00
client: Client;
}
}
2023-07-14 14:56:20 +00:00
export class Client {
system!: ClientSystem;
editorView!: EditorView;
2023-07-27 09:41:44 +00:00
private pageNavigator!: PathPageNavigator;
2023-07-27 09:41:44 +00:00
private dbPrefix: string;
2022-12-22 15:20:05 +00:00
2023-07-27 09:41:44 +00:00
plugSpaceRemotePrimitives!: PlugSpacePrimitives;
2023-08-26 06:31:51 +00:00
// localSpacePrimitives!: FilteredSpacePrimitives;
httpSpacePrimitives!: HttpSpacePrimitives;
2023-07-27 09:41:44 +00:00
space!: Space;
saveTimeout?: number;
2022-04-04 13:25:07 +00:00
debouncedUpdateEvent = throttle(() => {
this.eventHook
.dispatchEvent("editor:updated")
.catch((e) => console.error("Error dispatching editor:updated event", e));
2022-04-04 13:25:07 +00:00
}, 1000);
debouncedPlugsUpdatedEvent = throttle(async () => {
// To register new commands, update editor state based on new plugs
this.rebuildEditorState();
await this.dispatchAppEvent(
"editor:pageLoaded",
this.currentPage,
undefined,
true,
);
}, 1000);
// Track if plugs have been updated since sync cycle
fullSyncCompleted = false;
2022-12-16 11:44:04 +00:00
syncService!: ISyncService;
2023-07-27 09:41:44 +00:00
settings!: BuiltinSettings;
2023-07-14 11:44:30 +00:00
// Event bus used to communicate between components
eventHook!: EventHook;
2023-07-14 12:22:26 +00:00
ui!: MainUI;
openPages!: OpenPages;
stateDataStore!: DataStore;
spaceDataStore!: DataStore;
mq!: DataStoreMQ;
2023-07-14 11:44:30 +00:00
2023-12-22 14:55:50 +00:00
// Used by the "wiki link" highlighter to check if a page exists
public allKnownPages = new Set<string>();
2022-08-02 10:43:39 +00:00
constructor(
private parent: Element,
2023-08-29 19:17:29 +00:00
public syncMode = false,
2022-08-02 10:43:39 +00:00
) {
if (!syncMode) {
this.fullSyncCompleted = true;
}
// Generate a semi-unique prefix for the database so not to reuse databases for different space paths
2023-07-27 09:41:44 +00:00
this.dbPrefix = "" + simpleHash(window.silverBulletConfig.spaceFolderPath);
}
/**
* Initialize the client
* This is a separated from the constructor to allow for async initialization
*/
async init() {
const stateKvPrimitives = new IndexedDBKvPrimitives(
`${this.dbPrefix}_state`,
);
await stateKvPrimitives.init();
this.stateDataStore = new DataStore(stateKvPrimitives);
// Setup message queue
this.mq = new DataStoreMQ(this.stateDataStore);
2023-08-10 16:32:41 +00:00
setInterval(() => {
// Timeout after 5s, retries 3 times, otherwise drops the message (no DLQ)
this.mq.requeueTimeouts(5000, 3, true).catch(console.error);
2023-08-10 16:32:41 +00:00
}, 20000); // Look to requeue every 20s
2023-07-14 11:44:30 +00:00
// Event hook
this.eventHook = new EventHook();
// Instantiate a PlugOS system
this.system = new ClientSystem(
this,
2023-08-10 16:32:41 +00:00
this.mq,
this.stateDataStore,
2023-07-14 11:44:30 +00:00
this.eventHook,
);
const localSpacePrimitives = await this.initSpace();
2023-08-29 19:17:29 +00:00
this.syncService = this.syncMode
? new SyncService(
localSpacePrimitives,
this.plugSpaceRemotePrimitives,
this.stateDataStore,
2023-08-29 19:17:29 +00:00
this.eventHook,
(path) => {
// TODO: At some point we should remove the data.db exception here
return path !== "data.db" &&
// Exclude all plug space primitives paths
!this.plugSpaceRemotePrimitives.isLikelyHandled(path) ||
// Except federated ones
path.startsWith("!");
},
)
: new NoSyncSyncService(this.space);
2023-07-14 12:22:26 +00:00
this.ui = new MainUI(this);
this.ui.render(this.parent);
2022-10-25 16:50:07 +00:00
this.editorView = new EditorView({
2023-07-14 11:58:16 +00:00
state: createEditorState(this, "", "", false),
2022-07-22 11:44:28 +00:00
parent: document.getElementById("sb-editor")!,
});
2023-07-29 10:19:35 +00:00
this.openPages = new OpenPages(this);
this.focus();
await this.system.init();
2022-11-24 11:04:00 +00:00
// Load settings
this.settings = await ensureSettingsAndIndex(localSpacePrimitives);
await this.loadCaches();
// Pinging a remote space to ensure we're authenticated properly, if not will result in a redirect to auth page
try {
await this.httpSpacePrimitives.ping();
2023-07-27 10:37:39 +00:00
} catch (e: any) {
if (e.message === "Not authenticated") {
console.warn("Not authenticated, redirecting to auth page");
return;
}
2023-11-25 13:30:31 +00:00
if (e.message.includes("Offline") && !this.syncMode) {
// Offline and not in sync mode, this is not going to fly.
this.flashNotification(
"Could not reach remote server, going to reload in a few seconds",
"error",
);
setTimeout(() => {
location.reload();
}, 5000);
throw e;
}
2023-07-27 09:41:44 +00:00
console.warn(
2023-07-27 10:37:39 +00:00
"Could not reach remote server, we're offline or the server is down",
e,
);
}
2023-07-27 13:25:33 +00:00
await this.loadPlugs();
2023-07-29 21:41:37 +00:00
this.initNavigator();
2023-07-27 13:25:33 +00:00
this.initSync();
2022-11-24 11:04:00 +00:00
2023-07-27 09:41:44 +00:00
this.loadCustomStyles().catch(console.error);
2023-07-27 13:25:33 +00:00
await this.dispatchAppEvent("editor:init");
2023-08-07 18:42:52 +00:00
setInterval(() => {
2023-08-09 16:07:01 +00:00
try {
this.syncService.syncFile(`${this.currentPage!}.md`).catch((e: any) => {
console.error("Interval sync error", e);
});
} catch (e: any) {
2023-08-09 15:22:42 +00:00
console.error("Interval sync error", e);
2023-08-09 16:07:01 +00:00
}
2023-08-07 18:42:52 +00:00
}, pageSyncInterval);
2023-12-22 14:55:50 +00:00
this.updatePageListCache().catch(console.error);
2023-07-27 13:25:33 +00:00
}
private initSync() {
2023-07-27 09:41:44 +00:00
this.syncService.start();
this.eventHook.addLocalListener("sync:success", async (operations) => {
// console.log("Operations", operations);
if (operations > 0) {
// Update the page list
2023-12-22 14:55:50 +00:00
await this.space.updatePageList();
2023-07-27 09:41:44 +00:00
}
if (operations !== undefined) {
// "sync:success" is called with a number of operations only from syncSpace(), not from syncing individual pages
this.fullSyncCompleted = true;
}
// if (this.system.plugsUpdated) {
if (operations) {
// Likely initial sync so let's show visually that we're synced now
this.showProgress(100);
2023-07-27 09:41:44 +00:00
}
// }
2023-07-27 09:41:44 +00:00
2023-08-16 09:40:31 +00:00
this.ui.viewDispatch({ type: "sync-change", syncSuccess: true });
2023-07-27 09:41:44 +00:00
});
this.eventHook.addLocalListener("sync:error", (_name) => {
2023-08-16 09:40:31 +00:00
this.ui.viewDispatch({ type: "sync-change", syncSuccess: false });
2023-07-27 09:41:44 +00:00
});
this.eventHook.addLocalListener("sync:conflict", (name) => {
this.flashNotification(
`Sync: conflict detected for ${name} - conflict copy created`,
"error",
);
});
this.eventHook.addLocalListener("sync:progress", (status: SyncStatus) => {
this.showProgress(
Math.round(status.filesProcessed / status.totalFiles * 100),
);
});
2023-08-29 19:17:29 +00:00
this.eventHook.addLocalListener(
"file:synced",
(meta: FileMeta, direction: string) => {
2023-08-07 18:42:52 +00:00
if (meta.name.endsWith(".md") && direction === "secondary->primary") {
// We likely polled the currently open page which trigggered a local update, let's update the editor accordingly
this.space.getPageMeta(meta.name.slice(0, -3));
}
},
2023-08-29 19:17:29 +00:00
);
2023-07-27 09:41:44 +00:00
}
private initNavigator() {
this.pageNavigator = new PathPageNavigator(
cleanPageRef(this.settings.indexPage),
2023-07-27 09:41:44 +00:00
);
2024-01-02 10:01:34 +00:00
this.pageNavigator.subscribe(
async (pageName, pos: number | string | undefined) => {
console.log("Now navigating to", pageName, pos);
const stateRestored = await this.loadPage(pageName, pos === undefined);
if (pos) {
if (typeof pos === "string") {
console.log("Navigating to anchor", pos);
// We're going to look up the anchor through a API invocation
const matchingAnchor = await this.system.system.localSyscall(
"index",
"system.invokeFunction",
["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`],
2022-08-30 08:44:20 +00:00
);
2024-01-02 10:01:34 +00:00
if (!matchingAnchor) {
return this.flashNotification(
`Could not find anchor $${pos}`,
"error",
);
} else {
pos = matchingAnchor.pos as number;
}
2022-08-30 08:44:20 +00:00
}
2024-01-02 10:01:34 +00:00
setTimeout(() => {
this.editorView.dispatch({
selection: { anchor: pos as number },
effects: EditorView.scrollIntoView(pos as number, { y: "start" }),
});
});
} else if (!stateRestored) {
// Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_.
const pageText = this.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.editorView.scrollDOM.scrollTop = 0;
this.editorView.dispatch({
2024-01-02 10:01:34 +00:00
selection: { anchor: initialCursorPos },
// And then scroll down if required
scrollIntoView: true,
});
2022-11-24 15:55:30 +00:00
}
2024-01-02 10:01:34 +00:00
await this.stateDataStore.set(["client", "lastOpenedPage"], pageName);
},
);
2023-08-16 09:40:31 +00:00
if (location.hash === "#boot") {
(async () => {
// Cold start PWA load
const lastPage = await this.stateDataStore.get([
"client",
"lastOpenedPage",
]);
2023-08-16 09:40:31 +00:00
if (lastPage) {
await this.navigate(lastPage);
}
})().catch(console.error);
}
2023-07-27 09:41:44 +00:00
}
async initSpace(): Promise<SpacePrimitives> {
this.httpSpacePrimitives = new HttpSpacePrimitives(
2023-07-27 09:41:44 +00:00
location.origin,
window.silverBulletConfig.spaceFolderPath,
);
2023-01-22 14:48:12 +00:00
let remoteSpacePrimitives: SpacePrimitives = this.httpSpacePrimitives;
if (window.silverBulletConfig.clientEncryption) {
console.log("Enabling encryption");
const encryptedSpacePrimitives = new EncryptedSpacePrimitives(
this.httpSpacePrimitives,
);
remoteSpacePrimitives = encryptedSpacePrimitives;
let loggedIn = false;
// First figure out if we're online & if the key file exists, if not we need to initialize the space
try {
if (!await encryptedSpacePrimitives.init()) {
console.log(
"Space not initialized, will ask for password to initialize",
);
alert(
"You appear to be accessing a new space with encryption enabled, you will now be asked to create a password",
);
const password = prompt("Choose a password");
if (!password) {
alert("Cannot do anything without a password, reloading");
location.reload();
throw new Error("Not initialized");
}
const password2 = prompt("Confirm password");
if (password !== password2) {
alert("Passwords don't match, reloading");
location.reload();
throw new Error("Not initialized");
}
await encryptedSpacePrimitives.setup(password);
// this.stateDataStore.set(["encryptionKey"], password);
await this.stateDataStore.set(
["spaceSalt"],
encryptedSpacePrimitives.spaceSalt,
);
loggedIn = true;
}
} catch (e: any) {
if (e.message === "Offline") {
console.log(
"Offline, will assume encryption space is initialized, fetching salt from data store",
);
await encryptedSpacePrimitives.init(
await this.stateDataStore.get(["spaceSalt"]),
);
}
}
if (!loggedIn) {
// Let's ask for the password
try {
await encryptedSpacePrimitives.login(
prompt("Password")!,
);
await this.stateDataStore.set(
["spaceSalt"],
encryptedSpacePrimitives.spaceSalt,
);
} catch (e: any) {
console.log("Got this error", e);
if (e.message === "Incorrect password") {
alert("Incorrect password");
location.reload();
}
throw e;
}
}
}
2023-07-27 09:41:44 +00:00
this.plugSpaceRemotePrimitives = new PlugSpacePrimitives(
remoteSpacePrimitives,
2023-07-27 09:41:44 +00:00
this.system.namespaceHook,
this.syncMode ? undefined : "client",
2023-07-27 09:41:44 +00:00
);
2023-07-27 09:41:44 +00:00
let fileFilterFn: (s: string) => boolean = () => true;
2023-08-26 06:31:51 +00:00
let localSpacePrimitives: SpacePrimitives | undefined;
2023-08-29 19:17:29 +00:00
if (this.syncMode) {
// We'll store the space files in a separate data store
const spaceKvPrimitives = new IndexedDBKvPrimitives(
`${this.dbPrefix}_synced_space`,
);
await spaceKvPrimitives.init();
2023-08-26 06:31:51 +00:00
localSpacePrimitives = new FilteredSpacePrimitives(
new EventedSpacePrimitives(
// Using fallback space primitives here to allow (by default) local reads to "fall through" to HTTP when files aren't synced yet
new FallbackSpacePrimitives(
new DataStoreSpacePrimitives(new DataStore(spaceKvPrimitives)),
this.plugSpaceRemotePrimitives,
2023-07-27 09:41:44 +00:00
),
this.eventHook,
2023-07-27 09:41:44 +00:00
),
2023-08-26 06:31:51 +00:00
(meta) => fileFilterFn(meta.name),
// Run when a list of files has been retrieved
async () => {
if (!this.settings) {
this.settings = await ensureSettingsAndIndex(localSpacePrimitives!);
}
2023-08-26 06:31:51 +00:00
if (typeof this.settings?.spaceIgnore === "string") {
fileFilterFn = gitIgnoreCompiler(this.settings.spaceIgnore).accepts;
} else {
fileFilterFn = () => true;
}
},
);
} else {
2023-08-27 09:02:24 +00:00
localSpacePrimitives = new EventedSpacePrimitives(
this.plugSpaceRemotePrimitives,
this.eventHook,
);
2023-08-26 06:31:51 +00:00
}
this.space = new Space(
localSpacePrimitives,
this.eventHook,
);
2023-07-27 09:41:44 +00:00
2023-11-12 09:33:27 +00:00
this.eventHook.addLocalListener(
"file:changed",
(
path: string,
_localChange?: boolean,
oldHash?: number,
newHash?: number,
) => {
// Only reload when watching the current page (to avoid reloading when switching pages)
if (
this.space.watchInterval && `${this.currentPage}.md` === path
) {
console.log(
"Page changed elsewhere, reloading. Old hash",
oldHash,
"new hash",
newHash,
);
this.flashNotification("Page changed elsewhere, reloading");
this.reloadPage();
}
},
);
2023-08-27 09:02:24 +00:00
2023-12-22 14:55:50 +00:00
// Caching a list of known pages for the wiki_link highlighter (that checks if a page exists)
this.eventHook.addLocalListener("page:saved", (pageName: string) => {
// Make sure this page is in the list of known pages
this.allKnownPages.add(pageName);
});
this.eventHook.addLocalListener("page:deleted", (pageName: string) => {
this.allKnownPages.delete(pageName);
});
this.eventHook.addLocalListener(
"file:listed",
(allFiles: FileMeta[]) => {
// Update list of known pages
this.allKnownPages = new Set(
allFiles.filter((f) => f.name.endsWith(".md")).map((f) =>
f.name.slice(0, -3)
),
);
},
);
2023-07-27 09:41:44 +00:00
this.space.watch();
2023-08-26 06:31:51 +00:00
return localSpacePrimitives;
}
2023-07-27 09:41:44 +00:00
get currentPage(): string | undefined {
return this.ui.viewState.currentPage;
}
2023-07-27 13:25:33 +00:00
dispatchAppEvent(name: AppEvent, ...args: any[]): Promise<any[]> {
return this.eventHook.dispatchEvent(name, ...args);
}
save(immediate = false): Promise<void> {
return new Promise((resolve, reject) => {
if (this.saveTimeout) {
clearTimeout(this.saveTimeout);
}
this.saveTimeout = setTimeout(
() => {
if (this.currentPage) {
if (
2023-07-14 12:22:26 +00:00
!this.ui.viewState.unsavedChanges ||
this.ui.viewState.uiOptions.forcedROMode
) {
2022-10-22 18:23:54 +00:00
// No unsaved changes, or read-only mode, not gonna save
2022-10-21 17:02:00 +00:00
return resolve();
}
console.log("Saving page", this.currentPage);
this.space
.writePage(
this.currentPage,
2023-07-27 09:41:44 +00:00
this.editorView.state.sliceDoc(0),
true,
)
.then(async (meta) => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({ type: "page-saved" });
await this.dispatchAppEvent(
"editor:pageSaved",
this.currentPage,
meta,
);
resolve();
})
2022-07-19 15:21:11 +00:00
.catch((e) => {
this.flashNotification(
"Could not save page, retrying again in 10 seconds",
"error",
2022-07-19 15:21:11 +00:00
);
this.saveTimeout = setTimeout(this.save.bind(this), 10000);
reject(e);
});
} else {
resolve();
}
},
2023-07-14 11:44:30 +00:00
immediate ? 0 : autoSaveInterval,
);
});
}
flashNotification(message: string, type: "info" | "error" = "info") {
const id = Math.floor(Math.random() * 1000000);
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
type: "show-notification",
notification: {
id,
type,
message,
date: new Date(),
},
});
setTimeout(
() => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
type: "dismiss-notification",
id: id,
});
},
type === "info" ? 4000 : 5000,
);
}
2023-12-22 14:55:50 +00:00
startPageNavigate() {
2023-12-21 17:37:50 +00:00
// Then show the page navigator
2023-12-22 14:55:50 +00:00
this.ui.viewDispatch({ type: "start-navigate" });
this.updatePageListCache().catch(console.error);
}
async updatePageListCache() {
console.log("Updating page list cache");
const allPages = await this.system.queryObjects<PageMeta>("page", {});
this.ui.viewDispatch({
type: "update-page-list",
allPages,
});
2023-12-21 17:37:50 +00:00
}
2023-07-27 15:02:53 +00:00
private progressTimeout?: number;
2023-06-14 18:58:08 +00:00
showProgress(progressPerc: number) {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
2023-06-14 18:58:08 +00:00
type: "set-progress",
progressPerc,
});
if (this.progressTimeout) {
clearTimeout(this.progressTimeout);
}
this.progressTimeout = setTimeout(
() => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
2023-06-14 18:58:08 +00:00
type: "set-progress",
});
},
10000,
);
}
filterBox(
label: string,
options: FilterOption[],
helpText = "",
placeHolder = "",
): Promise<FilterOption | undefined> {
return new Promise((resolve) => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
type: "show-filterbox",
label,
options,
placeHolder,
helpText,
onSelect: (option: any) => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({ type: "hide-filterbox" });
this.focus();
resolve(option);
},
});
});
}
2022-12-21 15:08:51 +00:00
prompt(
message: string,
defaultValue = "",
): Promise<string | undefined> {
return new Promise((resolve) => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
2022-12-21 15:08:51 +00:00
type: "show-prompt",
message,
defaultValue,
callback: (value: string | undefined) => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({ type: "hide-prompt" });
2022-12-21 15:08:51 +00:00
this.focus();
resolve(value);
},
});
});
}
confirm(
message: string,
): Promise<boolean> {
return new Promise((resolve) => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
2022-12-21 15:08:51 +00:00
type: "show-confirm",
message,
callback: (value: boolean) => {
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({ type: "hide-confirm" });
2022-12-21 15:08:51 +00:00
this.focus();
resolve(value);
},
});
});
}
2023-07-27 13:25:33 +00:00
async loadPlugs() {
2023-07-14 11:44:30 +00:00
await this.system.reloadPlugsFromSpace(this.space);
2022-04-26 17:04:36 +00:00
this.rebuildEditorState();
await this.eventHook.dispatchEvent("system:ready");
2022-07-11 07:08:22 +00:00
await this.dispatchAppEvent("plugs:loaded");
2022-04-26 17:04:36 +00:00
}
rebuildEditorState() {
const editorView = this.editorView;
console.log("Rebuilding editor state");
2023-07-14 11:44:30 +00:00
this.system.updateMarkdownParser();
2022-04-11 18:34:09 +00:00
2023-07-27 13:25:33 +00:00
if (this.currentPage) {
// And update the editor if a page is loaded
2023-07-14 11:58:16 +00:00
this.openPages.saveState(this.currentPage);
2022-04-26 17:04:36 +00:00
2022-03-31 15:25:34 +00:00
editorView.setState(
2023-07-14 11:58:16 +00:00
createEditorState(
this,
2023-01-16 10:28:59 +00:00
this.currentPage,
editorView.state.sliceDoc(),
2023-07-14 12:22:26 +00:00
this.ui.viewState.currentPageMeta?.perm === "ro",
2023-01-16 10:28:59 +00:00
),
2022-03-31 15:25:34 +00:00
);
if (editorView.contentDOM) {
2022-05-17 09:53:17 +00:00
this.tweakEditorDOM(
editorView.contentDOM,
);
}
2022-04-26 17:04:36 +00:00
2023-07-14 11:58:16 +00:00
this.openPages.restoreState(this.currentPage);
2022-03-31 15:25:34 +00:00
}
}
// Code completion support
2023-11-06 08:14:16 +00:00
async completeWithEvent(
context: CompletionContext,
eventName: AppEvent,
): Promise<CompletionResult | null> {
const editorState = context.state;
const selection = editorState.selection.main;
const line = editorState.doc.lineAt(selection.from);
const linePrefix = line.text.slice(0, selection.from - line.from);
2023-08-01 19:35:19 +00:00
const parentNodes: string[] = [];
const sTree = syntaxTree(editorState);
const currentNode = sTree.resolveInner(selection.from);
2023-08-01 19:35:19 +00:00
if (currentNode) {
let node: SyntaxNode | null = currentNode;
do {
2023-12-21 17:37:50 +00:00
if (node.name === "FencedCode" || node.name === "FrontMatter") {
2023-10-04 15:14:24 +00:00
const body = editorState.sliceDoc(node.from + 3, node.to - 3);
2023-12-21 17:37:50 +00:00
parentNodes.push(`${node.name}:${body}`);
} else {
parentNodes.push(node.name);
}
2023-08-01 19:35:19 +00:00
node = node.parent;
} while (node);
2023-08-01 19:35:19 +00:00
}
const results = await this.dispatchAppEvent(eventName, {
pageName: this.currentPage!,
linePrefix,
pos: selection.from,
2023-08-01 19:35:19 +00:00
parentNodes,
} as CompleteEvent);
let actualResult = null;
for (const result of results) {
if (result) {
if (actualResult) {
console.error(
"Got completion results from multiple sources, cannot deal with that",
);
console.error("Previously had", actualResult, "now also got", result);
return null;
}
actualResult = result;
}
}
2023-12-22 14:55:50 +00:00
// console.log("Compeltion result", actualResult);
return actualResult;
}
editorComplete(
context: CompletionContext,
): Promise<CompletionResult | null> {
return this.completeWithEvent(context, "editor:complete");
}
miniEditorComplete(
context: CompletionContext,
): Promise<CompletionResult | null> {
return this.completeWithEvent(context, "minieditor:complete");
}
2022-10-10 16:19:08 +00:00
async reloadPage() {
console.log("Reloading page");
2022-10-10 16:19:08 +00:00
clearTimeout(this.saveTimeout);
await this.loadPage(this.currentPage!);
}
focus() {
2023-07-24 07:36:33 +00:00
const viewState = this.ui.viewState;
if (
[
viewState.showCommandPalette,
viewState.showPageNavigator,
viewState.showFilterBox,
viewState.showConfirm,
viewState.showPrompt,
].some(Boolean)
) {
// Some other modal UI element is visible, don't focus editor now
return;
}
2023-07-27 09:41:44 +00:00
this.editorView.focus();
}
async navigate(
name: string,
pos?: number | string,
replaceState = false,
newWindow = false,
) {
2022-08-02 10:43:39 +00:00
if (!name) {
name = cleanPageRef(this.settings.indexPage);
2022-08-02 10:43:39 +00:00
}
try {
const pagePart = name.split(/[@$]/)[0];
validatePageName(pagePart);
} catch (e: any) {
return this.flashNotification(e.message, "error");
}
if (newWindow) {
const win = window.open(`${location.origin}/${name}`, "_blank");
if (win) {
win.focus();
}
return;
}
await this.pageNavigator!.navigate(name, pos, replaceState);
}
2024-01-02 10:01:34 +00:00
async loadPage(pageName: string, restoreState = true): Promise<boolean> {
const loadingDifferentPage = pageName !== this.currentPage;
const editorView = this.editorView;
2022-09-06 14:33:00 +00:00
const previousPage = this.currentPage;
2024-01-02 10:01:34 +00:00
// console.log("Navigating to", pageName, restoreState);
// Persist current page state and nicely close page
2022-09-06 14:33:00 +00:00
if (previousPage) {
2023-07-14 11:58:16 +00:00
this.openPages.saveState(previousPage);
2022-09-06 14:33:00 +00:00
this.space.unwatchPage(previousPage);
2022-10-10 16:19:08 +00:00
if (previousPage !== pageName) {
await this.save(true);
}
}
2023-07-14 12:22:26 +00:00
this.ui.viewDispatch({
2022-09-12 12:50:37 +00:00
type: "page-loading",
name: pageName,
});
// Fetch next page to open
let doc;
try {
doc = await this.space.readPage(pageName);
} catch (e: any) {
2023-07-27 09:41:44 +00:00
if (e.message.includes("Not found")) {
// Not found, new page
console.log("Page doesn't exist, creating new page:", pageName);
doc = {
text: "",
2023-11-06 08:14:16 +00:00
meta: {
ref: pageName,
tags: ["page"],
name: pageName,
lastModified: "",
created: "",
perm: "rw",
} as PageMeta,
2023-07-27 09:41:44 +00:00
};
} else {
2023-10-05 16:24:12 +00:00
this.flashNotification(
`Could not load page ${pageName}: ${e.message}`,
"error",
);
if (previousPage) {
this.ui.viewDispatch({
type: "page-loading",
name: previousPage,
});
}
return false;
2023-07-27 09:41:44 +00:00
}
}
this.ui.viewDispatch({
type: "page-loaded",
meta: doc.meta,
});
2023-07-14 11:58:16 +00:00
const editorState = createEditorState(
this,
2023-01-16 10:28:59 +00:00
pageName,
doc.text,
doc.meta.perm === "ro",
);
editorView.setState(editorState);
if (editorView.contentDOM) {
2023-01-16 10:28:59 +00:00
this.tweakEditorDOM(editorView.contentDOM);
}
2024-01-02 10:01:34 +00:00
const stateRestored = restoreState && this.openPages.restoreState(pageName);
this.space.watchPage(pageName);
2022-11-24 15:55:30 +00:00
// Note: these events are dispatched asynchronously deliberately (not waiting for results)
if (loadingDifferentPage) {
this.eventHook.dispatchEvent("editor:pageLoaded", pageName, previousPage)
.catch(
console.error,
);
2022-07-18 14:48:36 +00:00
} else {
2022-11-24 15:55:30 +00:00
this.eventHook.dispatchEvent("editor:pageReloaded", pageName).catch(
console.error,
);
}
2022-09-06 14:33:00 +00:00
return stateRestored;
}
2023-01-16 10:28:59 +00:00
tweakEditorDOM(contentDOM: HTMLElement) {
2022-05-09 08:45:36 +00:00
contentDOM.spellcheck = true;
contentDOM.setAttribute("autocorrect", "on");
contentDOM.setAttribute("autocapitalize", "on");
}
async loadCustomStyles() {
2023-07-27 15:02:53 +00:00
if (this.settings.customStyles) {
2023-08-28 13:52:39 +00:00
const accumulatedCSS: string[] = [];
let customStylePages = this.settings.customStyles;
if (!Array.isArray(customStylePages)) {
customStylePages = [customStylePages];
}
for (const customStylesPage of customStylePages) {
try {
const { text: stylesText } = await this.space.readPage(
cleanPageRef(customStylesPage),
);
const cssBlockRegex = /```css([^`]+)```/;
const match = cssBlockRegex.exec(stylesText);
if (!match) {
return;
}
accumulatedCSS.push(match[1]);
} catch (e: any) {
console.error("Failed to load custom styles", e);
2023-07-02 12:48:27 +00:00
}
}
2023-08-28 13:52:39 +00:00
document.getElementById("custom-styles")!.innerHTML = accumulatedCSS.join(
"\n\n",
);
}
}
2023-12-22 12:22:25 +00:00
async runCommandByName(name: string, args?: any[]) {
2023-07-14 12:22:26 +00:00
const cmd = this.ui.viewState.commands.get(name);
2022-07-11 07:08:22 +00:00
if (cmd) {
if (args) {
await cmd.run(args);
} else {
await cmd.run();
}
2022-07-11 07:08:22 +00:00
} else {
throw new Error(`Command ${name} not found`);
}
}
2023-07-14 12:22:26 +00:00
getCommandsByContext(
state: AppViewState,
): Map<string, AppCommand> {
const commands = new Map(state.commands);
for (const [k, v] of state.commands.entries()) {
if (
v.command.contexts &&
(!state.showCommandPaletteContext ||
!v.command.contexts.includes(state.showCommandPaletteContext))
) {
commands.delete(k);
}
}
return commands;
}
2023-07-14 11:58:16 +00:00
getContext(): string | undefined {
2023-07-27 09:41:44 +00:00
const state = this.editorView.state;
const selection = state.selection.main;
if (selection.empty) {
return syntaxTree(state).resolveInner(selection.from).type.name;
}
return;
}
// Widget and image height caching
private widgetCache = new LimitedMap<WidgetCacheItem>(100); // bodyText -> WidgetCacheItem
private imageHeightCache = new LimitedMap<number>(100); // url -> height
private widgetHeightCache = new LimitedMap<number>(100); // bodytext -> height
async loadCaches() {
2024-01-02 10:32:57 +00:00
const [widgetHeightCache, widgetCache] = await this
.stateDataStore.batchGet([[
"cache",
"widgetHeight",
], ["cache", "widgets"]]);
this.widgetHeightCache = new LimitedMap(100, widgetHeightCache || {});
this.widgetCache = new LimitedMap(100, widgetCache || {});
}
debouncedWidgetHeightCacheFlush = throttle(() => {
this.stateDataStore.set(
["cache", "widgetHeight"],
this.widgetHeightCache.toJSON(),
)
.catch(
console.error,
);
// console.log("Flushed widget height cache to store");
2023-12-29 19:03:54 +00:00
}, 2000);
setCachedWidgetHeight(bodyText: string, height: number) {
this.widgetHeightCache.set(bodyText, height);
this.debouncedWidgetHeightCacheFlush();
}
getCachedWidgetHeight(bodyText: string): number {
return this.widgetHeightCache.get(bodyText) ?? -1;
}
debouncedWidgetCacheFlush = throttle(() => {
this.stateDataStore.set(["cache", "widgets"], this.widgetCache.toJSON())
.catch(
console.error,
);
console.log("Flushed widget cache to store");
2023-12-29 19:03:54 +00:00
}, 2000);
setWidgetCache(key: string, cacheItem: WidgetCacheItem) {
this.widgetCache.set(key, cacheItem);
this.debouncedWidgetCacheFlush();
}
getWidgetCache(key: string): WidgetCacheItem | undefined {
return this.widgetCache.get(key);
}
}
type WidgetCacheItem = {
height: number;
html: string;
buttons?: CodeWidgetButton[];
};