Ace version

A rewrite for Ace editors, by gregh3269:

import dragTracker from 'drag-tracker';

document.documentElement.firstElementChild 
.appendChild(document.createElement('style'))
.textContent = `
    .ace-resize-v{bottom: 18px !important;}
    .ace-resize-h{right: 18px !important;}
    .ace-resize-handle{...}
`;

function aceResize(ae, config) {
    config = config || {};

    var minW = config.minWidth || 200,
        minH = config.minHeight || 100,
        resizeW = config.resizableWidth !== false,
        resizeH = config.resizableHeight !== false,
        css = config.cssClass || 'ace-resize-handle';

    var aceElement = document.getElementById(ae.container.id),
        aceHandle = config.handle || function () {
            var h = aceElement.appendChild(document.createElement('div'));
            h.className = css, h.id = css;
            return h;
        }();

    var vScroll = aceElement.querySelector('.ace_scrollbar-v'),
        hScroll = aceElement.querySelector('.ace_scrollbar-h');
    function constrainScrollbars() {
        if (!config.handle) {
            vScroll.classList.add("ace-resize-v");
            hScroll.classList.add("ace-resize-h");
        }
    }
    constrainScrollbars();

    var startPos = void 0,
        startSize = void 0;
    dragTracker({
        container: aceHandle.offsetParent,
        selector: aceHandle,

        callbackDragStart: function callbackDragStart(handle, pos) {
            startPos = pos;
            startSize = [aceElement.clientWidth, aceElement.clientHeight];
        },
        callback: function callback(handle, pos) {
            var diffX = pos[0] - startPos[0],
                diffY = pos[1] - startPos[1],
                cw = resizeW ? Math.max(minW, startSize[0] + diffX) : null,
                ch = resizeH ? Math.max(minH, startSize[1] + diffY) : null;
            if(resizeW) aceElement.style.width = cw+'px';
            if(resizeH) aceElement.style.height = ch+'px';
            // Trigger ace editor resize
            ae.resize();
        }
    });

    return aceHandle;
}

export default aceResize;