@copilotkit/react-textarea 0.19.0-alpha.4 → 0.19.0-alpha.6

package/dist/chunk-YSZ7DO3X.mjs

@@ -0,0 +1,107 @@
+import { HoveringInsertionPromptBox } from './chunk-6XP7KEMW.mjs';
+import { useHoveringEditorContext } from './chunk-YW3REYX6.mjs';
+import { Portal, Menu } from './chunk-XHUMROEY.mjs';
+import { getTextAroundSelection, getFullEditorTextWithNewlines } from './chunk-IXJ2HCOA.mjs';
+import { useRef, useState, useEffect } from 'react';
+import { Transforms } from 'slate';
+import { useSlate, useSlateSelection } from 'slate-react';
+import { jsx } from 'react/jsx-runtime';
+
+var HoveringToolbar = (props) => {
+  const ref = useRef(null);
+  const editor = useSlate();
+  const selection = useSlateSelection();
+  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  useEffect(() => {
+    const el = ref.current;
+    const { selection: selection2 } = editor;
+    if (!el) {
+      return;
+    }
+    if (!selection2) {
+      el.removeAttribute("style");
+      return;
+    }
+    const domSelection = window.getSelection();
+    if (!domSelection) {
+      return;
+    }
+    const domRange = domSelection.getRangeAt(0);
+    const rect = domRange.getBoundingClientRect();
+    if (rect.top === 0 && rect.left === 0 && rect.width === 0 && rect.height === 0) {
+      return;
+    }
+    const minGapFromEdge = 60;
+    const verticalOffsetFromCorner = 35;
+    const horizontalOffsetFromCorner = 15;
+    let top = rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;
+    if (top < minGapFromEdge) {
+      top = rect.bottom + window.scrollY + minGapFromEdge;
+    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {
+      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;
+    }
+    let left = rect.left + window.scrollX - el.offsetWidth / 2 + rect.width / 2 + horizontalOffsetFromCorner;
+    if (left < minGapFromEdge) {
+      left = minGapFromEdge;
+    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {
+      left = window.innerWidth - el.offsetWidth - minGapFromEdge;
+    }
+    el.style.opacity = "1";
+    el.style.top = `${top}px`;
+    el.style.left = `${left}px`;
+  });
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setIsDisplayed(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, setIsDisplayed]);
+  if (!isClient) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Portal, {
+    children: /* @__PURE__ */ jsx(Menu, {
+      ref,
+      className: "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700",
+      children: isDisplayed && selection && /* @__PURE__ */ jsx(HoveringInsertionPromptBox, {
+        editorState: editorState(editor),
+        apiConfig: props.apiConfig,
+        closeWindow: () => {
+          setIsDisplayed(false);
+        },
+        performInsertion: (insertedText) => {
+          console.log("inserted text", insertedText);
+          Transforms.delete(editor, { at: selection });
+          Transforms.insertText(editor, insertedText, {
+            at: selection
+          });
+          setIsDisplayed(false);
+        }
+      })
+    })
+  });
+};
+function editorState(editor, selection) {
+  const textAroundCursor = getTextAroundSelection(editor);
+  if (textAroundCursor) {
+    return textAroundCursor;
+  }
+  return {
+    textBeforeCursor: getFullEditorTextWithNewlines(editor),
+    textAfterCursor: "",
+    selectedText: ""
+  };
+}
+
+export { HoveringToolbar };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-YSZ7DO3X.mjs.map

