Skip to content

Commit

Permalink
fix(react): allow updating event handlers on editor
Browse files Browse the repository at this point in the history
  • Loading branch information
bdbch committed Mar 2, 2023
1 parent da5c586 commit 0c8f653
Show file tree
Hide file tree
Showing 7 changed files with 192 additions and 0 deletions.
Empty file.
47 changes: 47 additions & 0 deletions demos/src/Experiments/OnUpdateRerender/React/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import './styles.scss'

import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'

const TiptapComponent = ({
onUpdate,
}) => {
const editor = useEditor({
extensions: [
Document,
Paragraph,
Text,
],
content: `
<p>
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
</p>
<p>
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
</p>
`,
onUpdate,
})

return (
<EditorContent editor={editor} />
)
}

export default () => {
const [index, setIndex] = React.useState(0)

const handleUpdate = ({ editor: currentEditor }) => {
console.log(index, 'onUpdate', currentEditor.getHTML())
}

return (
<div>
<button onClick={() => setIndex(index + 1)}>INC</button> = {index}
<TiptapComponent onUpdate={handleUpdate} />
</div>
)
}
6 changes: 6 additions & 0 deletions demos/src/Experiments/OnUpdateRerender/React/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
52 changes: 52 additions & 0 deletions demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<template>
<div v-if="editor">
<editor-content :editor="editor" />
</div>
</template>

<script>
import StarterKit from '@tiptap/starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-2'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
props: {
count: {
type: Number,
required: true,
},
},
mounted() {
this.editor = new Editor({
extensions: [
StarterKit,
],
content: `
<p>
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
</p>
<p>
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
</p>
`,
onUpdate: ({ editor: currentEditor }) => {
console.log(this.count, 'onUpdate', currentEditor.getHTML())
},
})
},
unmounted() {
this.editor.destroy()
},
}
</script>
Empty file.
27 changes: 27 additions & 0 deletions demos/src/Experiments/OnUpdateRerender/Vue/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<template>
<div><button @click="countUp">INC</button> = {{ count }}</div>
<TiptapComponent :count="count" />
</template>

<script>
import TiptapComponent from './TiptapComponent.vue'
export default {
components: {
TiptapComponent,
},
data() {
return {
count: 0,
}
},
methods: {
countUp() {
this.count += 1
},
},
}
</script>
60 changes: 60 additions & 0 deletions packages/react/src/useEditor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,68 @@ function useForceUpdate() {

export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
const [editor, setEditor] = useState<Editor | null>(null)

const forceUpdate = useForceUpdate()

const {
onBeforeCreate,
onBlur,
onCreate,
onDestroy,
onFocus,
onSelectionUpdate,
onTransaction,
onUpdate,
} = options

// This effect will handle updating the editor instance
// when the event handlers change.
useEffect(() => {
if (!editor) {
return
}

if (onBeforeCreate) {
editor.off('beforeCreate')
editor.on('beforeCreate', onBeforeCreate)
}

if (onBlur) {
editor.off('blur')
editor.on('blur', onBlur)
}

if (onCreate) {
editor.off('create')
editor.on('create', onCreate)
}

if (onDestroy) {
editor.off('destroy')
editor.on('destroy', onDestroy)
}

if (onFocus) {
editor.off('focus')
editor.on('focus', onFocus)
}

if (onSelectionUpdate) {
editor.off('selectionUpdate')
editor.on('selectionUpdate', onSelectionUpdate)
}

if (onTransaction) {
editor.off('transaction')
editor.on('transaction', onTransaction)
}

if (onUpdate) {
editor.off('update')
editor.on('update', onUpdate)
}
}, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate])

useEffect(() => {
let isMounted = true

Expand Down

0 comments on commit 0c8f653

Please sign in to comment.