import type { Client } from "../client.ts"; import { foldAll, foldCode, toggleFold, unfoldAll, unfoldCode, } from "@codemirror/language"; import { deleteLine, insertNewline, insertNewlineAndIndent, moveLineDown, moveLineUp, redo, undo, } from "@codemirror/commands"; import type { Transaction } from "@codemirror/state"; import { EditorView } from "@codemirror/view"; import { getCM as vimGetCm, Vim } from "@replit/codemirror-vim"; import type { SysCallMapping } from "../../lib/plugos/system.ts"; import type { FilterOption, UploadFile, } from "@silverbulletmd/silverbullet/type/client"; import { openSearchPanel } from "@codemirror/search"; import { isValidPath, parseToRef, type Path, type Ref, } from "@silverbulletmd/silverbullet/lib/ref"; import { insertNewlineContinueMarkup } from "@codemirror/lang-markdown"; import type { VimConfig } from "../../type/config.ts"; import type { PageMeta } from "../../type/index.ts"; export function editorSyscalls(client: Client): SysCallMapping { const syscalls: SysCallMapping = { "editor.getCurrentPage": (): string => { return client.currentName(); }, "editor.getCurrentPageMeta": (): PageMeta | undefined => { return client.ui.viewState.current?.meta; }, "editor.getCurrentPath": (_ctx): string => { return client.currentPath(); }, "editor.getCurrentEditor": (): string => { return client.documentEditor?.name || "page"; }, "editor.getRecentlyOpenedPages": (): PageMeta[] => { return client.ui.viewState.allPages.sort((a, b) => (b.lastOpened || 0) - (a.lastOpened || 0) ); }, "editor.getText": () => { return client.editorView.state.sliceDoc(); }, "editor.getCurrentLine": (): { from: number; to: number; text: string; textWithCursor: string; } => { const pos = client.editorView.state.selection.main.from; const line = client.editorView.state.doc.lineAt(pos); return { ...line, textWithCursor: line.text.slice(0, pos - line.from) + "|^|" + line.text.slice(pos - line.from), }; }, "editor.setText": (_ctx, newText: string, shouldIsolateHistory = false) => { client.setEditorText(newText, shouldIsolateHistory); }, "editor.getCursor": (): number => { return client.editorView.state.selection.main.from; }, "editor.getSelection": (): { from: number; to: number; text: string } => { const selection = client.editorView.state.selection.main; const text = client.editorView.state.sliceDoc( selection.from, selection.to, ); return { from: selection.from, to: selection.to, text, }; }, "editor.save": () => { return client.save(true); }, "editor.navigate": async ( _ctx, ref: Ref | string, replaceState = false, newWindow = false, ) => { if (typeof ref === "string") { const parsedRef = parseToRef(ref); if (!parsedRef) { throw new Error( "Unable to parse string provided to `editor.navigate` as ref", ); } ref = parsedRef; } if ( // @ts-ignore: Legacy support ref.page !== undefined ) { console.warn( "You are using legacy navigation syntax with `editor.navigate()`, this will be phased out in the future", ); const legacyRef = ref as unknown as { kind: "page" | "document"; page: string; pos?: number | { line: number; column: number }; header?: string; meta?: boolean; }; legacyRef.kind ??= "page"; let details: Ref["details"] = undefined; if (typeof legacyRef.pos === "number") { details = { type: "position", pos: legacyRef.pos, }; } else if (legacyRef.pos) { details = { type: "linecolumn", line: legacyRef.pos.line, column: legacyRef.pos.column, }; } else if (legacyRef.header) { details = { type: "header", header: legacyRef.header, }; } ref = { path: (legacyRef.kind === "page" ? `${legacyRef.page}.md` : legacyRef.page) as Path, details, meta: legacyRef.meta, }; } // This validation code should be connected to the Ref type. Ideally using // some validation library. Didn't want to use jsonschemas here tho. // Ideally this would be moved into a function too if (!isValidPath(ref.path) && ref.path !== "") { throw new Error( "Path passed in ref to `editor.navigate` is invalid", ); } else if (typeof ref.meta !== "boolean" && ref.meta !== undefined) { throw new Error( "ref.meta has to be of type `boolean`", ); } else if (ref.details !== undefined && typeof ref.details !== "object") { throw new Error( "ref.details has to be of type `object` or `undefined`", ); } else if ( ref.details && !["position", "linecolumn", "header"].includes(ref.details.type) ) { throw new Error( "ref.details.type has to be 'position', 'linecolumn' or 'header'", ); } if ( ref.details?.type === "position" && typeof ref.details.pos !== "number" ) { throw new Error( "ref.details.pos has to be of type `number`", ); } else if ( ref.details?.type === "header" && typeof ref.details.header !== "string" ) { throw new Error( "ref.details.header has to be of type `string`", ); } else if ( ref.details?.type === "linecolumn" && typeof ref.details.line !== "number" && typeof ref.details.column !== "number" ) { throw new Error( "ref.details.line and ref.details.column has to be of type `number`", ); } await client.navigate(ref, replaceState, newWindow); }, "editor.reloadPage": async () => { await client.reloadEditor(); }, "editor.reloadUI": () => { location.reload(); }, "editor.rebuildEditorState": () => { client.rebuildEditorState(); }, "editor.reloadConfigAndCommands": async () => { await client.clientSystem.system.localSyscall( "system.loadScripts", [], ); await client.clientSystem.system.localSyscall( "system.loadSpaceStyles", [], ); }, "editor.invokeCommand": (_ctx, name: string, args?: string[]) => { return client.runCommandByName(name, args); }, "editor.openUrl": (_ctx, url: string, existingWindow = false) => { client.openUrl(url, existingWindow); }, "editor.newWindow": () => { globalThis.open( location.href, "rnd" + Math.random(), `width=${globalThis.innerWidth},heigh=${globalThis.innerHeight}`, ); }, "editor.goHistory": (_ctx, delta: number) => { globalThis.history.go(delta); }, "editor.downloadFile": (_ctx, filename: string, dataUrl: string) => { const link = document.createElement("a"); link.href = dataUrl; link.download = filename; link.click(); }, "editor.uploadFile": ( _ctx, accept?: string, capture?: string, ): Promise => { return new Promise((resolve, reject) => { const input = document.createElement("input"); input.type = "file"; if (accept) { input.accept = accept; } if (capture) { input.capture = capture; } input.onchange = () => { const file = input.files?.item(0); if (!file) { reject(new Error("No file found")); } else { const reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onloadend = async (evt) => { if (evt.target?.readyState == FileReader.DONE) { resolve({ name: file.name, contentType: file.type, content: new Uint8Array(await file.arrayBuffer()), }); } }; reader.onabort = (e) => { reject(e); }; reader.onerror = (e) => { reject(e); }; } }; input.onabort = (e) => { reject(e); }; input.click(); }); }, "editor.flashNotification": ( _ctx, message: string, type: "error" | "info" = "info", ) => { client.flashNotification(message, type); }, "editor.filterBox": ( _ctx, label: string, options: FilterOption[], helpText = "", placeHolder = "", ): Promise => { return client.filterBox(label, options, helpText, placeHolder); }, "editor.showPanel": ( _ctx, id: string, mode: number, html: string, script: string, ) => { client.ui.viewDispatch({ type: "show-panel", id: id as any, config: { html, script, mode }, }); setTimeout(() => { // Dummy dispatch to rerender the editor and toggle the panel client.editorView.dispatch({}); }); }, "editor.hidePanel": (_ctx, id: string) => { client.ui.viewDispatch({ type: "hide-panel", id: id as any, }); setTimeout(() => { // Dummy dispatch to rerender the editor and toggle the panel client.editorView.dispatch({}); }); }, "editor.showProgress": ( _ctx, progressPercentage?: number, progressType?: "sync" | "index", ) => { client.showProgress(progressPercentage, progressType); }, "editor.insertAtPos": ( _ctx, text: string, pos: number, cursorPlaceHolder = false, ) => { let cursorPlaceholderPos = -1; if (cursorPlaceHolder) { cursorPlaceholderPos = text.indexOf("|^|"); if (cursorPlaceholderPos !== -1) { text = text.slice(0, cursorPlaceholderPos) + text.slice(cursorPlaceholderPos + 3); } else { cursorPlaceHolder = false; } } client.editorView.dispatch({ changes: { insert: text, from: pos, }, }); if (cursorPlaceHolder) { const cursorPos = pos + cursorPlaceholderPos; client.editorView.dispatch({ selection: { anchor: cursorPos, }, effects: [ EditorView.scrollIntoView(cursorPos), ], }); } }, "editor.replaceRange": ( _ctx, from: number, to: number, text: string, cursorPlaceHolder = false, ) => { let cursorPlaceholderPos = -1; if (cursorPlaceHolder) { cursorPlaceholderPos = text.indexOf("|^|"); text = text.slice(0, cursorPlaceholderPos) + text.slice(cursorPlaceholderPos + 3); } client.editorView.dispatch({ changes: { insert: text, from: from, to: to, }, }); if (cursorPlaceHolder) { const cursorPos = from + cursorPlaceholderPos; client.editorView.dispatch({ selection: { anchor: cursorPos, }, effects: [ EditorView.scrollIntoView(cursorPos), ], }); } }, "editor.moveCursor": (_ctx, pos: number, center = false) => { client.editorView.dispatch({ selection: { anchor: pos, }, }); if (center) { client.editorView.dispatch({ effects: [ EditorView.scrollIntoView( pos, { y: "center", }, ), ], }); } client.editorView.focus(); }, "editor.moveCursorToLine": ( _ctx, line: number, column = 1, center = false, ) => { // CodeMirror already keeps information about lines const cmLine = client.editorView.state.doc.line(line); // How much to move inside the line, column number starts from 1 const offset = Math.max(0, Math.min(cmLine.length, column - 1)); // Just reuse the implementation above syscalls["editor.moveCursor"](_ctx, cmLine.from + offset, center); }, "editor.setSelection": (_ctx, from: number, to: number) => { client.editorView.dispatch({ selection: { anchor: from, head: to, }, }); }, "editor.insertAtCursor": ( _ctx, text: string, scrollIntoView = false, cursorPlaceHolder = false, ) => { const editorView = client.editorView; const from = editorView.state.selection.main.from; const cursorPlaceholderPos = text.indexOf("|^|"); if (cursorPlaceHolder && cursorPlaceholderPos !== -1) { text = text.slice(0, cursorPlaceholderPos) + text.slice(cursorPlaceholderPos + 3); } else { cursorPlaceHolder = false; } editorView.dispatch({ changes: { insert: text, from: from, }, selection: { anchor: cursorPlaceHolder ? from + cursorPlaceholderPos : from + text.length, }, scrollIntoView, }); }, "editor.dispatch": (_ctx, change: Transaction) => { client.editorView.dispatch(change); }, "editor.prompt": ( _ctx, message: string, defaultValue = "", ): Promise => { return client.prompt(message, defaultValue); }, "editor.confirm": (_ctx, message: string): Promise => { return client.confirm(message); }, "editor.alert": (_ctx, message: string) => { alert(message); }, "editor.getUiOption": (_ctx, key: string): any => { return (client.ui.viewState.uiOptions as any)[key]; }, "editor.setUiOption": (_ctx, key: string, value: any) => { client.ui.viewDispatch({ type: "set-ui-option", key, value, }); client.reloadEditor(); }, "editor.vimEx": (_ctx, exCommand: string) => { const cm = vimGetCm(client.editorView); if (cm && cm.state.vim) { return Vim.handleEx(cm as any, exCommand); } else { throw new Error("Vim mode not active or not initialized."); } }, "editor.configureVimMode": () => { // Override the default "o" binding to be more intelligent and follow the markdown editor's behavior Vim.mapCommand("o", "action", "newline-continue-markup", {}, {}); Vim.mapCommand("O", "action", "back-newline-continue-markup", {}, {}); Vim.unmap("", undefined as any); Vim.defineAction("newline-continue-markup", (cm) => { // Append at end of line Vim.handleKey(cm, "A", "+input"); // Insert newline continuing markup where appropriate insertNewlineContinueMarkup(client.editorView) || insertNewlineAndIndent(client.editorView); }); Vim.defineAction("back-newline-continue-markup", (cm) => { // Determine current line const pos = client.editorView.state.selection.main.from; const line = client.editorView.state.doc.lineAt(pos).number; if (line === 1) { // We're on the top line // Go to 0:0 Vim.handleKey(cm, "0", "+input"); // Insert a newline insertNewline(client.editorView); // Go up to the new line Vim.handleKey(cm, "k", "+input"); // Into insert mode Vim.handleKey(cm, "i", "+input"); } else { // We're elsewhere in the document // Go up Vim.handleKey(cm, "k", "+input"); // Append mode at the end of the line Vim.handleKey(cm, "A", "+input"); // Insert a newline using the continue markup thing insertNewlineContinueMarkup(client.editorView) || insertNewlineAndIndent(client.editorView); } }); // Load the config if any const config = client.config.get("vim", {}); if (config) { config.unmap?.forEach((binding) => { if (typeof binding === "string") { console.log("Unmapping " + binding); // @ts-ignore: unmap expects a string for the mode, this is problematic with Ex mappings which requires undefined or false Vim.unmap(binding, undefined); } else if (binding.key) { console.log( "Unmapping " + binding.key + " in " + (binding.mode ?? "normal"), ); Vim.unmap(binding.key, binding.mode ?? "normal"); } }); config.map?.forEach(({ map, to, mode }) => { console.log( "Mapping " + map + " to " + to + " for " + (mode ?? "normal"), ); Vim.map(map, to, mode ?? "normal"); }); config.noremap?.forEach(({ map, to, mode }) => { console.log( "Noremapping " + map + " to " + to + " for " + (mode ?? "normal"), ); Vim.noremap(map, to, mode ?? "normal"); }); config.commands?.forEach(({ ex, command }) => { console.log("Mapping command '" + command + "' to Ex " + ex); Vim.defineEx(ex, "", () => client.runCommandByName(command)); }); } else { console.log("No vim config found"); } }, "editor.openPageNavigator": ( _ctx, mode: "page" | "meta" | "document" | "all" = "page", ) => { client.startPageNavigate(mode); }, "editor.openCommandPalette": () => { client.ui.viewDispatch({ type: "show-palette", context: client.getContext(), }); }, "editor.deleteLine": () => { deleteLine(client.editorView); }, "editor.moveLineUp": () => { return moveLineUp({ state: client.editorView.state, dispatch: client.editorView.dispatch, }); }, "editor.moveLineDown": () => { return moveLineDown({ state: client.editorView.state, dispatch: client.editorView.dispatch, }); }, // Folding "editor.fold": () => { foldCode(client.editorView); }, "editor.unfold": () => { unfoldCode(client.editorView); }, "editor.toggleFold": () => { toggleFold(client.editorView); }, "editor.foldAll": () => { foldAll(client.editorView); }, "editor.unfoldAll": () => { unfoldAll(client.editorView); }, "editor.undo": () => { return undo(client.editorView); }, "editor.redo": () => { return redo(client.editorView); }, "editor.openSearchPanel": () => { openSearchPanel(client.editorView); }, "editor.copyToClipboard": (_ctx, data: string | Blob) => { if (typeof data === "string") { navigator.clipboard.writeText(data); } else { navigator.clipboard.write([new ClipboardItem({ [data.type]: data })]); } }, "editor.sendMessage": (_ctx, type: string, data: any) => { if (!client.isDocumentEditor()) return; client.documentEditor.sendPublicMessage({ type, data, }); }, "editor.isMobile": () => { const mouseDetected = globalThis.matchMedia("(pointer:fine)").matches; return !mouseDetected; }, }; return syscalls; }