Refactor createEditor, createState to take all options

demo.ts

@@ -21,10 +21,16 @@ This is the [G]chorus
 # ✅ Snippets - type "title", "start_of…", "tab" or any other ChordPro directive
 `
 
-createEditor(document.querySelector('#editor')!, { doc }, {
-  onChange: (doc, viewUpdate) => console.log("onChange", doc, viewUpdate),
-  onChangeInterval: 500, // onChange events are debounced by default (300ms)
-  onFocus: viewUpdate => console.log("onFocus", viewUpdate),
-  onBlur: viewUpdate => console.log("onBlur", viewUpdate),
-  onPaste: (event, view) => console.log("onPaste", event, view),
+createEditor({
+  parent: document.querySelector('#editor')!,
+  state: {
+    doc,
+    events: {
+      onChange: (doc, viewUpdate) => console.log("onChange", doc, viewUpdate),
+      onChangeInterval: 500, // onChange events are debounced by default (300ms)
+      onFocus: viewUpdate => console.log("onFocus", viewUpdate),
+      onBlur: viewUpdate => console.log("onBlur", viewUpdate),
+      onPaste: (event, view) => console.log("onPaste", event, view)
+    }
+  }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chordbook/editor",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "description": "The ChordPro editor used by ChordBook.app",
   "module": "dist/index.js",

src/index.ts

@@ -1,25 +1,28 @@
 import { EditorState, EditorStateConfig } from '@codemirror/state'
-import { EditorView } from '@codemirror/view'
+import { EditorView, EditorViewConfig } from '@codemirror/view'
 import extensions from "./extensions"
 import { EventCallbacks, eventsToExtensions } from "./events"
 
 export type { EventCallbacks }
 export { extensions, eventsToExtensions }
 
-export function createState(state: EditorStateConfig = {}, events: EventCallbacks = {}) {
+export interface StateConfig extends EditorStateConfig {
+  events?: EventCallbacks
+}
 
+export function createState({ events, ...state }: StateConfig = {}) {
   return EditorState.create({
+    ...state,
     extensions: [
       ...extensions,
       ...eventsToExtensions(events)
     ],
-    ...state,
   })
 }
 
-export function createEditor (element: HTMLElement, state: EditorStateConfig = {}, events: EventCallbacks = {}) {
+export function createEditor({ state, ...config }: EditorViewConfig = {}) {
   return new EditorView({
-    parent: element,
-    state: createState(state, events),
+    ...config,
+    state: createState(state)
   })
 }