diff --git a/.changeset/five-lobsters-sing.md b/.changeset/five-lobsters-sing.md new file mode 100644 index 000000000..588da50a3 --- /dev/null +++ b/.changeset/five-lobsters-sing.md @@ -0,0 +1,5 @@ +--- +"@tiptap/extension-floating-menu": patch +--- + +Fixed an issue that cause the floating menu empty-node check to not respect leaf nodes that didn't count into a nodes text content diff --git a/demos/src/Examples/Issue4327/React/foo.ts b/demos/src/Examples/Issue4327/React/foo.ts new file mode 100644 index 000000000..47708c279 --- /dev/null +++ b/demos/src/Examples/Issue4327/React/foo.ts @@ -0,0 +1,26 @@ +import { mergeAttributes, Node } from '@tiptap/core' + +export default Node.create({ + name: 'foo', + + group: 'inline', + + inline: true, + + parseHTML() { + return [ + { + tag: 'span', + getAttrs: node => (node as HTMLElement).hasAttribute('data-foo') && null, + }, + ] + }, + + renderHTML({ HTMLAttributes }) { + return ['span', mergeAttributes({ 'data-foo': '', HTMLAttributes }), 'foo'] + }, + + renderText() { + return 'foo' + }, +}) diff --git a/demos/src/Examples/Issue4327/React/index.html b/demos/src/Examples/Issue4327/React/index.html new file mode 100644 index 000000000..e69de29bb diff --git a/demos/src/Examples/Issue4327/React/index.tsx b/demos/src/Examples/Issue4327/React/index.tsx new file mode 100644 index 000000000..beff64ecc --- /dev/null +++ b/demos/src/Examples/Issue4327/React/index.tsx @@ -0,0 +1,27 @@ +import './styles.scss' + +import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react' +import StarterKit from '@tiptap/starter-kit' +import React from 'react' + +import Foo from './foo.js' + +export default () => { + const editor = useEditor({ + extensions: [ + StarterKit, Foo, + ], + content: ` +

foo

+ `, + }) + + return ( + <> + {editor && +
Hello
+
} + + + ) +} diff --git a/demos/src/Examples/Issue4327/React/styles.scss b/demos/src/Examples/Issue4327/React/styles.scss new file mode 100644 index 000000000..1c9f0f6cd --- /dev/null +++ b/demos/src/Examples/Issue4327/React/styles.scss @@ -0,0 +1,10 @@ +.tiptap { + > * + * { + margin-top: 0.75em; + } + + ul, + ol { + padding: 0 1rem; + } +} diff --git a/demos/src/Examples/Issue4327/foo.ts b/demos/src/Examples/Issue4327/foo.ts new file mode 100644 index 000000000..47708c279 --- /dev/null +++ b/demos/src/Examples/Issue4327/foo.ts @@ -0,0 +1,26 @@ +import { mergeAttributes, Node } from '@tiptap/core' + +export default Node.create({ + name: 'foo', + + group: 'inline', + + inline: true, + + parseHTML() { + return [ + { + tag: 'span', + getAttrs: node => (node as HTMLElement).hasAttribute('data-foo') && null, + }, + ] + }, + + renderHTML({ HTMLAttributes }) { + return ['span', mergeAttributes({ 'data-foo': '', HTMLAttributes }), 'foo'] + }, + + renderText() { + return 'foo' + }, +}) diff --git a/demos/src/Extensions/FloatingMenu/React/index.jsx b/demos/src/Extensions/FloatingMenu/React/index.jsx index 7fcb176de..24c21ea2c 100644 --- a/demos/src/Extensions/FloatingMenu/React/index.jsx +++ b/demos/src/Extensions/FloatingMenu/React/index.jsx @@ -1,13 +1,50 @@ import './styles.scss' -import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react' +import { + EditorContent, FloatingMenu, mergeAttributes, + Node, useEditor, +} from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' import React, { useEffect } from 'react' +const Foo = Node.create({ + name: 'foo', + + group: 'inline', + + inline: true, + + parseHTML() { + return [ + { + tag: 'span', + getAttrs: node => node.hasAttribute('data-foo') && null, + }, + ] + }, + + renderHTML({ HTMLAttributes }) { + return ['span', mergeAttributes({ 'data-foo': '', HTMLAttributes }), 'foo'] + }, + + renderText() { + return 'foo' + }, + + addCommands() { + return { + insertFoo: () => ({ commands }) => { + return commands.insertContent({ type: this.name }) + }, + } + }, +}) + export default () => { const editor = useEditor({ extensions: [ StarterKit, + Foo, ], content: `

@@ -32,9 +69,10 @@ export default () => { setIsEditable(!isEditable)} /> Editable + {editor && -

+