add react suggestion example

2021-03-16 19:12:26 +01:00
parent 6841408e0d
commit 9201a7dff2
11 changed files with 288 additions and 10 deletions
--- a/docs/src/demos/Examples/Community/Vue/index.vue
+++ b/docs/src/demos/Examples/Community/Vue/index.vue
@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+
+    <div v-if="editor" :class="{'character-count': true, 'character-count--warning': editor.getCharacterCount() === limit}">
+      <svg
+        height="20"
+        width="20"
+        viewBox="0 0 20 20"
+        class="character-count__graph"
+      >
+        <circle
+          r="10"
+          cx="10"
+          cy="10"
+          fill="#e9ecef"
+        />
+        <circle
+          r="5"
+          cx="10"
+          cy="10"
+          fill="transparent"
+          stroke="currentColor"
+          stroke-width="10"
+          :stroke-dasharray="`calc(${percentage} * 31.4 / 100) 31.4`"
+          transform="rotate(-90) translate(-20)"
+        />
+        <circle
+          r="6"
+          cx="10"
+          cy="10"
+          fill="white"
+        />
+      </svg>
+
+      <div class="character-count__text">
+        {{ editor.getCharacterCount() }}/{{ limit }} characters
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import tippy from 'tippy.js'
+import { Editor, EditorContent, VueRenderer } from '@tiptap/vue-2'
+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'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+      limit: 280,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        CharacterCount.configure({
+          limit: this.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 component
+              let popup
+
+              return {
+                onStart: props => {
+                  component = new VueRenderer(MentionList, {
+                    parent: this,
+                    propsData: props,
+                  })
+
+                  popup = tippy('body', {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: () => document.body,
+                    content: component.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'bottom-start',
+                  })
+                },
+                onUpdate(props) {
+                  component.updateProps(props)
+
+                  popup[0].setProps({
+                    getReferenceClientRect: props.clientRect,
+                  })
+                },
+                onKeyDown(props) {
+                  return component.ref.onKeyDown(props)
+                },
+                onExit() {
+                  popup[0].destroy()
+                  component.destroy()
+                },
+              }
+            },
+          },
+        }),
+      ],
+      content: `
+        <p>
+          What do you all think about the new <span data-mention="Winona Ryder"></span> movie?
+        </p>
+      `,
+    })
+  },
+
+  computed: {
+    percentage() {
+      return Math.round((100 / this.limit) * this.editor.getCharacterCount())
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+}
+
+.mention {
+  color: #A975FF;
+  background-color: rgba(#A975FF, 0.1);
+  border-radius: 0.3rem;
+  padding: 0.1rem 0.3rem;
+}
+
+.character-count {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  color: #68CEF8;
+
+  &--warning {
+    color: #FB5151;
+  }
+
+  &__graph {
+    margin-right: 0.5rem;
+  }
+
+  &__text {
+    color: #868e96;
+  }
+}
+</style>