package/dist/chunk-YSZ7DO3X.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/hovering-toolbar/hovering-toolbar.tsx"],"names":["selection"],"mappings":"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","sourcesContent":["import { css } from \"@emotion/css\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { BaseSelection, Editor, Range, Location, Transforms } from \"slate\";\nimport { useSlate, useSlateSelection } from \"slate-react\";\nimport { HoveringInsertionPromptBox } from \"./text-insertion-prompt-box\";\nimport { Button, Icon, Menu, Portal } from \"./hovering-toolbar-components\";\nimport { useHoveringEditorContext } from \"./hovering-editor-provider\";\nimport {\n  getFullEditorTextWithNewlines,\n  getTextAroundSelection,\n} from \"../../lib/get-text-around-cursor\";\nimport {\n  EditingEditorState,\n  InsertionEditorApiConfig,\n} from \"../../types/base/autosuggestions-bare-function\";\n\nexport interface HoveringToolbarProps {\n  apiConfig: InsertionEditorApiConfig;\n}\n\nexport const HoveringToolbar: (\n  props: HoveringToolbarProps\n) => JSX.Element | null = (props) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const editor = useSlate();\n  const selection = useSlateSelection();\n  const { isDisplayed, setIsDisplayed } = useHoveringEditorContext();\n\n  // only render on client\n  const [isClient, setIsClient] = useState(false);\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  useEffect(() => {\n    const el = ref.current;\n    const { selection } = editor;\n\n    if (!el) {\n      return;\n    }\n\n    if (!selection) {\n      el.removeAttribute(\"style\");\n      return;\n    }\n\n    const domSelection = window.getSelection();\n    if (!domSelection) {\n      return;\n    }\n\n    const domRange = domSelection.getRangeAt(0);\n    const rect = domRange.getBoundingClientRect();\n\n    // We use window = (0,0,0,0) as a signal that the selection is not in the original copilot-textarea,\n    // but inside the hovering window.\n    //\n    // in such case, we simply do nothing.\n    if (\n      rect.top === 0 &&\n      rect.left === 0 &&\n      rect.width === 0 &&\n      rect.height === 0\n    ) {\n      return;\n    }\n\n    const minGapFromEdge = 60;\n    const verticalOffsetFromCorner = 35;\n    const horizontalOffsetFromCorner = 15;\n    let top =\n      rect.top + window.scrollY - el.offsetHeight + verticalOffsetFromCorner;\n    // make sure top is in the viewport and not too close to the edge\n    if (top < minGapFromEdge) {\n      top = rect.bottom + window.scrollY + minGapFromEdge;\n    } else if (top + el.offsetHeight > window.innerHeight - minGapFromEdge) {\n      top = rect.top + window.scrollY - el.offsetHeight - minGapFromEdge;\n    }\n\n    let left =\n      rect.left +\n      window.scrollX -\n      el.offsetWidth / 2 +\n      rect.width / 2 +\n      horizontalOffsetFromCorner;\n    // make sure left is in the viewport and not too close to the edge\n    if (left < minGapFromEdge) {\n      left = minGapFromEdge;\n    } else if (left + el.offsetWidth > window.innerWidth - minGapFromEdge) {\n      left = window.innerWidth - el.offsetWidth - minGapFromEdge;\n    }\n\n    el.style.opacity = \"1\";\n    el.style.top = `${top}px`;\n    el.style.left = `${left}px`;\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        setIsDisplayed(false);\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [ref, setIsDisplayed]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Menu\n        ref={ref}\n        className=\"p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700\"\n      >\n        {isDisplayed && selection && (\n          <HoveringInsertionPromptBox\n            editorState={editorState(editor, selection)}\n            apiConfig={props.apiConfig}\n            closeWindow={() => {\n              setIsDisplayed(false);\n            }}\n            performInsertion={(insertedText) => {\n              console.log(\"inserted text\", insertedText);\n              // replace the selection with the inserted text\n              Transforms.delete(editor, { at: selection });\n              Transforms.insertText(editor, insertedText, {\n                at: selection,\n              });\n              setIsDisplayed(false);\n            }}\n          />\n        )}\n      </Menu>\n    </Portal>\n  );\n};\n\nfunction editorState(editor: Editor, selection: Location): EditingEditorState {\n  const textAroundCursor = getTextAroundSelection(editor);\n  if (textAroundCursor) {\n    return textAroundCursor;\n  }\n\n  return {\n    textBeforeCursor: getFullEditorTextWithNewlines(editor),\n    textAfterCursor: \"\",\n    selectedText: \"\",\n  };\n}\n"]}

package/dist/chunk-YTOPHPSG.mjs

@@ -0,0 +1,45 @@
+import { Element } from 'slate';
+
+// src/lib/editor-to-text.ts
+function nodeChildrenToTextComponents(editor, nodes) {
+  const indeciesOfInlineElements = new Set(
+    nodes.map((node, index) => {
+      if (Element.isElement(node) && editor.isInline(node)) {
+        return index;
+      }
+      return -1;
+    }).filter((index) => index !== -1)
+  );
+  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.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), []);
+}
+var editorToText = (editor) => {
+  const flattened = nodeChildrenToTextComponents(editor, editor.children);
+  const text = flattened.map((textComponent) => textComponent.text).join("\n");
+  return text;
+};
+
+export { editorToText };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-YTOPHPSG.mjs.map

