toggle toobar-icon classlist

[maxihaindl]

Hi,

first of all thanks for your great work. I really apprechiate resizing images in an editor like you made it possible!

I am using quill-blot-formatter2 with images, links and even links around images - all with custom blots and custom modals on the frontend.

nevertheless, selecting an image or a linked image, does not toggle the toolbar buttons active. Even if I try to toggle these by hand. whereas selecting a plain link does toggle the link button active.

customEditor.root.querySelectorAll('div > a').forEach(anchor => {
	anchor.addEventListener('click', () => {
		const toolbarLinkButton =
			customEditorToolbar.container.querySelector('.ql-link');

		console.log(toolbarLinkButton);
		toolbarLinkButton.classList.toggle('ql-active');
		console.log(toolbarLinkButton);
	});
});

this is what my page looks like using qbf2:

this is without:

its just a sneaky suspicion, but it seems the toggled/added class get's removed right away by qbf2. if I turn off quill-blot-formatter2 like commenting out the config, the buttons will get active as you'd wish.

This is my config:

const customEditorOptions = {
	debug: 'log',
	modules: {
		keyboard: {
			bindings: {
				tab: {
					key: 9,
					handler: () => {},
				},
			},
		},
		toolbar: {
			container: `#${editor.dataset.editorId}-toolbar`,
			handlers: {},
		},
		blotFormatter2: {
			align: {allowAligning: false},
			image: {
				allowResizing: false,
				allowAltTitleEdit: false,
			},
			overlay: {
				style: {
					backgroundColor: 'rgba(173, 120, 28, .4)',
					border:
						'1px dashed var(--application-color-neutral-border--active)',
				},
			},
		},
	},
};

These are my custom blots:

import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');

/**
 * CustomImageBlot of an Image in Quill Editor
 *
 * `this.linkProps` acts as a gatekeeper to prevent unintentional properties
 * if you want to add new properties to your blot, add them to the array and to static value()
 * and pass them to your instance methods
 */
export default class CustomImageBlot extends BlockEmbed {
	static blotName = 'customImage';
	static tagName = 'div';

	constructor(scroll, domNode, value) {
		super(scroll.scroll, domNode);

		this.link = domNode.querySelector('a');
		this.image = domNode.querySelector('img');
		this.linkProps = ['href', 'target', 'aria-label'];
		this.imageFloatingClassTemplate = 'ql-image-float-';
		this.imageFloatingActiveClass = '';
	}

	static create(value) {
		const node = super.create();
		const image = document.createElement('img');

		image.setAttribute('src', value.src);

		if (value.alt) image.setAttribute('alt', value.alt);
		if (value.copyright) image.setAttribute('data-copyright', value.copyright);
		if (value.width) image.setAttribute('width', value.width);
		if (value.height) image.setAttribute('height', value.height);

		if (value.link) {
			const link = document.createElement('a');
			link.setAttribute('href', value.link.href);
			link.setAttribute('target', value.link.target);
			link.setAttribute('aria-label', value.link.ariaLabel);

			link.appendChild(image);
			node.appendChild(link);

			return node;
		}

		node.appendChild(image);

		return node;
	}

	static value(node) {
		const image = node.querySelector('img');
		const link = node.querySelector('a');

		try {
			const v = {
				src: image.getAttribute('src'),
				alt: image.getAttribute('alt'),
				copyright: image.getAttribute('data-copyright'),
				width: image.getAttribute('width'),
				height: image.getAttribute('height'),
			};

			if (link)
				v['link'] = {
					href: link.getAttribute('href'),
					target: link.getAttribute('target'),
					ariaLabel: link.getAttribute('aria-label'),
				};

			return v;
		} catch (e) {
			return true;
		}
	}

