2026-04-29 11:04:20 -07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Ribbit Integration Test Page</title>
|
2026-05-15 15:18:31 -07:00
|
|
|
<link rel="stylesheet" href="/static/themes/ribbit-default/theme.css">
|
2026-04-29 11:04:20 -07:00
|
|
|
<style>
|
|
|
|
|
body { font-family: sans-serif; margin: 20px; }
|
|
|
|
|
#ribbit { border: 1px solid #ccc; padding: 20px; min-height: 200px; }
|
|
|
|
|
.ribbit-toolbar { background: #f5f5f5; border: 1px solid #ccc; padding: 4px; margin-bottom: 8px; }
|
|
|
|
|
.ribbit-toolbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
|
|
|
|
|
.ribbit-toolbar button { padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; background: white; cursor: pointer; font-size: 12px; }
|
|
|
|
|
.ribbit-toolbar button.active { background: #d0d0ff; }
|
|
|
|
|
.ribbit-toolbar button.disabled { opacity: 0.3; }
|
|
|
|
|
.ribbit-toolbar .spacer { width: 12px; }
|
|
|
|
|
.ribbit-dropdown { position: absolute; background: white; border: 1px solid #ccc; padding: 4px; }
|
|
|
|
|
.ribbit-dropdown button { display: block; width: 100%; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<article id="ribbit">**bold** and *italic* and `code`
|
|
|
|
|
|
|
|
|
|
## Heading
|
|
|
|
|
|
|
|
|
|
- list item 1
|
|
|
|
|
- list item 2
|
|
|
|
|
|
|
|
|
|
> a blockquote
|
|
|
|
|
|
|
|
|
|
| A | B |
|
|
|
|
|
|---|---|
|
|
|
|
|
| 1 | 2 |
|
|
|
|
|
</article>
|
|
|
|
|
|
2026-05-15 15:18:31 -07:00
|
|
|
<script src="/static/ribbit.js"></script>
|
2026-04-29 11:04:20 -07:00
|
|
|
<script>
|
|
|
|
|
const editor = new ribbit.Editor({
|
|
|
|
|
on: {
|
|
|
|
|
ready: () => { window.__ribbitReady = true; },
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
editor.run();
|
|
|
|
|
window.__ribbitEditor = editor;
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
