add focus extension

packages/extension-focus/index.ts

@@ -0,0 +1,50 @@
+import { Extension } from '@tiptap/core'
+import { Plugin } from 'prosemirror-state'
+import { DecorationSet, Decoration } from 'prosemirror-view'
+
+export default class Focus extends Extension {
+
+  name = 'focus'
+
+  defaultOptions() {
+    return {
+      className: 'has-focus',
+      nested: false,
+    }
+  }
+
+  plugins() {
+    return [
+      new Plugin({
+        props: {
+          decorations: ({ doc, plugins, selection }) => {
+            const { isFocused, isEditable } = this.editor
+            const isActive = isEditable && this.options.className
+            const { anchor } = selection
+            const decorations: Decoration[] = []
+
+            if (!isActive || !isFocused) {
+              return
+            }
+
+            doc.descendants((node, pos) => {
+              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
+
+              if (hasAnchor && !node.isText) {
+                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                  class: this.options.className,
+                })
+                decorations.push(decoration)
+              }
+
+              return this.options.nested
+            })
+
+            return DecorationSet.create(doc, decorations)
+          },
+        },
+      }),
+    ]
+  }
+
+}

packages/extension-focus/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@tiptap/extension-focus",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-extension-focus.js",
+  "umd:main": "dist/tiptap-extension-focus.umd.js",
+  "module": "dist/tiptap-extension-focus.mjs", 
+  "unpkg": "dist/tiptap-extension-focus.js",
+  "jsdelivr": "dist/tiptap-extension-focus.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "2.x",
+    "prosemirror-state": "^1.3.3"
+  }
+}