RUN/COPY ボタンの UI 改善(レビュー指摘対応)

- RUN/COPY を1つの float コンテナ(.highlight__button-group)にまとめ、
  ボタン間・周囲の余白で pointer と text のカーソル形状がちらつかない
  ようにする(隙間のカーソルと選択不可はコンテナが引き受ける)
- 編集可能にしたときに先頭へ空行が入るのを解消。コンパイラが <code>
  直後に置く改行をプレーンテキスト化時に除去(editableText)し、編集時の
  code を inline-block + width:100%(float と同じ行に入れずボタンの下に
  落ちる)から block に変更
- 貼り付けで改行が <br>/<div> になって前の行にくっつくのを解消。
  contentEditable=plaintext-only を優先し、未対応ブラウザは paste で
  text/plain をキャレット位置に挿入するフォールバック

Author: znz

test/js/test_run.mjs

@@ -8,7 +8,7 @@
 // importing either file here never touches a real DOM/Worker.
 import {
   createOnceLoader, formatRunError, truncateOutput,
-  accumulateOutput, STOPPED_NOTE, timeoutNote,
+  accumulateOutput, STOPPED_NOTE, timeoutNote, editableText,
 } from '../../theme/default/js/run.js'
 import { PRELUDE, formatRunError as formatWorkerRunError } from '../../theme/default/js/run-worker.js'
 
