refactor: remove dom logic from editor module

src/lib/Editor.ts

@@ -39,8 +39,6 @@ class Editor {
   el: DocumentFragment;
 
   valueChange = new Subject<JSONDoc>();
-  focus = new Subject<void>();
-  blur = new Subject<void>();
   update = new Subject();
 
   constructor(options: Options = DEFAULT_OPTIONS) {
@@ -120,17 +118,7 @@ class Editor {
         plugins,
       }),
       nodeViews,
-      dispatchTransaction: this.handleTransactions.bind(this),
-      handleDOMEvents: {
-        focus: () => {
-          this.focus.next();
-          return false;
-        },
-        blur: () => {
-          this.blur.next();
-          return false;
-        }
-      }
+      dispatchTransaction: this.handleTransactions.bind(this)
     });
   }
 

src/lib/editor.component.ts

@@ -90,6 +90,19 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
     this.editor.registerPlugin(plugins.attributes({
       class: 'NgxEditor__Content'
     }));
+
+    this.editor.registerPlugin(plugins.focus(() => {
+      this.focusIn.emit();
+    }));
+
+    this.editor.registerPlugin(plugins.focus(() => {
+      this.focusIn.emit();
+    }));
+
+    this.editor.registerPlugin(plugins.blur(() => {
+      this.focusOut.emit();
+      this.onTouched();
+    }));
   }
 
   ngOnInit(): void {
@@ -105,20 +118,7 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
       this.handleChange(jsonDoc);
     });
 
-    const blurSubscription = this.editor.blur.subscribe(() => {
-      this.focusOut.emit();
-      this.onTouched();
-    });
-
-    const focusScbscription = this.editor.focus.subscribe(() => {
-      this.focusIn.emit();
-    });
-
-    this.subscriptions.push(
-      contentChangeSubscription,
-      blurSubscription,
-      focusScbscription
-    );
+    this.subscriptions.push(contentChangeSubscription);
   }
 
   ngOnChanges(changes: SimpleChanges): void {

src/lib/plugins/blur.ts

@@ -0,0 +1,17 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+
+const blurPlugin = (cb = () => { }) => {
+  return new Plugin({
+    key: new PluginKey('blur'),
+    props: {
+      handleDOMEvents: {
+        blur: () => {
+          cb();
+          return false;
+        }
+      }
+    }
+  });
+};
+
+export default blurPlugin;

src/lib/plugins/focus.ts

@@ -0,0 +1,17 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+
+const focusPlugin = (cb = () => { }) => {
+  return new Plugin({
+    key: new PluginKey('focus'),
+    props: {
+      handleDOMEvents: {
+        focus: () => {
+          cb();
+          return false;
+        }
+      }
+    }
+  });
+};
+
+export default focusPlugin;

src/lib/plugins/index.ts

@@ -1,3 +1,5 @@
 export { default as editable } from './editable';
 export { default as placeholder } from './placeholder';
 export { default as attributes } from './attributes';
+export { default as focus } from './focus';
+export { default as blur } from './blur';