1
0
silverbullet/webapp/editor.tsx

494 lines
14 KiB
TypeScript
Raw Normal View History

import {
autocompletion,
Completion,
CompletionContext,
completionKeymap,
CompletionResult,
} from "@codemirror/autocomplete";
import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
import { indentWithTab, standardKeymap } from "@codemirror/commands";
import { history, historyKeymap } from "@codemirror/history";
import { bracketMatching } from "@codemirror/matchbrackets";
import { searchKeymap } from "@codemirror/search";
import { EditorSelection, EditorState, Text } from "@codemirror/state";
import {
drawSelection,
dropCursor,
EditorView,
highlightSpecialChars,
KeyBinding,
keymap,
} from "@codemirror/view";
import React, { useEffect, useReducer } from "react";
import ReactDOM from "react-dom";
2022-03-23 14:41:12 +00:00
import { createSandbox as createIFrameSandbox } from "../plugbox/environment/iframe_sandbox";
import { AppEvent, AppEventDispatcher, ClickEvent } from "./app_event";
import { CollabDocument, collabExtension } from "./collab";
import * as commands from "./commands";
import { CommandPalette } from "./components/command_palette";
import { PageNavigator } from "./components/page_navigator";
import { TopBar } from "./components/top_bar";
import { Cursor } from "./cursorEffect";
import { lineWrapper } from "./line_wrapper";
import { markdown } from "./markdown";
import { IPageNavigator, PathPageNavigator } from "./navigator";
import customMarkDown from "./parser";
import reducer from "./reducer";
import { smartQuoteKeymap } from "./smart_quotes";
import { Space } from "./space";
import customMarkdownStyle from "./style";
import editorSyscalls from "./syscalls/editor.browser";
import indexerSyscalls from "./syscalls/indexer.native";
import spaceSyscalls from "./syscalls/space.native";
import {
Action,
AppCommand,
AppViewState,
initialViewState,
slashCommandRegexp,
} from "./types";
2022-03-21 14:21:34 +00:00
import { SilverBulletHooks } from "../common/manifest";
import { safeRun } from "./util";
2022-03-23 14:41:12 +00:00
import { System } from "../plugbox/system";
class PageState {
scrollTop: number;
selection: EditorSelection;
constructor(scrollTop: number, selection: EditorSelection) {
this.scrollTop = scrollTop;
this.selection = selection;
}
}
export class Editor implements AppEventDispatcher {
2022-03-23 14:41:12 +00:00
private system = new System<SilverBulletHooks>("client");
openPages = new Map<string, PageState>();
editorCommands = new Map<string, AppCommand>();
editorView?: EditorView;
viewState: AppViewState;
viewDispatch: React.Dispatch<Action>;
space: Space;
navigationResolve?: (val: undefined) => void;
pageNavigator: IPageNavigator;
constructor(space: Space, parent: Element) {
this.space = space;
this.viewState = initialViewState;
this.viewDispatch = () => {};
this.render(parent);
this.editorView = new EditorView({
state: this.createEditorState(
"",
new CollabDocument(Text.of([""]), 0, new Map<string, Cursor>())
),
parent: document.getElementById("editor")!,
});
this.pageNavigator = new PathPageNavigator();
2022-03-21 14:21:34 +00:00
this.system.registerSyscalls(
editorSyscalls(this),
spaceSyscalls(this),
indexerSyscalls(this.space)
);
}
async init() {
this.focus();
this.pageNavigator.subscribe(async (pageName) => {
console.log("Now navigating to", pageName);
if (!this.editorView) {
return;
}
await this.loadPage(pageName);
});
this.space.on({
connect: () => {
if (this.currentPage) {
console.log("Connected to socket, fetch fresh?");
this.flashNotification("Reconnected, reloading page");
this.reloadPage();
}
},
pageChanged: (meta) => {
if (this.currentPage === meta.name) {
console.log("Page changed on disk, reloading");
this.flashNotification("Page changed on disk, reloading");
this.reloadPage();
}
},
pageListUpdated: (pages) => {
this.viewDispatch({
type: "pages-listed",
pages: pages,
});
},
2022-03-21 14:21:34 +00:00
loadSystem: (systemJSON) => {
safeRun(async () => {
await this.system.replaceAllFromJSON(systemJSON, () =>
createIFrameSandbox(this.system)
);
2022-03-23 14:41:12 +00:00
this.buildAllCommands();
2022-03-21 14:21:34 +00:00
});
},
2022-03-23 14:41:12 +00:00
plugLoaded: (plugName, plug) => {
2022-03-21 14:21:34 +00:00
safeRun(async () => {
2022-03-23 14:41:12 +00:00
console.log("Plug load", plugName);
2022-03-21 14:21:34 +00:00
await this.system.load(
plugName,
plug,
createIFrameSandbox(this.system)
);
2022-03-23 14:41:12 +00:00
this.buildAllCommands();
2022-03-21 14:21:34 +00:00
});
},
2022-03-23 14:41:12 +00:00
plugUnloaded: (plugName) => {
2022-03-21 14:21:34 +00:00
safeRun(async () => {
2022-03-23 14:41:12 +00:00
console.log("Plug unload", plugName);
2022-03-21 14:21:34 +00:00
await this.system.unload(plugName);
});
},
});
if (this.pageNavigator.getCurrentPage() === "") {
this.pageNavigator.navigate("start");
}
}
2022-03-23 14:41:12 +00:00
private buildAllCommands() {
console.log("Loaded plugs, now updating editor commands");
this.editorCommands.clear();
for (let plug of this.system.loadedPlugs.values()) {
const cmds = plug.manifest!.hooks.commands;
for (let name in cmds) {
let cmd = cmds[name];
this.editorCommands.set(name, {
command: cmd,
run: async (arg): Promise<any> => {
return await plug.invoke(cmd.invoke, [arg]);
},
});
}
}
this.viewDispatch({
type: "update-commands",
commands: this.editorCommands,
});
}
flashNotification(message: string) {
let id = Math.floor(Math.random() * 1000000);
this.viewDispatch({
type: "show-notification",
notification: {
id: id,
message: message,
date: new Date(),
},
});
setTimeout(() => {
this.viewDispatch({
type: "dismiss-notification",
id: id,
});
}, 2000);
}
async dispatchAppEvent(name: AppEvent, data?: any): Promise<any[]> {
2022-03-21 14:21:34 +00:00
return this.system.dispatchEvent(name, data);
}
get currentPage(): string | undefined {
return this.viewState.currentPage;
}
createEditorState(pageName: string, doc: CollabDocument): EditorState {
let commandKeyBindings: KeyBinding[] = [];
for (let def of this.editorCommands.values()) {
if (def.command.key) {
commandKeyBindings.push({
key: def.command.key,
mac: def.command.mac,
run: (): boolean => {
Promise.resolve()
.then(async () => {
await def.run(null);
})
.catch((e) => console.error(e));
return true;
},
});
}
}
return EditorState.create({
doc: doc.text,
extensions: [
highlightSpecialChars(),
history(),
drawSelection(),
dropCursor(),
customMarkdownStyle,
bracketMatching(),
closeBrackets(),
collabExtension(pageName, this.space.socket.id, doc, this.space, {
pushUpdates: this.space.pushUpdates.bind(this.space),
pullUpdates: this.space.pullUpdates.bind(this.space),
reload: this.reloadPage.bind(this),
}),
autocompletion({
override: [
this.plugCompleter.bind(this),
this.commandCompleter.bind(this),
],
}),
EditorView.lineWrapping,
lineWrapper([
{ selector: "ATXHeading1", class: "line-h1" },
{ selector: "ATXHeading2", class: "line-h2" },
{ selector: "ATXHeading3", class: "line-h3" },
{ selector: "ListItem", class: "line-li", nesting: true },
{ selector: "Blockquote", class: "line-blockquote" },
{ selector: "Task", class: "line-task" },
{ selector: "CodeBlock", class: "line-code" },
{ selector: "FencedCode", class: "line-fenced-code" },
{ selector: "Comment", class: "line-comment" },
{ selector: "BulletList", class: "line-ul" },
{ selector: "OrderedList", class: "line-ol" },
]),
keymap.of([
...smartQuoteKeymap,
...closeBracketsKeymap,
...standardKeymap,
...searchKeymap,
...historyKeymap,
...completionKeymap,
indentWithTab,
...commandKeyBindings,
{
key: "Ctrl-b",
mac: "Cmd-b",
run: commands.insertMarker("**"),
},
{
key: "Ctrl-i",
mac: "Cmd-i",
run: commands.insertMarker("_"),
},
{
key: "Ctrl-p",
mac: "Cmd-p",
run: (): boolean => {
window.open(location.href, "_blank")!.focus();
return true;
},
},
{
key: "Ctrl-k",
mac: "Cmd-k",
run: (): boolean => {
this.viewDispatch({ type: "start-navigate" });
return true;
},
},
{
key: "Ctrl-.",
mac: "Cmd-.",
run: (): boolean => {
this.viewDispatch({
type: "show-palette",
});
return true;
},
},
]),
EditorView.domEventHandlers({
click: (event: MouseEvent, view: EditorView) => {
safeRun(async () => {
let clickEvent: ClickEvent = {
ctrlKey: event.ctrlKey,
metaKey: event.metaKey,
altKey: event.altKey,
pos: view.posAtCoords(event)!,
};
await this.dispatchAppEvent("page:click", clickEvent);
});
},
}),
markdown({
base: customMarkDown,
}),
],
});
}
reloadPage() {
console.log("Reloading page");
safeRun(async () => {
await this.loadPage(this.currentPage!);
});
}
async plugCompleter(): Promise<CompletionResult | null> {
let allCompletionResults = await this.dispatchAppEvent("editor:complete");
if (allCompletionResults.length === 1) {
return allCompletionResults[0];
} else if (allCompletionResults.length > 1) {
console.error(
"Got completion results from multiple sources, cannot deal with that",
allCompletionResults
);
}
return null;
}
commandCompleter(ctx: CompletionContext): CompletionResult | null {
let prefix = ctx.matchBefore(slashCommandRegexp);
if (!prefix) {
return null;
}
let options: Completion[] = [];
for (let [name, def] of this.viewState.commands) {
if (!def.command.slashCommand) {
continue;
}
options.push({
label: def.command.slashCommand,
detail: name,
apply: () => {
this.editorView?.dispatch({
changes: {
from: prefix!.from,
to: ctx.pos,
insert: "",
},
});
safeRun(async () => {
await def.run(null);
});
},
});
}
return {
from: prefix.from + 1,
options: options,
};
}
focus() {
this.editorView!.focus();
}
2022-03-23 14:41:12 +00:00
async navigate(name: string) {
await this.pageNavigator.navigate(name);
}
async loadPage(pageName: string) {
const editorView = this.editorView;
if (!editorView) {
return;
}
// Persist current page state and nicely close page
if (this.currentPage) {
let pageState = this.openPages.get(this.currentPage)!;
if (pageState) {
pageState.selection = this.editorView!.state.selection;
pageState.scrollTop = this.editorView!.scrollDOM.scrollTop;
}
await this.space.closePage(this.currentPage);
}
// Fetch next page to open
let doc = await this.space.openPage(pageName);
let editorState = this.createEditorState(pageName, doc);
let pageState = this.openPages.get(pageName);
editorView.setState(editorState);
if (!pageState) {
pageState = new PageState(0, editorState.selection);
this.openPages.set(pageName, pageState!);
editorView.dispatch({
selection: { anchor: 0 },
});
} else {
// Restore state
console.log("Restoring selection state", pageState.selection);
editorView.dispatch({
selection: pageState.selection,
});
editorView.scrollDOM.scrollTop = pageState!.scrollTop;
}
this.viewDispatch({
type: "page-loaded",
name: pageName,
});
}
ViewComponent(): React.ReactElement {
const [viewState, dispatch] = useReducer(reducer, initialViewState);
this.viewState = viewState;
this.viewDispatch = dispatch;
let editor = this;
useEffect(() => {
if (viewState.currentPage) {
document.title = viewState.currentPage;
}
}, [viewState.currentPage]);
return (
<>
{viewState.showPageNavigator && (
<PageNavigator
allPages={viewState.allPages}
currentPage={this.currentPage}
onNavigate={(page) => {
dispatch({ type: "stop-navigate" });
editor.focus();
if (page) {
safeRun(async () => {
editor.navigate(page);
});
}
}}
/>
)}
{viewState.showCommandPalette && (
<CommandPalette
onTrigger={(cmd) => {
dispatch({ type: "hide-palette" });
editor!.focus();
if (cmd) {
safeRun(async () => {
let result = await cmd.run(null);
console.log("Result of command", result);
});
}
}}
commands={viewState.commands}
/>
)}
<TopBar
pageName={viewState.currentPage}
notifications={viewState.notifications}
onClick={() => {
dispatch({ type: "start-navigate" });
}}
/>
<div id="editor"></div>
</>
);
}
render(container: ReactDOM.Container) {
const ViewComponent = this.ViewComponent.bind(this);
ReactDOM.render(<ViewComponent />, container);
}
}