Wrap multiple lines with HTML tags?


#1

I remember that Sublime Text had a package that could wrap multiple lines of text with the same HTML tag (e.g. wrap a bunch of lines in

  • ). I’ve searched for such a package for Atom, but haven’t found one. Anyone know of one?

  • #2

    Hi, have you taken a look at the Atom-tag-wrapper package?


    #3

    no, thanks - but I can only get it to wrap a whole selection in one tag. Looking to wrap a set of lines in one tag each.


    #4

    There’s a selection.merge(), but unfortunately no selection.split(), so if you’re invested in having one selection, it would take a slightly more involved process of taking the range of the selection and creating a new selection for each line, then processing the text.

    For you as the end user, it might be easier to make a selection for each line, then use the package.


    #5

    To add to what @DamnedScholar suggested, you can easily split a selection into individual lines with the “Editor: Split Selections Into Lines” command.


    #6

    Thanks for the responses. Splitting lines is not an issue (for me), And I can wrap line-by-line with Emmet, but for, say, 20 lines of text that you want to turn into list items, that gets tedious. Was hoping for a way to do them all in one fell swoop, as you can at http://www.code-pal.com/listify/ for instance.


    #7

    It’s doable via an init.coffee tweak. That’s pretty easy. The following code, for example, will wrap all selections in li tags:

    wrapSelection = (before, after) ->
      selections = atom.workspace.getActiveTextEditor().getSelections()
    
      for selection in selections
        selectedText = selection.getText()
        if selection.isEmpty()
          selection.insertText("#{before}#{selectedText}")
        else
          selection.insertText("#{before}#{selectedText}#{after}")
    
    atom.commands.add 'atom-text-editor', 'custom:wrap-li', ->
      open = '<li>'
      close = '</li>'
    
      wrapSelection(open, close)
    

    To do what you want, we have to pull apart any multi-line selections. We can do that inside the command function:

    atom.commands.add 'atom-text-editor', 'custom:wrap-li-by-line', ->
      open = '<li>'
      close = '</li>'
    
      editor = atom.workspace.getActiveTextEditor()
      selections = editor.getSelections()
      for selection in selections
        range = selection.getBufferRowRange()
        selection.clear()
    
        row = range[0]
        while (row <= range[1])
          editor.addCursorAtBufferPosition([row, 0])
          row++
    
        editor.moveToFirstCharacterOfLine()
        editor.selectToEndOfLine()
    
      wrapSelection(open, close)
    

    That will get you where you want to be. Then just add a keybinding for it. It doesn’t work perfectly if you have two multiline selections and I’m not sure why, but if you select one block of lines, it will work as expected.

    @leedohm, I looked for that command and didn’t find it.


    #8

    It’s only available in the Command Palette when a text editor is in focus.


    #9

    Should be easy to do - look at the Multiple Cursors tip here