@copilotkit/react-textarea 0.21.0-alpha.7 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/.turbo/turbo-build.log +304 -304
  2. package/CHANGELOG.md +33 -0
  3. package/dist/{chunk-IJC2EXRO.mjs → chunk-BYIG72TT.mjs} +2 -2
  4. package/dist/chunk-BYIG72TT.mjs.map +1 -0
  5. package/dist/{chunk-JBI2MZB4.mjs → chunk-NZKGYWQV.mjs} +7 -4
  6. package/dist/chunk-NZKGYWQV.mjs.map +1 -0
  7. package/dist/{chunk-UIN6BEVR.mjs → chunk-SFEGMBSS.mjs} +2 -2
  8. package/dist/components/base-copilot-textarea/base-copilot-textarea.mjs +3 -3
  9. package/dist/components/copilot-textarea/copilot-textarea.mjs +4 -4
  10. package/dist/components/hovering-toolbar/hovering-toolbar.d.ts +1 -0
  11. package/dist/components/hovering-toolbar/hovering-toolbar.mjs +1 -1
  12. package/dist/components/index.mjs +4 -4
  13. package/dist/index.mjs +5 -5
  14. package/dist/types/base/base-copilot-textarea-props.d.ts +3 -0
  15. package/package.json +4 -4
  16. package/src/components/base-copilot-textarea/base-copilot-textarea.tsx +2 -0
  17. package/src/components/hovering-toolbar/hovering-toolbar.tsx +5 -1
  18. package/src/types/base/base-copilot-textarea-props.tsx +3 -0
  19. package/dist/chunk-IJC2EXRO.mjs.map +0 -1
  20. package/dist/chunk-JBI2MZB4.mjs.map +0 -1
  21. /package/dist/{chunk-UIN6BEVR.mjs.map → chunk-SFEGMBSS.mjs.map} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # ui
2
2
 
3
+ ## 0.22.0
4
+
5
+ ### Minor Changes
6
+
7
+ - add support for hoverMenuClassname
8
+
9
+ ## 0.21.0
10
+
11
+ ### Minor Changes
12
+
13
+ - support for custom api headers + body, fixed es5 build error on import
14
+ - 9abfea6: js import
15
+ - 2b9591a: esm.js maybe
16
+ - 2b9591a: headers and body propagation
17
+ - 2b9591a: cjs exp
18
+ - 2b9591a: treeshake
19
+ - 2b9591a: commonJS
20
+ - 222f5e6: undo alpha changes
21
+ - 2b9591a: cjs maybe
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies
26
+ - Updated dependencies [9abfea6]
27
+ - Updated dependencies [2b9591a]
28
+ - Updated dependencies [2b9591a]
29
+ - Updated dependencies [2b9591a]
30
+ - Updated dependencies [2b9591a]
31
+ - Updated dependencies [2b9591a]
32
+ - Updated dependencies [222f5e6]
33
+ - Updated dependencies [2b9591a]
34
+ - @copilotkit/react-core@0.11.0
35
+
3
36
  ## 0.21.0-alpha.7
4
37
 
5
38
  ### Minor Changes
