fix stripInitialIndent for tab indentation

webview/index.js

@@ -4,6 +4,7 @@
  let target = 'container'
  let transparentBackground = false
  let backgroundColor = '#f2f2f2'
+ let fontFamily
 
  vscode.postMessage({
  type: 'getAndUpdateCacheAndSettings'
@@ -14,14 +15,15 @@
  const obturateur = document.getElementById('save')
 
  snippetContainerNode.style.opacity = '1'
- const oldState = vscode.getState();
+ const oldState = vscode.getState()
  if (oldState && oldState.innerHTML) {
  snippetNode.innerHTML = oldState.innerHTML
  }
 
- const getInitialHtml = fontFamily => {
+ const getInitialHtml = ff => {
  const cameraWithFlashEmoji = String.fromCodePoint(128248)
- const monoFontStack = `${fontFamily},SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace`
+ const monoFontStack = `${ff},SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace`
+ fontFamily = monoFontStack
  return `<meta charset="utf-8"><div style="color: #d8dee9;background-color: #2e3440; font-family: ${monoFontStack};font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;"><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">0. Run command \`Polacode ${cameraWithFlashEmoji}\`</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">1. Copy some code</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">2. Paste into Polacode view</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div><div><span style="color: #8fbcbb;">console</span><span style="color: #eceff4;">.</span><span style="color: #88c0d0;">log</span><span style="color: #d8dee9;">(</span><span style="color: #eceff4;">'</span><span style="color: #a3be8c;">3. Click the button ${cameraWithFlashEmoji}</span><span style="color: #eceff4;">'</span><span style="color: #d8dee9;">)</span></div></div></div>`
  }
 
@@ -59,9 +61,8 @@
  function isDark(hexColor) {
  return getBrightness(hexColor) < 128
  }
- function getSnippetBgColor(html) {
- const match = html.match(/background-color: (#[a-fA-F0-9]+)/)
- return match ? match[1] : undefined;
+ function getSnippetBgColor(node) {
+ return node.style.backgroundColor
  }
 
  function updateEnvironment(snippetBgColor) {
@@ -76,38 +77,28 @@
  }
  }
 
- function getMinIndent(code) {
- const arr = code.split('\n')
-
- let minIndentCount = Number.MAX_VALUE
- for (let i = 0; i < arr.length; i++) {
- const wsCount = arr[i].search(/\S/)
- if (wsCount !== -1) {
- if (wsCount < minIndentCount) {
- minIndentCount = wsCount
- }
- }
- }
-
- return minIndentCount
- }
-
- function stripInitialIndent(html, indent) {
- const doc = new DOMParser().parseFromString(html, 'text/html')
- const initialSpans = doc.querySelectorAll('div > div span:first-child')
- for (let i = 0; i < initialSpans.length; i++) {
- initialSpans[i].textContent = initialSpans[i].textContent.slice(indent)
- }
- return doc.body.innerHTML
+ function stripInitialIndent(node) {
+ const initialSpans = Array.from(
+ node.querySelectorAll('div > div > span:first-child')
+ )
+ if (initialSpans.some(span => !span.textContent.match(/^\s+/))) return
+ const minIndent = Math.min(
+ ...initialSpans.map(span => span.textContent.match(/^\s+/)[0].length)
+ )
+ initialSpans.forEach(
+ span => (span.textContent = span.textContent.slice(minIndent))
+ )
  }
 
  document.addEventListener('paste', e => {
- const innerHTML = e.clipboardData.getData('text/html')
-
- const code = e.clipboardData.getData('text/plain')
- const minIndent = getMinIndent(code)
-
- const snippetBgColor = getSnippetBgColor(innerHTML)
+ const div = document.createElement('div')
+ div.innerHTML = e.clipboardData.getData('text/html')
+ const snippetDiv = div.querySelector('div')
+ snippetDiv.style.fontFamily = fontFamily
+ stripInitialIndent(snippetDiv)
+ const snippetBgColor = getSnippetBgColor(snippetDiv)
+ const innerHTML = div.innerHTML
+
  if (snippetBgColor) {
  vscode.postMessage({
  type: 'updateBgColor',
@@ -117,19 +108,14 @@
  })
  updateEnvironment(snippetBgColor)
  }
-
- if (minIndent !== 0) {
- snippetNode.innerHTML = stripInitialIndent(innerHTML, minIndent)
- } else {
- snippetNode.innerHTML = innerHTML
- }
+ snippetNode.innerHTML = innerHTML
 
  vscode.setState({ innerHTML })
  })
 
  obturateur.addEventListener('click', () => {
  if (target === 'container') {
- shootAll() 
+ shootAll()
  } else {
  shootSnippet()
  }
@@ -228,7 +214,6 @@
  } else {
  snippetContainerNode.style.background = 'none'
  }
-
  } else if (e.data.type === 'update') {
  document.execCommand('paste')
  } else if (e.data.type === 'restore') {
@@ -253,10 +238,10 @@
 })()
 
 function getRgba(hex, transparentBackground) {
- const bigint = parseInt(hex.slice(1), 16);
- const r = (bigint >> 16) & 255;
- const g = (bigint >> 8) & 255;
- const b = bigint & 255;
+ const bigint = parseInt(hex.slice(1), 16)
+ const r = (bigint >> 16) & 255
+ const g = (bigint >> 8) & 255
+ const b = bigint & 255
  const a = transparentBackground ? 0 : 1
  return `rgba(${r}, ${g}, ${b}, ${a})`
-}
+}