neil/silverbullet
1
0
Fork 0
Code

Something working

Browse Source
This commit is contained in:
Zef Hemel 2022-02-21 11:27:30 +01:00
parent af59d394ae
commit cbe0677f93
10 changed files with 393 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -1,3 +1,4 @@
{
"editor.formatOnSave": true
"editor.formatOnSave": true,
"editor.tabSize": 2
}

2
notes/A Cool Note.md
View File

@ -1,3 +1,5 @@
## Lots of
Content #here
@zef.hemel

4
notes/start.md
View File

@ -9,7 +9,9 @@ For the rest of you, if you are not a parent, have no plan to be, or have absolu
Thank you for sharing that perspective. However, in your case specifically, I have to insist you keep reading. It’s kids with your independent mindset that we’re trying to raise here. Although, perhaps you already know how to do that. Get in touch.
----
Hello there
-----
Before we start, why would you even listen to me? Let’s [[be honest]] here, I have no relevant credentials beyond being a dad myself. However, has that ever stopped anybody from doing anything? As any conspiracy theorist would say: you don’t need to take my word for it, do your own research — I’m just asking questions!

2
notes/test.md
View File

@ -1 +1 @@
Sappie
# Sappie

1
webapp/package.json
View File

@ -21,6 +21,7 @@
"@codemirror/lang-markdown": "^0.19.6",
"@codemirror/state": "^0.19.7",
"@codemirror/view": "^0.19.42",
"kbar": "^0.1.0-beta.27",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}

233
webapp/src/app.tsx
View File

