chore: reformat all files

.changeset/big-wolves-design.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/extension-placeholder": major
+'@tiptap/extension-placeholder': major
 ---
 
 Officially remove the `considerAnyAsEmpty` which has not been used since version 2.5

.changeset/chatty-monkeys-hear.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/extension-list-keymap": patch
+'@tiptap/extension-list-keymap': patch
 ---
 
 Fix backspace behavior when selection is not collapsed

.changeset/chatty-pianos-learn.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/core": patch
+'@tiptap/core': patch
 ---
 
 preserve existing node attributes when running setNode

.changeset/chilled-trees-agree.md

@@ -1,59 +1,59 @@
 ---
-"@tiptap/extension-collaboration-cursor": major
+'@tiptap/extension-collaboration-cursor': major
-"@tiptap/extension-code-block-lowlight": major
+'@tiptap/extension-code-block-lowlight': major
-"@tiptap/extension-character-count": major
+'@tiptap/extension-character-count': major
-"@tiptap/extension-horizontal-rule": major
+'@tiptap/extension-horizontal-rule': major
-"@tiptap/extension-collaboration": major
+'@tiptap/extension-collaboration': major
-"@tiptap/extension-floating-menu": major
+'@tiptap/extension-floating-menu': major
-"@tiptap/extension-ordered-list": major
+'@tiptap/extension-ordered-list': major
-"@tiptap/extension-table-header": major
+'@tiptap/extension-table-header': major
-"@tiptap/extension-bubble-menu": major
+'@tiptap/extension-bubble-menu': major
-"@tiptap/extension-bullet-list": major
+'@tiptap/extension-bullet-list': major
-"@tiptap/extension-font-family": major
+'@tiptap/extension-font-family': major
-"@tiptap/extension-list-keymap": major
+'@tiptap/extension-list-keymap': major
-"@tiptap/extension-placeholder": major
+'@tiptap/extension-placeholder': major
-"@tiptap/extension-superscript": major
+'@tiptap/extension-superscript': major
-"@tiptap/extension-blockquote": major
+'@tiptap/extension-blockquote': major
-"@tiptap/extension-code-block": major
+'@tiptap/extension-code-block': major
-"@tiptap/extension-dropcursor": major
+'@tiptap/extension-dropcursor': major
-"@tiptap/extension-hard-break": major
+'@tiptap/extension-hard-break': major
-"@tiptap/extension-table-cell": major
+'@tiptap/extension-table-cell': major
-"@tiptap/extension-text-align": major
+'@tiptap/extension-text-align': major
-"@tiptap/extension-text-style": major
+'@tiptap/extension-text-style': major
-"@tiptap/extension-typography": major
+'@tiptap/extension-typography': major
-"@tiptap/extension-gapcursor": major
+'@tiptap/extension-gapcursor': major
-"@tiptap/extension-highlight": major
+'@tiptap/extension-highlight': major
-"@tiptap/extension-list-item": major
+'@tiptap/extension-list-item': major
-"@tiptap/extension-paragraph": major
+'@tiptap/extension-paragraph': major
-"@tiptap/extension-subscript": major
+'@tiptap/extension-subscript': major
-"@tiptap/extension-table-row": major
+'@tiptap/extension-table-row': major
-"@tiptap/extension-task-item": major
+'@tiptap/extension-task-item': major
-"@tiptap/extension-task-list": major
+'@tiptap/extension-task-list': major
-"@tiptap/extension-underline": major
+'@tiptap/extension-underline': major
-"@tiptap/extension-document": major
+'@tiptap/extension-document': major
-"@tiptap/extension-heading": major
+'@tiptap/extension-heading': major
-"@tiptap/extension-history": major
+'@tiptap/extension-history': major
-"@tiptap/extension-mention": major
+'@tiptap/extension-mention': major
-"@tiptap/extension-youtube": major
+'@tiptap/extension-youtube': major
-"@tiptap/extension-italic": major
+'@tiptap/extension-italic': major
-"@tiptap/extension-strike": major
+'@tiptap/extension-strike': major
-"@tiptap/extension-color": major
+'@tiptap/extension-color': major
-"@tiptap/extension-focus": major
+'@tiptap/extension-focus': major
-"@tiptap/extension-image": major
+'@tiptap/extension-image': major
-"@tiptap/extension-table": major
+'@tiptap/extension-table': major
-"@tiptap/extension-bold": major
+'@tiptap/extension-bold': major
-"@tiptap/extension-code": major
+'@tiptap/extension-code': major
-"@tiptap/extension-link": major
+'@tiptap/extension-link': major
-"@tiptap/extension-text": major
+'@tiptap/extension-text': major
-"@tiptap/starter-kit": major
+'@tiptap/starter-kit': major
-"@tiptap/suggestion": major
+'@tiptap/suggestion': major
-"@tiptap/react": major
+'@tiptap/react': major
-"@tiptap/vue-2": major
+'@tiptap/vue-2': major
-"@tiptap/vue-3": major
+'@tiptap/vue-3': major
-"@tiptap/core": major
+'@tiptap/core': major
-"@tiptap/html": major
+'@tiptap/html': major
-"@tiptap/pm": major
+'@tiptap/pm': major
-"tiptap-demos": major
+'tiptap-demos': major
 ---
 
 We are now building packages with tsup which does not support UMD builds, please repackage if you require UMD builds

.changeset/dirty-bats-look.md

@@ -1,11 +1,11 @@
 ---
