Example for custom class attributor

[benbro]

The guide show how to create custom blots and how to import existing attributors but it doesn't show how to create a new custom attributor.
http://quilljs.com/guides/how-to-customize-quill/#content-and-formatting

I've created a codepen with a CustomClass attributor and a custom button that adds the ql-custom-test format:
http://codepen.io/anon/pen/PGRQrx

Will it be useful to add something like this to the docs/guide?
Is it possible to just add ql-custom class instead of ql-custom-test?

Version:
1.0.6

[jhchen]

Yes I think it would be helpful. We could maybe break that section up to have a blot and attributors subsection? Do you want to take a first cut?

[benbro]

I'll create a PR.

In the first example under the 'Content and Formatting' section, the color and size attributors are imported and registered but they are already registered by default so why is it needed?
http://quilljs.com/guides/how-to-customize-quill/#content-and-formatting
https://github.com/quilljs/quill/blob/develop/quill.js#L47

The first argument in the register API method is a path:string or defs:object but in the example a class is passed.
http://quilljs.com/docs/api/#register

[jhchen]

Yeah so this detail is a bit hand-wavy. There are multiple implementations for color, one using inline styles and one using classes. Both are registered under attributors/ so they can be made easily available to the end user. When you register under formats/ or blots/, it actually gets registered with Parchment. Both are implementing color with attrName color so cannot both be registered by Parchment (where latest writer wins).

The register API is missing docs for the shorthand of when you pass in just a Blot or Attributor, it will register it under formats/. This avoids needing to know anything about the registration paths and that formats/ is special, but I guess it may not have the intended effect because example code uses the shorthand without explantation.

[benbro]

I couldn't think of a real world example for a custom class so I'm closing this for now.

[jhaenchen]

I use this in my app for custom styling on each word excluding spaces and to get data from their classnames.

[DunniAdenuga]

@jhaenchen Please, can I see this app example ?

[jhaenchen]

@DunniAdenuga

Maybe this will help you get started:

var quill = new Quill('#note-text', {
theme: 'snow',
});

var Parchment = Quill.import("parchment");

var CustomClass = new Parchment.Attributor.Class('custom', 'ql-custom', {
scope: Parchment.Scope.INLINE
});

Quill.register(CustomClass, true);

quill.formatText(startIndex, endIndex - startIndex, "custom", refinedNote.RelativeTimestamps[i].Timestamp.toString(), "silent");

[thavus]

@benbro My real world example is we add styled text messages to the editor.

I was able to get it to work with this:

let Inline = Quill.import('blots/inline');

class TextMessage extends Inline {
  static tagName = 'span'

  static create(value: any) {
    let node = super.create();
    node.classList.add('text-message');
    node.classList.add(value);
    return node;
  }
  formats() {
    return TextMessage.tagName
  }
}

TextMessage.blotName = 'text-message';
TextMessage.tagName = 'span';
Quill.register(TextMessage);

And then, you set for format like so:
quillEditorRef.format(type, value);
Where type is the blot name and value is an extra class name you want to apply to the span.

And that looks like this in the editor:

However, when we load the string from the database and then try to set the content of the quill editor, the span and it's class is stripped out.

EDIT: I've solved this for myself by setting the html with quillEditorRef.root.innerHTML. There's likely problems with the delta by doing it this way, but I don't have much of a choice.