package/dist/{chunk-IJC2EXRO.mjs → chunk-BYIG72TT.mjs} RENAMED
@@ -71,7 +71,7 @@ var HoveringToolbar = (props) => {
71
71
  return /* @__PURE__ */ jsx(Portal, {
72
72
  children: /* @__PURE__ */ jsx(Menu, {
73
73
  ref,
74
- className: "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700",
74
+ className: props.hoverMenuClassname || "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700",
75
75
  children: isDisplayed && selection && /* @__PURE__ */ jsx(HoveringInsertionPromptBox, {
76
76
  editorState: editorState(editor),
77
77
  apiConfig: props.apiConfig,
@@ -105,4 +105,4 @@ function editorState(editor, selection) {
105
105
 
106
106
  export { HoveringToolbar };
107
107
  //# sourceMappingURL=out.js.map
108
- //# sourceMappingURL=chunk-IJC2EXRO.mjs.map
108
+ //# sourceMappingURL=chunk-BYIG72TT.mjs.map
package/dist/chunk-BYIG72TT.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/hovering-toolbar/hovering-toolbar.tsx"],"names":["selection"],"mappings":";;;;;;;;;;;;;;;;AACA,SAAS,WAAoB,QAAQ,gBAAgB;AACrD,SAAiD,kBAAkB;AACnE,SAAS,UAAU,yBAAyB;AA4HlC;AAzGH,IAAM,kBAEa,CAAC,UAAU;AACnC,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,SAAS,SAAS;AACxB,QAAM,YAAY,kBAAkB;AACpC,QAAM,EAAE,aAAa,eAAe,IAAI,yBAAyB;AAGjE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,UAAM,EAAE,WAAAA,WAAU,IAAI;AAEtB,QAAI,CAAC,IAAI;AACP;AAAA,IACF;AAEA,QAAI,CAACA,YAAW;AACd,SAAG,gBAAgB,OAAO;AAC1B;AAAA,IACF;AAEA,UAAM,eAAe,OAAO,aAAa;AACzC,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AAEA,UAAM,WAAW,aAAa,WAAW,CAAC;AAC1C,UAAM,OAAO,SAAS,sBAAsB;AAM5C,QACE,KAAK,QAAQ,KACb,KAAK,SAAS,KACd,KAAK,UAAU,KACf,KAAK,WAAW,GAChB;AACA;AAAA,IACF;AAEA,UAAM,iBAAiB;AACvB,UAAM,2BAA2B;AACjC,UAAM,6BAA6B;AACnC,QAAI,MACF,KAAK,MAAM,OAAO,UAAU,GAAG,eAAe;AAEhD,QAAI,MAAM,gBAAgB;AACxB,YAAM,KAAK,SAAS,OAAO,UAAU;AAAA,IACvC,WAAW,MAAM,GAAG,eAAe,OAAO,cAAc,gBAAgB;AACtE,YAAM,KAAK,MAAM,OAAO,UAAU,GAAG,eAAe;AAAA,IACtD;AAEA,QAAI,OACF,KAAK,OACL,OAAO,UACP,GAAG,cAAc,IACjB,KAAK,QAAQ,IACb;AAEF,QAAI,OAAO,gBAAgB;AACzB,aAAO;AAAA,IACT,WAAW,OAAO,GAAG,cAAc,OAAO,aAAa,gBAAgB;AACrE,aAAO,OAAO,aAAa,GAAG,cAAc;AAAA,IAC9C;AAEA,OAAG,MAAM,UAAU;AACnB,OAAG,MAAM,MAAM,GAAG;AAClB,OAAG,MAAM,OAAO,GAAG;AAAA,EACrB,CAAC;AAED,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,MAAc,GAAG;AAC9D,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,KAAK,cAAc,CAAC;AAExB,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC;AAAA,IACC,8BAAC;AAAA,MACC;AAAA,MACA,WACE,MAAM,sBACN;AAAA,MAGD,yBAAe,aACd,oBAAC;AAAA,QACC,aAAa,YAAY,QAAQ,SAAS;AAAA,QAC1C,WAAW,MAAM;AAAA,QACjB,aAAa,MAAM;AACjB,yBAAe,KAAK;AAAA,QACtB;AAAA,QACA,kBAAkB,CAAC,iBAAiB;AAClC,kBAAQ,IAAI,iBAAiB,YAAY;AAEzC,qBAAW,OAAO,QAAQ,EAAE,IAAI,UAAU,CAAC;AAC3C,qBAAW,WAAW,QAAQ,cAAc;AAAA,YAC1C,IAAI;AAAA,UACN,CAAC;AACD,yBAAe,KAAK;AAAA,QACtB;AAAA,QACA,mBAAmB,MAAM;AAAA,OAC3B;AAAA,KAEJ;AAAA,GACF;AAEJ;AAEA,SAAS,YAAY,QAAgB,WAAyC;AAC5E,QAAM,mBAAmB,uBAAuB,MAAM;AACtD,MAAI,kBAAkB;AACpB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,kBAAkB,8BAA8B,MAAM;AAAA,IACtD,iBAAiB;AAAA,IACjB,cAAc;AAAA,EAChB;AACF","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 contextCategories: string[];\n hoverMenuClassname: string | undefined;\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={\n props.hoverMenuClassname ||\n \"p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700\"\n }\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 contextCategories={props.contextCategories}\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-JBI2MZB4.mjs → chunk-NZKGYWQV.mjs} RENAMED
@@ -4,13 +4,13 @@ import { addAutocompletionsToEditor } from './chunk-WJYQWL4I.mjs';
4
4
  import { clearAutocompletionsFromEditor } from './chunk-F3MHL6ZY.mjs';
5
5
  import { replaceEditorText } from './chunk-RQHOUUXQ.mjs';
6
6
  import { useAutosuggestions } from './chunk-UHD44NC5.mjs';
7
+ import { makeRenderPlaceholderFunction } from './chunk-OELUUJZY.mjs';
7
8
  import { TrackerTextEditedSinceLastCursorMovement } from './chunk-OD7ZMOVE.mjs';
8
9
  import { useAddBrandingCss } from './chunk-MPME5BW2.mjs';
9
- import { HoveringToolbar } from './chunk-IJC2EXRO.mjs';
10
+ import { HoveringToolbar } from './chunk-BYIG72TT.mjs';
10
11
  import { useHoveringEditorContext, HoveringEditorProvider } from './chunk-YW3REYX6.mjs';
11
12
  import { defaultBaseAutosuggestionsConfig } from './chunk-S6JUGJK2.mjs';
12
13
  import { makeRenderElementFunction } from './chunk-LNAIMEB2.mjs';
13
- import { makeRenderPlaceholderFunction } from './chunk-OELUUJZY.mjs';
14
14
  import { getTextAroundCollapsedCursor, getFullEditorTextWithNewlines } from './chunk-IXJ2HCOA.mjs';
15
15
  import { __spreadValues, __objRest, __spreadProps } from './chunk-MRXNTQOX.mjs';
16
16
  import React, { useMemo, useState, useCallback, useEffect } from 'react';
@@ -107,6 +107,7 @@ var BaseCopilotTextareaWithHoveringContext = React.forwardRef(
107
107
  const _a = props, {
108
108
  placeholderStyle,
109
109
  value,
110
+ hoverMenuClassname,
110
111
  onValueChange,
111
112
  baseAutosuggestionsConfig: autosuggestionsConfigFromProps,
112
113
  className,
@@ -116,6 +117,7 @@ var BaseCopilotTextareaWithHoveringContext = React.forwardRef(
116
117
  } = _a, propsToForward = __objRest(_a, [
117
118
  "placeholderStyle",
118
119
  "value",
120
+ "hoverMenuClassname",
119
121
  "onValueChange",
120
122
  "baseAutosuggestionsConfig",
121
123
  "className",
@@ -158,7 +160,8 @@ var BaseCopilotTextareaWithHoveringContext = React.forwardRef(
158
160
  }),
159
161
  /* @__PURE__ */ jsx(HoveringToolbar, {
160
162
  apiConfig: autosuggestionsConfig.apiConfig,
161
- contextCategories: autosuggestionsConfig.contextCategories
163
+ contextCategories: autosuggestionsConfig.contextCategories,
164
+ hoverMenuClassname
162
165
  }),
163
166
  /* @__PURE__ */ jsx(Editable, __spreadValues({
164
167
  renderElement: renderElementMemoized,
@@ -199,4 +202,4 @@ var BaseCopilotTextarea = React.forwardRef(
199
202
 
200
203
  export { BaseCopilotTextarea };
201
204
  //# sourceMappingURL=out.js.map
202
- //# sourceMappingURL=chunk-JBI2MZB4.mjs.map
205
+ //# sourceMappingURL=chunk-NZKGYWQV.mjs.map
package/dist/chunk-NZKGYWQV.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/base-copilot-textarea/base-copilot-textarea.tsx"],"names":["_a","value"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Descendant, Editor } from \"slate\";\nimport { Editable, Slate } from \"slate-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useAutosuggestions } from \"../../hooks/base-copilot-textarea-implementation/use-autosuggestions\";\nimport { useCopilotTextareaEditor } from \"../../hooks/base-copilot-textarea-implementation/use-copilot-textarea-editor\";\nimport { usePopulateCopilotTextareaRef } from \"../../hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref\";\nimport {\n getFullEditorTextWithNewlines,\n getTextAroundCollapsedCursor,\n} from \"../../lib/get-text-around-cursor\";\nimport { addAutocompletionsToEditor } from \"../../lib/slatejs-edits/add-autocompletions\";\nimport { clearAutocompletionsFromEditor } from \"../../lib/slatejs-edits/clear-autocompletions\";\nimport { replaceEditorText } from \"../../lib/slatejs-edits/replace-text\";\nimport {\n BaseAutosuggestionsConfig,\n defaultBaseAutosuggestionsConfig,\n} from \"../../types/base\";\nimport { AutosuggestionState } from \"../../types/base/autosuggestion-state\";\nimport { BaseCopilotTextareaProps } from \"../../types/base/base-copilot-textarea-props\";\nimport \"./base-copilot-textarea.css\";\nimport { HoveringToolbar } from \"../hovering-toolbar/hovering-toolbar\";\nimport { makeRenderElementFunction } from \"./render-element\";\nimport { makeRenderPlaceholderFunction } from \"./render-placeholder\";\nimport { useAddBrandingCss } from \"./use-add-branding-css\";\nimport {\n HoveringEditorProvider,\n useHoveringEditorContext,\n} from \"../hovering-toolbar/hovering-editor-provider\";\nimport { EditorAutocompleteState } from \"../../types/base/editor-autocomplete-state\";\nimport { TrackerTextEditedSinceLastCursorMovement } from \"./track-cursor-moved-since-last-text-change\";\n\nexport interface HTMLCopilotTextAreaElement extends HTMLElement {\n value: string;\n focus: () => void;\n blur: () => void;\n}\n\nconst BaseCopilotTextareaWithHoveringContext = React.forwardRef(\n (\n props: BaseCopilotTextareaProps,\n ref: React.Ref<HTMLCopilotTextAreaElement>\n ): JSX.Element => {\n const autosuggestionsConfig: BaseAutosuggestionsConfig = {\n ...defaultBaseAutosuggestionsConfig,\n ...props.baseAutosuggestionsConfig,\n };\n\n const valueOnInitialRender = useMemo(() => props.value ?? \"\", []);\n const [lastKnownFullEditorText, setLastKnownFullEditorText] =\n useState(valueOnInitialRender);\n const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] =\n useState(false);\n\n // // When the editor text changes, we want to reset the `textEditedSinceLastCursorMovement` state.\n // useEffect(() => {\n // setCursorMovedSinceLastTextChange(false);\n // }, [lastKnownFullEditorText]);\n\n const initialValue: Descendant[] = useMemo(() => {\n return [\n {\n type: \"paragraph\",\n children: [{ text: valueOnInitialRender }],\n },\n ];\n }, [valueOnInitialRender]);\n\n const editor = useCopilotTextareaEditor();\n\n const {\n isDisplayed: hoveringEditorIsDisplayed,\n setIsDisplayed: setHoveringEditorIsDisplayed,\n } = useHoveringEditorContext();\n\n const insertText = useCallback(\n (autosuggestion: AutosuggestionState) => {\n Editor.insertText(editor, autosuggestion.text, {\n at: autosuggestion.point,\n });\n },\n [editor]\n );\n\n const {\n currentAutocompleteSuggestion,\n onChangeHandler: onChangeHandlerForAutocomplete,\n onKeyDownHandler: onKeyDownHandlerForAutocomplete,\n } = useAutosuggestions(\n autosuggestionsConfig.debounceTime,\n autosuggestionsConfig.acceptAutosuggestionKey,\n autosuggestionsConfig.apiConfig.autosuggestionsFunction,\n insertText,\n autosuggestionsConfig.disableWhenEmpty,\n autosuggestionsConfig.disabled ||\n hoveringEditorIsDisplayed || // disable autosuggestions when the hovering editor is displayed\n (cursorMovedSinceLastTextChange &&\n autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText) // disable autosuggestions when the cursor has moved since the last text change\n );\n const onKeyDownHandlerForHoveringEditor = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n // if command-k, toggle the hovering editor\n if (event.key === \"k\" && event.metaKey) {\n event.preventDefault();\n setHoveringEditorIsDisplayed(!hoveringEditorIsDisplayed);\n }\n },\n [hoveringEditorIsDisplayed, setHoveringEditorIsDisplayed]\n );\n\n // sync autosuggestions state with the editor\n useEffect(() => {\n clearAutocompletionsFromEditor(editor);\n if (currentAutocompleteSuggestion) {\n addAutocompletionsToEditor(\n editor,\n currentAutocompleteSuggestion.text,\n currentAutocompleteSuggestion.point\n );\n }\n }, [currentAutocompleteSuggestion]);\n\n const suggestionStyleAugmented: React.CSSProperties = useMemo(() => {\n return {\n fontStyle: \"italic\",\n color: \"gray\",\n ...props.suggestionsStyle,\n };\n }, [props.suggestionsStyle]);\n\n const renderElementMemoized = useMemo(() => {\n return makeRenderElementFunction(suggestionStyleAugmented);\n }, [suggestionStyleAugmented]);\n\n const renderPlaceholderMemoized = useMemo(() => {\n // For some reason slateJS specifies a top value of 0, which makes for strange styling. We override this here.\n const placeholderStyleSlatejsOverrides: React.CSSProperties = {\n top: undefined,\n };\n\n const placeholderStyleAugmented: React.CSSProperties = {\n ...placeholderStyleSlatejsOverrides,\n ...props.placeholderStyle,\n };\n\n return makeRenderPlaceholderFunction(placeholderStyleAugmented);\n }, [props.placeholderStyle]);\n\n // update the editor text, but only when the value changes from outside the component\n useEffect(() => {\n if (props.value === lastKnownFullEditorText) {\n return;\n }\n\n setLastKnownFullEditorText(props.value ?? \"\");\n replaceEditorText(editor, props.value ?? \"\");\n }, [props.value]);\n\n // separate into TextareaHTMLAttributes<HTMLDivElement> and CopilotTextareaProps\n const {\n placeholderStyle,\n value,\n hoverMenuClassname,\n onValueChange,\n baseAutosuggestionsConfig: autosuggestionsConfigFromProps,\n className,\n onChange,\n onKeyDown,\n disableBranding,\n ...propsToForward\n } = props;\n\n useAddBrandingCss(suggestionStyleAugmented, disableBranding);\n usePopulateCopilotTextareaRef(editor, ref);\n\n const moddedClassName = (() => {\n const baseClassName = \"copilot-textarea\";\n const brandingClass = disableBranding ? \"no-branding\" : \"with-branding\";\n const defaultTailwindClassName = \"bg-white overflow-y-auto resize-y\";\n const mergedClassName = twMerge(\n defaultTailwindClassName,\n className ?? \"\"\n );\n return `${baseClassName} ${brandingClass} ${mergedClassName}`;\n })();\n\n return (\n <Slate\n editor={editor}\n initialValue={initialValue}\n onChange={(value) => {\n const newEditorState = getTextAroundCollapsedCursor(editor);\n\n const fullEditorText = newEditorState\n ? newEditorState.textBeforeCursor + newEditorState.textAfterCursor\n : getFullEditorTextWithNewlines(editor); // we don't double-parse the editor. When `newEditorState` is null, we didn't parse the editor yet.\n\n setLastKnownFullEditorText((prev) => {\n if (prev !== fullEditorText) {\n setCursorMovedSinceLastTextChange(false);\n }\n return fullEditorText;\n });\n onChangeHandlerForAutocomplete(newEditorState);\n\n props.onValueChange?.(fullEditorText);\n props.onChange?.(makeSemiFakeReactTextAreaEvent(fullEditorText));\n }}\n >\n <TrackerTextEditedSinceLastCursorMovement\n setCursorMovedSinceLastTextChange={setCursorMovedSinceLastTextChange}\n />\n <HoveringToolbar\n apiConfig={autosuggestionsConfig.apiConfig}\n contextCategories={autosuggestionsConfig.contextCategories}\n hoverMenuClassname={hoverMenuClassname}\n />\n <Editable\n renderElement={renderElementMemoized}\n renderPlaceholder={renderPlaceholderMemoized}\n onKeyDown={(event) => {\n onKeyDownHandlerForHoveringEditor(event); // forward the event for internal use\n onKeyDownHandlerForAutocomplete(event); // forward the event for internal use\n props.onKeyDown?.(event); // forward the event for external use\n }}\n className={moddedClassName}\n {...propsToForward}\n />\n </Slate>\n );\n }\n);\n\n// Consumers of <textarea> expect a `onChange: (React.ChangeEvent<HTMLTextAreaElement>) => void` event handler to be passed in.\n// This is *extremely* common, and we want to support it.\n//\n// We can't support the full functionality, but in 99% of cases, the consumer only cares about the `event.target.value` property --\n// that's how they get the new value of the textarea.\n//\n// So, the tradeoff we are making is minimizing compiler complaint, with a small chance of runtime error.\n// The alternative would be defining a different onChange entrypoint (we actually do have that in `onValueChange`),\n// And starting to explain subtleties to users the moment they try to use the component for the first time for very basic functionality.\n//\n// If this proves problematic, we can always revisit this decision.\nfunction makeSemiFakeReactTextAreaEvent(\n currentText: string\n): React.ChangeEvent<HTMLTextAreaElement> {\n return {\n target: {\n value: currentText,\n type: \"copilot-textarea\",\n },\n currentTarget: {\n value: currentText,\n type: \"copilot-textarea\",\n },\n } as React.ChangeEvent<HTMLTextAreaElement>;\n}\n\nexport const BaseCopilotTextarea = React.forwardRef(\n (\n props: BaseCopilotTextareaProps,\n ref: React.Ref<HTMLCopilotTextAreaElement>\n ): JSX.Element => {\n return (\n <HoveringEditorProvider>\n <BaseCopilotTextareaWithHoveringContext {...props} ref={ref} />\n </HoveringEditorProvider>\n );\n }\n);\n"]}
package/dist/{chunk-UIN6BEVR.mjs → chunk-SFEGMBSS.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  import { useMakeStandardAutosuggestionFunction } from './chunk-DYGPLRY3.mjs';
2
2
  import { useMakeStandardInsertionOrEditingFunction } from './chunk-WPIA53HF.mjs';
3
3
  import { defaultAutosuggestionsConfig } from './chunk-F2TIBXML.mjs';
4
- import { BaseCopilotTextarea } from './chunk-JBI2MZB4.mjs';
4
+ import { BaseCopilotTextarea } from './chunk-NZKGYWQV.mjs';
5
5
  import { __objRest, __spreadProps, __spreadValues } from './chunk-MRXNTQOX.mjs';
6
6
  import React from 'react';
7
7
  import merge from 'lodash.merge';
@@ -46,4 +46,4 @@ var CopilotTextarea = React.forwardRef(
46
46
 
47
47
  export { CopilotTextarea };
48
48
  //# sourceMappingURL=out.js.map
49
- //# sourceMappingURL=chunk-UIN6BEVR.mjs.map
49
+ //# sourceMappingURL=chunk-SFEGMBSS.mjs.map
package/dist/components/base-copilot-textarea/base-copilot-textarea.mjs CHANGED
@@ -1,4 +1,4 @@
1
- export { BaseCopilotTextarea } from '../../chunk-JBI2MZB4.mjs';
1
+ export { BaseCopilotTextarea } from '../../chunk-NZKGYWQV.mjs';
2
2
  import '../../chunk-CSGFJU3L.mjs';
3
3
  import '../../chunk-KCHYD3EB.mjs';
4
4
  import '../../chunk-YQU7WG7T.mjs';
@@ -7,9 +7,10 @@ import '../../chunk-F3MHL6ZY.mjs';
7
7
  import '../../chunk-RQHOUUXQ.mjs';
8
8
  import '../../chunk-UHD44NC5.mjs';
9
9
  import '../../chunk-JAFCXEPU.mjs';
10
+ import '../../chunk-OELUUJZY.mjs';
10
11
  import '../../chunk-OD7ZMOVE.mjs';
11
12
  import '../../chunk-MPME5BW2.mjs';
12
- import '../../chunk-IJC2EXRO.mjs';
13
+ import '../../chunk-BYIG72TT.mjs';
13
14
  import '../../chunk-L7VVZH4Q.mjs';
14
15
  import '../../chunk-NO3EYPQH.mjs';
15
16
  import '../../chunk-MRPRZQMN.mjs';
@@ -27,7 +28,6 @@ import '../../chunk-KGKLUWKW.mjs';
27
28
  import '../../chunk-WJHSY5T6.mjs';
28
29
  import '../../chunk-S6JUGJK2.mjs';
29
30
  import '../../chunk-LNAIMEB2.mjs';
30
- import '../../chunk-OELUUJZY.mjs';
31
31
  import '../../chunk-NKW5OU2S.mjs';
32
32
  import '../../chunk-YTOPHPSG.mjs';
33
33
  import '../../chunk-IXJ2HCOA.mjs';
package/dist/components/copilot-textarea/copilot-textarea.mjs CHANGED
@@ -1,4 +1,4 @@
1
- export { CopilotTextarea } from '../../chunk-UIN6BEVR.mjs';
1
+ export { CopilotTextarea } from '../../chunk-SFEGMBSS.mjs';
2
2
  import '../../chunk-DYGPLRY3.mjs';
3
3
  import '../../chunk-WPIA53HF.mjs';
4
4
  import '../../chunk-DE5K76I2.mjs';
@@ -9,7 +9,7 @@ import '../../chunk-AXN37AHC.mjs';
9
9
  import '../../chunk-RR6OQGTI.mjs';
10
10
  import '../../chunk-JHTAOLEW.mjs';
11
11
  import '../../chunk-WADHCMPK.mjs';
12
- import '../../chunk-JBI2MZB4.mjs';
12
+ import '../../chunk-NZKGYWQV.mjs';
13
13
  import '../../chunk-CSGFJU3L.mjs';
14
14
  import '../../chunk-KCHYD3EB.mjs';
15
15
  import '../../chunk-YQU7WG7T.mjs';
@@ -18,9 +18,10 @@ import '../../chunk-F3MHL6ZY.mjs';
18
18
  import '../../chunk-RQHOUUXQ.mjs';
19
19
  import '../../chunk-UHD44NC5.mjs';
20
20
  import '../../chunk-JAFCXEPU.mjs';
21
+ import '../../chunk-OELUUJZY.mjs';
21
22
  import '../../chunk-OD7ZMOVE.mjs';
22
23
  import '../../chunk-MPME5BW2.mjs';
23
- import '../../chunk-IJC2EXRO.mjs';
24
+ import '../../chunk-BYIG72TT.mjs';
24
25
  import '../../chunk-L7VVZH4Q.mjs';
25
26
  import '../../chunk-NO3EYPQH.mjs';
26
27
  import '../../chunk-MRPRZQMN.mjs';
@@ -38,7 +39,6 @@ import '../../chunk-KGKLUWKW.mjs';
38
39
  import '../../chunk-WJHSY5T6.mjs';
39
40
  import '../../chunk-S6JUGJK2.mjs';
40
41
  import '../../chunk-LNAIMEB2.mjs';
41
- import '../../chunk-OELUUJZY.mjs';
42
42
  import '../../chunk-NKW5OU2S.mjs';
43
43
  import '../../chunk-YTOPHPSG.mjs';
44
44
  import '../../chunk-IXJ2HCOA.mjs';
package/dist/components/hovering-toolbar/hovering-toolbar.d.ts CHANGED
@@ -4,6 +4,7 @@ import '@copilotkit/react-core';
4
4
  interface HoveringToolbarProps {
5
5
  apiConfig: InsertionEditorApiConfig;
6
6
  contextCategories: string[];
7
+ hoverMenuClassname: string | undefined;
7
8
  }
8
9
  declare const HoveringToolbar: (props: HoveringToolbarProps) => JSX.Element | null;
9
10
 
package/dist/components/hovering-toolbar/hovering-toolbar.mjs CHANGED
@@ -1,4 +1,4 @@
1
- export { HoveringToolbar } from '../../chunk-IJC2EXRO.mjs';
1
+ export { HoveringToolbar } from '../../chunk-BYIG72TT.mjs';
2
2
  import '../../chunk-L7VVZH4Q.mjs';
3
3
  import '../../chunk-NO3EYPQH.mjs';
4
4
  import '../../chunk-MRPRZQMN.mjs';
package/dist/components/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import '../chunk-MMVDU6DF.mjs';
2
- export { CopilotTextarea } from '../chunk-UIN6BEVR.mjs';
2
+ export { CopilotTextarea } from '../chunk-SFEGMBSS.mjs';
3
3
  import '../chunk-DYGPLRY3.mjs';
4
4
  import '../chunk-WPIA53HF.mjs';
5
5
  import '../chunk-DE5K76I2.mjs';
@@ -10,7 +10,7 @@ import '../chunk-AXN37AHC.mjs';
10
10
  import '../chunk-RR6OQGTI.mjs';
11
11
  import '../chunk-JHTAOLEW.mjs';
12
12
  import '../chunk-WADHCMPK.mjs';
13
- export { BaseCopilotTextarea } from '../chunk-JBI2MZB4.mjs';
13
+ export { BaseCopilotTextarea } from '../chunk-NZKGYWQV.mjs';
14
14
  import '../chunk-CSGFJU3L.mjs';
15
15
  import '../chunk-KCHYD3EB.mjs';
16
16
  import '../chunk-YQU7WG7T.mjs';
@@ -19,9 +19,10 @@ import '../chunk-F3MHL6ZY.mjs';
19
19
  import '../chunk-RQHOUUXQ.mjs';
20
20
  import '../chunk-UHD44NC5.mjs';
21
21
  import '../chunk-JAFCXEPU.mjs';
22
+ import '../chunk-OELUUJZY.mjs';
22
23
  import '../chunk-OD7ZMOVE.mjs';
23
24
  import '../chunk-MPME5BW2.mjs';
24
- import '../chunk-IJC2EXRO.mjs';
25
+ import '../chunk-BYIG72TT.mjs';
25
26
  import '../chunk-L7VVZH4Q.mjs';
26
27
  import '../chunk-NO3EYPQH.mjs';
27
28
  import '../chunk-MRPRZQMN.mjs';
@@ -39,7 +40,6 @@ import '../chunk-KGKLUWKW.mjs';
39
40
  import '../chunk-WJHSY5T6.mjs';
40
41
  import '../chunk-S6JUGJK2.mjs';
41
42
  import '../chunk-LNAIMEB2.mjs';
42
- import '../chunk-OELUUJZY.mjs';
43
43
  import '../chunk-NKW5OU2S.mjs';
44
44
  import '../chunk-YTOPHPSG.mjs';
45
45
  import '../chunk-IXJ2HCOA.mjs';
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import './chunk-MMVDU6DF.mjs';
2
- export { CopilotTextarea } from './chunk-UIN6BEVR.mjs';
2
+ export { CopilotTextarea } from './chunk-SFEGMBSS.mjs';
3
3
  import './chunk-DYGPLRY3.mjs';
4
4
  import './chunk-WPIA53HF.mjs';
5
5
  import './chunk-DE5K76I2.mjs';
@@ -10,7 +10,7 @@ import './chunk-AXN37AHC.mjs';
10
10
  import './chunk-RR6OQGTI.mjs';
11
11
  import './chunk-JHTAOLEW.mjs';
12
12
  import './chunk-WADHCMPK.mjs';
13
- export { BaseCopilotTextarea } from './chunk-JBI2MZB4.mjs';
13
+ export { BaseCopilotTextarea } from './chunk-NZKGYWQV.mjs';
14
14
  import './chunk-CSGFJU3L.mjs';
15
15
  import './chunk-KCHYD3EB.mjs';
16
16
  import './chunk-YQU7WG7T.mjs';
@@ -19,9 +19,10 @@ import './chunk-F3MHL6ZY.mjs';
19
19
  import './chunk-RQHOUUXQ.mjs';
20
20
  import './chunk-UHD44NC5.mjs';
21
21
  import './chunk-JAFCXEPU.mjs';
22
+ import './chunk-OELUUJZY.mjs';
22
23
  import './chunk-OD7ZMOVE.mjs';
23
24
  import './chunk-MPME5BW2.mjs';
24
- import './chunk-IJC2EXRO.mjs';
25
+ import './chunk-BYIG72TT.mjs';
25
26
  import './chunk-L7VVZH4Q.mjs';
26
27
  import './chunk-NO3EYPQH.mjs';
27
28
  import './chunk-MRPRZQMN.mjs';
@@ -39,9 +40,8 @@ import './chunk-KGKLUWKW.mjs';
39
40
  import './chunk-WJHSY5T6.mjs';
40
41
  export { defaultBaseAutosuggestionsConfig } from './chunk-S6JUGJK2.mjs';
41
42
  import './chunk-LNAIMEB2.mjs';
42
- import './chunk-OELUUJZY.mjs';
43
- import './chunk-H4VKQGVU.mjs';
44
43
  import './chunk-IU3WTXLQ.mjs';
44
+ import './chunk-H4VKQGVU.mjs';
45
45
  import './chunk-NKW5OU2S.mjs';
46
46
  import './chunk-YTOPHPSG.mjs';
47
47
  import './chunk-IXJ2HCOA.mjs';
package/dist/types/base/base-copilot-textarea-props.d.ts CHANGED
@@ -14,6 +14,8 @@ import '@copilotkit/react-core';
14
14
  *
15
15
  * @property {React.CSSProperties} [suggestionsStyle] - Specifies the CSS styles to apply to the suggestions list.
16
16
  *
17
+ * @property {string} [hoverMenuClassname] - a classname to applly to the editor popover window.
18
+ *
17
19
  * @property {string} [value] - The initial value of the textarea. Can be controlled via `onValueChange`.
18
20
  *
19
21
  * @property {(value: string) => void} [onValueChange] - Callback invoked when the value of the textarea changes.
@@ -29,6 +31,7 @@ interface BaseCopilotTextareaProps extends Omit<TextareaHTMLAttributes<HTMLDivEl
29
31
  disableBranding?: boolean;
30
32
  placeholderStyle?: React.CSSProperties;
31
33
  suggestionsStyle?: React.CSSProperties;
34
+ hoverMenuClassname?: string;
32
35
  value?: string;
33
36
  onValueChange?: (value: string) => void;
34
37
  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
- "version": "0.21.0-alpha.7",
7
+ "version": "0.22.0",
8
8
  "sideEffects": [
9
9
  "**/*.css"
10
10
  ],
@@ -33,9 +33,9 @@
33
33
  "ts-jest": "^29.1.1",
34
34
  "tsup": "^6.1.3",
35
35
  "typescript": "^4.9.4",
36
- "tailwind-config": "0.1.0",
37
36
  "eslint-config-custom": "0.2.0",
38
- "tsconfig": "0.5.0-alpha.2"
37
+ "tsconfig": "0.5.0",
38
+ "tailwind-config": "0.1.0"
39
39
  },
40
40
  "dependencies": {
41
41
  "@emotion/css": "^11.11.2",
@@ -59,7 +59,7 @@
59
59
  "slate-history": "^0.93.0",
60
60
  "slate-react": "^0.98.1",
61
61
  "tailwind-merge": "^1.13.2",
62
- "@copilotkit/react-core": "0.11.0-alpha.7"
62
+ "@copilotkit/react-core": "0.11.0"
63
63
  },
64
64
  "scripts": {
65
65
  "build": "tsup --treeshake",
package/src/components/base-copilot-textarea/base-copilot-textarea.tsx CHANGED
@@ -160,6 +160,7 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
160
160
  const {
161
161
  placeholderStyle,
162
162
  value,
163
+ hoverMenuClassname,
163
164
  onValueChange,
164
165
  baseAutosuggestionsConfig: autosuggestionsConfigFromProps,
165
166
  className,
@@ -212,6 +213,7 @@ const BaseCopilotTextareaWithHoveringContext = React.forwardRef(
212
213
  <HoveringToolbar
213
214
  apiConfig={autosuggestionsConfig.apiConfig}
214
215
  contextCategories={autosuggestionsConfig.contextCategories}
216
+ hoverMenuClassname={hoverMenuClassname}
215
217
  />
216
218
  <Editable
217
219
  renderElement={renderElementMemoized}
package/src/components/hovering-toolbar/hovering-toolbar.tsx CHANGED
@@ -17,6 +17,7 @@ import {
17
17
  export interface HoveringToolbarProps {
18
18
  apiConfig: InsertionEditorApiConfig;
19
19
  contextCategories: string[];
20
+ hoverMenuClassname: string | undefined;
20
21
  }
21
22
 
22
23
  export const HoveringToolbar: (
@@ -118,7 +119,10 @@ export const HoveringToolbar: (
118
119
  <Portal>
119
120
  <Menu
120
121
  ref={ref}
121
- className="p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700"
122
+ className={
123
+ props.hoverMenuClassname ||
124
+ "p-2 absolute z-10 top-[-10000px] left-[-10000px] mt-[-6px] opacity-0 transition-opacity duration-700"
125
+ }
122
126
  >
123
127
  {isDisplayed && selection && (
124
128
  <HoveringInsertionPromptBox
package/src/types/base/base-copilot-textarea-props.tsx CHANGED
@@ -13,6 +13,8 @@ import { BaseCopilotTextareaApiConfig } from "./autosuggestions-bare-function";
13
13
  *
14
14
  * @property {React.CSSProperties} [suggestionsStyle] - Specifies the CSS styles to apply to the suggestions list.
15
15
  *
16
+ * @property {string} [hoverMenuClassname] - a classname to applly to the editor popover window.
17
+ *
16
18
  * @property {string} [value] - The initial value of the textarea. Can be controlled via `onValueChange`.
17
19
  *
18
20
  * @property {(value: string) => void} [onValueChange] - Callback invoked when the value of the textarea changes.
@@ -29,6 +31,7 @@ export interface BaseCopilotTextareaProps
29
31
  disableBranding?: boolean;
30
32
  placeholderStyle?: React.CSSProperties;
31
33
  suggestionsStyle?: React.CSSProperties;
34
+ hoverMenuClassname?: string;
32
35
  value?: string;
33
36
  onValueChange?: (value: string) => void;
34
37
  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
package/dist/chunk-IJC2EXRO.mjs.map DELETED
@@ -1 +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 contextCategories: string[];\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 contextCategories={props.contextCategories}\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-JBI2MZB4.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/base-copilot-textarea/base-copilot-textarea.tsx"],"names":["_a","value"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Descendant, Editor } from \"slate\";\nimport { Editable, Slate } from \"slate-react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { useAutosuggestions } from \"../../hooks/base-copilot-textarea-implementation/use-autosuggestions\";\nimport { useCopilotTextareaEditor } from \"../../hooks/base-copilot-textarea-implementation/use-copilot-textarea-editor\";\nimport { usePopulateCopilotTextareaRef } from \"../../hooks/base-copilot-textarea-implementation/use-populate-copilot-textarea-ref\";\nimport {\n getFullEditorTextWithNewlines,\n getTextAroundCollapsedCursor,\n} from \"../../lib/get-text-around-cursor\";\nimport { addAutocompletionsToEditor } from \"../../lib/slatejs-edits/add-autocompletions\";\nimport { clearAutocompletionsFromEditor } from \"../../lib/slatejs-edits/clear-autocompletions\";\nimport { replaceEditorText } from \"../../lib/slatejs-edits/replace-text\";\nimport {\n BaseAutosuggestionsConfig,\n defaultBaseAutosuggestionsConfig,\n} from \"../../types/base\";\nimport { AutosuggestionState } from \"../../types/base/autosuggestion-state\";\nimport { BaseCopilotTextareaProps } from \"../../types/base/base-copilot-textarea-props\";\nimport \"./base-copilot-textarea.css\";\nimport { HoveringToolbar } from \"../hovering-toolbar/hovering-toolbar\";\nimport { makeRenderElementFunction } from \"./render-element\";\nimport { makeRenderPlaceholderFunction } from \"./render-placeholder\";\nimport { useAddBrandingCss } from \"./use-add-branding-css\";\nimport {\n HoveringEditorProvider,\n useHoveringEditorContext,\n} from \"../hovering-toolbar/hovering-editor-provider\";\nimport { EditorAutocompleteState } from \"../../types/base/editor-autocomplete-state\";\nimport { TrackerTextEditedSinceLastCursorMovement } from \"./track-cursor-moved-since-last-text-change\";\n\nexport interface HTMLCopilotTextAreaElement extends HTMLElement {\n value: string;\n focus: () => void;\n blur: () => void;\n}\n\nconst BaseCopilotTextareaWithHoveringContext = React.forwardRef(\n (\n props: BaseCopilotTextareaProps,\n ref: React.Ref<HTMLCopilotTextAreaElement>\n ): JSX.Element => {\n const autosuggestionsConfig: BaseAutosuggestionsConfig = {\n ...defaultBaseAutosuggestionsConfig,\n ...props.baseAutosuggestionsConfig,\n };\n\n const valueOnInitialRender = useMemo(() => props.value ?? \"\", []);\n const [lastKnownFullEditorText, setLastKnownFullEditorText] =\n useState(valueOnInitialRender);\n const [cursorMovedSinceLastTextChange, setCursorMovedSinceLastTextChange] =\n useState(false);\n\n // // When the editor text changes, we want to reset the `textEditedSinceLastCursorMovement` state.\n // useEffect(() => {\n // setCursorMovedSinceLastTextChange(false);\n // }, [lastKnownFullEditorText]);\n\n const initialValue: Descendant[] = useMemo(() => {\n return [\n {\n type: \"paragraph\",\n children: [{ text: valueOnInitialRender }],\n },\n ];\n }, [valueOnInitialRender]);\n\n const editor = useCopilotTextareaEditor();\n\n const {\n isDisplayed: hoveringEditorIsDisplayed,\n setIsDisplayed: setHoveringEditorIsDisplayed,\n } = useHoveringEditorContext();\n\n const insertText = useCallback(\n (autosuggestion: AutosuggestionState) => {\n Editor.insertText(editor, autosuggestion.text, {\n at: autosuggestion.point,\n });\n },\n [editor]\n );\n\n const {\n currentAutocompleteSuggestion,\n onChangeHandler: onChangeHandlerForAutocomplete,\n onKeyDownHandler: onKeyDownHandlerForAutocomplete,\n } = useAutosuggestions(\n autosuggestionsConfig.debounceTime,\n autosuggestionsConfig.acceptAutosuggestionKey,\n autosuggestionsConfig.apiConfig.autosuggestionsFunction,\n insertText,\n autosuggestionsConfig.disableWhenEmpty,\n autosuggestionsConfig.disabled ||\n hoveringEditorIsDisplayed || // disable autosuggestions when the hovering editor is displayed\n (cursorMovedSinceLastTextChange &&\n autosuggestionsConfig.temporarilyDisableWhenMovingCursorWithoutChangingText) // disable autosuggestions when the cursor has moved since the last text change\n );\n const onKeyDownHandlerForHoveringEditor = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n // if command-k, toggle the hovering editor\n if (event.key === \"k\" && event.metaKey) {\n event.preventDefault();\n setHoveringEditorIsDisplayed(!hoveringEditorIsDisplayed);\n }\n },\n [hoveringEditorIsDisplayed, setHoveringEditorIsDisplayed]\n );\n\n // sync autosuggestions state with the editor\n useEffect(() => {\n clearAutocompletionsFromEditor(editor);\n if (currentAutocompleteSuggestion) {\n addAutocompletionsToEditor(\n editor,\n currentAutocompleteSuggestion.text,\n currentAutocompleteSuggestion.point\n );\n }\n }, [currentAutocompleteSuggestion]);\n\n const suggestionStyleAugmented: React.CSSProperties = useMemo(() => {\n return {\n fontStyle: \"italic\",\n color: \"gray\",\n ...props.suggestionsStyle,\n };\n }, [props.suggestionsStyle]);\n\n const renderElementMemoized = useMemo(() => {\n return makeRenderElementFunction(suggestionStyleAugmented);\n }, [suggestionStyleAugmented]);\n\n const renderPlaceholderMemoized = useMemo(() => {\n // For some reason slateJS specifies a top value of 0, which makes for strange styling. We override this here.\n const placeholderStyleSlatejsOverrides: React.CSSProperties = {\n top: undefined,\n };\n\n const placeholderStyleAugmented: React.CSSProperties = {\n ...placeholderStyleSlatejsOverrides,\n ...props.placeholderStyle,\n };\n\n return makeRenderPlaceholderFunction(placeholderStyleAugmented);\n }, [props.placeholderStyle]);\n\n // update the editor text, but only when the value changes from outside the component\n useEffect(() => {\n if (props.value === lastKnownFullEditorText) {\n return;\n }\n\n setLastKnownFullEditorText(props.value ?? \"\");\n replaceEditorText(editor, props.value ?? \"\");\n }, [props.value]);\n\n // separate into TextareaHTMLAttributes<HTMLDivElement> and CopilotTextareaProps\n const {\n placeholderStyle,\n value,\n onValueChange,\n baseAutosuggestionsConfig: autosuggestionsConfigFromProps,\n className,\n onChange,\n onKeyDown,\n disableBranding,\n ...propsToForward\n } = props;\n\n useAddBrandingCss(suggestionStyleAugmented, disableBranding);\n usePopulateCopilotTextareaRef(editor, ref);\n\n const moddedClassName = (() => {\n const baseClassName = \"copilot-textarea\";\n const brandingClass = disableBranding ? \"no-branding\" : \"with-branding\";\n const defaultTailwindClassName = \"bg-white overflow-y-auto resize-y\";\n const mergedClassName = twMerge(\n defaultTailwindClassName,\n className ?? \"\"\n );\n return `${baseClassName} ${brandingClass} ${mergedClassName}`;\n })();\n\n return (\n <Slate\n editor={editor}\n initialValue={initialValue}\n onChange={(value) => {\n const newEditorState = getTextAroundCollapsedCursor(editor);\n\n const fullEditorText = newEditorState\n ? newEditorState.textBeforeCursor + newEditorState.textAfterCursor\n : getFullEditorTextWithNewlines(editor); // we don't double-parse the editor. When `newEditorState` is null, we didn't parse the editor yet.\n\n setLastKnownFullEditorText((prev) => {\n if (prev !== fullEditorText) {\n setCursorMovedSinceLastTextChange(false);\n }\n return fullEditorText;\n });\n onChangeHandlerForAutocomplete(newEditorState);\n\n props.onValueChange?.(fullEditorText);\n props.onChange?.(makeSemiFakeReactTextAreaEvent(fullEditorText));\n }}\n >\n <TrackerTextEditedSinceLastCursorMovement\n setCursorMovedSinceLastTextChange={setCursorMovedSinceLastTextChange}\n />\n <HoveringToolbar\n apiConfig={autosuggestionsConfig.apiConfig}\n contextCategories={autosuggestionsConfig.contextCategories}\n />\n <Editable\n renderElement={renderElementMemoized}\n renderPlaceholder={renderPlaceholderMemoized}\n onKeyDown={(event) => {\n onKeyDownHandlerForHoveringEditor(event); // forward the event for internal use\n onKeyDownHandlerForAutocomplete(event); // forward the event for internal use\n props.onKeyDown?.(event); // forward the event for external use\n }}\n className={moddedClassName}\n {...propsToForward}\n />\n </Slate>\n );\n }\n);\n\n// Consumers of <textarea> expect a `onChange: (React.ChangeEvent<HTMLTextAreaElement>) => void` event handler to be passed in.\n// This is *extremely* common, and we want to support it.\n//\n// We can't support the full functionality, but in 99% of cases, the consumer only cares about the `event.target.value` property --\n// that's how they get the new value of the textarea.\n//\n// So, the tradeoff we are making is minimizing compiler complaint, with a small chance of runtime error.\n// The alternative would be defining a different onChange entrypoint (we actually do have that in `onValueChange`),\n// And starting to explain subtleties to users the moment they try to use the component for the first time for very basic functionality.\n//\n// If this proves problematic, we can always revisit this decision.\nfunction makeSemiFakeReactTextAreaEvent(\n currentText: string\n): React.ChangeEvent<HTMLTextAreaElement> {\n return {\n target: {\n value: currentText,\n type: \"copilot-textarea\",\n },\n currentTarget: {\n value: currentText,\n type: \"copilot-textarea\",\n },\n } as React.ChangeEvent<HTMLTextAreaElement>;\n}\n\nexport const BaseCopilotTextarea = React.forwardRef(\n (\n props: BaseCopilotTextareaProps,\n ref: React.Ref<HTMLCopilotTextAreaElement>\n ): JSX.Element => {\n return (\n <HoveringEditorProvider>\n <BaseCopilotTextareaWithHoveringContext {...props} ref={ref} />\n </HoveringEditorProvider>\n );\n }\n);\n"]}