diff --git a/demos/src/Extensions/Focus/React/index.html b/demos/src/Extensions/Focus/React/index.html
new file mode 100644
index 00000000..b5bd847d
--- /dev/null
+++ b/demos/src/Extensions/Focus/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Extensions/Focus/React/index.jsx b/demos/src/Extensions/Focus/React/index.jsx
new file mode 100644
index 00000000..a0109cef
--- /dev/null
+++ b/demos/src/Extensions/Focus/React/index.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Focus from '@tiptap/extension-focus'
+import Code from '@tiptap/extension-code'
+import BulletList from '@tiptap/extension-bullet-list'
+import ListItem from '@tiptap/extension-list-item'
+import './styles.scss'
+
+export default () => {
+ const editor = useEditor({
+ extensions: [
+ Document,
+ Paragraph,
+ Text,
+ Focus.configure({
+ className: 'has-focus',
+ mode: 'all',
+ }),
+ Code,
+ BulletList,
+ ListItem,
+ ],
+ autofocus: true,
+ content: `
+
+ The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add .has-focus, even to nested nodes.
+
+
+ - Nested elements (like this list item) will be focused with the default setting of
mode: all.
+ - Otherwise the whole list will get the focus class, even when just a single list item is selected.
+
+ `,
+ })
+
+ return
+}
diff --git a/demos/src/Extensions/Focus/React/index.spec.js b/demos/src/Extensions/Focus/React/index.spec.js
new file mode 100644
index 00000000..75d07048
--- /dev/null
+++ b/demos/src/Extensions/Focus/React/index.spec.js
@@ -0,0 +1,9 @@
+context('/src/Extensions/Focus/React/', () => {
+ before(() => {
+ cy.visit('/src/Extensions/Focus/React/')
+ })
+
+ it('should have class', () => {
+ cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
+ })
+})
diff --git a/demos/src/Extensions/Focus/React/styles.scss b/demos/src/Extensions/Focus/React/styles.scss
new file mode 100644
index 00000000..dee2c01a
--- /dev/null
+++ b/demos/src/Extensions/Focus/React/styles.scss
@@ -0,0 +1,30 @@
+.has-focus {
+ border-radius: 3px;
+ box-shadow: 0 0 0 3px #68cef8;
+}
+
+/* Basic editor styles */
+.ProseMirror {
+ > * + * {
+ margin-top: 0.75em;
+ }
+
+ ul,
+ ol {
+ padding: 0 1rem;
+ }
+
+ blockquote {
+ border-left: 2px solid rgba(#0d0d0d, 0.1);
+ padding-left: 1rem;
+ }
+
+ code {
+ background-color: rgba(#616161, 0.1);
+ border-radius: 0.25em;
+ box-decoration-break: clone;
+ color: #616161;
+ font-size: 0.9rem;
+ padding: 0.25em;
+ }
+}