refactoring

packages/core/src/commands/replace.ts

@@ -1,11 +1,6 @@
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../helpers/getNodeType'
-import { Command } from '../types'
+import { Command, Range } from '../types'
-
-export type Range = {
-  from: number,
-  to: number,
-}
 
 /**
  * Replaces text with a node within a range.

packages/core/src/types.ts

@@ -130,3 +130,8 @@ export type ChainedCommands = {
 export type CanCommands = SingleCommands & { chain: () => ChainedCommands }
 
 export type FocusPosition = 'start' | 'end' | number | boolean | null
+
+export type Range = {
+  from: number,
+  to: number,
+}

packages/extension-mention/src/mention.ts

@@ -8,7 +8,6 @@ export const Mention = Node.create({
 
   defaultOptions: <MentionOptions>{
     char: '@',
-    render: () => ({}),
   },
 
   group: 'inline',
@@ -50,6 +49,7 @@ export const Mention = Node.create({
         command: ({ range }) => {
           this.editor
             .chain()
+            .focus()
             .replace(range, 'mention')
             .insertText(' ')
             .run()

packages/suggestion/src/findSuggestionMatch.ts

@@ -1,3 +1,4 @@
+import { Range } from '@tiptap/core'
 import { ResolvedPos } from 'prosemirror-model'
 
 export interface Trigger {
@@ -8,10 +9,7 @@ export interface Trigger {
 }
 
 export type SuggestionMatch = {
-  range: {
+  range: Range,
-    from: number,
-    to: number,
-  },
   query: string,
   text: string,
 } | null

packages/suggestion/src/getVirtualNode.ts

@@ -1,4 +1,10 @@
-export function getVirtualNode(node: Element) {
+export interface VirtualNode {
+  getBoundingClientRect: () => DOMRect,
+  clientWidth: number,
+  clientHeight: number,
+}
+
+export function getVirtualNode(node: Element): VirtualNode {
   return {
     getBoundingClientRect() {
       return node.getBoundingClientRect()

packages/suggestion/src/index.ts

@@ -1,5 +1,7 @@
 import { Suggestion } from './suggestion'
 
+export * from './findSuggestionMatch'
+export * from './getVirtualNode'
 export * from './suggestion'
 
 export default Suggestion

packages/suggestion/src/suggestion.ts

@@ -1,8 +1,8 @@
-import { Editor } from '@tiptap/core'
+import { Editor, Range } from '@tiptap/core'
 import { Plugin, PluginKey } from 'prosemirror-state'
-import { Decoration, DecorationSet } from 'prosemirror-view'
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
 import { findSuggestionMatch } from './findSuggestionMatch'
-import { getVirtualNode } from './getVirtualNode'
+import { getVirtualNode, VirtualNode } from './getVirtualNode'
 
 export interface SuggestionOptions {
   editor: Editor,
@@ -10,17 +10,35 @@ export interface SuggestionOptions {
   allowSpaces?: boolean,
   startOfLine?: boolean,
   suggestionClass?: string,
-  command?: (props: any) => any,
+  command?: (props: { range: Range }) => void,
   items?: (query: string) => any[],
   render?: () => {
-    onStart?: (props: any) => void,
+    onStart?: (props: SuggestionProps) => void,
-    onUpdate?: (props: any) => void,
+    onUpdate?: (props: SuggestionProps) => void,
-    onExit?: (props: any) => void,
+    onExit?: (props: SuggestionProps) => void,
-    onKeyDown?: (props: any) => boolean,
+    onKeyDown?: (props: SuggestionKeyDownProps) => boolean,
   },
 }
 
+export interface SuggestionProps {
+  editor: Editor,
+  range: Range,
+  query: string,
+  text: string,
+  items: any[],
+  command: () => void,
+  decorationNode: Element | null,
+  virtualNode: VirtualNode | null,
+}
+
+export interface SuggestionKeyDownProps {
+  view: EditorView,
+  event: KeyboardEvent,
+  range: Range,
+}
+
 export function Suggestion({
+  editor,
   char = '@',
   allowSpaces = false,
   startOfLine = false,
@@ -57,8 +75,8 @@ export function Suggestion({
 
           const state = handleExit ? prev : next
           const decorationNode = document.querySelector(`[data-decoration-id="${state.decorationId}"]`)
-          const props = {
+          const props: SuggestionProps = {
-            view,
+            editor,
             range: state.range,
             query: state.query,
             text: state.text,