FoldingText for Atom User's Guide

Hacking FoldingText

In this chapter you'll learn how to customize FoldingText.

The Atom text editor is hackable by design. You can create custom styles, assign keymaps, and add functionality with packages. Even better there's also in infasturcture for sharing your work with others.


Choose File > Open Your Stylesheet and add the following:

.ft-has-children > .ft-branch > p {
  font-weight: bold;

That style rules makes items that have child items have bold text. For more information on creating styles see Atom's style tweaks documentation.


Choose File > Open Your Keymap and add the following:

  'cmd-d': 'outline-editor:toggle-status-complete'

Now you can use Command-d in your outline to mark items complete. For more information on creating keymaps see Atom's customizing key bindings documentation.

Use FoldingText's API

Choose File > Open Your Init Script and add the following:

atom.keymaps.add 'tag-bindings',
    'd': 'outline-editor:toggle-done-tag'

atom.commands.add 'ft-outline-editor',
  'outline-editor:toggle-done-tag': ->
    toggleTag(@editor.selection.items, 'done')

toggleTag = (items, tagName) ->
  first = items[0]
  firstTags = first?.getAttribute('data-tags', true) or []
  toggleOff = tagName in firstTags
  for each in items
    tags = each.getAttribute('data-tags', true) or []
    tagIndex = tags.indexOf(tagName)
    if tagIndex isnt -1
      tags.splice(tagIndex, 1)
    unless toggleOff
    each.setAttribute('data-tags', tags)

After restarting Atom you can press d in outline mode to toggle the "#done" tag. FoldingText provides an extensive API to automate and extend the outline editor.

Adding code to your Init Script is OK for small hacks, but if you are creating something more lasting you should create a package. The great thing about packages is Atom makes it easy to share them with others.

To a packages that works with FoldingText:

  1. Follow Atom's creating a package instructions.

  2. Use the Atom's services API to consume the foldingtext-service.

  3. Use the passed in FoldingTextService to access the rest of FoldingText's API.