From 49fcf829f3573682f3367309c1106a9d52d7e29b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Tue, 16 Mar 2021 22:22:13 +0100 Subject: [PATCH] refactoring --- .eslintrc.js | 3 + .../Examples/Community/React/MentionList.jsx | 6 +- .../demos/Examples/Community/React/index.jsx | 8 +- docs/src/demos/ReactPlayground/index.jsx | 79 ++++++++++--------- packages/core/src/types.ts | 10 +++ packages/react/src/ReactNodeViewRenderer.tsx | 18 +++-- packages/react/src/ReactRenderer.tsx | 4 +- packages/vue-2/src/VueNodeViewRenderer.ts | 9 ++- packages/vue-3/src/VueNodeViewRenderer.ts | 9 ++- 9 files changed, 91 insertions(+), 55 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index c39496c7..9be75250 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,7 +11,9 @@ module.exports = { { files: [ './**/*.ts', + './**/*.tsx', './**/*.js', + './**/*.jsx', './**/*.vue', ], plugins: [ @@ -27,6 +29,7 @@ module.exports = { window: false, }, extends: [ + 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/strongly-recommended', 'airbnb-base', diff --git a/docs/src/demos/Examples/Community/React/MentionList.jsx b/docs/src/demos/Examples/Community/React/MentionList.jsx index 630485ea..148fc4cf 100644 --- a/docs/src/demos/Examples/Community/React/MentionList.jsx +++ b/docs/src/demos/Examples/Community/React/MentionList.jsx @@ -13,7 +13,7 @@ export class MentionList extends React.Component { componentDidUpdate(oldProps) { if (this.props.items !== oldProps.items) { this.setState({ - selectedIndex: 0 + selectedIndex: 0, }) } } @@ -39,13 +39,13 @@ export class MentionList extends React.Component { upHandler() { this.setState({ - selectedIndex: ((this.state.selectedIndex + this.props.items.length) - 1) % this.props.items.length + 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 + selectedIndex: (this.state.selectedIndex + 1) % this.props.items.length, }) } diff --git a/docs/src/demos/Examples/Community/React/index.jsx b/docs/src/demos/Examples/Community/React/index.jsx index 05851737..652fc456 100644 --- a/docs/src/demos/Examples/Community/React/index.jsx +++ b/docs/src/demos/Examples/Community/React/index.jsx @@ -66,9 +66,9 @@ export default () => { reactRenderer.destroy() }, } - } + }, }, - }) + }), ], content: `

@@ -84,8 +84,8 @@ export default () => { return (

- {editor && -
+ {editor + &&
{ ) } -const MentionList = (props) => { - console.log({props}) +const MentionList = props => { + console.log({ props }) return (
mentions - {props.items.map((item) => ( + {props.items.map(item => (
{item}
@@ -174,7 +177,7 @@ export default () => { Heading.extend({ draggable: true, addNodeView() { - return ReactNodeViewRenderer((props) => { + return ReactNodeViewRenderer(props => { return (
@@ -193,7 +196,7 @@ export default () => { ) }) - } + }, }), Mention.configure({ suggestion: { @@ -238,45 +241,45 @@ export default () => { reactRenderer.destroy() }, } - } + }, }, - }) + }), ], content: `

heading

heading

paragraph

`, -// content: ` -//

-// Hi there, -//

-//

-// this is a basic basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: -//

-//
    -//
  • -// That’s a bullet list with one … -//
    • -//
  • -// … or two list items. -//
    • -//
-//

-// Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block: -//

-// 
body {
-//   display: none;
-// }
-//

-// I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too. -//

-//
-// Wow, that’s amazing. Good work, boy! 👏 -//
-// — Mom -//
-// `, + // content: ` + //

+ // Hi there, + //

+ //

+ // this is a basic basic example of tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: + //

+ //
    + //
  • + // That’s a bullet list with one … + //
    • + //
  • + // … or two list items. + //
    • + //
+ //

+ // Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block: + //

+ // 
body {
+    //   display: none;
+    // }
+ //

+ // I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too. + //

+ //
+ // Wow, that’s amazing. Good work, boy! 👏 + //
+ // — Mom + //
+ // `, }) return ( diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index d289c20c..7bcc038d 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -112,6 +112,16 @@ export type ValuesOf = T[keyof T]; export type KeysWithTypeOf = ({[P in keyof T]: T[P] extends Type ? P : never })[keyof T] +export type NodeViewProps = { + editor: Editor, + node: ProseMirrorNode, + decorations: Decoration[], + selected: boolean, + extension: Node, + getPos: () => number, + updateAttributes: (attributes: AnyObject) => void, +} + export type NodeViewRendererProps = { editor: Editor, node: ProseMirrorNode, diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index 334b0a9c..60406795 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -1,5 +1,10 @@ import React, { useState, useEffect } from 'react' -import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core' +import { + NodeView, + NodeViewProps, + NodeViewRenderer, + NodeViewRendererProps, +} from '@tiptap/core' import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view' import { Node as ProseMirrorNode } from 'prosemirror-model' import { Editor } from './Editor' @@ -16,7 +21,7 @@ class ReactNodeView extends NodeView { renderer!: ReactRenderer mount() { - const props = { + const props: NodeViewProps = { editor: this.editor, node: this.node, decorations: this.decorations, @@ -35,10 +40,11 @@ class ReactNodeView extends NodeView { this.component.displayName = capitalizeFirstChar(this.extension.config.name) } - const ReactNodeView: React.FunctionComponent = (props) => { + 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) @@ -50,12 +56,14 @@ class ReactNodeView extends NodeView { return ( - + ) } - this.renderer = new ReactRenderer(ReactNodeView, { + ReactNodeViewProvider.displayName = 'ReactNodeView' + + this.renderer = new ReactRenderer(ReactNodeViewProvider, { editor: this.editor, props, }) diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx index 3f2e5763..db1011a6 100644 --- a/packages/react/src/ReactRenderer.tsx +++ b/packages/react/src/ReactRenderer.tsx @@ -46,7 +46,9 @@ export class ReactRenderer { const props = this.props if (isClassComponent(Component)) { - props.ref = (ref: React.Component) => this.ref = ref + props.ref = (ref: React.Component) => { + this.ref = ref + } } this.reactElement = diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts index 68978a43..98d60493 100644 --- a/packages/vue-2/src/VueNodeViewRenderer.ts +++ b/packages/vue-2/src/VueNodeViewRenderer.ts @@ -1,4 +1,9 @@ -import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core' +import { + NodeView, + NodeViewProps, + NodeViewRenderer, + NodeViewRendererProps, +} from '@tiptap/core' import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view' import { Node as ProseMirrorNode } from 'prosemirror-model' import Vue from 'vue' @@ -16,7 +21,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> { renderer!: VueRenderer mount() { - const props = { + const props: NodeViewProps = { editor: this.editor, node: this.node, decorations: this.decorations, diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts index 21013db2..2805a0b7 100644 --- a/packages/vue-3/src/VueNodeViewRenderer.ts +++ b/packages/vue-3/src/VueNodeViewRenderer.ts @@ -1,4 +1,9 @@ -import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core' +import { + NodeView, + NodeViewProps, + NodeViewRenderer, + NodeViewRendererProps, +} from '@tiptap/core' import { ref, provide, @@ -20,7 +25,7 @@ class VueNodeView extends NodeView { renderer!: VueRenderer mount() { - const props = { + const props: NodeViewProps = { editor: this.editor, node: this.node, decorations: this.decorations,