Merge branch 'develop' into code-block-default-language

.changeset/cuddly-pants-destroy.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/core": patch
+---
+
+Fix change criteria for isNodeEmpty to resolve #5415

.changeset/early-singers-begin.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/core": patch
+---
+
+fix(core): findDuplicates - use Array.from when converting Set

.changeset/hungry-poems-bake.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/core": minor
+---
+
+Add `ignoreWhitespace` option to `isNodeEmpty` to ignore any whitespace and hardbreaks in a node to check for emptiness

.changeset/real-kiwis-double.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/core": patch
+---
+
+This fixes a discrepency between `getMarksBetween` and `isActive(markName)` where the position used for getMarksBetween was off by one

.changeset/smooth-rice-obey.md

@@ -0,0 +1,12 @@
+---
+"@tiptap/react": patch
+---
+
+Optimize `useEditor` and `useEditorState` to reduce number of instances created while still being performant #5432
+
+The core of this change is two-fold:
+ - have the effect run on every render (i.e. without a dep array)
+ - schedule destruction of instances, but bail on the actual destruction if the instance was still mounted and a new instance had not been created yet
+
+It should plug a memory leak, where editor instances could be created but not cleaned up in strict mode.
+As well as fixing a bug where a re-render, with deps, was not applying new options that were set on `useEditor`.

.changeset/wet-terms-fetch.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-placeholder": patch
+---
+
+add back `considerAsAny` type but mark it deprecated

.changeset/wise-beers-reflect.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-task-item": patch
+---
+
+allow task items to be parsed when only having `<li data-checked` instead of only when `<li data-checked="true"` (re-fix of #5366)

.changeset/yellow-rice-collect.md

@@ -0,0 +1,6 @@
+---
+"@tiptap/extension-collaboration-cursor": patch
+"@tiptap/extension-collaboration": patch
+---
+
+This updates y-prosemirror to a version that no longer has syncing problems and extension collaboration now respects the onFirstRender option

.eslintrc.js

@@ -8,6 +8,15 @@ module.exports = {
     node: true,
   },
   overrides: [
+    {
+      files: [
+        './**/*.ts',
+        './**/*.tsx',
+        './**/*.js',
+        './**/*.jsx',
+      ],
+      extends: ['plugin:react-hooks/recommended'],
+    },
     {
       files: [
         './**/*.ts',

.github/workflows/build.yml

@@ -103,7 +103,7 @@ jobs:
 
       - name: Test ${{ matrix.test-spec.name }}
         id: cypress
-        uses: cypress-io/[email protected].1
+        uses: cypress-io/[email protected].2
         with:
           cache-key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
           start: npm run serve
@@ -114,15 +114,15 @@ jobs:
           quiet: true
 
       - name: Export screenshots (on failure only)
-        uses: actions/[email protected].3
+        uses: actions/[email protected].5
         if: failure()
         with:
           name: cypress-screenshots
           path: tests/cypress/screenshots
           retention-days: 7
 
       - name: Export screen recordings (on failure only)
-        uses: actions/[email protected].3
+        uses: actions/[email protected].5
         if: failure()
         with:
           name: cypress-videos

demos/package.json

@@ -20,7 +20,7 @@
     "remixicon": "^2.5.0",
     "shiki": "^1.10.3",
     "simplify-js": "^1.2.4",
-    "y-prosemirror": "^1.2.9",
+    "y-prosemirror": "^1.2.11",
     "y-webrtc": "^10.3.0",
     "yjs": "^13.6.18"
   },

demos/setup/vue.ts

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

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

@@ -8,10 +8,6 @@ import StarterKit from '@tiptap/starter-kit'
 import React, { useCallback } from 'react'
 
 const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
   const onCutToStart = useCallback(() => {
     editor.chain().cut({ from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos }, 1).run()
   }, [editor])
@@ -20,6 +16,10 @@ const MenuBar = ({ editor }) => {
     editor.chain().cut({ from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos }, editor.state.doc.nodeSize - 2).run()
   }, [editor])
 
+  if (!editor) {
+    return null
+  }
+
   return (
     <div className="control-group">
       <div className="button-group">

demos/src/Examples/InteractivityComponentProvideInject/Vue/Component.vue

@@ -0,0 +1,50 @@
+<template>
+  <node-view-wrapper class="vue-component">
+    <label>Vue Component</label>
+    <ValidateInject />
+  </node-view-wrapper>
+</template>
+
+<script>
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+import ValidateInject from './ValidateInject.vue'
+
+export default {
+  components: {
+    NodeViewWrapper,
+    ValidateInject,
+  },
+
+  props: nodeViewProps,
+}
+</script>
+
+<style lang="scss">
+.tiptap {
+  /* Vue component */
+  .vue-component {
+    background-color: var(--purple-light);
+    border: 2px solid var(--purple);
+    border-radius: 0.5rem;
+    margin: 2rem 0;
+    position: relative;
+
+    label {
+      background-color: var(--purple);
+      border-radius: 0 0 0.5rem 0;
+      color: var(--white);
+      font-size: 0.75rem;
+      font-weight: bold;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      top: 0;
+    }
+
+    .content {
+      margin-top: 1.5rem;
+      padding: 1rem;
+    }
+  }
+}
+</style>

demos/src/Examples/InteractivityComponentProvideInject/Vue/Editor.vue

@@ -0,0 +1,144 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
+import VueComponent from './Extension.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  provide() {
+    return {
+      editorValue: 'editorValue',
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        VueComponent,
+      ],
+      content: `
+        <p>
+          This is still the text editor you’re used to, but enriched with node views.
+        </p>
+        <vue-component count="0"></vue-component>
+        <p>
+          Did you see that? That’s a Vue component. We are really living in the future.
+        </p>
+      `,
+    })
+  },
+
+  beforeUnmount() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* List styles */
+  ul,
+  ol {
+    padding: 0 1rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 2.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 3.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--black);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+}
+</style>

demos/src/Examples/InteractivityComponentProvideInject/Vue/Extension.js

@@ -0,0 +1,36 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'vueComponent',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'vue-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['vue-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})

demos/src/Examples/InteractivityComponentProvideInject/Vue/ValidateInject.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="validate-inject">
+    <p>{{ globalValue }}</p>
+    <p>{{ appValue }}  </p>
+    <p>{{ indexValue }}</p>
+    <p>{{ editorValue }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['appValue', 'indexValue', 'editorValue'],
+}
+</script>
+
+<style lang="scss">
+.validate-inject {
+  margin-top: 2rem;
+}
+</style>