Dynamic Prompt Editor

A flexible and customizable prompt editor for React applications with variable suggestions and autocompletion.

🔗 Live Demo

Features

• 🚀 Variable suggestions with customizable triggers
• ⌨️ Keyboard navigation
• 🎨 Custom styling support with styled-components
• 🔧 Custom rendering capabilities
• 📝 Rich text editing powered by Quill
• 📱 Responsive design

Installation

npm install dynamic-prompt-editor

Basic Usage

import { DynamicTextEditor } from "dynamic-prompt-editor";

function App() {
  const [value, setValue] = useState("Hello {{VISITOR.name}}!");

  const suggestions = [
    {
      id: "visitor.name",
      label: "VISITOR.name",
      value: "VISITOR.name",
      category: "Visitor",
      description: "The visitor's full name",
    },
  ];

  return <DynamicTextEditor value={value} onChange={setValue} suggestions={suggestions} />;
}

Props

Prop	Type	Required	Description
value	string	Yes	The editor content
onChange	(value: string) => void	Yes	Change handler
suggestions	BaseEditorItem[]	Yes	Array of suggestion items
placeholder	string	No	Editor placeholder
className	string	No	Additional CSS class
classNames	EditorClassNames	No	Custom class names object
renderItem	(item, isSelected) => ReactNode	No	Custom item renderer
renderCategory	(item) => ReactNode	No	Custom category renderer
renderDescription	(item) => ReactNode	No	Custom description renderer
minSuggestionWidth	number	No	Min width of suggestion box
maxSuggestionWidth	number	No	Max width of suggestion box
maxSuggestionHeight	number	No	Max height of suggestion box
suggestionTrigger	string	No	Custom trigger (default: '{{')
suggestionClosing	string	No	Custom closing (default: '}}')
showCustomToolbar	boolean	No	Show formatting toolbar

Examples

Custom Styling

<DynamicTextEditor
  value={value}
  onChange={setValue}
  suggestions={suggestions}
  classNames={{
    root: "custom-editor",
    editor: "custom-editor__input",
    suggestions: "custom-editor__suggestions",
    suggestion: "custom-editor__suggestion",
    suggestionSelected: "custom-editor__suggestion--selected",
    category: "custom-editor__category",
    description: "custom-editor__description",
  }}
/>

Custom Rendering

const renderCustomItem = (item, isSelected, isHovered) => (
  <div
    style={{
      padding: "8px",
      backgroundColor: isSelected ? "#f0f9ff" : isHovered ? "#f8fafc" : "transparent",
    }}
  >
    <div style={{ fontWeight: "bold" }}>{item.label}</div>
    <div style={{ fontSize: "0.9em", color: "#666" }}>{item.description}</div>
  </div>
);

<DynamicTextEditor value={value} onChange={setValue} suggestions={suggestions} renderItem={renderCustomItem} />;

Custom Triggers

<DynamicTextEditor value={value} onChange={setValue} suggestions={suggestions} suggestionTrigger="${" suggestionClosing="}" />

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT