Create HeynoteEditor class and restructure init code

This commit is contained in:
Jonatan Heyman 2022-12-30 12:55:41 +01:00
parent 9aff278c80
commit 1695cc9d11
5 changed files with 70 additions and 62 deletions

2
.gitignore vendored
View File

@ -1,2 +1,2 @@
node_modules node_modules
editor.bundle.js bundle.js

View File

@ -4,10 +4,11 @@ import { nodeResolve } from "@rollup/plugin-node-resolve"
export default { export default {
input: "./src/editor.js", input: "./src/index.js",
output: { output: {
file: "./src/editor.bundle.js", file: "./src/bundle.js",
format: "iife", format: "iife",
//sourceMap: "inline",
//globals: { //globals: {
// // // //
//}, //},

View File

@ -1,17 +1,18 @@
import { Annotation, EditorState, Compartment } from "@codemirror/state" import { Annotation, EditorState, Compartment } from "@codemirror/state"
import { EditorView, keymap, drawSelection } from "@codemirror/view" import { EditorView, keymap, drawSelection } from "@codemirror/view"
import { indentUnit } from "@codemirror/language" import { indentUnit, forceParsing } from "@codemirror/language"
import { indentWithTab, insertTab, indentLess, indentMore } from "@codemirror/commands" import { indentWithTab, insertTab, indentLess, indentMore } from "@codemirror/commands"
import { nord } from "./theme/nord.mjs" import { nord } from "./theme/nord.mjs"
import initialData from "./fixture.js"
import { customSetup } from "./setup.js" import { customSetup } from "./setup.js"
import { heynoteLang } from "./lang-heynote/heynote.js" import { heynoteLang } from "./lang-heynote/heynote.js"
import { noteBlockExtension } from "./note-block.js" import { noteBlockExtension } from "./note-block.js"
import { heynoteEvent, INITIAL_DATA } from "./annotation.js"
let state = EditorState.create({ export class HeynoteEditor {
constructor({element, content, focus=true}) {
this.state = EditorState.create({
doc: content || "",
extensions: [ extensions: [
/*keymap.of([ /*keymap.of([
{ {
@ -46,14 +47,26 @@ let state = EditorState.create({
// set cursor blink rate to 1 second // set cursor blink rate to 1 second
drawSelection({cursorBlinkRate:1000}), drawSelection({cursorBlinkRate:1000}),
], ],
}) })
let editor = new EditorView({ this.view = new EditorView({
state, state: this.state,
parent: document.getElementById("editor"), parent: element,
}) })
// set initial data if (focus) {
this.view.dispatch({
selection: {anchor: this.view.state.doc.length, head: this.view.state.doc.length},
scrollIntoView: true,
})
this.view.focus()
}
}
}
/*// set initial data
editor.update([ editor.update([
editor.state.update({ editor.state.update({
changes:{ changes:{
@ -63,20 +76,7 @@ editor.update([
}, },
annotations: heynoteEvent.of(INITIAL_DATA), annotations: heynoteEvent.of(INITIAL_DATA),
}) })
]) ])*/
editor.dispatch({
selection: {anchor: editor.state.doc.length, head: editor.state.doc.length},
scrollIntoView: true,
})
editor.focus()
/* /*

View File

@ -10,6 +10,6 @@
<body> <body>
<div id="editor"></div> <div id="editor"></div>
<!--<div id="syntaxTree"></div>--> <!--<div id="syntaxTree"></div>-->
<script src="editor.bundle.js"></script> <script src="bundle.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,7 @@
import { HeynoteEditor } from "./editor.js"
import initialData from "./fixture.js"
let editor = new HeynoteEditor({
element: document.getElementById("editor"),
content: initialData,
})