package/dist/chunk-YTOPHPSG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/editor-to-text.ts"],"names":[],"mappings":";AAAA,SAAiC,eAAe;AAKhD,SAAS,6BACP,QACA,OACuB;AAEvB,QAAM,2BAA2B,IAAI;AAAA,IACnC,MACG,IAAI,CAAC,MAAM,UAAU;AACpB,UAAI,QAAQ,UAAU,IAAI,KAAK,OAAO,SAAS,IAAI,GAAG;AACpD,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC,EACA,OAAO,CAAC,UAAU,UAAU,EAAE;AAAA,EACnC;AAIA,QAAM,oBAAoB,MAAM,OAAO,CAAC,MAAM,UAAU;AACtD,UAAM,WAAW,yBAAyB,IAAI,KAAK;AACnD,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AAEA,UAAM,sBACJ,yBAAyB,IAAI,QAAQ,CAAC,KACtC,yBAAyB,IAAI,QAAQ,CAAC;AACxC,QAAI,qBAAqB;AACvB,aAAQ,KAAa,SAAS;AAAA,IAChC;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,kBACJ,IAAI,CAAC,SAAS;AACb,QAAI,QAAQ,UAAU,IAAI,GAAG;AAC3B,cAAQ,KAAK,MAAM;AAAA,QACjB,KAAK;AACH,iBAAO,6BAA6B,QAAQ,KAAK,QAAQ;AAAA,QAC3D,KAAK;AACH,iBAAO,CAAC;AAAA,MACZ;AAAA,IACF,OAAO;AACL,aAAO,CAAC,IAAI;AAAA,IACd;AAAA,EACF,CAAC,EACA,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,GAAG,GAAG,CAAC,CAAC;AAC7C;AAEO,IAAM,eAAe,CAC1B,WACG;AACH,QAAM,YAAY,6BAA6B,QAAQ,OAAO,QAAQ;AAEtE,QAAM,OAAO,UAAU,IAAI,CAAC,kBAAkB,cAAc,IAAI,EAAE,KAAK,IAAI;AAE3E,SAAO;AACT","sourcesContent":["import { BaseEditor, Descendant, Element } from \"slate\";\nimport { HistoryEditor } from \"slate-history\";\nimport { ReactEditor } from \"slate-react\";\nimport { SuggestionAwareText } from \"../types/base/custom-editor\";\n\nfunction nodeChildrenToTextComponents(\n  editor: BaseEditor & ReactEditor & HistoryEditor,\n  nodes: Descendant[]\n): SuggestionAwareText[] {\n  // find inlineable elements\n  const indeciesOfInlineElements = new Set(\n    nodes\n      .map((node, index) => {\n        if (Element.isElement(node) && editor.isInline(node)) {\n          return index;\n        }\n        return -1;\n      })\n      .filter((index) => index !== -1)\n  );\n\n  // ignorable elements = inline elements,\n  // or neighbors of inline elements that are {text: \"\"}\n  const nonIgnorableItems = nodes.filter((node, index) => {\n    const isInline = indeciesOfInlineElements.has(index);\n    if (isInline) {\n      return false;\n    }\n\n    const isNeighbourOfInline =\n      indeciesOfInlineElements.has(index - 1) ||\n      indeciesOfInlineElements.has(index + 1);\n    if (isNeighbourOfInline) {\n      return (node as any).text !== \"\";\n    }\n\n    return true;\n  });\n\n  return nonIgnorableItems\n    .map((node) => {\n      if (Element.isElement(node)) {\n        switch (node.type) {\n          case \"paragraph\":\n            return nodeChildrenToTextComponents(editor, node.children);\n          case \"suggestion\":\n            return [];\n        }\n      } else {\n        return [node];\n      }\n    })\n    .reduce((acc, val) => acc.concat(val), []);\n}\n\nexport const editorToText = (\n  editor: BaseEditor & ReactEditor & HistoryEditor\n) => {\n  const flattened = nodeChildrenToTextComponents(editor, editor.children);\n\n  const text = flattened.map((textComponent) => textComponent.text).join(\"\\n\");\n\n  return text;\n};\n"]}

package/dist/chunk-YW3REYX6.mjs

@@ -0,0 +1,23 @@
+import { createContext, useState, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/hovering-toolbar/hovering-editor-provider.tsx
+var HoveringEditorContext = createContext({
+  isDisplayed: false,
+  setIsDisplayed: () => {
+  }
+});
+var HoveringEditorProvider = ({
+  children
+}) => {
+  const [isDisplayed, setIsDisplayed] = useState(false);
+  return /* @__PURE__ */ jsx(HoveringEditorContext.Provider, {
+    value: { isDisplayed, setIsDisplayed },
+    children
+  });
+};
+var useHoveringEditorContext = () => useContext(HoveringEditorContext);
+
+export { HoveringEditorProvider, useHoveringEditorContext };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-YW3REYX6.mjs.map

package/dist/chunk-YW3REYX6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/hovering-toolbar/hovering-editor-provider.tsx"],"names":[],"mappings":";AAAA,SAAgB,eAAe,UAAU,kBAA6B;AAsBlE;AAfJ,IAAM,wBAAwB,cAA0C;AAAA,EACtE,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AACzB,CAAC;AAMM,IAAM,yBAAyB,CAAC;AAAA,EACrC;AACF,MAAmC;AACjC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE,oBAAC,sBAAsB,UAAtB;AAAA,IAA+B,OAAO,EAAE,aAAa,eAAe;AAAA,IAClE;AAAA,GACH;AAEJ;AAEO,IAAM,2BAA2B,MAAM,WAAW,qBAAqB","sourcesContent":["import React, { createContext, useState, useContext, ReactNode } from \"react\";\n\ninterface HoveringEditorContextProps {\n  isDisplayed: boolean;\n  setIsDisplayed: (value: boolean) => void;\n}\n\nconst HoveringEditorContext = createContext<HoveringEditorContextProps>({\n  isDisplayed: false,\n  setIsDisplayed: () => {},\n});\n\ninterface HoveringEditorProviderProps {\n  children: ReactNode;\n}\n\nexport const HoveringEditorProvider = ({\n  children,\n}: HoveringEditorProviderProps) => {\n  const [isDisplayed, setIsDisplayed] = useState(false);\n\n  return (\n    <HoveringEditorContext.Provider value={{ isDisplayed, setIsDisplayed }}>\n      {children}\n    </HoveringEditorContext.Provider>\n  );\n};\n\nexport const useHoveringEditorContext = () => useContext(HoveringEditorContext);\n"]}