npm - @intlayer/design-system - Versions diffs - 8.4.5 → 8.4.6 - Mend

@intlayer/design-system 8.4.5 → 8.4.6

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 (31) hide show

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
-import configuration from "@intlayer/config/built";
 import { ChevronRight, Plus } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import configuration from "@intlayer/config/built";
 import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useIntlayer } from "react-intlayer";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";

package/dist/esm/components/IDE/CodeBlockShiki.mjs CHANGED Viewed

@@ -11,12 +11,23 @@ const loadLanguage = async (lang) => {
 	if (languageCache.has(lang)) return languageCache.get(lang);
 	let languageModule;
 	switch (lang) {
+		case "angular-html":
+			languageModule = await import("shiki/langs/angular-html.mjs");
+			break;
+		case "angular-ts":
+			languageModule = await import("shiki/langs/angular-ts.mjs");
+			break;
+		case "astro":
+			languageModule = await import("shiki/langs/astro.mjs");
+			break;
 		case "typescript":
 		case "ts":
 			languageModule = await import("shiki/langs/typescript.mjs");
 			break;
 		case "javascript":
 		case "js":
+		case "cjs":
+		case "mjs":
 			languageModule = await import("shiki/langs/javascript.mjs");
 			break;
 		case "bash":
@@ -43,6 +54,7 @@ const loadLanguage = async (lang) => {
 		case "xml":
 			languageModule = await import("shiki/langs/xml.mjs");
 			break;
+		case "yml":
 		case "yaml":
 			languageModule = await import("shiki/langs/yaml.mjs");
 			break;

package/dist/esm/components/IDE/CodeBlockShiki.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n BundledLanguage,\n BundledTheme,\n HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n if (languageCache.has(lang)) return languageCache.get(lang);\n\n let languageModule: any;\n switch (lang) {\n case 'typescript':\n case 'ts':\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n case 'javascript':\n case 'js':\n languageModule = await import('shiki/langs/javascript.mjs');\n break;\n case 'bash':\n case 'sh':\n case 'shell':\n languageModule = await import('shiki/langs/bash.mjs');\n break;\n case 'json':\n languageModule = await import('shiki/langs/json.mjs');\n break;\n case 'jsonc':\n case 'json5':\n languageModule = await import('shiki/langs/json5.mjs');\n break;\n case 'tsx':\n languageModule = await import('shiki/langs/tsx.mjs');\n break;\n case 'vue':\n languageModule = await import('shiki/langs/vue.mjs');\n break;\n case 'html':\n languageModule = await import('shiki/langs/html.mjs');\n break;\n case 'xml':\n languageModule = await import('shiki/langs/xml.mjs');\n break;\n case 'yaml':\n languageModule = await import('shiki/langs/yaml.mjs');\n break;\n default:\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n }\n\n const language = languageModule.default;\n languageCache.set(lang, language);\n return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n let themeModule: any;\n switch (themeName) {\n case 'github-dark':\n themeModule = await import('shiki/themes/github-dark.mjs');\n break;\n case 'github-light':\n default:\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n }\n\n const theme = themeModule.default;\n themeCache.set(themeName, theme);\n return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> \| null = null;\n\nconst getHighlighterInstance = async () => {\n if (!highlighterPromise) {\n highlighterPromise = import('shiki/bundle/web').then(\n ({ createHighlighter }) =>\n createHighlighter({\n langs: [],\n themes: [],\n })\n );\n }\n return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n code: string,\n lang: BundledLanguage,\n isDarkMode?: boolean\n): Promise<string> => {\n const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n // Load highlighter, language, and theme in parallel\n const [highlighter, languageModule, themeModule] = await Promise.all([\n getHighlighterInstance(),\n loadLanguage(lang),\n loadTheme(themeName),\n ]);\n\n // Load into the singleton instance if not already loaded\n if (!highlighter.getLoadedLanguages().includes(lang)) {\n await highlighter.loadLanguage(languageModule);\n }\n if (!highlighter.getLoadedThemes().includes(themeName)) {\n await highlighter.loadTheme(themeModule);\n }\n\n return highlighter.codeToHtml(code, {\n lang,\n theme: themeName,\n });\n};\n\nexport type CodeBlockShikiProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n children,\n lang,\n isDarkMode,\n}) => {\n const [html, setHtml] = useState<string \| null>(null);\n\n useEffect(() => {\n let isCancelled = false;\n\n highlightCode(children, lang, isDarkMode)\n .then((result) => {\n if (!isCancelled) setHtml(result);\n })\n .catch((error) => {\n console.error('Failed to highlight code:', error);\n if (!isCancelled && html === null) setHtml('');\n });\n\n return () => {\n isCancelled = true;\n };\n }, [children, lang, isDarkMode]);\n\n return (\n <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n {html ? (\n // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n <div dangerouslySetInnerHTML={{ __html: html }} />\n ) : (\n <CodeDefault>{children}</CodeDefault>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,gCAAgB,IAAI,KAA2B;AACrD,MAAM,6BAAa,IAAI,KAAwB;AAG/C,MAAM,eAAe,OAAO,SAAwC;AAClE,KAAI,cAAc,IAAI,KAAK,CAAE,QAAO,cAAc,IAAI,KAAK;CAE3D,IAAI;AACJ,SAAQ,MAAR;EACE,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF;AACE,oBAAiB,MAAM,OAAO;AAC9B;;CAGJ,MAAM,WAAW,eAAe;AAChC,eAAc,IAAI,MAAM,SAAS;AACjC,QAAO;;AAIT,MAAM,YAAY,OAAO,cAA0C;AACjE,KAAI,WAAW,IAAI,UAAU,CAAE,QAAO,WAAW,IAAI,UAAU;CAE/D,IAAI;AACJ,SAAQ,WAAR;EACE,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EAEF;AACE,iBAAc,MAAM,OAAO;AAC3B;;CAGJ,MAAM,QAAQ,YAAY;AAC1B,YAAW,IAAI,WAAW,MAAM;AAChC,QAAO;;AAIT,IAAI,qBAAmE;AAEvE,MAAM,yBAAyB,YAAY;AACzC,KAAI,CAAC,mBACH,sBAAqB,OAAO,oBAAoB,MAC7C,EAAE,wBACD,kBAAkB;EAChB,OAAO,EAAE;EACT,QAAQ,EAAE;EACX,CAAC,CACL;AAEH,QAAO;;AAIT,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAM,YAA0B,aAAa,gBAAgB;CAG7D,MAAM,CAAC,aAAa,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACnE,wBAAwB;EACxB,aAAa,KAAK;EAClB,UAAU,UAAU;EACrB,CAAC;AAGF,KAAI,CAAC,YAAY,oBAAoB,CAAC,SAAS,KAAK,CAClD,OAAM,YAAY,aAAa,eAAe;AAEhD,KAAI,CAAC,YAAY,iBAAiB,CAAC,SAAS,UAAU,CACpD,OAAM,YAAY,UAAU,YAAY;AAG1C,QAAO,YAAY,WAAW,MAAM;EAClC;EACA,OAAO;EACR,CAAC;;AASJ,MAAa,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;AAErD,iBAAgB;EACd,IAAI,cAAc;AAElB,gBAAc,UAAU,MAAM,WAAW,CACtC,MAAM,WAAW;AAChB,OAAI,CAAC,YAAa,SAAQ,OAAO;IACjC,CACD,OAAO,UAAU;AAChB,WAAQ,MAAM,6BAA6B,MAAM;AACjD,OAAI,CAAC,eAAe,SAAS,KAAM,SAAQ,GAAG;IAC9C;AAEJ,eAAa;AACX,iBAAc;;IAEf;EAAC;EAAU;EAAM;EAAW,CAAC;AAEhC,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,OAEC,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,MAAM,EAAI,IAElD,oBAAC,aAAD,EAAc,UAAuB;EAEnC"}
1	+ {"version":3,"file":"CodeBlockShiki.mjs","names":[],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n BundledLanguage,\n BundledTheme,\n HighlighterGeneric,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n if (languageCache.has(lang)) return languageCache.get(lang);\n\n let languageModule: any;\n switch (lang) {\n case 'angular-html':\n languageModule = await import('shiki/langs/angular-html.mjs');\n break;\n case 'angular-ts':\n languageModule = await import('shiki/langs/angular-ts.mjs');\n break;\n case 'astro':\n languageModule = await import('shiki/langs/astro.mjs');\n break;\n case 'typescript':\n case 'ts':\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n case 'javascript':\n case 'js':\n case 'cjs':\n case 'mjs':\n languageModule = await import('shiki/langs/javascript.mjs');\n break;\n case 'bash':\n case 'sh':\n case 'shell':\n languageModule = await import('shiki/langs/bash.mjs');\n break;\n case 'json':\n languageModule = await import('shiki/langs/json.mjs');\n break;\n case 'jsonc':\n case 'json5':\n languageModule = await import('shiki/langs/json5.mjs');\n break;\n case 'tsx':\n languageModule = await import('shiki/langs/tsx.mjs');\n break;\n case 'vue':\n languageModule = await import('shiki/langs/vue.mjs');\n break;\n case 'html':\n languageModule = await import('shiki/langs/html.mjs');\n break;\n case 'xml':\n languageModule = await import('shiki/langs/xml.mjs');\n break;\n case 'yml':\n case 'yaml':\n languageModule = await import('shiki/langs/yaml.mjs');\n break;\n default:\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n }\n\n const language = languageModule.default;\n languageCache.set(lang, language);\n return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n if (themeCache.has(themeName)) return themeCache.get(themeName);\n\n let themeModule: any;\n switch (themeName) {\n case 'github-dark':\n themeModule = await import('shiki/themes/github-dark.mjs');\n break;\n case 'github-light':\n default:\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n }\n\n const theme = themeModule.default;\n themeCache.set(themeName, theme);\n return theme;\n};\n\n// Singleton Highlighter Instance\nlet highlighterPromise: Promise<HighlighterGeneric<any, any>> \| null = null;\n\nconst getHighlighterInstance = async () => {\n if (!highlighterPromise) {\n highlighterPromise = import('shiki/bundle/web').then(\n ({ createHighlighter }) =>\n createHighlighter({\n langs: [],\n themes: [],\n })\n );\n }\n return highlighterPromise;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n code: string,\n lang: BundledLanguage,\n isDarkMode?: boolean\n): Promise<string> => {\n const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n // Load highlighter, language, and theme in parallel\n const [highlighter, languageModule, themeModule] = await Promise.all([\n getHighlighterInstance(),\n loadLanguage(lang),\n loadTheme(themeName),\n ]);\n\n // Load into the singleton instance if not already loaded\n if (!highlighter.getLoadedLanguages().includes(lang)) {\n await highlighter.loadLanguage(languageModule);\n }\n if (!highlighter.getLoadedThemes().includes(themeName)) {\n await highlighter.loadTheme(themeModule);\n }\n\n return highlighter.codeToHtml(code, {\n lang,\n theme: themeName,\n });\n};\n\nexport type CodeBlockShikiProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n children,\n lang,\n isDarkMode,\n}) => {\n const [html, setHtml] = useState<string \| null>(null);\n\n useEffect(() => {\n let isCancelled = false;\n\n highlightCode(children, lang, isDarkMode)\n .then((result) => {\n if (!isCancelled) setHtml(result);\n })\n .catch((error) => {\n console.error('Failed to highlight code:', error);\n if (!isCancelled && html === null) setHtml('');\n });\n\n return () => {\n isCancelled = true;\n };\n }, [children, lang, isDarkMode]);\n\n return (\n <div className=\"min-w-0 max-w-full overflow-auto bg-transparent [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_pre::-webkit-scrollbar]:hidden [&_pre]:[-ms-overflow-style:none] [&_pre]:[scrollbar-width:none]\">\n {html ? (\n // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n <div dangerouslySetInnerHTML={{ __html: html }} />\n ) : (\n <CodeDefault>{children}</CodeDefault>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,gCAAgB,IAAI,KAA2B;AACrD,MAAM,6BAAa,IAAI,KAAwB;AAG/C,MAAM,eAAe,OAAO,SAAwC;AAClE,KAAI,cAAc,IAAI,KAAK,CAAE,QAAO,cAAc,IAAI,KAAK;CAE3D,IAAI;AACJ,SAAQ,MAAR;EACE,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF;AACE,oBAAiB,MAAM,OAAO;AAC9B;;CAGJ,MAAM,WAAW,eAAe;AAChC,eAAc,IAAI,MAAM,SAAS;AACjC,QAAO;;AAIT,MAAM,YAAY,OAAO,cAA0C;AACjE,KAAI,WAAW,IAAI,UAAU,CAAE,QAAO,WAAW,IAAI,UAAU;CAE/D,IAAI;AACJ,SAAQ,WAAR;EACE,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EAEF;AACE,iBAAc,MAAM,OAAO;AAC3B;;CAGJ,MAAM,QAAQ,YAAY;AAC1B,YAAW,IAAI,WAAW,MAAM;AAChC,QAAO;;AAIT,IAAI,qBAAmE;AAEvE,MAAM,yBAAyB,YAAY;AACzC,KAAI,CAAC,mBACH,sBAAqB,OAAO,oBAAoB,MAC7C,EAAE,wBACD,kBAAkB;EAChB,OAAO,EAAE;EACT,QAAQ,EAAE;EACX,CAAC,CACL;AAEH,QAAO;;AAIT,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAM,YAA0B,aAAa,gBAAgB;CAG7D,MAAM,CAAC,aAAa,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACnE,wBAAwB;EACxB,aAAa,KAAK;EAClB,UAAU,UAAU;EACrB,CAAC;AAGF,KAAI,CAAC,YAAY,oBAAoB,CAAC,SAAS,KAAK,CAClD,OAAM,YAAY,aAAa,eAAe;AAEhD,KAAI,CAAC,YAAY,iBAAiB,CAAC,SAAS,UAAU,CACpD,OAAM,YAAY,UAAU,YAAY;AAG1C,QAAO,YAAY,WAAW,MAAM;EAClC;EACA,OAAO;EACR,CAAC;;AASJ,MAAa,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;AAErD,iBAAgB;EACd,IAAI,cAAc;AAElB,gBAAc,UAAU,MAAM,WAAW,CACtC,MAAM,WAAW;AAChB,OAAI,CAAC,YAAa,SAAQ,OAAO;IACjC,CACD,OAAO,UAAU;AAChB,WAAQ,MAAM,6BAA6B,MAAM;AACjD,OAAI,CAAC,eAAe,SAAS,KAAM,SAAQ,GAAG;IAC9C;AAEJ,eAAa;AACX,iBAAc;;IAEf;EAAC;EAAU;EAAM;EAAW,CAAC;AAEhC,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,OAEC,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,MAAM,EAAI,IAElD,oBAAC,aAAD,EAAc,UAAuB;EAEnC"}

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs CHANGED Viewed

@@ -1,258 +1,93 @@
 'use client';
-import { useAutocomplete } from "../../hooks/reactQuery.mjs";
-import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
+import { ContentEditableTextArea } from "./ContentEditableTextArea.mjs";
 import { useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useConfiguration } from "@intlayer/editor-react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/TextArea/AutocompleteTextArea.tsx
 /**
-* Custom hook for debouncing values to prevent excessive API calls.
-*
-* Delays updating the returned value until the input value has stopped changing
-* for the specified delay period.
-*
-* @param value - The value to debounce
-* @param delay - Delay in milliseconds before updating the debounced value
-* @returns The debounced value that only updates after the delay period
-*
-* @example
-* ```tsx
-* const [searchTerm, setSearchTerm] = useState('');
-* const debouncedSearchTerm = useDebounce(searchTerm, 300);
-*
-* useEffect(() => {
-*   if (debouncedSearchTerm) {
-*     performSearch(debouncedSearchTerm);
-*   }
-* }, [debouncedSearchTerm]);
-* ```
-*/
-const useDebounce = (value, delay) => {
-	const [debouncedValue, setDebouncedValue] = useState(value);
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-		return () => clearTimeout(timer);
-	}, [value, delay]);
-	return debouncedValue;
-};
-/**
 * AutoCompleteTextarea Component
 *
-* An intelligent textarea that provides AI-powered autocomplete suggestions as users type,
-* combining auto-sizing functionality with contextual text completion.
-*
-* ## Features
-* - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models
-* - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce
-* - **Visual Suggestions**: Inline preview of suggested completions
-* - **Keyboard Navigation**: Tab key to accept suggestions
-* - **Context Analysis**: Uses surrounding text for better suggestions
-* - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities
-* - **Performance Optimized**: Smart caching and minimal re-renders
-*
-* ## Technical Implementation
-* - **Debounce Strategy**: 200ms delay before fetching suggestions
-* - **Context Window**: 5 lines before/after cursor for context
-* - **Minimum Trigger**: Requires 3+ characters before suggesting
-* - **Position Tracking**: Ghost layer for accurate suggestion positioning
-* - **Cursor Management**: Tracks cursor position during suggestion fetch
+* A textarea with inline autocomplete ghost text, built on a contentEditable div
+* instead of a native `<textarea>`. Ghost text (suggestions) is rendered inline
+* at the cursor position and can be accepted with the Tab key.
 *
-* ## AI Integration
-* - Uses configured AI model (OpenAI, Anthropic, etc.)
-* - Sends context-aware prompts for relevant suggestions
-* - Respects temperature and model settings from configuration
-* - Handles API errors gracefully without interrupting user flow
-*
-* ## Use Cases
-* - **Content Creation**: Blog posts, articles, documentation
-* - **Code Comments**: Intelligent code documentation assistance
-* - **Email Composition**: Professional email writing assistance
-* - **Creative Writing**: Story and narrative completion
-* - **Technical Documentation**: API docs, README files
-* - **Social Media**: Post creation with engagement optimization
+* The component wraps `ContentEditableTextArea` and manages suggestion state.
+* When `suggestion` prop is provided it is shown as ghost text at the end of the
+* current text. When `isActive` is false, ghost text is hidden.
 *
 * @example
 * ```tsx
-* // Blog writing assistant
-* const [blogPost, setBlogPost] = useState('');
-* const [isAiEnabled, setIsAiEnabled] = useState(true);
-*
-* <div className="space-y-4">
-*   <div className="flex items-center gap-2">
-*     <Switch
-*       checked={isAiEnabled}
-*       onChange={setIsAiEnabled}
-*     />
-*     <label>AI Writing Assistant</label>
-*   </div>
-*
-*   <AutoCompleteTextarea
-*     value={blogPost}
-*     onChange={(e) => setBlogPost(e.target.value)}
-*     placeholder="Start writing your blog post..."
-*     isActive={isAiEnabled}
-*     autoSize={true}
-*     maxRows={15}
-*     className="min-h-[200px] font-serif text-lg leading-relaxed"
-*   />
-* </div>
-*
-* // Code documentation assistant
-* <AutoCompleteTextarea
-*   value={docComment}
-*   onChange={handleDocChange}
-*   placeholder="/** Describe this function... *\/"
-*   isActive={true}
-*   autoSize={true}
-*   maxRows={8}
-*   className="font-mono text-sm"
-* />
-*
-* // Email composition with templates
 * <AutoCompleteTextarea
-*   defaultValue="Dear "
-*   placeholder="AI will help complete your email..."
+*   value={content}
+*   onChange={handleChange}
+*   suggestion="suggested completion..."
 *   isActive={true}
 *   autoSize={true}
-*   maxRows={12}
-*   variant={InputVariant.DEFAULT}
 * />
 * ```
-*
-* ## Accessibility
-* - Ghost layer is properly hidden from screen readers
-* - Maintains focus management during suggestion acceptance
-* - Preserves keyboard navigation patterns
-* - Respects reduced motion preferences
 */
 const AutoCompleteTextarea = ({ isActive = true, suggestion: suggestionProp, ...props }) => {
-	const defaultValue = String(props.value ?? props.defaultValue ?? "");
-	const { mutate: autocomplete } = useAutocomplete();
-	const configuration = useConfiguration();
-	const [isTyped, setIsTyped] = useState(false);
-	const [text, setText] = useState(defaultValue);
+	const [text, setText] = useState(String(props.value ?? props.defaultValue ?? ""));
 	const [suggestion, setSuggestion] = useState("");
-	const textareaRef = useRef(null);
-	const placeholderRef = useRef(null);
-	const ghostLayerRef = useRef(null);
-	const [suggestionPosition, setSuggestionPosition] = useState(null);
-	const [cursorAtFetch, setCursorAtFetch] = useState(-1);
-	const debouncedText = useDebounce(text, 200);
+	const editorRef = useRef(null);
 	useEffect(() => {
 		if (typeof props.value === "undefined") return;
-		setText(defaultValue);
+		setText(String(props.value ?? props.defaultValue ?? ""));
 	}, [props.value, props.defaultValue]);
-	useEffect(() => {
-		if (!isActive) return;
-		if (!isTyped) return;
-		if (debouncedText.length > 3) setSuggestion("");
-		else setSuggestion("");
-	}, [
-		debouncedText,
-		isActive,
-		autocomplete,
-		configuration
-	]);
-	useEffect(() => {
-		if (!suggestion || cursorAtFetch === -1 || !placeholderRef.current || !ghostLayerRef.current) {
-			setSuggestionPosition(null);
-			return;
-		}
-		const rect = placeholderRef.current.getBoundingClientRect();
-		const parentRect = ghostLayerRef.current.getBoundingClientRect();
-		setSuggestionPosition({
-			left: rect.left - parentRect.left,
-			top: rect.top - parentRect.top
-		});
-	}, [
-		suggestion,
-		cursorAtFetch,
-		text
-	]);
 	const acceptSuggestion = () => {
-		const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;
-		if (currentCursor !== cursorAtFetch) return;
-		setText(text.slice(0, currentCursor) + suggestion + text.slice(currentCursor));
+		const active = suggestionProp ?? suggestion;
+		if (!active) return;
+		const cursor = editorRef.current?.getCursorOffset() ?? text.length;
+		setText(text.slice(0, cursor) + active + text.slice(cursor));
 		setSuggestion("");
-		setCursorAtFetch(-1);
 		setTimeout(() => {
-			textareaRef.current?.focus();
-			const newCursorPos = currentCursor + suggestion.length;
-			textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+			editorRef.current?.focus();
+			editorRef.current?.setCursorAtOffset(cursor + active.length);
 		}, 0);
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative w-full",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				ref: ghostLayerRef,
-				className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
-				"aria-hidden": "true",
-				children: [suggestion && cursorAtFetch !== -1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "align-text-top text-transparent",
-						children: text.slice(0, cursorAtFetch)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						ref: placeholderRef,
-						style: { visibility: "hidden" },
-						"aria-hidden": "true",
-						children: suggestion
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "align-text-top text-transparent",
-						children: text.slice(cursorAtFetch)
-					})
-				] }) : /* @__PURE__ */ jsx("span", {
-					className: "align-text-top text-transparent",
-					children: text
-				}), suggestionProp && /* @__PURE__ */ jsx("span", {
-					className: "align-text-top text-neutral",
-					children: suggestionProp
-				})]
-			}),
-			suggestion && suggestionPosition && /* @__PURE__ */ jsx("div", {
-				className: "pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]",
-				style: {
-					position: "absolute",
-					left: suggestionPosition.left,
-					top: suggestionPosition.top
-				},
-				children: suggestion
-			}),
-			/* @__PURE__ */ jsx(AutoSizedTextArea, {
-				...props,
-				ref: textareaRef,
-				value: text,
-				onChange: (e) => {
-					setIsTyped(true);
-					setText(e.target.value);
-					setSuggestion("");
-					props.onChange?.(e);
-				},
-				onKeyDown: (e) => {
-					if (e.key === "Tab" && suggestion) {
-						e.preventDefault();
-						acceptSuggestion();
-					}
-					props.onKeyDown?.(e);
-				},
-				onSelect: (e) => {
-					if (suggestion && e.target.selectionStart !== cursorAtFetch) {
-						setSuggestion("");
-						setCursorAtFetch(-1);
-					}
-					props.onSelect?.(e);
-				}
-			})
-		]
+	const activeGhost = isActive ? suggestionProp ?? (suggestion || void 0) : void 0;
+	const textLines = text.split("\n");
+	return /* @__PURE__ */ jsx(ContentEditableTextArea, {
+		ref: editorRef,
+		value: text,
+		onChange: (val) => {
+			setText(val);
+			setSuggestion("");
+			if (props.onChange) {
+				const evt = {
+					target: { value: val },
+					currentTarget: { value: val }
+				};
+				props.onChange(evt);
+			}
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Tab" && (suggestionProp ?? suggestion)) {
+				e.preventDefault();
+				acceptSuggestion();
+			}
+			props.onKeyDown?.(e);
+		},
+		ghostText: activeGhost,
+		ghostLine: suggestionProp ? textLines.length - 1 : void 0,
+		ghostOffset: suggestionProp ? textLines[textLines.length - 1]?.length ?? 0 : void 0,
+		placeholder: props.placeholder,
+		disabled: props.disabled,
+		autoSize: props.autoSize,
+		maxRows: props.maxRows,
+		minRows: props.rows,
+		variant: props.variant,
+		validationStyleEnabled: props.validationStyleEnabled,
+		className: props.className,
+		dir: props.dir,
+		"aria-label": props["aria-label"],
+		"aria-invalid": props["aria-invalid"],
+		"aria-describedby": props["aria-describedby"],
+		"data-testid": props["data-testid"]
 	});
 };
 //#endregion
