From a0e2a830d7f51f06459a327fcbf04d6651562b67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Wed, 7 Apr 2021 22:07:36 +0200 Subject: [PATCH] refactor: remove isEditable from node views, remove viewUpdate event --- docs/src/docPages/api/events.md | 10 ---------- packages/core/src/Editor.ts | 13 +------------ packages/core/src/Extension.ts | 8 -------- packages/core/src/ExtensionManager.ts | 4 ---- packages/core/src/Mark.ts | 9 --------- packages/core/src/Node.ts | 11 +---------- packages/core/src/types.ts | 1 - packages/react/src/NodeViewContent.tsx | 3 --- packages/react/src/ReactNodeViewRenderer.tsx | 12 +----------- packages/react/src/useReactNodeView.ts | 2 -- packages/vue-2/src/NodeViewContent.ts | 4 ---- packages/vue-2/src/VueNodeViewRenderer.ts | 8 -------- packages/vue-3/src/NodeViewContent.ts | 4 ---- packages/vue-3/src/VueNodeViewRenderer.ts | 6 ------ 14 files changed, 3 insertions(+), 92 deletions(-) diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index 4771620e..e6f1f637 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -19,9 +19,6 @@ const editor = new Editor({ onSelectionUpdate({ editor }) { // The selection has changed. }, - onViewUpdate({ editor }) { - // The view has changed. - }, onTransaction({ editor, transaction }) { // The editor state has changed. }, @@ -57,10 +54,6 @@ editor.on('selectionUpdate', ({ editor }) => { // The selection has changed. } -editor.on('viewUpdate', ({ editor }) => { - // The view has changed. -} - editor.on('transaction', ({ editor, transaction }) => { // The editor state has changed. } @@ -113,9 +106,6 @@ const CustomExtension = Extension.create({ onSelectionUpdate({ editor }) { // The selection has changed. }, - onViewUpdate({ editor }) { - // The view has changed. - }, onTransaction({ editor, transaction }) { // The editor state has changed. }, diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts index f045d3fb..f5ff9f38 100644 --- a/packages/core/src/Editor.ts +++ b/packages/core/src/Editor.ts @@ -60,7 +60,6 @@ export class Editor extends EventEmitter { onCreate: () => null, onUpdate: () => null, onSelectionUpdate: () => null, - onViewUpdate: () => null, onTransaction: () => null, onFocus: () => null, onBlur: () => null, @@ -79,7 +78,6 @@ export class Editor extends EventEmitter { this.on('create', this.options.onCreate) this.on('update', this.options.onUpdate) this.on('selectionUpdate', this.options.onSelectionUpdate) - this.on('viewUpdate', this.options.onViewUpdate) this.on('transaction', this.options.onTransaction) this.on('focus', this.options.onFocus) this.on('blur', this.options.onBlur) @@ -243,16 +241,7 @@ export class Editor extends EventEmitter { // `editor.view` is not yet available at this time. // Therefore we will add all plugins and node views directly afterwards. const newState = this.state.reconfigure({ - plugins: [ - new Plugin({ - view: () => ({ - update: () => this.emit('viewUpdate', { - editor: this, - }), - }), - }), - ...this.extensionManager.plugins, - ], + plugins: this.extensionManager.plugins, }) this.view.updateState(newState) diff --git a/packages/core/src/Extension.ts b/packages/core/src/Extension.ts index 6308c765..059b770c 100644 --- a/packages/core/src/Extension.ts +++ b/packages/core/src/Extension.ts @@ -123,14 +123,6 @@ declare module '@tiptap/core' { editor: Editor, }) => void) | null, - /** - * The view has changed. - */ - onViewUpdate?: ((this: { - options: Options, - editor: Editor, - }) => void) | null, - /** * The editor state has changed. */ diff --git a/packages/core/src/ExtensionManager.ts b/packages/core/src/ExtensionManager.ts index 6927d484..364623a5 100644 --- a/packages/core/src/ExtensionManager.ts +++ b/packages/core/src/ExtensionManager.ts @@ -55,10 +55,6 @@ export default class ExtensionManager { this.editor.on('selectionUpdate', extension.config.onSelectionUpdate.bind(context)) } - if (typeof extension.config.onViewUpdate === 'function') { - this.editor.on('viewUpdate', extension.config.onViewUpdate.bind(context)) - } - if (typeof extension.config.onTransaction === 'function') { this.editor.on('transaction', extension.config.onTransaction.bind(context)) } diff --git a/packages/core/src/Mark.ts b/packages/core/src/Mark.ts index ee3e0ceb..d2b2dbc9 100644 --- a/packages/core/src/Mark.ts +++ b/packages/core/src/Mark.ts @@ -136,15 +136,6 @@ declare module '@tiptap/core' { type: MarkType, }) => void) | null, - /** - * The view has changed. - */ - onViewUpdate?: ((this: { - options: Options, - editor: Editor, - type: MarkType, - }) => void) | null, - /** * The editor state has changed. */ diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts index e4b208a4..b0facfb8 100644 --- a/packages/core/src/Node.ts +++ b/packages/core/src/Node.ts @@ -135,16 +135,7 @@ declare module '@tiptap/core' { /** * The selection has changed. */ - onSelectionUpdate?: ((this: { - options: Options, - editor: Editor, - type: NodeType, - }) => void) | null, - - /** - * The view has changed. - */ - onViewUpdate?: ((this: { + onSelectionUpdate?: ((this: { options: Options, editor: Editor, type: NodeType, diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 453d52c6..8a6e7aa7 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -31,7 +31,6 @@ export interface EditorOptions { enablePasteRules: boolean, onCreate: (props: { editor: Editor }) => void, onUpdate: (props: { editor: Editor }) => void, - onViewUpdate: (props: { editor: Editor }) => void, onSelectionUpdate: (props: { editor: Editor }) => void, onTransaction: (props: { editor: Editor, transaction: Transaction }) => void, onFocus: (props: { editor: Editor, event: FocusEvent }) => void, diff --git a/packages/react/src/NodeViewContent.tsx b/packages/react/src/NodeViewContent.tsx index 6d2a429a..2587164c 100644 --- a/packages/react/src/NodeViewContent.tsx +++ b/packages/react/src/NodeViewContent.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { useReactNodeView } from './useReactNodeView' export interface NodeViewContentProps { className?: string, @@ -7,14 +6,12 @@ export interface NodeViewContentProps { } export const NodeViewContent: React.FC = props => { - const { isEditable } = useReactNodeView() const Tag = props.as || 'div' return ( ) diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index 0ba36fef..13201778 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -40,21 +40,11 @@ class ReactNodeView extends NodeView { } const ReactNodeViewProvider: React.FunctionComponent = componentProps => { - const [isEditable, setIsEditable] = useState(this.editor.isEditable) const onDragStart = this.onDragStart.bind(this) - const onViewUpdate = () => setIsEditable(this.editor.isEditable) const Component = this.component - useEffect(() => { - this.editor.on('viewUpdate', onViewUpdate) - - return () => { - this.editor.off('viewUpdate', onViewUpdate) - } - }, []) - return ( - + ) diff --git a/packages/react/src/useReactNodeView.ts b/packages/react/src/useReactNodeView.ts index 142edbfa..a1353e53 100644 --- a/packages/react/src/useReactNodeView.ts +++ b/packages/react/src/useReactNodeView.ts @@ -1,12 +1,10 @@ import { createContext, useContext } from 'react' export interface ReactNodeViewContextProps { - isEditable: boolean, onDragStart: (event: DragEvent) => void, } export const ReactNodeViewContext = createContext>({ - isEditable: undefined, onDragStart: undefined, }) diff --git a/packages/vue-2/src/NodeViewContent.ts b/packages/vue-2/src/NodeViewContent.ts index 3405106f..b356ed1c 100644 --- a/packages/vue-2/src/NodeViewContent.ts +++ b/packages/vue-2/src/NodeViewContent.ts @@ -8,8 +8,6 @@ export const NodeViewContent = Vue.extend({ }, }, - inject: ['isEditable'], - render(createElement) { return createElement( this.as, { @@ -18,8 +16,6 @@ export const NodeViewContent = Vue.extend({ }, attrs: { 'data-node-view-content': '', - // @ts-ignore - contenteditable: this.isEditable.value, }, }, ) diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts index 0772b99b..cd23b472 100644 --- a/packages/vue-2/src/VueNodeViewRenderer.ts +++ b/packages/vue-2/src/VueNodeViewRenderer.ts @@ -67,13 +67,6 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> { } const onDragStart = this.onDragStart.bind(this) - const isEditable = Vue.observable({ - value: this.editor.isEditable, - }) - - this.editor.on('viewUpdate', () => { - isEditable.value = this.editor.isEditable - }) this.decorationClasses = Vue.observable({ value: this.getDecorationClasses(), @@ -86,7 +79,6 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> { provide: () => { return { onDragStart, - isEditable, decorationClasses: this.decorationClasses, } }, diff --git a/packages/vue-3/src/NodeViewContent.ts b/packages/vue-3/src/NodeViewContent.ts index fe89f319..0daa14b8 100644 --- a/packages/vue-3/src/NodeViewContent.ts +++ b/packages/vue-3/src/NodeViewContent.ts @@ -8,8 +8,6 @@ export const NodeViewContent = defineComponent({ }, }, - inject: ['isEditable'], - render() { return h( this.as, { @@ -17,8 +15,6 @@ export const NodeViewContent = defineComponent({ whiteSpace: 'pre-wrap', }, 'data-node-view-content': '', - // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031) - contenteditable: this.isEditable.value, }, ) }, diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts index cab63348..aa1ed6e3 100644 --- a/packages/vue-3/src/VueNodeViewRenderer.ts +++ b/packages/vue-3/src/VueNodeViewRenderer.ts @@ -71,11 +71,6 @@ class VueNodeView extends NodeView { } const onDragStart = this.onDragStart.bind(this) - const isEditable = ref(this.editor.isEditable) - - this.editor.on('viewUpdate', () => { - isEditable.value = this.editor.isEditable - }) this.decorationClasses = ref(this.getDecorationClasses()) @@ -84,7 +79,6 @@ class VueNodeView extends NodeView { props: Object.keys(props), setup: () => { provide('onDragStart', onDragStart) - provide('isEditable', isEditable) provide('decorationClasses', this.decorationClasses) return (this.component as any).setup?.(props)