Playground · Bubble

Bubble menu rich text editor demo — floating toolbar on select

A distraction-free writing surface with no top toolbar. Select any text and a floating “bubble” bar appears with the formatting you need; type / for a block menu (headings, lists, and more). Great for Medium- or Notion-style editors where chrome should stay out of the way.

No top toolbar — select text for the floating bar; type / for blocks.

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

bubble.js

// Stylesheet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">
import { Editor, registry, Bold, Italic, Underline, Strike, Heading, List,
  FontFamily, History, BlockToolbar, SlashMenu } from 'https://cdn.jsdelivr.net/npm/@oix1987/yjd/core.js';

registry.register('formats/bold', Bold);
registry.register('formats/italic', Italic);
registry.register('formats/underline', Underline);
registry.register('formats/strike', Strike);
registry.register('formats/heading', Heading);
registry.register('formats/list', List);
registry.register('formats/font-family', FontFamily);
registry.register('modules/history', History);
registry.register('modules/block-toolbar', BlockToolbar);
registry.register('modules/slash-menu', SlashMenu);

new Editor('#editor', {
  width: '100%',
  content: '<h3>✨ Shipping update</h3><p>We just launched <b>dark mode</b> 🌙 — way smoother than the beta. <i>Highlight any text</i> to format it 💬</p><ul><li>⚡ Faster load</li><li>🎨 New themes</li><li>♿ Better contrast</li></ul><p><span style="color: #6d5efc">#release</span> <span style="color: #6d5efc">#darkmode</span> <span style="color: #6d5efc">#buildinpublic</span></p>',
  // No 'toolbar' module → no top toolbar.
  modules: ['history', 'block-toolbar', 'slash-menu'],
  formats: ['bold', 'italic', 'underline', 'strike', 'heading', 'list', 'font-family'],
  // Which tools appear in the floating bubble bar:
  'block-toolbar': { buttons: ['bold', 'italic', 'underline', 'link', 'code'] },
  features: { wordCount: false, breadcrumb: false }
});

Live preview~23 KB JS