We Keep Coding

Adding a custom class to blockquote in QuillJS

I'm trying to figure out how to add a custom class when the user clicks the blockquote toolbar button. At the moment, when blockquote is clicked, the element is created as so:
<blockquote class="ql-align-justify">this is my quoted text</blockquote>
I would like to add .blockquote to the class as so:
<blockquote class="ql-align-justify blockquote">this is my quoted text</blockquote>
I'm currently looking at adding a handler, but there doesn't appear to be much documentation on how this works:
this.editor = new Quill(this.$refs.editor, this.editorOptions)
// Handlers can also be added post initialization
var toolbar = this.editor.getModule('toolbar');
toolbar.addHandler('blockquote', function(value) {
//todo: working on adding the blockquote class to blockquotes.
console.log('blockquote called');
console.log('value:');
console.log(value);
if (value) {
this.quill.format('blockquote');
}
});

I don't think handlers can do this (as far as I know)
But you can extend the BlockQuote format, by doing so, you will have full control of the node, you can add classes, or even click handler.
The format that is responsible for blockquote is:
const BlockQuote = Quill.import('formats/blockquote');
So simply you can do:
const BlockQuote = Quill.import('formats/blockquote');
class CustomBlockQuote extends BlockQuote {
static create(value) {
const node = super.create(value);
node.classList.add('test');
return node;
}
}
And you can update the tag name and the blot name like:
CustomBlockQuote.blotName = 'custom-blockquote';
CustomBlockQuote.tagName = 'blockquote';
Or even simpler for only changing the class:
class CustomBlockQuote extends BlockQuote {}
CustomBlockQuote.blotName = 'custom-blockquote';
CustomBlockQuote.tagName = 'blockquote';
CustomBlockQuote.className = 'custom-class-name';
Quill.register(CustomBlockQuote, true);
I have just created a jsfiddle as an example, I hope it works for you:
https://jsfiddle.net/hassansalem/095mh3fn/4/

Best way to consume javascript data blocks with react or web components?

I will be working with legacy software built with Microsoft Behaviors, and Data Islands, both no longer supported since IE 10. The middle tier transforms xml data into "data-blocks" (JavaScript can use the content of a element as a data block if the src attribute is omitted..). Unfortunately, there's a gazillion of these data blocks so a full-rewrite of the middle-tier or establishing a serverless architecture to interface with the backend is out of the question. A clean solution is eluding me, can anyone think of a way to reuse these existing data-blocks with a modern framework such as react, angular, vue, stencil (custom elements via web components)?

You could use the DOMParser to parse the content of your custom <script> Data Block into a XML document.
Since it is standard Javascript, you can use it in the framework of your choice.
Below is an example with a vanilla Custom Element that I called <xml-renderer>:
class XMLRenderer extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
.innerHTML = `<style>
div { background-color: lightblue ;
display: inline-block ;
padding : 10px ;}
</style>
<div>XML Content
<ul></ul>
</div>`
}
connectedCallback() {
//get the data island id
var _block_id = this.dataset.block
var _ul = this.shadowRoot.querySelector('ul')
var _xml
parseXML()
render()
//internal methods
//parse
function parseXML() {
var text = document.getElementById(_block_id)
var parser = new DOMParser()
_xml = parser.parseFromString(text.textContent, 'application/xml')
}
//render
function render() {
_xml.querySelectorAll('data').forEach(d => {
let li = document.createElement('li')
li.textContent = d.textContent
_ul.appendChild(li)
})
}
}
}
customElements.define("xml-renderer", XMLRenderer)
<script type="application/xml" id="data-block1">
<base><data>Data 1</data><data>Data 2</data></base>
</script>
<xml-renderer data-block="data-block1"></xml-renderer>

Quill JS adding inline or 'formatBlock' styles

I'm using QuillJS for an editor, and in this editor I'd like to create some custom text styles. You have the default, bold etc. which already exist, however i'd like to extend upon these. For example, there's blockquote which'll create a block quote, however I want an inline quote. For this i'd ideally wrap it with say a span and class to apply the desired style, however I can't figure out how this is to be achieved with Quills API. Sure I can create a custom block, but that applies to the whole section of text rather then just the selected text. So i've tried using .formatText with my custom block, but not had any luck although if I change 'quote' to 'bold' it does... Any help / suggestions would be greatly appreciated!
let Block = Quill.import('blots/block');
class quote extends Block { }
quote.blotName = 'quote';
quote.className = 'quote';
quote.tagName = 'span';
Quill.register({ 'formats/quote': quote });
//Handler to change inline
var quoteHandler = function(){
var range = quill.getSelection();
console.log(range);
quill.formatText(range.index, range.length, 'quote', true);
}
/* Quill */
var quill = new Quill('.editor_space', {
theme: 'snow',
placeholder: 'Compose an epic...',
modules: {
toolbar:{
container: '.main_toolbar',
handlers: {
'linebreak': linebreakHandler,
'inlineQuote': quoteHandler,
}
}
}
});

To answer my own question, I should have been extending Inline for it to obviously be inline. No need for a handler function.
let Inline = Quill.import('blots/inline');
class quote extends Inline {
static create(value) {
let node = super.create(value);
return node;
}
}
quote.blotName = 'quote';
quote.className = 'quote';
quote.tagName = 'div';
Quill.register(quote);

