Repository: h2oai/wave
File: studio/studio.js (JavaScript)

Code before:
      this.folder._labelCache = null
    },
    handleSelect(e) {
      const
        labelLength = this.folder.label.length,
        extensionLength = this.folder.label.split('.').pop().length
      this.$$nextTick(() => {
        e.target.setSelectionRange(0, labelLength - (extensionLength ? extensionLength + 1 : 0))
      })
    },
    onClick(e) {
      this.clickCount++
      if (this.folder.action === 'rename') return
      else if (this.clickCount === 1) {
        // open on single click
        if (!document.querySelector('.menu')) this.isSubtreeOpen = !this.isSubtreeOpen
        eventBus.emit('documentClick', e)
        if (!this.folder.isFolder) {
          store.activeFile = this.folder.path
          window.parent.wave.emit('file_viewer', 'open', this.folder.path)
        }
        this.timer = setTimeout(() => { this.clickCount = 0 }, 300)
      } else {
        // rename on double click
        this.rename()
        clearTimeout(this.timer)
        this.clickCount = 0
      }
    },
  },
  computed: {
    getIconSrc() {
      if (this.folder.isFolder) return this.isSubtreeOpen ? '/assets/img/folder-open.svg' : '/assets/img/folder.svg'
      if (this.folder.path) return `/assets/img/file-icons/$${getIconLabel(this.folder.path.split('.').pop())}.svg`
    },
    getItemLeftPadding() {
      if (this.folder.path) return (this.folder.path.split('/').length - (this.folder.action === 'new' ? 0 : 1)) * 0.7 + 'rem'
    }
  },
  directives: {
    focus: {
      mounted: (el) => el.focus()
    }
  },
  template: `
<li v-if="folder.label !== '' || folder.action === 'new'">
  <span @contextmenu.prevent="onContextMenu" @click.stop="onClick" :class="{ 'tree-item-active': store.activeFile == folder.path, 'tree-item': true }" ref="sample" :style="{paddingLeft: getItemLeftPadding}">
    <img class="tree-item-img" :src="getIconSrc" :alt="folder.isFolder ? 'Folder' : 'File'" />
    <input v-if="folder.action === 'new'" v-focus type="text" spellcheck="false" v-model="folder.label" @keyup.enter="onCreated" @keyup.esc="onCreateCanceled" @blur="onCreateCanceled">
    <input v-else-if="folder.action === 'rename'" v-focus type="text" spellcheck="false" v-model="folder.label" @keyup.enter="onRenamed" @keyup.esc="onRenameCanceled" @blur="onRenameCanceled" @focus="handleSelect">
    <span class="tree-item-label" v-else>{{folder.label}}</span>

Review comment (suggestion):
Nit: Would this work?
```suggestion
<li v-if="!folder.label || folder.action === 'new'">
```

Code after:
      this.$$nextTick(() => {
        e.target.setSelectionRange(0, labelLength - (extensionLength ? extensionLength + 1 : 0))
      })
    },
    onClick(e) {
      if (this.folder.action === 'rename') return
      if (!document.querySelector('.menu')) this.isSubtreeOpen = !this.isSubtreeOpen
      eventBus.emit('documentClick', e)
      if (!this.folder.isFolder) {
        store.activeFile = this.folder.path
        window.parent.wave.emit('file_viewer', 'open', this.folder.path)
      }
    },
  },
  template: `
<li v-if="folder.label || folder.action === 'new'">
  <span @contextmenu.prevent="onContextMenu" @click.stop="onClick" :class="{ 'tree-item-active': store.activeFile == folder.path, 'tree-item': true }" ref="sample" :style="{paddingLeft: getItemLeftPadding(folder)}">
    <img class="tree-item-img" :src="getIconSrc(folder, isSubtreeOpen)" :alt="folder.isFolder ? 'Folder' : 'File'" />
    <input v-if="folder.action === 'new'" v-focus type="text" spellcheck="false" v-model="folder.label" @keyup.enter="onCreated" @keyup.esc="onCreateCanceled" @blur="onCreateCanceled">
    <input v-else-if="folder.action === 'rename'" v-focus type="text" spellcheck="false" v-model="folder.label" @keyup.enter="onRenamed" @keyup.esc="onRenameCanceled" @blur="onRenameCanceled" @focus="handleSelect">
    <span v-else class="tree-item-label">{{folder.label}}</span>
  </span>
    <ul v-if="isSubtreeOpen && folder.isFolder && folder.children">
      <li v-for="folder in folder.children">
        <Tree :folder="folder"></Tree>
      </li>
    </ul>  
</li>
    `}
const Menu = {
  mounted() {
    this.bus.on('menu', ({ e, folder }) => {
      this.menuPosition = { x: e.x + 10, y: e.y - 20 }
      this.folder = folder
    })
    this.bus.on('documentClick', e => { if (!this.$$el.contains(e.target)) this.menuPosition = null })
  },
  data() {
    return {
      menuPosition: null,
      folder: null
    }
  },
  methods: {
    newFile() {
      eventBus.emit('openFolder')
      this.folder.children.push({ label: '', action: 'new', isFolder: false, path: this.folder.path })
      this.menuPosition = null
    },
    newFolder() {
      eventBus.emit('openFolder')