mirror of
https://github.com/codex-team/editor.js
synced 2024-05-11 02:46:48 +02:00
46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
|
/**
|
||
|
* Module to compose output JSON preview
|
||
|
*/
|
||
|
const cPreview = (function (module) {
|
||
|
/**
|
||
|
* Shows JSON in pretty preview
|
||
|
* @param {object} output - what to show
|
||
|
* @param {Element} holder - where to show
|
||
|
*/
|
||
|
module.show = function(output, holder) {
|
||
|
/** Make JSON pretty */
|
||
|
output = JSON.stringify( output, null, 4 );
|
||
|
/** Encode HTML entities */
|
||
|
output = encodeHTMLEntities( output );
|
||
|
/** Stylize! */
|
||
|
output = stylize( output );
|
||
|
holder.innerHTML = output;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Converts '>', '<', '&' symbols to entities
|
||
|
*/
|
||
|
function encodeHTMLEntities(string) {
|
||
|
return string.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Some styling magic
|
||
|
*/
|
||
|
function stylize(string) {
|
||
|
/** Stylize JSON keys */
|
||
|
string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
|
||
|
/** Stylize tool names */
|
||
|
string = string.replace( /"(text|quote|list|header|link|code|image|delimiter)"/g, '"<span class=sc_toolname>$1</span>"');
|
||
|
/** Stylize HTML tags */
|
||
|
string = string.replace( /(<[\/a-z]+(>)?)/gi, '<span class=sc_tag>$1</span>' );
|
||
|
/** Stylize strings */
|
||
|
string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
|
||
|
/** Boolean/Null */
|
||
|
string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
|
||
|
return string;
|
||
|
}
|
||
|
|
||
|
return module;
|
||
|
})({});
|