avengerweb/decode.html

## decode.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/decode.js"></script>
    <style>
        .block {
            border: 2px dotted;
            padding: 10px;
            min-height: 100px;
        }
    </style>
</head>
<body>
Editor with image parser, paste here:
<div id='editableDiv' class="block" contenteditable='true' placeholder="pasthere"></div>

<hr/>
Default editor:
<div id='editableDiv' class="block" contenteditable='true' placeholder="pasthere"></div>

<div id="holder">

</div>

</body>
</html>

## decode.js
function hex2bin (hex)
{
    if (typeof hex !== 'string') {
        throw new TypeError('Expected input to be a string')
    }

    if ((hex.length % 2) !== 0) {
        throw new RangeError('Expected string to be an even number of characters')
    }

    var view = new Uint8Array(hex.length / 2)

    for (var i = 0; i < hex.length; i += 2) {
        view[i / 2] = parseInt(hex.substring(i, i + 2), 16)
    }

    return  view;
}

function encode (input) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    while (i < input.length) {
        chr1 = input[i++];
        chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
        chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;

        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
            keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}

window.blob = {};
$(document).ready(function()
{

    // Allow to get all images /shppict, /nonshppict - deprecated
    //@TODO: Parse nonshppict
    let reg = new RegExp(/\{\\\*\\shppict.*?\{\\\*\\blipuid [0-9a-zA-Z]+\}([a-fA-F0-9]+)\}/g);
    let idMatcher = new RegExp(/\{\\\*\\blipuid ([0-9a-zA-Z]+)\}([a-fA-F0-9]+)/);

    let holder = $('#holder');
    $('#editableDiv').on('paste', (e) => {
        var clipboardData, pastedData;

        // Get pasted data via clipboard API
        clipboardData = e.originalEvent.clipboardData || window.clipboardData;

        console.log(clipboardData.getData('text/html'));

        let data = {};

        // clipboardData.types.forEach((type) =>
        // {
        //     data[type] = clipboardData.getData('text/rtf');
        // });
        //
        // $.post('/api/paste', data);

        if (clipboardData.types.filter(type => type === 'text/rtf' || type === 'text/html').length === 2)
        {
            // Stop data actually being pasted into div
            e.preventDefault();
            e.stopPropagation();

            let data = clipboardData.getData('text/rtf');

            // Remove all line separators
            data = data.toString().replace(/(?:\r\n|\r|\n)/g, '');

            let images = [];

            (data.match(reg) || []).forEach((img, index) =>
            {
                let data = img.match(idMatcher);

                images[index] = "data:image/jpg;base64," + encode(hex2bin(data[2]));
            });

            let html = $("<div>"+ clipboardData.getData('text/html') +"</div>")

            let index = 0;

            html.find("img").each(function()
            {
                let href = $(this).attr('src');

                if (href.startsWith("file://") && images[index])
                {
                    $(this).attr('src', images[index]);
                    index++;
                }
            });

            // clipboardData.setData('text/html', html.html());

            $('#editableDiv').html(html);
        }


    });
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="/decode.js"></script>
	<style>
	.block {
	border: 2px dotted;
	padding: 10px;
	min-height: 100px;
	}
	</style>
	</head>
	<body>
	Editor with image parser, paste here:
	<div id='editableDiv' class="block" contenteditable='true' placeholder="pasthere"></div>

	<hr/>
	Default editor:
	<div id='editableDiv' class="block" contenteditable='true' placeholder="pasthere"></div>

	<div id="holder">

	</div>

	</body>
	</html>
	function hex2bin (hex)
	{
	if (typeof hex !== 'string') {
	throw new TypeError('Expected input to be a string')
	}

	if ((hex.length % 2) !== 0) {
	throw new RangeError('Expected string to be an even number of characters')
	}

	var view = new Uint8Array(hex.length / 2)

	for (var i = 0; i < hex.length; i += 2) {
	view[i / 2] = parseInt(hex.substring(i, i + 2), 16)
	}

	return view;
	}

	function encode (input) {
	var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
	var output = "";
	var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
	var i = 0;

	while (i < input.length) {
	chr1 = input[i++];
	chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
	chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

	enc1 = chr1 >> 2;
	enc2 = ((chr1 & 3) << 4) \| (chr2 >> 4);
	enc3 = ((chr2 & 15) << 2) \| (chr3 >> 6);
	enc4 = chr3 & 63;

	if (isNaN(chr2)) {
	enc3 = enc4 = 64;
	} else if (isNaN(chr3)) {
	enc4 = 64;
	}
	output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
	keyStr.charAt(enc3) + keyStr.charAt(enc4);
	}
	return output;
	}

	window.blob = {};
	$(document).ready(function()
	{

	// Allow to get all images /shppict, /nonshppict - deprecated
	//@TODO: Parse nonshppict
	let reg = new RegExp(/\{\\\\\shppict.?\{\\\*\\blipuid [0-9a-zA-Z]+\}([a-fA-F0-9]+)\}/g);
	let idMatcher = new RegExp(/\{\\\*\\blipuid ([0-9a-zA-Z]+)\}([a-fA-F0-9]+)/);

	let holder = $('#holder');
	$('#editableDiv').on('paste', (e) => {
	var clipboardData, pastedData;

	// Get pasted data via clipboard API
	clipboardData = e.originalEvent.clipboardData \|\| window.clipboardData;

	console.log(clipboardData.getData('text/html'));

	let data = {};

	// clipboardData.types.forEach((type) =>
	// {
	// data[type] = clipboardData.getData('text/rtf');
	// });
	//
	// $.post('/api/paste', data);

	if (clipboardData.types.filter(type => type === 'text/rtf' \|\| type === 'text/html').length === 2)
	{
	// Stop data actually being pasted into div
	e.preventDefault();
	e.stopPropagation();

	let data = clipboardData.getData('text/rtf');

	// Remove all line separators
	data = data.toString().replace(/(?:\r\n\|\r\|\n)/g, '');

	let images = [];

	(data.match(reg) \|\| []).forEach((img, index) =>
	{
	let data = img.match(idMatcher);

	images[index] = "data:image/jpg;base64," + encode(hex2bin(data[2]));
	});

	let html = $("<div>"+ clipboardData.getData('text/html') +"</div>")

	let index = 0;

	html.find("img").each(function()
	{
	let href = $(this).attr('src');

	if (href.startsWith("file://") && images[index])
	{
	$(this).attr('src', images[index]);
	index++;
	}
	});

	// clipboardData.setData('text/html', html.html());

	$('#editableDiv').html(html);
	}


	});
	});