canvas feature

public/js/modules/editor.js

@@ -4,6 +4,7 @@ import { $, esc, api, escRe, getCsrf, fuzzyMatch } from './util.js';
 import { state, getChildren, CARD_COLORS } from './state.js';
 import { renderMd, addCodeCopyButtons, formatTodoItems } from './markdown.js';
 import { pushCardEdit, snapshotCard } from './undo.js';
+import { openCanvas } from './canvas.js';
 
 const modal = $('modal');
 const body = $('editor-body');
@@ -489,6 +490,37 @@ $('md-toolbar')?.addEventListener('click', e => {
             updatePreview();
         },
         hr: () => insertMd('\n---\n'),
+        asciiart: () => {
+            // Check if cursor is inside an existing ```ascii block to edit it
+            const val = body.value;
+            const pos = body.selectionStart;
+            const before = val.substring(0, pos);
+            const after = val.substring(pos);
+            const blockStart = before.lastIndexOf('```ascii\n');
+            const blockEndInBefore = blockStart >= 0 ? before.indexOf('\n```', blockStart + 9) : -1;
+            let existingText = null, replaceStart = 0, replaceEnd = 0;
+            if (blockStart >= 0 && blockEndInBefore < 0) {
+                // Cursor is inside a ```ascii block
+                const contentStart = blockStart + 9; // after "```ascii\n"
+                const endMark = val.indexOf('\n```', contentStart);
+                if (endMark >= 0) {
+                    existingText = val.substring(contentStart, endMark);
+                    replaceStart = blockStart;
+                    replaceEnd = endMark + 4;
+                }
+            }
+            openCanvas(text => {
+                const block = '```ascii\n' + text + '\n```';
+                if (existingText !== null) {
+                    body.setRangeText(block, replaceStart, replaceEnd, 'end');
+                } else {
+                    const s = body.selectionStart;
+                    const prefix = s > 0 && val[s - 1] !== '\n' ? '\n' : '';
+                    body.setRangeText(prefix + block + '\n', s, body.selectionEnd, 'end');
+                }
+                updatePreview();
+            }, existingText);
+        },
     };
     cmds[btn.dataset.md]?.();
 });