Extending HTML elements in Web components

From the custom elements page, I see that to extend an element you do:
var XFooButtonPrototype = Object.create(HTMLButtonElement.prototype);
XFooButtonPrototype.createdCallback = function() {
this.textContent = "I'm an x-foo button!";
};
var XFooButton = document.registerElement('x-foo-button', {
prototype: XFooButtonPrototype,
extends: 'button'
});
Then later in the guide it says that you can make an element by writing either:
<x-foo></x-foo>
Or:
<button is="x-foo-button"></button>
Questions:
Why is it important to specify extends: 'button' when the element is obviously_ inheriting from HTMLButtonElement (since it has HTMLButtonElement.prototype in its proto chain)
How is the link between button and x-foo-button established? Does x-foo-button become a possible option of button in terms of is="x-foo-button" thanks to that extends: 'button' ? What happens "internally", so to speak?
Why would you pick <button is="x-foo-button"></button> over <x-foo></x-foo>...?
[ADDENDUM]
Polymer saves us from this duplication:
MyInput = Polymer({
is: 'my-input',
extends: 'input',
created: function() {
this.style.border = '1px solid red';
}
});
If extends is there, Polymer will put the right prototype in the chain with Object.getPrototypeOf(document.createElement(tag));.
So, corollary question:
Why the duplication in the first place? If there is an extends, shouldn't the browser automatically do this?

You totally misunderstood how extending web components work.
Create simple elements
First of all, this is how you register a new element:
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
To create an element you can do one of these:
<x-foo></x-foo>
var xFoo = new XFoo();
document.body.appendChild(xFoo);
var xFoo = document.createElement( 'x-foo')
document.body.appendChild(xFoo);
Create extended elements
This is how you extend an existing element:
var XFooButton = document.registerElement('x-foo-button', {
prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button'
});
To create one you can do one of these:
<button is="x-foo-button"></button>
var xFooButton = new XFooButton();
document.body.appendChild(xFoo);
var xFooButton = document.createElement('button', 'x-foo-button');
document.body.appendChild(xFooButton);
Note that in case of extended custom elements, when registering them you have to specify both the prototype (set to HTMLButtonElement.prototype rather than HTMLElement.prototype), and the extended tag's name (extends: 'button').
Also, when you create an extended element using markup or createElement(), you need to also specify the basic element (button) and the extended one (x-foo-button),
(Note: I am aware I am answering myself)

I think its Importent to Say here:
WARNING DEPRECATED Browser API METHOD
Here in this Question a .registerElement is Used it got Replaced by .defineElement and the Api has changed
current way to define a element
class AppDrawer extends HTMLElement {
constructor() {
super()
this.innerHTML = '<h1>UH</h1>'
}
}
window.customElements.define('app-drawer', AppDrawer);
// Or use an anonymous class if you don't want a named constructor in current scope.
window.customElements.define('app-drawer-noname', class extends HTMLElement {
constructor() {
super()
this.innerHTML = '<h1>UH AH</h1>'
}
});
Example - defining a mobile drawer panel, < app - drawer >:
Example usage:
<app-drawer></app-drawer>
<app-drawer-noname></app-drawer-noname>
```

How do you use ViewCompiler to manually compile part of the DOM?

Say I have a simple view model (widget.js):
import {Behavior} from 'aurelia-framework';
export class Widget
{
static metadata() { return Behavior.customElement('widget') }
constructor()
{
this.title= "AwesomeWidget";
}
}
With the following view: (widget.html):
<template>
<div>${title}</div>
</template>
Now say I inject some markup like this into the DOM:
var markup = `<div><widget></widget></div>`;
var $markup = $(markup);
var $placeholder = $("#placeholder");
$placeholder.append($markup);
How can I now tell Aurelia to compile this newly added part of the DOM against a new instance of Widget? I know it involves ViewCompiler but need an example to help me along. I'd greatly appreciate any help. Thanks!

A few months ago the TemplatingEngine class got a newly accessible enhance API method. This shortcuts the need to manually use the viewCompiler and compile method which was originally the only easy approach. This blog post details how you can use the enhance API to Aureliaify dynamically added HTML in your pages.
This has the added benefit of not needing to clean up the compiled HTML or detach anything either.

Here's an example: https://gist.run/?id=762c00133d5d5be624f9
It uses Aurelia's view compiler to compile the html and create a view instance, bound to the supplied view-model.
view-factory.js
import {
inject,
ViewCompiler,
ViewResources,
Container,
ViewSlot,
createOverrideContext
} from 'aurelia-framework';
#inject(ViewCompiler, ViewResources)
export class ViewFactory {
constructor(viewCompiler, resources, container) {
this.viewCompiler = viewCompiler;
this.resources = resources;
this.container = container;
}
insert(containerElement, html, viewModel) {
let viewFactory = this.viewCompiler.compile(html);
let view = viewFactory.create(this.container);
let anchorIsContainer = true;
let viewSlot = new ViewSlot(containerElement, anchorIsContainer);
viewSlot.add(view);
view.bind(viewModel, createOverrideContext(viewModel));
return () => {
viewSlot.remove(view);
view.unbind();
};
}
}
Usage:
let view = this.viewFactory.insert(containerElement, viewHtml, viewModel);