domma-cms 0.9.0 → 0.9.5

package/admin/js/templates/block-editor.html

@@ -1,163 +1,163 @@
-<div class="view-header">
-    <h1><span data-icon="box"></span> <span id="block-editor-title">New Block</span></h1>
-    <div style="display:flex;gap:.5rem;">
-        <a href="#/blocks" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Blocks
-        </a>
-        <button id="save-block-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save Block
-        </button>
-    </div>
-</div>
-
-<!-- Block Name -->
-<div class="card card-collapsible mb-3">
-    <div class="card-header">
-        <h2>Block Name</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
-    </div>
-    <div class="card-body" style="max-width:420px;">
-        <label class="form-label">Name <span style="color:var(--dm-danger,#f87171);">*</span></label>
-        <input id="block-name" type="text" class="form-input" placeholder="e.g. feedback-card">
-        <small class="text-muted">Lowercase letters, digits, and hyphens only. Cannot be changed after creation.</small>
-        <div class="mt-3">
-            <label class="form-check-label" title="Included in fresh installs via the seed script">
-                <input id="block-bundled" type="checkbox" class="form-check"> Bundled
-            </label>
-        </div>
-    </div>
-</div>
-
-<!-- HTML Editor + Preview -->
-<div class="card card-collapsible editor-card mb-3">
-    <div class="card-header">
-        <h2>Template HTML</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
-    </div>
-    <div class="card-body p-0">
-
-        <!-- Toolbar -->
-        <div id="block-editor-toolbar" class="editor-toolbar">
-            <button type="button" class="btn btn-ghost btn-sm" data-action="undo" title="Undo (Ctrl+Z)">
-                <span data-icon="corner-up-left"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="redo" title="Redo (Ctrl+Y)">
-                <span data-icon="corner-up-right"></span>
-            </button>
-            <span class="editor-toolbar-sep"></span>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="cut" title="Cut (Ctrl+X)">
-                <span data-icon="scissors"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="copy" title="Copy (Ctrl+C)">
-                <span data-icon="copy"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="paste" title="Paste (Ctrl+V)">
-                <span data-icon="clipboard"></span>
-            </button>
-            <span class="editor-toolbar-sep"></span>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="select-all" title="Select All (Ctrl+A)">
-                <span data-icon="maximize-2"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="format" title="Format HTML">
-                <span data-icon="code"></span> Format
-            </button>
-
-            <!-- View mode toggles (right side) -->
-            <div class="editor-toolbar-right">
-                <span id="block-cursor-pos"
-                      style="font-size:.75rem;color:var(--dm-text-muted,#888);margin-right:.5rem;">Ln 1, Col 1</span>
-                <span class="editor-toolbar-sep"></span>
-                <button type="button" class="editor-view-btn active" data-mode="write" title="Edit only">
-                    <span data-icon="edit-2"></span>
-                </button>
-                <button type="button" class="editor-view-btn" data-mode="split" title="Split view">
-                    <span data-icon="columns"></span>
-                </button>
-                <button type="button" class="editor-view-btn" data-mode="preview" title="Preview only">
-                    <span data-icon="eye"></span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Editor body — split pane -->
-        <div id="block-editor-body" class="editor-body editor-mode-write" style="min-height:460px;">
-
-            <!-- Write pane -->
-            <div class="editor-pane editor-pane--write" style="flex-direction:row;overflow:hidden;">
-                <div id="block-line-numbers" class="editor-line-numbers">1</div>
-                <textarea id="block-content" class="editor-textarea"
-                          spellcheck="false"
-                          placeholder="<div class=&quot;card mb-3&quot;>&#10;  <div class=&quot;card-body&quot;>&#10;    <h3>{{title}}</h3>&#10;    <p>{{message}}</p>&#10;  </div>&#10;</div>"></textarea>
-            </div>
-
-            <div class="editor-divider"></div>
-
-            <!-- Preview pane -->
-            <div class="editor-pane editor-pane--preview" style="flex-direction:column;overflow:hidden;">
-                <!-- Sample data inputs — auto-populated by JS -->
-                <div id="block-sample-data" style="
-                    border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
-                    padding:.6rem .75rem;
-                    background:var(--dm-surface-subtle,rgba(0,0,0,.1));
-                    flex-shrink:0;">
-                    <p class="text-muted" style="font-size:.8rem;margin:0;">
-                        Write some template HTML to populate sample data fields.
-                    </p>
-                </div>
-                <!-- Rendered output -->
-                <div id="block-preview-output" style="flex:1;overflow-y:auto;padding:1rem;"></div>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<!-- Placeholder Reference -->
-<div class="card card-collapsible mb-3 card-collapsed">
-    <div class="card-header">
-        <h2>Placeholder Reference</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
-    </div>
-    <div class="card-body" style="font-size:.85rem;line-height:1.8;">
-        <p>Use <code class="dm-code-inline">{{fieldName}}</code> to insert entry field values. Values are HTML-escaped
-            automatically to prevent XSS.</p>
-        <table class="table" style="max-width:520px;margin:.75rem 0;">
-            <thead>
-            <tr>
-                <th style="width:180px;">Placeholder</th>
-                <th>Value</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td><code class="dm-code-inline">{{fieldName}}</code></td>
-                <td>Any entry field — e.g. <code class="dm-code-inline">{{title}}</code>, <code class="dm-code-inline">{{rating}}</code>,
-                    <code class="dm-code-inline">{{message}}</code></td>
-            </tr>
-            <tr>
-                <td><code class="dm-code-inline">{{_id}}</code></td>
-                <td>Entry UUID</td>
-            </tr>
-            <tr>
-                <td><code class="dm-code-inline">{{_createdAt}}</code></td>
-                <td>Creation timestamp (ISO 8601)</td>
-            </tr>
-            <tr>
-                <td><code class="dm-code-inline">{{_updatedAt}}</code></td>
-                <td>Last-updated timestamp (ISO 8601)</td>
-            </tr>
-            </tbody>
-        </table>
-        <p><strong>Use in a shortcode:</strong></p>
-        <pre class="dm-code-block">[collection slug="feedback" display="block" block="feedback-card" /]
-[view slug="my-view" display="block" block="feedback-card" /]</pre>
-        <p style="margin-top:.75rem;"><strong>Example block template:</strong></p>
-        <pre class="dm-code-block">&lt;div class="card mb-3"&gt;
-  &lt;div class="card-body"&gt;
-    &lt;h3&gt;{{name}}&lt;/h3&gt;
-    &lt;p&gt;{{message}}&lt;/p&gt;
-    &lt;small&gt;Rating: {{rating}} &amp;mdash; {{_createdAt}}&lt;/small&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-    </div>
-</div>
+<div class="view-header">
+    <h1><span data-icon="box"></span> <span id="block-editor-title">New Block</span></h1>
+    <div style="display:flex;gap:.5rem;">
+        <a href="#/blocks" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Blocks
+        </a>
+        <button id="save-block-btn" class="btn btn-primary">
+            <span data-icon="save"></span> Save Block
+        </button>
+    </div>
+</div>
+
+<!-- Block Name -->
+<div class="card card-collapsible mb-3">
+    <div class="card-header">
+        <h2>Block Name</h2>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    </div>
+    <div class="card-body" style="max-width:420px;">
+        <label class="form-label">Name <span style="color:var(--dm-danger,#f87171);">*</span></label>
+        <input id="block-name" type="text" class="form-input" placeholder="e.g. feedback-card">
+        <small class="text-muted">Lowercase letters, digits, and hyphens only. Cannot be changed after creation.</small>
+        <div class="mt-3">
+            <label class="form-check-label" title="Included in fresh installs via the seed script">
+                <input id="block-bundled" type="checkbox" class="form-check"> Bundled
+            </label>
+        </div>
+    </div>
+</div>
+
+<!-- HTML Editor + Preview -->
+<div class="card card-collapsible editor-card mb-3">
+    <div class="card-header">
+        <h2>Template HTML</h2>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    </div>
+    <div class="card-body p-0">
+
+        <!-- Toolbar -->
+        <div id="block-editor-toolbar" class="editor-toolbar">
+            <button type="button" class="btn btn-ghost btn-sm" data-action="undo" title="Undo (Ctrl+Z)">
+                <span data-icon="corner-up-left"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="redo" title="Redo (Ctrl+Y)">
+                <span data-icon="corner-up-right"></span>
+            </button>
+            <span class="editor-toolbar-sep"></span>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="cut" title="Cut (Ctrl+X)">
+                <span data-icon="scissors"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="copy" title="Copy (Ctrl+C)">
+                <span data-icon="copy"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="paste" title="Paste (Ctrl+V)">
+                <span data-icon="clipboard"></span>
+            </button>
+            <span class="editor-toolbar-sep"></span>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="select-all" title="Select All (Ctrl+A)">
+                <span data-icon="maximize-2"></span>
+            </button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="format" title="Format HTML">
+                <span data-icon="code"></span> Format
+            </button>
+
+            <!-- View mode toggles (right side) -->
+            <div class="editor-toolbar-right">
+                <span id="block-cursor-pos"
+                      style="font-size:.75rem;color:var(--dm-text-muted,#888);margin-right:.5rem;">Ln 1, Col 1</span>
+                <span class="editor-toolbar-sep"></span>
+                <button type="button" class="editor-view-btn active" data-mode="write" title="Edit only">
+                    <span data-icon="edit-2"></span>
+                </button>
+                <button type="button" class="editor-view-btn" data-mode="split" title="Split view">
+                    <span data-icon="columns"></span>
+                </button>
+                <button type="button" class="editor-view-btn" data-mode="preview" title="Preview only">
+                    <span data-icon="eye"></span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Editor body — split pane -->
+        <div id="block-editor-body" class="editor-body editor-mode-write" style="min-height:460px;">
+
+            <!-- Write pane -->
+            <div class="editor-pane editor-pane--write" style="flex-direction:row;overflow:hidden;">
+                <div id="block-line-numbers" class="editor-line-numbers">1</div>
+                <textarea id="block-content" class="editor-textarea"
+                          spellcheck="false"
+                          placeholder="<div class=&quot;card mb-3&quot;>&#10;  <div class=&quot;card-body&quot;>&#10;    <h3>{{title}}</h3>&#10;    <p>{{message}}</p>&#10;  </div>&#10;</div>"></textarea>
+            </div>
+
+            <div class="editor-divider"></div>
+
+            <!-- Preview pane -->
+            <div class="editor-pane editor-pane--preview" style="flex-direction:column;overflow:hidden;">
+                <!-- Sample data inputs — auto-populated by JS -->
+                <div id="block-sample-data" style="
+                    border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
+                    padding:.6rem .75rem;
+                    background:var(--dm-surface-subtle,rgba(0,0,0,.1));
+                    flex-shrink:0;">
+                    <p class="text-muted" style="font-size:.8rem;margin:0;">
+                        Write some template HTML to populate sample data fields.
+                    </p>
+                </div>
+                <!-- Rendered output -->
+                <div id="block-preview-output" style="flex:1;overflow-y:auto;padding:1rem;"></div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<!-- Placeholder Reference -->
+<div class="card card-collapsible mb-3 card-collapsed">
+    <div class="card-header">
+        <h2>Placeholder Reference</h2>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    </div>
+    <div class="card-body" style="font-size:.85rem;line-height:1.8;">
+        <p>Use <code class="dm-code-inline">{{fieldName}}</code> to insert entry field values. Values are HTML-escaped
+            automatically to prevent XSS.</p>
+        <table class="table" style="max-width:520px;margin:.75rem 0;">
+            <thead>
+            <tr>
+                <th style="width:180px;">Placeholder</th>
+                <th>Value</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><code class="dm-code-inline">{{fieldName}}</code></td>
+                <td>Any entry field — e.g. <code class="dm-code-inline">{{title}}</code>, <code class="dm-code-inline">{{rating}}</code>,
+                    <code class="dm-code-inline">{{message}}</code></td>
+            </tr>
+            <tr>
+                <td><code class="dm-code-inline">{{_id}}</code></td>
+                <td>Entry UUID</td>
+            </tr>
+            <tr>
+                <td><code class="dm-code-inline">{{_createdAt}}</code></td>
+                <td>Creation timestamp (ISO 8601)</td>
+            </tr>
+            <tr>
+                <td><code class="dm-code-inline">{{_updatedAt}}</code></td>
+                <td>Last-updated timestamp (ISO 8601)</td>
+            </tr>
+            </tbody>
+        </table>
+        <p><strong>Use in a shortcode:</strong></p>
+        <pre class="dm-code-block">[collection slug="feedback" display="block" block="feedback-card" /]
+[view slug="my-view" display="block" block="feedback-card" /]</pre>
+        <p style="margin-top:.75rem;"><strong>Example block template:</strong></p>
+        <pre class="dm-code-block">&lt;div class="card mb-3"&gt;
+  &lt;div class="card-body"&gt;
+    &lt;h3&gt;{{name}}&lt;/h3&gt;
+    &lt;p&gt;{{message}}&lt;/p&gt;
+    &lt;small&gt;Rating: {{rating}} &amp;mdash; {{_createdAt}}&lt;/small&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+    </div>
+</div>