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

package/README.md

@@ -1,14 +1,14 @@
-# @tiptap/suggestions
-[![Version](https://img.shields.io/npm/v/@tiptap/suggestions.svg?label=version)](https://www.npmjs.com/package/@tiptap/suggestions)
-[![Downloads](https://img.shields.io/npm/dm/@tiptap/suggestions.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
-[![License](https://img.shields.io/npm/l/@tiptap/suggestions.svg)](https://www.npmjs.com/package/@tiptap/suggestions)
+# @tiptap/suggestion
+[![Version](https://img.shields.io/npm/v/@tiptap/suggestion.svg?label=version)](https://www.npmjs.com/package/@tiptap/suggestion)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/suggestion.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/suggestion.svg)](https://www.npmjs.com/package/@tiptap/suggestion)
 [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
 
 ## Introduction
 tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
-## Offical Documentation
+## Official Documentation
 Documentation can be found on the [tiptap website](https://tiptap.dev).
 
 ## License
-tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
+tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/index.cjs

@@ -0,0 +1,235 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/suggestion.ts
+var _state = require('@tiptap/pm/state');
+var _view = require('@tiptap/pm/view');
+
+// src/findSuggestionMatch.ts
+var _core = require('@tiptap/core');
+function findSuggestionMatch(config) {
+  var _a;
+  const {
+    char,
+    allowSpaces,
+    allowedPrefixes,
+    startOfLine,
+    $position
+  } = config;
+  const escapedChar = _core.escapeForRegEx.call(void 0, 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 text = ((_a = $position.nodeBefore) == null ? void 0 : _a.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 === void 0 || match.index === void 0) {
+    return null;
+  }
+  const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index);
+  const matchPrefixIsAllowed = new RegExp(`^[${allowedPrefixes == null ? void 0 : allowedPrefixes.join("")}\0]?$`).test(matchPrefix);
+  if (allowedPrefixes !== null && !matchPrefixIsAllowed) {
+    return null;
+  }
+  const from = textFrom + match.index;
+  let to = from + match[0].length;
+  if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+    match[0] += " ";
+    to += 1;
+  }
+  if (from < $position.pos && to >= $position.pos) {
+    return {
+      range: {
+        from,
+        to
+      },
+      query: match[0].slice(char.length),
+      text: match[0]
+    };
+  }
+  return null;
+}
+
+// src/suggestion.ts
+var SuggestionPluginKey = new (0, _state.PluginKey)("suggestion");
+function Suggestion({
+  pluginKey = SuggestionPluginKey,
+  editor,
+  char = "@",
+  allowSpaces = false,
+  allowedPrefixes = [" "],
+  startOfLine = false,
+  decorationTag = "span",
+  decorationClass = "suggestion",
+  command = () => null,
+  items = () => [],
+  render = () => ({}),
+  allow = () => true
+}) {
+  let props;
+  const renderer = render == null ? void 0 : render();
+  const plugin = new (0, _state.Plugin)({
+    key: pluginKey,
+    view() {
+      return {
+        update: async (view, prevState) => {
+          var _a, _b, _c, _d, _e, _f, _g;
+          const prev = (_a = this.key) == null ? void 0 : _a.getState(prevState);
+          const next = (_b = this.key) == null ? void 0 : _b.getState(view.state);
+          const moved = prev.active && next.active && prev.range.from !== next.range.from;
+          const started = !prev.active && next.active;
+          const stopped = prev.active && !next.active;
+          const changed = !started && !stopped && prev.query !== next.query;
+          const handleStart = started || moved;
+          const handleChange = changed && !moved;
+          const handleExit = stopped || moved;
+          if (!handleStart && !handleChange && !handleExit) {
+            return;
+          }
+          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: [],
+            command: (commandProps) => {
+              command({
+                editor,
+                range: state.range,
+                props: commandProps
+              });
+            },
+            decorationNode,
+            clientRect: decorationNode ? () => {
+              var _a2;
+              const { decorationId } = (_a2 = this.key) == null ? void 0 : _a2.getState(editor.state);
+              const currentDecorationNode = view.dom.querySelector(
+                `[data-decoration-id="${decorationId}"]`
+              );
+              return (currentDecorationNode == null ? void 0 : currentDecorationNode.getBoundingClientRect()) || null;
+            } : null
+          };
+          if (handleStart) {
+            (_c = renderer == null ? void 0 : renderer.onBeforeStart) == null ? void 0 : _c.call(renderer, props);
+          }
+          if (handleChange) {
+            (_d = renderer == null ? void 0 : renderer.onBeforeUpdate) == null ? void 0 : _d.call(renderer, props);
+          }
+          if (handleChange || handleStart) {
+            props.items = await items({
+              editor,
+              query: state.query
+            });
+          }
+          if (handleExit) {
+            (_e = renderer == null ? void 0 : renderer.onExit) == null ? void 0 : _e.call(renderer, props);
+          }
+          if (handleChange) {
+            (_f = renderer == null ? void 0 : renderer.onUpdate) == null ? void 0 : _f.call(renderer, props);
+          }
+          if (handleStart) {
+            (_g = renderer == null ? void 0 : renderer.onStart) == null ? void 0 : _g.call(renderer, props);
+          }
+        },
+        destroy: () => {
+          var _a;
+          if (!props) {
+            return;
+          }
+          (_a = renderer == null ? void 0 : renderer.onExit) == null ? void 0 : _a.call(renderer, props);
+        }
+      };
+    },
+    state: {
+      init() {
+        const state = {
+          active: false,
+          range: {
+            from: 0,
+            to: 0
+          },
+          query: null,
+          text: null,
+          composing: false
+        };
+        return state;
+      },
+      apply(transaction, prev, oldState, state) {
+        const { isEditable } = editor;
+        const { composing } = editor.view;
+        const { selection } = transaction;
+        const { empty, from } = selection;
+        const next = { ...prev };
+        next.composing = composing;
+        if (isEditable && (empty || editor.view.composing)) {
+          if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
+            next.active = false;
+          }
+          const match = findSuggestionMatch({
+            char,
+            allowSpaces,
+            allowedPrefixes,
+            startOfLine,
+            $position: selection.$from
+          });
+          const decorationId = `id_${Math.floor(Math.random() * 4294967295)}`;
+          if (match && allow({ editor, state, range: match.range })) {
+            next.active = true;
+            next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
+            next.range = match.range;
+            next.query = match.query;
+            next.text = match.text;
+          } else {
+            next.active = false;
+          }
+        } else {
+          next.active = false;
+        }
+        if (!next.active) {
+          next.decorationId = null;
+          next.range = { from: 0, to: 0 };
+          next.query = null;
+          next.text = null;
+        }
+        return next;
+      }
+    },
+    props: {
+      handleKeyDown(view, event) {
+        var _a;
+        const { active, range } = plugin.getState(view.state);
+        if (!active) {
+          return false;
+        }
+        return ((_a = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _a.call(renderer, { view, event, range })) || false;
+      },
+      decorations(state) {
+        const { active, range, decorationId } = plugin.getState(state);
+        if (!active) {
+          return null;
+        }
+        return _view.DecorationSet.create(state.doc, [
+          _view.Decoration.inline(range.from, range.to, {
+            nodeName: decorationTag,
+            class: decorationClass,
+            "data-decoration-id": decorationId
+          })
+        ]);
+      }
+    }
+  });
+  return plugin;
+}
+
+// src/index.ts
+var src_default = Suggestion;
+
+
+
+
+
+exports.Suggestion = Suggestion; exports.SuggestionPluginKey = SuggestionPluginKey; exports.default = src_default; exports.findSuggestionMatch = findSuggestionMatch;

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import { Editor, Range } from '@tiptap/core';
+import { PluginKey, EditorState, Plugin } from '@tiptap/pm/state';
+import { EditorView } from '@tiptap/pm/view';
+import { ResolvedPos } from '@tiptap/pm/model';
+
+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?: () => {
+        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;
+}
+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;
+}
+interface SuggestionKeyDownProps {
+    view: EditorView;
+    event: KeyboardEvent;
+    range: Range;
+}
+declare const SuggestionPluginKey: PluginKey<any>;
+declare function Suggestion<I = any>({ pluginKey, editor, char, allowSpaces, allowedPrefixes, startOfLine, decorationTag, decorationClass, command, items, render, allow, }: SuggestionOptions<I>): Plugin<any>;
+
+interface Trigger {
+    char: string;
+    allowSpaces: boolean;
+    allowedPrefixes: string[] | null;
+    startOfLine: boolean;
+    $position: ResolvedPos;
+}
+declare type SuggestionMatch = {
+    range: Range;
+    query: string;
+    text: string;
+} | null;
+declare function findSuggestionMatch(config: Trigger): SuggestionMatch;
+
+export { Suggestion, SuggestionKeyDownProps, SuggestionMatch, SuggestionOptions, SuggestionPluginKey, SuggestionProps, Trigger, Suggestion as default, findSuggestionMatch };

package/dist/index.js

@@ -0,0 +1,235 @@
+// src/suggestion.ts
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+// src/findSuggestionMatch.ts
+import { escapeForRegEx } from "@tiptap/core";
+function findSuggestionMatch(config) {
+  var _a;
+  const {
+    char,
+    allowSpaces,
+    allowedPrefixes,
+    startOfLine,
+    $position
+  } = config;
+  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 text = ((_a = $position.nodeBefore) == null ? void 0 : _a.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 === void 0 || match.index === void 0) {
+    return null;
+  }
+  const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index);
+  const matchPrefixIsAllowed = new RegExp(`^[${allowedPrefixes == null ? void 0 : allowedPrefixes.join("")}\0]?$`).test(matchPrefix);
+  if (allowedPrefixes !== null && !matchPrefixIsAllowed) {
+    return null;
+  }
+  const from = textFrom + match.index;
+  let to = from + match[0].length;
+  if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+    match[0] += " ";
+    to += 1;
+  }
+  if (from < $position.pos && to >= $position.pos) {
+    return {
+      range: {
+        from,
+        to
+      },
+      query: match[0].slice(char.length),
+      text: match[0]
+    };
+  }
+  return null;
+}
+
+// src/suggestion.ts
+var SuggestionPluginKey = new PluginKey("suggestion");
+function Suggestion({
+  pluginKey = SuggestionPluginKey,
+  editor,
+  char = "@",
+  allowSpaces = false,
+  allowedPrefixes = [" "],
+  startOfLine = false,
+  decorationTag = "span",
+  decorationClass = "suggestion",
+  command = () => null,
+  items = () => [],
+  render = () => ({}),
+  allow = () => true
+}) {
+  let props;
+  const renderer = render == null ? void 0 : render();
+  const plugin = new Plugin({
+    key: pluginKey,
+    view() {
+      return {
+        update: async (view, prevState) => {
+          var _a, _b, _c, _d, _e, _f, _g;
+          const prev = (_a = this.key) == null ? void 0 : _a.getState(prevState);
+          const next = (_b = this.key) == null ? void 0 : _b.getState(view.state);
+          const moved = prev.active && next.active && prev.range.from !== next.range.from;
+          const started = !prev.active && next.active;
+          const stopped = prev.active && !next.active;
+          const changed = !started && !stopped && prev.query !== next.query;
+          const handleStart = started || moved;
+          const handleChange = changed && !moved;
+          const handleExit = stopped || moved;
+          if (!handleStart && !handleChange && !handleExit) {
+            return;
+          }
+          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: [],
+            command: (commandProps) => {
+              command({
+                editor,
+                range: state.range,
+                props: commandProps
+              });
+            },
+            decorationNode,
+            clientRect: decorationNode ? () => {
+              var _a2;
+              const { decorationId } = (_a2 = this.key) == null ? void 0 : _a2.getState(editor.state);
+              const currentDecorationNode = view.dom.querySelector(
+                `[data-decoration-id="${decorationId}"]`
+              );
+              return (currentDecorationNode == null ? void 0 : currentDecorationNode.getBoundingClientRect()) || null;
+            } : null
+          };
+          if (handleStart) {
+            (_c = renderer == null ? void 0 : renderer.onBeforeStart) == null ? void 0 : _c.call(renderer, props);
+          }
+          if (handleChange) {
+            (_d = renderer == null ? void 0 : renderer.onBeforeUpdate) == null ? void 0 : _d.call(renderer, props);
+          }
+          if (handleChange || handleStart) {
+            props.items = await items({
+              editor,
+              query: state.query
+            });
+          }
+          if (handleExit) {
+            (_e = renderer == null ? void 0 : renderer.onExit) == null ? void 0 : _e.call(renderer, props);
+          }
+          if (handleChange) {
+            (_f = renderer == null ? void 0 : renderer.onUpdate) == null ? void 0 : _f.call(renderer, props);
+          }
+          if (handleStart) {
+            (_g = renderer == null ? void 0 : renderer.onStart) == null ? void 0 : _g.call(renderer, props);
+          }
+        },
+        destroy: () => {
+          var _a;
+          if (!props) {
+            return;
+          }
+          (_a = renderer == null ? void 0 : renderer.onExit) == null ? void 0 : _a.call(renderer, props);
+        }
+      };
+    },
+    state: {
+      init() {
+        const state = {
+          active: false,
+          range: {
+            from: 0,
+            to: 0
+          },
+          query: null,
+          text: null,
+          composing: false
+        };
+        return state;
+      },
+      apply(transaction, prev, oldState, state) {
+        const { isEditable } = editor;
+        const { composing } = editor.view;
+        const { selection } = transaction;
+        const { empty, from } = selection;
+        const next = { ...prev };
+        next.composing = composing;
+        if (isEditable && (empty || editor.view.composing)) {
+          if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
+            next.active = false;
+          }
+          const match = findSuggestionMatch({
+            char,
+            allowSpaces,
+            allowedPrefixes,
+            startOfLine,
+            $position: selection.$from
+          });
+          const decorationId = `id_${Math.floor(Math.random() * 4294967295)}`;
+          if (match && allow({ editor, state, range: match.range })) {
+            next.active = true;
+            next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
+            next.range = match.range;
+            next.query = match.query;
+            next.text = match.text;
+          } else {
+            next.active = false;
+          }
+        } else {
+          next.active = false;
+        }
+        if (!next.active) {
+          next.decorationId = null;
+          next.range = { from: 0, to: 0 };
+          next.query = null;
+          next.text = null;
+        }
+        return next;
+      }
+    },
+    props: {
+      handleKeyDown(view, event) {
+        var _a;
+        const { active, range } = plugin.getState(view.state);
+        if (!active) {
+          return false;
+        }
+        return ((_a = renderer == null ? void 0 : renderer.onKeyDown) == null ? void 0 : _a.call(renderer, { view, event, range })) || false;
+      },
+      decorations(state) {
+        const { active, range, decorationId } = plugin.getState(state);
+        if (!active) {
+          return null;
+        }
+        return DecorationSet.create(state.doc, [
+          Decoration.inline(range.from, range.to, {
+            nodeName: decorationTag,
+            class: decorationClass,
+            "data-decoration-id": decorationId
+          })
+        ]);
+      }
+    }
+  });
+  return plugin;
+}
+
+// src/index.ts
+var src_default = Suggestion;
+export {
+  Suggestion,
+  SuggestionPluginKey,
+  src_default as default,
+  findSuggestionMatch
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/suggestion",
   "description": "suggestion plugin for tiptap",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.211",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,20 +12,46 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-suggestion.cjs.js",
-  "umd": "dist/tiptap-suggestion.umd.js",
-  "module": "dist/tiptap-suggestion.esm.js",
-  "unpkg": "dist/tiptap-suggestion.bundle.umd.min.js",
-  "types": "dist/packages/suggestion/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
   "files": [
     "src",
     "dist"
   ],
-  "dependencies": {
-    "@tiptap/core": "^2.0.0-beta.21",
-    "prosemirror-model": "^1.14.0",
-    "prosemirror-state": "^1.3.4",
-    "prosemirror-view": "^1.18.2"
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.209",
+    "@tiptap/pm": "^2.0.0-beta.209"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^2.0.0-beta.211",
+    "@tiptap/pm": "^2.0.0-beta.211"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/suggestion"
+  },
+  "scripts": {
+    "build": "tsup"
   },
-  "gitHead": "113d50b814c8860465c8bb16ae2bee3097689016"
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  }
 }