-export { AutoCompleteTextarea, useDebounce };
+export { AutoCompleteTextarea };
 //# sourceMappingURL=AutocompleteTextArea.mjs.map

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAutocomplete } from '@hooks/reactQuery';\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport {\n AutoSizedTextArea,\n type AutoSizedTextAreaProps,\n} from './AutoSizeTextArea';\n\n/*\n Custom hook for debouncing values to prevent excessive API calls.\n \n Delays updating the returned value until the input value has stopped changing\n * for the specified delay period.\n \n @param value - The value to debounce\n * @param delay - Delay in milliseconds before updating the debounced value\n * @returns The debounced value that only updates after the delay period\n \n @example\n * ```tsx\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 300);\n \n useEffect(() => {\n * if (debouncedSearchTerm) {\n * performSearch(debouncedSearchTerm);\n * }\n * }, [debouncedSearchTerm]);\n * ```\n /\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n\n // Cleanup the timer if value changes before 'delay' ms\n return () => clearTimeout(timer);\n }, [value, delay]);\n\n return debouncedValue;\n};\n\n/\n Props for the AutocompleteTextArea component.\n \n Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.\n \n @example\n * ```tsx\n * // AI-powered autocomplete textarea\n * <AutoCompleteTextarea\n * placeholder=\"Start typing for AI suggestions...\"\n * isActive={true}\n * autoSize={true}\n * maxRows={10}\n * />\n \n // Manual suggestion mode\n * <AutoCompleteTextarea\n * value={content}\n * onChange={handleChange}\n * suggestion=\"Consider adding more details about...\"\n * isActive={false}\n * />\n \n // Disabled autocomplete for sensitive content\n * <AutoCompleteTextarea\n * placeholder=\"Private notes (no AI assistance)\"\n * isActive={false}\n * autoSize={true}\n * />\n * ```\n /\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n /* Whether AI autocomplete is active and should fetch suggestions /\n isActive?: boolean;\n /* Manual suggestion text to display (overrides AI suggestions) /\n suggestion?: string;\n};\n\n/\n AutoCompleteTextarea Component\n \n An intelligent textarea that provides AI-powered autocomplete suggestions as users type,\n * combining auto-sizing functionality with contextual text completion.\n \n ## Features\n * - AI-Powered Suggestions: Context-aware autocomplete using configured AI models\n * - Debounced API Calls: Efficient suggestion fetching with 200ms debounce\n * - Visual Suggestions: Inline preview of suggested completions\n * - Keyboard Navigation: Tab key to accept suggestions\n * - Context Analysis: Uses surrounding text for better suggestions\n * - Auto-Sizing: Inherits all AutoSizedTextArea capabilities\n * - Performance Optimized: Smart caching and minimal re-renders\n \n ## Technical Implementation\n * - Debounce Strategy: 200ms delay before fetching suggestions\n * - Context Window: 5 lines before/after cursor for context\n * - Minimum Trigger: Requires 3+ characters before suggesting\n * - Position Tracking: Ghost layer for accurate suggestion positioning\n * - Cursor Management: Tracks cursor position during suggestion fetch\n \n ## AI Integration\n * - Uses configured AI model (OpenAI, Anthropic, etc.)\n * - Sends context-aware prompts for relevant suggestions\n * - Respects temperature and model settings from configuration\n * - Handles API errors gracefully without interrupting user flow\n \n ## Use Cases\n * - Content Creation: Blog posts, articles, documentation\n * - Code Comments: Intelligent code documentation assistance\n * - Email Composition: Professional email writing assistance\n * - Creative Writing: Story and narrative completion\n * - Technical Documentation: API docs, README files\n * - Social Media: Post creation with engagement optimization\n \n @example\n * ```tsx\n * // Blog writing assistant\n * const [blogPost, setBlogPost] = useState('');\n * const [isAiEnabled, setIsAiEnabled] = useState(true);\n \n <div className=\"space-y-4\">\n * <div className=\"flex items-center gap-2\">\n * <Switch\n * checked={isAiEnabled}\n * onChange={setIsAiEnabled}\n * />\n * <label>AI Writing Assistant</label>\n * </div>\n \n <AutoCompleteTextarea\n * value={blogPost}\n * onChange={(e) => setBlogPost(e.target.value)}\n * placeholder=\"Start writing your blog post...\"\n * isActive={isAiEnabled}\n * autoSize={true}\n * maxRows={15}\n * className=\"min-h-[200px] font-serif text-lg leading-relaxed\"\n * />\n * </div>\n \n // Code documentation assistant\n * <AutoCompleteTextarea\n * value={docComment}\n * onChange={handleDocChange}\n * placeholder=\"/** Describe this function... \\/\"\n isActive={true}\n * autoSize={true}\n * maxRows={8}\n * className=\"font-mono text-sm\"\n * />\n \n // Email composition with templates\n * <AutoCompleteTextarea\n * defaultValue=\"Dear \"\n * placeholder=\"AI will help complete your email...\"\n * isActive={true}\n * autoSize={true}\n * maxRows={12}\n * variant={InputVariant.DEFAULT}\n * />\n * ```\n \n ## Accessibility\n * - Ghost layer is properly hidden from screen readers\n * - Maintains focus management during suggestion acceptance\n * - Preserves keyboard navigation patterns\n * - Respects reduced motion preferences\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n isActive = true,\n suggestion: suggestionProp,\n ...props\n}) => {\n const defaultValue = String(props.value ?? props.defaultValue ?? '');\n const { mutate: autocomplete } = useAutocomplete();\n const configuration = useConfiguration();\n const [isTyped, setIsTyped] = useState(false);\n const [text, setText] = useState(defaultValue);\n const [suggestion, setSuggestion] = useState('');\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const placeholderRef = useRef<HTMLSpanElement>(null);\n const ghostLayerRef = useRef<HTMLDivElement>(null);\n const [suggestionPosition, setSuggestionPosition] = useState<{\n left: number;\n top: number;\n } \| null>(null);\n const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n // Only update this “debouncedText” after the user stops typing for 200ms\n const debouncedText = useDebounce(text, 200);\n\n useEffect(() => {\n if (typeof props.value === 'undefined') return;\n setText(defaultValue);\n }, [props.value, props.defaultValue]);\n\n useEffect(() => {\n if (!isActive) return;\n if (!isTyped) return;\n\n const fetchSuggestion = async () => {\n try {\n const cursor =\n textareaRef.current?.selectionStart ?? debouncedText.length;\n const before = debouncedText.slice(0, cursor);\n const after = debouncedText.slice(cursor);\n const numLines = 5;\n const beforeLines = before.split('\\n');\n const contextBeforeLines = beforeLines.slice(\n Math.max(0, beforeLines.length - numLines - 1),\n -1\n );\n const contextBefore = contextBeforeLines.join('\\n');\n const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n const afterLines = after.split('\\n');\n const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n autocomplete(\n {\n text: before,\n contextBefore,\n currentLine,\n contextAfter,\n aiOptions: {\n apiKey: configuration.ai?.apiKey,\n model: configuration.ai?.model,\n temperature: configuration.ai?.temperature,\n },\n },\n {\n onSuccess: (data: AutocompleteResponse) => {\n setSuggestion(data.data?.autocompletion ?? '');\n setCursorAtFetch(cursor);\n },\n }\n );\n } catch (err) {\n console.error('Autocomplete error:', err);\n }\n };\n\n if (debouncedText.length > 3) {\n // Only fetch if user typed more than 3 chars and has paused\n setSuggestion('');\n // TODO: Uncomment this when the autocomplete works well enough\n // fetchSuggestion();\n } else {\n // If typed less than threshold, clear the suggestion\n setSuggestion('');\n }\n }, [debouncedText, isActive, autocomplete, configuration]);\n\n useEffect(() => {\n if (\n !suggestion \|\|\n cursorAtFetch === -1 \|\|\n !placeholderRef.current \|\|\n !ghostLayerRef.current\n ) {\n setSuggestionPosition(null);\n return;\n }\n\n const rect = placeholderRef.current.getBoundingClientRect();\n const parentRect = ghostLayerRef.current.getBoundingClientRect();\n setSuggestionPosition({\n left: rect.left - parentRect.left,\n top: rect.top - parentRect.top,\n });\n }, [suggestion, cursorAtFetch, text]);\n\n const acceptSuggestion = () => {\n const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n if (currentCursor !== cursorAtFetch) return;\n const newText =\n text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n setText(newText);\n setSuggestion('');\n setCursorAtFetch(-1);\n setTimeout(() => {\n textareaRef.current?.focus();\n const newCursorPos = currentCursor + suggestion.length;\n textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n }, 0);\n };\n\n return (\n <div className=\"relative w-full\">\n <div\n ref={ghostLayerRef}\n className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n aria-hidden=\"true\"\n >\n {suggestion && cursorAtFetch !== -1 ? (\n <>\n <span className=\"align-text-top text-transparent\">\n {text.slice(0, cursorAtFetch)}\n </span>\n <span\n ref={placeholderRef}\n style={{ visibility: 'hidden' }}\n aria-hidden=\"true\"\n >\n {suggestion}\n </span>\n <span className=\"align-text-top text-transparent\">\n {text.slice(cursorAtFetch)}\n </span>\n </>\n ) : (\n <span className=\"align-text-top text-transparent\">{text}</span>\n )}\n {suggestionProp && (\n <span className=\"align-text-top text-neutral\">{suggestionProp}</span>\n )}\n </div>\n {suggestion && suggestionPosition && (\n <div\n className=\"pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n style={{\n position: 'absolute',\n left: suggestionPosition.left,\n top: suggestionPosition.top,\n }}\n >\n {suggestion}\n </div>\n )}\n <AutoSizedTextArea\n {...props}\n ref={textareaRef}\n value={text}\n onChange={(e) => {\n setIsTyped(true);\n setText(e.target.value);\n setSuggestion('');\n props.onChange?.(e);\n }}\n onKeyDown={(e) => {\n if (e.key === 'Tab' && suggestion) {\n e.preventDefault();\n acceptSuggestion();\n }\n props.onKeyDown?.(e);\n }}\n onSelect={(e) => {\n if (\n suggestion &&\n (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n ) {\n setSuggestion('');\n setCursorAtFetch(-1);\n }\n props.onSelect?.(e);\n }}\n />\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ChangeEvent,\n type FC,\n type KeyboardEvent,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport type { AutoSizedTextAreaProps } from './AutoSizeTextArea';\nimport {\n ContentEditableTextArea,\n type ContentEditableTextAreaHandle,\n} from './ContentEditableTextArea';\n\n/*\n Props for the AutocompleteTextArea component.\n \n Extends AutoSizedTextAreaProps with inline autocomplete functionality\n * using a contentEditable-based textarea.\n \n @example\n * ```tsx\n * <AutoCompleteTextarea\n * placeholder=\"Start typing...\"\n * isActive={true}\n * autoSize={true}\n * maxRows={10}\n * />\n * ```\n /\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n /* Whether inline autocomplete ghost text is active /\n isActive?: boolean;\n /* Manual suggestion text to display as ghost text after the cursor /\n suggestion?: string;\n};\n\n/\n AutoCompleteTextarea Component\n \n A textarea with inline autocomplete ghost text, built on a contentEditable div\n * instead of a native `<textarea>`. Ghost text (suggestions) is rendered inline\n * at the cursor position and can be accepted with the Tab key.\n \n The component wraps `ContentEditableTextArea` and manages suggestion state.\n * When `suggestion` prop is provided it is shown as ghost text at the end of the\n * current text. When `isActive` is false, ghost text is hidden.\n \n @example\n * ```tsx\n * <AutoCompleteTextarea\n * value={content}\n * onChange={handleChange}\n * suggestion=\"suggested completion...\"\n * isActive={true}\n * autoSize={true}\n * />\n * ```\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n isActive = true,\n suggestion: suggestionProp,\n ...props\n}) => {\n const defaultValue = String(props.value ?? props.defaultValue ?? '');\n const [text, setText] = useState(defaultValue);\n const [suggestion, setSuggestion] = useState('');\n const editorRef = useRef<ContentEditableTextAreaHandle>(null);\n\n useEffect(() => {\n if (typeof props.value === 'undefined') return;\n setText(String(props.value ?? props.defaultValue ?? ''));\n }, [props.value, props.defaultValue]);\n\n const acceptSuggestion = () => {\n const active = suggestionProp ?? suggestion;\n if (!active) return;\n\n const cursor = editorRef.current?.getCursorOffset() ?? text.length;\n const next = text.slice(0, cursor) + active + text.slice(cursor);\n setText(next);\n setSuggestion('');\n\n setTimeout(() => {\n editorRef.current?.focus();\n editorRef.current?.setCursorAtOffset(cursor + active.length);\n }, 0);\n };\n\n const activeGhost = isActive\n ? (suggestionProp ?? (suggestion \|\| undefined))\n : undefined;\n const textLines = text.split('\\n');\n const activeLine = suggestionProp ? textLines.length - 1 : undefined;\n const activeOffset = suggestionProp\n ? (textLines[textLines.length - 1]?.length ?? 0)\n : undefined;\n\n return (\n <ContentEditableTextArea\n ref={editorRef}\n value={text}\n onChange={(val) => {\n setText(val);\n setSuggestion('');\n\n if (props.onChange) {\n const evt = {\n target: { value: val },\n currentTarget: { value: val },\n } as ChangeEvent<HTMLTextAreaElement>;\n props.onChange(evt);\n }\n }}\n onKeyDown={(e) => {\n if (e.key === 'Tab' && (suggestionProp ?? suggestion)) {\n e.preventDefault();\n acceptSuggestion();\n }\n props.onKeyDown?.(e as unknown as KeyboardEvent<HTMLTextAreaElement>);\n }}\n ghostText={activeGhost}\n ghostLine={activeLine}\n ghostOffset={activeOffset}\n placeholder={props.placeholder}\n disabled={props.disabled}\n autoSize={props.autoSize}\n maxRows={props.maxRows}\n minRows={props.rows}\n variant={props.variant}\n validationStyleEnabled={props.validationStyleEnabled}\n className={props.className}\n dir={props.dir as 'ltr' \| 'rtl' \| 'auto'}\n aria-label={props['aria-label']}\n aria-invalid={props['aria-invalid']}\n aria-describedby={props['aria-describedby']}\n data-testid={(props as Record<string, unknown>)['data-testid'] as string}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,wBAAuD,EAClE,WAAW,MACX,YAAY,gBACZ,GAAG,YACC;CAEJ,MAAM,CAAC,MAAM,WAAW,SADH,OAAO,MAAM,SAAS,MAAM,gBAAgB,GAAG,CACtB;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,YAAY,OAAsC,KAAK;AAE7D,iBAAgB;AACd,MAAI,OAAO,MAAM,UAAU,YAAa;AACxC,UAAQ,OAAO,MAAM,SAAS,MAAM,gBAAgB,GAAG,CAAC;IACvD,CAAC,MAAM,OAAO,MAAM,aAAa,CAAC;CAErC,MAAM,yBAAyB;EAC7B,MAAM,SAAS,kBAAkB;AACjC,MAAI,CAAC,OAAQ;EAEb,MAAM,SAAS,UAAU,SAAS,iBAAiB,IAAI,KAAK;AAE5D,UADa,KAAK,MAAM,GAAG,OAAO,GAAG,SAAS,KAAK,MAAM,OAAO,CACnD;AACb,gBAAc,GAAG;AAEjB,mBAAiB;AACf,aAAU,SAAS,OAAO;AAC1B,aAAU,SAAS,kBAAkB,SAAS,OAAO,OAAO;KAC3D,EAAE;;CAGP,MAAM,cAAc,WACf,mBAAmB,cAAc,UAClC;CACJ,MAAM,YAAY,KAAK,MAAM,KAAK;AAMlC,QACE,oBAAC,yBAAD;EACE,KAAK;EACL,OAAO;EACP,WAAW,QAAQ;AACjB,WAAQ,IAAI;AACZ,iBAAc,GAAG;AAEjB,OAAI,MAAM,UAAU;IAClB,MAAM,MAAM;KACV,QAAQ,EAAE,OAAO,KAAK;KACtB,eAAe,EAAE,OAAO,KAAK;KAC9B;AACD,UAAM,SAAS,IAAI;;;EAGvB,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,UAAU,kBAAkB,aAAa;AACrD,MAAE,gBAAgB;AAClB,sBAAkB;;AAEpB,SAAM,YAAY,EAAmD;;EAEvE,WAAW;EACX,WA7Be,iBAAiB,UAAU,SAAS,IAAI;EA8BvD,aA7BiB,iBAChB,UAAU,UAAU,SAAS,IAAI,UAAU,IAC5C;EA4BA,aAAa,MAAM;EACnB,UAAU,MAAM;EAChB,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,SAAS,MAAM;EACf,SAAS,MAAM;EACf,wBAAwB,MAAM;EAC9B,WAAW,MAAM;EACjB,KAAK,MAAM;EACX,cAAY,MAAM;EAClB,gBAAc,MAAM;EACpB,oBAAkB,MAAM;EACxB,eAAc,MAAkC;EAChD"}