wiki: Add code feature to editor

[ipfire.org.git] / src / static / js / editor.js

class Editor {
    constructor(parent) {
        this.parent = $(parent);

        // Get the textarea
        this.textarea = this.parent.find("textarea");

        // Make the textarea magic
        this.activateTextArea();

        // Bind all keys
        this.bindKeys();

        console.log("Editor initialised for " + this.parent);
    }

    activateTextArea() {
        var editor = this;

        // Remember any selected text
        this.textarea.on("select keyup click", function(e) {
            // Ignore any keyboard shortcuts
            if (e.ctrlKey)
                return;

            // Save selected text
            editor.selection = {
                start : this.selectionStart,
                end   : this.selectionEnd,
                text  : this.value.slice(this.selectionStart, this.selectionEnd),
                length: this.selectionEnd - this.selectionStart,
            };

            console.debug("Something got selected:");
            console.debug(editor.selection);
        })

        // Bind keyboard shortcuts
        this.textarea.on("keyup", function(e) {
            // If Ctrl wasn't pressed this isn't for us
            if (!e.ctrlKey)
                return;

            switch (e.which) {
                // B - Bold
                case 66:
                    editor.bold();
                    break;

                // I - Italic
                case 73:
                    editor.italic();
                    break;

                // C - Code
                case 67:
                    editor.code();
                    break;

                // H - Headline
                case 72:
                    editor.headline();
                    break;
            }
        });
    }

    bindKeys() {
        // Typography
        this.parent.find("#bold").click(this.bold.bind(this));
        this.parent.find("#italic").click(this.italic.bind(this));
        this.parent.find("#code").click(this.code.bind(this));

        // Headlines
        this.parent.find("#headline").click(this.headline.bind(this));
        this.parent.find("#headline-down").click(this.headline_down.bind(this));
        this.parent.find("#headline-up").click(this.headline_up.bind(this));
    }

    // Functions to modify the text

    replaceSelection(replacement) {
        // Get the DOM element
        var textarea = this.textarea.get(0);

        // Write text to textarea and move the cursor to the end
        textarea.setRangeText(replacement,
            this.selection.start, this.selection.end, "end");
    }

    insertAtCursor(insertion) {
        this.replaceSelection(insertion);
    }

    bold() {
        console.debug("Converting into bold: " + this.selection.text);
        this.replaceSelection("**" + this.selection.text + "**");
    }

    italic() {
        console.debug("Converting into italic: " + this.selection.text);
        this.replaceSelection("*" + this.selection.text + "*");
    }

    code() {
        var multiline = this.selection.text.indexOf("\n");

        if (multiline >= 0) {
            this.replaceSelection("```\n" + this.selection.text + "\n```\n\n");
        } else {
            this.replaceSelection("`" + this.selection.text + "`");
        }
    }

    // Headlines

    findLevel() {
        // Get all text between start and cursor position
        var text = this.textarea.val().slice(0, this.selection.start);

        // Split it in lines and reverse
        var lines = text.split("\n");
        lines.reverse();

        for (var line of lines) {
            console.debug(line);

            // Return the number of # found in the nearest headline
            var match = line.match("^(#+)");
            if (match) {
                return match[1].length;
            }
        }

        // If nothing was found, we are on level one
        return 1;
    }

    insertHeadline(offset) {
        // Find level of headlines
        var level = Math.max(this.findLevel() + offset, 1);

        console.debug("Adding headline (" + level + ")");
        var headline = "#".repeat(level);

        if (this.selection.length == 0) {
            headline += " ...";
        } else {
            // Add some space if we don't have any, yet
            if (!this.selection.text.startsWith(" "))
                headline += " ";

            headline += this.selection.text + "\n\n";
        }

        this.replaceSelection(headline);
    }

    headline() {
        return this.insertHeadline(0);
    }

    headline_down() {
        return this.insertHeadline(1);
    }

    headline_up() {
        return this.insertHeadline(-1);
    }
}

$(document).ready(function() {
    // Initialise all editors
    $(".editor").each(function(i, e) {
        new Editor(e);
    });
});