ContentTools - How to add new tool with pure js / jquery?

Question

I try to add a new tool/function to the ContentTools but I don't want to learn Coffeescript and as it states on the website it should running fine with plain jquery.
And I can not find any further documentation how to add a simple tool to my toolbar.
I hope you can help me or is there any other opensource WYSIYG Editor with this beautiful inline editing style like ContentTools which has a better documentation?

Answer 1

As I know, GetmeUK/ContentTools project is an open source project which is written with coffeescript and sass technologies.

What is Coffeescript :

CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

What is sass :

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. just like coffeescripts sass finally is converted to css.

So as I know it is possible to modify the final JS files generated by coffeescript compiler, but the easier way is to learn how to compile coffeescript, then you can modify and rebuild any other open source softwares, libs, and etc... .

How to download and build GetmeUK/ContentTools project ?

first of all you have to clone the project using GIT :

git clone https://github.com/GetmeUK/ContentTools.git

for rebuilding this project you need to have NPM and GEM installed in your operating system. follow the instructions mentioned in the link https://nodejs.org/en/download/ for NPM and https://rubygems.org/pages/download for GEM.

cd ContentTools; npm install; gem install sass;

By running grunt build you can build the project and save pure JS exports for this project. With this way you can use the pure JS which is generated by compiling Coffeescript files. this is what is suggest to you.

By the way there is another harder way to sit and read the compiled JS code of this project for weeks, finally if you have chance you can understand generated codes and then after hard working sessions you can modify it :) I hope the following codes help you :

Coffeescript code:

class ContentTools.Tools.Paragraph extends ContentTools.Tools.Heading

# Convert the current text block to a paragraph (e.g <p>foo</p>)

ContentTools.ToolShelf.stow(@, 'paragraph')

@label = 'Paragraph'
@icon = 'paragraph'
@tagName = 'p'

@canApply: (element, selection) ->
    # Return true if the tool can be applied to the current
    # element/selection.
    if element.isFixed()
        return false

    return element != undefined

@apply: (element, selection, callback) ->
    # Apply the tool to the current element
    forceAdd = @editor().ctrlDown()

    if ContentTools.Tools.Heading.canApply(element) and not forceAdd
        # If the element is a top level text element and the user hasn't
        # indicated they want to force add a new paragraph convert it to a
        # paragraph in-place.
        return super(element, selection, callback)
    else
        # Dispatch `apply` event
        toolDetail = {
            'tool': this,
            'element': element,
            'selection': selection
            }
        if not @dispatchEditorEvent('tool-apply', toolDetail)
            return

        # If the element isn't a text element find the nearest top level
        # node and insert a new paragraph element after it.
        if element.parent().type() != 'Region'
            element = element.closest (node) ->
                return node.parent().type() is 'Region'

        region = element.parent()
        paragraph = new ContentEdit.Text('p')
        region.attach(paragraph, region.children.indexOf(element) + 1)

        # Give the newely inserted paragraph focus
        paragraph.focus()

        callback(true)

        # Dispatch `applied` event
        @dispatchEditorEvent('tool-applied', toolDetail)

The compiled JS code:

ContentTools.Tools.Paragraph = (function(_super) {
__extends(Paragraph, _super);

function Paragraph() {
  return Paragraph.__super__.constructor.apply(this, arguments);
}

ContentTools.ToolShelf.stow(Paragraph, 'paragraph');

Paragraph.label = 'Paragraph';

Paragraph.icon = 'paragraph';

Paragraph.tagName = 'p';

Paragraph.canApply = function(element, selection) {
  if (element.isFixed()) {
    return false;
  }
  return element !== void 0;
};

Paragraph.apply = function(element, selection, callback) {
  var forceAdd, paragraph, region, toolDetail;
  forceAdd = this.editor().ctrlDown();
  if (ContentTools.Tools.Heading.canApply(element) && !forceAdd) {
    return Paragraph.__super__.constructor.apply.call(this, element, selection, callback);
  } else {
    toolDetail = {
      'tool': this,
      'element': element,
      'selection': selection
    };
    if (!this.dispatchEditorEvent('tool-apply', toolDetail)) {
      return;
    }
    if (element.parent().type() !== 'Region') {
      element = element.closest(function(node) {
        return node.parent().type() === 'Region';
      });
    }
    region = element.parent();
    paragraph = new ContentEdit.Text('p');
    region.attach(paragraph, region.children.indexOf(element) + 1);
    paragraph.focus();
    callback(true);
    return this.dispatchEditorEvent('tool-applied', toolDetail);
  }
};
return Paragraph;
})(ContentTools.Tools.Heading);

You can go step by step by the tutorial provided by GetContentTools website and replace the code written in Coffescript with its equivalent in JS. for this goal I have some samples for you :

Every where you see @propertyName you can replace it with PackageName.ClassName.propertyName, or for calling super(parameters ...) method, you have to use the Paragraph.__super__.constructor.apply.call(this, parameters ...) syntax.

Also there is links to row files of this project which I share with you : Tools CoffeeScript File and Exported JS File

After all I think there is no way for doing this work with having no knowledge about Coffescript syntax or concepts, I suggest you to learn it, it would help you to have codes with more performance and clearness.