Playground · Prompt

AI chat input demo — a prompt-style rich text composer

A chat-style composer in the shape of a rounded pill — the same layout as modern AI prompt inputs. The “+” adds an image (a popover of image/file/video on desktop), attachments ride along as removable thumbnails, and Enter sends while the on-screen keyboard’s return key inserts a newline on mobile. Built for AI prompts, messaging and comment composers.

Mobile-first chat pill — "+" adds an image, basic tools, a send button. Enter sends.

💡 The code shown imports from the CDN for copy-paste; here it runs against a pre-loaded core. Edit anything and hit Run.

prompt.js

// Stylesheet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">
import { Editor, registry, applyEditorInput, Bold, Italic, Image,
  Toolbar, History } from 'https://cdn.jsdelivr.net/npm/@oix1987/yjd/core.js';

registry.register('formats/bold', Bold);
registry.register('formats/italic', Italic);
registry.register('formats/image', Image);
registry.register('modules/toolbar', Toolbar);
registry.register('modules/history', History);

// Enables file-upload insertion (image/file) on a /core build.
applyEditorInput(Editor);

new Editor('#editor', {
  width: '100%',
  layout: 'prompt',                        // chat pill + bottom action bar
  placeholder: 'Message yjd…',
  content: '<p>Viết lại đoạn này ngắn gọn hơn 👋</p>',
  prompt: {
    add: ['image', 'file', 'video'],       // mobile: "+" adds image · desktop: menu
    tools: ['bold', 'italic'],             // basic tools, no popovers
  },
  // Attachments show as removable thumbnails and travel with the message.
  submit: { onSubmit: (html, ed) => console.log('send:', html, ed.getAttachments()) },
});

Live previewchat input