add focus extension

packages/core/src/Editor.ts

@@ -22,6 +22,7 @@ import Mark from './Mark'
 import EventEmitter from './EventEmitter'
 import ComponentRenderer from './ComponentRenderer'
 
+// commands
 import clearContent from './commands/clearContent'
 import deleteSelection from './commands/deleteSelection'
 import focus from './commands/focus'
@@ -37,6 +38,9 @@ import toggleMark from './commands/toggleMark'
 import toggleNode from './commands/toggleNode'
 import updateMark from './commands/updateMark'
 
+// plugins
+import focusPlugin from './plugins/focus'
+
 export type Command = (next: Function, editor: Editor) => (...args: any) => any
 
 export interface CommandSpec {
@@ -70,6 +74,8 @@ export class Editor extends EventEmitter {
     injectCSS: true,
     extensions: [],
   }
+  public isFocused = false
+  public isEditable = true
 
   constructor(options: Partial<EditorOptions> = {}) {
     super()
@@ -175,6 +181,7 @@ export class Editor extends EventEmitter {
       keymap(baseKeymap),
       dropCursor(),
       gapCursor(),
+      focusPlugin(this.proxy),
     ]
   }
 

packages/core/src/plugins/focus.ts

@@ -0,0 +1,28 @@
+import { Plugin } from 'prosemirror-state'
+import Editor from '../..'
+
+export default (editor: Editor) => new Plugin({
+  props: {
+    attributes: {
+      tabindex: '0',
+    },
+    handleDOMEvents: {
+      focus: () => {
+        editor.isFocused = true
+
+        const transaction = editor.state.tr.setMeta('focused', true)
+        editor.view.dispatch(transaction)
+
+        return true
+      },
+      blur: () => {
+        editor.isFocused = false
+
+        const transaction = editor.state.tr.setMeta('focused', false)
+        editor.view.dispatch(transaction)
+
+        return true
+      },
+    },
+  },
+})