wip

2026-05-15 11:57:10 -07:00
parent 818ee418d5
commit 2bbb0ba25f
2 changed files with 1001 additions and 0 deletions
@@ -1,3 +1,151 @@
+/*
+ * ribbit-core.css — functional editor styles. Always load this.
+ *
+ * These styles control editor state visibility and the styled-source
+ * rendering. They should not be overridden by themes.
+ *
+ * Two CSS states (not modes):
+ *   .wysiwyg  — contentEditable, delimiters revealed on cursor focus
+ *   .view     — read-only, all delimiters hidden, full block styling
+ *
+ * The DOM is identical in both states; only CSS changes.
+ */
+
+/* ── Visibility ─────────────────────────────────────────────────────────────── */
+
+#ribbit {
+    display: none;
+}
+
+#ribbit.loaded {
+    display: block;
+}
+
+/* ── Delimiter visibility ───────────────────────────────────────────────────── */
+
+/*
+ * Delimiters are always present in the DOM as text nodes inside
+ * .md-delim spans. In view state they are hidden; in wysiwyg state
+ * they are hidden by default and revealed only for the span the
+ * cursor is currently inside (.ribbit-editing).
+ *
+ * This means getMarkdown() = element.textContent at all times —
+ * no conversion is needed.
+ */
+
+.md-delim {
+    display: none;
+}
+
+#ribbit.wysiwyg .ribbit-editing > .md-delim {
+    display: inline;
+    opacity: 0.4;
+    font-weight: normal;
+    font-style: normal;
+    font-family: monospace;
+    font-size: 0.85em;
+}
+
+/* List prefixes use a separate class so CSS can replace them with
+   real list bullets in view state while keeping them in textContent */
+.md-list-prefix {
+    display: inline;
+    opacity: 0.4;
+    font-family: monospace;
+    font-size: 0.85em;
+}
+
+#ribbit.view .md-list-prefix {
+    display: none;
+}
+
+/* ── Inline formatting ──────────────────────────────────────────────────────── */
+
+.md-bold,
+.md-bold-italic {
+    font-weight: bold;
+}
+
+.md-italic,
+.md-bold-italic {
+    font-style: italic;
+}
+
+.md-strikethrough {
+    text-decoration: line-through;
+}
+
+.md-code {
+    font-family: monospace;
+}
+
+.md-link {
+    cursor: pointer;
+}
+
+.md-link-text {
+    text-decoration: underline;
+}
+
+/* ── Block-level styling ────────────────────────────────────────────────────── */
+
+/*
+ * Block divs use .md-{name} classes. In view state they render as
+ * their visual equivalents. In wysiwyg state they use monospace so
+ * the user can see the raw markdown while the formatting is applied.
+ */
+
+#ribbit.wysiwyg {
+    font-family: monospace;
+    white-space: pre-wrap;
+}
+
+.md-h1 { font-size: 2em;   font-weight: bold; }
+.md-h2 { font-size: 1.5em; font-weight: bold; }
+.md-h3 { font-size: 1.17em; font-weight: bold; }
+.md-h4 { font-size: 1em;   font-weight: bold; }
+.md-h5 { font-size: 0.83em; font-weight: bold; }
+.md-h6 { font-size: 0.67em; font-weight: bold; }
+
+.md-blockquote {
+    border-left: 3px solid currentColor;
+    opacity: 0.7;
+    padding-left: 1em;
+}
+
+/*
+ * List items: in wysiwyg state the .md-list-prefix span shows the
+ * raw markdown marker ("- " or "1. "). In view state we hide the
+ * prefix and use display:list-item to get a real browser bullet.
+ */
+#ribbit.view .md-list-item {
+    display: list-item;
+    margin-left: 1.5em;
+    list-style-type: disc;
+}
+
+#ribbit.view .md-ol-list-item {
+    display: list-item;
+    margin-left: 1.5em;
+    list-style-type: decimal;
+}
+
+.md-pre {
+    font-family: monospace;
+    white-space: pre;
+}
+
+/* ── Vim mode indicators ────────────────────────────────────────────────────── */
+
+#ribbit.vim-normal {
+    cursor: default;
+    caret-color: transparent;
+    border-left: 3px solid #4af;
+}
+
+#ribbit.vim-insert {
+    border-left: 3px solid #4f4;
+}
 /*
 * ribbit-core.css — functional editor styles. Always load this.
 * These styles control editor state visibility and behavior.