@copilotkit/react-textarea 0.5.0

package/src/lib/editor-to-text.ts

@@ -0,0 +1,64 @@
+import { BaseEditor, Descendant, Element } from "slate";
+import { HistoryEditor } from "slate-history";
+import { ReactEditor } from "slate-react";
+import { SuggestionAwareText } from "../types/custom-editor";
+
+function nodeChildrenToTextComponents(
+  editor: BaseEditor & ReactEditor & HistoryEditor,
+  nodes: Descendant[]
+): SuggestionAwareText[] {
+  // find inlineable elements
+  const indeciesOfInlineElements = new Set(
+    nodes
+      .map((node, index) => {
+        if (Element.isElement(node) && editor.isInline(node)) {
+          return index;
+        }
+        return -1;
+      })
+      .filter((index) => index !== -1)
+  );
+
+  // ignorable elements = inline elements,
+  // or neighbors of inline elements that are {text: ""}
+  const nonIgnorableItems = nodes.filter((node, index) => {
+    const isInline = indeciesOfInlineElements.has(index);
+    if (isInline) {
+      return false;
+    }
+
+    const isNeighbourOfInline =
+      indeciesOfInlineElements.has(index - 1) ||
+      indeciesOfInlineElements.has(index + 1);
+    if (isNeighbourOfInline) {
+      return (node as any).text !== "";
+    }
+
+    return true;
+  });
+
+  return nonIgnorableItems
+    .map((node) => {
+      if (Element.isElement(node)) {
+        switch (node.type) {
+          case "paragraph":
+            return nodeChildrenToTextComponents(editor, node.children);
+          case "suggestion":
+            return [];
+        }
+      } else {
+        return [node];
+      }
+    })
+    .reduce((acc, val) => acc.concat(val), []);
+}
+
+export const editorToText = (
+  editor: BaseEditor & ReactEditor & HistoryEditor
+) => {
+  const flattened = nodeChildrenToTextComponents(editor, editor.children);
+
+  const text = flattened.map((textComponent) => textComponent.text).join("\n");
+
+  return text;
+};

package/src/lib/get-text-around-cursor.ts

@@ -0,0 +1,82 @@
+import { Editor, Node, Path, Range, Text, Element } from "slate";
+import { EditorAutocompleteState } from "../types/editor-autocomplete-state";
+
+export function getTextAroundCursor(
+  editor: Editor
+): EditorAutocompleteState | null {
+  const { selection } = editor;
+
+  if (!selection || !Range.isCollapsed(selection)) {
+    return null;
+  }
+  // Create two ranges: one before the anchor and one after
+  const beforeRange: Range = {
+    anchor: Editor.start(editor, []),
+    focus: selection.anchor,
+  };
+  const afterRange: Range = {
+    anchor: selection.anchor,
+    focus: Editor.end(editor, []),
+  };
+
+  // Extract text for these ranges
+  const before = extractTextWithNewlines(editor, beforeRange);
+  const after = extractTextWithNewlines(editor, afterRange);
+
+  return {
+    cursorPoint: selection.anchor,
+    textBeforeCursor: before,
+    textAfterCursor: after,
+  };
+}
+
+export function getFullEditorTextWithNewlines(editor: Editor): string {
+  const fullDocumentRange: Range = {
+    anchor: Editor.start(editor, []),
+    focus: Editor.end(editor, []),
+  };
+  return extractTextWithNewlines(editor, fullDocumentRange);
+}
+
+// Helper function to extract text with newlines
+export function extractTextWithNewlines(editor: Editor, range: Range): string {
+  const voids = false;
+  const [start, end] = Range.edges(range);
+  let text = "";
+  let lastBlock: Node | null = null;
+
+  for (const [node, path] of Editor.nodes(editor, {
+    at: range,
+    match: Text.isText,
+    voids,
+  })) {
+    let t = node.text;
+
+    // Determine the parent block of the current text node
+    const [block] = Editor.above(editor, {
+      at: path,
+      match: (n) => Element.isElement(n) && n.type === "paragraph",
+    }) || [null];
+
+    // If we encounter a new block, prepend a newline
+    if (lastBlock !== block && block) {
+      // check that lastBlock is not null to avoid adding a newline at the beginning
+      if (lastBlock) {
+        text += "\n";
+      }
+      lastBlock = block;
+    }
+
+    if (Path.equals(path, end.path)) {
+      t = t.slice(0, end.offset);
+    }
+
+    if (Path.equals(path, start.path)) {
+      t = t.slice(start.offset);
+    }
+
+    text += t;
+  }
+
+  return text;
+}

