mediawiki-extensions-Visual.../contentEditable/ime.html

<!DOCTYPE html>
<html>
    <head>
        <script src="../modules/jquery/jquery.js"></script>
        <script>
            $( function() {

                var $editor = $('#ce-editor');
                var editorInterval = null;
                var sel = {
                            from: 0,
                            to: 0
                };
                var prevInput = '';

                $editor.blur(function() {
                    if ( editorInterval !== null ) {
                        clearInterval( editorInterval );
                    }
                });

                $editor.focus(function() {
                    prevInput = $editor.html();
                    editorInterval = setInterval( readInput, 100 );
                    sel.from = sel.to =  window.getSelection().getRangeAt(0).startOffset;
                });

                var readInput = function() {
                    var text = $editor.html();
                    if (text === prevInput) {
                        return false;
                    }
                    var same = 0,
                        l = Math.min(prevInput.length, text.length);
                    while ( same < l && prevInput[same] === text[same] ) {
                        ++same;
                    }

                    sel.from = sel.to =  window.getSelection().getRangeAt(0).startOffset - 1;


                    if (same < prevInput.length) {
                        console.log(prevInput.length - same);
                    }


                    var newText = text.slice(same);

                    console.log(sel);
                    console.log(newText);

                    prevInput = text;
                }

            } );

            var oldText = 'Test';
            var newText = 'Teeeeeest';

            var sameFromLeft = 0,
                sameFromRight = 0,
                l = oldText.length;

            while ( sameFromLeft < l && oldText[sameFromLeft] == newText[sameFromLeft] ) {
                ++sameFromLeft;
            }
            if ( oldText.length > sameFromLeft ) {
                l = l - sameFromLeft;
                while ( sameFromRight < l && oldText[oldText.length - 1 - sameFromRight] == newText[newText.length - 1 - sameFromRight] ) {
                    ++sameFromRight;
                }
            }

            console.log('sameFromLeft: ' + sameFromLeft);
            console.log('sameFromRight: ' + sameFromRight);

            if ( sameFromLeft + sameFromRight !== oldText.length ) {
                var toDelete = oldText.split('');
                console.log(toDelete.slice(sameFromLeft,oldText.length - sameFromRight).join(''));
            }

            if ( sameFromLeft + sameFromRight !== newText.length ) {
                var toAdd = newText.split('');
                console.log(toAdd.slice(sameFromLeft, newText.length - sameFromRight).join(''));
            }


        </script>
    </head>
    <body>
        <div style="width: 500px; height: 200px; border: solid 1px;" contenteditable="true" id="ce-editor"></div>
    </body>
</html>