WebからコピペしたらSB記法に変換する
まだまだ要検証なんだけど、なんとなく動いたから置いておきます。
相変わらず自己流で書いてるので手探りのゴリ押しです！
そしてFirefoxでは動かない。
WebページからコピーしてScrapboxにペーストしてみた
このスクリプトを使うと、ペースト時にHTMLからScrapboxの記法に変換するようになるので、
プレーンテキストで貼り付けたいときは右クリックメニューから「プレーンテキストとして貼り付け」等を使ってね。
ショートカットはだいたい
Ctrl + Shift + V だと思う? スマホやタブレットで貼り付けする場合はどうやって回避したらいいのかな…
今後もちょこちょこ直すと思うので、使ってみたい人はインポートのほうがおすすめ。
import.jsimport '/api/code/scrasobox/WebからコピペしたらSB記法に変換する/script.js'script.jsif (sessionStorage.getItem('scrasobox-paste') !== 'true') {
document.addEventListener('paste', event => {
const type = 'text/html'
const d = event.clipboardData
if (d.types && d.types.indexOf('Files') == -1 && -1 < d.types.indexOf(type)) {
event.preventDefault()
const dom = new DOMParser().parseFromString(d.getData(type), type)
const ng = text => text.trim().replace(/[\[\]\n]/g, ' ')
const q = query => dom.querySelectorAll(query)
const f = (text, deco) =>
[].concat(text.split(/\n/)
.filter(l => l.trim()).map(l => `[${deco} ${l.trim()}]` )).join('')
q('pre').forEach(d => {
d.innerText = 'code:code.*\n' + d.innerText.split('\n').map(l => ` ${l}`).join('\n') })
q('h3').forEach(d => { d.innerText = f(d.innerText, '**') })
q('h2').forEach(d => { d.innerText = f(d.innerText, '***') })
q('h1').forEach(d => { d.innerText = f(d.innerText, '****') })
q('em, i').forEach(d => { d.innerText = f(d.innerText, '/') })
q('strong, b').forEach(d => { d.innerText = f(d.innerText, '*') })
q('a[href] img[src]').forEach(d => {
d.closest('a').outerHTML = `[${d.src.trim()}#.png ${d.closest('a').href}]` })
q('a[href]').forEach(d => { d.outerHTML = `[${d.href} ${ng(d.text).trim()}]` })
q('img[src]').forEach(d => { d.outerHTML = `[${d.src.trim()}#.png]` })
q('iframe[src*="//www.youtube.com/embed/"]').forEach(d => {
d.outerHTML = `[https://www.youtube.com/watch?v=${d.src.split('/embed/')[1].split('?')[0]}]` })
q('code').forEach(d => { d.innerText = '`' + d.innerText + '`' })
let depth = -1
const li = node => {
depth++
node.querySelectorAll('li').forEach(n => li(n))
return node.innerHTML = '@sp@'.repeat(depth--) + node.innerHTML
}
li(dom.body)
const div = document.createElement('div')
div.innerHTML = dom.body.innerHTML
document.body.appendChild(div)
const range = document.createRange()
range.selectNode(div)
//const text = range.toString()
const text = div.innerText
document.execCommand('insertText', null, text.replace(/(\s*\n){3,}/g, '\n\n').replace(/@sp@/gi, ' '))
document.body.removeChild(div)
}
})
sessionStorage.setItem('scrasobox-paste', true)
}
window.addEventListener('unload', () => { sessionStorage.setItem('scrasobox-paste', false) })
初出 2018-04-04
2018-06-12 うまく変換できなかったパターンや不具合を直しました
2018-06-18 改行のパターンによっては空行の省略が効いてなかったのを修正
2018-06-22 画像を貼り付けるとGyazoのアップロードと重複してたのを直したつもり
2018-07-24 CSSで
text-transform が指定されていると変換結果が不正になるのを修正