package/src/lib/slatejs-edits/add-autocompletions.ts

@@ -0,0 +1,30 @@
+import { BasePoint, Transforms } from "slate";
+import { CustomEditor } from "../../types/custom-editor";
+
+export function addAutocompletionsToEditor(
+  editor: CustomEditor,
+  newSuggestion: string,
+  point: BasePoint
+) {
+  const editorPosition = editor.selection;
+
+  Transforms.insertNodes(
+    editor,
+    [
+      {
+        type: "suggestion",
+        inline: true,
+        content: newSuggestion,
+        children: [{ text: "" }],
+      },
+    ],
+    {
+      at: point,
+    }
+  );
+
+  // restore cursor position
+  if (editorPosition) {
+    editor.selection = editorPosition;
+  }
+}

package/src/lib/slatejs-edits/clear-autocompletions.ts

@@ -0,0 +1,15 @@
+import { Path, Node, Element, Transforms } from "slate";
+import { CustomEditor } from "../../types/custom-editor";
+
+export function clearAutocompletionsFromEditor(editor: CustomEditor) {
+  // clear previous suggestion
+  const paths: Path[] = [];
+  for (const [node, path] of Node.nodes(editor)) {
+    if (Element.isElement(node) && node.type === "suggestion") {
+      paths.push(path);
+    }
+  }
+  for (const path of paths) {
+    Transforms.removeNodes(editor, { at: path });
+  }
+}

package/src/lib/slatejs-edits/replace-text.ts

@@ -0,0 +1,32 @@
+import { Editor, Path, Transforms, Node, Element } from "slate";
+
+export function replaceEditorText(editor: Editor, newText: string) {
+  // clear all previous text
+  const paths: Path[] = [];
+  for (const [node, path] of Node.nodes(editor)) {
+    if (
+      Element.isElement(node) &&
+      (node.type === "paragraph" || node.type === "suggestion") &&
+      path.length === 1
+    ) {
+      paths.push(path);
+    }
+  }
+  for (const path of paths) {
+    Transforms.removeNodes(editor, { at: path });
+  }
+
+  // insert new text
+  Transforms.insertNodes(
+    editor,
+    [
+      {
+        type: "paragraph",
+        children: [{ text: newText }],
+      },
+    ],
+    {
+      at: [0],
+    }
+  );
+}

package/src/lib/slatejs-edits/with-partial-history.ts

