My image caption plugin for Froala Editor 2

image_caption.js

(function($) {
    var IMAGE_MIRROR_CLASSES = ['fr-dii', 'fr-fil', 'fr-fir', 'fr-dib'];
    var IMAGE_MIRROR_STYLES = ['width'];

    $.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, {
        imageCaptionFigureAll: false
    });

    $.FroalaEditor.PLUGINS.imageCaption = function(editor)
    {
        var content;

        function init()
        {
            content = editor.$el[0];
            editor.events.on('contentChanged', handleContentChanged);
            updateImages();
        }

        function handleContentChanged()
        {
            updateImages();
        }

        function updateImages()
        {
            var isChanged = false;
            var defaultTag = editor.html.defaultTag();

            Array.prototype.forEach.call(content.querySelectorAll('img'), function(img) {
                var figure, imageRoot;

                if (img.parentNode.tagName.toLowerCase() === 'a') {
                    imageRoot = img.parentNode;
                } else {
                    imageRoot = img;
                }

                if (editor.opts.imageCaptionFigureAll || img.alt.trim().length) {
                    if (imageRoot.parentNode.tagName.toLowerCase() !== 'figure') {
                        figure = document.createElement('figure');
                        imageRoot.parentNode.insertBefore(figure, imageRoot);
                        figure.appendChild(imageRoot);
                        isChanged = true;
                    }
                } else {
                    if (imageRoot.parentNode.tagName.toLowerCase() === 'figure') {
                        figure = imageRoot.parentNode;
                        figure.parentNode.insertBefore(imageRoot, figure);
                        figure.parentNode.removeChild(figure);
                        isChanged = true;
                    }
                }
            });

            Array.prototype.forEach.call(content.querySelectorAll('figure'), function(figure) {
                var img, figcaption, i, child, parent, figureClass;

                for (i = 0; i < figure.childNodes.length; ++i) {
                    child = figure.childNodes[i];

                    if (
                        !img &&
                        child instanceof HTMLElement &&
                        child.tagName.toLowerCase() === 'img'
                    ) {
                        img = child;
                    } else if (
                        !img &&
                        child instanceof HTMLElement &&
                        child.tagName.toLowerCase() === 'a'
                    ) {
                        for (i = 0; i < child.children.length; ++i) {
                            if (child.children[i].tagName.toLowerCase() === 'img') {
                                img = child.children[i];
                                break;
                            }
                        }
                    } else if (
                        !figcaption &&
                        child instanceof HTMLElement &&
                        child.tagName.toLowerCase() === 'figcaption'
                    ) {
                        figcaption = child;
                    } else {
                        figure.removeChild(child);
                        isChanged = true;
                        i -= 1;
                    }
                }

                if (!img) {
                    child = figure;

                    do {
                        parent = child.parentNode;
                        parent.removeChild(child);
                        child = parent;
                    } while (child !== content && child.children.length === 0 && child.textContent.trim().length === 0);

                    isChanged = true;
                    return;
                }

                if (img.alt.trim().length) {
                    if (!figcaption) {
                        figcaption = document.createElement('figcaption');
                        figure.appendChild(figcaption);
                        isChanged = true;
                    }

                    if (figcaption.textContent !== img.alt) {
                        figcaption.textContent = img.alt;
                        isChanged = true;
                    }
                } else {
                    if (figcaption) {
                        figure.removeChild(figcaption);
                        isChanged = true;
                    }
                }

                IMAGE_MIRROR_STYLES.forEach(function(styleName) {
                    if (figure.style[styleName] !== img.style[styleName]) {
                        figure.style[styleName] = img.style[styleName];
                        isChanged = true;
                    }
                });

                figureClass = Array.prototype.filter.call(img.classList, function(className) {
                    return IMAGE_MIRROR_CLASSES.indexOf(className) !== -1;
                }).join(' ');

                if (figure.className !== figureClass) {
                    figure.className = figureClass;
                    isChanged = true;
                }
            });

            if (isChanged) {
                // console.log('changed');
                // editor.html.set(content.innerHTML);
            }
        }

        return {
            _init: init
        };
    };
})(jQuery);