Merge pull request #229 from znz/copy-button-consistency

COPY ボタンまわりの pre の扱いを統一する

Author: znz

lib/bitclust/mdcompiler.rb

@@ -347,8 +347,9 @@ def code_fence
       end
       terminator = /\A`{#{fence.size}}\s*$/
       if lang
-        line "<pre class=\"highlight #{lang}\">"
+        # caption はタブとして pre の前に置く(rd 側と同期)
         line "<span class=\"caption\">#{escape_html(caption)}</span>" if caption
+        line "<pre class=\"highlight #{lang}\">"
         line "<code>"
         src = +""
         @f.until_terminator(terminator) do |code_line|

lib/bitclust/rdcompiler.rb

@@ -310,8 +310,10 @@ def emlist
       if %r!\A//emlist\[(?<caption>[^\[\]]+?)?\]\[(?<lang>\w+?)\]! =~ command
         # @type var caption: String?
         # @type var lang: String
-        line "<pre class=\"highlight #{lang}\">"
+        # caption は pre 内の absolute 配置ではなく、pre の上に密着した
+        # タブとして描画する(pre 内だと編集・貼り付けで先頭行と重なる)
         line "<span class=\"caption\">#{escape_html(caption)}</span>" if caption
+        line "<pre class=\"highlight #{lang}\">"
         line "<code>"
         src = +""
         @f.until_terminator(%r<\A//\}>) do |line|

test/js/test_script.mjs

@@ -213,6 +213,29 @@ async function settle() {
          'copied text is trimmed (leading newlines dropped, trailing squeezed)')
 }
 
+// RUN 出力など、後から生成される pre にもボタンを付けられる公開フック。
+// getText はクリック時に評価されるので、内容が変わる要素にも使える
+{
+  const spy = clipboardSpy()
+  const pre = new FakeElement('pre', '')
+  runOnload([pre], spy.navigator)
+  assert(typeof globalThis.window.ruremaAddCopyButton === 'function',
+         'window.ruremaAddCopyButton is exposed for dynamically created pre')
+  const output = new FakeElement('pre', 'highlight__run-output')
+  let current = 'first output\n'
+  const btn = globalThis.window.ruremaAddCopyButton(output, () => current)
+  assert(output.firstChild === btn,
+         'the hook prepends a COPY button to the given element')
+  btn.onclick()
+  await settle()
+  current = 'second output\n'
+  btn.onclick()
+  await settle()
+  assert(spy.written.length === 2 &&
+         spy.written[0] === 'first output\n' && spy.written[1] === 'second output\n',
+         'getText is evaluated at click time (dynamic content is copied as-is)')
+}
+
 // Clipboard API が無い環境では textarea + execCommand にフォールバックする
 {
   const pre = new FakeElement('pre', '', 'fallback code\n')

test/test_rdcompiler.rb

@@ -359,8 +359,8 @@ def test_method_with_param_and_emlist_with_caption_and_lang
 <dt class='method-param'>[PARAM] arg:</dt>
 <dd>
 dsc1
-<pre class="highlight ruby">
 <span class="caption">This is caption</span>
+<pre class="highlight ruby">
 <code>
 dsc2
 dsc3
@@ -387,8 +387,8 @@ def test_method_with_samplecode
 <p>
 abs
 </p>
-<pre class="highlight ruby">
 <span class="caption">description</span>
+<pre class="highlight ruby">
 <code>
 <span class="nb">puts</span> <span class="s2">"</span><span class="s2">text</span><span class="s2">"</span>
 </code></pre>

theme/default/js/run.js

@@ -106,22 +106,38 @@ function setupBlock(pre, run) {
   }
 
   let output
+  let outputTextNode
   const ensureOutput = () => {
     if (!output) {
       output = document.createElement('pre')
       output.className = 'highlight__run-output'
       output.setAttribute('aria-live', 'polite')
+      // COPY ボタン(先頭)を残したまま本文を書き換えられるように、
+      // 出力テキストは専用のテキストノードに持つ
+      outputTextNode = document.createTextNode('')
+      output.appendChild(outputTextNode)
       pre.after(output)
+      // 実行結果もコピーできるようにする(script.js の公開フック)。
+      // 出力は実行のたびに変わるので、クリック時のテキストを渡す
+      if (window.ruremaAddCopyButton) {
+        window.ruremaAddCopyButton(output, () => outputTextNode.data)
+      }
     }
     return output
   }
+  const setOutputText = (text) => {
+    outputTextNode.data = text
+  }
 
   // After the first run the sample becomes editable (like a scratchpad);
-  // Ctrl+Enter (or Cmd+Enter) re-runs the edited code. Editing gradually
-  // loses the syntax-highlight spans; the COPY button keeps copying the
-  // original text.
+  // Ctrl+Enter (or Cmd+Enter) re-runs the edited code. The COPY button
+  // keeps copying the original text.
   const enableEditing = () => {
     if (code.isContentEditable) return
+    // 編集でハイライトの span に文字が食い込むと、貼り付けた文字が
+    // その場の色を引き継いで中途半端に崩れるため、編集可能にする
+    // 時点でプレーンテキスト化して色を消す
+    code.textContent = code.textContent
     code.contentEditable = 'true'
     code.spellcheck = false
     pre.dataset.editing = 'true'
@@ -140,22 +156,22 @@ function setupBlock(pre, run) {
     button.textContent = 'LOADING...'
     const out = ensureOutput()
     out.classList.remove('highlight__run-output--error')
-    out.textContent = ''
+    setOutputText('')
     let label = 'RUN'
     try {
       const result = await run(code.textContent, () => {
         button.textContent = 'RUNNING...'
       })
       if (result) {
-        out.textContent = result.error
+        setOutputText(result.error
           ? (result.output === '' ? result.error : result.output + '\n' + result.error)
-          : result.output
+          : result.output)
         if (result.error) out.classList.add('highlight__run-output--error')
         enableEditing()
       }
     } catch (e) {
       out.classList.add('highlight__run-output--error')
-      out.textContent = formatRunError(e)
+      setOutputText(formatRunError(e))
       label = 'RETRY'
     } finally {
       button.textContent = label

theme/default/script.js

@@ -22,6 +22,26 @@
     })
   }
 
+  // elem の先頭に COPY ボタンを付ける。getText はクリック時に評価される
+  // ので、RUN の実行結果のように内容が変わる要素にも使える
+  function addCopyButton(elem, getText) {
+    const btn = document.createElement('span')
+    btn.setAttribute('class', 'highlight__copy-button')
+    btn.onclick = function(){
+      writeClipboard(getText()).then(function() {
+        btn.classList.add("copied")
+        window.setTimeout(function() { btn.classList.remove("copied") }, 1000)
+      }).catch(function() {
+        // コピー失敗時は従来どおり何も表示しない
+      })
+    }
+    elem.insertBefore(btn, elem.firstChild)
+    return btn
+  }
+
+  // RUN 出力(js/run.js)など、後から動的に生成される pre 用の公開フック
+  window.ruremaAddCopyButton = addCopyButton
+
   window.onload = function() {
     // 言語指定なしのコードブロックは class を持たない素の <pre> になるため、
     // highlight クラスではなく pre 要素全体に COPY ボタンを付ける
@@ -39,19 +59,7 @@
         // RUN ボタンでサンプルを編集しても COPY は元のテキストを保持する
         const text = tempDiv.textContent.replace(/^\n+/, "").replace(/\n{2,}$/, "\n")
 
-        // COPY button
-        const btn = document.createElement('span')
-        btn.setAttribute('class', 'highlight__copy-button')
-        elem.insertBefore(btn, elem.firstChild)
-
-        btn.onclick = function(){
-          writeClipboard(text).then(function() {
-            btn.classList.add("copied")
-            window.setTimeout(function() { btn.classList.remove("copied") }, 1000)
-          }).catch(function() {
-            // コピー失敗時は従来どおり何も表示しない
-          })
-        }
+        addCopyButton(elem, function() { return text })
       }
     )
   }

theme/default/style.css

@@ -126,21 +126,16 @@ code, pre, tt {
     font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 }
 
+/* COPY ボタン(script.js)が全 pre の先頭行に入るため、上 padding は
+   highlight の有無によらず 0 にしてボタンを上端に密着させる */
 pre {
     line-height: 1.1;
     background-color: #f2f2f2;
-    padding: 1.1em;
+    padding: 0px 1.1em 1.1em 1.1em;
     font-weight: normal;
     overflow: auto;
 }
 
-pre.highlight {
-    line-height: 1.1;
-    background-color: #f2f2f2;
-    padding: 0px 1.1em 1.1em 1.1em;
-    font-weight: normal;
-    position: relative;
-}
 
 /* for RUN (js/run.js, statichtml --run-ruby-wasm) */
 .highlight__run-button {
@@ -212,13 +207,16 @@ pre.highlight.ruby[data-editing="true"] > code:focus {
   left: -1000px;
 }
 
-pre .caption {
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 0.2em;
+/* サンプルコードのキャプション。pre の上に密着したタブとして表示する
+   (pre 内の absolute 配置だと、編集・貼り付けで先頭行と重なるため) */
+.caption {
+    display: inline-block;
+    padding: 0.2em 0.5em;
     background: #ddd;
-    border-width: 0 1px 1px 0;
+    margin: 1em 0 0;
+}
+.caption + pre {
+    margin-top: 0;
 }
 
 blockquote {