Unable to add custom formats with es5 - in v1.0.0

[sergop321]

I am trying to add a new formatter using es5

var Link = Quill.import('formats/link');
var ExtendedLink = function () {};
ExtendedLink.prototype = Object.create(Link.prototype);
ExtendedLink.prototype.constructor = ExtendedLink;

ExtendedLink.prototype.create = function (value) {
    var node = Link.prototype.create(value);
    node.className = 'test';

  return node;
};

ExtendedLink.blotName = 'linkt';
ExtendedLink.tagName = 'A';
ExtendedLink.SANITIZED_URL = 'about:blank';

Quill.register('formats/linkt', ExtendedLink);

That doesn't seems to work, and I couldn't find any documentation with an example.

[jhchen]

Where are you getting this class/inheritance implementation for es5? Can you try Babel or Typescript's implementation?

[sergop321]

This is the exact problem, It is not possible to add precompiler to the project so it must be implemented completely in es5.

After several more hours I was able to make it work with the following

var Link = Quill.import('formats/link');
var ExtendedLink = function (node, value) {
    // Apply Link Constructor
    Link.call(this, node, value);
};

ExtendedLink.prototype = Object.create(Link.prototype);
// Copy static functions
$.extend(ExtendedLink, Object.create(Link));
ExtendedLink.sanitize = Link.sanitize; // sanitize not getting copied, so I am doing it manually

// Fixed constructor type 
ExtendedLink.prototype.constructor = ExtendedLink;

// Override parent create function
ExtendedLink.create = function (value) {
    var node = Link.create(value);
    node.className = 'test';

  return node;
};

// Update blotName
ExtendedLink.blotName = 'linkt';
Quill.register('formats/linkt', ExtendedLink, true);

Is there a more efficient way to implement the same functionality?
Is it possible to add some more documentation for es5 compatibility?

[jhchen]

Quill should work with ES5 or ES6. The concern I wanted to explore was how you were implementing classes and inheritance. The snippet originally posted does not seem standard which is why I suggested Babel or Typescript's implementation. I was not suggesting use Typescript or Babel as a preprocessor, just their ES5 implementation for classes and inheritance. It looks like using jQuery's implementation did the trick, which is just as good.

[sergop321]

I tested both Babel and Typescript,
Typescript implementation, didn't work.
While Babel generate a harder to read code, but works great.

Thank you.