import AbstractView from "./base-view" ; import StructureType from "../const/structure-type" ; import { HeadingEnum } from "../components/heading" ; import { ListType } from "../components/list" ; import { AnyObject } from "../decorate" ; class HtmlView extends AbstractView < string > { formatStyle ( styleName ) { return styleName . replace ( /([A-Z])/ , "-$1" ) . toLocaleLowerCase ( ) ; } getStyle ( style ) { let styleFormat = Object . keys ( style ) . map ( ( key ) => `${ this . formatStyle ( key ) }:${ style [ key ] };` ) ; if ( styleFormat . length ) { return ` style="${ styleFormat . join ( "" ) }"` ; } return "" ; } getData ( data ) { let format = Object . keys ( data ) . map ( ( key ) => `data-${ key }=${ data [ key ] };` ) ; if ( format . length ) { return ` ${ format . join ( " " ) }"` ; } return "" ; } buildHtml ( tag , className , style , children , data = { } ) { return `<${ tag }${ className ? ` class=${ className }` : "" }${ this . getStyle ( style ) }${ this . getData ( data ) }>${ children }</${ tag }>` ; } buildArticle ( id , getChildren , style , data ) { return this . buildHtml ( "article" , "zebra-editor-article" , style , getChildren ( ) . join ( "" ) ) ; } buildCustomCollection ( id , tag , getChildren , style , data ) { return this . buildHtml ( "div" , "zebra-editor-customer-collection" , style , getChildren ( ) . join ( "" ) ) ; } buildTable ( id , getChildren , style , data ) { let table = this . buildHtml ( "table" , "" , { minWidth : "100%" , borderCollapse : "collapse" , } , getChildren ( ) . join ( "" ) ) ; return this . buildHtml ( "figure" , "zebra-editor-table" , style , table ) ; } buildTableRow ( id , getChildren , style , data ) { return this . buildHtml ( "tr" , "zebra-editor-tr" , style , getChildren ( ) . join ( "" ) ) ; } buildTableCell ( id , cellType , getChildren , style , data ) { return this . buildHtml ( cellType , `zebra-editor-${ cellType }` , style , getChildren ( ) . join ( "" ) ) ; } buildList ( id , listType , getChildren , style , data ) { return this . buildHtml ( listType , "zebra-editor-list" , style , getChildren ( ) . join ( "" ) ) ; } buildListItem ( list , structureType ) { let style = { } ; if ( structureType !== StructureType . content ) { style . display = "block" ; } return this . buildHtml ( "li" , "zebra-editor-list-item" , style , list ) ; } buildParagraph ( id , getChildren , style , data ) { let tag = data . tag || "p" ; return this . buildHtml ( tag , `zebra-editor-${ tag }` , style , `<span>${ getChildren ( ) . join ( "" ) || "<br />" }</span>` ) ; } buildHeading ( id , type , getChildren , style , data ) { return this . buildHtml ( type , `zebra-editor-${ type }` , style , `<span>${ getChildren ( ) . join ( "" ) || "<br />" }</span>` ) ; } buildCodeBlock ( id , content , language , style , data ) { return `<pre class="zebra-editor-code-block"${ this . getStyle ( style ) }${ this . getData ( data ) } data-language="${ language }"><code>${ content }</code></pre>` ; } buildeImage ( id , src , style , data ) { let image = `<img src="${ src }" alt="${ data . alt }" />` ; if ( data . link ) { image = `<a href="${ data . link }">${ image }</a>` ; } let className = `zebra-editor-image` ; return `<figure class="${ className }"${ this . getStyle ( style ) }>${ image }</figure>` ; } buildeAudio ( id , src , style , data ) { let image = `<audio src="${ src }" alt="${ data . alt }" />` ; let className = `zebra-editor-image` ; return `<figure class="${ className }"${ this . getStyle ( style ) }>${ image }</figure>` ; } buildeVideo ( id , src , style , data ) { let image = `<video src="${ src }" alt="${ data . alt }" />` ; let className = `zebra-editor-image` ; return `<figure class="${ className }"${ this . getStyle ( style ) }>${ image }</figure>` ; } buildCharacterList ( id , text , style , data ) { let content = text ; if ( data . link ) { content = `<a href=${ data . link }>${ content }</a>` ; } if ( data . bold ) { content = `<strong>${ content }</strong>` ; } if ( data . italic ) { content = `<em>${ content }</em>` ; } if ( data . deleteText ) { content = `<s>${ content }</s>` ; } if ( data . underline ) { content = `<u>${ content }</u>` ; } if ( data . code ) { content = `<code>${ content }</code>` ; } content = `<span${ this . getStyle ( style ) }>${ content }</span>` ; return content ; } buildInlineImage ( id , src , style , data ) { let image = `<img src="${ src }" alt="${ data . alt || "" }" />` ; if ( data . link ) { image = `<a href="${ data . link }">${ image }</a>` ; } let className = `zebra-editor-inline-image` ; return `<span class="${ className }"${ this . getStyle ( style ) }>${ image }</span>` ; } } export default HtmlView ;