@tiptap/suggestion 2.0.0-beta.21 → 2.0.0-beta.211

package/src/findSuggestionMatch.ts

@@ -1,59 +1,56 @@
-import { Range } from '@tiptap/core'
-import { ResolvedPos } from 'prosemirror-model'
+import { escapeForRegEx, Range } from '@tiptap/core'
+import { ResolvedPos } from '@tiptap/pm/model'
 
 export interface Trigger {
-  char: string,
-  allowSpaces: boolean,
-  startOfLine: boolean,
-  $position: ResolvedPos,
+  char: string
+  allowSpaces: boolean
+  allowedPrefixes: string[] | null
+  startOfLine: boolean
+  $position: ResolvedPos
 }
 
 export type SuggestionMatch = {
-  range: Range,
-  query: string,
-  text: string,
+  range: Range
+  query: string
+  text: string
 } | null
 
 export function findSuggestionMatch(config: Trigger): SuggestionMatch {
   const {
-    char,
-    allowSpaces,
-    startOfLine,
-    $position,
+    char, allowSpaces, allowedPrefixes, startOfLine, $position,
   } = config
 
-  // cancel if top level node
-  if ($position.depth <= 0) {
-    return null
-  }
-
-  // Matching expressions used for later
-  const escapedChar = `\\${char}`
+  const escapedChar = escapeForRegEx(char)
   const suffix = new RegExp(`\\s${escapedChar}$`)
   const prefix = startOfLine ? '^' : ''
   const regexp = allowSpaces
     ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${escapedChar}|$)`, 'gm')
     : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${escapedChar}]*`, 'gm')
 
-  const textFrom = $position.before()
-  const textTo = $position.pos
-  const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
+  const text = $position.nodeBefore?.isText && $position.nodeBefore.text
+
+  if (!text) {
+    return null
+  }
+
+  const textFrom = $position.pos - text.length
   const match = Array.from(text.matchAll(regexp)).pop()
 
   if (!match || match.input === undefined || match.index === undefined) {
     return null
   }
 
-  // JavaScript doesn't have lookbehinds; this hacks a check that first character is " "
-  // or the line beginning
+  // JavaScript doesn't have lookbehinds. This hacks a check that first character
+  // is a space or the start of the line
   const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index)
+  const matchPrefixIsAllowed = new RegExp(`^[${allowedPrefixes?.join('')}\0]?$`).test(matchPrefix)
 
-  if (!/^[\s\0]?$/.test(matchPrefix)) {
+  if (allowedPrefixes !== null && !matchPrefixIsAllowed) {
     return null
   }
 
   // The absolute position of the match in the document
-  const from = match.index + $position.start()
+  const from = textFrom + match.index
   let to = from + match[0].length
 
   // Edge case handling; if spaces are allowed and we're directly in between

package/src/suggestion.ts

@@ -1,54 +1,56 @@
 import { Editor, Range } from '@tiptap/core'
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet, EditorView } from '@tiptap/pm/view'
+
 import { findSuggestionMatch } from './findSuggestionMatch'
 
-export interface SuggestionOptions {
-  editor: Editor,
-  char?: string,
-  allowSpaces?: boolean,
-  startOfLine?: boolean,
-  decorationTag?: string,
-  decorationClass?: string,
-  command?: (props: {
-    editor: Editor,
-    range: Range,
-    props: any,
-  }) => void,
-  items?: (query: string) => any[],
+export interface SuggestionOptions<I = any> {
+  pluginKey?: PluginKey
+  editor: Editor
+  char?: string
+  allowSpaces?: boolean
+  allowedPrefixes?: string[] | null
+  startOfLine?: boolean
+  decorationTag?: string
+  decorationClass?: string
+  command?: (props: { editor: Editor; range: Range; props: I }) => void
+  items?: (props: { query: string; editor: Editor }) => I[] | Promise<I[]>
   render?: () => {
-    onStart?: (props: SuggestionProps) => void,
-    onUpdate?: (props: SuggestionProps) => void,
-    onExit?: (props: SuggestionProps) => void,
-    onKeyDown?: (props: SuggestionKeyDownProps) => boolean,
-  },
-  allow?: (props: {
-    editor: Editor,
-    range: Range,
-  }) => boolean,
+    onBeforeStart?: (props: SuggestionProps<I>) => void
+    onStart?: (props: SuggestionProps<I>) => void
+    onBeforeUpdate?: (props: SuggestionProps<I>) => void
+    onUpdate?: (props: SuggestionProps<I>) => void
+    onExit?: (props: SuggestionProps<I>) => void
+    onKeyDown?: (props: SuggestionKeyDownProps) => boolean
+  }
+  allow?: (props: { editor: Editor; state: EditorState; range: Range }) => boolean
 }
 