@ -5,8 +5,7 @@ import { history, historyKeymap } from "@codemirror/history";
import { indentOnInput } from "@codemirror/language";
import { bracketMatching } from "@codemirror/matchbrackets";
import { searchKeymap } from "@codemirror/search";
import { EditorState, StateField } from "@codemirror/state";
import { EditorState, StateField, Transaction } from "@codemirror/state";
import {
drawSelection,
dropCursor,
@ -14,48 +13,101 @@ import {
highlightSpecialChars,
keymap,
} from "@codemirror/view";
import React, { useEffect, useReducer, useRef } from "react";
import ReactDOM from "react-dom";
import * as commands from "./commands";
import { markdown } from "./markdown";
import { HttpFileSystem } from "./fs";
import { lineWrapper } from "./lineWrapper";
import { markdown } from "./markdown";
import customMarkDown from "./parser";
import customMarkdownStyle from "./style";
import { HttpFileSystem } from "./fs";
import ReactDOM from "react-dom";
import { MutableRefObject, useEffect, useRef, useState } from "react";
import { FilterList } from "./components/filter";
const fs = new HttpFileSystem("http://localhost:2222/fs");
type AppState = {
currentNote: string;
type NoteMeta = {
name: string;
};
type AppViewState = {
currentNote: string;
isSaved: boolean;
isFiltering: boolean;
allNotes: NoteMeta[];
};
const initialViewState = {
currentNote: "",
isSaved: false,
isFiltering: false,
allNotes: [],
};
type Action =
| { type: "loaded"; name: string }
| { type: "saved" }
| { type: "start-navigate" }
| { type: "stop-navigate" }
| { type: "updated" }
| { type: "notes-list"; notes: NoteMeta[] };
function reducer(state: AppViewState, action: Action): AppViewState {
switch (action.type) {
case "loaded":
return {
...state,
currentNote: action.name,
isSaved: true,
};
case "saved":
return {
...state,
isSaved: true,
};
case "updated":
return {
...state,
isSaved: false,
};
case "start-navigate":
return {
...state,
isFiltering: true,
};
case "stop-navigate":
return {
...state,
isFiltering: false,
};
case "notes-list":
return {
...state,
allNotes: action.notes,
};
}
}
class Editor {
view: EditorView;
currentNote: string;
dispatch: React.Dispatch<Action>;
constructor(parent: Element, currentNote: string, text: string) {
constructor(
parent: Element,
currentNote: string,
text: string,
dispatch: React.Dispatch<Action>
) {
this.view = new EditorView({
state: this.createEditorState(text),
parent: parent,
});
this.currentNote = currentNote;
this.dispatch = dispatch;
}
load(name: string, text: string) {
this.currentNote = name;
this.view.setState(this.createEditorState(text));
}
async save() {
await fs.writeNote(this.currentNote, this.view.state.sliceDoc());
}
focus() {
this.view.focus();
}
private createEditorState(text: string): EditorState {
createEditorState(text: string): EditorState {
return EditorState.create({
doc: text,
extensions: [
@ -107,67 +159,150 @@ class Editor {
return true;
},
},
{
key: "Ctrl-p",
mac: "Cmd-p",
run: (target): boolean => {
this.dispatch({ type: "start-navigate" });
return true;
},
},
]),
EditorView.domEventHandlers({
click: (event: MouseEvent, view: EditorView) => {
if (event.metaKey || event.ctrlKey) {
console.log("Navigate click");
let coords = view.posAtCoords(event);
console.log(
"Coords",
view.state.doc.sliceString(coords!, coords! + 1)
);
return false;
}
},
click: this.click.bind(this),
}),
markdown({
base: customMarkDown,
}),
StateField.define({
create: () => null,
update: (value, transaction) => {
if (transaction.docChanged) {
console.log("Something changed");
}
return null;
},
update: this.update.bind(this),
}),
],
});
}
update(value: null, transaction: Transaction): null {
if (transaction.docChanged) {
console.log("Something changed");
this.dispatch({
type: "updated",
});
}
function TopBar({ editor }: { editor: Editor | null }) {
return null;
}
load(name: string, text: string) {
this.currentNote = name;
this.view.setState(this.createEditorState(text));
}
click(event: MouseEvent, view: EditorView) {
if (event.metaKey || event.ctrlKey) {
console.log("Navigate click");
let coords = view.posAtCoords(event);
console.log("Coords", view.state.doc.sliceString(coords!, coords! + 1));
return false;
}
}
async save() {
await fs.writeNote(this.currentNote, this.view.state.sliceDoc());
this.dispatch({ type: "saved" });
}
focus() {
this.view.focus();
}
}
function TopBar({
currentNote,
isSaved,
isFiltering,
allNotes,
onNavigate,
}: {
currentNote: string;
isSaved: boolean;
isFiltering: boolean;
allNotes: NoteMeta[];
onNavigate: (note: string) => void;
}) {
return (
<div id="top">
This is the top bar, do something cool: {editor?.currentNote}
<span className="current-note">{currentNote}</span>
{isSaved ? "" : "*"}
{isFiltering ? (
<FilterList
initialText=""
options={allNotes}
onSelect={(opt) => {
console.log("Selected", opt);
onNavigate(opt.name);
}}
></FilterList>
) : null}
</div>
);
}
function App() {
let editor: Editor | null;
function AppView() {
const editorRef = useRef<HTMLDivElement>(null);
const [editor, setEditor] = useState<Editor | null>(null);
const [appState, dispatch] = useReducer(reducer, initialViewState);
useEffect(() => {
let editor = new Editor(editorRef.current!, "", "");
editor = new Editor(editorRef.current!, "", "", dispatch);
editor.focus();
// @ts-ignore
window.editor = editor;
fs.readNote("start").then((text) => {
editor.load("start", text);
editor!.load("start", text);
dispatch({
type: "loaded",
name: "start",
});
setEditor(editor);
});
}, []);
useEffect(() => {
fs.listNotes()
.then((notes) => {
dispatch({
type: "notes-list",
notes: notes,
});
})
.catch((e) => console.error(e));
}, []);
return (
<>
<TopBar editor={editor} />
<TopBar
currentNote={appState.currentNote}
isSaved={appState.isSaved}
isFiltering={appState.isFiltering}
allNotes={appState.allNotes}
onNavigate={(note) => {
dispatch({ type: "stop-navigate" });
editor!.focus();
fs.readNote(note).then((text) => {
editor!.load(note, text);
dispatch({
type: "loaded",
name: note,
});
});
}}
/>
<div id="editor" ref={editorRef}></div>
<div id="bottom">Bottom</div>
</>
);
}
ReactDOM.render(<App />, document.body);
ReactDOM.render(<AppView />, document.body);

92
webapp/src/components/filter.tsx Normal file
View File

@ -0,0 +1,92 @@
import React, { useEffect, useRef, useState } from "react";
type Option = {
name: string;
};
export function FilterList({
initialText,
options,
onSelect,
}: {
initialText: string;
options: Option[];
onSelect: (option: Option) => void;
}) {
const searchBoxRef = useRef<HTMLInputElement>(null);
const [text, setText] = useState(initialText);
const [matchingOptions, setMatchingOptions] = useState(options);
const [selectedOption, setSelectionOption] = useState(0);
const filter = (e: React.ChangeEvent<HTMLInputElement>) => {
const keyword = e.target.value.toLowerCase();
if (keyword) {
const results = options.filter((option) => {
return option.name.toLowerCase().indexOf(keyword) !== -1;
});
setMatchingOptions(results);
} else {
setMatchingOptions(options);
}
setText(keyword);
setSelectionOption(0);
};
useEffect(() => {
searchBoxRef.current!.focus();
}, []);
return (
<div className="filter-container">
<input
type="search"
value={text}
ref={searchBoxRef}
onChange={filter}
onKeyDown={(e: React.KeyboardEvent) => {
console.log("Key up", e.key);
switch (e.key) {
case "ArrowUp":
setSelectionOption(Math.max(0, selectedOption - 1));
break;
case "ArrowDown":
setSelectionOption(
Math.min(matchingOptions.length - 1, selectedOption + 1)
);
break;
case "Enter":
onSelect(matchingOptions[selectedOption]);
e.preventDefault();
break;
}
}}
className="input"
placeholder="Filter"
/>
<div className="result-list">
{matchingOptions && matchingOptions.length > 0 ? (
matchingOptions.map((option, idx) => (
<li
key={"" + idx}
className={selectedOption === idx ? "selected-option" : "option"}
onMouseOver={(e) => {
setSelectionOption(idx);
}}
onClick={(e) => {
onSelect(option);
e.preventDefault();
}}
>
<span className="user-name">{option.name}</span>
</li>
))
) : (
<h1>No results found!</h1>
)}
</div>
</div>
);
}

4
webapp/src/fs.ts
View File

@ -4,7 +4,7 @@ export interface NoteMeta {
}
export interface FileSystem {
listNotes(): Promise<NoteMeta>;
listNotes(): Promise<NoteMeta[]>;
readNote(name: string): Promise<string>;
writeNote(name: string, text: string): Promise<void>;
}
@ -15,7 +15,7 @@ export class HttpFileSystem implements FileSystem {
constructor(url: string) {
this.url = url;
}
async listNotes(): Promise<NoteMeta> {
async listNotes(): Promise<NoteMeta[]> {
let req = await fetch(this.url, {
method: 'GET'
});

24
webapp/src/styles.css
View File

@ -130,3 +130,27 @@ body {
text-indent: calc(-1 * var(--ident) - 3px);
margin-left: var(--ident);
}
reach-portal input {
background-color: #fff;
border: 0;
}
reach-portal > div > div {
background-color: #fff;
border: #000 1px solid;
padding: 5px;
}
.filter-container {
background-color: white;
display: block;
position: absolute;
left: 10px;
top: 10px;
z-index: 1000;
}
.filter-container .selected-option {
background-color: #520130;
}

82
webapp/yarn.lock
View File

@ -23,6 +23,13 @@
chalk "^2.0.0"
js-tokens "^4.0.0"
"@babel/runtime@^7.12.5":
version "7.17.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
dependencies:
regenerator-runtime "^0.13.4"
"@codemirror/autocomplete@^0.19.0":
version "0.19.12"
resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-0.19.12.tgz#4c9e4487b45e6877807e4f16c1fffd5e7639ae52"
@ -890,6 +897,28 @@
chrome-trace-event "^1.0.2"
nullthrows "^1.1.1"
"@reach/observe-rect@^1.1.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
"@reach/portal@^0.16.0":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64"
integrity sha512-9ur/yxNkuVYTIjAcfi46LdKUvH0uYZPfEp4usWcpt6PIp+WDF57F/5deMe/uGi/B/nfDweQu8VVwuMVrCb97JQ==
dependencies:
"@reach/utils" "0.16.0"
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@reach/utils@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
dependencies:
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@swc/helpers@^0.2.11":
version "0.2.14"
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.2.14.tgz#20288c3627442339dd3d743c944f7043ee3590f0"
@ -1254,6 +1283,11 @@ escape-string-regexp@^1.0.5:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
fast-equals@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927"
integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w==
get-port@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119"
@ -1335,6 +1369,17 @@ json5@^2.2.0:
dependencies:
minimist "^1.2.5"
kbar@^0.1.0-beta.27:
version "0.1.0-beta.27"
resolved "https://registry.yarnpkg.com/kbar/-/kbar-0.1.0-beta.27.tgz#6fec637054599dc4c6aa5a0cfc4042a50b3e32d1"
integrity sha512-4knRJxDQqx3LUduhjuJh9EDGxnFpaQKjXt11UOsjKQ4ByXTTQpPjfAaKagVcTp9uVwEXGDhvGrsGbMfrI+6/Kg==
dependencies:
"@reach/portal" "^0.16.0"
fast-equals "^2.0.3"
match-sorter "^6.3.0"
react-virtual "^2.8.2"
tiny-invariant "^1.2.0"
lilconfig@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
@ -1373,6 +1418,14 @@ loose-envify@^1.1.0:
dependencies:
js-tokens "^3.0.0 || ^4.0.0"
match-sorter@^6.3.0:
version "6.3.1"
resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
dependencies:
"@babel/runtime" "^7.12.5"
remove-accents "0.4.2"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@ -1751,6 +1804,13 @@ react-refresh@^0.9.0:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
react-virtual@^2.8.2:
version "2.10.4"
resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.10.4.tgz#08712f0acd79d7d6f7c4726f05651a13b24d8704"
integrity sha512-Ir6+oPQZTVHfa6+JL9M7cvMILstFZH/H3jqeYeKI4MSUX+rIruVwFC6nGVXw9wqAw8L0Kg2KvfXxI85OvYQdpQ==
dependencies:
"@reach/observe-rect" "^1.1.0"
react@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@ -1759,11 +1819,16 @@ react@^17.0.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
regenerator-runtime@^0.13.7:
regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
version "0.13.9"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
remove-accents@0.4.2:
version "0.4.2"
resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
resolve-from@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@ -1869,6 +1934,21 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-invariant@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
tiny-warning@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
tslib@^2.3.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
type-fest@^0.20.2:
version "0.20.2"
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"