When can I start writing my own modes for FoldingText

A big part of the FoldingText vision is that it's an extensible platform. Modes are the main extension mechanism, they allow parts of your document to get custom styling and behavior. The included .todo and .timer modes are good examples of this.

So when can you write your own modes?

The latest FoldingText 1.2 development version has very early and experimental plugin support. There's no documentation, and I'm sure the API will change. But it's a start. To try it out you should:

First create a plugin folder at:

    ~/Library/Containers/com.foldingtext.FoldingText/Data/Library/Application\ Support/FoldingText/Plug-Ins/MyPlugin.ftplugin

Next, inside that folder create a main.js file and paste in this code:

define(function(require, exports, module) {


    var oop = require("util/oop");
    var Clock = require("util/clock").Clock;
    var NodeSet = require("editor/model/node_set").NodeSet;
    var TextModeController = require("mode_controllers/text/text_mode_controller").ModeController;

    var ClockModeController = function() {
        this._visibleClocks = new NodeSet();

    oop.inherits(ClockModeController, TextModeController);

    (function() {

        this.getModes = function() {
            return ['clock'];

        this.format = function(date, clockTreeNode) {
            var formatProperty = clockTreeNode.getPropertyNode("format");
            var format;

            if (formatProperty) {
                format = formatProperty.getTag('value');
            } else {
                format = 'shortTime';

            return date.format(format);

        this.prepareViewOverlayNodeForDisplay = function(viewNode, viewOverlayNode, viewContentNode, treeNode) {
            ClockModeController.super_.prepareViewOverlayNodeForDisplay.call(this, viewNode, viewOverlayNode, viewContentNode, treeNode);

            if (treeNode.getMode() === 'clock') {
                var clockOverlay = document.createElement("span");
                clockOverlay.textContent = this.format(Clock.date, treeNode) + ' ';
                this.getLeftMarginDIV(viewOverlayNode, treeNode).appendChild(clockOverlay);

        this.processClockTick = function() {
            var treeController = this.treeController;
            if (treeController) {
                var treeView = treeController.treeView;
                var visibleClocks = this._visibleClocks;

                // First check and remove nodes that are no longer visible or are no longer clocks.
                visibleClocks.forEachNodeInSet(function(each) {
                    if (each.getMode() !== 'clock' || !treeView.containsTreeNode(each)) {

                // Next schedule all visible clocks for an overlay update.
                if (treeView && treeView._editorContentElement.parentElement !== null && visibleClocks.count > 0) {
                    treeView.updateViewNodes(NodeSet.EmptySet, NodeSet.EmptySet, NodeSet.EmptySet, NodeSet.EmptySet, visibleClocks);


    exports.ModeController = ClockModeController;

Then run FoldingText, and type my.clock, and if all goes well the current time should display in the left column next to that line. You can change the display format by adding a property to the line. For example type this into your document if you want to see seconds.

    Format : h:MM:ss TT

This is all very early, but gota start somewhere.