Merge pull request #226 from znz/clipboard-api

COPY ボタンを Clipboard API 化する

Author: znz

test/js/test_script.mjs

@@ -15,20 +15,28 @@ function assert(cond, message) {
 }
 
 // --- minimal fake DOM -------------------------------------------------
-// script.js only assigns elem.innerHTML across elements and to a fresh
-// textarea, so innerHTML is modeled as an opaque snapshot (string or
-// {ownText, children}) instead of parsed HTML.
+// script.js only assigns elem.innerHTML across elements, so innerHTML is
+// modeled as an opaque snapshot (string or {ownText, children}) instead of
+// parsed HTML.
 class FakeElement {
   constructor(tag, className = '', text = '') {
     this.tagName = tag.toUpperCase()
     this.className = className
     this.ownText = text
     this.children = []
     this.onclick = null
+    this.value = ''
+    const classes = new Set()
+    this.classList = {
+      add(c) { classes.add(c) },
+      remove(c) { classes.delete(c) },
+      contains(c) { return classes.has(c) },
+    }
   }
   setAttribute(name, value) {
     if (name === 'class') this.className = value
   }
+  select() {}
   appendChild(child) {
     this.children.push(child)
     return child
@@ -84,6 +92,7 @@ class FakeElement {
 function makeDocument(elements) {
   return {
     _elements: elements,
+    body: new FakeElement('body'),
     createElement(tag) { return new FakeElement(tag) },
     getElementsByClassName(name) {
       return this._elements.filter(e => e.className.split(' ').indexOf(name) >= 0)
@@ -99,44 +108,72 @@ function makeDocument(elements) {
 const here = import.meta.url.replace(/^file:\/\//, '').replace(/\/[^/]*$/, '')
 const source = std.loadFile(here + '/../../theme/default/script.js')
 
-function runOnload(elements) {
+function runOnload(elements, navigatorFake) {
   globalThis.document = makeDocument(elements)
   globalThis.window = { setTimeout() { return 0 } }
+  globalThis.navigator = navigatorFake || {}
   ;(0, eval)(source)
   globalThis.window.onload()
   return elements
 }
 
+// Clipboard API を捕捉する navigator フェイク
+function clipboardSpy() {
+  const written = []
+  return {
+    written,
+    navigator: {
+      clipboard: {
+        writeText(text) {
+          written.push(text)
+          return Promise.resolve()
+        },
+      },
+    },
+  }
+}
+
+// クリックの Promise 連鎖(writeClipboard().then)を流すための待ち
+async function settle() {
+  await 0
+  await 0
+}
+
 // 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])
-  assert(pre.childByClass('highlight__copy-button') !== null,
-         'pre.highlight.ruby gets a COPY button')
-  assert(pre.firstChild === pre.childByClass('highlight__copy-button'),
-         'COPY button is prepended as the first child')
-  const copyText = pre.childByClass('highlight__copy-text')
-  assert(copyText !== null && copyText.textContent === 'puts 1\n',
-         'copy text preserves the sample code')
+  runOnload([pre], spy.navigator)
+  const btn = pre.childByClass('highlight__copy-button')
+  assert(btn !== null, 'pre.highlight.ruby gets a COPY button')
+  assert(pre.firstChild === btn, 'COPY button is prepended as the first child')
+  btn.onclick()
+  await settle()
+  assert(spy.written.length === 1 && spy.written[0] === 'puts 1\n',
+         'clicking COPY writes the sample code via the Clipboard API')
+  assert(btn.classList.contains('copied'),
+         'the copied indicator is shown after a successful write')
 }
 
 // A plain <pre> (no language fence, //emlist{ origin) also gets the button
 {
+  const spy = clipboardSpy()
   const pre = new FakeElement('pre', '', 'ary = []\n')
-  runOnload([pre])
-  assert(pre.childByClass('highlight__copy-button') !== null,
-         'plain <pre> without highlight class gets a COPY button')
-  const copyText = pre.childByClass('highlight__copy-text')
-  assert(copyText !== null && copyText.textContent === 'ary = []\n',
-         'plain <pre> copy text preserves the block content')
+  runOnload([pre], spy.navigator)
+  const btn = pre.childByClass('highlight__copy-button')
+  assert(btn !== null, 'plain <pre> without highlight class gets a COPY button')
+  btn.onclick()
+  await settle()
+  assert(spy.written[0] === 'ary = []\n',
+         'plain <pre> copy writes the block content')
 }
 
 // A non-ruby language fence keeps the button
 {
   const pre = new FakeElement('pre', 'highlight c')
   pre.appendChild(new FakeElement('code', '', 'VALUE v;\n'))
-  runOnload([pre])
+  runOnload([pre], clipboardSpy().navigator)
   assert(pre.childByClass('highlight__copy-button') !== null,
          'pre.highlight.c gets a COPY button')
 }
@@ -145,31 +182,63 @@ function runOnload(elements) {
 {
   const div = new FakeElement('div', 'highlight')
   const pre = new FakeElement('pre', '')
-  runOnload([div, pre])
+  runOnload([div, pre], clipboardSpy().navigator)
   assert(div.childByClass('highlight__copy-button') === null,
          'non-pre element does not get a COPY button')
 }
 
 // The caption is excluded from the copied text
 {
+  const spy = clipboardSpy()
   const pre = new FakeElement('pre', 'highlight ruby')
   pre.appendChild(new FakeElement('span', 'caption', '例'))
   pre.appendChild(new FakeElement('code', '', 'p 42\n'))
-  runOnload([pre])
-  const copyText = pre.childByClass('highlight__copy-text')
-  assert(copyText !== null && copyText.textContent === 'p 42\n',
-         'caption text is excluded from the copy text')
+  runOnload([pre], spy.navigator)
+  pre.childByClass('highlight__copy-button').onclick()
+  await settle()
+  assert(spy.written[0] === 'p 42\n',
+         'caption text is excluded from the copied text')
   assert(pre.childByClass('caption') !== null,
          'caption itself stays visible in the sample')
 }
 
 // Leading blank lines are stripped, trailing ones squeezed to one
 {
+  const spy = clipboardSpy()
   const pre = new FakeElement('pre', '', '\n\nputs 1\n\n\n')
-  runOnload([pre])
-  const copyText = pre.childByClass('highlight__copy-text')
-  assert(copyText !== null && copyText.textContent === 'puts 1\n',
-         'copy text is trimmed (leading newlines dropped, trailing squeezed)')
+  runOnload([pre], spy.navigator)
+  pre.childByClass('highlight__copy-button').onclick()
+  await settle()
+  assert(spy.written[0] === 'puts 1\n',
+         'copied text is trimmed (leading newlines dropped, trailing squeezed)')
+}
+
+// Clipboard API が無い環境では textarea + execCommand にフォールバックする
+{
+  const pre = new FakeElement('pre', '', 'fallback code\n')
+  const elements = [pre]
+  globalThis.document = makeDocument(elements)
+  let captured = null
+  globalThis.document.execCommand = function (command) {
+    if (command === 'copy') {
+      const ta = globalThis.document.body.children.find(c => c.tagName === 'TEXTAREA')
+      captured = ta ? ta.value : null
+    }
+    return true
+  }
+  globalThis.window = { setTimeout() { return 0 } }
+  globalThis.navigator = {}   // clipboard なし
+  ;(0, eval)(source)
+  globalThis.window.onload()
+  const btn = pre.childByClass('highlight__copy-button')
+  btn.onclick()
+  await settle()
+  assert(captured === 'fallback code\n',
+         'without the Clipboard API the text is copied via textarea + execCommand')
+  assert(globalThis.document.body.children.length === 0,
+         'the fallback textarea is removed after copying')
+  assert(btn.classList.contains('copied'),
+         'the copied indicator is shown for the fallback path too')
 }
 
 if (failures > 0) {

theme/default/script.js

@@ -1,4 +1,27 @@
 (function() {
+  // クリップボードへのコピー。Clipboard API が使えない環境
+  // (非セキュアコンテキストや古いブラウザ)では従来の
+  // textarea + execCommand にフォールバックする
+  function writeClipboard(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text)
+    }
+    return new Promise(function(resolve, reject) {
+      const textarea = document.createElement('textarea')
+      textarea.setAttribute('class', 'highlight__copy-text')
+      textarea.value = text
+      document.body.appendChild(textarea)
+      textarea.select()
+      const ok = document.execCommand('copy')
+      document.body.removeChild(textarea)
+      if (ok) {
+        resolve()
+      } else {
+        reject(new Error('copy command failed'))
+      }
+    })
+  }
+
   window.onload = function() {
     // 言語指定なしのコードブロックは class を持たない素の <pre> になるため、
     // highlight クラスではなく pre 要素全体に COPY ボタンを付ける
@@ -13,22 +36,21 @@
         const caption = tempDiv.getElementsByClassName("caption")[0]
         if (caption) tempDiv.removeChild(caption)
 
-        // textarea for preserving the copy text
-        const copyText = document.createElement('textarea')
-        copyText.setAttribute('class', 'highlight__copy-text')
-        copyText.innerHTML = tempDiv.textContent.replace(/^\n+/, "").replace(/\n{2,}$/, "\n")
-        elem.appendChild(copyText)
+        // 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(){
-          copyText.select()
-          document.execCommand("copy")
-          btn.classList.add("copied")
-          window.setTimeout(function() { btn.classList.remove("copied") }, 1000)
+          writeClipboard(text).then(function() {
+            btn.classList.add("copied")
+            window.setTimeout(function() { btn.classList.remove("copied") }, 1000)
+          }).catch(function() {
+            // コピー失敗時は従来どおり何も表示しない
+          })
         }
       }
     )