Something working
This commit is contained in:
Zef Hemel
+184
-49
@@ -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",
|
||||
});
|
||||
}
|
||||
|
||||
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({ editor }: { editor: Editor | null }) {
|
||||
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);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
+2
-2
@@ -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'
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user