wip toolbar

src/static/ribbit-core.css

@@ -34,7 +34,7 @@
  */
 
 .md-delim {
-    display:inline;
+    display:none;
     opacity: 0.3;
     font-size: 0.85em;
     font-weight: normal;
@@ -46,20 +46,9 @@
     background: #EEE;
 }
 
-.ribbit-editing .md-delim {
-    opacity: 0.8;
-}
-
-#ribbit.wysiwyg [class^="md-h"] > .md-delim,
-#ribbit.wysiwyg .md-blockquote > .md-delim,
-#ribbit.wysiwyg .md-list-prefix {
+.ribbit-editing > .md-delim {
     display: inline;
-    /*
-    font-weight: normal;
-    font-style: normal;
-    font-family: monospace;
-    font-size: 0.85em;
-    */
+    opacity: 0.8;
 }
 
 /* List prefixes use a separate class so CSS can replace them with

src/static/themes/ribbit-default/icons

@@ -0,0 +1 @@
+../../../../node_modules/bootstrap-icons/icons

src/static/themes/ribbit-default/theme.css

@@ -6,6 +6,11 @@
 
 @import "../../ribbit-core.css";
 
+body { font-family: sans-serif; margin: 20px; }
+main { max-width: 960px; margin: auto }
+
+#ribbit { border: 1px solid #ccc; border-radius: 4px; padding: 20px; min-height: 200px; }
+
 a {
     text-decoration: none;
 }
@@ -50,3 +55,80 @@ code {
     background: #EEE;
     margin: 3px;
 }
+
+.ribbit-toolbar {
+    background: #f5f5f5;
+    border: 1px solid #ccc; border-radius: 4px; padding: 4px; margin-bottom: 8px; 
+}
+.ribbit-toolbar ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    align-items: center;
+}
+
+.ribbit-toolbar button {
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 12px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1rem 1rem;
+    width: 2rem;
+    height: 2rem;
+}
+.ribbit-toolbar button:hover {
+    background-color: #DDD;
+    background-blend-mode: darken;
+}
+.ribbit-toolbar button.disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+
+
+.ribbit-btn-fencedCode { background-image: url("icons/code-square.svg"); }
+.ribbit-btn-blockquote { background-image: url("icons/blockquote-left.svg"); }
+.ribbit-btn-hr { background-image: url("icons/hr.svg"); }
+.ribbit-btn-table { background-image: url("icons/table.svg"); }
+.ribbit-btn-code { background-image: url("icons/code.svg"); }
+.ribbit-btn-link { background-image: url("icons/link.svg"); }
+.ribbit-btn-boldItalic { background-image: url("icons/type-bold.svg"); }
+.ribbit-btn-bold { background-image: url("icons/type-bold.svg"); }
+.ribbit-btn-italic { background-image: url("icons/type-italic.svg"); }
+.ribbit-btn-strikethrough { background-image: url("icons/type-strikethrough.svg"); }
+.ribbit-btn-h1 { background-image: url("icons/type-h1.svg"); }
+.ribbit-btn-h2 { background-image: url("icons/type-h2.svg"); }
+.ribbit-btn-h3 { background-image: url("icons/type-h3.svg"); }
+.ribbit-btn-h4 { background-image: url("icons/type-h4.svg"); }
+.ribbit-btn-h5 { background-image: url("icons/type-h5.svg"); }
+.ribbit-btn-h6 { background-image: url("icons/type-h6.svg"); }
+.ribbit-btn-ul { background-image: url("icons/list-ul.svg"); }
+.ribbit-btn-ol { background-image: url("icons/list-ol.svg"); }
+.ribbit-btn-edit { background-image: url("icons/pen.svg"); }
+.ribbit-btn-save { background-image: url("icons/floppy.svg"); }
+.ribbit-btn-toggle { background-image: url("icons/toggle-off.svg"); }
+
+
+.ribbit-toolbar .spacer {
+    width: 12px;
+}
+.ribbit-dropdown {
+    position: absolute;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 4px;
+    z-index: 10;
+}
+.ribbit-dropdown button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    margin: 1px 0;
+}
+
+