Add @block macros to Flask example

examples/flask-collab/server.py

@@ -23,7 +23,128 @@ app = Flask(__name__)
 sock = Sock(app)
 
 # In-memory state (replace with a database in production)
-document = {"content": "# Hello\n\nEdit this page collaboratively.\n\n- Try opening multiple tabs\n- Watch edits appear in real time\n"}
+document = {"content": """# Ribbit Demo Document
+
+## Inline Formatting
+
+@block(examples
+
+@block(example
+### Type this
+`**bold**`
+### To get this
+**bold**
+)
+
+@block(example
+### Type this
+`*italic*`
+### To get this
+*italic*
+)
+
+@block(example
+### Type this
+`***bold italic***`
+### To get this
+***bold italic***
+)
+
+@block(example
+### Type this
+`~~strikethrough~~`
+### To get this
+~~strikethrough~~
+)
+
+@block(example
+### Type this
+`` `inline code` ``
+### To get this
+`inline code`
+)
+
+@block(example
+### Type this
+`[link](http://example.com)`
+### To get this
+[link](http://example.com)
+)
+
+)
+
+## Block Elements
+
+@block(examples
+
+@block(example
+### Type this
+```
+- apples
+- bananas
+- cherries
+```
+### To get this
+- apples
+- bananas
+- cherries
+)
+
+@block(example
+### Type this
+```
+1. Step one
+2. Step two
+3. Step three
+```
+### To get this
+1. Step one
+2. Step two
+3. Step three
+)
+
+@block(example
+### Type this
+```
+> First line
+> Second line
+> Third line
+```
+### To get this
+> First line
+> Second line
+> Third line
+)
+
+@block(example
+### Type this
+````
+```python
+def hello():
+    print("Hello!")
+```
+````
+### To get this
+```python
+def hello():
+    print("Hello!")
+```
+)
+
+)
+
+## Full Example
+
+Here is a paragraph with **bold**, *italic*, and `code` inline.
+A [link](http://example.com) and ~~deleted text~~ too.
+
+> A blockquote with **formatting** inside.
+
+- List with *italic*
+- And `code`
+
+***
+"""}
 revisions = []
 lock_holder = None
 lock_mutex = Lock()

examples/flask-collab/templates/index.html

@@ -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,