Fixing reoccurring issue #3331 and improving related PR #3533 (#3862)

* Add custom paragraph example

* Remove unnecessary queueMicrotask

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

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

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

@@ -0,0 +1,27 @@
+import './styles.scss'
+
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+import { Paragraph } from './Paragraph.jsx'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        paragraph: false,
+      }),
+      Paragraph,
+    ],
+    content: `
+    <p>
+      Each line shows the number of characters in the paragraph.
+    </p>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}

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

@@ -0,0 +1,23 @@
+context('/src/Examples/CustomParagraph/React/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/CustomParagraph/React/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+
+  it('should have a paragraph and text length', () => {
+    cy.get('.ProseMirror p').should('exist').should('have.text', 'Each line shows the number of characters in the paragraph.')
+    cy.get('.ProseMirror .label').should('exist').should('have.text', '58')
+  })
+
+  it('should have new paragraph', () => {
+    cy.get('.ProseMirror').type('{selectall}{moveToEnd}{enter}')
+    cy.get('.ProseMirror p').eq(1).should('exist').should('have.text', '')
+    cy.get('.ProseMirror .label').eq(1).should('exist').should('have.text', '0')
+  })
+})

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

@@ -0,0 +1,24 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+/* Placeholder (at the top) */
+/*.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #ced4da;
+  pointer-events: none;
+  height: 0;
+}*/
+
+/* Placeholder (on every new line) */
+.ProseMirror .is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #ced4da;
+  pointer-events: none;
+  height: 0;
+}

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

@@ -0,0 +1,32 @@
+<template>
+  <node-view-wrapper class="vue-component">
+    <span contenteditable="false" class="label">{{ node.textContent.length }}</span>
+    <node-view-content as="p" />
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+  },
+
+  props: nodeViewProps,
+}
+</script>
+
+<style lang="scss">
+.vue-component {
+  position: relative;
+}
+
+.label {
+  position: absolute;
+  right: 100%;
+  font-size: 10px;
+  color: #999;
+}
+</style>

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

@@ -0,0 +1,10 @@
+import { Paragraph as BaseParagraph } from '@tiptap/extension-paragraph'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import Component from './Component.vue'
+
+export default BaseParagraph.extend({
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})

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

@@ -0,0 +1,23 @@
+context('/src/Examples/CustomParagraph/React/', () => {
+  beforeEach(() => {
+    cy.visit('/src/Examples/CustomParagraph/React/')
+  })
+
+  it('should have a working tiptap instance', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      // eslint-disable-next-line
+      expect(editor).to.not.be.null
+    })
+  })
+
+  it('should have a paragraph and text length', () => {
+    cy.get('.ProseMirror p').should('exist').should('have.text', 'Each line shows the number of characters in the paragraph.')
+    cy.get('.ProseMirror .label').should('exist').should('have.text', '58')
+  })
+
+  it('should have new paragraph', () => {
+    cy.get('.ProseMirror').type('{selectall}{moveToEnd}{enter}')
+    cy.get('.ProseMirror p').eq(1).should('exist').should('have.text', '')
+    cy.get('.ProseMirror .label').eq(1).should('exist').should('have.text', '0')
+  })
+})

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

@@ -0,0 +1,55 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
+import Paragraph from './Extension.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit.configure({
+          paragraph: false,
+        }),
+        Paragraph,
+      ],
+      content: `
+      <p>
+        Each line shows the number of characters in the paragraph.
+      </p>
+      <p>
+        Hello, custom paragraph!
+      </p>
+      `,
+    })
+  },
+
+  beforeUnmount() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>
+n

packages/react/src/EditorContent.tsx

@@ -75,9 +75,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     // lifecycle methods, and React doesn't allow calling flushSync from inside
     // a lifecycle method.
     if (this.initialized) {
-      queueMicrotask(() => {
-        flushSync(fn)
-      })
+      flushSync(fn)
     } else {
       fn()
     }