mingzailao
/
silverbullet
mirror of https://github.com/silverbulletmd/silverbullet.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

WIP

pull/87/head
Zef Hemel 2022-10-03 15:36:21 +00:00
parent c931165894
commit 8ef9e955ba
6 changed files with 154 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
deno.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"]
},
"importMap": "import_map.json",
"tasks": {
"watch": "deno bundle --unstable --config deno.json --watch main.ts bundle.js"
}
}

8
import_map.json Normal file
View File

@ -0,0 +1,8 @@
{
"imports": {
"@codemirror/state": "https://esm.sh/@codemirror/state",
"@codemirror/language": "https://esm.sh/@codemirror/language"
}
}

43
mod.ts Normal file
View File

@ -0,0 +1,43 @@
import React from "https://esm.sh/v96/@types/react@~17.0/index.d.ts";
export {
autocompletion,
completionKeymap,
} from "https://esm.sh/@codemirror/autocomplete@6.3.0?external=@codemirror/state";
export {
defaultHighlightStyle,
syntaxHighlighting,
syntaxTree,
} from "https://esm.sh/@codemirror/language@6.2.1?external=@codemirror/state";
export { markdown } from "https://esm.sh/@codemirror/lang-markdown@6.0.1?external=@codemirror/state";
export {
history,
historyKeymap,
indentWithTab,
standardKeymap,
} from "https://esm.sh/@codemirror/commands@6.1.1?external=@codemirror/state";
export {
closeBrackets,
closeBracketsKeymap,
} from "https://esm.sh/@codemirror/autocomplete@6.3.0?external=@codemirror/state";
export {
searchKeymap,
} from "https://esm.sh/@codemirror/search?external=@codemirror/state";
export {
drawSelection,
dropCursor,
EditorView,
highlightSpecialChars,
keymap,
runScopeHandlers,
ViewPlugin,
ViewUpdate,
} from "https://esm.sh/@codemirror/view@6.3.0?external=@codemirror/state";
export type { KeyBinding } from "https://esm.sh/@codemirror/view@6.3.0?external=@codemirror/state";
// export * as react from "https://esm.sh/react@17";
export { EditorSelection, EditorState } from "@codemirror/state";

8
packages/web/boot.ts
View File

