diff --git a/docs/src/components/DemoMixin/index.js b/docs/src/components/DemoMixin/index.js
index 019a80b1..54bbe6d2 100644
--- a/docs/src/components/DemoMixin/index.js
+++ b/docs/src/components/DemoMixin/index.js
@@ -86,7 +86,7 @@ export default {
.filter(item => {
return ['vue', 'ts', 'js', 'jsx', 'scss'].includes(item.extension)
})
- .sortBy(item => item.path.split('/').length && !item.path.endsWith('index.vue'))
+ .sortBy(item => item.path.split('/').length && !item.path.endsWith('index.vue') && !item.path.endsWith('index.jsx'))
.toArray()
},
}
diff --git a/docs/src/demos/Examples/Community/React/MentionList.jsx b/docs/src/demos/Examples/Community/React/MentionList.jsx
new file mode 100644
index 00000000..630485ea
--- /dev/null
+++ b/docs/src/demos/Examples/Community/React/MentionList.jsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import './MentionList.scss'
+
+export class MentionList extends React.Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ selectedIndex: 0,
+ }
+ }
+
+ componentDidUpdate(oldProps) {
+ if (this.props.items !== oldProps.items) {
+ this.setState({
+ selectedIndex: 0
+ })
+ }
+ }
+
+ onKeyDown({ event }) {
+ if (event.key === 'ArrowUp') {
+ this.upHandler()
+ return true
+ }
+
+ if (event.key === 'ArrowDown') {
+ this.downHandler()
+ return true
+ }
+
+ if (event.key === 'Enter') {
+ this.enterHandler()
+ return true
+ }
+
+ return false
+ }
+
+ upHandler() {
+ this.setState({
+ selectedIndex: ((this.state.selectedIndex + this.props.items.length) - 1) % this.props.items.length
+ })
+ }
+
+ downHandler() {
+ this.setState({
+ selectedIndex: (this.state.selectedIndex + 1) % this.props.items.length
+ })
+ }
+
+ enterHandler() {
+ this.selectItem(this.state.selectedIndex)
+ }
+
+ selectItem(index) {
+ const item = this.props.items[index]
+
+ if (item) {
+ this.props.command({ id: item })
+ }
+ }
+
+ render() {
+ return (
+
+ {this.props.items.map((item, index) => (
+
+ ))}
+
+ )
+ }
+}
diff --git a/docs/src/demos/Examples/Community/React/MentionList.scss b/docs/src/demos/Examples/Community/React/MentionList.scss
new file mode 100644
index 00000000..e909db98
--- /dev/null
+++ b/docs/src/demos/Examples/Community/React/MentionList.scss
@@ -0,0 +1,27 @@
+.items {
+ position: relative;
+ border-radius: 0.25rem;
+ background: white;
+ color: rgba(black, 0.8);
+ overflow: hidden;
+ font-size: 0.9rem;
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.1),
+ 0px 10px 20px rgba(0, 0, 0, 0.1),
+ ;
+}
+
+.item {
+ display: block;
+ width: 100%;
+ text-align: left;
+ background: transparent;
+ border: none;
+ padding: 0.2rem 0.5rem;
+
+ &.is-selected,
+ &:hover {
+ color: #A975FF;
+ background: rgba(#A975FF, 0.1);
+ }
+}
diff --git a/docs/src/demos/Examples/Community/React/index.jsx b/docs/src/demos/Examples/Community/React/index.jsx
new file mode 100644
index 00000000..05851737
--- /dev/null
+++ b/docs/src/demos/Examples/Community/React/index.jsx
@@ -0,0 +1,126 @@
+import React from 'react'
+import tippy from 'tippy.js'
+import { useEditor, EditorContent, ReactRenderer } from '@tiptap/react'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import CharacterCount from '@tiptap/extension-character-count'
+import Mention from '@tiptap/extension-mention'
+import { MentionList } from './MentionList'
+import './styles.scss'
+
+export default () => {
+ const limit = 280
+
+ const editor = useEditor({
+ extensions: [
+ Document,
+ Paragraph,
+ Text,
+ CharacterCount.configure({
+ limit,
+ }),
+ Mention.configure({
+ HTMLAttributes: {
+ class: 'mention',
+ },
+ suggestion: {
+ 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',
+ ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+ },
+ render: () => {
+ let reactRenderer
+ let popup
+
+ return {
+ onStart: props => {
+ reactRenderer = new ReactRenderer(MentionList, {
+ props,
+ editor: props.editor,
+ })
+
+ popup = tippy('body', {
+ getReferenceClientRect: props.clientRect,
+ appendTo: () => document.body,
+ content: reactRenderer.element,
+ showOnCreate: true,
+ interactive: true,
+ trigger: 'manual',
+ placement: 'bottom-start',
+ })
+ },
+ onUpdate(props) {
+ reactRenderer.updateProps(props)
+
+ popup[0].setProps({
+ getReferenceClientRect: props.clientRect,
+ })
+ },
+ onKeyDown(props) {
+ return reactRenderer.ref.onKeyDown(props)
+ },
+ onExit() {
+ popup[0].destroy()
+ reactRenderer.destroy()
+ },
+ }
+ }
+ },
+ })
+ ],
+ content: `
+
+ What do you all think about the new movie?
+
+ `,
+ })
+
+ const percentage = editor
+ ? Math.round((100 / limit) * editor.getCharacterCount())
+ : 0
+
+ return (
+
+
+ {editor &&
+
+
+
+
+ {editor.getCharacterCount()}/{limit} characters
+
+
+ }
+