@atlaskit/editor-plugin-autocomplete 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @atlaskit/editor-plugin-autocomplete
+
+## 0.2.0
+
+### Minor Changes
+
+- [`d214555fc7540`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d214555fc7540) -
+  Add editor plugin for AI-powered inline autocomplete

package/afm-cc/tsconfig.json

@@ -5,7 +5,11 @@
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-autocomplete",
 		"rootDir": "../",
 		"composite": true,
-		"noCheck": true
+		"noCheck": true,
+		// resolveJsonModule must remain false: this package contains LFS-tracked JSON data files
+		// that appear as pointer text (not valid JSON) in CI environments where LFS is skipped.
+		// Enabling resolveJsonModule would cause TS to attempt parsing these files and fail.
+		"resolveJsonModule": false
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-jira/tsconfig.json

@@ -5,7 +5,11 @@
 		"outDir": "../../../../../jira/tsDist/@atlaskit__editor-plugin-autocomplete/app",
 		"rootDir": "../",
 		"composite": true,
-		"noCheck": true
+		"noCheck": true,
+		// resolveJsonModule must remain false: this package contains LFS-tracked JSON data files
+		// that appear as pointer text (not valid JSON) in CI environments where LFS is skipped.
+		// Enabling resolveJsonModule would cause TS to attempt parsing these files and fail.
+		"resolveJsonModule": false
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-products/tsconfig.json

@@ -5,7 +5,11 @@
 		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-autocomplete/app",
 		"rootDir": "../",
 		"composite": true,
-		"noCheck": true
+		"noCheck": true,
+		// resolveJsonModule must remain false: this package contains LFS-tracked JSON data files
+		// that appear as pointer text (not valid JSON) in CI environments where LFS is skipped.
+		// Enabling resolveJsonModule would cause TS to attempt parsing these files and fail.
+		"resolveJsonModule": false
 	},
 	"include": [
 		"../src/**/*.ts",

package/build/tsconfig.json

@@ -0,0 +1,24 @@
+{
+	"extends": "../tsconfig",
+	"compilerOptions": {
+		"paths": {},
+		// resolveJsonModule must remain false: this package contains LFS-tracked JSON data files
+		// that appear as pointer text (not valid JSON) in CI environments where LFS is skipped.
+		// We also intentionally do not set "target": "es5" here (unlike the standard generated
+		// build tsconfig) because the ESLint require-unicode-regexp rule enforces the 'u' flag
+		// on regexes, which requires es6+ target to compile.
+		"resolveJsonModule": false
+	},
+	"include": ["../src/**/*.ts", "../src/**/*.tsx"],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	]
+}

package/dist/cjs/autocompletePlugin.js

@@ -4,11 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.autocompletePlugin = void 0;
-// This file will contain the autocomplete plugin implementation.
-// The full implementation will be added in a follow-up PR.
-
-var autocompletePlugin = exports.autocompletePlugin = function autocompletePlugin() {
+var _autocompletePlugin = require("./pm-plugins/autocomplete-plugin");
+var autocompletePlugin = exports.autocompletePlugin = function autocompletePlugin(_ref) {
+  var options = _ref.config;
   return {
-    name: 'autocomplete'
+    name: 'autocomplete',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return _autocompletePlugin.autocompletePluginKey.getState(editorState);
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'autocomplete',
+        plugin: function plugin() {
+          return (0, _autocompletePlugin.createAutocompletePlugin)(options);
+        }
+      }];
+    }
   };
 };

package/dist/cjs/autocompletePluginType.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/pm-plugins/autocomplete-plugin.js

