1
0
silverbullet/web/editor.tsx

1628 lines
49 KiB
TypeScript
Raw Normal View History

// Third party web dependencies
2022-04-25 08:33:38 +00:00
import {
autocompletion,
cLanguage,
closeBrackets,
closeBracketsKeymap,
CompletionContext,
2022-04-25 08:33:38 +00:00
completionKeymap,
CompletionResult,
cppLanguage,
csharpLanguage,
dartLanguage,
2022-04-04 13:25:07 +00:00
drawSelection,
dropCursor,
EditorSelection,
EditorState,
2022-04-04 13:25:07 +00:00
EditorView,
2023-05-29 07:53:49 +00:00
gitIgnoreCompiler,
2022-04-04 13:25:07 +00:00
highlightSpecialChars,
history,
historyKeymap,
indentOnInput,
indentWithTab,
javaLanguage,
javascriptLanguage,
jsonLanguage,
2022-04-04 13:25:07 +00:00
KeyBinding,
keymap,
kotlinLanguage,
LanguageDescription,
LanguageSupport,
2022-12-21 15:08:51 +00:00
markdown,
objectiveCLanguage,
objectiveCppLanguage,
postgresqlLanguage,
protobufLanguage,
pythonLanguage,
2022-05-17 09:53:17 +00:00
runScopeHandlers,
rustLanguage,
scalaLanguage,
searchKeymap,
shellLanguage,
sqlLanguage,
standardKeymap,
StreamLanguage,
syntaxHighlighting,
syntaxTree,
tomlLanguage,
typescriptLanguage,
2022-04-04 13:25:07 +00:00
ViewPlugin,
2022-04-25 08:33:38 +00:00
ViewUpdate,
xmlLanguage,
yamlLanguage,
} from "../common/deps.ts";
import { SilverBulletHooks } from "../common/manifest.ts";
import {
loadMarkdownExtensions,
MDExt,
} from "../common/markdown_parser/markdown_ext.ts";
import buildMarkdown from "../common/markdown_parser/parser.ts";
import { Space } from "./space.ts";
import { markdownSyscalls } from "./syscalls/markdown.ts";
import { FilterOption, PageMeta } from "./types.ts";
import { isMacLike, parseYamlSettings, safeRun } from "../common/util.ts";
2022-10-21 15:06:14 +00:00
import { createSandbox } from "../plugos/environments/webworker_sandbox.ts";
import { EventHook } from "../plugos/hooks/event.ts";
2022-12-21 15:08:51 +00:00
import assetSyscalls from "../plugos/syscalls/asset.ts";
import { eventSyscalls } from "../plugos/syscalls/event.ts";
import { System } from "../plugos/system.ts";
2022-12-21 15:08:51 +00:00
import { cleanModePlugins } from "./cm_plugins/clean.ts";
import { CollabState } from "./cm_plugins/collab.ts";
import {
attachmentExtension,
pasteLinkExtension,
} from "./cm_plugins/editor_paste.ts";
import { inlineImagesPlugin } from "./cm_plugins/inline_image.ts";
import { lineWrapper } from "./cm_plugins/line_wrapper.ts";
import { smartQuoteKeymap } from "./cm_plugins/smart_quotes.ts";
import { Confirm, Prompt } from "./components/basic_modals.tsx";
import { CommandPalette } from "./components/command_palette.tsx";
import { FilterList } from "./components/filter.tsx";
import { PageNavigator } from "./components/page_navigator.tsx";
import { Panel } from "./components/panel.tsx";
import { TopBar } from "./components/top_bar.tsx";
import {
BookIcon,
2023-06-14 17:27:18 +00:00
codeFolding,
2022-12-21 15:08:51 +00:00
HomeIcon,
preactRender,
TerminalIcon,
useEffect,
useReducer,
vim,
yUndoManagerKeymap,
} from "./deps.ts";
import { AppCommand, CommandHook } from "./hooks/command.ts";
import { SlashCommandHook } from "./hooks/slash_command.ts";
2022-12-21 15:08:51 +00:00
import { PathPageNavigator } from "./navigator.ts";
import reducer from "./reducer.ts";
import customMarkdownStyle from "./style.ts";
import { collabSyscalls } from "./syscalls/collab.ts";
import { editorSyscalls } from "./syscalls/editor.ts";
import { spaceSyscalls } from "./syscalls/space.ts";
import { systemSyscalls } from "./syscalls/system.ts";
import {
Action,
AppViewState,
BuiltinSettings,
initialViewState,
} from "./types.ts";
import type {
AppEvent,
ClickEvent,
CompleteEvent,
} from "../plug-api/app_event.ts";
2022-12-22 15:20:05 +00:00
import { CodeWidgetHook } from "./hooks/code_widget.ts";
2023-01-14 17:51:00 +00:00
import { throttle } from "../common/async_util.ts";
2023-01-16 10:28:59 +00:00
import { readonlyMode } from "./cm_plugins/readonly.ts";
import { PageNamespaceHook } from "../common/hooks/page_namespace.ts";
import { CronHook } from "../plugos/hooks/cron.ts";
import { pageIndexSyscalls } from "./syscalls/index.ts";
import { storeSyscalls } from "../plugos/syscalls/store.dexie_browser.ts";
import { PlugSpacePrimitives } from "../common/spaces/plug_space_primitives.ts";
import { IndexedDBSpacePrimitives } from "../common/spaces/indexeddb_space_primitives.ts";
import { FileMetaSpacePrimitives } from "../common/spaces/file_meta_space_primitives.ts";
import { EventedSpacePrimitives } from "../common/spaces/evented_space_primitives.ts";
import { clientStoreSyscalls } from "./syscalls/clientStore.ts";
import { sandboxFetchSyscalls } from "./syscalls/fetch.ts";
import { shellSyscalls } from "./syscalls/shell.ts";
import { SyncService } from "./sync_service.ts";
import { yamlSyscalls } from "./syscalls/yaml.ts";
import { simpleHash } from "../common/crypto.ts";
import { DexieKVStore } from "../plugos/lib/kv_store.dexie.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";
import { syncSyscalls } from "./syscalls/sync.ts";
2023-05-29 07:53:49 +00:00
import { FilteredSpacePrimitives } from "../common/spaces/filtered_space_primitives.ts";
import { CollabManager } from "./collab_manager.ts";
const frontMatterRegex = /^---\n(([^\n]|\n)*?)---\n/;
2022-11-24 15:55:30 +00:00
class PageState {
2022-04-26 17:04:36 +00:00
constructor(
readonly scrollTop: number,
readonly selection: EditorSelection,
2022-04-26 17:04:36 +00:00
) {}
}
2022-04-07 13:21:30 +00:00
const saveInterval = 1000;
declare global {
interface Window {
// Injected via index.html
silverBulletConfig: {
spaceFolderPath: string;
syncEndpoint: string;
};
editor: Editor;
}
}
// TODO: Oh my god, need to refactor this
export class Editor {
2022-03-29 10:13:46 +00:00
readonly commandHook: CommandHook;
readonly slashCommandHook: SlashCommandHook;
2022-03-23 14:41:12 +00:00
openPages = new Map<string, PageState>();
editorView?: EditorView;
viewState: AppViewState = initialViewState;
viewDispatch: (action: Action) => void = () => {};
2022-04-07 13:21:30 +00:00
space: Space;
remoteSpacePrimitives: HttpSpacePrimitives;
pageNavigator?: PathPageNavigator;
eventHook: EventHook;
2022-12-22 15:20:05 +00:00
codeWidgetHook: CodeWidgetHook;
saveTimeout: any;
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);
2023-01-16 09:40:16 +00:00
system: System<SilverBulletHooks>;
mdExtensions: MDExt[] = [];
// Track if plugs have been updated since sync cycle
private plugsUpdated = false;
fullSyncCompleted = false;
2022-12-16 11:44:04 +00:00
// Runtime state (that doesn't make sense in viewState)
2022-10-25 16:50:07 +00:00
collabState?: CollabState;
syncService: SyncService;
settings?: BuiltinSettings;
kvStore: DexieKVStore;
collabManager: CollabManager;
2022-08-02 10:43:39 +00:00
constructor(
parent: Element,
) {
const runtimeConfig = window.silverBulletConfig;
// Instantiate a PlugOS system
2023-06-14 18:58:08 +00:00
const system = new System<SilverBulletHooks>("client");
2022-11-24 11:04:00 +00:00
this.system = system;
2022-03-25 11:03:06 +00:00
// Generate a semi-unique prefix for the database so not to reuse databases for different space paths
const dbPrefix = "" + simpleHash(runtimeConfig.spaceFolderPath);
// Attach the page namespace hook
const namespaceHook = new PageNamespaceHook();
system.addHook(namespaceHook);
// Event hook
this.eventHook = new EventHook();
system.addHook(this.eventHook);
this.collabManager = new CollabManager(this);
// Cron hook
const cronHook = new CronHook(system);
system.addHook(cronHook);
const indexSyscalls = pageIndexSyscalls(
`${dbPrefix}_page_index`,
globalThis.indexedDB,
);
this.kvStore = new DexieKVStore(
`${dbPrefix}_store`,
"data",
globalThis.indexedDB,
);
const storeCalls = storeSyscalls(this.kvStore);
// Setup space
this.remoteSpacePrimitives = new HttpSpacePrimitives(
runtimeConfig.syncEndpoint,
runtimeConfig.spaceFolderPath,
true,
);
const plugSpaceRemotePrimitives = new PlugSpacePrimitives(
this.remoteSpacePrimitives,
namespaceHook,
);
2023-05-29 07:53:49 +00:00
let fileFilterFn: (s: string) => boolean = () => true;
const localSpacePrimitives = new FilteredSpacePrimitives(
new FileMetaSpacePrimitives(
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 IndexedDBSpacePrimitives(
`${dbPrefix}_space`,
globalThis.indexedDB,
),
plugSpaceRemotePrimitives,
),
2023-05-29 07:53:49 +00:00
this.eventHook,
),
indexSyscalls,
),
2023-05-29 07:53:49 +00:00
(meta) => fileFilterFn(meta.name),
async () => {
await this.loadSettings();
if (typeof this.settings?.spaceIgnore === "string") {
fileFilterFn = gitIgnoreCompiler(this.settings.spaceIgnore).accepts;
} else {
fileFilterFn = () => true;
}
},
);
2023-05-29 08:26:56 +00:00
this.space = new Space(localSpacePrimitives, this.kvStore);
this.space.watch();
this.syncService = new SyncService(
localSpacePrimitives,
plugSpaceRemotePrimitives,
this.kvStore,
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
!plugSpaceRemotePrimitives.isLikelyHandled(path) ||
// Except federated ones
path.startsWith("!");
},
);
2022-12-22 15:20:05 +00:00
// Code widget hook
this.codeWidgetHook = new CodeWidgetHook();
this.system.addHook(this.codeWidgetHook);
// Command hook
this.commandHook = new CommandHook();
this.commandHook.on({
commandsUpdated: (commandMap) => {
this.viewDispatch({
type: "update-commands",
commands: commandMap,
});
},
});
this.system.addHook(this.commandHook);
// Slash command hook
this.slashCommandHook = new SlashCommandHook(this);
this.system.addHook(this.slashCommandHook);
2022-03-25 11:03:06 +00:00
this.render(parent);
2022-10-25 16:50:07 +00:00
this.editorView = new EditorView({
2023-01-16 10:28:59 +00:00
state: this.createEditorState("", "", false),
2022-07-22 11:44:28 +00:00
parent: document.getElementById("sb-editor")!,
});
// Syscalls available to all plugs
2022-04-11 18:34:09 +00:00
this.system.registerSyscalls(
[],
eventSyscalls(this.eventHook),
2022-05-09 12:59:12 +00:00
editorSyscalls(this),
spaceSyscalls(this),
systemSyscalls(this, this.system),
2022-05-09 12:59:12 +00:00
markdownSyscalls(buildMarkdown(this.mdExtensions)),
assetSyscalls(this.system),
2022-10-25 16:50:07 +00:00
collabSyscalls(this),
yamlSyscalls(),
storeCalls,
indexSyscalls,
syncSyscalls(this.syncService),
// LEGACY
clientStoreSyscalls(storeCalls),
);
// Syscalls that require some additional permissions
this.system.registerSyscalls(
["fetch"],
sandboxFetchSyscalls(this.remoteSpacePrimitives),
);
this.system.registerSyscalls(
["shell"],
shellSyscalls(this.remoteSpacePrimitives),
2022-04-11 18:34:09 +00:00
);
2022-05-13 12:36:26 +00:00
2022-05-17 09:53:17 +00:00
// Make keyboard shortcuts work even when the editor is in read only mode or not focused
globalThis.addEventListener("keydown", (ev) => {
2022-05-17 09:53:17 +00:00
if (!this.editorView?.hasFocus) {
if ((ev.target as any).closest(".cm-editor")) {
// In some cm element, let's back out
2022-07-19 11:49:54 +00:00
return;
}
2022-05-17 09:53:17 +00:00
if (runScopeHandlers(this.editorView!, ev, "editor")) {
ev.preventDefault();
}
}
});
globalThis.addEventListener("touchstart", (ev) => {
// Launch the page picker on a two-finger tap
if (ev.touches.length === 2) {
ev.stopPropagation();
ev.preventDefault();
this.viewDispatch({ type: "start-navigate" });
}
// Launch the command palette using a three-finger tap
if (ev.touches.length === 3) {
ev.stopPropagation();
ev.preventDefault();
this.viewDispatch({ type: "show-palette", context: this.getContext() });
}
});
// globalThis.addEventListener("beforeunload", (e) => {
// console.log("Pinging with with undefined page name");
// this.collabManager.updatePresence(undefined, this.currentPage);
// });
this.eventHook.addLocalListener("plug:changed", async (fileName) => {
console.log("Plug updated, reloading:", fileName);
system.unload(fileName);
await system.load(
// await this.space.readFile(fileName, "utf8"),
new URL(`/.fs/${fileName}`, location.href),
createSandbox,
);
this.plugsUpdated = true;
});
}
get currentPage(): string | undefined {
return this.viewState.currentPage;
}
async init() {
this.focus();
2022-11-24 11:04:00 +00:00
this.space.on({
pageChanged: (meta) => {
// Only reload when watching the current page (to avoid reloading when switching pages and in collab mode)
if (this.space.watchInterval && this.currentPage === meta.name) {
console.log("Page changed elsewhere, reloading");
this.flashNotification("Page changed elsewhere, reloading");
2022-11-24 11:04:00 +00:00
this.reloadPage();
}
},
pageListUpdated: (pages) => {
this.viewDispatch({
type: "pages-listed",
pages: pages,
});
},
});
// Load settings
this.settings = await this.loadSettings();
this.pageNavigator = new PathPageNavigator(
this.settings.indexPage,
);
2022-11-24 11:04:00 +00:00
await this.reloadPlugs();
2022-08-30 08:44:20 +00:00
this.pageNavigator.subscribe(async (pageName, pos: number | string) => {
2022-09-13 06:41:01 +00:00
console.log("Now navigating to", pageName);
if (!this.editorView) {
return;
}
const stateRestored = await this.loadPage(pageName);
2022-03-28 13:25:05 +00:00
if (pos) {
2022-08-30 08:44:20 +00:00
if (typeof pos === "string") {
2022-10-24 17:40:52 +00:00
console.log("Navigating to anchor", pos);
2022-08-30 08:44:20 +00:00
// We're going to look up the anchor through a direct page store query...
const posLookup = await this.system.localSyscall(
"core",
"index.get",
[
pageName,
2022-10-24 17:40:52 +00:00
`a:${pageName}:${pos}`,
],
);
2022-08-30 08:44:20 +00:00
if (!posLookup) {
return this.flashNotification(
`Could not find anchor @${pos}`,
"error",
2022-08-30 08:44:20 +00:00
);
} else {
pos = +posLookup;
}
}
2022-03-28 13:25:05 +00:00
this.editorView.dispatch({
selection: { anchor: pos },
2022-08-30 08:44:20 +00:00
scrollIntoView: true,
2022-03-28 13:25:05 +00:00
});
2022-09-06 14:33:00 +00:00
} else if (!stateRestored) {
2022-11-24 15:55:30 +00:00
// 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) {
2022-11-29 08:17:40 +00:00
// Frontmatter found, put cursor after it
2022-12-19 11:35:58 +00:00
initialCursorPos = match[0].length;
2022-11-24 15:55:30 +00:00
}
// By default scroll to the top
this.editorView.scrollDOM.scrollTop = 0;
2022-09-06 14:33:00 +00:00
this.editorView.dispatch({
2022-11-24 15:55:30 +00:00
selection: { anchor: initialCursorPos },
// And then scroll down if required
2022-09-06 14:33:00 +00:00
scrollIntoView: true,
});
2022-03-28 13:25:05 +00:00
}
});
this.loadCustomStyles().catch(console.error);
2023-01-22 14:48:12 +00:00
// Kick off background sync
this.syncService.start();
this.collabManager.start();
this.eventHook.addLocalListener("sync:success", async (operations) => {
2023-05-29 07:53:49 +00:00
// console.log("Operations", operations);
if (operations > 0) {
// Update the page list
await this.space.updatePageList();
}
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.plugsUpdated) {
// To register new commands, update editor state based on new plugs
this.rebuildEditorState();
this.dispatchAppEvent("editor:pageLoaded", this.currentPage);
if (operations) {
// Likely initial sync so let's show visually that we're synced now
2023-06-14 18:58:08 +00:00
// this.flashNotification(`Synced ${operations} files`, "info");
this.showProgress(100);
}
}
// Reset for next sync cycle
this.plugsUpdated = false;
this.viewDispatch({ type: "sync-change", synced: true });
});
this.eventHook.addLocalListener("sync:error", (name) => {
this.viewDispatch({ type: "sync-change", synced: false });
});
this.eventHook.addLocalListener("sync:conflict", (name) => {
this.flashNotification(
`Sync: conflict detected for ${name} - conflict copy created`,
"error",
);
});
this.eventHook.addLocalListener("sync:progress", (status: SyncStatus) => {
2023-06-14 18:58:08 +00:00
this.showProgress(
Math.round(status.filesProcessed / status.totalFiles * 100),
);
});
2022-07-11 07:08:22 +00:00
await this.dispatchAppEvent("editor:init");
}
async loadSettings(): Promise<BuiltinSettings> {
let settingsText: string | undefined;
try {
settingsText = (await this.space.readPage("SETTINGS")).text;
} catch (e: any) {
console.log("No SETTINGS page, falling back to default");
settingsText = "```yaml\nindexPage: index\n```\n";
}
const settings = parseYamlSettings(settingsText!) as BuiltinSettings;
if (!settings.indexPage) {
settings.indexPage = "index";
}
return settings;
}
save(immediate = false): Promise<void> {
return new Promise((resolve, reject) => {
if (this.saveTimeout) {
clearTimeout(this.saveTimeout);
}
this.saveTimeout = setTimeout(
() => {
if (this.currentPage) {
if (
!this.viewState.unsavedChanges ||
this.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,
this.editorView!.state.sliceDoc(0),
true,
)
.then(async (meta) => {
this.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();
}
},
immediate ? 0 : saveInterval,
);
});
}
flashNotification(message: string, type: "info" | "error" = "info") {
const id = Math.floor(Math.random() * 1000000);
this.viewDispatch({
type: "show-notification",
notification: {
id,
type,
message,
date: new Date(),
},
});
setTimeout(
() => {
this.viewDispatch({
type: "dismiss-notification",
id: id,
});
},
type === "info" ? 4000 : 5000,
);
}
2023-06-14 18:58:08 +00:00
progressTimeout?: number;
showProgress(progressPerc: number) {
this.viewDispatch({
type: "set-progress",
progressPerc,
});
if (this.progressTimeout) {
clearTimeout(this.progressTimeout);
}
this.progressTimeout = setTimeout(
() => {
this.viewDispatch({
type: "set-progress",
});
},
10000,
);
}
filterBox(
label: string,
options: FilterOption[],
helpText = "",
placeHolder = "",
): Promise<FilterOption | undefined> {
return new Promise((resolve) => {
this.viewDispatch({
type: "show-filterbox",
label,
options,
placeHolder,
helpText,
onSelect: (option: any) => {
this.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) => {
this.viewDispatch({
type: "show-prompt",
message,
defaultValue,
callback: (value: string | undefined) => {
this.viewDispatch({ type: "hide-prompt" });
this.focus();
resolve(value);
},
});
});
}
confirm(
message: string,
): Promise<boolean> {
return new Promise((resolve) => {
this.viewDispatch({
type: "show-confirm",
message,
callback: (value: boolean) => {
this.viewDispatch({ type: "hide-confirm" });
this.focus();
resolve(value);
},
});
});
}
dispatchAppEvent(name: AppEvent, ...args: any[]): Promise<any[]> {
return this.eventHook.dispatchEvent(name, ...args);
}
2023-01-16 10:28:59 +00:00
createEditorState(
pageName: string,
text: string,
readOnly: boolean,
): EditorState {
const commandKeyBindings: KeyBinding[] = [];
for (const def of this.commandHook.editorCommands.values()) {
if (def.command.key) {
commandKeyBindings.push({
key: def.command.key,
mac: def.command.mac,
run: (): boolean => {
if (def.command.contexts) {
const context = this.getContext();
if (!context || !def.command.contexts.includes(context)) {
return false;
}
}
Promise.resolve()
2022-03-28 13:25:05 +00:00
.then(def.run)
.catch((e: any) => {
console.error(e);
this.flashNotification(
`Error running command: ${e.message}`,
"error",
);
})
.then(() => {
// Always be focusing the editor after running a command
editor.focus();
2022-03-28 13:25:05 +00:00
});
return true;
},
});
}
}
// deno-lint-ignore no-this-alias
const editor = this;
let touchCount = 0;
return EditorState.create({
2022-10-25 16:50:07 +00:00
doc: this.collabState ? this.collabState.ytext.toString() : text,
extensions: [
// Not using CM theming right now, but some extensions depend on the "dark" thing
EditorView.theme({}, { dark: this.viewState.uiOptions.darkMode }),
2022-12-15 14:55:50 +00:00
// Enable vim mode, or not
[...editor.viewState.uiOptions.vimMode ? [vim({ status: true })] : []],
2023-01-16 10:28:59 +00:00
[
...readOnly || editor.viewState.uiOptions.forcedROMode
? [readonlyMode()]
: [],
],
2022-12-15 14:55:50 +00:00
// The uber markdown mode
2022-06-14 07:45:22 +00:00
markdown({
base: buildMarkdown(this.mdExtensions),
codeLanguages: [
LanguageDescription.of({
name: "yaml",
2023-01-21 12:44:11 +00:00
alias: ["meta", "data", "embed"],
support: new LanguageSupport(StreamLanguage.define(yamlLanguage)),
}),
LanguageDescription.of({
name: "javascript",
alias: ["js"],
support: new LanguageSupport(javascriptLanguage),
}),
LanguageDescription.of({
name: "typescript",
alias: ["ts"],
support: new LanguageSupport(typescriptLanguage),
}),
2023-01-06 17:17:39 +00:00
LanguageDescription.of({
name: "sql",
alias: ["sql"],
support: new LanguageSupport(StreamLanguage.define(sqlLanguage)),
}),
LanguageDescription.of({
name: "postgresql",
alias: ["pgsql", "postgres"],
support: new LanguageSupport(
StreamLanguage.define(postgresqlLanguage),
),
}),
LanguageDescription.of({
name: "rust",
alias: ["rs"],
support: new LanguageSupport(StreamLanguage.define(rustLanguage)),
}),
LanguageDescription.of({
name: "css",
support: new LanguageSupport(StreamLanguage.define(sqlLanguage)),
}),
LanguageDescription.of({
name: "python",
alias: ["py"],
support: new LanguageSupport(
StreamLanguage.define(pythonLanguage),
),
}),
LanguageDescription.of({
name: "protobuf",
alias: ["proto"],
support: new LanguageSupport(
StreamLanguage.define(protobufLanguage),
),
}),
LanguageDescription.of({
name: "shell",
alias: ["sh", "bash", "zsh", "fish"],
support: new LanguageSupport(
StreamLanguage.define(shellLanguage),
),
}),
LanguageDescription.of({
name: "swift",
support: new LanguageSupport(StreamLanguage.define(rustLanguage)),
}),
LanguageDescription.of({
name: "toml",
support: new LanguageSupport(StreamLanguage.define(tomlLanguage)),
}),
LanguageDescription.of({
name: "json",
support: new LanguageSupport(StreamLanguage.define(jsonLanguage)),
}),
LanguageDescription.of({
name: "xml",
support: new LanguageSupport(StreamLanguage.define(xmlLanguage)),
}),
LanguageDescription.of({
name: "c",
support: new LanguageSupport(StreamLanguage.define(cLanguage)),
}),
LanguageDescription.of({
name: "cpp",
alias: ["c++", "cxx"],
support: new LanguageSupport(StreamLanguage.define(cppLanguage)),
}),
LanguageDescription.of({
name: "java",
support: new LanguageSupport(StreamLanguage.define(javaLanguage)),
}),
LanguageDescription.of({
name: "csharp",
alias: ["c#", "cs"],
support: new LanguageSupport(
StreamLanguage.define(csharpLanguage),
),
}),
LanguageDescription.of({
name: "scala",
alias: ["sc"],
support: new LanguageSupport(
StreamLanguage.define(scalaLanguage),
),
}),
LanguageDescription.of({
name: "kotlin",
alias: ["kt", "kts"],
support: new LanguageSupport(
StreamLanguage.define(kotlinLanguage),
),
}),
LanguageDescription.of({
name: "objc",
alias: ["objective-c", "objectivec"],
support: new LanguageSupport(
StreamLanguage.define(objectiveCLanguage),
),
}),
LanguageDescription.of({
name: "objcpp",
alias: [
"objc++",
"objective-cpp",
"objectivecpp",
"objective-c++",
"objectivec++",
],
support: new LanguageSupport(
StreamLanguage.define(objectiveCppLanguage),
),
}),
LanguageDescription.of({
name: "dart",
support: new LanguageSupport(StreamLanguage.define(dartLanguage)),
}),
],
addKeymap: true,
2022-06-14 07:45:22 +00:00
}),
2022-06-13 16:31:36 +00:00
syntaxHighlighting(customMarkdownStyle(this.mdExtensions)),
autocompletion({
override: [
this.editorComplete.bind(this),
this.slashCommandHook.slashCommandCompleter.bind(
this.slashCommandHook,
),
],
}),
inlineImagesPlugin(this),
2022-09-13 06:41:01 +00:00
highlightSpecialChars(),
history(),
drawSelection(),
dropCursor(),
2023-06-14 17:27:18 +00:00
codeFolding({
placeholderText: "…",
}),
indentOnInput(),
...cleanModePlugins(this),
EditorView.lineWrapping,
lineWrapper([
2022-08-02 12:40:04 +00:00
{ selector: "ATXHeading1", class: "sb-line-h1" },
{ selector: "ATXHeading2", class: "sb-line-h2" },
{ selector: "ATXHeading3", class: "sb-line-h3" },
{ selector: "ATXHeading4", class: "sb-line-h4" },
2022-08-02 12:40:04 +00:00
{ selector: "ListItem", class: "sb-line-li", nesting: true },
{ selector: "Blockquote", class: "sb-line-blockquote" },
{ selector: "Task", class: "sb-line-task" },
{ selector: "CodeBlock", class: "sb-line-code" },
2023-07-02 11:41:40 +00:00
{
selector: "FencedCode",
class: "sb-line-fenced-code",
disableSpellCheck: true,
},
2022-08-02 12:40:04 +00:00
{ selector: "Comment", class: "sb-line-comment" },
{ selector: "BulletList", class: "sb-line-ul" },
{ selector: "OrderedList", class: "sb-line-ol" },
{ selector: "TableHeader", class: "sb-line-tbl-header" },
{ selector: "FrontMatter", class: "sb-frontmatter" },
]),
keymap.of([
...smartQuoteKeymap,
...closeBracketsKeymap,
...standardKeymap,
...searchKeymap,
...historyKeymap,
...completionKeymap,
2022-10-25 16:50:07 +00:00
...(this.collabState ? yUndoManagerKeymap : []),
indentWithTab,
...commandKeyBindings,
{
key: "Ctrl-k",
mac: "Cmd-k",
run: (): boolean => {
this.viewDispatch({ type: "start-navigate" });
2022-04-26 17:04:36 +00:00
this.space.updatePageList();
2023-06-14 17:27:18 +00:00
return true;
},
},
{
key: "Ctrl-/",
mac: "Cmd-/",
run: (): boolean => {
this.viewDispatch({
type: "show-palette",
context: this.getContext(),
});
return true;
},
},
2023-05-08 07:59:29 +00:00
{
key: "Ctrl-.",
mac: "Cmd-.",
run: (): boolean => {
this.viewDispatch({
type: "show-palette",
context: this.getContext(),
});
return true;
},
},
]),
EditorView.domEventHandlers({
// This may result in duplicated touch events on mobile devices
touchmove: (event: TouchEvent, view: EditorView) => {
touchCount++;
},
touchend: (event: TouchEvent, view: EditorView) => {
if (touchCount === 0) {
safeRun(async () => {
const touch = event.changedTouches.item(0)!;
if (!event.altKey && event.target instanceof Element) {
// prevent the browser from opening the link twice
const parentA = event.target.closest("a");
if (parentA) {
event.preventDefault();
}
}
const clickEvent: ClickEvent = {
page: pageName,
ctrlKey: event.ctrlKey,
metaKey: event.metaKey,
altKey: event.altKey,
pos: view.posAtCoords({
x: touch.clientX,
y: touch.clientY,
})!,
};
await this.dispatchAppEvent("page:click", clickEvent);
});
}
touchCount = 0;
},
2023-01-13 15:33:36 +00:00
mousedown: (event: MouseEvent, view: EditorView) => {
safeRun(async () => {
const pos = view.posAtCoords(event);
if (!pos) {
return;
}
const potentialClickEvent: ClickEvent = {
2022-03-28 13:25:05 +00:00
page: pageName,
ctrlKey: event.ctrlKey,
metaKey: event.metaKey,
altKey: event.altKey,
pos: view.posAtCoords({
x: event.x,
y: event.y,
})!,
};
// Make sure <a> tags are clicked without moving the cursor there
if (!event.altKey && event.target instanceof Element) {
const parentA = event.target.closest("a");
if (parentA) {
event.stopPropagation();
event.preventDefault();
await this.dispatchAppEvent(
"page:click",
potentialClickEvent,
);
return;
}
}
const distanceX = event.x - view.coordsAtPos(pos)!.left;
// What we're trying to determine here is if the click occured anywhere near the looked up position
// this may not be the case with locations that expand signifcantly based on live preview (such as links), we don't want any accidental clicks
// Fixes #357
if (distanceX <= view.defaultCharacterWidth) {
await this.dispatchAppEvent("page:click", potentialClickEvent);
}
});
},
}),
ViewPlugin.fromClass(
class {
update(update: ViewUpdate): void {
if (update.docChanged) {
editor.viewDispatch({ type: "page-changed" });
2022-04-04 13:25:07 +00:00
editor.debouncedUpdateEvent();
editor.save().catch((e) => console.error("Error saving", e));
}
}
},
),
2022-03-30 13:16:22 +00:00
pasteLinkExtension,
attachmentExtension(this),
2022-06-14 07:45:22 +00:00
closeBrackets(),
2022-10-25 16:50:07 +00:00
...[this.collabState ? this.collabState.collabExtension() : []],
],
});
}
2022-04-26 17:04:36 +00:00
async reloadPlugs() {
console.log("Loading plugs");
2022-04-26 17:04:36 +00:00
await this.space.updatePageList();
await this.system.unloadAll();
console.log("(Re)loading plugs");
2022-10-21 14:48:48 +00:00
await Promise.all((await this.space.listPlugs()).map(async (plugName) => {
try {
await this.system.load(
new URL(`/.fs/${plugName}`, location.href),
createSandbox,
);
} catch (e: any) {
console.error("Could not load plug", plugName, "error:", e.message);
}
2022-10-21 14:48:48 +00:00
}));
2022-04-26 17:04:36 +00:00
this.rebuildEditorState();
2022-07-11 07:08:22 +00:00
await this.dispatchAppEvent("plugs:loaded");
2022-04-26 17:04:36 +00:00
}
2022-03-31 15:25:34 +00:00
rebuildEditorState() {
const editorView = this.editorView;
2022-06-14 14:55:50 +00:00
console.log("Rebuilding editor state");
2022-04-11 18:34:09 +00:00
// Load all syntax extensions
this.mdExtensions = loadMarkdownExtensions(this.system);
// And reload the syscalls to use the new syntax extensions
this.system.registerSyscalls(
[],
markdownSyscalls(buildMarkdown(this.mdExtensions)),
);
2022-04-11 18:34:09 +00:00
if (editorView && this.currentPage) {
// And update the editor if a page is loaded
2022-09-06 14:33:00 +00:00
this.saveState(this.currentPage);
2022-04-26 17:04:36 +00:00
2022-03-31 15:25:34 +00:00
editorView.setState(
2023-01-16 10:28:59 +00:00
this.createEditorState(
this.currentPage,
editorView.state.sliceDoc(),
this.viewState.currentPageMeta?.perm === "ro",
),
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
this.restoreState(this.currentPage);
2022-03-31 15:25:34 +00:00
}
}
// Code completion support
private 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);
const results = await this.dispatchAppEvent(eventName, {
pageName: this.currentPage!,
linePrefix,
pos: selection.from,
} 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;
}
}
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() {
this.editorView!.focus();
}
getUsername(): string {
return localStorage.getItem("username") || "you";
}
async navigate(
name: string,
pos?: number | string,
replaceState = false,
newWindow = false,
) {
2022-08-02 10:43:39 +00:00
if (!name) {
name = this.settings!.indexPage;
2022-08-02 10:43:39 +00:00
}
if (newWindow) {
const win = window.open(`${location.origin}/${name}`, "_blank");
if (win) {
win.focus();
}
return;
}
await this.pageNavigator!.navigate(name, pos, replaceState);
}
2022-09-06 14:33:00 +00:00
async loadPage(pageName: string): Promise<boolean> {
const loadingDifferentPage = pageName !== this.currentPage;
const editorView = this.editorView;
if (!editorView) {
2022-09-06 14:33:00 +00:00
return false;
}
2022-09-06 14:33:00 +00:00
const previousPage = this.currentPage;
// Persist current page state and nicely close page
2022-09-06 14:33:00 +00:00
if (previousPage) {
this.saveState(previousPage);
this.space.unwatchPage(previousPage);
2022-10-10 16:19:08 +00:00
if (previousPage !== pageName) {
await this.save(true);
2022-10-25 16:50:07 +00:00
// And stop the collab session
if (this.collabState) {
this.stopCollab();
2022-10-25 16:50:07 +00:00
}
2022-10-10 16:19:08 +00:00
}
}
2022-09-12 12:50:37 +00:00
this.viewDispatch({
type: "page-loading",
name: pageName,
});
// Fetch next page to open
let doc;
try {
doc = await this.space.readPage(pageName);
} catch (e: any) {
// Not found, new page
console.log("Creating new page", pageName);
doc = {
text: "",
2022-05-17 09:53:17 +00:00
meta: { name: pageName, lastModified: 0, perm: "rw" } as PageMeta,
};
}
2023-01-16 10:28:59 +00:00
const editorState = this.createEditorState(
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);
}
const stateRestored = this.restoreState(pageName);
this.space.watchPage(pageName);
this.viewDispatch({
type: "page-loaded",
2022-05-17 09:53:17 +00:00
meta: doc.meta,
});
2022-04-04 13:25:07 +00:00
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-02 12:48:27 +00:00
if (this.settings?.customStyles) {
try {
const { text: stylesText } = await this.space.readPage(
this.settings?.customStyles,
);
const cssBlockRegex = /```css([^`]+)```/;
const match = cssBlockRegex.exec(stylesText);
if (!match) {
return;
}
const css = match[1];
document.getElementById("custom-styles")!.innerHTML = css;
} catch (e: any) {
console.error("Failed to load custom styles", e);
}
}
}
2022-09-06 14:33:00 +00:00
private restoreState(pageName: string): boolean {
const pageState = this.openPages.get(pageName);
2022-04-26 17:04:36 +00:00
const editorView = this.editorView!;
if (pageState) {
// Restore state
editorView.scrollDOM.scrollTop = pageState!.scrollTop;
try {
editorView.dispatch({
selection: pageState.selection,
scrollIntoView: true,
});
} catch {
// This is fine, just go to the top
editorView.dispatch({
selection: { anchor: 0 },
scrollIntoView: true,
});
}
} else {
editorView.scrollDOM.scrollTop = 0;
editorView.dispatch({
selection: { anchor: 0 },
scrollIntoView: true,
});
2022-04-26 17:04:36 +00:00
}
editorView.focus();
2022-09-06 14:33:00 +00:00
return !!pageState;
2022-04-26 17:04:36 +00:00
}
2022-09-06 14:33:00 +00:00
private saveState(currentPage: string) {
2022-04-26 17:04:36 +00:00
this.openPages.set(
2022-09-06 14:33:00 +00:00
currentPage,
2022-04-26 17:04:36 +00:00
new PageState(
this.editorView!.scrollDOM.scrollTop,
this.editorView!.state.selection,
),
2022-04-26 17:04:36 +00:00
);
}
ViewComponent() {
const [viewState, dispatch] = useReducer(reducer, initialViewState);
this.viewState = viewState;
this.viewDispatch = dispatch;
// deno-lint-ignore no-this-alias
const editor = this;
useEffect(() => {
if (viewState.currentPage) {
document.title = viewState.currentPage;
}
}, [viewState.currentPage]);
2022-09-16 12:26:47 +00:00
useEffect(() => {
if (editor.editorView) {
editor.tweakEditorDOM(
editor.editorView.contentDOM,
);
}
}, [viewState.uiOptions.forcedROMode]);
useEffect(() => {
this.rebuildEditorState();
2023-01-23 17:52:17 +00:00
this.dispatchAppEvent("editor:modeswitch");
}, [viewState.uiOptions.vimMode]);
useEffect(() => {
document.documentElement.dataset.theme = viewState.uiOptions.darkMode
? "dark"
: "light";
}, [viewState.uiOptions.darkMode]);
useEffect(() => {
// Need to dispatch a resize event so that the top_bar can pick it up
globalThis.dispatchEvent(new Event("resize"));
}, [viewState.panels]);
2022-09-16 12:26:47 +00:00
return (
2022-04-04 16:33:13 +00:00
<>
{viewState.showPageNavigator && (
<PageNavigator
allPages={viewState.allPages}
currentPage={this.currentPage}
completer={this.miniEditorComplete.bind(this)}
vimMode={viewState.uiOptions.vimMode}
darkMode={viewState.uiOptions.darkMode}
onNavigate={(page) => {
dispatch({ type: "stop-navigate" });
setTimeout(() => {
editor.focus();
});
if (page) {
safeRun(async () => {
await editor.navigate(page);
});
}
}}
/>
)}
{viewState.showCommandPalette && (
<CommandPalette
onTrigger={(cmd) => {
dispatch({ type: "hide-palette" });
setTimeout(() => {
editor.focus();
});
if (cmd) {
2022-05-16 13:09:36 +00:00
dispatch({ type: "command-run", command: cmd.command.name });
cmd
.run()
.catch((e: any) => {
console.error("Error running command", e.message);
})
.then(() => {
// Always be focusing the editor after running a command
editor.focus();
});
}
}}
commands={this.getCommandsByContext(viewState)}
vimMode={viewState.uiOptions.vimMode}
darkMode={viewState.uiOptions.darkMode}
completer={this.miniEditorComplete.bind(this)}
2022-05-16 13:09:36 +00:00
recentCommands={viewState.recentCommands}
/>
)}
{viewState.showFilterBox && (
<FilterList
label={viewState.filterBoxLabel}
placeholder={viewState.filterBoxPlaceHolder}
options={viewState.filterBoxOptions}
vimMode={viewState.uiOptions.vimMode}
darkMode={viewState.uiOptions.darkMode}
allowNew={false}
completer={this.miniEditorComplete.bind(this)}
helpText={viewState.filterBoxHelpText}
onSelect={viewState.filterBoxOnSelect}
/>
2022-12-21 15:08:51 +00:00
)}
{viewState.showPrompt && (
<Prompt
message={viewState.promptMessage!}
defaultValue={viewState.promptDefaultValue}
vimMode={viewState.uiOptions.vimMode}
darkMode={viewState.uiOptions.darkMode}
completer={this.miniEditorComplete.bind(this)}
callback={(value) => {
dispatch({ type: "hide-prompt" });
viewState.promptCallback!(value);
}}
/>
)}
{viewState.showConfirm && (
<Confirm
message={viewState.confirmMessage!}
callback={(value) => {
dispatch({ type: "hide-confirm" });
viewState.confirmCallback!(value);
}}
/>
)}
<TopBar
pageName={viewState.currentPage}
notifications={viewState.notifications}
synced={viewState.synced}
unsavedChanges={viewState.unsavedChanges}
isLoading={viewState.isLoading}
vimMode={viewState.uiOptions.vimMode}
darkMode={viewState.uiOptions.darkMode}
2023-06-14 18:58:08 +00:00
progressPerc={viewState.progressPerc}
completer={editor.miniEditorComplete.bind(editor)}
onRename={async (newName) => {
if (!newName) {
// Always move cursor to the start of the page
editor.editorView?.dispatch({
selection: { anchor: 0 },
});
editor.focus();
return;
}
console.log("Now renaming page to...", newName);
await editor.system.loadedPlugs.get("core")!.invoke(
"renamePage",
2022-12-13 08:49:31 +00:00
[{ page: newName }],
);
editor.focus();
}}
actionButtons={[
{
icon: HomeIcon,
description: `Go home (Alt-h)`,
callback: () => {
editor.navigate("");
},
href: "",
},
{
icon: BookIcon,
description: `Open page (${isMacLike() ? "Cmd-k" : "Ctrl-k"})`,
callback: () => {
dispatch({ type: "start-navigate" });
this.space.updatePageList();
},
},
{
icon: TerminalIcon,
description: `Run command (${isMacLike() ? "Cmd-/" : "Ctrl-/"})`,
callback: () => {
dispatch({ type: "show-palette", context: this.getContext() });
},
},
]}
rhs={!!viewState.panels.rhs.mode && (
<div
className="panel"
style={{ flex: viewState.panels.rhs.mode }}
/>
)}
lhs={!!viewState.panels.lhs.mode && (
<div
className="panel"
style={{ flex: viewState.panels.lhs.mode }}
/>
)}
/>
2022-07-22 11:44:28 +00:00
<div id="sb-main">
{!!viewState.panels.lhs.mode && (
<Panel config={viewState.panels.lhs} editor={editor} />
2022-04-04 16:33:13 +00:00
)}
2022-07-22 11:44:28 +00:00
<div id="sb-editor" />
{!!viewState.panels.rhs.mode && (
<Panel config={viewState.panels.rhs} editor={editor} />
2022-04-04 16:33:13 +00:00
)}
</div>
{!!viewState.panels.modal.mode && (
<div
className="sb-modal"
style={{ inset: `${viewState.panels.modal.mode}px` }}
>
<Panel config={viewState.panels.modal} editor={editor} />
</div>
)}
{!!viewState.panels.bhs.mode && (
2022-08-02 12:40:04 +00:00
<div className="sb-bhs">
<Panel config={viewState.panels.bhs} editor={editor} />
2022-04-26 17:04:36 +00:00
</div>
)}
2022-04-04 16:33:13 +00:00
</>
);
}
async runCommandByName(name: string, ...args: any[]) {
2022-07-11 07:08:22 +00:00
const cmd = this.viewState.commands.get(name);
if (cmd) {
await cmd.run();
} else {
throw new Error(`Command ${name} not found`);
}
}
render(container: Element) {
const ViewComponent = this.ViewComponent.bind(this);
preactRender(<ViewComponent />, container);
}
private 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;
}
private getContext(): string | undefined {
const state = this.editorView!.state;
const selection = state.selection.main;
if (selection.empty) {
return syntaxTree(state).resolveInner(selection.from).type.name;
}
return;
}
2022-10-25 16:50:07 +00:00
startCollab(
serverUrl: string,
token: string,
username: string,
isLocalCollab = false,
) {
2022-10-25 16:50:07 +00:00
if (this.collabState) {
// Clean up old collab state
this.collabState.stop();
}
const initialText = this.editorView!.state.sliceDoc();
this.collabState = new CollabState(
serverUrl,
`${this.currentPage!}.md`,
token,
username,
this.syncService,
isLocalCollab,
);
this.collabState.collabProvider.on("synced", () => {
if (this.collabState!.ytext.toString() === "") {
console.log(
"[Collab]",
"Synced value is empty (new collab session), inserting local copy",
);
this.collabState!.ytext.insert(0, initialText);
2022-10-25 16:50:07 +00:00
}
});
2022-10-25 16:50:07 +00:00
this.rebuildEditorState();
// Don't watch for local changes in this mode
this.space.unwatch();
}
stopCollab() {
if (this.collabState) {
this.collabState.stop();
this.collabState = undefined;
this.rebuildEditorState();
}
// Start file watching again
this.space.watch();
2022-10-25 16:50:07 +00:00
}
}