@ -1,7 +1,7 @@
import { Editor } from "./editor"; import { Editor } from "./editor.tsx";
import { parseYamlSettings, safeRun } from "@silverbulletmd/common/util"; import { parseYamlSettings, safeRun } from "../common/util.ts";
import { Space } from "@silverbulletmd/common/spaces/space"; import { Space } from "../common/spaces/space.ts";
import { HttpSpacePrimitives } from "@silverbulletmd/common/spaces/http_space_primitives"; import { HttpSpacePrimitives } from "../common/spaces/http_space_primitives.ts";
safeRun(async () => { safeRun(async () => {
let password: string | undefined = let password: string | undefined =

170
packages/web/editor.tsx
View File

@ -1,14 +1,10 @@
import { import { autocompletion, completionKeymap } from "../../mod.ts";
autocompletion, import { closeBrackets, closeBracketsKeymap } from "../../mod.ts";
completionKeymap, import { indentWithTab, standardKeymap } from "../../mod.ts";
CompletionResult, import { history, historyKeymap } from "../../mod.ts";
} from "@codemirror/autocomplete"; import { syntaxHighlighting } from "../../mod.ts";
import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete"; import { searchKeymap } from "../../mod.ts";
import { indentWithTab, standardKeymap } from "@codemirror/commands"; import { EditorSelection, EditorState } from "../../mod.ts";
import { history, historyKeymap } from "@codemirror/commands";
import { syntaxHighlighting } from "@codemirror/language";
import { searchKeymap } from "@codemirror/search";
import { EditorSelection, EditorState } from "@codemirror/state";
import { import {
drawSelection, drawSelection,
dropCursor, dropCursor,
@ -19,54 +15,51 @@ import {
runScopeHandlers, runScopeHandlers,
ViewPlugin, ViewPlugin,
ViewUpdate, ViewUpdate,
} from "@codemirror/view"; } from "../../mod.ts";
import React, { useEffect, useReducer } from "react"; import React, { useEffect, useReducer } from "https://esm.sh/react@17";
import ReactDOM from "react-dom"; import ReactDOM from "https://esm.sh/react-dom@17";
import { createSandbox as createIFrameSandbox } from "@plugos/plugos/environments/webworker_sandbox"; import { createSandbox as createIFrameSandbox } from "../plugos/environments/webworker_sandbox.ts";
import { AppEvent, ClickEvent } from "./app_event"; import { AppEvent, ClickEvent } from "./app_event.ts";
import { CommandPalette } from "./components/command_palette"; import { CommandPalette } from "./components/command_palette.tsx";
import { PageNavigator } from "./components/page_navigator"; import { PageNavigator } from "./components/page_navigator.tsx";
import { TopBar } from "./components/top_bar"; import { TopBar } from "./components/top_bar.tsx";
import { lineWrapper } from "./line_wrapper"; import { lineWrapper } from "./line_wrapper.ts";
import { markdown } from "@silverbulletmd/common/markdown"; import { markdown } from "../common/markdown/index.ts";
import { PathPageNavigator } from "./navigator"; import { PathPageNavigator } from "./navigator.ts";
import buildMarkdown from "@silverbulletmd/common/parser"; import buildMarkdown from "../common/parser.ts";
import reducer from "./reducer"; import reducer from "./reducer.ts";
import { smartQuoteKeymap } from "./smart_quotes"; import { smartQuoteKeymap } from "./smart_quotes.ts";
import { Space } from "@silverbulletmd/common/spaces/space"; import { Space } from "../common/spaces/space.ts";
import customMarkdownStyle from "./style"; import customMarkdownStyle from "./style.ts";
import { editorSyscalls } from "./syscalls/editor"; import { editorSyscalls } from "./syscalls/editor.ts";
import { indexerSyscalls } from "./syscalls"; import { indexerSyscalls } from "./syscalls/index.ts";
import { spaceSyscalls } from "./syscalls/space"; import { spaceSyscalls } from "./syscalls/space.ts";
import { Action, AppViewState, initialViewState } from "./types"; import { Action, AppViewState, initialViewState } from "./types.ts";
import { SilverBulletHooks } from "@silverbulletmd/common/manifest"; import { SilverBulletHooks } from "../common/manifest.ts";
import { safeRun, throttle } from "../common/util"; import { safeRun, throttle } from "../common/util.ts";
import { System } from "@plugos/plugos/system"; import { System } from "../plugos/system.ts";
import { EventHook } from "@plugos/plugos/hooks/event"; import { EventHook } from "../plugos/hooks/event.ts";
import { systemSyscalls } from "./syscalls/system"; import { systemSyscalls } from "./syscalls/system.ts";
import { Panel } from "./components/panel"; import { Panel } from "./components/panel.tsx";
import { CommandHook } from "./hooks/command"; import { CommandHook } from "./hooks/command.ts";
import { SlashCommandHook } from "./hooks/slash_command"; import { SlashCommandHook } from "./hooks/slash_command.ts";
import { attachmentExtension, pasteLinkExtension } from "./editor_paste"; import { attachmentExtension, pasteLinkExtension } from "./editor_paste.ts";
import { markdownSyscalls } from "@silverbulletmd/common/syscalls/markdown"; import { markdownSyscalls } from "../common/syscalls/markdown.ts";
import { clientStoreSyscalls } from "./syscalls/clientStore"; import { clientStoreSyscalls } from "./syscalls/clientStore.ts";
import { import { loadMarkdownExtensions, MDExt } from "../common/markdown_ext.ts";
loadMarkdownExtensions, import { FilterList } from "./components/filter.tsx";
MDExt, import { FilterOption, PageMeta } from "../common/types.ts";
} from "@silverbulletmd/common/markdown_ext"; import { syntaxTree } from "../../mod.ts";
import { FilterList } from "./components/filter"; import sandboxSyscalls from "../plugos/syscalls/sandbox.ts";
import { FilterOption, PageMeta } from "@silverbulletmd/common/types"; import { eventSyscalls } from "../plugos/syscalls/event.ts";
import { syntaxTree } from "@codemirror/language"; import { storeSyscalls } from "./syscalls/store.ts";
import sandboxSyscalls from "@plugos/plugos/syscalls/sandbox"; import { inlineImagesPlugin } from "./inline_image.ts";
import { eventSyscalls } from "@plugos/plugos/syscalls/event"; import { fulltextSyscalls } from "./syscalls/fulltext.ts";
import { storeSyscalls } from "./syscalls/store";
import { inlineImagesPlugin } from "./inline_image";
import { fulltextSyscalls } from "./syscalls/fulltext";
class PageState { class PageState {
constructor( constructor(
readonly scrollTop: number, readonly scrollTop: number,
readonly selection: EditorSelection readonly selection: EditorSelection,
) {} ) {}
} }
@ -79,7 +72,7 @@ const saveInterval = 1000;
EditorState.prototype.languageDataAt = function ( EditorState.prototype.languageDataAt = function (
name: string, name: string,
pos: number, pos: number,
side = -1 side = -1,
) { ) {
let values = []; let values = [];
// console.log("Getting language data"); // console.log("Getting language data");
@ -91,10 +84,11 @@ EditorState.prototype.languageDataAt = function (
continue; continue;
} }
for (let result of providerResult) { for (let result of providerResult) {
if (Object.prototype.hasOwnProperty.call(result, name)) if (Object.prototype.hasOwnProperty.call(result, name)) {
values.push(result[name]); values.push(result[name]);
} }
} }
}
return values; return values;
}; };
@ -123,7 +117,7 @@ export class Editor {
space: Space, space: Space,
parent: Element, parent: Element,
urlPrefix: string, urlPrefix: string,
indexPage: string indexPage: string,
) { ) {
this.space = space; this.space = space;
this.urlPrefix = urlPrefix; this.urlPrefix = urlPrefix;
@ -169,7 +163,7 @@ export class Editor {
markdownSyscalls(buildMarkdown(this.mdExtensions)), markdownSyscalls(buildMarkdown(this.mdExtensions)),
clientStoreSyscalls(), clientStoreSyscalls(),
storeSyscalls(this.space), storeSyscalls(this.space),
sandboxSyscalls(this.system) sandboxSyscalls(this.system),
); );
// Make keyboard shortcuts work even when the editor is in read only mode or not focused // Make keyboard shortcuts work even when the editor is in read only mode or not focused
@ -227,7 +221,7 @@ export class Editor {
if (!posLookup) { if (!posLookup) {
return this.flashNotification( return this.flashNotification(
`Could not find anchor @${pos}`, `Could not find anchor @${pos}`,
"error" "error",
); );
} else { } else {
pos = +posLookup; pos = +posLookup;
@ -252,9 +246,11 @@ export class Editor {
this.system.on({ this.system.on({
plugLoaded: (plug) => { plugLoaded: (plug) => {
safeRun(async () => { safeRun(async () => {
for (let [modName, code] of Object.entries( for (
globalModules.dependencies let [modName, code] of Object.entries(
)) { globalModules.dependencies,
)
) {
await plug.sandbox.loadDependency(modName, code as string); await plug.sandbox.loadDependency(modName, code as string);
} }
}); });
@ -297,7 +293,7 @@ export class Editor {
.writePage( .writePage(
this.currentPage, this.currentPage,
this.editorView!.state.sliceDoc(0), this.editorView!.state.sliceDoc(0),
true true,
) )
.then(() => { .then(() => {
this.viewDispatch({ type: "page-saved" }); this.viewDispatch({ type: "page-saved" });
@ -306,7 +302,7 @@ export class Editor {
.catch((e) => { .catch((e) => {
this.flashNotification( this.flashNotification(
"Could not save page, retrying again in 10 seconds", "Could not save page, retrying again in 10 seconds",
"error" "error",
); );
this.saveTimeout = setTimeout(this.save.bind(this), 10000); this.saveTimeout = setTimeout(this.save.bind(this), 10000);
reject(e); reject(e);
@ -315,7 +311,7 @@ export class Editor {
resolve(); resolve();
} }
}, },
immediate ? 0 : saveInterval immediate ? 0 : saveInterval,
); );
}); });
} }
@ -338,7 +334,7 @@ export class Editor {
id: id, id: id,
}); });
}, },
type === "info" ? 2000 : 5000 type === "info" ? 2000 : 5000,
); );
} }
@ -346,7 +342,7 @@ export class Editor {
label: string, label: string,
options: FilterOption[], options: FilterOption[],
helpText: string = "", helpText: string = "",
placeHolder: string = "" placeHolder: string = "",
): Promise<FilterOption | undefined> { ): Promise<FilterOption | undefined> {
return new Promise((resolve) => { return new Promise((resolve) => {
this.viewDispatch({ this.viewDispatch({
@ -388,7 +384,7 @@ export class Editor {
console.error(e); console.error(e);
this.flashNotification( this.flashNotification(
`Error running command: ${e.message}`, `Error running command: ${e.message}`,
"error" "error",
); );
}) })
.then(() => { .then(() => {
@ -413,7 +409,7 @@ export class Editor {
override: [ override: [
this.completer.bind(this), this.completer.bind(this),
this.slashCommandHook.slashCommandCompleter.bind( this.slashCommandHook.slashCommandCompleter.bind(
this.slashCommandHook this.slashCommandHook,
), ),
], ],
}), }),
@ -477,7 +473,7 @@ export class Editor {
this.editorView.state.selection.main.anchor, this.editorView.state.selection.main.anchor,
{ {
y: "center", y: "center",
} },
), ),
], ],
}); });
@ -509,7 +505,7 @@ export class Editor {
editor.save().catch((e) => console.error("Error saving", e)); editor.save().catch((e) => console.error("Error saving", e));
} }
} }
} },
), ),
pasteLinkExtension, pasteLinkExtension,
attachmentExtension(this), attachmentExtension(this),
@ -542,18 +538,18 @@ export class Editor {
// And reload the syscalls to use the new syntax extensions // And reload the syscalls to use the new syntax extensions
this.system.registerSyscalls( this.system.registerSyscalls(
[], [],
markdownSyscalls(buildMarkdown(this.mdExtensions)) markdownSyscalls(buildMarkdown(this.mdExtensions)),
); );
this.saveState(this.currentPage); this.saveState(this.currentPage);
editorView.setState( editorView.setState(
this.createEditorState(this.currentPage, editorView.state.sliceDoc()) this.createEditorState(this.currentPage, editorView.state.sliceDoc()),
); );
if (editorView.contentDOM) { if (editorView.contentDOM) {
this.tweakEditorDOM( this.tweakEditorDOM(
editorView.contentDOM, editorView.contentDOM,
this.viewState.perm === "ro" this.viewState.perm === "ro",
); );
} }
@ -568,7 +564,7 @@ export class Editor {
if (result) { if (result) {
if (actualResult) { if (actualResult) {
console.error( console.error(
"Got completion results from multiple sources, cannot deal with that" "Got completion results from multiple sources, cannot deal with that",
); );
return null; return null;
} }
@ -659,7 +655,7 @@ export class Editor {
contentDOM.setAttribute("autocapitalize", "on"); contentDOM.setAttribute("autocapitalize", "on");
contentDOM.setAttribute( contentDOM.setAttribute(
"contenteditable", "contenteditable",
readOnly || this.viewState.forcedROMode ? "false" : "true" readOnly || this.viewState.forcedROMode ? "false" : "true",
); );
if (isMobileSafari() && readOnly) { if (isMobileSafari() && readOnly) {
@ -704,8 +700,8 @@ export class Editor {
currentPage, currentPage,
new PageState( new PageState(
this.editorView!.scrollDOM.scrollTop, this.editorView!.scrollDOM.scrollTop,
this.editorView!.state.selection this.editorView!.state.selection,
) ),
); );
} }
@ -726,7 +722,7 @@ export class Editor {
if (editor.editorView) { if (editor.editorView) {
editor.tweakEditorDOM( editor.tweakEditorDOM(
editor.editorView.contentDOM, editor.editorView.contentDOM,
viewState.perm === "ro" viewState.perm === "ro",
); );
} }
}, [viewState.forcedROMode]); }, [viewState.forcedROMode]);
@ -757,7 +753,7 @@ export class Editor {
dispatch({ type: "command-run", command: cmd.command.name }); dispatch({ type: "command-run", command: cmd.command.name });
cmd cmd
.run() .run()
.catch((e) => { .catch((e: any) => {
console.error("Error running command", e.message); console.error("Error running command", e.message);
}) })
.then(() => { .then(() => {
@ -799,22 +795,18 @@ export class Editor {
onActionClick={() => { onActionClick={() => {
dispatch({ type: "show-palette" }); dispatch({ type: "show-palette" });
}} }}
rhs={ rhs={!!viewState.panels.rhs.mode && (
!!viewState.panels.rhs.mode && (
<div <div
className="panel" className="panel"
style={{ flex: viewState.panels.rhs.mode }} style={{ flex: viewState.panels.rhs.mode }}
/> />
) )}
} lhs={!!viewState.panels.lhs.mode && (
lhs={
!!viewState.panels.lhs.mode && (
<div <div
className="panel" className="panel"
style={{ flex: viewState.panels.lhs.mode }} style={{ flex: viewState.panels.lhs.mode }}
/> />
) )}
}
/> />
<div id="sb-main"> <div id="sb-main">
{!!viewState.panels.lhs.mode && ( {!!viewState.panels.lhs.mode && (

15
tsconfig.json
View File

@ -1,15 +0,0 @@
{
"include": ["packages/**/*"],
"compilerOptions": {
"target": "esnext",
"strict": true,
"moduleResolution": "node",
"module": "esnext",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"jsx": "react-jsx",
"downlevelIteration": true
}
}