evilchili/ribbit
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
evilchili 2026-05-15 16:52:04 -07:00
parent 80c34a1483
commit 38af541c5d
2 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/static/ribbit-core.css
View File

@ -39,20 +39,24 @@
#ribbit.wysiwyg .ribbit-editing > .md-delim { #ribbit.wysiwyg .ribbit-editing > .md-delim {
display: inline; display: inline;
opacity: 0.4; opacity: 0.8;
/*
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-family: monospace; font-family: monospace;
font-size: 0.85em; font-size: 0.85em;
*/
} }
/* List prefixes use a separate class so CSS can replace them with /* List prefixes use a separate class so CSS can replace them with
real list bullets in view state while keeping them in textContent */ real list bullets in view state while keeping them in textContent */
.md-list-prefix { .md-list-prefix {
display: inline; display: inline;
opacity: 0.4; opacity: 0.8;
/*
font-family: monospace; font-family: monospace;
font-size: 0.85em; font-size: 0.85em;
*/
} }
#ribbit.view .md-list-prefix { #ribbit.view .md-list-prefix {
@ -96,8 +100,7 @@
*/ */
#ribbit.wysiwyg { #ribbit.wysiwyg {
font-family: monospace; /* white-space: pre-wrap; */
white-space: pre-wrap;
} }
.md-h1 { font-size: 2em; font-weight: bold; } .md-h1 { font-size: 2em; font-weight: bold; }

31
test/integration/index.html
View File

@ -6,8 +6,19 @@
<link rel="stylesheet" href="/static/themes/ribbit-default/theme.css"> <link rel="stylesheet" href="/static/themes/ribbit-default/theme.css">
<style> <style>
body { font-family: sans-serif; margin: 20px; } body { font-family: sans-serif; margin: 20px; }
#ribbit { border: 1px solid #ccc; padding: 20px; min-height: 200px; } main { max-width: 960px; margin: auto }
.ribbit-toolbar { background: #f5f5f5; border: 1px solid #ccc; padding: 4px; margin-bottom: 8px; } #ribbit {
border: 1px solid #ccc;
padding: 20px;
min-height: 200px;
margin: auto;
}
.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 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 { 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.active { background: #d0d0ff; }
@ -18,19 +29,19 @@
</style> </style>
</head> </head>
<body> <body>
<main>
<article id="ribbit">**bold** and *italic* and `code` <article id="ribbit">**bold** and *italic* and `code`
## Heading
- list item 1 | Type | To Get |
- list item 2 |------|--------|
| `*emphasis*` | *emphasis* |
| `**bold**` | **bold** |
| `abel](/link/address)` | [link label](/link/address) |
| ``inline`` | `inline` |
> a blockquote
| A | B |
|---|---|
| 1 | 2 |
</article> </article>
</main>
<script src="/static/ribbit.js"></script> <script src="/static/ribbit.js"></script>
<script> <script>