cm-resize demo

cm-resize-demo.markdown

cm-resize demo

https://github.com/Sphinxxxx/cm-resize

A Pen by Andreas Borgen on CodePen.

License.

index.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.js"></script>
<script src="https://unpkg.com/cm-resize"></script>


<h1><a href="https://github.com/Sphinxxxx/cm-resize" target="_blank">cm-resize</a> demo</h1>
<main>
    <textarea id="text1">Example with the default handle.&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;...</textarea>

    <textarea id="text2">Example with two handles,&#10;custom cssClass and resizableWidth/Height only.&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;...</textarea>

    <div id="joystick3"></div>
    <textarea id="text3">Example with a custom handle element.&#10;This allows for handle UI outside of the editor area.&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;...</textarea>
</main>

script.js

//Default
var cm1 = CodeMirror.fromTextArea(document.querySelector('#text1'));
cmResize(cm1);


//Custom cssClass
var cm2 = CodeMirror.fromTextArea(document.querySelector('#text2'));
cmResize(cm2, {
    resizableHeight: false,
    cssClass: 'handle handle2 handle-w',
});
cmResize(cm2, {
    resizableWidth: false,
    cssClass: 'handle handle2 handle-h',
});


//Custom handle
var cm3 = CodeMirror.fromTextArea(document.querySelector('#text3'));
cmResize(cm3, {
    handle: document.querySelector('#joystick3'),
    //resizableWidth: true,
    //resizableHeight: true,
    //minWidth: 200,
    //minHeight: 100,
    //cssClass: 'cm-resize-handle',
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.js"></script>
<script src="https://unpkg.com/cm-resize"></script>

style.scss

.handle {
    position: absolute;
    bottom:0; right:0;
    z-index: 99;
    width:  3em;
    height: 3em;
    margin: -1.5em;
    
    border: .5em solid #bada55;
    border-radius: 100%;
    box-sizing: border-box;
    background: tomato;
    cursor: pointer;

    text-align: center;
    &::after {
        content: '⇕';
        color: black;
        font-size: 2em;
        line-height: .95;
    }

    opacity: .4;
    &:hover {
        opacity: .7;
    }
    
    &.handle-w {
        bottom: 50%;
        transform: rotate(-90deg);
        cursor: ew-resize;
    }
    &.handle-h {
        right: 50%;
        cursor: ns-resize;
    }
}

.handle2 {
    margin: -1em;
    border-radius: 100% 100% 0 0;
    &::after {
        font-size: 1.5em;
        line-height: 1.1;
    }
    &.handle-w {
        margin-bottom: -1.5em;
    }
    &.handle-h {
        margin-right: -1.5em;
    }
}

#joystick3 {
    display: block;
    position: relative;
    width:  80px;
    height: 80px;
    margin: 2em auto 1em auto;

    color: dodgerblue;
    background-image:
        linear-gradient( 45deg, transparent 33%, currentColor 0, currentColor 67%, transparent 0),
        linear-gradient(135deg, transparent 33%, currentColor 0, currentColor 67%, transparent 0);
    transform: rotate(45deg);

    cursor: move;
    
    &::before {
        content: '';
        display: block;
        position: absolute;
        top:5px;left:5px;bottom:5px;right:5px;

        color: black;
        background-image:
            linear-gradient( 45deg, currentColor 15%, transparent 0, transparent 85%, currentColor 0),
            linear-gradient(135deg, currentColor 15%, transparent 0, transparent 85%, currentColor 0),
            radial-gradient(currentColor 35%, transparent 36%);
    }
}


/* Not important */

body {
    background: #444;
    color: #eee;
    font-family: sans-serif;
    
    a {
        color: skyblue;
    }
}

.CodeMirror {
    margin-bottom: 1em;
    font-size: 1.2em;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css" rel="stylesheet" />