@@ -0,0 +1,156 @@
+import { Editor, Operation, Path, Range, Transforms } from "slate";
+import { HistoryEditor } from "slate-history";
+
+// Copy-pasted from `https://github.com/ianstormtaylor/slate/blob/main/packages/slate-history/src/with-history.ts`
+// With one exception: the `shouldSave` function is passed in as an argument to `withPartialHistory` instead of being hardcoded
+export type ShouldSaveToHistory = (
+  op: Operation,
+  prev: Operation | undefined
+) => boolean;
+
+export const withPartialHistory = <T extends Editor>(
+  editor: T,
+  shouldSave: ShouldSaveToHistory
+) => {
+  const e = editor as T & HistoryEditor;
+  const { apply } = e;
+  e.history = { undos: [], redos: [] };
+
+  e.redo = () => {
+    const { history } = e;
+    const { redos } = history;
+
+    if (redos.length > 0) {
+      const batch = redos[redos.length - 1];
+
+      if (batch.selectionBefore) {
+        Transforms.setSelection(e, batch.selectionBefore);
+      }
+
+      HistoryEditor.withoutSaving(e, () => {
+        Editor.withoutNormalizing(e, () => {
+          for (const op of batch.operations) {
+            e.apply(op);
+          }
+        });
+      });
+
+      history.redos.pop();
+      e.writeHistory("undos", batch);
+    }
+  };
+
+  e.undo = () => {
+    const { history } = e;
+    const { undos } = history;
+
+    if (undos.length > 0) {
+      const batch = undos[undos.length - 1];
+
+      HistoryEditor.withoutSaving(e, () => {
+        Editor.withoutNormalizing(e, () => {
+          const inverseOps = batch.operations.map(Operation.inverse).reverse();
+
+          for (const op of inverseOps) {
+            e.apply(op);
+          }
+          if (batch.selectionBefore) {
+            Transforms.setSelection(e, batch.selectionBefore);
+          }
+        });
+      });
+
+      e.writeHistory("redos", batch);
+      history.undos.pop();
+    }
+  };
+
+  e.apply = (op: Operation) => {
+    const { operations, history } = e;
+    const { undos } = history;
+    const lastBatch = undos[undos.length - 1];
+    const lastOp =
+      lastBatch && lastBatch.operations[lastBatch.operations.length - 1];
+    let save = HistoryEditor.isSaving(e);
+    let merge = HistoryEditor.isMerging(e);
+
+    if (save == null) {
+      save = shouldSave(op, lastOp);
+    }
+
+    if (save) {
+      if (merge == null) {
+        if (lastBatch == null) {
+          merge = false;
+        } else if (operations.length !== 0) {
+          merge = true;
+        } else {
+          merge = shouldMerge(op, lastOp);
+        }
+      }
+
+      if (lastBatch && merge) {
+        lastBatch.operations.push(op);
+      } else {
+        const batch = {
+          operations: [op],
+          selectionBefore: e.selection,
+        };
+        e.writeHistory("undos", batch);
+      }
+
+      while (undos.length > 100) {
+        undos.shift();
+      }
+
+      history.redos = [];
+    }
+
+    apply(op);
+  };
+
+  e.writeHistory = (stack: "undos" | "redos", batch: any) => {
+    e.history[stack].push(batch);
+  };
+
+  return e;
+};
+
+/**
+ * Check whether to merge an operation into the previous operation.
+ */
+
+const shouldMerge = (op: Operation, prev: Operation | undefined): boolean => {
+  if (
+    prev &&
+    op.type === "insert_text" &&
+    prev.type === "insert_text" &&
+    op.offset === prev.offset + prev.text.length &&
+    Path.equals(op.path, prev.path)
+  ) {
+    return true;
+  }
+
+  if (
+    prev &&
+    op.type === "remove_text" &&
+    prev.type === "remove_text" &&
+    op.offset + op.text.length === prev.offset &&
+    Path.equals(op.path, prev.path)
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export const defaultShouldSave = (
+  op: Operation,
+  prev: Operation | undefined
+): boolean => {
+  if (op.type === "set_selection") {
+    return false;
+  }
+
+  return true;
+};

package/src/lib/utils.ts

@@ -0,0 +1,59 @@
+import { clsx, type ClassValue } from "clsx";
+import { customAlphabet } from "nanoid";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const nanoid = customAlphabet(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+); // 7-character random string
+
+export async function fetcher<JSON = any>(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<JSON> {
+  const res = await fetch(input, init);
+
+  if (!res.ok) {
+    const json = await res.json();
+    if (json.error) {
+      const error = new Error(json.error) as Error & {
+        status: number;
+      };
+      error.status = res.status;
+      throw error;
+    } else {
+      throw new Error("An unexpected error occurred");
+    }
+  }
+
+  return res.json();
+}
+
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export const arraysAreEqual = (arr1: number[], arr2: number[]): boolean =>
+  arr1.length === arr2.length &&
+  arr1.every((value, index) => value === arr2[index]);
+
+export function nullableCompatibleEqualityCheck<T>(
+  naiveEqualityCheck: (a: T, b: T) => boolean,
+  a: T | null | undefined,
+  b: T | null | undefined
+): boolean {
+  if (a === null || a === undefined || b === null || b === undefined) {
+    return a === b;
+  }
+
+  return naiveEqualityCheck(a, b);
+}

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/types/autosuggestion-state.ts

@@ -0,0 +1,6 @@
+import { BasePoint } from "slate";
+
+export interface AutosuggestionState {
+  text: string;
+  point: BasePoint;
+}

package/src/types/autosuggestions-bare-function.ts

@@ -0,0 +1,5 @@
+export type AutosuggestionsBareFunction = (
+  textBefore: string,
+  textAfter: string,
+  abortSignal: AbortSignal
+) => Promise<string>;

package/src/types/base-autosuggestions-config.tsx

@@ -0,0 +1,15 @@
+export interface BaseAutosuggestionsConfig {
+  purposePrompt: string;
+  debounceTime: number;
+  acceptAutosuggestionKey: string;
+  disableWhenEmpty: boolean;
+}
+
+export const defaultBaseAutosuggestionsConfig: Omit<
+  BaseAutosuggestionsConfig,
+  "purposePrompt"
+> = {
+  debounceTime: 500,
+  acceptAutosuggestionKey: "Tab",
+  disableWhenEmpty: true,
+};

package/src/types/custom-editor.tsx

@@ -0,0 +1,29 @@
+import { BaseEditor } from "slate";
+import { ReactEditor } from "slate-react";
+import { HistoryEditor } from "slate-history";
+
+export type CustomEditor = BaseEditor & ReactEditor & HistoryEditor;
+
+export type ParagraphElement = {
+  type: "paragraph";
+  children: CustomText[];
+};
+
+export type SuggestionElement = {
+  type: "suggestion";
+  inline: boolean;
+  content: string;
+  children: CustomText[];
+};
+
+export type CustomElement = ParagraphElement | SuggestionElement;
+export type SuggestionAwareText = { text: string };
+export type CustomText = SuggestionAwareText;
+
+declare module "slate" {
+  interface CustomTypes {
+    Editor: CustomEditor;
+    Element: CustomElement;
+    Text: CustomText;
+  }
+}

package/src/types/editor-autocomplete-state.ts

@@ -0,0 +1,19 @@
+import { BasePoint } from "slate";
+import { arraysAreEqual } from "../lib/utils";
+
+export interface EditorAutocompleteState {
+  cursorPoint: BasePoint;
+  textBeforeCursor: string;
+  textAfterCursor: string;
+}
+export function areEqual_autocompleteState(
+  prev: EditorAutocompleteState,
+  next: EditorAutocompleteState
+) {
+  return (
+    prev.cursorPoint.offset === next.cursorPoint.offset &&
+    arraysAreEqual(prev.cursorPoint.path, next.cursorPoint.path) &&
+    prev.textBeforeCursor === next.textBeforeCursor &&
+    prev.textAfterCursor === next.textAfterCursor
+  );
+}

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export { defaultBaseAutosuggestionsConfig } from "./base-autosuggestions-config";
+
+export type { BaseAutosuggestionsConfig } from "./base-autosuggestions-config";
+export type { AutosuggestionsBareFunction } from "./autosuggestions-bare-function";

package/tailwind.config.js

@@ -0,0 +1,7 @@
+const sharedConfig = require("tailwind-config/tailwind.config.js");
+
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  // prefix: "ui-",
+  presets: [sharedConfig],
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  entry: ["src/**/*.{ts,tsx}"],
+  format: ["esm"],
+  dts: true,
+  minify: false,
+  clean: true,
+  external: ["react"],
+  sourcemap: true,
+  ...options,
+}));