@particle-academy/fancy-code 0.4.5 → 0.4.7

package/dist/index.d.cts

@@ -1,5 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
+import { InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeColors {
     background: string;
@@ -114,6 +115,13 @@ interface CodeEditorContextValue {
     };
     /** Length of the current selection (0 if none) */
     selectionLength: number;
+    /**
+     * Ref to the underlying `<textarea>` element. Exposed so external
+     * widgets — e.g. `<InputTag>`'s `textareaAdapter` — can attach to
+     * the same input the editor renders into. Will be `null` before
+     * the editor has mounted.
+     */
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
     /** Placeholder text */
     placeholder?: string;
     /** @internal */
@@ -135,27 +143,27 @@ interface CodeEditorStatusBarProps {
     className?: string;
 }
 
-declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react.JSX.Element | null;
 declare namespace CodeEditorPanel {
     var displayName: string;
 }
 
-declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react.JSX.Element;
 declare namespace CodeEditorToolbar {
     var displayName: string;
 }
 
-declare function CodeEditorToolbarSeparator(): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbarSeparator(): react.JSX.Element;
 declare namespace CodeEditorToolbarSeparator {
     var displayName: string;
 }
 
-declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react.JSX.Element;
 declare namespace CodeEditorStatusBar {
     var displayName: string;
 }
 
-declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -194,4 +202,45 @@ declare function registerTheme(theme: ThemeDefinition): void;
 declare function getTheme(name: string): ThemeDefinition | undefined;
 declare function getRegisteredThemes(): string[];
 
-export { CodeEditor, type CodeEditorContextValue, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+/**
+ * Glue between `@particle-academy/react-fancy`'s `<InputTag>` and the
+ * `<CodeEditor>` from this package. `<CodeEditor>` renders a real DOM
+ * `<textarea>` under its overlay, so the existing `textareaAdapter`
+ * just works — this module hands it the right ref via the editor
+ * context.
+ *
+ *   <CodeEditor value={code} onChange={setCode} language="markdown">
+ *     <CodeEditor.Toolbar />
+ *     <CodeEditor.Panel />
+ *     <CodeEditorInputTag
+ *       triggers={{
+ *         "/": { items: commands, insert: (c) => `${c.name} ` },
+ *         "@": { items: mentions, insert: (m) => `@${m.name} ` },
+ *       }}
+ *     />
+ *   </CodeEditor>
+ *
+ * Must be rendered as a descendant of `<CodeEditor>` (it reads the
+ * editor's context). For ad-hoc wiring outside the component tree,
+ * pull the textarea ref off the context and call `textareaAdapter`
+ * yourself.
+ */
+/**
+ * Hook form — returns an `InputTagAdapter` bound to the surrounding
+ * `<CodeEditor>`. Useful when you want to compose your own picker UI
+ * around the same adapter.
+ */
+declare function useCodeEditorInputTagAdapter(): InputTagAdapter;
+interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
+    triggers: InputTagTriggers;
+}
+/**
+ * Convenience wrapper — renders `<InputTag>` already wired to the
+ * surrounding `<CodeEditor>`'s textarea. Equivalent to:
+ *
+ *   const adapter = useCodeEditorInputTagAdapter();
+ *   return <InputTag adapter={adapter} {...rest} />;
+ */
+declare function CodeEditorInputTag(props: CodeEditorInputTagProps): react.JSX.Element;
+
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
+import { InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeColors {
     background: string;
@@ -114,6 +115,13 @@ interface CodeEditorContextValue {
     };
     /** Length of the current selection (0 if none) */
     selectionLength: number;
+    /**
+     * Ref to the underlying `<textarea>` element. Exposed so external
+     * widgets — e.g. `<InputTag>`'s `textareaAdapter` — can attach to
+     * the same input the editor renders into. Will be `null` before
+     * the editor has mounted.
+     */
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
     /** Placeholder text */
     placeholder?: string;
     /** @internal */
@@ -135,27 +143,27 @@ interface CodeEditorStatusBarProps {
     className?: string;
 }
 
-declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react.JSX.Element | null;
 declare namespace CodeEditorPanel {
     var displayName: string;
 }
 
-declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react.JSX.Element;
 declare namespace CodeEditorToolbar {
     var displayName: string;
 }
 
-declare function CodeEditorToolbarSeparator(): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbarSeparator(): react.JSX.Element;
 declare namespace CodeEditorToolbarSeparator {
     var displayName: string;
 }
 
-declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react.JSX.Element;
 declare namespace CodeEditorStatusBar {
     var displayName: string;
 }
 
-declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -194,4 +202,45 @@ declare function registerTheme(theme: ThemeDefinition): void;
 declare function getTheme(name: string): ThemeDefinition | undefined;
 declare function getRegisteredThemes(): string[];
 
-export { CodeEditor, type CodeEditorContextValue, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+/**
+ * Glue between `@particle-academy/react-fancy`'s `<InputTag>` and the
+ * `<CodeEditor>` from this package. `<CodeEditor>` renders a real DOM
+ * `<textarea>` under its overlay, so the existing `textareaAdapter`
+ * just works — this module hands it the right ref via the editor
+ * context.
+ *
+ *   <CodeEditor value={code} onChange={setCode} language="markdown">
+ *     <CodeEditor.Toolbar />
+ *     <CodeEditor.Panel />
+ *     <CodeEditorInputTag
+ *       triggers={{
+ *         "/": { items: commands, insert: (c) => `${c.name} ` },
+ *         "@": { items: mentions, insert: (m) => `@${m.name} ` },
+ *       }}
+ *     />
+ *   </CodeEditor>
+ *
+ * Must be rendered as a descendant of `<CodeEditor>` (it reads the
+ * editor's context). For ad-hoc wiring outside the component tree,
+ * pull the textarea ref off the context and call `textareaAdapter`
+ * yourself.
+ */
+/**
+ * Hook form — returns an `InputTagAdapter` bound to the surrounding
+ * `<CodeEditor>`. Useful when you want to compose your own picker UI
+ * around the same adapter.
+ */
+declare function useCodeEditorInputTagAdapter(): InputTagAdapter;
+interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
+    triggers: InputTagTriggers;
+}
+/**
+ * Convenience wrapper — renders `<InputTag>` already wired to the
+ * surrounding `<CodeEditor>`'s textarea. Equivalent to:
+ *
+ *   const adapter = useCodeEditorInputTagAdapter();
+ *   return <InputTag adapter={adapter} {...rest} />;
+ */
+declare function CodeEditorInputTag(props: CodeEditorInputTagProps): react.JSX.Element;
+
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useState, useCallback, useRef, useMemo, useSyncExternalStore, useEffect, useContext } from 'react';
-import { cn, useControllableState } from '@particle-academy/react-fancy';
+import { cn, useControllableState, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/CodeEditor/CodeEditor.tsx
@@ -1576,6 +1576,7 @@ function CodeEditorRoot({
       },
       cursorPosition,
       selectionLength,
+      textareaRef: engineReturn.textareaRef,
       placeholder,
       _engineReturn: engineReturn,
       _minHeight: minHeight,
@@ -1604,7 +1605,15 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
   Panel: CodeEditorPanel,
   StatusBar: CodeEditorStatusBar
 });
+function useCodeEditorInputTagAdapter() {
+  const ctx = useCodeEditor();
+  return useMemo(() => textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);
+}
+function CodeEditorInputTag(props) {
+  const adapter = useCodeEditorInputTagAdapter();
+  return /* @__PURE__ */ jsx(InputTag, { adapter, ...props });
+}
 
-export { CodeEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+export { CodeEditor, CodeEditorInputTag, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor, useCodeEditorInputTagAdapter };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map