-export interface SuggestionProps {
-  editor: Editor,
-  range: Range,
-  query: string,
-  text: string,
-  items: any[],
-  command: (props: any) => void,
-  decorationNode: Element | null,
-  clientRect: () => (DOMRect | null),
+export interface SuggestionProps<I = any> {
+  editor: Editor
+  range: Range
+  query: string
+  text: string
+  items: I[]
+  command: (props: I) => void
+  decorationNode: Element | null
+  clientRect?: (() => DOMRect | null) | null
 }
 
 export interface SuggestionKeyDownProps {
-  view: EditorView,
-  event: KeyboardEvent,
-  range: Range,
+  view: EditorView
+  event: KeyboardEvent
+  range: Range
 }
 
-export function Suggestion({
+export const SuggestionPluginKey = new PluginKey('suggestion')
+
+export function Suggestion<I = any>({
+  pluginKey = SuggestionPluginKey,
   editor,
   char = '@',
   allowSpaces = false,
+  allowedPrefixes = [' '],
   startOfLine = false,
   decorationTag = 'span',
   decorationClass = 'suggestion',
@@ -56,12 +58,12 @@ export function Suggestion({
   items = () => [],
   render = () => ({}),
   allow = () => true,
-}: SuggestionOptions) {
-
+}: SuggestionOptions<I>) {
+  let props: SuggestionProps<I> | undefined
   const renderer = render?.()
 
-  return new Plugin({
-    key: new PluginKey('suggestion'),
+  const plugin: Plugin<any> = new Plugin({
+    key: pluginKey,
 
     view() {
       return {
@@ -83,16 +85,17 @@ export function Suggestion({
             return
           }
 
-          const state = handleExit ? prev : next
-          const decorationNode = document.querySelector(`[data-decoration-id="${state.decorationId}"]`)
-          const props: SuggestionProps = {
+          const state = handleExit && !handleStart ? prev : next
+          const decorationNode = view.dom.querySelector(
+            `[data-decoration-id="${state.decorationId}"]`,
+          )
+
+          props = {
             editor,
             range: state.range,
             query: state.query,
             text: state.text,
-            items: (handleChange || handleStart)
-              ? await items(state.query)
-              : [],
+            items: [],
             command: commandProps => {
               command({
                 editor,
@@ -103,7 +106,32 @@ export function Suggestion({
             decorationNode,
             // virtual node for popper.js or tippy.js
             // this can be used for building popups without a DOM node
-            clientRect: () => decorationNode?.getBoundingClientRect() || null,
+            clientRect: decorationNode
+              ? () => {
+                // because of `items` can be asynchrounous we’ll search for the current decoration node
+                  const { decorationId } = this.key?.getState(editor.state) // eslint-disable-line
+                const currentDecorationNode = view.dom.querySelector(
+                  `[data-decoration-id="${decorationId}"]`,
+                )
+
+                return currentDecorationNode?.getBoundingClientRect() || null
+              }
+              : null,
+          }
+
+          if (handleStart) {
+            renderer?.onBeforeStart?.(props)
+          }
+
+          if (handleChange) {
+            renderer?.onBeforeUpdate?.(props)
+          }
+
+          if (handleChange || handleStart) {
+            props.items = await items({
+              editor,
+              query: state.query,
+            })
           }
 
           if (handleExit) {
@@ -118,29 +146,57 @@ export function Suggestion({
             renderer?.onStart?.(props)
           }
         },
+
+        destroy: () => {
+          if (!props) {
+            return
+          }
+
+          renderer?.onExit?.(props)
+        },
       }
     },
 
     state: {
       // Initialize the plugin's internal state.
       init() {
-        return {
+        const state: {
+          active: boolean
+          range: Range
+          query: null | string
+          text: null | string
+          composing: boolean
+          decorationId?: string | null
+        } = {
           active: false,
-          range: {},
+          range: {
+            from: 0,
+            to: 0,
+          },
           query: null,
           text: null,
+          composing: false,
         }
+
+        return state
       },
 
       // Apply changes to the plugin state from a view transaction.
-      apply(transaction, prev) {
+      apply(transaction, prev, oldState, state) {
+        const { isEditable } = editor
+        const { composing } = editor.view
         const { selection } = transaction
+        const { empty, from } = selection
         const next = { ...prev }
 
-        // We can only be suggesting if there is no selection
-        if (selection.from === selection.to) {
+        next.composing = composing
+
+        // We can only be suggesting if the view is editable, and:
+        //   * there is no selection, or
+        //   * a composition is active (see: https://github.com/ueberdosis/tiptap/issues/1449)
+        if (isEditable && (empty || editor.view.composing)) {
           // Reset active state if we just left the previous suggestion range
-          if (selection.from < prev.range.from || selection.from > prev.range.to) {
+          if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
             next.active = false
           }
 
@@ -148,13 +204,14 @@ export function Suggestion({
           const match = findSuggestionMatch({
             char,
             allowSpaces,
+            allowedPrefixes,
             startOfLine,
             $position: selection.$from,
           })
-          const decorationId = `id_${Math.floor(Math.random() * 0xFFFFFFFF)}`
+          const decorationId = `id_${Math.floor(Math.random() * 0xffffffff)}`
 
           // If we found a match, update the current state to show it
-          if (match && allow({ editor, range: match.range })) {
+          if (match && allow({ editor, state, range: match.range })) {
             next.active = true
             next.decorationId = prev.decorationId ? prev.decorationId : decorationId
             next.range = match.range
@@ -170,7 +227,7 @@ export function Suggestion({
         // Make sure to empty the range if suggestion is inactive
         if (!next.active) {
           next.decorationId = null
-          next.range = {}
+          next.range = { from: 0, to: 0 }
           next.query = null
           next.text = null
         }
@@ -182,7 +239,7 @@ export function Suggestion({
     props: {
       // Call the keydown hook if suggestion is active.
       handleKeyDown(view, event) {
-        const { active, range } = this.getState(view.state)
+        const { active, range } = plugin.getState(view.state)
 
         if (!active) {
           return false
@@ -193,7 +250,7 @@ export function Suggestion({
 
       // Setup decorator on the currently active suggestion.
       decorations(state) {
-        const { active, range, decorationId } = this.getState(state)
+        const { active, range, decorationId } = plugin.getState(state)
 
         if (!active) {
           return null
@@ -209,4 +266,6 @@ export function Suggestion({
       },
     },
   })
+
+  return plugin
 }

package/CHANGELOG.md

@@ -1,264 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.0.0-beta.21](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.20...@tiptap/suggestion@2.0.0-beta.21) (2021-04-08)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.20](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.19...@tiptap/suggestion@2.0.0-beta.20) (2021-04-07)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.19](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.18...@tiptap/suggestion@2.0.0-beta.19) (2021-04-07)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.18](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.17...@tiptap/suggestion@2.0.0-beta.18) (2021-04-07)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.17](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.16...@tiptap/suggestion@2.0.0-beta.17) (2021-04-07)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.16](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.15...@tiptap/suggestion@2.0.0-beta.16) (2021-04-07)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.15](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.14...@tiptap/suggestion@2.0.0-beta.15) (2021-04-06)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.14](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.13...@tiptap/suggestion@2.0.0-beta.14) (2021-04-04)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.13](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.12...@tiptap/suggestion@2.0.0-beta.13) (2021-04-02)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.11...@tiptap/suggestion@2.0.0-beta.12) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.11](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.10...@tiptap/suggestion@2.0.0-beta.11) (2021-04-01)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.10](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.9...@tiptap/suggestion@2.0.0-beta.10) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.9](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.8...@tiptap/suggestion@2.0.0-beta.9) (2021-03-28)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.8](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.7...@tiptap/suggestion@2.0.0-beta.8) (2021-03-28)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.7](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.6...@tiptap/suggestion@2.0.0-beta.7) (2021-03-28)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.6](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.5...@tiptap/suggestion@2.0.0-beta.6) (2021-03-24)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.5](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.4...@tiptap/suggestion@2.0.0-beta.5) (2021-03-18)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.3...@tiptap/suggestion@2.0.0-beta.4) (2021-03-18)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.2...@tiptap/suggestion@2.0.0-beta.3) (2021-03-16)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.2](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-beta.1...@tiptap/suggestion@2.0.0-beta.2) (2021-03-09)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-beta.1](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.12...@tiptap/suggestion@2.0.0-beta.1) (2021-03-05)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.12](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.11...@tiptap/suggestion@2.0.0-alpha.12) (2021-02-28)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.11](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.10...@tiptap/suggestion@2.0.0-alpha.11) (2021-02-26)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.10](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.9...@tiptap/suggestion@2.0.0-alpha.10) (2021-02-26)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.9](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.8...@tiptap/suggestion@2.0.0-alpha.9) (2021-02-18)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.8](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.7...@tiptap/suggestion@2.0.0-alpha.8) (2021-02-16)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.7](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.6...@tiptap/suggestion@2.0.0-alpha.7) (2021-02-16)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.6](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.5...@tiptap/suggestion@2.0.0-alpha.6) (2021-02-07)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.5](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.4...@tiptap/suggestion@2.0.0-alpha.5) (2021-02-05)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.3...@tiptap/suggestion@2.0.0-alpha.4) (2021-01-29)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.2...@tiptap/suggestion@2.0.0-alpha.3) (2021-01-29)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# [2.0.0-alpha.2](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/suggestion@2.0.0-alpha.1...@tiptap/suggestion@2.0.0-alpha.2) (2021-01-28)
-
-**Note:** Version bump only for package @tiptap/suggestion
-
-
-
-
-
-# 2.0.0-alpha.1 (2021-01-28)
-
-**Note:** Version bump only for package @tiptap/suggestion

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020, überdosis GbR
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/packages/suggestion/src/findSuggestionMatch.d.ts

@@ -1,14 +0,0 @@
-import { Range } from '@tiptap/core';
-import { ResolvedPos } from 'prosemirror-model';
-export interface Trigger {
-    char: string;
-    allowSpaces: boolean;
-    startOfLine: boolean;
-    $position: ResolvedPos;
-}
-export declare type SuggestionMatch = {
-    range: Range;
-    query: string;
-    text: string;
-} | null;
-export declare function findSuggestionMatch(config: Trigger): SuggestionMatch;

package/dist/packages/suggestion/src/index.d.ts

@@ -1,4 +0,0 @@
-import { Suggestion } from './suggestion';
-export * from './findSuggestionMatch';
-export * from './suggestion';
-export default Suggestion;