@@ -0,0 +1,361 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutocompletePlugin = exports.autocompletePluginKey = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _ghostTextDecoration = require("./ghost-text-decoration");
+var _slowLaneClient = require("./slow-lane-client");
+var _textPredictor = require("./text-predictor");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SLOW_LANE_ENDPOINT = '/gateway/api/v1/autocomplete/typeahead-encodings';
+var autocompletePluginKey = exports.autocompletePluginKey = new _state.PluginKey('autocomplete');
+var DEBOUNCE_MS = 150;
+var createInitialState = function createInitialState() {
+  return {
+    ghostText: '',
+    ghostPosition: -1,
+    decorationSet: _view.DecorationSet.empty
+  };
+};
+
+/**
+ * Extract text content before the cursor from the current document.
+ * Returns the last ~200 characters for context.
+ */
+var getTextBeforeCursor = function getTextBeforeCursor(state) {
+  var $from = state.selection.$from;
+  var maxChars = 200;
+
+  // 1. Get the perfectly flattened text of the current block up to the cursor
+  var blockNode = $from.parent;
+  var offsetInBlock = $from.parentOffset;
+  var blockText = blockNode.textContent.slice(0, offsetInBlock);
+  if (blockText.length >= maxChars) {
+    return blockText.slice(-maxChars);
+  }
+  var fullText = blockText;
+
+  // 2. Walk backwards through previous blocks
+  var depth = $from.depth - 1;
+  while (fullText.length < maxChars && depth >= 0) {
+    var parentNode = $from.node(depth);
+    var indexInParent = $from.index(depth);
+    for (var i = indexInParent - 1; i >= 0 && fullText.length < maxChars; i--) {
+      var sibling = parentNode.child(i);
+      var siblingText = sibling.textContent;
+      fullText = siblingText + '\n' + fullText;
+    }
+    depth--;
+  }
+  return fullText.slice(-maxChars);
+};
+
+/**
+ * Set the autocomplete state via a transaction metadata.
+ */
+var setAutocompleteMeta = function setAutocompleteMeta(tr, meta) {
+  return tr.setMeta(autocompletePluginKey, meta);
+};
+
+/**
+ * Apply a ghost text suggestion to the editor state.
+ */
+var showGhostText = function showGhostText(view, text, position) {
+  var state = view.state,
+    dispatch = view.dispatch;
+  var decorationSet = (0, _ghostTextDecoration.createGhostTextDecorationSet)(state, position, text);
+  var tr = setAutocompleteMeta(state.tr, {
+    ghostText: text,
+    ghostPosition: position,
+    decorationSet: decorationSet
+  });
+  dispatch(tr);
+};
+
+/**
+ * Clear the current ghost text from the editor.
+ */
+var clearGhostText = function clearGhostText(state, dispatch) {
+  var pluginState = autocompletePluginKey.getState(state);
+  if (!pluginState || !pluginState.ghostText) {
+    return false;
+  }
+  if (dispatch) {
+    var tr = setAutocompleteMeta(state.tr, {
+      ghostText: '',
+      ghostPosition: -1,
+      decorationSet: _view.DecorationSet.empty
+    });
+    dispatch(tr);
+  }
+  return true;
+};
+
+/**
+ * Accept the current ghost text suggestion and insert it into the document.
+ */
+var acceptGhostText = function acceptGhostText(state, dispatch) {
+  var pluginState = autocompletePluginKey.getState(state);
+  if (!pluginState || !pluginState.ghostText) {
+    return false;
+  }
+  if (dispatch) {
+    var ghostText = pluginState.ghostText,
+      ghostPosition = pluginState.ghostPosition;
+    var tr = state.tr.insertText(ghostText, ghostPosition);
+    tr = setAutocompleteMeta(tr, {
+      ghostText: '',
+      ghostPosition: -1,
+      decorationSet: _view.DecorationSet.empty
+    });
+    dispatch(tr);
+  }
+  return true;
+};
+
+/**
+ * Context provided to the autocomplete plugin on first editor focus.
+ * Text fields are selectively ingested to boost word-frequency scoring for
+ * predictions, giving words already present in the document/thread an L1
+ * priority boost.
+ */
+
+/**
+ * Build the text payload for the slow-lane request by prepending any available
+ * comment context ahead of the live document text. This gives the backend
+ * model richer context about the thread the user is writing in.
+ */
+var buildSlowLaneText = function buildSlowLaneText(docText, context) {
+  var _context$siblingComme, _context$siblingComme2, _context$siblingComme3;
+  var lines = [];
+  if (context !== null && context !== void 0 && context.parentCommentContent) {
+    lines.push("comment: ".concat(context.parentCommentContent));
+  }
+  context === null || context === void 0 || (_context$siblingComme = context.siblingCommentsContents) === null || _context$siblingComme === void 0 || _context$siblingComme.forEach(function (sibling, index) {
+    lines.push("reply ".concat(index + 1, ": ").concat(sibling));
+  });
+  var nextReplyNumber = ((_context$siblingComme2 = context === null || context === void 0 || (_context$siblingComme3 = context.siblingCommentsContents) === null || _context$siblingComme3 === void 0 ? void 0 : _context$siblingComme3.length) !== null && _context$siblingComme2 !== void 0 ? _context$siblingComme2 : 0) + 1;
+  lines.push("reply ".concat(nextReplyNumber, ": ").concat(docText));
+  return lines.join('\n');
+};
+var createAutocompletePlugin = exports.createAutocompletePlugin = function createAutocompletePlugin(options) {
+  var debounceTimer = null;
+  var hasIngestedPage = false;
+  var resolvedContext;
+  /**
+   * Set after accepting a suggestion so the next doc-change update
+   * skips scheduling a new prediction for the just-inserted text.
+   * Scoped to the factory so multiple editor instances don't share state.
+   */
+  var justAccepted = false;
+
+  /**
+   * Stores the text-before-cursor snapshot at the moment the user dismissed
+   * a suggestion via Escape. While the context remains identical, we suppress
+   * re-showing the same suggestion. Resets to null as soon as the text changes.
+   */
+  var dismissedContext = null;
+  var slowLaneClient = (0, _slowLaneClient.createSlowLaneClient)({
+    baseUrl: '',
+    endpoint: SLOW_LANE_ENDPOINT
+  });
+  (0, _slowLaneClient.setDefaultSlowLaneClient)(slowLaneClient);
+
+  /**
+   * Schedule a prediction after a short debounce.
+   * Tier 1 predictions are synchronous (<0.1ms) but we still debounce
+   * to avoid unnecessary work on rapid keystrokes.
+   */
+  var schedulePrediction = function schedulePrediction(view) {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(function () {
+      var state = view.state;
+      var selection = state.selection;
+
+      // Only predict for cursor selections (not range selections)
+      if (!selection.empty) {
+        return;
+      }
+      var textBefore = getTextBeforeCursor(state);
+
+      // Suppress re-showing the same suggestion the user just dismissed.
+      // Once the text context changes (user types or deletes), this clears automatically.
+      if (textBefore === dismissedContext) {
+        return;
+      }
+      dismissedContext = null;
+
+      // Don't predict if there's not enough context
+      if (textBefore.trim().length < 3) {
+        return;
+      }
+
+      // Tier 1 prediction is synchronous -- no async needed
+      var prediction = (0, _textPredictor.predict)(textBefore);
+      if (prediction && prediction.length > 0) {
+        showGhostText(view, prediction, selection.from);
+      }
+    }, DEBOUNCE_MS);
+  };
+  var maybeUpdateSessionFrequency = function maybeUpdateSessionFrequency(view, prevState) {
+    var newText = getTextBeforeCursor(view.state);
+    var prevText = getTextBeforeCursor(prevState);
+    if (newText.length <= prevText.length) {
+      return;
+    }
+    var lastChar = newText[newText.length - 1];
+    if (!/[\t-\r !,\.:;\?\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]/.test(lastChar)) {
+      return;
+    }
+
+    // Only fire if the previous state did not already end on a boundary,
+    // so we don't double-count when multiple boundary chars are inserted.
+    var prevLastChar = prevText[prevText.length - 1];
+    if (prevLastChar && /[\t-\r !,\.:;\?\xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]/.test(prevLastChar)) {
+      return;
+    }
+    var beforeBoundary = newText.slice(0, -1).trimEnd();
+    var lastSpaceIdx = beforeBoundary.lastIndexOf(' ');
+    var completedWord = beforeBoundary.slice(lastSpaceIdx + 1).toLowerCase();
+    if (completedWord.length >= 2) {
+      (0, _textPredictor.incrementSessionFreq)(completedWord);
+    }
+  };
+  return new _safePlugin.SafePlugin({
+    key: autocompletePluginKey,
+    state: {
+      init: function init() {
+        return createInitialState();
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(autocompletePluginKey);
+        if (meta) {
+          return _objectSpread(_objectSpread({}, pluginState), meta);
+        }
+
+        // If the document changed, clear the ghost text
+        // (new prediction will be scheduled from view.update)
+        if (tr.docChanged) {
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            ghostText: '',
+            ghostPosition: -1,
+            decorationSet: _view.DecorationSet.empty
+          });
+        }
+
+        // If selection changed without doc change, clear ghost text
+        if (tr.selectionSet && pluginState.ghostText) {
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            ghostText: '',
+            ghostPosition: -1,
+            decorationSet: _view.DecorationSet.empty
+          });
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _pluginState$decorati;
+        var pluginState = autocompletePluginKey.getState(state);
+        return (_pluginState$decorati = pluginState === null || pluginState === void 0 ? void 0 : pluginState.decorationSet) !== null && _pluginState$decorati !== void 0 ? _pluginState$decorati : _view.DecorationSet.empty;
+      },
+      handleKeyDown: (0, _keymap.keydownHandler)({
+        Tab: function Tab(state, dispatch) {
+          var accepted = acceptGhostText(state, dispatch);
+          if (accepted) justAccepted = true;
+          return accepted;
+        },
+        ArrowRight: function ArrowRight(state, dispatch) {
+          var accepted = acceptGhostText(state, dispatch);
+          if (accepted) justAccepted = true;
+          return accepted;
+        },
+        Escape: function Escape(state, dispatch) {
+          var didClear = clearGhostText(state, dispatch);
+          if (didClear) {
+            dismissedContext = getTextBeforeCursor(state);
+          }
+          return didClear;
+        }
+      }),
+      handleDOMEvents: {
+        blur: function blur(view) {
+          var pluginState = autocompletePluginKey.getState(view.state);
+          if (pluginState !== null && pluginState !== void 0 && pluginState.ghostText) {
+            clearGhostText(view.state, view.dispatch);
+          }
+          return false;
+        },
+        focus: function focus() {
+          (0, _textPredictor.loadDefaultVocabulary)();
+          (0, _textPredictor.loadVectorsAsync)().catch(function () {});
+          if (!hasIngestedPage) {
+            hasIngestedPage = true;
+            if (options !== null && options !== void 0 && options.getContext) {
+              options.getContext().then(function (context) {
+                var _context$siblingComme4;
+                if (!context) {
+                  return;
+                }
+                resolvedContext = context;
+                if (context.fullPageContent) {
+                  (0, _textPredictor.ingestDocumentPage)(context.fullPageContent);
+                }
+                if (context.parentCommentContent) {
+                  (0, _textPredictor.ingestDocumentPage)(context.parentCommentContent);
+                }
+                (_context$siblingComme4 = context.siblingCommentsContents) === null || _context$siblingComme4 === void 0 || _context$siblingComme4.forEach(_textPredictor.ingestDocumentPage);
+              }).catch(function () {});
+            }
+          }
+          return false;
+        }
+      }
+    },
+    view: function view() {
+      return {
+        update: function update(view, prevState) {
+          if (!prevState.doc.eq(view.state.doc)) {
+            if (justAccepted) {
+              justAccepted = false;
+
+              // ✨ THE FIX: Memorize the text state right after acceptance.
+              // Any follow-up transactions will hit the 'dismissedContext'
+              // block and abort until the user actually types a new character!
+              dismissedContext = getTextBeforeCursor(view.state);
+
+              // Also clear any pending debounce timers from before the acceptance
+              if (debounceTimer) {
+                clearTimeout(debounceTimer);
+              }
+              return;
+            }
+            maybeUpdateSessionFrequency(view, prevState);
+            var textBefore = getTextBeforeCursor(view.state);
+            if ((0, _slowLaneClient.isWordBoundary)(textBefore)) {
+              slowLaneClient.updateContext(buildSlowLaneText(view.state.doc.textContent, resolvedContext));
+            }
+            schedulePrediction(view);
+          }
+        },
+        destroy: function destroy() {
+          if (debounceTimer) {
+            clearTimeout(debounceTimer);
+          }
+          (0, _slowLaneClient.setDefaultSlowLaneClient)(null);
+        }
+      };
+    }
+  });
+};

