croco-html 0.2.8 → 0.2.10

package/fesm2020/croco-html.mjs

@@ -74,15 +74,23 @@ class FileImageTagDataConsts {
 FileImageTagDataConsts.TagName = "file-image";
 FileImageTagDataConsts.FileIdAttrName = "file-id";
 class ImageMethods {
-    static buildUrl(fileId) {
-        return `/FileCopies/Images/Medium/${fileId}.jpg`;
+    static buildUrl(fileId, options) {
+        var baseUrl = `/FileCopies/Images/Medium/${fileId}.jpg`;
+        if (!options.useCustomDomain) {
+            return baseUrl;
+        }
+        return `${options.domain}${baseUrl}`;
     }
-    static buildSmallUrl(fileId) {
-        return `/FileCopies/Images/Small/${fileId}.jpg`;
+    static buildSmallUrl(fileId, options) {
+        var baseUrl = `/FileCopies/Images/Small/${fileId}.jpg`;
+        if (!options.useCustomDomain) {
+            return baseUrl;
+        }
+        return `${options.domain}${baseUrl}`;
     }
-    static ExtractImage(elem) {
+    static ExtractImage(elem, options) {
         let fileId = +elem.getAttribute(FileImageTagDataConsts.FileIdAttrName);
-        let src = ImageMethods.buildUrl(fileId);
+        let src = ImageMethods.buildUrl(fileId, options);
         return {
             type: FileImageTagDataConsts.TagName,
             data: {
@@ -374,7 +382,7 @@ class FileIdSelectComponent {
         this.onFileIdChanged.emit(fileId);
     }
     getSrc(fileId) {
-        return ImageMethods.buildSmallUrl(fileId);
+        return ImageMethods.buildSmallUrl(fileId, { useCustomDomain: false, domain: "" });
     }
     ngOnInit() {
         this.loadFiles();
@@ -424,7 +432,7 @@ class ImageEditorComponent {
         this.onTagUpdated = new EventEmitter();
     }
     getSrc() {
-        return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
+        return ImageMethods.buildUrl(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName], { useCustomDomain: false, domain: "" });
     }
     hasFileId() {
         return this.tag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && !isNaN(this.tag.attributes[FileImageTagDataConsts.FileIdAttrName]);
@@ -512,10 +520,10 @@ class XmlTagViewComponent {
     }
 }
 XmlTagViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-XmlTagViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'image'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u0431\u043E\u043B\u044C\u0448\u0435 \u0431\u043E\u043B\u044C\u0448\u0435 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                \u0412\u043C\u0435\u0442\u043E \u044D\u0442\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0438\u043C\u0435\u043D\u0443\u0439\u0442\u0435 \u0442\u0435\u0433 image \u043D\u0430 file-image\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }], encapsulation: i0.ViewEncapsulation.None });
+XmlTagViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: XmlTagViewComponent, selector: "croco-html-xml-tag-view", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: XmlTagHtmlViewComponent, selector: "croco-html-xml-tag-html-view", inputs: ["html"] }, { kind: "component", type: XmlTagTextViewComponent, selector: "croco-html-xml-tag-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagHeaderTextViewComponent, selector: "croco-html-xml-tag-header-text-view", inputs: ["item"] }, { kind: "component", type: XmlTagExternalVideoComponent, selector: "croco-html-xml-tag-external-video", inputs: ["data", "tagData"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: XmlTagViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'image'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u0431\u043E\u043B\u044C\u0448\u0435 \u0431\u043E\u043B\u044C\u0448\u0435 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                \u0412\u043C\u0435\u0442\u043E \u044D\u0442\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0438\u043C\u0435\u043D\u0443\u0439\u0442\u0435 \u0442\u0435\u0433 image \u043D\u0430 file-image\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
+            args: [{ selector: 'croco-html-xml-tag-view', encapsulation: ViewEncapsulation.None, template: "<div class=\"\">\r\n    <div class=\"row\" *ngFor=\"let item of data\">\r\n        <div *ngIf=\"item.type === 'text'\">\r\n            <croco-html-xml-tag-text-view [item]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'html-raw'\" [innerHTML]=\"item.data.innerHTML\">\r\n        </div>\r\n        <div *ngIf=\"item.type === 'h1' || item.type === 'h2' || item.type === 'h3' || item.type === 'h4' || item.type === 'h5' || item.type === 'h6'\">\r\n            <croco-html-xml-tag-header-text-view [item]=\"item\"></croco-html-xml-tag-header-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'file-image'\">\r\n            <img class=\"mx-auto d-block img-fluid\" [src]=\"item.data.src\"/>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'table'\">\r\n    \r\n            <croco-html-xml-tag-html-view *ngIf=\"item.validationResult.isSucceeded\" [html]=\"item.bootstrapHtml\">\r\n            </croco-html-xml-tag-html-view>\r\n             \r\n            <app-tutor-baseapiresponse-banner \r\n                *ngIf=\"item.validationResult && !item.validationResult.isSucceeded\" \r\n                [message]=\"item.validationResult.message\">\r\n            </app-tutor-baseapiresponse-banner>\r\n        </div>\r\n    \r\n        <div *ngIf=\"item.type === 'rich-text'\">\r\n            <croco-html-xml-tag-text-view [richTextData]=\"item\"></croco-html-xml-tag-text-view>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'external-video'\">\r\n            <croco-html-xml-tag-external-video [data]=\"item\"></croco-html-xml-tag-external-video>\r\n        </div>\r\n        <div *ngIf=\"item.type === 'unsupported-tag'\" class=\"red\" style=\"margin-top: 10px;\" >\r\n            <h4>\u0414\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u0433 \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F</h4>\r\n            <span>\r\n                {{item.data.tagString}}\r\n            </span>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".red{background-color:#c94444;color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }] } });
@@ -732,10 +740,10 @@ TableTypes.TableRowColumnData = "table-row-column-data";
 TableTypes.Table = "table";
 TableTypes.TableRowColumn = "table-row-column";
 class TableMethods {
-    static getTableFromHtmlTag(tableTag) {
+    static getTableFromHtmlTag(tableTag, options) {
         let tableData = {
             header: TableMethods.getHeader(tableTag),
-            rows: TableMethods.getTableRows(tableTag)
+            rows: TableMethods.getTableRows(tableTag, options)
         };
         var result = {
             type: TableTypes.Table,
@@ -797,7 +805,7 @@ class TableMethods {
             columns: headerColumns
         };
     }
-    static getTableRows(tableTag) {
+    static getTableRows(tableTag, options) {
         let tBody = tableTag.tBodies.item(0);
         let rows = [];
         for (let i = 0; i < tBody.children.length; i++) {
@@ -805,7 +813,7 @@ class TableMethods {
             let rowColumns = [];
             for (let j = 0; j < iElement.children.length; j++) {
                 const jElement = iElement.children.item(j);
-                let children = HtmlExtractionMethods.transformHtmlElementToBlocks(jElement);
+                let children = HtmlExtractionMethods.transformHtmlElementToBlocks(jElement, options);
                 if (children.length === 0) {
                     var textTag = document.createElement("p");
                     textTag.innerHTML = jElement.innerHTML;
@@ -865,7 +873,7 @@ class HtmlExtractionMethods {
         data.type = tagName;
         return data;
     }
-    static transformHtmlElementToBlocks(element) {
+    static transformHtmlElementToBlocks(element, options) {
         var data = [];
         for (let i = 0; i < element.children.length; i++) {
             var elem = element.children.item(i);
@@ -879,13 +887,13 @@ class HtmlExtractionMethods {
             }
             else {
                 var extractor = HtmlExtractionMethods.Extractors[elem.tagName];
-                var result = extractor(elem);
+                var result = extractor(elem, options);
                 data.push(result);
             }
         }
         return data;
     }
-    static transformHtmlStringToBlocks(value) {
+    static transformHtmlStringToBlocks(value, options) {
         if (value === undefined) {
             return [];
         }
@@ -894,27 +902,27 @@ class HtmlExtractionMethods {
             .replace('\t', '');
         var div = document.createElement("div");
         div.innerHTML = value;
-        return this.transformHtmlElementToBlocks(div);
+        return this.transformHtmlElementToBlocks(div, options);
     }
 }
 HtmlExtractionMethods.Extractors = {
-    ["TEXT"]: (elem) => TextSimpleMethods.ExtractTextTag(elem),
-    ["FILE-IMAGE"]: (elem) => ImageMethods.ExtractImage(elem),
-    ["TABLE"]: (elem) => TableMethods.getTableFromHtmlTag(elem),
-    ["RICH-TEXT"]: (elem) => TextMethods.ExtractRichTextData(elem),
-    ["HTML-RAW"]: (elem) => ({
+    ["TEXT"]: (elem, options) => TextSimpleMethods.ExtractTextTag(elem),
+    ["FILE-IMAGE"]: (elem, options) => ImageMethods.ExtractImage(elem, options),
+    ["TABLE"]: (elem, options) => TableMethods.getTableFromHtmlTag(elem, options),
+    ["RICH-TEXT"]: (elem, options) => TextMethods.ExtractRichTextData(elem),
+    ["HTML-RAW"]: (elem, options) => ({
         type: "html-raw",
         data: {
             innerHTML: elem.innerHTML
         }
     }),
-    ["H1"]: (elem) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h1"),
-    ["H2"]: (elem) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h2"),
-    ["H3"]: (elem) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h3"),
-    ["H4"]: (elem) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h4"),
-    ["H5"]: (elem) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h5"),
-    ["H6"]: (elem) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h6"),
-    [ExternalVideoTagDataConsts.TagName.toUpperCase()]: (elem) => VideoMethods.ExtractExternalVideoTag(elem)
+    ["H1"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h1"),
+    ["H2"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h2"),
+    ["H3"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h3"),
+    ["H4"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h4"),
+    ["H5"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h5"),
+    ["H6"]: (elem, options) => HtmlExtractionMethods.ExtractHeaderTag(elem, "h6"),
+    [ExternalVideoTagDataConsts.TagName.toUpperCase()]: (elem, options) => VideoMethods.ExtractExternalVideoTag(elem)
 };
 
 class HtmlRawTagDataConsts {
@@ -965,8 +973,8 @@ class BodyTagsExtensions {
         }
         return `<${FileImageTagDataConsts.TagName} ${attrStr}></${FileImageTagDataConsts.TagName}>`;
     }
-    static getBodyTags(html) {
-        let result = HtmlExtractionMethods.transformHtmlStringToBlocks(html);
+    static getBodyTags(html, options) {
+        let result = HtmlExtractionMethods.transformHtmlStringToBlocks(html, options);
         return result.map(x => BodyTagsExtensions.toBodyTag(x));
     }
     static sanitizeInnerHtml(html) {
@@ -1224,7 +1232,7 @@ class VisualEditorComponent {
         this.onHtmlChanged.emit(this.html);
     }
     recalculateBodyTags() {
-        this.bodyTags = BodyTagsExtensions.getBodyTags(this.html);
+        this.bodyTags = BodyTagsExtensions.getBodyTags(this.html, { useCustomDomain: false, domain: "" });
     }
     ngOnInit() {
         this.recalculateBodyTags();
@@ -1253,7 +1261,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class ToPreviewPipe {
     transform(value) {
-        return HtmlExtractionMethods.transformHtmlStringToBlocks(value);
+        return HtmlExtractionMethods.transformHtmlStringToBlocks(value, {
+            useCustomDomain: false,
+            domain: ""
+        });
     }
 }
 ToPreviewPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToPreviewPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -1398,7 +1409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 
 class ToHtmlBodyTagsPipe {
     transform(value) {
-        return BodyTagsExtensions.getBodyTags(value);
+        return BodyTagsExtensions.getBodyTags(value, { useCustomDomain: false, domain: "" });
     }
 }
 ToHtmlBodyTagsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToHtmlBodyTagsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -1410,6 +1421,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class ToPreviewHtmlPipe {
+    transform(value, options) {
+        return HtmlExtractionMethods.transformHtmlStringToBlocks(value, options);
+    }
+}
+ToPreviewHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToPreviewHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ToPreviewHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ToPreviewHtmlPipe, name: "topreviewhtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToPreviewHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'topreviewhtml'
+                }]
+        }] });
+
 class TableBuilder {
     static getTableMarkUp(rows, cols, generateHeaders) {
         rows = +rows;
@@ -1547,5 +1572,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, ExternalVideoBlockComponent, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, HtmlRawEditorComponent, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, ToHtmlBodyTagsPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
+export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlModule, ExternalVideoBlockComponent, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, HtmlRawEditorComponent, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, RichTextToHtmlPipe, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextMethods, TextSimpleMethods, TextTag, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VideoMethods, VisualEditorComponent, XmlExtensions, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagRichTextViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
 //# sourceMappingURL=croco-html.mjs.map