add focus extension

docs/src/demos/Examples/Focus/index.spec.js

@@ -6,6 +6,9 @@ context('focus', () => {
   describe('focus class', () => {
     it('should have class', () => {
       cy.get('.ProseMirror').window().then(window => {
+        const { editor } = window
+        editor.focus('start')
+
         cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
       })
     })

docs/src/demos/Examples/Focus/index.vue

@@ -15,7 +15,7 @@ import Italic from '@tiptap/extension-italic'
 import Code from '@tiptap/extension-code'
 import CodeBlock from '@tiptap/extension-codeblock'
 import Heading from '@tiptap/extension-heading'
-// import Focus from '@tiptap/extension-focus'
+import Focus from '@tiptap/extension-focus'
 
 export default {
   components: {
@@ -40,12 +40,12 @@ export default {
         new Code(),
         new CodeBlock(),
         new Heading(),
-        // new Focus({
-        //   className: 'has-focus',
-        //   nested: true,
-        // }),
+        new Focus({
+          className: 'has-focus',
+          nested: true,
+        }),
       ],
-      // autoFocus: true,
+      autoFocus: true,
       content: `
         <p>
           With the focus extension you can add custom classes to focused nodes. Default options:
@@ -65,14 +65,6 @@ export default {
     window.editor = this.editor
   },
 
-  watch: {
-    editable() {
-      this.editor.setOptions({
-        editable: this.editable,
-      })
-    },
-  },
-
   beforeDestroy() {
     this.editor.destroy()
   },