";
this.jsonContent.map((jsonItem, index) => {
result+= `
';
result = result.replace(/(\r\n|\n|\r|\t)/gm, "");
this.html = result;
this.calculateReadingTime();
}
/**
* Render the html content in specific element
*
* @param selector
*/
render(selector: string): void {
const element: Element|null = document.querySelector(selector);
if(element != null) {
if(this.html) {
element.innerHTML = this.html;
HtmlViewer.applyHandlers();
}
else {
console.error('The html content is empty !');
}
}
else {
console.error('The element is not found !');
}
}
/**
* Parse paragraph item type to html.
*
* @param jsonItem
*/
parseParagraph(jsonItem: ParagraphElement): string {
const data = jsonItem.data;
if(data.text.length == 0) return '`;
switch(jsonItem.type) {
case "paragraph": result+= this.parseParagraph(jsonItem); break;
case "text": result+= this.parseParagraph(jsonItem); break;
case "header": result+= this.parseHeader(jsonItem); break;
case "table": result+= this.parseTable(jsonItem); break;
case "image": result+= this.parseImage(jsonItem); break;
case "quote": result+= this.parseQuote(jsonItem); break;
case "list": result+= this.parseList(jsonItem); break;
case "link": result+= this.parseLink(jsonItem); break;
case "delimiter": result+= this.parseDelimiter(jsonItem); break;
case "checklist": result+= this.parseChecklist(jsonItem); break;
case "warning": result+= this.parseWarning(jsonItem); break;
case "code": result+= this.parseCode(jsonItem); break;
case "embed": result+= this.parseEmbed(jsonItem); break;
case "personality": result+= this.parsePersonality(jsonItem); break;
case "attaches": result+= this.parseAttaches(jsonItem); break;
}
result+= '
';
});
result+= ''; this.addPlainText(data.text); return `
${data.text}
`; } /** * Parse header item type to html. * * @param jsonItem */ parseHeader(jsonItem: HeaderElement): string { const data = jsonItem.data; const level: String = (data.level)? data.level : "1"; this.addPlainText(data.text); const headerClass = (this.options.withDefaultStyle)? `class="h${level}"` : ''; return `| ${col} | `; this.addPlainText(col); }); heading+= '
|---|
| ${col} | `; this.addPlainText(col); }); table+= '
`+
'';
imageLayout+= `
`;
if(data.caption) {
imageLayout+= `
";
return imageLayout;
}
/**
* Parse image item type with it's styles and caption to html.
*
* @param jsonItem
*/
parseQuote(jsonItem: QuoteElement): string {
const data = jsonItem.data;
let alignment = data.alignment || 'left';
const beginIcon = ``;
const endIcon = ``;
let quote = `
${data.caption}
`; } imageLayout+= "${beginIcon} ${data.text} ${endIcon}
- ` : `
- `}`;
let endList = `${data.style == 'ordered'? '
';
linkLayout+= `
';
if(data.meta.image.url) {
linkLayout+= '${data.meta.title}
`; linkLayout+= (data.meta.description)? `${data.meta.description}
` : ''; linkLayout+= `${data.link}`; linkLayout+= '';
linkLayout+= `
`;
linkLayout+= '
';
}
linkLayout+= '';
this.addPlainText(`${data.meta.title} ${data.meta.description || ''}`);
return linkLayout;
}
/**
* get delimiter html content.
*
*/
parseDelimiter(jsonItem: EditorJsElement): string {
return "`;
linkLayout+= '* * *
";
}
/**
* Parse check list items with checked property.
*
*/
parseChecklist(jsonItem: CheckListElement): string {
const data = jsonItem.data;
let plainText = "";
let checkList = '';
data.items.forEach((item) => {
checkList+= '
';
this.addPlainText(plainText);
return checkList;
}
/**
* Parse warning item.
*
*/
parseWarning(jsonItem: WarningElement): string {
const data = jsonItem.data;
let warning = '';
checkList+= `
`;
checkList+= `
';
plainText+= ` ${item.text}`;
});
checkList+= '${item.text}
`; checkList+= '';
warning+= `
'
this.addPlainText(`${data.title} ${data.message}`);
return warning;
}
/**
* Parse code element to html.
*
* @param jsonItem
*/
parseCode(jsonItem: CodeElement): string {
const data = jsonItem.data;
let code = `';
this.addPlainText(data.code);
return code;
}
/**
* Parse embed link to html.
*
* @param jsonItem
*/
parseEmbed(jsonItem: EmbedElement): string {
const data = jsonItem.data;
let embedLayout = '';
return embedLayout;
}
/**
* Parse personality card to html.
*
* @param jsonItem
*/
parsePersonality(jsonItem: PersonalityElement): string {
const data = jsonItem.data;
let personality = `👉 ${data.title}
`; warning+= `${data.message}
`; warning+= '`;
personality+= ``;
if(data.photo) {
personality+= `
`
}
personality+= '
';
this.addPlainText(`${data.name} ${data.description}`);
return personality;
}
/**
* Parse attchments to html
*
* @param jsonItem
*/
parseAttaches(jsonItem: AttachesElement): string {
const data = jsonItem.data;
let attachment = ``+
``+
``+
`
`+
'Show'+
``;
return attachment;
}
/**
* Apply some handlers to let features work correctly.
*
*/
static applyHandlers() {
if(typeof document == 'undefined') {
throw new Error('document is not defined, you can\'t call the applyHandlers function from server side.');
}
this.registerCopyHandler();
this.registerScaleImageHandler();
}
/**
* Register copy handler, to copy code text in code feature.
*
*/
private static registerCopyHandler(): void {
const copyBtns = document.querySelectorAll('.ede .copy-code-btn');
copyBtns.forEach((btn, index) => {
btn.addEventListener('click', function() {
const value = btn.parentElement?.querySelector('.code-value')?.innerHTML;
if(value) {
navigator.clipboard.writeText(value);
}
const svg = btn.querySelector('svg');
if(svg) {
svg.style.display = "none";
}
let copiedNote = document.createElement('span');
copiedNote.className = "copied-note";
copiedNote.innerHTML = 'copied 👍';
btn.append(copiedNote);
setTimeout(() => {
if(svg) {
svg.style.display = "inline-block";
copiedNote.remove();
}
}, 1500)
});
});
}
/**
* Register scale image handler.
*
*/
private static registerScaleImageHandler(): void {
const scaleBtns = document.querySelectorAll('.ede .scale-image-btn');
scaleBtns.forEach((btn, index) => {
btn.addEventListener('click', function() {
if(btn.parentElement!.classList.contains('scaled')) {
btn.innerHTML = '';
btn.parentElement!.classList.remove('scaled');
}
else {
btn.parentElement!.classList.add('scaled');
btn.innerHTML = '';
}
});
});
}
/**
* Add the plain text
*/
private addPlainText(text: String): void {
this.plainText+= ` ${text}`;
}
/**
* Calculate the reading time based on words count
* and word per minute
*/
private calculateReadingTime(): void {
const wordsCount: number = this.plainText.split(' ').length;
if(wordsCount > 0) {
const minutes: number = Math.ceil(wordsCount / this.wpm);
this.readingTime.wordsCount = wordsCount;
this.readingTime.minutes = minutes;
}
}
/**
* Reading time getter
*
*/
public getReadingTime(): ReadingTime {
return this.readingTime;
}
public toString = (): String|undefined => {
return this.html;
}
}
export default HtmlViewer;${data.file.name}
`+ `${(data.file.size)? `${data.file.size} MiB` : ''}`+ `