package/dist/cjs/pm-plugins/ghost-text-decoration.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGhostTextDecorationSet = void 0;
+var _view = require("@atlaskit/editor-prosemirror/view");
+var GHOST_TEXT_CLASS = 'autocomplete-ghost-text';
+
+/**
+ * Creates a DecorationSet containing a ghost text widget at the given position.
+ * The ghost text is rendered as a styled <span> that appears after the cursor.
+ */
+var createGhostTextDecorationSet = exports.createGhostTextDecorationSet = function createGhostTextDecorationSet(state, position, text) {
+  if (!text) {
+    return _view.DecorationSet.empty;
+  }
+  var decoration = _view.Decoration.widget(position, function () {
+    var container = document.createElement('span');
+    container.className = GHOST_TEXT_CLASS;
+    container.setAttribute('data-autocomplete-ghost', 'true');
+    container.style.color = '#999';
+    container.style.opacity = '0.6';
+    container.style.pointerEvents = 'none';
+    container.style.userSelect = 'none';
+    container.style.fontStyle = 'italic';
+    // U+200B (Zero Width Space) gives the browser a line-break opportunity
+    // immediately before the ghost text. This ensures the typed text before
+    // the span is never pushed to the next line by the ghost text's width —
+    // only the ghost text itself will wrap if it doesn't fit.
+    container.textContent = "\u200B" + text;
+    return container;
+  }, {
+    side: 1,
+    // Render after content at this position
+    key: 'autocomplete-ghost-text'
+  });
+  return _view.DecorationSet.create(state.doc, [decoration]);
+};