gitorial-cli 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitorial-cli",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "CLI tools for building and maintaining Gitorial tutorials",
   "main": "src/index.js",
   "bin": {

package/src/lib/monaco-assets.js

@@ -132,11 +132,109 @@ body {
   cursor: pointer;
 }
 
+.gitorial-monaco-toolbar .copy-toggle {
+  background: transparent;
+  color: #f0f0f2;
+  border: 1px solid #3a3a3f;
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.gitorial-monaco-toolbar .retry-toggle {
+  background: transparent;
+  color: #f0f0f2;
+  border: 1px solid #6d737d;
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  display: none;
+}
+
+.gitorial-monaco-toolbar button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
 .gitorial-monaco-editor {
+  position: relative;
+  overflow: hidden;
+  background: #0f0f10;
   height: 70vh;
   min-height: 520px;
 }
 
+.gitorial-monaco-editor .gitorial-monaco-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback {
+  margin: 0;
+  padding: 14px 16px;
+  height: 100%;
+  overflow: auto;
+  background: #0f0f10;
+  color: #d6d9df;
+  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.45;
+  white-space: normal;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback.hidden {
+  display: none;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback pre {
+  margin: 0;
+  white-space: pre;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback code.hljs {
+  display: block;
+  padding: 0;
+  background: transparent;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback .fallback-diff {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+  height: 100%;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback .fallback-pane {
+  border: 1px solid #2a2a2d;
+  background: #111214;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback .fallback-pane h4 {
+  margin: 0;
+  padding: 10px 12px;
+  font-size: 12px;
+  font-family: "Inter", system-ui, sans-serif;
+  font-weight: 600;
+  border-bottom: 1px solid #2a2a2d;
+  background: #191a1d;
+  color: #f0f0f2;
+}
+
+.gitorial-monaco-editor .gitorial-monaco-fallback .fallback-pane pre {
+  margin: 0;
+  padding: 12px;
+  height: 100%;
+  overflow: auto;
+  white-space: pre;
+}
+
 .gitorial-monaco-footer {
   padding: 10px 16px;
   background: #1b1b1d;
@@ -174,11 +272,18 @@ body {
     min-height: 480px;
     height: 60vh;
   }
+
+  .gitorial-monaco-editor .gitorial-monaco-fallback .fallback-diff {
+    grid-template-columns: 1fr;
+  }
 }
 `;
 
 const monacoSetup = `
 (function () {
+  const MONACO_BASE = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.47.0/min/vs';
+  const MONACO_TIMEOUT_MS = 3500;
+
   function loadJson(url) {
     return fetch(url).then((res) => {
       if (!res.ok) {
@@ -217,107 +322,402 @@ const monacoSetup = `
     }
   }
 
-  function buildIframe() {
+  function escapeHtml(value) {
+    return String(value)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+
+  function escapeAttribute(value) {
+    return String(value).replace(/"/g, '&quot;');
+  }
+
+  function mapToHighlightLanguage(language) {
+    switch (language) {
+      case 'rust':
+        return 'rust';
+      case 'toml':
+        return 'toml';
+      case 'javascript':
+        return 'javascript';
+      case 'json':
+        return 'json';
+      case 'typescript':
+        return 'typescript';
+      case 'diff':
+        return 'diff';
+      case 'markdown':
+        return 'markdown';
+      default:
+        return '';
+    }
+  }
+
+  function runHighlight(root) {
+    if (!window.hljs) {
+      return false;
+    }
+    const codeBlocks = root.querySelectorAll('code[data-gitorial-lang]');
+    if (!codeBlocks.length) {
+      return true;
+    }
+    const highlightElement = typeof window.hljs.highlightElement === 'function';
+    const highlightBlock = typeof window.hljs.highlightBlock === 'function';
+    if (!highlightElement && !highlightBlock) {
+      return false;
+    }
+    codeBlocks.forEach((codeBlock) => {
+      try {
+        if (highlightElement) {
+          window.hljs.highlightElement(codeBlock);
+        } else {
+          window.hljs.highlightBlock(codeBlock);
+        }
+      } catch (_error) {
+        // Keep plain fallback text if highlighting fails.
+      }
+    });
+    return true;
+  }
+
+  function applyFallbackHighlight(root) {
+    if (runHighlight(root)) {
+      return;
+    }
+    let attempts = 0;
+    const maxAttempts = 30;
+    const retryMs = 120;
+    const timer = setInterval(() => {
+      attempts += 1;
+      if (runHighlight(root) || attempts >= maxAttempts) {
+        clearInterval(timer);
+      }
+    }, retryMs);
+  }
+
+  function renderFallback(editorNode, payload) {
+    let fallback = editorNode.querySelector('.gitorial-monaco-fallback');
+    if (!fallback) {
+      fallback = document.createElement('div');
+      fallback.className = 'gitorial-monaco-fallback';
+      editorNode.appendChild(fallback);
+    }
+
+    const highlightLanguage = mapToHighlightLanguage(payload.language || '');
+    const codeClass = highlightLanguage ? 'language-' + highlightLanguage : 'language-plaintext';
+    const codeMeta = 'data-gitorial-lang="' + escapeAttribute(highlightLanguage || 'plaintext') + '"';
+
+    if (payload.type === 'diff') {
+      fallback.innerHTML =
+        '<div class="fallback-diff">' +
+        '<section class="fallback-pane">' +
+        '<h4>Template</h4>' +
+        '<pre><code class="' +
+        codeClass +
+        '" ' +
+        codeMeta +
+        '>' +
+        escapeHtml(payload.original || '') +
+        '</code></pre>' +
+        '</section>' +
+        '<section class="fallback-pane">' +
+        '<h4>Solution</h4>' +
+        '<pre><code class="' +
+        codeClass +
+        '" ' +
+        codeMeta +
+        '>' +
+        escapeHtml(payload.modified || '') +
+        '</code></pre>' +
+        '</section>' +
+        '</div>';
+      applyFallbackHighlight(fallback);
+      fallback.classList.remove('hidden');
+      return;
+    }
+
+    fallback.innerHTML =
+      '<pre><code class="' +
+      codeClass +
+      '" ' +
+      codeMeta +
+      '>' +
+      escapeHtml(payload.content || '') +
+      '</code></pre>';
+    applyFallbackHighlight(fallback);
+    fallback.classList.remove('hidden');
+  }
+
+  function createMonacoSession(editorNode, onReady, onFailure, onEdit) {
     const iframe = document.createElement('iframe');
     iframe.setAttribute('title', 'Gitorial Editor');
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    iframe.style.border = '0';
-    iframe.style.display = 'block';
-    iframe.srcdoc = \`
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      html, body { margin: 0; height: 100%; background: #0f0f10; }
-      #editor { height: 100%; }
-    </style>
-  </head>
-  <body>
-    <div id="editor"></div>
-    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.47.0/min/vs/loader.js"></script>
-    <script>
-      window.require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.47.0/min/vs' } });
-      let editor;
-      let diffEditor;
-      let currentMode = 'single';
-      function getContainer() {
-        return document.getElementById('editor');
-      }
-      function clearContainer() {
-        const container = getContainer();
-        container.innerHTML = '';
-        return container;
-      }
-      function disposeEditor() {
-        if (editor) {
-          editor.dispose();
-          editor = null;
-        }
+    iframe.className = 'gitorial-monaco-frame';
+    iframe.style.display = 'none';
+
+    const iframeDocument = [
+      '<!doctype html>',
+      '<html>',
+      '<head>',
+      '<meta charset="utf-8" />',
+      '<style>html, body { margin: 0; height: 100%; background: #0f0f10; } #editor { height: 100%; } .monaco-editor .gitorial-todo-line { background: rgba(255, 196, 0, 0.12); } .monaco-editor .margin .gitorial-todo-glyph { border-left: 3px solid #ffc400; box-sizing: border-box; }</style>',
+      '</head>',
+      '<body>',
+      '<div id="editor"></div>',
+      '<script>',
+      '(function () {',
+      "  var MONACO_BASE = '" + MONACO_BASE + "';",
+      '  var editor = null;',
+      '  var diffEditor = null;',
+      '  var changeSubscription = null;',
+      '  var todoDecorations = [];',
+      '  var highlightTodos = false;',
+      "  var currentMode = 'single';",
+      '  var pendingPayload = null;',
+      '  var isReady = false;',
+      '  var suppressChange = false;',
+      '  function post(type, detail) {',
+      "    parent.postMessage({ source: 'gitorial-monaco', type: type, detail: detail }, '*');",
+      '  }',
+      '  function getContainer() { return document.getElementById(\\'editor\\'); }',
+      '  function resetContainer() {',
+      '    var container = getContainer();',
+      '    container.innerHTML = "";',
+      '  }',
+      '  function attachChangeHandler() {',
+      '    if (!editor) { return; }',
+      '    if (changeSubscription) {',
+      '      changeSubscription.dispose();',
+      '      changeSubscription = null;',
+      '    }',
+      '    changeSubscription = editor.onDidChangeModelContent(function () {',
+      '      if (suppressChange) { return; }',
+      '      syncTodoDecorations();',
+      "      post('change', editor.getValue());",
+      '    });',
+      '  }',
+      '  function clearTodoDecorations() {',
+      '    if (!editor) { return; }',
+      '    todoDecorations = editor.deltaDecorations(todoDecorations, []);',
+      '  }',
+      '  function syncTodoDecorations() {',
+      '    if (!editor) { return; }',
+      '    if (!highlightTodos) {',
+      '      clearTodoDecorations();',
+      '      return;',
+      '    }',
+      '    var model = editor.getModel();',
+      '    if (!model) {',
+      '      clearTodoDecorations();',
+      '      return;',
+      '    }',
+      '    var matches = model.findMatches("TODO", true, false, false, null, true);',
+      '    var next = matches.map(function (match) {',
+      '      return {',
+      '        range: match.range,',
+      '        options: {',
+      '          isWholeLine: true,',
+      '          className: "gitorial-todo-line",',
+      '          linesDecorationsClassName: "gitorial-todo-glyph"',
+      '        }',
+      '      };',
+      '    });',
+      '    todoDecorations = editor.deltaDecorations(todoDecorations, next);',
+      '  }',
+      '  function disposeEditorModel() {',
+      '    if (!editor) { return; }',
+      '    var model = editor.getModel();',
+      '    if (model) { model.dispose(); }',
+      '  }',
+      '  function disposeDiffModels() {',
+      '    if (!diffEditor) { return; }',
+      '    var models = diffEditor.getModel();',
+      '    if (!models) { return; }',
+      '    if (models.original) { models.original.dispose(); }',
+      '    if (models.modified) { models.modified.dispose(); }',
+      '  }',
+      '  function disposeEditor() {',
+      '    if (!editor) { return; }',
+      '    if (changeSubscription) {',
+      '      changeSubscription.dispose();',
+      '      changeSubscription = null;',
+      '    }',
+      '    disposeEditorModel();',
+      '    todoDecorations = [];',
+      '    editor.dispose();',
+      '    editor = null;',
+      '  }',
+      '  function disposeDiffEditor() {',
+      '    if (!diffEditor) { return; }',
+      '    disposeDiffModels();',
+      '    diffEditor.dispose();',
+      '    diffEditor = null;',
+      '  }',
+      '  function ensureEditor(content, language, readOnly) {',
+      "    if (currentMode !== 'single') {",
+      '      disposeDiffEditor();',
+      '      resetContainer();',
+      "      currentMode = 'single';",
+      '    }',
+      '    if (!editor) {',
+      '      editor = monaco.editor.create(getContainer(), {',
+      '        value: content,',
+      '        language: language,',
+      "        theme: 'vs-dark',",
+      '        automaticLayout: true,',
+      '        readOnly: !!readOnly',
+      '      });',
+      '      highlightTodos = !readOnly;',
+      '      syncTodoDecorations();',
+      '      attachChangeHandler();',
+      '      return;',
+      '    }',
+      '    editor.updateOptions({ readOnly: !!readOnly });',
+      '    highlightTodos = !readOnly;',
+      '    suppressChange = true;',
+      '    disposeEditorModel();',
+      '    editor.setModel(monaco.editor.createModel(content, language));',
+      '    suppressChange = false;',
+      '    syncTodoDecorations();',
+      '  }',
+      '  function ensureDiffEditor(original, modified, language) {',
+      "    if (currentMode !== 'diff') {",
+      '      disposeEditor();',
+      '      resetContainer();',
+      "      currentMode = 'diff';",
+      '    }',
+      '    if (!diffEditor) {',
+      '      diffEditor = monaco.editor.createDiffEditor(getContainer(), {',
+      "        theme: 'vs-dark',",
+      '        automaticLayout: true,',
+      '        readOnly: true,',
+      '        renderSideBySide: true',
+      '      });',
+      '    }',
+      '    disposeDiffModels();',
+      '    var originalModel = monaco.editor.createModel(original, language);',
+      '    var modifiedModel = monaco.editor.createModel(modified, language);',
+      '    diffEditor.setModel({ original: originalModel, modified: modifiedModel });',
+      '  }',
+      '  function renderPayload(payload) {',
+      "    if (payload.type === 'diff') {",
+      "      ensureDiffEditor(payload.original || '', payload.modified || '', payload.language || 'plaintext');",
+      '      return;',
+      '    }',
+      "    ensureEditor(payload.content || '', payload.language || 'plaintext', !!payload.readOnly);",
+      '  }',
+      '  window.addEventListener(\\'message\\', function (event) {',
+      '    var data = event.data || {};',
+      "    if (data.source !== 'gitorial-monaco-host' || !data.type) { return; }",
+      '    if (!isReady) {',
+      '      pendingPayload = data;',
+      '      return;',
+      '    }',
+      '    renderPayload(data);',
+      '  });',
+      '  function bootMonaco() {',
+      "    if (typeof window.require !== 'function') {",
+      "      post('error', 'require_missing');",
+      '      return;',
+      '    }',
+      '    window.require.config({ paths: { vs: MONACO_BASE } });',
+      "    window.require(['vs/editor/editor.main'], function () {",
+      '      isReady = true;',
+      "      post('ready');",
+      '      if (pendingPayload) {',
+      '        renderPayload(pendingPayload);',
+      '        pendingPayload = null;',
+      '      }',
+      '    }, function (err) {',
+      "      post('error', String(err || 'require_failed'));",
+      '    });',
+      '  }',
+      "  var loader = document.createElement('script');",
+      "  loader.src = MONACO_BASE + '/loader.js';",
+      '  loader.async = true;',
+      "  loader.onload = bootMonaco;",
+      "  loader.onerror = function () { post('error', 'loader_failed'); };",
+      '  document.head.appendChild(loader);',
+      '})();',
+      '</script>',
+      '</body>',
+      '</html>',
+    ].join('');
+
+    let settled = false;
+    let timeoutId = null;
+
+    function clearTimer() {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    }
+
+    function cleanUp() {
+      clearTimer();
+      window.removeEventListener('message', onMessage);
+    }
+
+    function onMessage(event) {
+      if (event.source !== iframe.contentWindow) {
+        return;
+      }
+      const data = event.data || {};
+      if (data.source !== 'gitorial-monaco') {
+        return;
+      }
+      if (data.type === 'change') {
+        onEdit(data.detail || '');
+        return;
       }
-      function disposeDiffEditor() {
-        if (diffEditor) {
-          diffEditor.dispose();
-          diffEditor = null;
+      if (data.type === 'ready') {
+        if (settled) {
+          return;
         }
+        settled = true;
+        clearTimer();
+        onReady(iframe);
+        return;
       }
-      function ensureEditor(content, language) {
-        window.require(['vs/editor/editor.main'], function () {
-          if (currentMode !== 'single') {
-            disposeDiffEditor();
-            clearContainer();
-            currentMode = 'single';
-          }
-          if (!editor) {
-            editor = monaco.editor.create(getContainer(), {
-              value: content,
-              language: language,
-              theme: 'vs-dark',
-              automaticLayout: true,
-              readOnly: true,
-            });
-          } else {
-            const model = monaco.editor.createModel(content, language);
-            editor.setModel(model);
-          }
-        });
+      if (data.type === 'error') {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        cleanUp();
+        onFailure(data.detail || 'load_error');
       }
-      function ensureDiffEditor(original, modified, language) {
-        window.require(['vs/editor/editor.main'], function () {
-          if (currentMode !== 'diff') {
-            disposeEditor();
-            clearContainer();
-            currentMode = 'diff';
-          }
-          if (!diffEditor) {
-            diffEditor = monaco.editor.createDiffEditor(getContainer(), {
-              theme: 'vs-dark',
-              automaticLayout: true,
-              readOnly: true,
-              renderSideBySide: true,
-            });
-          }
-          const originalModel = monaco.editor.createModel(original, language);
-          const modifiedModel = monaco.editor.createModel(modified, language);
-          diffEditor.setModel({ original: originalModel, modified: modifiedModel });
-        });
+    }
+
+    timeoutId = setTimeout(() => {
+      if (settled) {
+        return;
       }
-      window.addEventListener('message', function (event) {
-        const data = event.data || {};
-        if (!data.type) {
+      settled = true;
+      cleanUp();
+      onFailure('timeout');
+    }, MONACO_TIMEOUT_MS);
+
+    window.addEventListener('message', onMessage);
+    editorNode.appendChild(iframe);
+    iframe.srcdoc = iframeDocument;
+
+    return {
+      iframe,
+      post(payload) {
+        if (!iframe.contentWindow) {
           return;
         }
-        if (data.type === 'init' || data.type === 'set') {
-          ensureEditor(data.content || '', data.language || 'plaintext');
-        } else if (data.type === 'diff') {
-          ensureDiffEditor(data.original || '', data.modified || '', data.language || 'plaintext');
+        iframe.contentWindow.postMessage({ source: 'gitorial-monaco-host', ...payload }, '*');
+      },
+      destroy() {
+        cleanUp();
+        if (iframe.parentNode) {
+          iframe.parentNode.removeChild(iframe);
         }
-      });
-    </script>
-  </body>
-</html>\`;
-    return iframe;
+      },
+    };
   }
 
   async function initMonaco(container) {
@@ -328,26 +728,27 @@ const monacoSetup = `
     const select = container.querySelector('[data-gitorial-files]');
     const toggle = container.querySelector('[data-gitorial-toggle]');
     const diffToggle = container.querySelector('[data-gitorial-diff]');
+    const copyToggle = container.querySelector('[data-gitorial-copy]');
     const footer = container.querySelector('[data-gitorial-footer]');
     const editorNode = container.querySelector('[data-gitorial-editor]');
-    const iframe = buildIframe();
-    editorNode.appendChild(iframe);
-    let iframeReady = false;
-    let pendingPayload = null;
-
-    iframe.addEventListener('load', () => {
-      iframeReady = true;
-      if (pendingPayload) {
-        iframe.contentWindow.postMessage(pendingPayload, '*');
-        pendingPayload = null;
-      }
-    });
+    const retryToggle = document.createElement('button');
+    retryToggle.type = 'button';
+    retryToggle.className = 'retry-toggle';
+    retryToggle.textContent = 'Retry editor';
+    toolbar.appendChild(retryToggle);
+    copyToggle.disabled = true;
 
     let currentMode = 'template';
     let previousMode = 'template';
     let selectedLabel = null;
-    let templateFiles = config.template || [];
-    let solutionFiles = config.solution || [];
+    const templateFiles = config.template || [];
+    const solutionFiles = config.solution || [];
+    const fileContentCache = new Map();
+    const templateEdits = new Map();
+    let monacoSession = null;
+    let monacoReady = false;
+    let lastPayload = null;
+    let copyState = { text: '', label: '' };
 
     if (!solutionFiles.length) {
       toggle.style.display = 'none';
@@ -407,19 +808,114 @@ const monacoSetup = `
     }
 
     function getFileContent(filePath) {
-      return fetch(filePath).then((res) => res.text());
+      if (fileContentCache.has(filePath)) {
+        return Promise.resolve(fileContentCache.get(filePath));
+      }
+      return fetch(filePath)
+        .then((res) => res.text())
+        .then((text) => {
+          fileContentCache.set(filePath, text);
+          return text;
+        });
     }
 
     function findFile(list, label) {
       return list.find((file) => file.label === label) || null;
     }
 
-    async function postToIframe(payload) {
-      if (iframeReady) {
-        iframe.contentWindow.postMessage(payload, '*');
-      } else {
-        pendingPayload = payload;
+    async function copyTextToClipboard(text) {
+      if (!text) {
+        return false;
+      }
+      if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+        try {
+          await navigator.clipboard.writeText(text);
+          return true;
+        } catch (_error) {}
+      }
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.setAttribute('readonly', 'readonly');
+      textarea.style.position = 'absolute';
+      textarea.style.left = '-9999px';
+      document.body.appendChild(textarea);
+      textarea.select();
+      let copied = false;
+      try {
+        copied = document.execCommand('copy');
+      } catch (_error) {
+        copied = false;
+      }
+      document.body.removeChild(textarea);
+      return copied;
+    }
+
+    function setCopyState(text, label) {
+      copyState = { text: text || '', label: label || '' };
+      copyToggle.disabled = !copyState.text;
+    }
+
+    function flashCopyLabel(label) {
+      copyToggle.textContent = label;
+      setTimeout(() => {
+        copyToggle.textContent = 'Copy code';
+      }, 1300);
+    }
+
+    function setRetryVisible(visible) {
+      retryToggle.style.display = visible ? 'inline-block' : 'none';
+    }
+
+    function startMonacoSession() {
+      if (monacoSession) {
+        monacoSession.destroy();
+        monacoSession = null;
+      }
+      monacoReady = false;
+      setRetryVisible(false);
+      monacoSession = createMonacoSession(
+        editorNode,
+        (iframe) => {
+          monacoReady = true;
+          iframe.style.display = 'block';
+          const fallback = editorNode.querySelector('.gitorial-monaco-fallback');
+          if (fallback) {
+            fallback.classList.add('hidden');
+          }
+          if (lastPayload) {
+            monacoSession.post(lastPayload);
+          }
+        },
+        (reason) => {
+          monacoReady = false;
+          if (monacoSession) {
+            monacoSession.destroy();
+            monacoSession = null;
+          }
+          setRetryVisible(true);
+          footer.textContent = 'Monaco is unavailable (' + reason + '). Using fallback renderer.';
+        },
+        (content) => {
+          if (currentMode !== 'template' || !selectedLabel) {
+            return;
+          }
+          templateEdits.set(selectedLabel, content);
+          setCopyState(content, selectedLabel + ' (template)');
+        }
+      );
+    }
+
+    function renderPayload(payload) {
+      lastPayload = payload;
+      if (monacoReady && monacoSession) {
+        const fallback = editorNode.querySelector('.gitorial-monaco-fallback');
+        if (fallback) {
+          fallback.classList.add('hidden');
+        }
+        monacoSession.post(payload);
+        return;
       }
+      renderFallback(editorNode, payload);
     }
 
     async function setEditorFile(label) {
@@ -429,10 +925,20 @@ const monacoSetup = `
       if (currentMode === 'diff') {
         const templateFile = findFile(templateFiles, label);
         const solutionFile = findFile(solutionFiles, label);
-        const original = templateFile ? await getFileContent(templateFile.path) : '';
+        let original = '';
+        if (templateEdits.has(label)) {
+          original = templateEdits.get(label);
+        } else if (templateFile) {
+          original = await getFileContent(templateFile.path);
+        }
         const modified = solutionFile ? await getFileContent(solutionFile.path) : '';
         const language = detectMode((solutionFile || templateFile || { path: '' }).path);
-        await postToIframe({ type: 'diff', original, modified, language });
+        renderPayload({ type: 'diff', original, modified, language });
+        if (solutionFile) {
+          setCopyState(modified, label + ' (solution)');
+        } else {
+          setCopyState(original, label + ' (template)');
+        }
         return;
       }
 
@@ -441,13 +947,15 @@ const monacoSetup = `
       if (!file) {
         return;
       }
-      const content = await getFileContent(file.path);
+      let content = '';
+      if (currentMode === 'template' && templateEdits.has(label)) {
+        content = templateEdits.get(label);
+      } else {
+        content = await getFileContent(file.path);
+      }
       const language = detectMode(file.path);
-      await postToIframe({ type: 'set', content, language });
-    }
-
-    function currentFiles() {
-      return currentMode === 'template' ? templateFiles : solutionFiles;
+      renderPayload({ type: 'set', content, language, readOnly: currentMode !== 'template' });
+      setCopyState(content, label + ' (' + currentMode + ')');
     }
 
     updateFileOptions();
@@ -458,6 +966,7 @@ const monacoSetup = `
     }
     selectedLabel = select.value;
     await setEditorFile(selectedLabel);
+    startMonacoSession();
 
     select.addEventListener('change', async () => {
       selectedLabel = select.value;
@@ -497,11 +1006,38 @@ const monacoSetup = `
       }
       updateFileOptions();
       toggle.disabled = currentMode === 'diff';
+      if (monacoSession) {
+        startMonacoSession();
+      }
       if (select.value) {
         selectedLabel = select.value;
         await setEditorFile(selectedLabel);
       }
     });
+
+    copyToggle.addEventListener('click', async () => {
+      if (!copyState.text) {
+        return;
+      }
+      const ok = await copyTextToClipboard(copyState.text);
+      if (ok) {
+        flashCopyLabel('Copied');
+        return;
+      }
+      footer.textContent = 'Copy failed for ' + copyState.label + '.';
+      flashCopyLabel('Copy failed');
+    });
+
+    retryToggle.addEventListener('click', () => {
+      startMonacoSession();
+      if (!solutionFiles.length) {
+        footer.textContent = 'Template view only.';
+      } else if (currentMode === 'template') {
+        footer.textContent = 'Template view. Click View solution to compare.';
+      } else {
+        footer.textContent = 'Solution view. Click Back to template to continue.';
+      }
+    });
   }
 
   function boot() {
@@ -510,8 +1046,13 @@ const monacoSetup = `
       return;
     }
     containers.forEach((container) => {
+      if (container.dataset.gitorialInitialized === 'true') {
+        return;
+      }
+      container.dataset.gitorialInitialized = 'true';
       initMonaco(container).catch((error) => {
         console.error(error);
+        delete container.dataset.gitorialInitialized;
       });
     });
   }
@@ -530,6 +1071,7 @@ const monacoEmbed = (relativeAssetBase, manifestPath) => `
     <select class="file-select" data-gitorial-files></select>
     <button class="toggle" data-gitorial-toggle>View solution</button>
     <button class="diff-toggle" data-gitorial-diff>View diff</button>
+    <button class="copy-toggle" data-gitorial-copy>Copy code</button>
   </div>
   <div class="gitorial-monaco-editor" data-gitorial-editor></div>
   <div class="gitorial-monaco-footer" data-gitorial-footer></div>