@@ -120,6 +120,15 @@ assert(STOPPED_NOTE === '(停止しました)', 'STOPPED_NOTE is the stop notice
 assert(timeoutNote(30) === '(30秒でタイムアウトしました)',
        'timeoutNote formats the configured timeout in seconds')
 
+// editableText: flattening for edit drops the compiler's leading newline
+// (the artifact after <code>) but keeps interior/trailing newlines intact
+assert(editableText('\np 1\np 2\n') === 'p 1\np 2\n',
+       'editableText strips the leading newline artifact')
+assert(editableText('\n\n\np 1\n') === 'p 1\n',
+       'editableText strips all leading blank lines')
+assert(editableText('p 1\n\np 2\n') === 'p 1\n\np 2\n',
+       'editableText keeps interior and trailing newlines')
+
 if (failures > 0) {
   throw new Error(failures + ' JS test(s) failed')
 }

test/js/test_script.mjs

@@ -139,15 +139,25 @@ async function settle() {
   await 0
 }
 
+// group(RUN/COPY 共用コンテナ)経由でボタンを取り出すヘルパー
+function buttonGroupOf(elem) { return elem.childByClass('highlight__button-group') }
+function copyButtonOf(elem) {
+  const group = buttonGroupOf(elem)
+  return group && group.childByClass('highlight__copy-button')
+}
+
 // A ruby sample keeps getting the COPY button (regression)
 {
   const spy = clipboardSpy()
   const pre = new FakeElement('pre', 'highlight ruby')
   pre.appendChild(new FakeElement('code', '', 'puts 1\n'))
   runOnload([pre], spy.navigator)
-  const btn = pre.childByClass('highlight__copy-button')
+  const btn = copyButtonOf(pre)
   assert(btn !== null, 'pre.highlight.ruby gets a COPY button')
-  assert(pre.firstChild === btn, 'COPY button is prepended as the first child')
+  assert(pre.firstChild === buttonGroupOf(pre),
+         'the shared button group is prepended as the first child')
+  assert(buttonGroupOf(pre).firstChild === btn,
+         'COPY button lives inside the button group')
   btn.onclick()
   await settle()
   assert(spy.written.length === 1 && spy.written[0] === 'puts 1\n',
@@ -161,7 +171,7 @@ async function settle() {
   const spy = clipboardSpy()
   const pre = new FakeElement('pre', '', 'ary = []\n')
   runOnload([pre], spy.navigator)
-  const btn = pre.childByClass('highlight__copy-button')
+  const btn = copyButtonOf(pre)
   assert(btn !== null, 'plain <pre> without highlight class gets a COPY button')
   btn.onclick()
   await settle()
@@ -174,7 +184,7 @@ async function settle() {
   const pre = new FakeElement('pre', 'highlight c')
   pre.appendChild(new FakeElement('code', '', 'VALUE v;\n'))
   runOnload([pre], clipboardSpy().navigator)
-  assert(pre.childByClass('highlight__copy-button') !== null,
+  assert(copyButtonOf(pre) !== null,
          'pre.highlight.c gets a COPY button')
 }
 
@@ -183,7 +193,7 @@ async function settle() {
   const div = new FakeElement('div', 'highlight')
   const pre = new FakeElement('pre', '')
   runOnload([div, pre], clipboardSpy().navigator)
-  assert(div.childByClass('highlight__copy-button') === null,
+  assert(copyButtonOf(div) === null,
          'non-pre element does not get a COPY button')
 }
 
@@ -194,7 +204,7 @@ async function settle() {
   pre.appendChild(new FakeElement('span', 'caption', '例'))
   pre.appendChild(new FakeElement('code', '', 'p 42\n'))
   runOnload([pre], spy.navigator)
-  pre.childByClass('highlight__copy-button').onclick()
+  copyButtonOf(pre).onclick()
   await settle()
   assert(spy.written[0] === 'p 42\n',
          'caption text is excluded from the copied text')
@@ -207,7 +217,7 @@ async function settle() {
   const spy = clipboardSpy()
   const pre = new FakeElement('pre', '', '\n\nputs 1\n\n\n')
   runOnload([pre], spy.navigator)
-  pre.childByClass('highlight__copy-button').onclick()
+  copyButtonOf(pre).onclick()
   await settle()
   assert(spy.written[0] === 'puts 1\n',
          'copied text is trimmed (leading newlines dropped, trailing squeezed)')
@@ -224,8 +234,14 @@ async function settle() {
   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')
+  assert(output.firstChild === buttonGroupOf(output) &&
+         buttonGroupOf(output).childByClass('highlight__copy-button') === btn,
+         'the hook puts the COPY button into a prepended button group')
+  // 既にグループがある要素にもう一度呼んでも、グループは1つのまま再利用される
+  globalThis.window.ruremaAddCopyButton(output, () => current)
+  assert(output.children.filter(
+           c => c.className === 'highlight__button-group').length === 1,
+         'an existing button group is reused instead of stacking a second one')
   btn.onclick()
   await settle()
   current = 'second output\n'
@@ -253,7 +269,7 @@ async function settle() {
   globalThis.navigator = {}   // clipboard なし
   ;(0, eval)(source)
   globalThis.window.onload()
-  const btn = pre.childByClass('highlight__copy-button')
+  const btn = copyButtonOf(pre)
   btn.onclick()
   await settle()
   assert(captured === 'fallback code\n',

theme/default/js/run.js

@@ -71,6 +71,14 @@ export function timeoutNote(seconds) {
   return `(${seconds}秒でタイムアウトしました)`
 }
 
+// Text used when flattening the highlighted sample for editing. The
+// compiler emits a newline right after <code>, which textContent keeps —
+// left as-is it shows up as an empty first line once the block becomes
+// editable (script.js strips the same artifact for COPY).
+export function editableText(text) {
+  return text.replace(/^\n+/, '')
+}
+
 // Compiles the wasm module once (cached like the old single-VM version) and
 // hands a fresh Worker + that same compiled Module to each run. The Module
 // is a structured-cloneable postMessage payload, so terminate()-ing a run
@@ -102,14 +110,19 @@ function setupBlock(pre, runner) {
   button.type = 'button'
   button.className = 'highlight__run-button'
   button.textContent = 'RUN'
-  // script.js has already prepended the COPY button (its window.onload
-  // handler fires before our load listener); keep COPY rightmost.
-  const copyButton = pre.querySelector('.highlight__copy-button')
-  if (copyButton) {
-    copyButton.after(button)
-  } else {
-    pre.prepend(button)
+  // script.js has already created the shared button group with the COPY
+  // button in it (its window.onload handler fires before our load
+  // listener). Prepend RUN into the same group so COPY stays rightmost,
+  // and so the gaps between/around the buttons belong to the group
+  // (cursor: default) instead of the text area — hovering the cluster no
+  // longer flickers between pointer and text cursors.
+  let group = pre.querySelector('.highlight__button-group')
+  if (!group) {
+    group = document.createElement('span')
+    group.className = 'highlight__button-group'
+    pre.prepend(group)
   }
+  group.prepend(button)
 
   let output
   let outputTextNode
@@ -135,16 +148,48 @@ function setupBlock(pre, runner) {
     outputTextNode.data = text
   }
 
+  // plaintext-only が使えないブラウザ向けの paste フォールバック。
+  // 既定のリッチペーストは改行を <br>/<div> に変えたり先頭の改行を
+  // 落としたりする(貼り付けた内容が前の行にくっつく)ので、text/plain
+  // をキャレット位置にそのまま挿入する
+  const pastePlainText = (event) => {
+    if (!event.clipboardData) return
+    event.preventDefault()
+    const text = event.clipboardData.getData('text/plain')
+    const selection = window.getSelection()
+    if (!selection || selection.rangeCount === 0) return
+    const range = selection.getRangeAt(0)
+    range.deleteContents()
+    const node = document.createTextNode(text)
+    range.insertNode(node)
+    range.setStartAfter(node)
+    range.collapse(true)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+
   // After the first run the sample becomes editable (like a scratchpad);
   // 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> の
+    // 直後に置く改行(編集開始時に先頭の空行として見える)もここで除く
+    code.textContent = editableText(code.textContent)
+    // 改行入力・貼り付けが <br>/<div> にならないよう plaintext-only を
+    // 優先する。未対応ブラウザは代入が SyntaxError になるか値が変わらない
+    // ので、従来どおり true にして paste だけ自前で処理する
+    try {
+      code.contentEditable = 'plaintext-only'
+    } catch (e) {
+      // fall through
+    }
+    if (code.contentEditable !== 'plaintext-only') {
+      code.contentEditable = 'true'
+      code.addEventListener('paste', pastePlainText)
+    }
     code.spellcheck = false
     pre.dataset.editing = 'true'
     pre.addEventListener('keydown', (event) => {

theme/default/script.js

@@ -22,6 +22,23 @@
     })
   }
 
+  // elem 先頭のボタン置き場(RUN/COPY 共用の float コンテナ)を返す。
+  // 無ければ作る。ボタンを個別に float させるとボタン間の隙間で text
+  // カーソルとちらついてクリックしにくいため、1つのコンテナにまとめて
+  // 隙間のカーソル形状はコンテナ(cursor: default)が引き受ける。
+  // js/run.js も同じコンテナに RUN ボタンを入れる
+  function buttonGroup(elem) {
+    const first = elem.firstChild
+    if (first && first.className &&
+        String(first.className).split(' ').indexOf('highlight__button-group') >= 0) {
+      return first
+    }
+    const group = document.createElement('span')
+    group.setAttribute('class', 'highlight__button-group')
+    elem.insertBefore(group, elem.firstChild)
+    return group
+  }
+
   // elem の先頭に COPY ボタンを付ける。getText はクリック時に評価される
   // ので、RUN の実行結果のように内容が変わる要素にも使える
   function addCopyButton(elem, getText) {
@@ -35,7 +52,8 @@
         // コピー失敗時は従来どおり何も表示しない
       })
     }
-    elem.insertBefore(btn, elem.firstChild)
+    // COPY は常にグループ右端(RUN は run.js が先頭に prepend する)
+    buttonGroup(elem).appendChild(btn)
     return btn
   }
 

theme/default/style.css

@@ -137,10 +137,21 @@ pre {
 }
 
 
+/* RUN/COPY ボタン共用の float コンテナ(script.js が生成)。ボタンを
+   個別に float させるとボタン間・周囲の余白が pre の text カーソル領域の
+   ままになり、ポインタ形状がちらついてクリックしにくいため、隙間の
+   カーソル形状と選択不可はコンテナが引き受ける */
+.highlight__button-group {
+  float: right;
+  margin: 0 -1.1em 0.25em 0.5em;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 /* for RUN (js/run.js, statichtml --run-ruby-wasm) */
 .highlight__run-button {
-  float: right;
-  margin: 0 0 0.25em 0.5em;
+  margin: 0 0.5em 0 0;
   padding: 0.25em 0.5em;
   background-color: #DDD;
   opacity: 0.75;
@@ -171,18 +182,19 @@ pre {
 pre.highlight.ruby[data-editing="true"]:focus-within {
   outline: auto;
 }
+/* inline-block + width:100% だと float のボタン群と同じ行に入れず
+   ボタンの下へ押し下げられて先頭に空行が見えるため、block にして
+   通常表示と同じく先頭行がボタンの左に回り込むようにする */
 pre.highlight.ruby[data-editing="true"] > code {
-  display: inline-block;
-  width: 100%;
+  display: block;
 }
 pre.highlight.ruby[data-editing="true"] > code:focus {
   outline: none;
 }
 
-/* for COPY */
+/* for COPY(highlight__button-group の中に入る) */
 .highlight__copy-button {
-  float: right;
-  margin: 0 -1.1em 0.25em 0.5em;
+  display: inline-block;
   padding: 0.25em 0.5em;
   background: #DDD;
   opacity: 0.75;