Add @block macros to Flask example

2026-04-30 07:09:33 +00:00
parent d41716c8b2
commit 5b2bd94388
2 changed files with 136 additions and 1 deletions
@@ -8,6 +8,9 @@
        body { font-family: sans-serif; max-width: 800px; margin: 40px auto; }
        #peers { padding: 8px; background: #f0f0f0; border-radius: 4px; margin-bottom: 10px; font-size: 14px; }
        #peers .peer { display: inline-block; padding: 2px 8px; border-radius: 3px; margin-right: 4px; color: white; }
+        .examples { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
+        .example { border: 1px solid #ddd; border-radius: 4px; padding: 12px; }
+        .example h3 { margin: 0 0 8px 0; font-size: 13px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
        #status { font-size: 12px; color: #666; margin-bottom: 10px; }
        #revisions { margin-top: 20px; }
        #revisions button { margin: 2px; }
@@ -116,6 +119,17 @@
        };

        const editor = new ribbit.Editor({
+            macros: [
+                {
+                    name: 'block',
+                    block: true,
+                    toHTML: ({ keywords, content }) => {
+                        const className = keywords.join(' ');
+                        const classAttr = className ? ' class="' + className + '"' : '';
+                        return '<div' + classAttr + '>' + (content || '') + '</div>';
+                    },
+                },
+            ],
            collaboration: {
                transport,
                presence,