-"@tiptap/extension-floating-menu": major
+'@tiptap/extension-floating-menu': major
-"@tiptap/extension-bubble-menu": major
+'@tiptap/extension-bubble-menu': major
-"@tiptap/extension-mention": major
+'@tiptap/extension-mention': major
-"@tiptap/suggestion": major
+'@tiptap/suggestion': major
-"@tiptap/react": major
+'@tiptap/react': major
-"@tiptap/vue-2": major
+'@tiptap/vue-2': major
-"@tiptap/vue-3": major
+'@tiptap/vue-3': major
 ---
 
 Removed tippy.js and replaced it with [Floating UI](https://floating-ui.com/) - a newer, more lightweight and customizable floating element library.

.changeset/five-flowers-eat.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/vue-3": patch
+'@tiptap/vue-3': patch
 ---
 
 Fix editor destruction before transition end if editor is nested

.changeset/five-mice-turn.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/extension-bubble-menu": patch
+'@tiptap/extension-bubble-menu': patch
 ---
 
 Add `element: HTMLElement` to `shouldShow` options within the BubbleMenu options.

.changeset/fresh-coats-relate.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/core": minor
+'@tiptap/core': minor
 ---
 
 Previously, only a json representation of the node could be inserted into the editor. This change allows for the insertion of Prosemirror `Node`s and `Fragment`s directly into the editor through the `insertContentAt`, `setContent` and `insertContent` commands.

.changeset/funny-otters-protect.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/core": patch
+'@tiptap/core': patch
 ---
 
 Addresses a bug with `insertContentAt`'s `simulatedPasteRules` option where it could only accept text and not Prosemirror `Node` and `Content`

.changeset/green-wolves-arrive.md

@@ -1,9 +1,9 @@
 ---
-"@tiptap/core": major
+'@tiptap/core': major
 ---
 
 Fix `getPos` type in `NodeViewRendererProps` to potentially be `undefined`
 
 Breaking change: Types may flag uses of getPos where an `undefined` possibility isn't handled.
 Why this change was made: To ensure the type reflects the real functionality of this function.
-How to update: Ensure that the return value of `getPos` exists before making use of the value.
+How to update: Ensure that the return value of `getPos` exists before making use of the value.

.changeset/happy-vans-smash.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/core": patch
+'@tiptap/core': patch
 ---
 
 Updates the types of `addOptions` and `addStorage` to have the parent be possibly undefined which is the most accurate typing

.changeset/lazy-needles-train.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/core": major
+'@tiptap/core': major
 ---
 
 `insertContent` and `insertContentAt` commands should not split text nodes like paragraphs into multiple nodes when the inserted content is at the beginning of the text to avoid empty nodes being created

.changeset/lemon-berries-change.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/core": patch
+'@tiptap/core': patch
 ---
 
 feat: add `once` to EventEmitters

.changeset/mean-moose-bow.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/vue-2": patch
+'@tiptap/vue-2': patch
 ---
 
 Pin vue-ts-types to a working version for vue-2

.changeset/perfect-rice-vanish.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/react": minor
+'@tiptap/react': minor
 ---
 
 Throw an error in development mode if immediatelyRender is not set in SSR mode

.changeset/polite-buttons-wash.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/react": patch
+'@tiptap/react': patch
 ---
 
 React 19 is now allowed as a peer dep, we did not have to make any changes for React 19

.changeset/serious-coins-fail.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/extension-mention": patch
+'@tiptap/extension-mention': patch
 ---
 
 add zero-width space to resolve cursor selection issue

.changeset/shy-pigs-exercise.md

@@ -1,6 +1,6 @@
 ---
-"@tiptap/core": patch
+'@tiptap/core': patch
-"@tiptap/extension-hard-break": patch
+'@tiptap/extension-hard-break': patch
 ---
 
 Add Node `linebreakReplacement` support and enable on hard-break nodes

.changeset/swift-keys-collect.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/core": patch
+'@tiptap/core': patch
 ---
 
 Improve handling of selections with `updateAttributes`. Should no longer modify parent nodes of the same type.

.changeset/two-rats-watch.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/extension-table": patch
+'@tiptap/extension-table': patch
 ---
 
 enforce cellMinWidth even on column not resized by the user, fixes #5435

.changeset/weak-books-eat.md

@@ -1,5 +1,5 @@
 ---
-"@tiptap/starter-kit": major
+'@tiptap/starter-kit': major
 ---
 
 We have now added the Link, ListKeymap, and Underline extensions to the starter kit for a smoother onboarding experience

.changeset/witty-olives-protect.md

@@ -1,6 +1,6 @@
 ---
-"@tiptap/extension-link": patch
+'@tiptap/extension-link': patch
-"tiptap-demos": patch
+'tiptap-demos': patch
 ---
 
 The link extension's `validate` option now applies to both auto-linking and XSS mitigation. While, the new `shouldAutoLink` option is used to disable auto linking on an otherwise valid url.

.github/DISCUSSION_TEMPLATE/community-extensions.yml

@@ -1,4 +1,4 @@
-title: "Community Extension: "
+title: 'Community Extension: '
 body:
   - type: markdown
     attributes:
@@ -9,7 +9,7 @@ body:
     attributes:
       label: Description
       description: Please describe how your extension works and what it does.
-      placeholder: "My extension does …"
+      placeholder: 'My extension does …'
     validations:
       required: true
   - type: textarea
@@ -17,7 +17,7 @@ body:
     attributes:
       label: Installation
       description: Please describe how users can install your extension.
-      placeholder: "npm install …"
+      placeholder: 'npm install …'
     validations:
       required: true
   - type: textarea
@@ -25,7 +25,7 @@ body:
     attributes:
       label: Usage
       description: Please describe how users can use your extension in their editor.
-      placeholder: "To use my extension you have to …"
+      placeholder: 'To use my extension you have to …'
     validations:
       required: true
   - type: dropdown
@@ -34,11 +34,11 @@ body:
       label: Type
       description: Please select the type of this extension.
       options:
-        - "Node"
+        - 'Node'
-        - "Mark"
+        - 'Mark'
-        - "Prosemirror plugin"
+        - 'Prosemirror plugin'
-        - "Package or Kit"
+        - 'Package or Kit'
-        - "Other"
+        - 'Other'
     validations:
       required: true
   - type: textarea
@@ -46,6 +46,6 @@ body:
     attributes:
       label: Other
       description: Feel free to add any other information about your extension.
-      placeholder: "I hope you like …"
+      placeholder: 'I hope you like …'
     validations:
       required: false

.github/DISCUSSION_TEMPLATE/feature-requests.yml

@@ -1,6 +1,6 @@
-title: "Feature Request: "
+title: 'Feature Request: '
 labels:
-  - "Type: Feature Request"
+  - 'Type: Feature Request'
 body:
   - type: markdown
     attributes:
@@ -11,7 +11,7 @@ body:
     attributes:
       label: Description
       description: Please describe the feature you would like to see in Tiptap.
-      placeholder: "I wish there was an extension for …"
+      placeholder: 'I wish there was an extension for …'
     validations:
       required: true
   - type: textarea
@@ -19,7 +19,7 @@ body:
     attributes:
       label: Use Case
       description: Please describe the use case for this feature.
-      placeholder: "I want to use this feature for …"
+      placeholder: 'I want to use this feature for …'
     validations:
       required: true
   - type: dropdown
@@ -28,9 +28,9 @@ body:
       label: Type
       description: Please select the type of this feature.
       options:
-        - "New extension"
+        - 'New extension'
-        - "New feature"
+        - 'New feature'
-        - "New Tiptap API"
+        - 'New Tiptap API'
-        - "Other"
+        - 'Other'
     validations:
       required: true

.github/DISCUSSION_TEMPLATE/showcase.yml

@@ -1,4 +1,4 @@
-title: "Community Extension: "
+title: 'Community Extension: '
 body:
   - type: markdown
     attributes:
@@ -9,7 +9,7 @@ body:
     attributes:
       label: Description
       description: Please describe what your project is about
-      placeholder: "My project is about …"
+      placeholder: 'My project is about …'
     validations:
       required: true
   - type: input
@@ -17,7 +17,7 @@ body:
     attributes:
       label: URL
       description: If possible share the URL of your project.
-      placeholder: "https://example.com"
+      placeholder: 'https://example.com'
     validations:
       required: false
   - type: textarea
@@ -25,7 +25,7 @@ body:
     attributes:
       label: About
       description: Feel free to talk about how you used Tiptap in your project, what you liked about it, what you didn't like about it, and what you would like to see in the future.
-      placeholder: "If used Tiptap to …"
+      placeholder: 'If used Tiptap to …'
     validations:
       required: true
   - type: dropdown
@@ -34,12 +34,12 @@ body:
       label: Type
       description: Please select the type of your project.
       options:
-        - "Chat Application"
+        - 'Chat Application'
-        - "Commenting Application"
+        - 'Commenting Application'
-        - "Content Management System"
+        - 'Content Management System'
-        - "Document Editor"
+        - 'Document Editor'
-        - "Document Editor with Collaboration"
+        - 'Document Editor with Collaboration'
-        - "Other"
+        - 'Other'
     validations:
       required: true
   - type: textarea
@@ -47,6 +47,6 @@ body:
     attributes:
       label: Other
       description: Feel free to add any other information about your project.
-      placeholder: "I hope you like …"
+      placeholder: 'I hope you like …'
     validations:
       required: false

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,14 +1,14 @@
 name: Bug Report
-title: "[Bug]: "
+title: '[Bug]: '
 description: Found a bug in the editor core or one of the extensions? Report it here to help us improve.
 labels:
-  - "Type: Bug"
+  - 'Type: Bug'
-  - "Category: Open Source"
+  - 'Category: Open Source'
-  - "Status: New"
+  - 'Status: New'
 body:
   - type: markdown
     attributes:
-      value: "### Please provide details to help us diagnose the bug."
+      value: '### Please provide details to help us diagnose the bug.'
   - type: input
     id: packages
     attributes:
@@ -30,7 +30,7 @@ body:
     attributes:
       label: Bug Description
       description: Provide a clear and concise description of what the bug is.
-      placeholder: "The issue occurs when..."
+      placeholder: 'The issue occurs when...'
     validations:
       required: true
   - type: dropdown
@@ -59,7 +59,7 @@ body:
     id: sandbox
     attributes:
       label: Code Example URL
-      description: "Link a CodeSandbox, Stackblitz, GitHub repository, or similar to help us reproduce the issue faster."
+      description: 'Link a CodeSandbox, Stackblitz, GitHub repository, or similar to help us reproduce the issue faster.'
       placeholder: https://codesandbox.io/s/example
     validations:
       required: false
@@ -74,14 +74,14 @@ body:
     id: context
     attributes:
       label: Additional Context (Optional)
-      description: "Add any other context about the problem here, such as screenshots or videos."
+      description: 'Add any other context about the problem here, such as screenshots or videos.'
   - type: checkboxes
     attributes:
       label: Dependency Updates
-      description: "Have you updated your dependencies? This can often resolve issues."
+      description: 'Have you updated your dependencies? This can often resolve issues.'
       options:
         - label: Yes, I've updated all my dependencies.
           required: true
   - type: markdown
     attributes:
-      value: "Thank you for helping us improve our open-source projects by reporting this issue!"
+      value: 'Thank you for helping us improve our open-source projects by reporting this issue!'

.github/ISSUE_TEMPLATE/bug_report_pro.yml

@@ -1,14 +1,14 @@
 name: Bug Report (Tiptap Pro)
-title: "[PRO]: "
+title: '[PRO]: '
 description: If you've encountered a bug with Tiptap Pro features, please report it here.
 labels:
-  - "Type: Bug"
+  - 'Type: Bug'
-  - "Category: Pro"
+  - 'Category: Pro'
-  - "Status: New"
+  - 'Status: New'
 body:
   - type: markdown
     attributes:
-      value: "### Please ensure this issue is for Tiptap Pro features only. Provide as much detail as possible to help us identify the issue quickly."
+      value: '### Please ensure this issue is for Tiptap Pro features only. Provide as much detail as possible to help us identify the issue quickly.'
   - type: input
     id: packages
     attributes:
@@ -30,7 +30,7 @@ body:
     attributes:
       label: Description of the Bug
       description: Provide a clear and concise description of what the bug is.
-      placeholder: "The issue occurs when..."
+      placeholder: 'The issue occurs when...'
     validations:
       required: true
   - type: dropdown
@@ -48,10 +48,10 @@ body:
       required: true
   - type: markdown
     attributes:
-      value: "### Helpful Code Examples"
+      value: '### Helpful Code Examples'
   - type: markdown
     attributes:
-      value: "Providing a CodeSandbox link is crucial for diagnosing issues faster. Below are templates you might use:"
+      value: 'Providing a CodeSandbox link is crucial for diagnosing issues faster. Below are templates you might use:'
   - type: markdown
     attributes:
       value: |
@@ -63,7 +63,7 @@ body:
     id: sandbox
     attributes:
       label: Code Example (Preferred)
-      description: "Provide a link to a CodeSandbox or other code repository to help us reproduce the issue."
+      description: 'Provide a link to a CodeSandbox or other code repository to help us reproduce the issue.'
       placeholder: https://codesandbox.io/s/example
     validations:
       required: false
@@ -78,14 +78,14 @@ body:
     id: context
     attributes:
       label: Additional Context (Optional)
-      description: "Add any other context about the problem here, like screenshots or videos."
+      description: 'Add any other context about the problem here, like screenshots or videos.'
   - type: checkboxes
     attributes:
       label: Dependency Updates
-      description: "Have you updated your dependencies? It can often resolve issues."
+      description: 'Have you updated your dependencies? It can often resolve issues.'
       options:
         - label: Yes, I've updated all my dependencies.
           required: true
   - type: markdown
     attributes:
-      value: "Thank you for contributing to Tiptap Pro by reporting this issue!"
+      value: 'Thank you for contributing to Tiptap Pro by reporting this issue!'

.github/ISSUE_TEMPLATE/documentation.yml

@@ -1,10 +1,10 @@
 name: Documentation feedback
 description: Share what we need to explain better.
-title: "[Documentation]: "
+title: '[Documentation]: '
 labels:
-  - "Type: Documentation"
+  - 'Type: Documentation'
-  - "Category: Open Source"
+  - 'Category: Open Source'
-  - "Status: New"
+  - 'Status: New'
 body:
   - type: input
     id: url
@@ -17,28 +17,28 @@ body:
     id: part-of-the-documentation
     attributes:
       label: What part of the documentation needs improvement?
-      placeholder: "I’ve read the following page of the documentation …"
+      placeholder: 'I’ve read the following page of the documentation …'
     validations:
       required: true
   - type: textarea
     id: good-parts
     attributes:
       label: What is helpful about that part?
-      placeholder: "I think this part is really good: …"
+      placeholder: 'I think this part is really good: …'
     validations:
       required: true
   - type: textarea
     id: bad-parts
     attributes:
       label: What is hard to understand, missing or misleading?
-      placeholder: "But you really need to improve …"
+      placeholder: 'But you really need to improve …'
     validations:
       required: true
   - type: textarea
     id: context
     attributes:
       label: Anything to add? (optional)
-      description: "Add any other context or screenshots here."
+      description: 'Add any other context or screenshots here.'
   - type: markdown
     attributes:
       value: |

.github/dependabot.yml

@@ -3,7 +3,6 @@
 
 version: 2
 updates:
-
   - package-ecosystem: 'github-actions'
     directory: '/'
     open-pull-requests-limit: 10
@@ -12,4 +11,3 @@ updates:
       day: 'monday'
     reviewers:
       - 'bdbch'
-

.github/pull_request_template.md

@@ -1,19 +1,25 @@
 ## Changes Overview
+
 <!-- Briefly describe your changes. -->
 
 ## Implementation Approach
+
 <!-- Describe your approach to implementing these changes. Keep it concise. -->
 
 ## Testing Done
+
 <!-- Explain how you tested these changes. Link to test scenarios or specs if relevant. -->
 
 ## Verification Steps
+
 <!-- Describe steps reviewers can take to verify the functionality of your changes. -->
 
 ## Additional Notes
+
 <!-- Add any other notes or screenshots about the PR here. -->
 
 ## Checklist
+
 - [ ] I have created a [changeset](https://github.com/changesets/changesets) for this PR if necessary.
 - [ ] My changes do not break the library.
 - [ ] I have added tests where applicable.
@@ -21,4 +27,5 @@
 - [ ] I have fixed any lint issues.
 
 ## Related Issues
+
 <!-- Link any related issues here -->

.github/workflows/build.yml

@@ -73,16 +73,16 @@ jobs:
       matrix:
         node-version: [20]
         test-spec:
-          - { name: "Integration", spec: "./tests/cypress/integration/**/*.spec.{js,ts}" }
+          - { name: 'Integration', spec: './tests/cypress/integration/**/*.spec.{js,ts}' }
           #- { name: "Demos/Commands", spec: "./demos/src/Commands/**/*.spec.{js,ts}" }
-          - { name: "Demos/Examples", spec: "./demos/src/Examples/**/*.spec.{js,ts}" }
+          - { name: 'Demos/Examples', spec: './demos/src/Examples/**/*.spec.{js,ts}' }
-          - { name: "Demos/Experiments", spec: "./demos/src/Experiments/**/*.spec.{js,ts}" }
+          - { name: 'Demos/Experiments', spec: './demos/src/Experiments/**/*.spec.{js,ts}' }
-          - { name: "Demos/Extensions", spec: "./demos/src/Extensions/**/*.spec.{js,ts}" }
+          - { name: 'Demos/Extensions', spec: './demos/src/Extensions/**/*.spec.{js,ts}' }
-          - { name: "Demos/GuideContent", spec: "./demos/src/GuideContent/**/*.spec.{js,ts}" }
+          - { name: 'Demos/GuideContent', spec: './demos/src/GuideContent/**/*.spec.{js,ts}' }
-          - { name: "Demos/GuideGettingStarted", spec: "./demos/src/GuideGettingStarted/**/*.spec.{js,ts}" }
+          - { name: 'Demos/GuideGettingStarted', spec: './demos/src/GuideGettingStarted/**/*.spec.{js,ts}' }
           #- { name: "Demos/GuideNodeViews", "./demos/src/GuideNodeViews/**/*.spec.{js,ts}" }
-          - { name: "Demos/Marks", spec: "./demos/src/Marks/**/*.spec.{js,ts}" }
+          - { name: 'Demos/Marks', spec: './demos/src/Marks/**/*.spec.{js,ts}' }
-          - { name: "Demos/Nodes", spec: "./demos/src/Nodes/**/*.spec.{js,ts}" }
+          - { name: 'Demos/Nodes', spec: './demos/src/Nodes/**/*.spec.{js,ts}' }
           #- { name: "Demos/Overview", spec: "./demos/src/Overview/**/*.spec.{js,ts}" }
 
     steps:

.github/workflows/publish.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Setup Node ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
-          node-version:  ${{ matrix.node-version }}
+          node-version: ${{ matrix.node-version }}
           registry-url: 'https://registry.npmjs.org/'
 
       - name: Load cached dependencies

README.md

@@ -1,4 +1,5 @@
 # Tiptap Editor
+
 The Tiptap Editor is a headless, framework-agnostic rich text editor that's customizable and extendable through extensions. Its headless nature means it comes without a set user interface, offering full design freedom (for a jumpstart, see linked [UI templates](#examples-codesandbox-and-ui-templates) below). Tiptap is based on the highly reliable [ProseMirror](https://github.com/ProseMirror/prosemirror) library.
 
 Tiptap Editor is complemented by the collaboration open-source backend [Hocuspocus](https://github.com/ueberdosis/hocuspocus). Both the Editor and Hocuspocus form the foundation of the [Tiptap Suite](https://tiptap.dev/).
@@ -13,12 +14,12 @@ Tiptap Editor is complemented by the collaboration open-source backend [Hocuspoc
 ### How does the Tiptap Editor work?
 
 - **Headless Framework:** Tiptap does not rely on a user interface. So there is no need for class overrides or code hacks. If you do need an example UI feel free to browse our [UI templates](#examples-codesandbox-and-ui-templates) linked below.
-- **Framework-agnostic:** The Tiptap Editor is designed to work across different frontend frameworks. This means whether you're using Vue, React, or plain JavaScript, Tiptap integrates  without compatibility issues.
+- **Framework-agnostic:** The Tiptap Editor is designed to work across different frontend frameworks. This means whether you're using Vue, React, or plain JavaScript, Tiptap integrates without compatibility issues.
 - **Extension based:** Extensions in Tiptap allow for a tailored editing experience, from simple text styling to advanced features like drag-and-drop block editing. You have the option to choose from over 100 extensions available in the [documentation](https://tiptap.dev/docs/editor/extensions) and [community](https://github.com/ueberdosis/awesome-tiptap/#community-extensions) to enhance your editor's functionality.
 - **Customize your UX:** The editor was built to give you control to define your own [extensions](https://tiptap.dev/docs/editor/guide/custom-extensions) and [nodes](https://tiptap.dev/docs/editor/api/nodes).
 
-
 ### Editor Pro Extensions
+
 The **Pro Extensions** are a set of advanced functionalities that enhance the capabilities of the Tiptap Editor. They are additional features that can be integrated into the base editor to provide more sophisticated editing options.
 
 Key functionalities include collaborative editing, which allows multiple users to edit documents simultaneously, drag-and-drop file management for easier handling of documents and media, and unique node ID assignment. Review the docs right [here](https://tiptap.dev/docs/editor/extensions).
@@ -26,28 +27,35 @@ Key functionalities include collaborative editing, which allows multiple users t
 Pro Extensions are free with a [Tiptap account](https://cloud.tiptap.dev/pro-extensions). Once signed up, review the guide in your account.
 
 ### Make your editor collaborative
+
 Interested in collaborative editing? Check out our open-source package [Hocuspocus](https://github.com/ueberdosis/hocuspocus) - a collaboration backend built around the CRDT power of [Yjs](https://github.com/yjs/yjs). Hocuspocus serves as the backbone for the [Tiptap Suite](https://tiptap.dev/).
 
 ## Documentation
+
 For more detailed information, make sure to check out our [documentation](https://tiptap.dev/docs/editor/installation). If you encounter any problems or have suggestions for our system, please open an issue.
 
 ### Examples, CodeSandbox and UI Templates
+
 Have a look at the [examples to see Tiptap in action](https://tiptap.dev/examples) or review and fork our codesandboxes.
+
 - [Basic example of the Tiptap editor.](https://codesandbox.io/p/devbox/editor-9x9dkd?embed=1&file=%2Fsrc%2FApp.js)
 - [Collaboration ready Tiptap CodeSandbox](https://codesandbox.io/p/devbox/collaboration-4stk94)
 - React notion-like block editor template: [Demo](https://templates.tiptap.dev/)
 
 ## About Tiptap
+
 Tiptap is a collection of developer components based on open-source technology, forming the basis of our advanced, paid features. It includes the open-source editor component, collaboration features, Content AI, and Tiptap Cloud. We are developing open-source products that also shape our paid features. We're committed to improving both, ensuring quality and reliability in every update.
 
 For more details, visit the Tiptap [documentation](https://tiptap.dev/docs/editor/introduction) or [website](https://tiptap.dev/).
 
 ### Community
+
 For help, discussion about best practices, or any other conversation that would benefit from being searchable:
 
 [Discuss Tiptap on GitHub](https://github.com/ueberdosis/tiptap/discussions)
 
 ### Sponsors 💖
+
 <table>
   <tr>
     <td align="center">
@@ -102,9 +110,11 @@ For help, discussion about best practices, or any other conversation that would
 [iFixit](https://www.ifixit.com/), [ApostropheCMS](https://apostrophecms.com/), [Novadiscovery](http://www.novadiscovery.com/), [Omics Data Automation](https://www.omicsautomation.com), [Flow Mobile](https://www.flowmobile.app/), [DocIQ](https://www.dociq.io/) and [hundreds of awesome individuals](https://github.com/sponsors/ueberdosis).
 
 ### Contributing
+
 Feel like adding some magic of your own to Tiptap Editor Core? We welcome contributions! Please see our [CONTRIBUTING](CONTRIBUTING.md) guidelines for how to get started.
 
 ### Contributors
+
 [Sam Willis](https://github.com/samwillis),
 [Brian Hung](https://github.com/BrianHung),
 [Dirk Holtwick](https://github.com/holtwick),
@@ -118,4 +128,5 @@ Feel like adding some magic of your own to Tiptap Editor Core? We welcome contri
 [Gregor](https://github.com/gambolputty) and [many more](../../contributors).
 
 ## License
+
 The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

babel.config.js

@@ -1,10 +1,4 @@
 module.exports = {
-  presets: [
+  presets: ['@babel/preset-env', '@babel/preset-react'],
-    '@babel/preset-env',
+  plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining'],
-    '@babel/preset-react',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-nullish-coalescing-operator',
-    '@babel/plugin-proposal-optional-chaining',
-  ],
 }

demos/index.html

@@ -1,10 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="refresh" content="0; url=/preview/" />
   </head>
-  <body>
+  <body></body>
-  </body>
 </html>

demos/preview/Demo.vue

@@ -6,23 +6,18 @@
         :key="index"
         @click="setTab(language.name)"
         class="px-3 py-2 text-sm text-white leading-[125%] font-semibold rounded-[0.625rem] transition-all"
-        :class="[currentTab === language.name
+        :class="[
-          ? 'opacity-100 bg-[#1C1917]'
+          currentTab === language.name
-          : 'opacity-50 bg-transparent hover:opacity-100 hover:bg-[#1C1917]'
+            ? 'opacity-100 bg-[#1C1917]'
+            : 'opacity-50 bg-transparent hover:opacity-100 hover:bg-[#1C1917]',
         ]"
       >
         {{ language.name }}
       </button>
     </div>
     <div class="overflow-hidden">
-      <div
+      <div class="bg-white" :class="[hidePreview ? 'hidden' : '']">
-        class="bg-white"
+        <demo-frame :src="currentIframeUrl" :key="currentIframeUrl" />
-        :class="[hidePreview ? 'hidden' : '']"
-      >
-        <demo-frame
-          :src="currentIframeUrl"
-          :key="currentIframeUrl"
-        />
       </div>
 
       <div class="text-white bg-black" v-if="!hideSource && currentFile">
@@ -30,9 +25,10 @@
           <div class="flex flex-auto px-4 border-b-2 border-gray-800">
             <button
               class="inline-flex relative mr-4 py-2 pb-[calc(0.3rem + 2px)] mb-[-2px] border-b-2 border-transparent font-mono text-sm whitespace-nowrap"
-              :class="[!showDebug && currentFile.content === file.content
+              :class="[
-                ? 'text-white border-white font-bold'
+                !showDebug && currentFile.content === file.content
-                : 'text-gray-400'
+                  ? 'text-white border-white font-bold'
+                  : 'text-gray-400',
               ]"
               v-for="(file, index) in source"
               :key="index"
@@ -44,10 +40,7 @@
             <button
               v-if="debugJSON"
               class="inline-flex relative py-2 pb-[calc(0.3rem + 2px)] mb-[-2px] border-b-2 border-transparent font-mono text-sm ml-auto"
-              :class="[showDebug
+              :class="[showDebug ? 'text-white border-white font-bold' : 'text-gray-400']"
-                ? 'text-white border-white font-bold'
-                : 'text-gray-400'
-              ]"
               @click="showDebug = !showDebug"
             >
               Inspect
@@ -67,9 +60,7 @@
           <a class="flex-shrink min-w-0 overflow-hidden overflow-ellipsis whitespace-nowrap" :href="currentIframeUrl">
             {{ name }}/{{ currentTab }}
           </a>
-          <a class="pl-4 whitespace-nowrap" :href="githubUrl" target="_blank">
+          <a class="pl-4 whitespace-nowrap" :href="githubUrl" target="_blank"> Edit on GitHub → </a>
-            Edit on GitHub →
-          </a>
         </div>
       </div>
     </div>
@@ -128,9 +119,7 @@ export default {
     },
 
     query() {
-      return Object.fromEntries(Object
+      return Object.fromEntries(Object.entries(this.$route.query).map(([key, value]) => [key, this.fromString(value)]))
-        .entries(this.$route.query)
-        .map(([key, value]) => [key, this.fromString(value)]))
     },
 
     inline() {
@@ -220,9 +209,10 @@ export default {
 
   mounted() {
     // TODO: load language from url params
-    const intitialTab = localStorage.tab && this.tabs.some(tab => tab.name === localStorage.tab)
+    const intitialTab =
-      ? localStorage.tab
+      localStorage.tab && this.tabs.some(tab => tab.name === localStorage.tab)
-      : this.sortedTabs[0]?.name
+        ? localStorage.tab
+        : this.sortedTabs[0]?.name
 
     this.setTab(intitialTab, false)
 

demos/preview/DemoFrame.vue

@@ -1,21 +1,16 @@
 <template>
   <div class="flex flex-col relative min-h-[5rem]">
-    <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center pointer-events-none" v-if="isLoading">
+    <div
-      <svg
+      class="absolute top-0 left-0 w-full h-full flex justify-center items-center pointer-events-none"
-        class="animate-spin -ml-1 mr-3 h-5 w-5"
+      v-if="isLoading"
-        xmlns="http://www.w3.org/2000/svg"
+    >
-        fill="none"
+      <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        viewBox="0 0 24 24"
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-      >
+        <path
-        <circle
+          class="opacity-75"
-          class="opacity-25"
+          fill="currentColor"
-          cx="12"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          stroke-width="4"
         />
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
       </svg>
     </div>
     <iframe
@@ -53,6 +48,4 @@ export default {
 }
 </script>
 
-<style>
+<style></style>
-
-</style>

demos/preview/index.html

@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8"/>
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Preview</title>
   </head>
   <body>

demos/preview/index.js

@@ -9,17 +9,16 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Demo from './Demo.vue'
 import App from './index.vue'
 
-const routes = demos
+const routes = demos.map(({ name, tabs }) => {
-  .map(({ name, tabs }) => {
+  return {
-    return {
+    path: `/${name}`,
-      path: `/${name}`,
+    component: Demo,
-      component: Demo,
+    props: {
-      props: {
+      name,
-        name,
+      tabs,
-        tabs,
+    },
-      },
+  }
-    }
+})
-  })
 
 const router = createRouter({
   history: createWebHistory('preview'),
@@ -30,25 +29,28 @@ createApp(App)
   .directive('resize', {
     beforeMount: (el, { value = {} }) => {
       el.addEventListener('load', () => {
-        iframeResize({
+        iframeResize(
-          ...value,
+          {
-          // messageCallback(messageData) {
+            ...value,
-          //   if (messageData.message.type !== 'resize') {
+            // messageCallback(messageData) {
-          //     return
+            //   if (messageData.message.type !== 'resize') {
-          //   }
+            //     return
+            //   }
 
-          //   const style = window.getComputedStyle(el.parentElement)
+            //   const style = window.getComputedStyle(el.parentElement)
-          //   const maxHeight = parseInt(style.getPropertyValue('max-height'), 10)
+            //   const maxHeight = parseInt(style.getPropertyValue('max-height'), 10)
 
-          //   if (messageData.message.height > maxHeight) {
+            //   if (messageData.message.height > maxHeight) {
-          //     el.setAttribute('scrolling', 'auto')
+            //     el.setAttribute('scrolling', 'auto')
-          //   } else {
+            //   } else {
-          //     el.setAttribute('scrolling', 'no')
+            //     el.setAttribute('scrolling', 'no')
-          //   }
+            //   }
 
-          //   el?.iFrameResizer?.resize?.()
+            //   el?.iFrameResizer?.resize?.()
-          // },
+            // },
-        }, el)
+          },
+          el,
+        )
       })
     },
     unmounted(el) {

demos/preview/index.vue

@@ -5,7 +5,6 @@ import { ref } from 'vue'
 const showDemoList = process.env.NODE_ENV === 'development'
 
 const searchValue = ref('')
-
 </script>
 
 <template>
@@ -16,17 +15,16 @@ const searchValue = ref('')
       placeholder="Search for a demo..."
       autofocus
       v-model="searchValue"
-    >
+    />
     <ul v-if="showDemoList || listing">
       <li
         class="p-5 border-b-2 border-black"
-        v-for="route in $router.options.routes.filter(route => searchValue === ''? true : route.props.name.toLowerCase().includes(searchValue.toLowerCase()))"
+        v-for="route in $router.options.routes.filter(route =>
+          searchValue === '' ? true : route.props.name.toLowerCase().includes(searchValue.toLowerCase()),
+        )"
         :key="route.path"
       >
-        <router-link
+        <router-link class="block mb-2 font-medium" :to="route.path">
-          class="block mb-2 font-medium"
-          :to="route.path"
-        >
           {{ route.props.name }}
         </router-link>
 
@@ -77,9 +75,7 @@ export default {
 
   computed: {
     query() {
-      return Object.fromEntries(Object
+      return Object.fromEntries(Object.entries(this.$route.query).map(([key, value]) => [key, this.fromString(value)]))
-        .entries(this.$route.query)
-        .map(([key, value]) => [key, this.fromString(value)]))
     },
 
     listing() {

demos/preview/shiki.worker.js

@@ -9,17 +9,7 @@ async function init() {
 
   highlighter = await shiki.createHighlighter({
     themes: ['material-theme-darker'],
-    langs: [
+    langs: ['html', 'js', 'jsx', 'ts', 'tsx', 'css', 'vue-html', 'vue', 'scss'],
-      'html',
-      'js',
-      'jsx',
-      'ts',
-      'tsx',
-      'css',
-      'vue-html',
-      'vue',
-      'scss',
-    ],
   })
 
   return highlighter

demos/preview/style.css

@@ -4,92 +4,98 @@
 
 @font-face {
   font-family: 'Inter';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.19') format('woff');
 }
 @font-face {
   font-family: 'Inter';
-  font-style:  italic;
+  font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-Italic.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Italic.woff?v=3.19') format('woff');
 }
 
 @font-face {
   font-family: 'Inter';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.19') format('woff');
 }
 @font-face {
   font-family: 'Inter';
-  font-style:  italic;
+  font-style: italic;
   font-weight: 500;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-MediumItalic.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-MediumItalic.woff?v=3.19') format('woff');
 }
 
 @font-face {
   font-family: 'Inter';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-SemiBold.woff?v=3.19') format('woff');
 }
 @font-face {
   font-family: 'Inter';
-  font-style:  italic;
+  font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-SemiBoldItalic.woff?v=3.19') format('woff');
 }
 
 @font-face {
   font-family: 'Inter';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Bold.woff?v=3.19') format('woff');
 }
 @font-face {
   font-family: 'Inter';
-  font-style:  italic;
+  font-style: italic;
   font-weight: 700;
   font-display: swap;
-  src: url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+  src:
-       url("https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.19") format("woff");
+    url('https://rsms.me/inter/font-files/Inter-BoldItalic.woff2?v=3.19') format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-BoldItalic.woff?v=3.19') format('woff');
 }
 
 @font-face {
   font-family: 'JetBrains Mono';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 400;
   font-display: swap;
   src:
-    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2") format("woff2"),
+    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
-    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff") format("woff"),
+    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff') format('woff');
-  ;
 }
 
 @font-face {
   font-family: 'JetBrains Mono';
-  font-style:  normal;
+  font-style: normal;
   font-weight: 700;
   font-display: swap;
   src:
-    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2") format("woff2"),
+    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2') format('woff2'),
-    url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff") format("woff"),
+    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff') format('woff');
-  ;
 }
 
 ::-webkit-scrollbar {

demos/setup/react.ts

@@ -18,21 +18,18 @@ export default function init(name: string, source: any) {
       const root = document.getElementById('app')
 
       if (root) {
-        createRoot(root)
+        createRoot(root).render(React.createElement(module.default))
-          .render(React.createElement(module.default))
       }
       debug()
     })
     .catch(() => {
-      import(`../src/${demoCategory}/${demoName}/${frameworkName}/index.jsx`)
+      import(`../src/${demoCategory}/${demoName}/${frameworkName}/index.jsx`).then(module => {
-        .then(module => {
+        const root = document.getElementById('app')
-          const root = document.getElementById('app')
 
-          if (root) {
+        if (root) {
-            createRoot(root)
+          createRoot(root).render(React.createElement(module.default))
-              .render(React.createElement(module.default))
+        }
-          }
+        debug()
-          debug()
+      })
-        })
     })
 }

demos/setup/style.scss

@@ -1,22 +1,22 @@
 /* Base HTML and global element styles*/
 :root {
-  --white: #FFF;
+  --white: #fff;
-  --black: #2E2B29;
+  --black: #2e2b29;
-  --black-contrast: #110F0E;
+  --black-contrast: #110f0e;
   --gray-1: rgba(61, 37, 20, 0.05);
   --gray-2: rgba(61, 37, 20, 0.08);
   --gray-3: rgba(61, 37, 20, 0.12);
-  --gray-4: rgba(53, 38, 28, 0.30);
+  --gray-4: rgba(53, 38, 28, 0.3);
-  --gray-5: rgba(28, 25, 23, 0.60);
+  --gray-5: rgba(28, 25, 23, 0.6);
-  --green: #22C55E;
+  --green: #22c55e;
-  --purple: #6A00F5;
+  --purple: #6a00f5;
-  --purple-contrast: #5800CC;
+  --purple-contrast: #5800cc;
   --purple-light: rgba(88, 5, 255, 0.05);
-  --yellow-contrast: #FACC15;
+  --yellow-contrast: #facc15;
   --yellow: rgba(250, 204, 21, 0.4);
-  --yellow-light: #FFFAE5;
+  --yellow-light: #fffae5;
-  --red: #FF5C33;
+  --red: #ff5c33;
-  --red-light: #FFEBE5;
+  --red-light: #ffebe5;
   --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
 }
 
@@ -27,7 +27,22 @@
 }
 
 html {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
   line-height: 1.5;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -104,7 +119,7 @@ textarea {
   line-height: 1.15;
   margin: none;
   padding: 0.375rem 0.625rem;
-  transition: all 0.2s cubic-bezier(0.65,0.05,0.36,1);
+  transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
 
   &:hover {
     background-color: var(--gray-3);
@@ -150,7 +165,7 @@ select:not([disabled]) {
   cursor: pointer;
 }
 
-input[type="text"],
+input[type='text'],
 textarea {
   background-color: unset;
   border: 1px solid var(--gray-3);
@@ -166,7 +181,8 @@ textarea {
     border-color: var(--gray-4);
   }
 
-  &:focus-visible, &:focus {
+  &:focus-visible,
+  &:focus {
     border-color: var(--purple);
     outline: none;
   }
@@ -229,7 +245,7 @@ form {
     background-color: var(--purple-light);
 
     &::after {
-      content: "";
+      content: '';
       background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='28px' height='30px' viewBox='0 0 24 30' style='enable-background:new 0 0 50 50;' xml:space='preserve'><rect x='0' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0' dur='0.6s' repeatCount='indefinite'/></rect><rect x='10' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite'/></rect><rect x='20' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite'/></rect></svg>");
       background-size: cover;
       background-repeat: no-repeat;
@@ -272,13 +288,13 @@ hr {
 }
 
 kbd {
-	background-color: var(--gray-2);
+  background-color: var(--gray-2);
-	border: 1px solid var(--gray-2);
+  border: 1px solid var(--gray-2);
-	border-radius: 0.25rem;
+  border-radius: 0.25rem;
-	font-size: 0.6rem;
+  font-size: 0.6rem;
-	line-height: 1.15;
+  line-height: 1.15;
-	padding: 0.1rem 0.25rem;
+  padding: 0.1rem 0.25rem;
-	text-transform: uppercase;
+  text-transform: uppercase;
 }
 
 /* Layout and structure */
@@ -345,7 +361,7 @@ kbd {
     line-height: 1.15;
     min-height: 1.5rem;
     padding: 0 0.375rem;
-    transition: all 0.2s cubic-bezier(0.65,0.05,0.36,1);
+    transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
 
     &:has(input:checked) {
       background-color: var(--white);

demos/setup/svelte.ts

@@ -10,12 +10,11 @@ export default function init(name: string, source: any) {
 
   const [demoCategory, demoName, frameworkName] = splitName(name)
 
-  import(`../src/${demoCategory}/${demoName}/${frameworkName}/index.svelte`)
+  import(`../src/${demoCategory}/${demoName}/${frameworkName}/index.svelte`).then(Module => {
-    .then(Module => {
+    const Component = Module.default
-      const Component = Module.default
 
-      new Component({ target: document.querySelector('#app') }) // eslint-disable-line
+    new Component({ target: document.querySelector('#app') }) // eslint-disable-line
 
-      debug()
+    debug()
-    })
+  })
 }

demos/setup/vue.ts

@@ -12,14 +12,13 @@ export default function init(name: string, source: any) {
 
   const [demoCategory, demoName, frameworkName] = splitName(name)
 
-  import(`../src/${demoCategory}/${demoName}/${frameworkName}/index.vue`)
+  import(`../src/${demoCategory}/${demoName}/${frameworkName}/index.vue`).then(module => {
-    .then(module => {
+    const app = createApp(module.default)
-      const app = createApp(module.default)
 
-      if (typeof module.configureApp === 'function') {
+    if (typeof module.configureApp === 'function') {
-        module.configureApp(app)
+      module.configureApp(app)
-      }
+    }
-      app.mount('#app')
+    app.mount('#app')
-      debug()
+    debug()
-    })
+  })
 }

demos/src/Commands/Cut/React/index.jsx

@@ -13,7 +13,13 @@ const MenuBar = ({ editor }) => {
   }, [editor])
 
   const onCutToEnd = useCallback(() => {
-    editor.chain().cut({ from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos }, editor.state.doc.nodeSize - 2).run()
+    editor
+      .chain()
+      .cut(
+        { from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos },
+        editor.state.doc.nodeSize - 2,
+      )
+      .run()
   }, [editor])
 
   if (!editor) {

demos/src/Commands/Cut/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */

demos/src/Commands/InsertContent/React/index.jsx

@@ -42,13 +42,18 @@ const MenuBar = () => {
         <button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
           Insert HTML content
         </button>
-        <button data-test-id="html-content-spans" onClick={() => editor.chain().insertContent('<p><b>Hello</b> <i>World</i></p>').focus().run()}>
+        <button
+          data-test-id="html-content-spans"
+          onClick={() => editor.chain().insertContent('<p><b>Hello</b> <i>World</i></p>').focus().run()}
+        >
           Insert HTML with span tags content
         </button>
         <button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
           Insert text content
         </button>
-        <button data-test-id="image-content" onClick={insertImage}>Insert image</button>
+        <button data-test-id="image-content" onClick={insertImage}>
+          Insert image
+        </button>
       </div>
     </div>
   )
@@ -72,7 +77,5 @@ const extensions = [
 const content = ''
 
 export default () => {
-  return (
+  return <EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
-    <EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
-  )
 }

demos/src/Commands/InsertContent/React/index.spec.js

@@ -11,7 +11,10 @@ context('/src/Commands/InsertContent/React/', () => {
     cy.get('button[data-test-id="html-content"]').click()
 
     // check if the content html is correct
-    cy.get('.tiptap').should('contain.html', '<h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/">Tiptap</a></h1><p><strong>Hello World</strong></p><p>This is a paragraph<br>with a break.</p><p>And this is some additional string content.</p>')
+    cy.get('.tiptap').should(
+      'contain.html',
+      '<h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/">Tiptap</a></h1><p><strong>Hello World</strong></p><p>This is a paragraph<br>with a break.</p><p>And this is some additional string content.</p>',
+    )
   })
 
   it('should keep spaces inbetween tags in html content', () => {
@@ -32,7 +35,10 @@ context('/src/Commands/InsertContent/React/', () => {
     cy.get('button[data-test-id="text-content"]').click()
 
     // check if the content html is correct
-    cy.get('.tiptap').should('contain.html', 'Hello World\nThis is content with a new line. Is this working?\n\nLets see if multiple new lines are inserted correctly')
+    cy.get('.tiptap').should(
+      'contain.html',
+      'Hello World\nThis is content with a new line. Is this working?\n\nLets see if multiple new lines are inserted correctly',
+    )
   })
 
   it('should keep newlines in pre tag', () => {
@@ -86,7 +92,9 @@ context('/src/Commands/InsertContent/React/', () => {
 
   it('should remove newlines and tabs when parseOptions.preserveWhitespace=false', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.insertContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n', { parseOptions: { preserveWhitespace: false } })
+      editor.commands.insertContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n', {
+        parseOptions: { preserveWhitespace: false },
+      })
       cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
     })
   })
@@ -96,7 +104,10 @@ context('/src/Commands/InsertContent/React/', () => {
       editor.commands.insertContent('<p>HelloWorld</p>')
       editor.commands.setTextSelection(6)
       editor.commands.insertContent('<img src="https://example.image/1" alt="This is an example" />')
-      cy.get('.tiptap').should('contain.html', '<p>Hello</p><img src="https://example.image/1" alt="This is an example" contenteditable="false" draggable="true"><p>World</p>')
+      cy.get('.tiptap').should(
+        'contain.html',
+        '<p>Hello</p><img src="https://example.image/1" alt="This is an example" contenteditable="false" draggable="true"><p>World</p>',
+      )
     })
   })
 
@@ -105,7 +116,10 @@ context('/src/Commands/InsertContent/React/', () => {
       editor.commands.insertContent('<p>HelloWorld</p>')
       editor.commands.setTextSelection(1)
       editor.commands.insertContent('<img src="https://example.image/1" alt="This is an example" />')
-      cy.get('.tiptap').should('contain.html', '<img src="https://example.image/1" alt="This is an example" contenteditable="false" draggable="true"><p>HelloWorld</p>')
+      cy.get('.tiptap').should(
+        'contain.html',
+        '<img src="https://example.image/1" alt="This is an example" contenteditable="false" draggable="true"><p>HelloWorld</p>',
+      )
     })
   })
   it('should respect editor.options.parseOptions if defined to be `false`', () => {
@@ -131,5 +145,4 @@ context('/src/Commands/InsertContent/React/', () => {
       cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello  World</strong></p>')
     })
   })
-
 })

demos/src/Commands/InsertContent/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */

demos/src/Commands/InsertContentApplyingRules/React/index.jsx

@@ -17,19 +17,11 @@ const MenuBar = () => {
     <div className="control-group">
       <div>
         <label>
-          <input
+          <input type="checkbox" checked={useInputRules} onChange={() => setUseInputRules(prev => !prev)} />
-            type="checkbox"
-            checked={useInputRules}
-            onChange={() => setUseInputRules(prev => !prev)}
-          />
           Apply input rules
         </label>
         <label>
-          <input
+          <input type="checkbox" checked={usePasteRules} onChange={() => setUsePasteRules(prev => !prev)} />
-            type="checkbox"
-            checked={usePasteRules}
-            onChange={() => setUsePasteRules(prev => !prev)}
-          />
           Apply paste rules
         </label>
       </div>
@@ -163,14 +155,10 @@ const MenuBar = () => {
   )
 }
 
-const extensions = [
+const extensions = [StarterKit]
-  StarterKit,
-]
 
 const content = ''
 
 export default () => {
-  return (
+  return <EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
-    <EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
-  )
 }

demos/src/Commands/InsertContentApplyingRules/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */

demos/src/Commands/SetContent/React/index.jsx

@@ -25,7 +25,5 @@ const extensions = [
 const content = ''
 
 export default () => {
-  return (
+  return <EditorProvider extensions={extensions} content={content}></EditorProvider>
-    <EditorProvider extensions={extensions} content={content}></EditorProvider>
-  )
 }

demos/src/Commands/SetContent/React/index.spec.js

@@ -30,7 +30,10 @@ context('/src/Commands/SetContent/React/', () => {
 
   it('should insert a Prosemirror Fragment as content', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent(editor.schema.node('doc', null, editor.schema.node('paragraph', null, editor.schema.text('Hello World.'))).content)
+      editor.commands.setContent(
+        editor.schema.node('doc', null, editor.schema.node('paragraph', null, editor.schema.text('Hello World.')))
+          .content,
+      )
       cy.get('.tiptap').should('contain.html', '<p>Hello World.</p>')
     })
   })
@@ -57,8 +60,13 @@ context('/src/Commands/SetContent/React/', () => {
 
   it('should insert more complex html content', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent('<h1>Welcome to Tiptap</h1><p>This is a paragraph.</p><ul><li><p>List Item A</p></li><li><p>List Item B</p><ul><li><p>Subchild</p></li></ul></li></ul>')
+      editor.commands.setContent(
-      cy.get('.tiptap').should('contain.html', '<h1>Welcome to Tiptap</h1><p>This is a paragraph.</p><ul><li><p>List Item A</p></li><li><p>List Item B</p><ul><li><p>Subchild</p></li></ul></li></ul>')
+        '<h1>Welcome to Tiptap</h1><p>This is a paragraph.</p><ul><li><p>List Item A</p></li><li><p>List Item B</p><ul><li><p>Subchild</p></li></ul></li></ul>',
+      )
+      cy.get('.tiptap').should(
+        'contain.html',
+        '<h1>Welcome to Tiptap</h1><p>This is a paragraph.</p><ul><li><p>List Item A</p></li><li><p>List Item B</p><ul><li><p>Subchild</p></li></ul></li></ul>',
+      )
     })
   })
 
@@ -94,7 +102,10 @@ context('/src/Commands/SetContent/React/', () => {
   it('should insert mentions', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       editor.commands.setContent('<p><span data-type="mention" data-id="1" data-label="John Doe">@John Doe</span></p>')
-      cy.get('.tiptap').should('contain.html', '<span data-type="mention" data-id="1" data-label="John Doe" contenteditable="false">@John Doe</span>')
+      cy.get('.tiptap').should(
+        'contain.html',
+        '<span data-type="mention" data-id="1" data-label="John Doe" contenteditable="false">@John Doe</span>',
+      )
     })
   })
 
@@ -109,7 +120,9 @@ context('/src/Commands/SetContent/React/', () => {
   // This exists in insertContentAt as well
   it('should keep newlines and tabs between html fragments when preserveWhitespace = full', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent('<h1>Tiptap</h1>\n\t<p><strong>Hello World</strong></p>', false, { preserveWhitespace: 'full' })
+      editor.commands.setContent('<h1>Tiptap</h1>\n\t<p><strong>Hello World</strong></p>', false, {
+        preserveWhitespace: 'full',
+      })
       cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p>\n\t</p><p><strong>Hello World</strong></p>')
     })
   })
@@ -174,7 +187,9 @@ context('/src/Commands/SetContent/React/', () => {
 
   it('should remove newlines and tabs when parseOptions.preserveWhitespace=false', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
-      editor.commands.setContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n', false, { preserveWhitespace: false })
+      editor.commands.setContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n', false, {
+        preserveWhitespace: false,
+      })
       cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
     })
   })

demos/src/Commands/SetContent/React/styles.scss

@@ -24,8 +24,8 @@
   }
 
   pre {
-    background: #0D0D0D;
+    background: #0d0d0d;
-    color: #FFF;
+    color: #fff;
     font-family: 'JetBrainsMono', monospace;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
@@ -45,12 +45,12 @@
 
   blockquote {
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
     margin: 2rem 0;
   }
 }

demos/src/Demos/CollaborationSplitPane/React/Editor.jsx

@@ -78,9 +78,7 @@ const getInitialUser = () => {
   }
 }
 
-const Editor = ({
+const Editor = ({ ydoc, provider, room }) => {
-  ydoc, provider, room,
-}) => {
   const [status, setStatus] = useState('connecting')
   const [currentUser, setCurrentUser] = useState(getInitialUser)
 
@@ -187,15 +185,12 @@ const Editor = ({
 
       <EditorContent editor={editor} className="main-group" />
 
-      <div
+      <div className="collab-status-group" data-state={status === 'connected' ? 'online' : 'offline'}>
-        className="collab-status-group"
-        data-state={status === 'connected' ? 'online' : 'offline'}
-      >
         <label>
           {status === 'connected'
             ? `${editor.storage.collaborationCursor.users.length} user${
-              editor.storage.collaborationCursor.users.length === 1 ? '' : 's'
+                editor.storage.collaborationCursor.users.length === 1 ? '' : 's'
-            } online in ${room}`
+              } online in ${room}`
             : 'offline'}
         </label>
         <button style={{ '--color': currentUser.color }} onClick={setName}>

demos/src/Demos/CollaborationSplitPane/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */
@@ -91,14 +91,14 @@
 
   /* Highlight specific styles */
   mark {
-    background-color: #FAF594;
+    background-color: #faf594;
     border-radius: 0.4rem;
     box-decoration-break: clone;
     padding: 0.1rem 0.3rem;
   }
 
   /* Task list specific styles */
-  ul[data-type="taskList"] {
+  ul[data-type='taskList'] {
     list-style: none;
     margin-left: 0;
     padding: 0;
@@ -118,11 +118,11 @@
       }
     }
 
-    input[type="checkbox"] {
+    input[type='checkbox'] {
       cursor: pointer;
     }
 
-    ul[data-type="taskList"] {
+    ul[data-type='taskList'] {
       margin: 0;
     }
   }
@@ -170,7 +170,7 @@
 }
 
 /* Column-half */
-body { 
+body {
   overflow: hidden;
 }
 
@@ -205,11 +205,11 @@ body {
   flex-direction: row;
   font-size: 0.75rem;
   font-weight: 400;
-	gap: 1rem;
+  gap: 1rem;
-	justify-content: space-between;
+  justify-content: space-between;
   padding: 0.375rem 0.5rem 0.375rem 1rem;
   position: sticky;
-	width: 100%;
+  width: 100%;
   z-index: 100;
 
   button {
@@ -230,13 +230,13 @@ body {
     &::before {
       background-color: var(--color);
       border-radius: 0.375rem;
-      content: "";
+      content: '';
       height: 100%;
       left: 0;
       opacity: 0.5;
       position: absolute;
       top: 0;
-      transition: all 0.2s cubic-bezier(0.65,0.05,0.36,1);
+      transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
       width: 100%;
       z-index: -1;
     }
@@ -256,13 +256,13 @@ body {
 
     &::before {
       border-radius: 50%;
-      content: " ";
+      content: ' ';
       height: 0.35rem;
       width: 0.35rem;
     }
   }
 
-  &[data-state="online"] {
+  &[data-state='online'] {
     label {
       &::before {
         background-color: var(--green);
@@ -270,7 +270,7 @@ body {
     }
   }
 
-  &[data-state="offline"] {
+  &[data-state='offline'] {
     label {
       &::before {
         background-color: var(--red);

demos/src/Demos/SingleRoomCollab/React/index.jsx

@@ -6,10 +6,7 @@ import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React, {
+import React, { useCallback, useEffect, useState } from 'react'
-  useCallback, useEffect,
-  useState,
-} from 'react'
 import * as Y from 'yjs'
 
 const room = 'room-1'
@@ -55,10 +52,12 @@ const websocketProvider = new TiptapCollabProvider({
 })
 
 const getInitialUser = () => {
-  return JSON.parse(localStorage.getItem('currentUser')) || {
+  return (
-    name: getRandomName(),
+    JSON.parse(localStorage.getItem('currentUser')) || {
-    color: getRandomColor(),
+      name: getRandomName(),
-  }
+      color: getRandomColor(),
+    }
+  )
 }
 
 export default () => {

demos/src/Demos/SingleRoomCollab/React/styles.scss

@@ -27,9 +27,9 @@
     background: #0d0d0d;
     border-radius: 0.5rem;
     color: #fff;
-    font-family: "JetBrainsMono", monospace;
+    font-family: 'JetBrainsMono', monospace;
     padding: 0.75rem 1rem;
-    
+
     code {
       background: none;
       color: inherit;
@@ -62,7 +62,7 @@
     margin: 2rem 0;
   }
 
-  ul[data-type="taskList"] {
+  ul[data-type='taskList'] {
     list-style: none;
     padding: 0;
 
@@ -127,7 +127,7 @@
     &::before {
       background: rgba(#0d0d0d, 0.5);
       border-radius: 50%;
-      content: " ";
+      content: ' ';
       display: inline-block;
       flex: 0 0 auto;
       height: 0.5rem;

demos/src/Examples/AutolinkValidation/React/index.jsx

@@ -44,15 +44,13 @@ export default () => {
 
     // empty
     if (url === '') {
-      editor.chain().focus().extendMarkRange('link').unsetLink()
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
-        .run()
 
       return
     }
 
     // update link
-    editor.chain().focus().extendMarkRange('link').setLink({ href: url })
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
-      .run()
   }, [editor])
 
   if (!editor) {
@@ -63,11 +61,7 @@ export default () => {
     <>
       <div className="control-group">
         <div className="button-group">
-          <button
+          <button onClick={setLink} className={editorState.isLink ? 'is-active' : ''} data-testid="setLink">
-            onClick={setLink}
-            className={editorState.isLink ? 'is-active' : ''}
-            data-testid="setLink"
-          >
             Set link
           </button>
           <button

demos/src/Examples/AutolinkValidation/React/index.spec.js

@@ -42,61 +42,39 @@ context('/src/Examples/AutolinkValidation/React/', () => {
     cy.get('.tiptap').type('https://tiptap.dev {home}')
     cy.get('.tiptap').should('have.text', 'https://tiptap.dev ')
     cy.get('[data-testid=unsetLink]').click()
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 0)
-      .find('a')
-      .should('have.length', 0)
     cy.get('.tiptap').type('{end}http://www.example.com/ ')
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 1).should('have.attr', 'href', 'http://www.example.com/')
-      .find('a')
-      .should('have.length', 1)
-      .should('have.attr', 'href', 'http://www.example.com/')
   })
 
   it('should not relink unset links after hitting next paragraph', () => {
     cy.get('.tiptap').type('https://tiptap.dev {home}')
     cy.get('.tiptap').should('have.text', 'https://tiptap.dev ')
     cy.get('[data-testid=unsetLink]').click()
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 0)
-      .find('a')
-      .should('have.length', 0)
     cy.get('.tiptap').type('{end}typing other text should prevent the link from relinking when hitting enter{enter}')
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 0)
-      .find('a')
-      .should('have.length', 0)
   })
 
   it('should not relink unset links after modifying', () => {
     cy.get('.tiptap').type('https://tiptap.dev {home}')
     cy.get('.tiptap').should('have.text', 'https://tiptap.dev ')
     cy.get('[data-testid=unsetLink]').click()
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 0)
-      .find('a')
+    cy.get('.tiptap').type('{home}').type('{rightArrow}'.repeat('https://'.length)).type('blah')
-      .should('have.length', 0)
-    cy.get('.tiptap')
-      .type('{home}')
-      .type('{rightArrow}'.repeat('https://'.length))
-      .type('blah')
     cy.get('.tiptap').should('have.text', 'https://blahtiptap.dev ')
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 0)
-      .find('a')
-      .should('have.length', 0)
   })
 
   it('should autolink after hitting enter (new paragraph)', () => {
     cy.get('.tiptap').type('https://tiptap.dev{enter}')
     cy.get('.tiptap').should('have.text', 'https://tiptap.dev')
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 1).should('have.attr', 'href', 'https://tiptap.dev')
-      .find('a')
-      .should('have.length', 1)
-      .should('have.attr', 'href', 'https://tiptap.dev')
   })
 
   it('should autolink after hitting shift-enter (hardbreak)', () => {
     cy.get('.tiptap').type('https://tiptap.dev{shift+enter}')
     cy.get('.tiptap').should('have.text', 'https://tiptap.dev')
-    cy.get('.tiptap')
+    cy.get('.tiptap').find('a').should('have.length', 1).should('have.attr', 'href', 'https://tiptap.dev')
-      .find('a')
-      .should('have.length', 1)
-      .should('have.attr', 'href', 'https://tiptap.dev')
   })
 })

demos/src/Examples/AutolinkValidation/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */

demos/src/Examples/AutolinkValidation/Vue/index.vue

@@ -70,8 +70,8 @@ export default {
   }
 
   pre {
-    background: #0D0D0D;
+    background: #0d0d0d;
-    color: #FFF;
+    color: #fff;
     font-family: 'JetBrainsMono', monospace;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
@@ -95,7 +95,7 @@ export default {
 
   blockquote {
     padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
   }
 }
 </style>

demos/src/Examples/Book/React/index.jsx

@@ -38,12 +38,8 @@ const MenuBar = ({ editor }) => {
         >
           Code
         </button>
-        <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+        <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>Clear marks</button>
-          Clear marks
+        <button onClick={() => editor.chain().focus().clearNodes().run()}>Clear nodes</button>
-        </button>
-        <button onClick={() => editor.chain().focus().clearNodes().run()}>
-          Clear nodes
-        </button>
         <button
           onClick={() => editor.chain().focus().setParagraph().run()}
           className={editor.isActive('paragraph') ? 'is-active' : ''}
@@ -110,18 +106,10 @@ const MenuBar = ({ editor }) => {
         >
           Blockquote
         </button>
-        <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+        <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>Horizontal rule</button>
-          Horizontal rule
+        <button onClick={() => editor.chain().focus().setHardBreak().run()}>Hard break</button>
-        </button>
+        <button onClick={() => editor.chain().focus().undo().run()}>Undo</button>
-        <button onClick={() => editor.chain().focus().setHardBreak().run()}>
+        <button onClick={() => editor.chain().focus().redo().run()}>Redo</button>
-          Hard break
-        </button>
-        <button onClick={() => editor.chain().focus().undo().run()}>
-          Undo
-        </button>
-        <button onClick={() => editor.chain().focus().redo().run()}>
-          Redo
-        </button>
       </div>
     </div>
   )
@@ -129,9 +117,7 @@ const MenuBar = ({ editor }) => {
 
 export default () => {
   const editor = useEditor({
-    extensions: [
+    extensions: [StarterKit],
-      StarterKit,
-    ],
     content,
     editorProps: {
       attributes: {

demos/src/Examples/Book/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */

demos/src/Examples/Book/Vue/index.vue

@@ -5,66 +5,93 @@
         <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
           Bold
         </button>
-        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        <button
+          @click="editor.chain().focus().toggleItalic().run()"
+          :class="{ 'is-active': editor.isActive('italic') }"
+        >
           Italic
         </button>
-        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+        <button
+          @click="editor.chain().focus().toggleStrike().run()"
+          :class="{ 'is-active': editor.isActive('strike') }"
+        >
           Strike
         </button>
         <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
           Code
         </button>
-        <button @click="editor.chain().focus().unsetAllMarks().run()">
+        <button @click="editor.chain().focus().unsetAllMarks().run()">Clear marks</button>
-          Clear marks
+        <button @click="editor.chain().focus().clearNodes().run()">Clear nodes</button>
-        </button>
+        <button
-        <button @click="editor.chain().focus().clearNodes().run()">
+          @click="editor.chain().focus().setParagraph().run()"
-          Clear nodes
+          :class="{ 'is-active': editor.isActive('paragraph') }"
-        </button>
+        >
-        <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
           Paragraph
         </button>
-        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+        >
           H1
         </button>
-        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+        >
           H2
         </button>
-        <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+        >
           H3
         </button>
-        <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+        >
           H4
         </button>
-        <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+        >
           H5
         </button>
-        <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+        <button
+          @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
+          :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+        >
           H6
         </button>
-        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+        <button
+          @click="editor.chain().focus().toggleBulletList().run()"
+          :class="{ 'is-active': editor.isActive('bulletList') }"
+        >
           Bullet list
         </button>
-        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+        <button
+          @click="editor.chain().focus().toggleOrderedList().run()"
+          :class="{ 'is-active': editor.isActive('orderedList') }"
+        >
           Ordered list
         </button>
-        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+        <button
+          @click="editor.chain().focus().toggleCodeBlock().run()"
+          :class="{ 'is-active': editor.isActive('codeBlock') }"
+        >
           Code block
         </button>
-        <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+        <button
+          @click="editor.chain().focus().toggleBlockquote().run()"
+          :class="{ 'is-active': editor.isActive('blockquote') }"
+        >
           Blockquote
         </button>
-        <button @click="editor.chain().focus().setHorizontalRule().run()">
+        <button @click="editor.chain().focus().setHorizontalRule().run()">Horizontal rule</button>
-          Horizontal rule
+        <button @click="editor.chain().focus().setHardBreak().run()">Hard break</button>
-        </button>
+        <button @click="editor.chain().focus().undo().run()">Undo</button>
-        <button @click="editor.chain().focus().setHardBreak().run()">
+        <button @click="editor.chain().focus().redo().run()">Redo</button>
-          Hard break
-        </button>
-        <button @click="editor.chain().focus().undo().run()">
-          Undo
-        </button>
-        <button @click="editor.chain().focus().redo().run()">
-          Redo
-        </button>
       </div>
     </div>
     <editor-content :editor="editor" />
@@ -90,9 +117,7 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      extensions: [
+      extensions: [StarterKit],
-        StarterKit,
-      ],
       content,
       editorProps: {
         attributes: {

demos/src/Examples/CSSModules/React/index.jsx

@@ -37,12 +37,8 @@ const MenuBar = ({ editor }) => {
       >
         Code
       </button>
-      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>Clear marks</button>
-        Clear marks
+      <button onClick={() => editor.chain().focus().clearNodes().run()}>Clear nodes</button>
-      </button>
-      <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        Clear nodes
-      </button>
       <button
         onClick={() => editor.chain().focus().setParagraph().run()}
         className={editor.isActive('paragraph') ? 'is-active' : ''}
@@ -109,27 +105,17 @@ const MenuBar = ({ editor }) => {
       >
         Blockquote
       </button>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>Horizontal rule</button>
-        Horizontal rule
+      <button onClick={() => editor.chain().focus().setHardBreak().run()}>Hard break</button>
-      </button>
+      <button onClick={() => editor.chain().focus().undo().run()}>Undo</button>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
+      <button onClick={() => editor.chain().focus().redo().run()}>Redo</button>
-        Hard break
-      </button>
-      <button onClick={() => editor.chain().focus().undo().run()}>
-        Undo
-      </button>
-      <button onClick={() => editor.chain().focus().redo().run()}>
-        Redo
-      </button>
     </div>
   )
 }
 
 export default () => {
   const editor = useEditor({
-    extensions: [
+    extensions: [StarterKit],
-      StarterKit,
-    ],
     content: `
       <h2>
         Hi there,

demos/src/Examples/CSSModules/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */

demos/src/Examples/CSSModules/Vue/index.vue

@@ -12,57 +12,75 @@
     <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
       Code
     </button>
-    <button @click="editor.chain().focus().unsetAllMarks().run()">
+    <button @click="editor.chain().focus().unsetAllMarks().run()">Clear marks</button>
-      Clear marks
+    <button @click="editor.chain().focus().clearNodes().run()">Clear nodes</button>
-    </button>
-    <button @click="editor.chain().focus().clearNodes().run()">
-      Clear nodes
-    </button>
     <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
       Paragraph
     </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+    <button
+      @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+      :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+    >
       H1
     </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+    <button
+      @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+      :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+    >
       H2
     </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+    <button
+      @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+      :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+    >
       H3
     </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+    <button
+      @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+      :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+    >
       H4
     </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+    <button
+      @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
+      :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
+    >
       H5
     </button>
-    <button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+    <button
+      @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
+      :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
+    >
       H6
     </button>
-    <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+    <button
+      @click="editor.chain().focus().toggleBulletList().run()"
+      :class="{ 'is-active': editor.isActive('bulletList') }"
+    >
       Bullet list
     </button>
-    <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+    <button
+      @click="editor.chain().focus().toggleOrderedList().run()"
+      :class="{ 'is-active': editor.isActive('orderedList') }"
+    >
       Ordered list
     </button>
-    <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+    <button
+      @click="editor.chain().focus().toggleCodeBlock().run()"
+      :class="{ 'is-active': editor.isActive('codeBlock') }"
+    >
       Code block
     </button>
-    <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+    <button
+      @click="editor.chain().focus().toggleBlockquote().run()"
+      :class="{ 'is-active': editor.isActive('blockquote') }"
+    >
       Blockquote
     </button>
-    <button @click="editor.chain().focus().setHorizontalRule().run()">
+    <button @click="editor.chain().focus().setHorizontalRule().run()">Horizontal rule</button>
-      Horizontal rule
+    <button @click="editor.chain().focus().setHardBreak().run()">Hard break</button>
-    </button>
+    <button @click="editor.chain().focus().undo().run()">Undo</button>
-    <button @click="editor.chain().focus().setHardBreak().run()">
+    <button @click="editor.chain().focus().redo().run()">Redo</button>
-      Hard break
-    </button>
-    <button @click="editor.chain().focus().undo().run()">
-      Undo
-    </button>
-    <button @click="editor.chain().focus().redo().run()">
-      Redo
-    </button>
   </div>
   <editor-content :editor="editor" />
 </template>
@@ -87,9 +105,7 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      extensions: [
+      extensions: [StarterKit],
-        StarterKit,
-      ],
       content: `
         <h1 class="test">
           This is a red headline

demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.jsx

@@ -3,15 +3,21 @@ import './CodeBlockComponent.scss'
 import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
 import React from 'react'
 
-export default ({ node: { attrs: { language: defaultLanguage } }, updateAttributes, extension }) => (
+export default ({
+  node: {
+    attrs: { language: defaultLanguage },
+  },
+  updateAttributes,
+  extension,
+}) => (
   <NodeViewWrapper className="code-block">
-    <select contentEditable={false} defaultValue={defaultLanguage} onChange={event => updateAttributes({ language: event.target.value })}>
+    <select
-      <option value="null">
+      contentEditable={false}
-        auto
+      defaultValue={defaultLanguage}
-      </option>
+      onChange={event => updateAttributes({ language: event.target.value })}
-      <option disabled>
+    >
-        —
+      <option value="null">auto</option>
-      </option>
+      <option disabled>—</option>
       {extension.options.lowlight.listLanguages().map((lang, index) => (
         <option key={index} value={lang}>
           {lang}

demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss

@@ -1,7 +1,7 @@
 .tiptap {
   .code-block {
     position: relative;
-  
+
     select {
       position: absolute;
       background-color: var(--white);

demos/src/Examples/CodeBlockLanguage/React/index.jsx

@@ -33,7 +33,10 @@ const MenuBar = ({ editor }) => {
   return (
     <div className="control-group">
       <div className="button-group">
-        <button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}>
+        <button
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          className={editor.isActive('codeBlock') ? 'is-active' : ''}
+        >
           Toggle code block
         </button>
       </div>
@@ -47,13 +50,11 @@ export default () => {
       Document,
       Paragraph,
       Text,
-      CodeBlockLowlight
+      CodeBlockLowlight.extend({
-        .extend({
+        addNodeView() {
-          addNodeView() {
+          return ReactNodeViewRenderer(CodeBlockComponent)
-            return ReactNodeViewRenderer(CodeBlockComponent)
+        },
-          },
+      }).configure({ lowlight }),
-        })
-        .configure({ lowlight }),
     ],
     content: `
         <p>

demos/src/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue

@@ -1,12 +1,8 @@
 <template>
   <node-view-wrapper class="code-block">
     <select contenteditable="false" v-model="selectedLanguage">
-      <option :value="null">
+      <option :value="null">auto</option>
-        auto
+      <option disabled>—</option>
-      </option>
-      <option disabled>
-        —
-      </option>
       <option v-for="(language, index) in languages" :value="language" :key="index">
         {{ language }}
       </option>

demos/src/Examples/CodeBlockLanguage/Vue/index.vue

@@ -2,7 +2,10 @@
   <div v-if="editor" class="container">
     <div class="control-group">
       <div class="button-">
-        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+        <button
+          @click="editor.chain().focus().toggleCodeBlock().run()"
+          :class="{ 'is-active': editor.isActive('codeBlock') }"
+        >
           Toggle code block
         </button>
       </div>
@@ -52,13 +55,11 @@ export default {
         Document,
         Paragraph,
         Text,
-        CodeBlockLowlight
+        CodeBlockLowlight.extend({
-          .extend({
+          addNodeView() {
-            addNodeView() {
+            return VueNodeViewRenderer(CodeBlockComponent)
-              return VueNodeViewRenderer(CodeBlockComponent)
+          },
-            },
+        }).configure({ lowlight }),
-          })
-          .configure({ lowlight }),
       ],
       content: `
         <p>

demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx

@@ -106,8 +106,7 @@ export default ({ editor }) => {
     {
       icon: 'format-clear',
       title: 'Clear format',
-      action: () => editor.chain().focus().clearNodes().unsetAllMarks()
+      action: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
-        .run(),
     },
     {
       type: 'divider',

demos/src/Examples/CollaborativeEditing/React/MenuItem.jsx

@@ -3,14 +3,8 @@ import './MenuItem.scss'
 import React from 'react'
 import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
 
-export default ({
+export default ({ icon, title, action, isActive = null }) => (
-  icon, title, action, isActive = null,
+  <button className={`menu-item${isActive && isActive() ? ' is-active' : ''}`} onClick={action} title={title}>
-}) => (
-  <button
-    className={`menu-item${isActive && isActive() ? ' is-active' : ''}`}
-    onClick={action}
-    title={title}
-  >
     <svg className="remix">
       <use xlinkHref={`${remixiconUrl}#ri-${icon}`} />
     </svg>

demos/src/Examples/CollaborativeEditing/React/index.jsx

@@ -9,10 +9,7 @@ import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React, {
+import React, { useCallback, useEffect, useState } from 'react'
-  useCallback, useEffect,
-  useState,
-} from 'react'
 import * as Y from 'yjs'
 
 import { variables } from '../../../variables.js'
@@ -67,10 +64,12 @@ const websocketProvider = new TiptapCollabProvider({
 })
 
 const getInitialUser = () => {
-  return JSON.parse(localStorage.getItem('currentUser')) || {
+  return (
-    name: getRandomName(),
+    JSON.parse(localStorage.getItem('currentUser')) || {
-    color: getRandomColor(),
+      name: getRandomName(),
-  }
+      color: getRandomColor(),
+    }
+  )
 }
 
 export default () => {

demos/src/Examples/CollaborativeEditing/React/styles.scss

@@ -27,9 +27,9 @@
     background: #0d0d0d;
     border-radius: 0.5rem;
     color: #fff;
-    font-family: "JetBrainsMono", monospace;
+    font-family: 'JetBrainsMono', monospace;
     padding: 0.75rem 1rem;
-    
+
     code {
       background: none;
       color: inherit;
@@ -62,7 +62,7 @@
     margin: 2rem 0;
   }
 
-  ul[data-type="taskList"] {
+  ul[data-type='taskList'] {
     list-style: none;
     padding: 0;
 
@@ -135,7 +135,7 @@
     &::before {
       background: rgba(#0d0d0d, 0.5);
       border-radius: 50%;
-      content: " ";
+      content: ' ';
       display: inline-block;
       flex: 0 0 auto;
       height: 0.5rem;

demos/src/Examples/CollaborativeEditing/Vue/MenuBar.vue

@@ -125,11 +125,7 @@ export default {
         {
           icon: 'format-clear',
           title: 'Clear format',
-          action: () => this.editor.chain()
+          action: () => this.editor.chain().focus().clearNodes().unsetAllMarks().run(),
-            .focus()
-            .clearNodes()
-            .unsetAllMarks()
-            .run(),
         },
         {
           type: 'divider',

demos/src/Examples/CollaborativeEditing/Vue/MenuItem.vue

@@ -1,10 +1,5 @@
 <template>
-  <button
+  <button class="menu-item" :class="{ 'is-active': isActive ? isActive() : null }" @click="action" :title="title">
-    class="menu-item"
-    :class="{ 'is-active': isActive ? isActive(): null }"
-    @click="action"
-    :title="title"
-  >
     <svg class="remix">
       <use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
     </svg>

demos/src/Examples/CollaborativeEditing/Vue/index.vue

@@ -5,11 +5,12 @@
     <div class="editor__footer">
       <div :class="`editor__status editor__status--${status}`">
         <template v-if="status === 'connected'">
-          {{ editor.storage.collaborationCursor.users.length }} user{{ editor.storage.collaborationCursor.users.length === 1 ? '' : 's' }} online in {{ room }}
+          {{ editor.storage.collaborationCursor.users.length }} user{{
-        </template>
+            editor.storage.collaborationCursor.users.length === 1 ? '' : 's'
-        <template v-else>
+          }}
-          offline
+          online in {{ room }}
         </template>
+        <template v-else> offline </template>
       </div>
       <div class="editor__name">
         <button @click="setName">
@@ -103,9 +104,7 @@ export default {
 
   methods: {
     setName() {
-      const name = (window.prompt('Name') || '')
+      const name = (window.prompt('Name') || '').trim().substring(0, 32)
-        .trim()
-        .substring(0, 32)
 
       if (name) {
         return this.updateCurrentUser({
@@ -122,20 +121,36 @@ export default {
     },
 
     getRandomColor() {
-      return getRandomElement([
+      return getRandomElement(['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D'])
-        '#958DF1',
-        '#F98181',
-        '#FBBC88',
-        '#FAF594',
-        '#70CFF8',
-        '#94FADB',
-        '#B9F18D',
-      ])
     },
 
     getRandomName() {
       return getRandomElement([
-        'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
+        'Lea Thompson',
+        'Cyndi Lauper',
+        'Tom Cruise',
+        'Madonna',
+        'Jerry Hall',
+        'Joan Collins',
+        'Winona Ryder',
+        'Christina Applegate',
+        'Alyssa Milano',
+        'Molly Ringwald',
+        'Ally Sheedy',
+        'Debbie Harry',
+        'Olivia Newton-John',
+        'Elton John',
+        'Michael J. Fox',
+        'Axl Rose',
+        'Emilio Estevez',
+        'Ralph Macchio',
+        'Rob Lowe',
+        'Jennifer Grey',
+        'Mickey Rourke',
+        'John Cusack',
+        'Matthew Broderick',
+        'Justine Bateman',
+        'Lisa Bonet',
       ])
     },
   },
@@ -149,10 +164,10 @@ export default {
 
 <style lang="scss">
 .editor {
-  background-color: #FFF;
+  background-color: #fff;
-  border: 3px solid #0D0D0D;
+  border: 3px solid #0d0d0d;
   border-radius: 0.75rem;
-  color: #0D0D0D;
+  color: #0d0d0d;
   display: flex;
   flex-direction: column;
   max-height: 26rem;
@@ -179,8 +194,8 @@ export default {
 
   &__footer {
     align-items: center;
-    border-top: 3px solid #0D0D0D;
+    border-top: 3px solid #0d0d0d;
-    color: #0D0D0D;
+    color: #0d0d0d;
     display: flex;
     flex: 0 0 auto;
     flex-wrap: wrap;
@@ -198,7 +213,7 @@ export default {
     display: flex;
 
     &::before {
-      background: rgba(#0D0D0D, 0.5);
+      background: rgba(#0d0d0d, 0.5);
       border-radius: 50%;
       content: ' ';
       display: inline-block;
@@ -213,7 +228,7 @@ export default {
     }
 
     &--connected::before {
-      background: #B9F18D;
+      background: #b9f18d;
     }
   }
 
@@ -222,15 +237,15 @@ export default {
       background: none;
       border: none;
       border-radius: 0.4rem;
-      color: #0D0D0D;
+      color: #0d0d0d;
       font: inherit;
       font-size: 12px;
       font-weight: 600;
       padding: 0.25rem 0.5rem;
 
       &:hover {
-        background-color: #0D0D0D;
+        background-color: #0d0d0d;
-        color: #FFF;
+        color: #fff;
       }
     }
   }
@@ -238,8 +253,8 @@ export default {
 
 /* Give a remote user a caret */
 .collaboration-cursor__caret {
-  border-left: 1px solid #0D0D0D;
+  border-left: 1px solid #0d0d0d;
-  border-right: 1px solid #0D0D0D;
+  border-right: 1px solid #0d0d0d;
   margin-left: -1px;
   margin-right: -1px;
   pointer-events: none;
@@ -250,7 +265,7 @@ export default {
 /* Render the username above the caret */
 .collaboration-cursor__label {
   border-radius: 3px 3px 3px 0;
-  color: #0D0D0D;
+  color: #0d0d0d;
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
@@ -289,9 +304,9 @@ export default {
   }
 
   pre {
-    background: #0D0D0D;
+    background: #0d0d0d;
     border-radius: 0.5rem;
-    color: #FFF;
+    color: #fff;
     font-family: 'JetBrainsMono', monospace;
     padding: 0.75rem 1rem;
 
@@ -304,7 +319,7 @@ export default {
   }
 
   mark {
-    background-color: #FAF594;
+    background-color: #faf594;
   }
 
   img {
@@ -317,17 +332,17 @@ export default {
   }
 
   blockquote {
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
+    border-left: 2px solid rgba(#0d0d0d, 0.1);
     padding-left: 1rem;
   }
 
   hr {
     border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
     margin: 2rem 0;
   }
 
-  ul[data-type="taskList"] {
+  ul[data-type='taskList'] {
     list-style: none;
     padding: 0;
 

demos/src/Examples/Community/React/MentionList.jsx

@@ -1,11 +1,6 @@
 import './MentionList.scss'
 
-import React, {
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from 'react'
 
 export const MentionList = forwardRef((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(0)
@@ -19,7 +14,7 @@ export const MentionList = forwardRef((props, ref) => {
   }
 
   const upHandler = () => {
-    setSelectedIndex(((selectedIndex + props.items.length) - 1) % props.items.length)
+    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length)
   }
 
   const downHandler = () => {
@@ -55,8 +50,8 @@ export const MentionList = forwardRef((props, ref) => {
 
   return (
     <div className="dropdown-menu">
-      {props.items.length
+      {props.items.length ? (
-        ? props.items.map((item, index) => (
+        props.items.map((item, index) => (
           <button
             className={index === selectedIndex ? 'is-selected' : ''}
             key={index}
@@ -65,8 +60,9 @@ export const MentionList = forwardRef((props, ref) => {
             {item}
           </button>
         ))
-        : <div className="item">No result</div>
+      ) : (
-      }
+        <div className="item">No result</div>
+      )}
     </div>
   )
 })

demos/src/Examples/Community/React/MentionList.scss

@@ -18,8 +18,8 @@
     gap: 0.25rem;
     text-align: left;
     width: 100%;
-  
+
-    &:hover, 
+    &:hover,
     &:hover.is-selected {
       background-color: var(--gray-3);
     }

demos/src/Examples/Community/React/index.jsx

@@ -44,26 +44,17 @@ export default () => {
     },
   })
 
-  const percentage = editor
+  const percentage = editor ? Math.round((100 / limit) * characterCount) : 0
-    ? Math.round((100 / limit) * characterCount)
-    : 0
 
   return (
     <>
       <EditorContent editor={editor} />
-      {editor
+      {editor && (
-        && <div className={`character-count ${editor.storage.characterCount.characters() === limit ? 'character-count--warning' : ''}`}>
+        <div
-          <svg
+          className={`character-count ${editor.storage.characterCount.characters() === limit ? 'character-count--warning' : ''}`}
-            height="20"
+        >
-            width="20"
+          <svg height="20" width="20" viewBox="0 0 20 20">
-            viewBox="0 0 20 20"
+            <circle r="10" cx="10" cy="10" fill="#e9ecef" />
-          >
-            <circle
-              r="10"
-              cx="10"
-              cy="10"
-              fill="#e9ecef"
-            />
             <circle
               r="5"
               cx="10"
@@ -74,17 +65,11 @@ export default () => {
               strokeDasharray={`calc(${percentage} * 31.4 / 100) 31.4`}
               transform="rotate(-90) translate(-20)"
             />
-            <circle
+            <circle r="6" cx="10" cy="10" fill="white" />
-              r="6"
-              cx="10"
-              cy="10"
-              fill="white"
-            />
           </svg>
-
           {editor.storage.characterCount.characters()} / {limit} characters
         </div>
-      }
+      )}
     </>
   )
 }

demos/src/Examples/Community/React/index.spec.js

@@ -23,15 +23,16 @@ context('/src/Examples/Community/React/', () => {
     cy.get('.dropdown-menu').should('be.visible')
 
     // select the first user
-    cy.get('.dropdown-menu button').first().then($el => {
+    cy.get('.dropdown-menu button')
-      const name = $el.text()
+      .first()
+      .then($el => {
+        const name = $el.text()
 
-      $el.click()
+        $el.click()
-
-      // check if the user is mentioned
-      cy.get('.tiptap').should('have.text', `@${name} `)
-      cy.get('.character-count').should('contain', '2 / 280 characters')
-    })
 
+        // check if the user is mentioned
+        cy.get('.tiptap').should('have.text', `@${name} `)
+        cy.get('.character-count').should('contain', '2 / 280 characters')
+      })
   })
 })

demos/src/Examples/Community/React/styles.scss

@@ -3,7 +3,7 @@
   :first-child {
     margin-top: 0;
   }
-  
+
   .mention {
     background-color: var(--purple-light);
     border-radius: 0.4rem;
@@ -19,7 +19,7 @@
   color: var(--gray-5);
   display: flex;
   font-size: 0.75rem;
-  gap: .5rem;
+  gap: 0.5rem;
   margin: 1.5rem;
 
   svg {

demos/src/Examples/Community/React/suggestion.js

@@ -1,8 +1,4 @@
-import {
+import { computePosition, flip, shift } from '@floating-ui/dom'
-  computePosition,
-  flip,
-  shift,
-} from '@floating-ui/dom'
 import { posToDOMRect, ReactRenderer } from '@tiptap/react'
 
 import { MentionList } from './MentionList.jsx'
@@ -27,8 +23,34 @@ const updatePosition = (editor, element) => {
 export default {
   items: ({ query }) => {
     return [
-      'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
+      'Lea Thompson',
-    ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+      'Cyndi Lauper',
+      'Tom Cruise',
+      'Madonna',
+      'Jerry Hall',
+      'Joan Collins',
+      'Winona Ryder',
+      'Christina Applegate',
+      'Alyssa Milano',
+      'Molly Ringwald',
+      'Ally Sheedy',
+      'Debbie Harry',
+      'Olivia Newton-John',
+      'Elton John',
+      'Michael J. Fox',
+      'Axl Rose',
+      'Emilio Estevez',
+      'Ralph Macchio',
+      'Rob Lowe',
+      'Jennifer Grey',
+      'Mickey Rourke',
+      'John Cusack',
+      'Matthew Broderick',
+      'Justine Bateman',
+      'Lisa Bonet',
+    ]
+      .filter(item => item.toLowerCase().startsWith(query.toLowerCase()))
+      .slice(0, 5)
   },
 
   render: () => {
@@ -36,7 +58,6 @@ export default {
 
     return {
       onStart: props => {
-
         if (!props.clientRect) {
           return
         }

demos/src/Examples/Community/Vue/MentionList.vue

@@ -10,9 +10,7 @@
         {{ item }}
       </button>
     </template>
-    <div class="item" v-else>
+    <div class="item" v-else>No result</div>
-      No result
-    </div>
   </div>
 </template>
 
@@ -63,7 +61,7 @@ export default {
     },
 
     upHandler() {
-      this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length
+      this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length
     },
 
     downHandler() {

demos/src/Examples/Community/Vue/index.spec.js

@@ -23,15 +23,16 @@ context('/src/Examples/Community/Vue/', () => {
     cy.get('.dropdown-menu').should('be.visible')
 
     // select the first user
-    cy.get('.dropdown-menu button').first().then($el => {
+    cy.get('.dropdown-menu button')
-      const name = $el.text()
+      .first()
+      .then($el => {
+        const name = $el.text()
 
-      $el.click()
+        $el.click()
-
-      // check if the user is mentioned
-      cy.get('.tiptap').should('have.text', `@${name} `)
-      cy.get('.character-count').should('contain', '2 / 280 characters')
-    })
 
+        // check if the user is mentioned
+        cy.get('.tiptap').should('have.text', `@${name} `)
+        cy.get('.character-count').should('contain', '2 / 280 characters')
+      })
   })
 })

demos/src/Examples/Community/Vue/index.vue

@@ -1,18 +1,15 @@
 <template>
   <editor-content :editor="editor" />
 
-  <div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.storage.characterCount.characters() === limit}">
+  <div
-    <svg
+    v-if="editor"
-      height="20"
+    :class="{
-      width="20"
+      'character-count': true,
-      viewBox="0 0 20 20"
+      'character-count--warning': editor.storage.characterCount.characters() === limit,
-    >
+    }"
-      <circle
+  >
-        r="10"
+    <svg height="20" width="20" viewBox="0 0 20 20">
-        cx="10"
+      <circle r="10" cx="10" cy="10" fill="#e9ecef" />
-        cy="10"
-        fill="#e9ecef"
-      />
       <circle
         r="5"
         cx="10"
@@ -23,12 +20,7 @@
         :stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
         transform="rotate(-90) translate(-20)"
       />
-      <circle
+      <circle r="6" cx="10" cy="10" fill="white" />
-        r="6"
-        cx="10"
-        cy="10"
-        fill="white"
-      />
     </svg>
 
     {{ editor.storage.characterCount.characters() }} / {{ limit }} characters
@@ -115,7 +107,7 @@ export default {
   color: var(--gray-5);
   display: flex;
   font-size: 0.75rem;
-  gap: .5rem;
+  gap: 0.5rem;
   margin: 1.5rem;
 
   svg {

demos/src/Examples/Community/Vue/suggestion.js

@@ -1,8 +1,4 @@
-import {
+import { computePosition, flip, shift } from '@floating-ui/dom'
-  computePosition,
-  flip,
-  shift,
-} from '@floating-ui/dom'
 import { posToDOMRect, VueRenderer } from '@tiptap/vue-3'
 
 import MentionList from './MentionList.vue'
@@ -27,8 +23,34 @@ const updatePosition = (editor, element) => {
 export default {
   items: ({ query }) => {
     return [
-      'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
+      'Lea Thompson',
-    ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+      'Cyndi Lauper',
+      'Tom Cruise',
+      'Madonna',
+      'Jerry Hall',
+      'Joan Collins',
+      'Winona Ryder',
+      'Christina Applegate',
+      'Alyssa Milano',
+      'Molly Ringwald',
+      'Ally Sheedy',
+      'Debbie Harry',
+      'Olivia Newton-John',
+      'Elton John',
+      'Michael J. Fox',
+      'Axl Rose',
+      'Emilio Estevez',
+      'Ralph Macchio',
+      'Rob Lowe',
+      'Jennifer Grey',
+      'Mickey Rourke',
+      'John Cusack',
+      'Matthew Broderick',
+      'Justine Bateman',
+      'Lisa Bonet',
+    ]
+      .filter(item => item.toLowerCase().startsWith(query.toLowerCase()))
+      .slice(0, 5)
   },
 
   render: () => {

demos/src/Examples/CustomDocument/React/index.jsx

@@ -37,7 +37,5 @@ export default () => {
     `,
   })
 
-  return (
+  return <EditorContent editor={editor} />
-    <EditorContent editor={editor} />
-  )
 }

demos/src/Examples/CustomDocument/React/index.spec.js

@@ -12,12 +12,16 @@ context('/src/Examples/CustomDocument/React/', () => {
 
   it('should have a headline and a paragraph', () => {
     cy.get('.tiptap h1').should('exist').should('have.text', 'It’ll always have a heading …')
-    cy.get('.tiptap p').should('exist').should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
+    cy.get('.tiptap p')
+      .should('exist')
+      .should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
   })
 
   it('should have a tooltip for a paragraph on a new line', () => {
     cy.get('.tiptap').type('{enter}')
-    cy.get('.tiptap p[data-placeholder]').should('exist').should('have.attr', 'data-placeholder', 'Can you add some further context?')
+    cy.get('.tiptap p[data-placeholder]')
+      .should('exist')
+      .should('have.attr', 'data-placeholder', 'Can you add some further context?')
   })
 
   it('should have a headline after clearing the document', () => {
@@ -31,16 +35,12 @@ context('/src/Examples/CustomDocument/React/', () => {
 
   it('should have a headline after clearing the document & enter paragraph automatically after adding a headline', () => {
     cy.get('.tiptap').type('{selectall}{backspace}Hello world{enter}')
-    cy.get('.tiptap h1')
+    cy.get('.tiptap h1').should('exist').should('have.text', 'Hello world')
-      .should('exist')
-      .should('have.text', 'Hello world')
     cy.get('.tiptap p[data-placeholder]')
       .should('exist')
       .should('have.attr', 'data-placeholder', 'Can you add some further context?')
 
     cy.get('.tiptap').type('This is a paragraph for this test document')
-    cy.get('.tiptap p')
+    cy.get('.tiptap p').should('exist').should('have.text', 'This is a paragraph for this test document')
-      .should('exist')
-      .should('have.text', 'This is a paragraph for this test document')
   })
 })

demos/src/Examples/CustomDocument/React/styles.scss

@@ -5,11 +5,11 @@
   }
 
   /* List styles */
-  ul, 
+  ul,
   ol {
     padding: 0 1rem;
     margin: 1.25rem 1rem 1.25rem 0.4rem;
-    
+
     li p {
       margin-top: 0.25em;
       margin-bottom: 0.25em;
@@ -17,39 +17,39 @@
   }
 
   /* Heading styles */
-  h1, 
+  h1,
-  h2, 
+  h2,
-  h3, 
+  h3,
-  h4, 
+  h4,
-  h5, 
+  h5,
   h6 {
     line-height: 1.1;
     margin-top: 2.5rem;
     text-wrap: pretty;
   }
 
-  h1, 
+  h1,
   h2 {
     margin-top: 3.5rem;
     margin-bottom: 1.5rem;
   }
 
-  h1 { 
+  h1 {
-    font-size: 1.4rem; 
+    font-size: 1.4rem;
   }
 
-  h2 { 
+  h2 {
-    font-size: 1.2rem; 
+    font-size: 1.2rem;
   }
 
-  h3 { 
+  h3 {
-    font-size: 1.1rem; 
+    font-size: 1.1rem;
   }
 
-  h4, 
+  h4,
-  h5, 
+  h5,
-  h6 { 
+  h6 {
-    font-size: 1rem; 
+    font-size: 1rem;
   }
 
   /* Code and preformatted text styles */
@@ -88,7 +88,7 @@
     border-top: 1px solid var(--gray-2);
     margin: 2rem 0;
   }
-    
+
   /* Placeholder (at the top) */
   /* p.is-editor-empty:first-child::before {
     color: var(--gray-4);

demos/src/Examples/CustomDocument/Vue/index.spec.js

@@ -12,12 +12,16 @@ context('/src/Examples/CustomDocument/Vue/', () => {
 
   it('should have a headline and a paragraph', () => {
     cy.get('.tiptap h1').should('exist').should('have.text', 'It’ll always have a heading …')
-    cy.get('.tiptap p').should('exist').should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
+    cy.get('.tiptap p')
+      .should('exist')
+      .should('have.text', '… if you pass a custom document. That’s the beauty of having full control over the schema.')
   })
 
   it('should have a tooltip for a paragraph on a new line', () => {
     cy.get('.tiptap').type('{enter}')
-    cy.get('.tiptap p[data-placeholder]').should('exist').should('have.attr', 'data-placeholder', 'Can you add some further context?')
+    cy.get('.tiptap p[data-placeholder]')
+      .should('exist')
+      .should('have.attr', 'data-placeholder', 'Can you add some further context?')
   })
 
   it('should have a headline after clearing the document', () => {
@@ -33,16 +37,12 @@ context('/src/Examples/CustomDocument/Vue/', () => {
   it('should have a headline after clearing the document & enter paragraph automatically after adding a headline', () => {
     cy.get('.tiptap').type('{selectall}{backspace}Hello world{enter}')
     cy.wait(100)
-    cy.get('.tiptap h1')
+    cy.get('.tiptap h1').should('exist').should('have.text', 'Hello world')
-      .should('exist')
-      .should('have.text', 'Hello world')
     cy.get('.tiptap p[data-placeholder]')
       .should('exist')
       .should('have.attr', 'data-placeholder', 'Can you add some further context?')
 
     cy.get('.tiptap').type('This is a paragraph for this test document')
-    cy.get('.tiptap p')
+    cy.get('.tiptap p').should('exist').should('have.text', 'This is a paragraph for this test document')
-      .should('exist')
-      .should('have.text', 'This is a paragraph for this test document')
   })
 })

demos/src/Examples/CustomParagraph/React/Paragraph.jsx

@@ -1,16 +1,19 @@
 import { Paragraph as BaseParagraph } from '@tiptap/extension-paragraph'
-import {
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
-  NodeViewContent,
-  NodeViewWrapper,
-  ReactNodeViewRenderer,
-} from '@tiptap/react'
 
 const ParagraphComponent = ({ node }) => {
   return (
     <NodeViewWrapper style={{ position: 'relative' }}>
-      <span contentEditable={false} className="label" style={{
+      <span
-        position: 'absolute', right: '100%', fontSize: '10px', color: '#999',
+        contentEditable={false}
-      }}>
+        className="label"
+        style={{
+          position: 'absolute',
+          right: '100%',
+          fontSize: '10px',
+          color: '#999',
+        }}
+      >
         {node.textContent.length}
       </span>
       <NodeViewContent as="p" />

demos/src/Examples/CustomParagraph/React/index.jsx

@@ -21,7 +21,5 @@ export default () => {
     `,
   })
 
-  return (
+  return <EditorContent editor={editor} />
-    <EditorContent editor={editor} />
-  )
 }

demos/src/Examples/CustomParagraph/React/index.spec.js

@@ -11,7 +11,9 @@ context('/src/Examples/CustomParagraph/React/', () => {
   })
 
   it('should have a paragraph and text length', () => {
-    cy.get('.tiptap p').should('exist').should('have.text', 'Each line shows the number of characters in the paragraph.')
+    cy.get('.tiptap p')
+      .should('exist')
+      .should('have.text', 'Each line shows the number of characters in the paragraph.')
     cy.get('.tiptap .label').should('exist').should('have.text', '58')
   })