@electerm/electerm-react 3.15.175 → 3.15.186

package/client/components/sftp/address-bookmark-item.jsx

@@ -5,6 +5,7 @@ import {
 import {
   Tag
 } from 'antd'
+import { isDropAfterHalf, setDropIndicator, clearDropIndicator } from '../../common/drop-position'
 
 export default class AddrBookmarkItem extends Component {
   handleClick = () => {
@@ -31,6 +32,15 @@ export default class AddrBookmarkItem extends Component {
 
   handleDragOver = e => {
     e.preventDefault()
+    // only the hovered item should show an indicator
+    document.querySelectorAll(
+      '.addr-bookmark-item.dnd-before, .addr-bookmark-item.dnd-after'
+    ).forEach(el => clearDropIndicator(el))
+    setDropIndicator(e.currentTarget, isDropAfterHalf(e, e.currentTarget))
+  }
+
+  handleDragLeave = e => {
+    clearDropIndicator(e.currentTarget)
   }
 
   handleDragStart = e => {
@@ -39,13 +49,15 @@ export default class AddrBookmarkItem extends Component {
 
   handleDrop = e => {
     e.preventDefault()
+    clearDropIndicator(e.currentTarget)
     const { store } = window
     const [host, idDragged] = e.dataTransfer.getData('idDragged').split('#')
-    const idDrop = e.target.getAttribute('data-id').split('#')[1]
+    const idDrop = e.currentTarget.getAttribute('data-id').split('#')[1]
     const dataName = host
       ? 'addressBookmarks'
       : 'addressBookmarksLocal'
-    store.adjustOrder(dataName, idDragged, idDrop)
+    const insertAfter = isDropAfterHalf(e, e.currentTarget)
+    store.adjustOrder(dataName, idDragged, idDrop, insertAfter)
   }
 
   render () {
@@ -64,6 +76,7 @@ export default class AddrBookmarkItem extends Component {
         data-id={id}
         draggable
         onDragOver={this.handleDragOver}
+        onDragLeave={this.handleDragLeave}
         onDragStart={this.handleDragStart}
         onDrop={this.handleDrop}
       >

package/client/components/sftp/code-compare-utils.js

@@ -0,0 +1,260 @@
+/**
+ * code compare utilities
+ * - binary file detection (by extension + content)
+ * - line splitting and size limits
+ * - file extension to Prism language mapping for syntax highlighting
+ */
+
+import { getFileExt } from './file-read'
+import { maxEditFileSize } from '../../common/constants'
+
+// extensions that are definitely binary and should never be compared as text
+const binaryExtMap = {
+  png: 1,
+  jpg: 1,
+  jpeg: 1,
+  gif: 1,
+  bmp: 1,
+  ico: 1,
+  webp: 1,
+  tiff: 1,
+  tif: 1,
+  heic: 1,
+  heif: 1,
+  avif: 1,
+  raw: 1,
+  cr2: 1,
+  nef: 1,
+  arw: 1,
+  psd: 1,
+  ai: 1,
+  eps: 1,
+  zip: 1,
+  tar: 1,
+  gz: 1,
+  tgz: 1,
+  bz2: 1,
+  xz: 1,
+  lz: 1,
+  lzma: 1,
+  '7z': 1,
+  rar: 1,
+  jar: 1,
+  war: 1,
+  ear: 1,
+  apk: 1,
+  aab: 1,
+  xpi: 1,
+  crx: 1,
+  exe: 1,
+  dll: 1,
+  so: 1,
+  dylib: 1,
+  bin: 1,
+  class: 1,
+  o: 1,
+  obj: 1,
+  a: 1,
+  lib: 1,
+  pyc: 1,
+  pyo: 1,
+  node: 1,
+  wasm: 1,
+  swf: 1,
+  pdf: 1,
+  doc: 1,
+  docx: 1,
+  xls: 1,
+  xlsx: 1,
+  ppt: 1,
+  pptx: 1,
+  odt: 1,
+  ods: 1,
+  odp: 1,
+  mp3: 1,
+  mp4: 1,
+  avi: 1,
+  mov: 1,
+  wmv: 1,
+  flv: 1,
+  ogg: 1,
+  wav: 1,
+  aac: 1,
+  m4a: 1,
+  m4v: 1,
+  webm: 1,
+  mkv: 1,
+  mpg: 1,
+  mpeg: 1,
+  '3gp': 1,
+  opus: 1,
+  db: 1,
+  sqlite: 1,
+  sqlite3: 1,
+  mdb: 1,
+  accdb: 1,
+  iso: 1,
+  img: 1,
+  dmg: 1,
+  vmdk: 1,
+  qcow2: 1,
+  vdi: 1,
+  wim: 1,
+  ttf: 1,
+  otf: 1,
+  woff: 1,
+  woff2: 1,
+  eot: 1,
+  pak: 1,
+  dat: 1,
+  bson: 1,
+  msg: 1,
+  eml: 1,
+  pdb: 1,
+  ax: 1,
+  nib: 1,
+  mo: 1
+}
+
+// map file extensions to Prism / refractor language names
+// only includes languages that react-diff-viewer-continued can highlight
+const extToLangMap = {
+  js: 'javascript',
+  jsx: 'jsx',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  ts: 'typescript',
+  tsx: 'tsx',
+  json: 'json',
+  html: 'html',
+  htm: 'html',
+  xml: 'xml',
+  svg: 'xml',
+  css: 'css',
+  scss: 'scss',
+  sass: 'sass',
+  less: 'less',
+  styl: 'stylus',
+  py: 'python',
+  rb: 'ruby',
+  go: 'go',
+  rs: 'rust',
+  java: 'java',
+  kt: 'kotlin',
+  c: 'c',
+  h: 'c',
+  cpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  hpp: 'cpp',
+  cs: 'csharp',
+  php: 'php',
+  swift: 'swift',
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  fish: 'bash',
+  yml: 'yaml',
+  yaml: 'yaml',
+  toml: 'toml',
+  md: 'markdown',
+  markdown: 'markdown',
+  sql: 'sql',
+  graphql: 'graphql',
+  gql: 'graphql',
+  dockerfile: 'docker',
+  vue: 'markup',
+  svelte: 'markup',
+  lua: 'lua',
+  r: 'r',
+  rkt: 'racket',
+  clj: 'clojure',
+  cljs: 'clojure',
+  edn: 'clojure',
+  scala: 'scala',
+  pl: 'perl',
+  pm: 'perl',
+  dart: 'dart',
+  ex: 'elixir',
+  exs: 'elixir',
+  erl: 'erlang',
+  hs: 'haskell',
+  nim: 'nim',
+  zig: 'zig',
+  v: 'verilog',
+  vim: 'vim',
+  ini: 'properties',
+  conf: 'properties',
+  cfg: 'properties',
+  properties: 'properties'
+}
+
+// upper bound of lines to diff, keeps memory usage reasonable
+// react-diff-viewer-continued uses jsdiff's Myers algorithm, which is far more
+// memory-efficient than the previous hand-written LCS DP table, so we can
+// safely support larger files.
+export const maxDiffLines = 10000
+
+export function getExt (name = '') {
+  return (getFileExt(name).ext || '').toLowerCase()
+}
+
+export function isBinaryExt (name = '') {
+  return binaryExtMap[getExt(name)] === 1
+}
+
+/**
+ * Whether the two files can be compared as text/code at all.
+ * Only non-directory, non-binary-ext, not-too-large files qualify.
+ */
+export function canCodeCompare (file1 = {}, file2 = {}) {
+  if (!file1 || !file2) {
+    return false
+  }
+  if (file1.isDirectory || file2.isDirectory) {
+    return false
+  }
+  if (isBinaryExt(file1.name) || isBinaryExt(file2.name)) {
+    return false
+  }
+  if ((file1.size || 0) > maxEditFileSize || (file2.size || 0) > maxEditFileSize) {
+    return false
+  }
+  return true
+}
+
+/**
+ * Check whether already-decoded text content looks binary (contains null bytes).
+ * utf8-decoded binary data usually contains \u0000.
+ */
+export function looksBinary (text = '') {
+  return text.includes('\u0000')
+}
+
+export function splitLines (text = '') {
+  if (text === '') {
+    return []
+  }
+  return text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n')
+}
+
+/**
+ * Map a filename to a Prism/refractor language name
+ * for syntax highlighting in the diff viewer.
+ * Returns undefined if no mapping is found.
+ */
+export function getHighlightLanguage (name = '') {
+  const ext = getExt(name)
+  if (!ext) {
+    // check for special filenames
+    const base = (name || '').toLowerCase()
+    if (base === 'dockerfile') {
+      return 'docker'
+    }
+    if (base === 'makefile' || base === 'gnumakefile') {
+      return 'makefile'
+    }
+    return undefined
+  }
+  return extToLangMap[ext]
+}

package/client/components/sftp/code-compare.jsx

@@ -0,0 +1,183 @@
+/**
+ * code compare component
+ * reads both file contents and renders a side-by-side diff
+ * using react-diff-viewer-continued (word-level diff + syntax highlight)
+ */
+
+import { useState, useEffect, useMemo } from 'react'
+import { Spin } from 'antd'
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
+import resolve from '../../common/resolve'
+import { refs } from '../common/ref'
+import { typeMap } from '../../common/constants'
+import isColorDark from '../../common/is-color-dark'
+import {
+  looksBinary,
+  isBinaryExt,
+  splitLines,
+  maxDiffLines,
+  getHighlightLanguage
+} from './code-compare-utils'
+import './code-compare.styl'
+
+const e = window.translate
+
+export default function CodeCompare (props) {
+  const { file1, file2, tab = {} } = props
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [text1, setText1] = useState('')
+  const [text2, setText2] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    async function load () {
+      setLoading(true)
+      setError('')
+      setText1('')
+      setText2('')
+      // check binary by extension before reading
+      if (isBinaryExt(file1 && file1.name) || isBinaryExt(file2 && file2.name)) {
+        setError('binary file - not supported for code compare')
+        setLoading(false)
+        return
+      }
+      try {
+        const [t1, t2] = await Promise.all([
+          readFileContent(file1, tab),
+          readFileContent(file2, tab)
+        ])
+        if (cancelled) {
+          return
+        }
+        if (looksBinary(t1) || looksBinary(t2)) {
+          setError(e('binary file') + ' - ' + e('not supported for code compare'))
+          setLoading(false)
+          return
+        }
+        const a = splitLines(t1)
+        const b = splitLines(t2)
+        if (a.length > maxDiffLines || b.length > maxDiffLines) {
+          setError(e('file too large for code compare') + ' (max ' + maxDiffLines + ' ' + e('lines') + ')')
+          setLoading(false)
+          return
+        }
+        setText1(t1)
+        setText2(t2)
+      } catch (err) {
+        if (!cancelled) {
+          setError(err && err.message ? err.message : String(err))
+        }
+      }
+      if (!cancelled) {
+        setLoading(false)
+      }
+    }
+    load()
+    return () => {
+      cancelled = true
+    }
+  }, [file1, file2, tab])
+
+  const { useDarkTheme, styles } = useMemo(() => {
+    const themeConf = window.store?.getUiThemeConfig?.() || {}
+    const dark = isColorDark(themeConf.main || '#121214')
+    const vars = {
+      diffViewerBackground: themeConf['main-light'] || (dark ? '#1e1e1e' : '#fff'),
+      diffViewerColor: themeConf.text || (dark ? '#ddd' : '#333'),
+      gutterBackground: themeConf['main-dark'] || (dark ? '#2a2a2a' : '#f5f5f5'),
+      gutterColor: themeConf['text-dark'] || (dark ? '#888' : '#999'),
+      addedBackground: themeConf.success || '#06D6A0',
+      addedColor: dark ? '#06D6A0' : '#058f6b',
+      removedBackground: themeConf.error || '#EF476F',
+      removedColor: dark ? '#EF476F' : '#c93659',
+      wordAddedBackground: 'rgba(6, 214, 160, 0.25)',
+      wordRemovedBackground: 'rgba(239, 71, 111, 0.25)',
+      addedGutterBackground: 'rgba(6, 214, 160, 0.15)',
+      removedGutterBackground: 'rgba(239, 71, 111, 0.15)',
+      codeFoldBackground: themeConf['main-dark'] || (dark ? '#252525' : '#f0f0f0'),
+      codeFoldContentColor: themeConf['text-dark'] || (dark ? '#666' : '#bbb'),
+      emptyLineBackground: themeConf['main-dark'] || (dark ? '#1a1a1a' : '#fafafa'),
+      diffViewerTitleBackground: themeConf['main-dark'] || (dark ? '#2a2a2a' : '#f0f0f0'),
+      diffViewerTitleColor: themeConf.text || (dark ? '#ddd' : '#333'),
+      diffViewerTitleBorderColor: themeConf.primary || '#08c'
+    }
+    return {
+      useDarkTheme: dark,
+      styles: {
+        variables: {
+          light: vars,
+          dark: vars
+        },
+        diffContainer: {
+          fontFamily: "'Maple Mono', 'Menlo', 'Consolas', monospace",
+          fontSize: '13px',
+          lineHeight: '1.5'
+        }
+      }
+    }
+  }, [])
+
+  const highlightLanguage = useMemo(() => {
+    const lang1 = getHighlightLanguage(file1?.name)
+    const lang2 = getHighlightLanguage(file2?.name)
+    return lang1 === lang2 ? lang1 : undefined
+  }, [file1, file2])
+
+  const name1 = file1 ? file1.name : ''
+  const name2 = file2 ? file2.name : ''
+  const identical = text1 === text2 && !loading && !error
+
+  let body = null
+  if (error) {
+    body = <div className='code-compare-message'>{error}</div>
+  } else if (identical) {
+    body = <div className='code-compare-message'>{e('files are identical')}</div>
+  } else {
+    body = (
+      <div className='code-compare-body'>
+        <ReactDiffViewer
+          oldValue={text1}
+          newValue={text2}
+          splitView
+          compareMethod={DiffMethod.WORDS}
+          useDarkTheme={useDarkTheme}
+          styles={styles}
+          leftTitle={name1}
+          rightTitle={name2}
+          hideLineNumbers={false}
+          showDiffOnly
+          extraLinesSurroundingDiff={3}
+          hideSummary
+          codeFoldMessageRenderer={() => <span />}
+          disableWorker
+          highlightLanguage={highlightLanguage}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className='code-compare-wrap'>
+      <Spin spinning={loading}>
+        {body}
+      </Spin>
+    </div>
+  )
+}
+
+async function readFileContent (file, tab) {
+  if (!file) {
+    return ''
+  }
+  const p = resolve(file.path, file.name)
+  if (file.type === typeMap.remote) {
+    const sftpEntry = refs.get('sftp-' + tab.id)
+    const sftp = sftpEntry && sftpEntry.sftp
+    if (!sftp) {
+      throw new Error(e('sftp not ready'))
+    }
+    return sftp.readFile(p)
+  }
+  return window.fs.readFile(p)
+}

package/client/components/sftp/code-compare.styl

@@ -0,0 +1,13 @@
+.code-compare-wrap
+  width 100%
+
+.code-compare-body
+  max-height 70vh
+  overflow auto
+  border 1px solid var(--main-darker)
+  border-radius 4px
+
+.code-compare-message
+  padding 24px
+  text-align center
+  color var(--text-dark)

package/client/components/sftp/file-compare-modal.jsx

@@ -1,8 +1,10 @@
 /**
  * file compare modal - shows side by side comparison of two files' attributes
+ * and an optional code/content diff tab for text files
  */
 
-import React from 'react'
+import React, { lazy, Suspense } from 'react'
+import { Spin, Tabs } from 'antd'
 import Modal from '../common/modal'
 import resolve from '../../common/resolve'
 import time from '../../common/time'
@@ -15,6 +17,15 @@ import './file-compare-modal.styl'
 const e = window.translate
 const formatTime = time
 
+// lazy load the code compare component so it is only bundled when needed
+const CodeCompare = lazy(() => import('./code-compare'))
+
+const Loading = () => (
+  <div style={{ padding: 40, textAlign: 'center' }}>
+    <Spin />
+  </div>
+)
+
 export default class FileCompareModal extends React.PureComponent {
   state = {
     visible: false,
@@ -22,7 +33,8 @@ export default class FileCompareModal extends React.PureComponent {
     file2: {},
     tab: null,
     uidTree: {},
-    gidTree: {}
+    gidTree: {},
+    activeTab: 'info'
   }
 
   componentDidMount () {
@@ -32,7 +44,8 @@ export default class FileCompareModal extends React.PureComponent {
   showFileCompareModal (data) {
     this.setState({
       ...data,
-      visible: true
+      visible: true,
+      activeTab: 'info'
     })
   }
 
@@ -40,36 +53,17 @@ export default class FileCompareModal extends React.PureComponent {
     this.setState({
       file1: {},
       file2: {},
-      visible: false
+      visible: false,
+      activeTab: 'info'
     })
   }
 
-  render () {
-    const {
-      visible,
-      file1,
-      file2,
-      tab = {},
-      uidTree = {},
-      gidTree = {}
-    } = this.state
-    if (!visible) {
-      return null
-    }
+  renderInfo (file1, file2, tab, uidTree, gidTree) {
     const {
       host,
       port,
       username
     } = tab
-    const title = e('compare')
-    const ps = {
-      open: visible,
-      width: 800,
-      title,
-      footer: null,
-      onCancel: this.onClose
-    }
-
     const fp1 = resolve(file1.path, file1.name)
     const fp2 = resolve(file2.path, file2.name)
     const ffp1 = file1.type === 'local'
@@ -111,8 +105,8 @@ export default class FileCompareModal extends React.PureComponent {
       ],
       [
         e('size'),
-        file1.isDirectory ? '-' : filesize(file1.size || 0),
-        file2.isDirectory ? '-' : filesize(file2.size || 0)
+        file1.isDirectory ? '-' : `${filesize(file1.size || 0)}(${file1.size || 0}byte)`,
+        file2.isDirectory ? '-' : `${filesize(file2.size || 0)}(${file2.size || 0}byte)`
       ],
       [e('mode'), permission1, permission2],
       [e('fullPath'), ffp1, ffp2],
@@ -122,23 +116,74 @@ export default class FileCompareModal extends React.PureComponent {
       [e('modifyTime'), formatTime(file1.modifyTime), formatTime(file2.modifyTime)]
     ]
 
+    return (
+      <table className='file-compare-table'>
+        <tbody>
+          {rows.map(([label, v1, v2], i) => {
+            const same = String(v1 ?? '') === String(v2 ?? '')
+            const cls = same ? '' : 'file-compare-diff'
+            return (
+              <tr key={i}>
+                <td className='bold file-compare-label'>{label}</td>
+                <td className={cls}>{v1}</td>
+                <td className={cls}>{v2}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    )
+  }
+
+  render () {
+    const {
+      visible,
+      file1,
+      file2,
+      tab = {},
+      uidTree = {},
+      gidTree = {},
+      activeTab
+    } = this.state
+    if (!visible) {
+      return null
+    }
+    const title = e('compare')
+    const isCodeTab = activeTab === 'code'
+    const width = isCodeTab ? '90%' : 800
+    const ps = {
+      open: visible,
+      width,
+      title,
+      footer: null,
+      onCancel: this.onClose
+    }
+
+    const tabItems = [
+      {
+        key: 'info',
+        label: e('info'),
+        children: this.renderInfo(file1, file2, tab, uidTree, gidTree)
+      },
+      {
+        key: 'code',
+        label: e('code'),
+        children: (
+          <Suspense fallback={<Loading />}>
+            <CodeCompare file1={file1} file2={file2} tab={tab} />
+          </Suspense>
+        )
+      }
+    ]
+
     return (
       <Modal {...ps}>
-        <table className='file-compare-table'>
-          <tbody>
-            {rows.map(([label, v1, v2], i) => {
-              const same = String(v1 ?? '') === String(v2 ?? '')
-              const cls = same ? '' : 'file-compare-diff'
-              return (
-                <tr key={i}>
-                  <td className='bold file-compare-label'>{label}</td>
-                  <td className={cls}>{v1}</td>
-                  <td className={cls}>{v2}</td>
-                </tr>
-              )
-            })}
-          </tbody>
-        </table>
+        <Tabs
+          activeKey={activeTab}
+          onChange={key => this.setState({ activeTab: key })}
+          items={tabItems}
+          destroyInactiveTabPane={false}
+        />
       </Modal>
     )
   }