Snippet where second param depends on first

[jmthomas]

I'm using a custom autocomplete which is populated by the following API and used by our editor.

I figured out how to create a selection of options in the completer with the following syntax:

snippet = "ITEM ${1|ONE,TWO,THREE|}"

I have a setup where I want a second item that depends on the first. For example if you select 'ONE' for the first you should see '|A,B|' but if you select 'TWO' then '|C,D|', and 'THREE' is '|E,F|'. Obviously just examples but the gist is that the second parameter is dependent on the first. Is this possible?

[nightwing]

I don't see a way to implement this using textmate snippet syntax, but instead of it you could use a custom completer that would inspect editor content and return completions you want.

[yaroslav-tykhonchuk]

@nightwing Hi! Could you advise what is the best way to inspect editor content when deciding what completions to show? Thanks.

[nightwing]

Unfortunately the files in original question have moved, so i am not sure what was in them.
In a simple case you could use something like

var data = {
    ITEM: { 
        ONE: {
            A: 1,
            B: 1,
        },
        TWO: {
            C: 1,
            D: 1,
        },
        THREE: 1
    }, 
    FOO: {
        BAR: {
            BAZ: 1
        }
    }
}

editor.completers = [{
    getCompletions: function(editor, session, pos, prefix, callback) {
        var line = session.getLine(pos.row)
        var lineBefore = line.slice(0, pos.column)
        var parsedLine = lineBefore.split(";").pop().trimStart().split(/\s+/)
        var suggestions = data; 
        for (var i = 0; i < parsedLine.length - 1; i++) {
            var part = parsedLine[i]
            suggestions = part && suggestions && suggestions[part]
        }
        callback(null, Object.keys(suggestions || {}).map(x=> { 
            var hasChildren = typeof suggestions[x] == "object"
            return {value: x + (hasChildren ? " ": ";"), command: hasChildren && "startAutocomplete" } 
        }))
    }
}]

But if you need to parse much more complex syntax you'll have to use some kind of parser.

[jmthomas]

Thanks nightwing. I did something similar here:

import PacketCompleter from './packetCompleter.js'

export default class TlmCompleter extends PacketCompleter {
  constructor() {
    super('tlm', () => {
      // The data returned by the API is usable as-is, but grouping it this way makes it easier
      // to search through all the packets first, and then for an item within that packet.
      this.groupedPacketData = this.autocompleteData.reduce((groups, item) => {
        const packetName = item.caption.match(/\S+\s\S+/)[0] // First two tokens, e.g. "INST ADCS" OF "INST ADCS POSX"
        const itemName = item.snippet.replace(`${packetName} `, '')
        const amendedItem = {
          caption: itemName,
          snippet: itemName,
          meta: 'item',
        }

        if (groups[packetName]) {
          groups[packetName].push(amendedItem)
        } else {
          groups[packetName] = [amendedItem]
        }
        return groups
      }, {})
      this.packets = Object.keys(this.groupedPacketData).map((packetName) => {
        return {
          caption: packetName,
          snippet: packetName,
          meta: 'packet',
        }
      })
    })
  }

  // Override the parent's getCompletions to take advantage of the grouping by packet done in the constructor
  getCompletions = function (editor, session, position, prefix, callback) {
    let matches = []
    const lineBeforeCursor = session.doc.$lines[position.row].slice(
      0,
      position.column
    )
    if (
      this.keywordExpressions.some((regex) => lineBeforeCursor.match(regex))
    ) {
      const foundPacket = Object.keys(this.groupedPacketData).find(
        (packetName) => lineBeforeCursor.includes(packetName)
      )
      if (foundPacket) {
        matches = this.groupedPacketData[foundPacket]
      } else {
        matches = this.packets
      }
    }

    callback(null, matches)
  }
}

It's complex and relies on our API building up the correct snippets but it works.

[yaroslav-tykhonchuk]

Many thanks for sharing this, folks!

[jmthomas]

I didn't realize when I first started this implementation that snippets and autocompletion are basically mutually exclusive. You either insert a snippet or do the logic that @nightwing suggested to perform autocompletion. With that cleared up I set out to rewrite our completion utilizing both techniques. Again this is dependent on our own backend APIs which return the this.autocompleteData and this.tpiData but it illustrates how I got both to work.

  getCompletions = function (editor, session, pos, prefix, callback) {
    var line = session.getLine(pos.row)
    var lineBefore = line.slice(0, pos.column)
    var parsedLine = lineBefore.trimStart().split(/ (?![^<]*>)/)
    var suggestions = this.autocompleteData
    // If we have more than 1 we've selected a keyword
    if (parsedLine.length > 1) {
      suggestions = suggestions.find((x) => x.caption === parsedLine[0])
    }
    var result = {}
    var more = true
    // If we found suggestions and the suggestions have params
    // then we do logic to substitue suggestions using the actual
    // target, packet, item data
    if (suggestions && suggestions['params']) {
      // Check if this is the last autocomplete parameter
      if (suggestions['params'].length == parsedLine.length - 1) {
        more = false
      }
      // parsedLine.length - 2 because the last element is blank
      // e.g. ['LABELVALUE', 'INST', '']
      var current = suggestions['params'][parsedLine.length - 2]
      // Check for Target name, Packet name, and Item name and use
      // the tpiData to substitute actual values for suggestions
      if (current['Target name']) {
        suggestions = this.tpiData
      } else if (current['Packet name']) {
        suggestions = this.tpiData[parsedLine[1]]
      } else if (current['Item name']) {
        suggestions = this.tpiData[parsedLine[1]][parsedLine[2]]
      } else {
        // Not a special case so just use the param as is
        suggestions = current
      }

      result = Object.keys(suggestions || {}).map((x) => {
        var completions = {
          value: x + (more ? ' ' : ''),
          // We want the autoComplete to continue right up
          // to the last parameter
          command: more && 'startAutocomplete',
        }
        // Only add the meta (description) if we have a string
        // This prevents adding (Object) descriptions
        if (typeof suggestions[x] === 'string') {
          completions['meta'] = suggestions[x]
        }
        return completions
      })
    } else {
      // The snippet case where we just inject the snippet
      result = suggestions
    }
    callback(null, result)
  }

Here's some sample data that will work with the above:

// Test data useful for testing ScreenCompleter
var tpiData = {
  INST: {
    HEALTH_STATUS: {
      TEMP1: 'temp1 description',
      TEMP2: 1,
      TEMP3: 1,
      TEMP4: 1,
    },
    MECH: {
      SLPNL1: 1,
      SLPNL2: 1,
    },
  },
  SYSTEM: {
    PKT: {
      ITEM: 1,
    },
  },
}

// Test data useful for testing ScreenCompleter
var autocompleteData = [
  {
    caption: 'HORIZONTAL',
    meta: 'Places the widgets it encapsulates horizontally',
    snippet: 'HORIZONTAL ${1:<Margin>}',
  },
  {
    caption: 'LABELVALUE',
    meta: 'Displays a LABEL with the item name followed by a VALUE',
    value: 'LABELVALUE ',
    command: 'startAutocomplete',
    params: [
      { 'Target name': 1 },
      { 'Packet name': 1 },
      { 'Item name': 1 },
      { RAW: 1, CONVERTED: 1, FORMATTED: 1, WITH_UNITS: 1 },
      { '<Number of characters>': 'description' },
    ],
  },
]