	/**
	 * wraps the image with an anchor tag
	 * @param {{ href: string, target: '_self' | '_blank' }} linkAttributes
	 */
	createImageAnchorWrapper(linkAttributes) {
		if (this.link) throw new Error('Cannot wrap an existing Anchor!');

		if (!linkAttributes.href || !linkAttributes.target || !linkAttributes)
			throw new Error('Missing link properties!');

		const link = document.createElement('a');

		Object.keys(linkAttributes).forEach(attribute => {
			// make sure to attach only defined attributes
			if (this.linkProps.findIndex(item => item === attribute) !== -1) {
				link.setAttribute(attribute, linkAttributes[attribute]);
			}
		});

		link.appendChild(this.image);
		this.domNode.appendChild(link);

		return this;
	}

	/**
	 * edit existing anchor-wrapper of the image
	 * @param {{ href: string, target: '_self' | '_blank', aria-label: string }} linkAttributes
	 */
	editImageAnchorWrapper(linkAttributes) {
		if (!this.link) throw new Error('Missing Anchor-Wrapper');

		Object.keys(linkAttributes).forEach(attribute => {
			// make sure to attach only defined attributes
			if (this.linkProps.findIndex(item => item === attribute) !== -1) {
				this.link.removeAttribute(attribute);
				this.link.setAttribute(attribute, linkAttributes[attribute]);
			}
		});

		return this;
	}

	/**
	 * removes existing anchor-wrapper from the image
	 */
	removeImageAnchorWrapper() {
		if (!this.link) throw new Error('Missing Anchor-Wrapper');

		this.domNode.removeChild(this.link);
		this.domNode.appendChild(this.image);

		return this;
	}

	/**
	 * floats an image
	 * @param {"right" | "left" | "full" | null} value
	 */
	floatImage(value) {
		if (value) {
			const className = `${this.imageFloatingClassTemplate}${value}`;

			if (this.imageFloatingActiveClass) {
				this.image.classList.remove(this.imageFloatingActiveClass);
				this.image.classList.add(className);
			} else {
				this.image.classList.add(className);
			}

			this.imageFloatingActiveClass = className;
		} else this.image.classList.remove(this.imageFloatingActiveClass);

		return this;
	}
}

How can I take influence on that behavior?

Update:
I managed to handle toolbar-button active-state by myself with two click listeners

customEditor.root.querySelectorAll('img').forEach(image => {
	image.addEventListener('click', () => {
		initSelection(customEditor);
		toggleToolbarIcon(customEditor, '.ql-image');
	});
});

customEditor.root.querySelectorAll('div > a').forEach(anchor => {
	anchor.addEventListener('click', () => {
		initSelection(customEditor);
		toggleToolbarIcon(customEditor, '.ql-link');
	});
});

const toggleToolbarIcon = (editor, buttonSelector) => {
	setTimeout(() => {
		const toolbar = editor.getModule('toolbar');
		const button = toolbar.container.querySelector(buttonSelector);

		button.classList.toggle('ql-active');
	}, 50);
};

The key here is to set a timeout to let events populate properly within quill and then toggle the class
This does the job, but still doesn't really feel naturally.

Another sideffect is now, when resizing the image, active-class still gets vanished, so the buttons turn 'off'

[enzedonline]

Hello. Sorry, I'm kind of buried in other stuff just now and missed this getting raised.

The effect you're seeing is because the editor loses focus when an image is clicked on, the focus is passed on to the formatter which sits outside of the editor. It has the same effect as clicking anywhere outside of the editor, Quill clears the selection when that happens (which in turn clears the active status from any toolbar buttons). It's not possible to put the formatter inside the editor unfortunately.

The workaround for formatting the image from the toolbar is to select the image by moving the cursor across it (either by mouse or keyboard) so that it is highlighted.

Maybe there's a way to prevent the toolbar from being 'deselected' as you've used above - it would also need to be applied for every click/touch/drag/gesture event on the formatter. Any click on the toolbar would dismiss the formatter though.

I thought a simpler answer to would be to return focus to the editor after every formatter event. I guess the answer then is to return focus and select the image after every mouch/touch related action. The issue with selecting the image in the browser is your left with the ugly selection mask over the image so this isn't a good fix in the end.

I could look at adding a link action so that image links can be added directly in the formatter. It needs a bit of care, Quill does all sorts of unexpected things depending on order of formats (the reason those formats got so large).

It'll need to wait a while though until I have some clear time sorry.