domma-cms 1.6.60 → 1.7.0

package/docs/superpowers/specs/plans/2026-03-19-accordion-insert.md

@@ -0,0 +1,635 @@
+# Accordion Insert Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add an "Accordion" entry to the Page Editor Insert dropdown that generates static accordion markup or a collection-bound accordion shortcode.
+
+**Architecture:** Three self-contained layers - server-side collection renderer (markdown.js), toolbar registration (markdown-toolbar.js), and the insert dialog (page-editor.js). Each layer is independently deliverable. The server side adds `display="accordion"` to the existing `[collection]` shortcode; the toolbar and dialog follow patterns already established by Tabs and Collection inserts.
+
+**Tech Stack:** Fastify 5 (ESM), Domma SPA (admin), `marked` for Markdown-to-HTML, `api.collections.get()` for schema fetching.
+
+---
+
+## File Map
+
+| Action | File | Responsibility |
+|--------|------|----------------|
+| Modify | `server/services/markdown.js` | Add `renderCollectionAccordion` helper + `display="accordion"` branch in `processCollectionBlocks` |
+| Modify | `admin/js/lib/markdown-toolbar.js` | Register `accordion-insert` icon, add `accordion` to handlers + `executeAction` + Insert dropdown + `onAccordion` export |
+| Modify | `admin/js/views/page-editor.js` | Implement `toolbar.onAccordion(...)` modal dialog |
+
+---
+
+## Task 1: Server - `renderCollectionAccordion` helper
+
+**Files:**
+- Modify: `server/services/markdown.js` (after `renderCollectionList`, before `processViewBlocks`)
+
+- [ ] **Step 1: Add `renderCollectionAccordion` after `renderCollectionList`**
+
+Find the closing brace of `renderCollectionList` (the function that returns `'dm-collection-display dm-collection-list'` HTML). Immediately after it, add:
+
+```js
+/**
+ * Render a collection as a Domma accordion.
+ * @param {object[]} entries
+ * @param {string} titleField  - entry data field to use as header text
+ * @param {string} bodyField   - entry data field to use as body content (Markdown)
+ * @param {boolean} multiple   - allow multiple panels open simultaneously
+ * @param {string} emptyMsg
+ * @returns {string}
+ */
+function renderCollectionAccordion(entries, titleField, bodyField, multiple, emptyMsg) {
+    if (!entries.length) {
+        return `<div class="dm-collection-display dm-collection-empty"><p>${escapeHtmlText(emptyMsg)}</p></div>`;
+    }
+
+    const multiAttr = multiple ? ' data-multi="true"' : '';
+    const items = entries.map(e => {
+        const title = escapeHtmlText(String(e.data?.[titleField] ?? e.id ?? '(untitled)'));
+        const bodyVal = String(e.data?.[bodyField] ?? '');
+        const bodyHtml = marked.parse(bodyVal);
+        return (
+            `<div class="accordion-item">\n` +
+            `  <h3 class="accordion-header"><button class="accordion-button" type="button">${title}` +
+            `<span class="accordion-icon" data-icon="chevron-down"></span></button></h3>\n` +
+            `  <div class="accordion-body"><div class="accordion-content">${bodyHtml}</div></div>\n` +
+            `</div>`
+        );
+    }).join('\n');
+
+    return `<div class="dm-collection-display accordion"${multiAttr}>\n${items}\n</div>`;
+}
+```
+
+- [ ] **Step 2: Add `display === 'accordion'` branch in `processCollectionBlocks`**
+
+In `processCollectionBlocks`, find the block:
+```js
+if (display === 'cards') {
+    replacement = renderCollectionCards(...);
+} else if (display === 'list') {
+    replacement = renderCollectionList(...);
+} else if (display === 'block') {
+```
+
+Add a new branch **before** the `else if (display === 'block')` line:
+
+```js
+} else if (display === 'accordion') {
+    const titleField = attrs['title-field'] || 'title';
+    const bodyField  = attrs['body-field']  || 'description';
+    const multiple   = attrs.multiple === 'true';
+    replacement = renderCollectionAccordion(entries, titleField, bodyField, multiple, emptyMsg);
+```
+
+- [ ] **Step 3: Verify with curl**
+
+```bash
+# Requires a collection with slug "faq" to exist locally.
+# Add [collection slug="faq" display="accordion" title-field="title" body-field="description" /]
+# to content/pages/index.md temporarily, then:
+curl -s http://localhost:4096/ | grep -A5 'class="accordion"'
+# Expected: <div class="dm-collection-display accordion">
+# Remove the test shortcode afterwards.
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add server/services/markdown.js
+git commit -m "feat: add display=\"accordion\" mode to [collection] shortcode"
+```
+
+---
+
+## Task 2: Toolbar - icon, action, handler registration
+
+**Files:**
+- Modify: `admin/js/lib/markdown-toolbar.js`
+
+- [ ] **Step 1: Register `accordion-insert` icon**
+
+At the end of `registerIcons()`, before its closing brace, add:
+
+```js
+  I.register('accordion-insert', {
+    viewBox: '0 0 24 24',
+    paths: [
+      'M3 4h18',
+      'M3 8h18',
+      'M8 11l4 4 4-4',
+      'M3 16h18',
+      'M3 20h18',
+    ],
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+```
+
+- [ ] **Step 2: Add `accordion` to handlers object**
+
+In the `handlers` object inside `createToolbar`, add:
+
+```js
+    accordion: null,
+```
+
+(alongside `tabs: null`, `form: null`, etc.)
+
+- [ ] **Step 3: Add fallback in `executeAction`**
+
+After the `else if (action === 'tabs')` branch, add:
+
+```js
+  } else if (action === 'accordion') {
+    if (handlers.accordion) {
+      handlers.accordion(ta);
+    } else {
+      const start = ta.selectionStart;
+      const snippet = `[accordion]\n[item title="Item 1"]Content here.[/item]\n[item title="Item 2"]Content here.[/item]\n[/accordion]\n`;
+      ta.value = ta.value.substring(0, start) + snippet + ta.value.substring(start);
+      ta.selectionStart = ta.selectionEnd = start + snippet.length;
+      ta.dispatchEvent(new Event('input', {bubbles: true}));
+      ta.focus();
+    }
+```
+
+- [ ] **Step 4: Add to Insert dropdown items**
+
+In the `buttons` array, find the Insert dropdown `items` array. After the `{label: 'Tabs', ...}` entry, add:
+
+```js
+      {label: 'Accordion', icon: 'accordion-insert', action: 'accordion'},
+```
+
+- [ ] **Step 5: Export `onAccordion`**
+
+In the `return { ... }` block at the end of `createToolbar`, after `onTabs(cb) { ... }`, add:
+
+```js
+    onAccordion(cb) {
+      handlers.accordion = cb;
+    },
+```
+
+- [ ] **Step 6: Smoke-test in browser**
+
+Open the page editor. Open the Insert dropdown. Confirm "Accordion" appears in the list with a stacked-lines icon. Click it - should insert a 2-item `[accordion]` snippet (the fallback, since the handler hasn't been wired yet).
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add admin/js/lib/markdown-toolbar.js
+git commit -m "feat: add Accordion to Insert toolbar dropdown"
+```
+
+---
+
+## Task 3: Dialog - `toolbar.onAccordion` implementation
+
+**Files:**
+- Modify: `admin/js/views/page-editor.js`
+
+- [ ] **Step 1: Wire the handler after `toolbar.onTabs`**
+
+Find `toolbar.onTabs((ta) => {` in `page-editor.js`. After the closing `});` of that block, add the full handler below.
+
+The handler follows the identical light-DOM modal pattern used by `onTabs` and `onCollection`:
+- `E.modal({title, size})` creates the modal shell
+- `modal.element.appendChild(wrapper)` projects the DOM into the modal body
+- `modal.open()` shows it
+
+```js
+        // Accordion shortcode dialog
+        toolbar.onAccordion(async (ta) => {
+            const collections = await api.collections.list().catch(() => []);
+
+            const wrapper = document.createElement('div');
+            wrapper.style.cssText = 'padding:.25rem 0 .5rem;display:flex;flex-direction:column;gap:.75rem;';
+
+            const labelStyle = 'display:block;font-size:.85em;font-weight:600;margin-bottom:.25rem;color:var(--dm-text-muted,#aaa);text-transform:uppercase;letter-spacing:.05em;';
+            const inputStyle = 'width:100%;padding:.4rem .6rem;background:var(--dm-input-bg,#1a1a1a);border:1px solid var(--dm-border,#333);border-radius:4px;color:var(--dm-text,#eee);font-size:.9em;';
+
+            // --- Mode toggle ---
+            const toggleRow = document.createElement('div');
+            toggleRow.style.cssText = 'display:flex;gap:.5rem;';
+            const staticBtn = document.createElement('button');
+            staticBtn.type = 'button';
+            staticBtn.className = 'btn btn-sm btn-primary';
+            staticBtn.textContent = 'Static';
+            const collBtn = document.createElement('button');
+            collBtn.type = 'button';
+            collBtn.className = 'btn btn-sm btn-ghost';
+            collBtn.textContent = 'Collection';
+            toggleRow.appendChild(staticBtn);
+            toggleRow.appendChild(collBtn);
+            wrapper.appendChild(toggleRow);
+
+            let mode = 'static'; // 'static' | 'collection'
+
+            // --- Static panel ---
+            const staticPanel = document.createElement('div');
+            staticPanel.style.cssText = 'display:flex;flex-direction:column;gap:.5rem;';
+
+            const itemRows = [];
+
+            function makeItemRow(n) {
+                const row = document.createElement('div');
+                row.style.cssText = 'display:flex;align-items:center;gap:.5rem;';
+                const lbl = document.createElement('label');
+                lbl.style.cssText = 'font-size:.85em;color:var(--dm-text-muted,#aaa);white-space:nowrap;';
+                lbl.textContent = `Item ${n}`;
+                const inp = document.createElement('input');
+                inp.type = 'text';
+                inp.placeholder = 'Item title';
+                inp.style.cssText = inputStyle;
+                row.appendChild(lbl);
+                row.appendChild(inp);
+                return {row, input: inp};
+            }
+
+            // Start with 2 rows
+            [1, 2].forEach(n => {
+                const r = makeItemRow(n);
+                itemRows.push(r);
+                staticPanel.appendChild(r.row);
+            });
+
+            const addItemBtn = document.createElement('button');
+            addItemBtn.type = 'button';
+            addItemBtn.className = 'btn btn-ghost btn-sm';
+            addItemBtn.textContent = '+ Add Item';
+            addItemBtn.addEventListener('click', () => {
+                const r = makeItemRow(itemRows.length + 1);
+                itemRows.push(r);
+                staticPanel.insertBefore(r.row, addItemBtn);
+            });
+            staticPanel.appendChild(addItemBtn);
+
+            const staticMultiLabel = document.createElement('label');
+            staticMultiLabel.style.cssText = 'display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;';
+            const staticMultiCheck = document.createElement('input');
+            staticMultiCheck.type = 'checkbox';
+            staticMultiLabel.appendChild(staticMultiCheck);
+            staticMultiLabel.appendChild(document.createTextNode('Allow multiple open'));
+            staticPanel.appendChild(staticMultiLabel);
+
+            wrapper.appendChild(staticPanel);
+
+            // --- Collection panel (hidden by default) ---
+            const collPanel = document.createElement('div');
+            collPanel.style.cssText = 'display:none;flex-direction:column;gap:.5rem;';
+
+            // Collection select
+            const collRow = document.createElement('div');
+            const collLabel = document.createElement('label');
+            collLabel.style.cssText = labelStyle;
+            collLabel.textContent = 'Collection';
+            const collSelect = document.createElement('select');
+            collSelect.style.cssText = inputStyle;
+            if (!collections.length) {
+                const opt = document.createElement('option');
+                opt.value = '';
+                opt.textContent = 'No collections found';
+                collSelect.appendChild(opt);
+            } else {
+                collections.forEach(c => {
+                    const opt = document.createElement('option');
+                    opt.value = c.slug;
+                    opt.textContent = c.title || c.slug;
+                    collSelect.appendChild(opt);
+                });
+            }
+            collRow.appendChild(collLabel);
+            collRow.appendChild(collSelect);
+            collPanel.appendChild(collRow);
+
+            // Title field select
+            const titleFieldRow = document.createElement('div');
+            const titleFieldLabel = document.createElement('label');
+            titleFieldLabel.style.cssText = labelStyle;
+            titleFieldLabel.textContent = 'Title field';
+            const titleFieldSelect = document.createElement('select');
+            titleFieldSelect.style.cssText = inputStyle;
+            titleFieldRow.appendChild(titleFieldLabel);
+            titleFieldRow.appendChild(titleFieldSelect);
+            collPanel.appendChild(titleFieldRow);
+
+            // Body field select
+            const bodyFieldRow = document.createElement('div');
+            const bodyFieldLabel = document.createElement('label');
+            bodyFieldLabel.style.cssText = labelStyle;
+            bodyFieldLabel.textContent = 'Body field';
+            const bodyFieldSelect = document.createElement('select');
+            bodyFieldSelect.style.cssText = inputStyle;
+            bodyFieldRow.appendChild(bodyFieldLabel);
+            bodyFieldRow.appendChild(bodyFieldSelect);
+            collPanel.appendChild(bodyFieldRow);
+
+            // Populate field selects from schema
+            async function loadFields(slug) {
+                titleFieldSelect.textContent = '';
+                bodyFieldSelect.textContent = '';
+                try {
+                    const schema = await api.collections.get(slug);
+                    const fields = schema.fields || [];
+                    if (!fields.length) {
+                        const none = document.createElement('option');
+                        none.value = '';
+                        none.textContent = '- none -';
+                        titleFieldSelect.appendChild(none.cloneNode(true));
+                        bodyFieldSelect.appendChild(none);
+                        return;
+                    }
+                    fields.forEach((f, i) => {
+                        const makeOpt = () => {
+                            const o = document.createElement('option');
+                            o.value = f.name;
+                            o.textContent = f.label || f.name;
+                            return o;
+                        };
+                        titleFieldSelect.appendChild(makeOpt());
+                        bodyFieldSelect.appendChild(makeOpt());
+                        // Pre-select 'title' / 'description' by name if present
+                        if (f.name === 'title') titleFieldSelect.value = 'title';
+                        if (f.name === 'description') bodyFieldSelect.value = 'description';
+                    });
+                    // Fallback: first field for title, second for body
+                    if (!titleFieldSelect.value && fields[0]) titleFieldSelect.value = fields[0].name;
+                    if (!bodyFieldSelect.value && fields[1]) bodyFieldSelect.value = fields[1].name;
+                } catch {
+                    const err = document.createElement('option');
+                    err.value = '';
+                    err.textContent = '- unknown -';
+                    titleFieldSelect.appendChild(err.cloneNode(true));
+                    bodyFieldSelect.appendChild(err);
+                }
+            }
+
+            if (collections.length) loadFields(collections[0].slug);
+            collSelect.addEventListener('change', () => loadFields(collSelect.value));
+
+            // Limit
+            const limitRow = document.createElement('div');
+            const limitLabel = document.createElement('label');
+            limitLabel.style.cssText = labelStyle;
+            limitLabel.textContent = 'Limit (optional)';
+            const limitInput = document.createElement('input');
+            limitInput.type = 'number';
+            limitInput.placeholder = 'All';
+            limitInput.style.cssText = inputStyle;
+            limitRow.appendChild(limitLabel);
+            limitRow.appendChild(limitInput);
+            collPanel.appendChild(limitRow);
+
+            const collMultiLabel = document.createElement('label');
+            collMultiLabel.style.cssText = 'display:flex;align-items:center;gap:.5rem;font-size:.9em;cursor:pointer;';
+            const collMultiCheck = document.createElement('input');
+            collMultiCheck.type = 'checkbox';
+            collMultiLabel.appendChild(collMultiCheck);
+            collMultiLabel.appendChild(document.createTextNode('Allow multiple open'));
+            collPanel.appendChild(collMultiLabel);
+
+            wrapper.appendChild(collPanel);
+
+            // --- Toggle logic ---
+            staticBtn.addEventListener('click', () => {
+                mode = 'static';
+                staticBtn.className = 'btn btn-sm btn-primary';
+                collBtn.className = 'btn btn-sm btn-ghost';
+                staticPanel.style.display = 'flex';
+                collPanel.style.display = 'none';
+            });
+            collBtn.addEventListener('click', () => {
+                mode = 'collection';
+                collBtn.className = 'btn btn-sm btn-primary';
+                staticBtn.className = 'btn btn-sm btn-ghost';
+                collPanel.style.display = 'flex';
+                staticPanel.style.display = 'none';
+            });
+
+            // --- Insert button ---
+            const insertBtn = document.createElement('button');
+            insertBtn.type = 'button';
+            insertBtn.className = 'btn btn-primary';
+            insertBtn.textContent = 'Insert Accordion';
+            wrapper.appendChild(insertBtn);
+
+            const modal = E.modal({title: 'Insert Accordion', size: 'sm'});
+            modal.element.appendChild(wrapper);
+            modal.open();
+
+            requestAnimationFrame(() => itemRows[0].input.focus());
+
+            insertBtn.addEventListener('click', () => {
+                modal.close();
+                let snippet;
+
+                if (mode === 'static') {
+                    const multiAttr = staticMultiCheck.checked ? ' multiple="true"' : '';
+                    snippet = `[accordion${multiAttr}]\n`;
+                    itemRows.forEach((r, i) => {
+                        const title = r.input.value.trim() || `Item ${i + 1}`;
+                        snippet += `[item title="${title}"]Content here.[/item]\n`;
+                    });
+                    snippet += '[/accordion]';
+                } else {
+                    const slug = collSelect.value;
+                    if (!slug) return;
+                    const titleF = titleFieldSelect.value;
+                    const bodyF  = bodyFieldSelect.value;
+                    let attrs = `slug="${slug}" display="accordion"`;
+                    if (titleF) attrs += ` title-field="${titleF}"`;
+                    if (bodyF)  attrs += ` body-field="${bodyF}"`;
+                    const limit = limitInput.value.trim();
+                    if (limit)  attrs += ` limit="${limit}"`;
+                    if (collMultiCheck.checked) attrs += ' multiple="true"';
+                    snippet = `[collection ${attrs} /]`;
+                }
+
+                insertAtCursor(ta, snippet);
+                ta.dispatchEvent(new Event('input', {bubbles: true}));
+                ta.focus();
+            });
+        });
+```
+
+- [ ] **Step 2: Smoke-test static mode**
+
+Open page editor → Insert → Accordion. Dialog appears. Static mode is active. Change item titles. Click "Insert Accordion". Verify the textarea receives:
+```
+[accordion]
+[item title="Your title"]Content here.[/item]
+...
+[/accordion]
+```
+
+- [ ] **Step 3: Smoke-test collection mode**
+
+Click "Collection" toggle. Collection select populates. Change collection - title/body field selects update. Click "Insert Accordion". Verify the textarea receives:
+```
+[collection slug="..." display="accordion" title-field="..." body-field="..." /]
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add admin/js/views/page-editor.js
+git commit -m "feat: implement Accordion insert dialog with static and collection modes"
+```
+
+---
+
+## Task 4: Help panel entry
+
+**Files:**
+- Modify: `admin/js/views/page-editor.js` (inside the help slideover builder, `panelComponents` section)
+
+The help slideover (opened via the `?` toolbar button) documents every shortcode. Add an Accordion section alongside the existing "Interactive Components" entry so editors can discover the collection-bound syntax.
+
+- [ ] **Step 1: Add Accordion section in the help slideover**
+
+Find the section that appends Accordion to `section3b` (the interactive components section, which already shows the static `[accordion]` snippet). After that existing snippet, add:
+
+```js
+  section3b.appendChild(makeSnippet(
+    'Accordion - collection-bound',
+    '[collection slug="faq" display="accordion" title-field="title" body-field="description" /]',
+    'Renders collection entries as accordion items. Use Insert → Accordion for a guided dialog.'
+  ));
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add admin/js/views/page-editor.js
+git commit -m "docs: add collection-bound accordion example to editor help panel"
+```
+
+---
+
+## Task 5: Insert Collection - add Block display option with block picker
+
+**Files:**
+- Modify: `admin/js/views/page-editor.js` (inside `toolbar.onCollection(...)`)
+
+The existing Insert Collection dialog has `table`, `cards`, `list` display options. The server already supports `display="block"` (renders entries through a reusable HTML block template), but the UI never exposed it. This task adds `block` to the display select and shows a block-name picker when it is chosen.
+
+The shortcode generated: `[collection slug="..." display="block" block="my-block" cols="3" /]`
+
+- [ ] **Step 1: Fetch blocks alongside collections at dialog open**
+
+In `toolbar.onCollection(async (ta) => {`, change the opening line from:
+
+```js
+const collections = await api.collections.list().catch(() => []);
+```
+
+to:
+
+```js
+const [collections, blocks] = await Promise.all([
+    api.collections.list().catch(() => []),
+    api.blocks.list().catch(() => []),
+]);
+```
+
+- [ ] **Step 2: Add `block` to the display select options**
+
+Find:
+```js
+['table', 'cards', 'list'].forEach(d => {
+```
+
+Change to:
+```js
+['table', 'cards', 'list', 'block'].forEach(d => {
+```
+
+- [ ] **Step 3: Add block name row (shown only when display = "block")**
+
+After the `colsRow` block (which ends with `wrapper.appendChild(colsRow);`), add:
+
+```js
+            // Block name (block display only)
+            const blockRow = document.createElement('div');
+            blockRow.style.display = 'none';
+            const blockLabel = document.createElement('label');
+            blockLabel.style.cssText = labelStyle;
+            blockLabel.textContent = 'Block template';
+            const blockSelect = document.createElement('select');
+            blockSelect.style.cssText = inputStyle;
+            if (!blocks.length) {
+                const opt = document.createElement('option');
+                opt.value = '';
+                opt.textContent = 'No block templates found';
+                blockSelect.appendChild(opt);
+            } else {
+                blocks.forEach(b => {
+                    const opt = document.createElement('option');
+                    opt.value = b.name ?? b;
+                    opt.textContent = b.name ?? b;
+                    blockSelect.appendChild(opt);
+                });
+            }
+            blockRow.appendChild(blockLabel);
+            blockRow.appendChild(blockSelect);
+            wrapper.appendChild(blockRow);
+```
+
+- [ ] **Step 4: Update `toggleTableRows` to handle block and cols visibility**
+
+Find the existing `toggleTableRows` function:
+```js
+            const toggleTableRows = () => {
+                const isTable = dispSelect.value === 'table';
+                tableRows.forEach(r => {
+                    r.style.display = isTable ? '' : 'none';
+                });
+                colsRow.style.display = dispSelect.value === 'cards' ? '' : 'none';
+            };
+```
+
+Replace with:
+```js
+            const toggleTableRows = () => {
+                const val = dispSelect.value;
+                const isTable = val === 'table';
+                tableRows.forEach(r => {
+                    r.style.display = isTable ? '' : 'none';
+                });
+                colsRow.style.display = (val === 'cards' || val === 'block') ? '' : 'none';
+                blockRow.style.display = val === 'block' ? '' : 'none';
+            };
+```
+
+- [ ] **Step 5: Update snippet generation for block display**
+
+Find the `insertBtn.addEventListener('click', ...)` handler. Find this line:
+```js
+                if (display === 'cards') snippet += ` columns="${colsInput.value}"`;
+```
+
+After it, add:
+```js
+                if (display === 'block') {
+                    const blockName = blockSelect.value;
+                    if (blockName) snippet += ` block="${blockName}"`;
+                    const cols = colsInput.value.trim();
+                    if (cols) snippet += ` cols="${cols}"`;
+                }
+```
+
+- [ ] **Step 6: Smoke-test**
+
+Open Insert → Collection. Confirm "Block" appears in the Display dropdown. Select it - "Block template" select appears (populated from `api.blocks.list()`), "Columns" row also visible. Click Insert. Verify snippet:
+```
+[collection slug="..." display="block" block="my-block" cols="3" /]
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add admin/js/views/page-editor.js
+git commit -m "feat: add Block display option to Insert Collection dialog"
+```