refactoring

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,
     })
   }
 

docs/src/demos/Examples/Community/React/index.jsx

@@ -66,9 +66,9 @@ export default () => {
                 reactRenderer.destroy()
               },
             }
-          }
+          },
         },
-      })
+      }),
     ],
     content: `
       <p>
@@ -84,8 +84,8 @@ export default () => {
   return (
     <div>
       <EditorContent editor={editor} />
-      {editor &&
-        <div className={`character-count ${editor.getCharacterCount() === limit ? 'character-count--warning' : ''}`}>
+      {editor
+        && <div className={`character-count ${editor.getCharacterCount() === limit ? 'character-count--warning' : ''}`}>
           <svg
             height="20"
             width="20"

docs/src/demos/ReactPlayground/index.jsx

@@ -1,6 +1,9 @@
+/* eslint-disable */
 import React, { useState } from 'react'
 import tippy from 'tippy.js'
-import { useEditor, EditorContent, ReactRenderer, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent } from '@tiptap/react'
+import {
+  useEditor, EditorContent, ReactRenderer, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent,
+} from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
 import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -127,13 +130,13 @@ const MenuBar = ({ editor }) => {
   )
 }
 
-const MentionList = (props) => {
-  console.log({props})
+const MentionList = props => {
+  console.log({ props })
 
   return (
     <div>
       mentions
-      {props.items.map((item) => (
+      {props.items.map(item => (
         <div>
           {item}
         </div>
@@ -174,7 +177,7 @@ export default () => {
       Heading.extend({
         draggable: true,
         addNodeView() {
-          return ReactNodeViewRenderer((props) => {
+          return ReactNodeViewRenderer(props => {
             return (
               <NodeViewWrapper>
                 <div className="heading">
@@ -193,7 +196,7 @@ export default () => {
               </NodeViewWrapper>
             )
           })
-        }
+        },
       }),
       Mention.configure({
         suggestion: {
@@ -238,45 +241,45 @@ export default () => {
                 reactRenderer.destroy()
               },
             }
-          }
+          },
         },
-      })
+      }),
     ],
     content: `
       <h1>heading</h1>
       <h2>heading</h2>
       <p>paragraph</p>
     `,
-//     content: `
-//       <h2>
-//         Hi there,
-//       </h2>
-//       <p>
-//         this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-//       </p>
-//       <ul>
-//         <li>
-//           That’s a bullet list with one …
-//         </li>
-//         <li>
-//           … or two list items.
-//         </li>
-//       </ul>
-//       <p>
-//         Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
-//       </p>
-//       <pre><code class="language-css">body {
-//   display: none;
-// }</code></pre>
-//       <p>
-//         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.
-//       </p>
-//       <blockquote>
-//         Wow, that’s amazing. Good work, boy! 👏
-//         <br />
-//         — Mom
-//       </blockquote>
-//     `,
+    //     content: `
+    //       <h2>
+    //         Hi there,
+    //       </h2>
+    //       <p>
+    //         this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+    //       </p>
+    //       <ul>
+    //         <li>
+    //           That’s a bullet list with one …
+    //         </li>
+    //         <li>
+    //           … or two list items.
+    //         </li>
+    //       </ul>
+    //       <p>
+    //         Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+    //       </p>
+    //       <pre><code class="language-css">body {
+    //   display: none;
+    // }</code></pre>
+    //       <p>
+    //         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.
+    //       </p>
+    //       <blockquote>
+    //         Wow, that’s amazing. Good work, boy! 👏
+    //         <br />
+    //         — Mom
+    //       </blockquote>
+    //     `,
   })
 
   return (