croco-html 4.3.1 → 4.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/croco-html.mjs
CHANGED
|
@@ -143,7 +143,6 @@ class HtmlExtractionMethods {
|
|
|
143
143
|
const tagService = BodyTagsExtensions.getTagService(loweredTagName, options);
|
|
144
144
|
const resultBlock = tagService.extractBlockFromHtmlElement(elem, options);
|
|
145
145
|
data.push(resultBlock);
|
|
146
|
-
continue;
|
|
147
146
|
}
|
|
148
147
|
else {
|
|
149
148
|
data.push({
|
|
@@ -1019,15 +1018,15 @@ class BodyTagsExtensions {
|
|
|
1019
1018
|
}
|
|
1020
1019
|
return options.definedCustomTags[tagName];
|
|
1021
1020
|
}
|
|
1022
|
-
static convertToHtmlString(bodyTag) {
|
|
1021
|
+
static convertToHtmlString(bodyTag, options) {
|
|
1023
1022
|
const tagName = bodyTag.tagDescription.tag;
|
|
1024
|
-
if (this.
|
|
1025
|
-
return this.
|
|
1023
|
+
if (this.hasTagService(tagName, options)) {
|
|
1024
|
+
return this.getTagService(tagName, options).bodyTagToHtmlStringConverter(bodyTag);
|
|
1026
1025
|
}
|
|
1027
1026
|
return `<mapper-not-found>"${bodyTag.tagDescription.tag}" тег не найден.</mapper-not-found>`;
|
|
1028
1027
|
}
|
|
1029
|
-
static bodyTagsToHtml(bodyTags) {
|
|
1030
|
-
let htmls = bodyTags.map(bodyTag => (BodyTagsExtensions.convertToHtmlString(bodyTag)));
|
|
1028
|
+
static bodyTagsToHtml(bodyTags, options) {
|
|
1029
|
+
let htmls = bodyTags.map(bodyTag => (BodyTagsExtensions.convertToHtmlString(bodyTag, options)));
|
|
1031
1030
|
let result = "";
|
|
1032
1031
|
for (let index = 0; index < htmls.length; index++) {
|
|
1033
1032
|
const element = htmls[index];
|
|
@@ -2282,6 +2281,7 @@ class MainEditorBlockComponent {
|
|
|
2282
2281
|
this.onTagSaved.emit(this.tag);
|
|
2283
2282
|
}
|
|
2284
2283
|
isDefinedCustomTag() {
|
|
2284
|
+
console.log("isDefinedCustomTag()", this._options);
|
|
2285
2285
|
if (this._options.definedCustomTags.hasOwnProperty(this.tag.tagDescription.tag)) {
|
|
2286
2286
|
return true;
|
|
2287
2287
|
}
|
|
@@ -2291,7 +2291,7 @@ class MainEditorBlockComponent {
|
|
|
2291
2291
|
this.onTagRemoved.emit(this.tag);
|
|
2292
2292
|
}
|
|
2293
2293
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorBlockComponent, deps: [{ token: CrocoHtmlOptionsToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2294
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n
|
|
2294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MainEditorBlockComponent, isStandalone: true, selector: "croco-html-main-editor-block", inputs: { tag: "tag" }, outputs: { onTagSaved: "onTagSaved", onTagRemoved: "onTagRemoved" }, ngImport: i0, template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n <div>\n <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-text-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'file-image') {\n <div>\n <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-image-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'custom-widget') {\n <div>\n <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-custom-widget-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'external-video') {\n <div>\n <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-external-video-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'download-file-button') {\n <div>\n <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-download-file-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'button') {\n <div>\n <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'html-raw') {\n <div>\n <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-html-raw-editor>\n </div>\n }\n @else if (isDefinedCustomTag()) {\n <div>\n <croco-html-defined-custom-editor-block [tag]=\"tag\"\n (onTagUpdated)=\"tagUpdatedHandler($event)\"></croco-html-defined-custom-editor-block>\n </div>\n }\n @else {\n <div>\n {{tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n </div>\n <div>\n {{tag | json}}\n </div>\n }\n\n </div>\n\n <div class=\"d-flex justify-content-between\">\n <div class=\"d-flex justify-content-end align-self-center\">\n <div style=\"margin-left: 16px;min-width: 96px\">\n @if (tag.presentOrEdit) {\n <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n fill=\"#323E8B\" />\n </svg>\n </button>\n }\n @else {\n <button (click)=\"save()\" mat-icon-button>\n <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n <title id=\"saveIconTitle\">Save</title>\n <path\n d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n </svg>\n </button>\n }\n <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n fill=\"#F96666\" />\n </svg>\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "croco-html-text-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ImageEditorComponent, selector: "croco-html-image-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: DownloadFileButtonEditorComponent, selector: "croco-html-download-file-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: HtmlRawEditorComponent, selector: "croco-html-html-raw-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: ExternalVideoEditorComponent, selector: "croco-html-external-video-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: ButtonEditorComponent, selector: "croco-html-button-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }, { kind: "component", type: CustomWidgetEditorComponent, selector: "croco-html-custom-widget-editor", inputs: ["tag"], outputs: ["onTagUpdated"] }] }); }
|
|
2295
2295
|
}
|
|
2296
2296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MainEditorBlockComponent, decorators: [{
|
|
2297
2297
|
type: Component,
|
|
@@ -2304,7 +2304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2304
2304
|
ExternalVideoEditorComponent,
|
|
2305
2305
|
ButtonEditorComponent,
|
|
2306
2306
|
CustomWidgetEditorComponent
|
|
2307
|
-
], template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n
|
|
2307
|
+
], template: "<div class=\"main-editor-block\">\n <div class=\"editor-container\">\n @if (textTags.includes(tag.tagDescription.tag)) {\n <div>\n <croco-html-text-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-text-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'file-image') {\n <div>\n <croco-html-image-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-image-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'custom-widget') {\n <div>\n <croco-html-custom-widget-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-custom-widget-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'external-video') {\n <div>\n <croco-html-external-video-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-external-video-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'download-file-button') {\n <div>\n <croco-html-download-file-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-download-file-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'button') {\n <div>\n <croco-html-button-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-button-editor>\n </div>\n }\n @else if (tag.tagDescription.tag === 'html-raw') {\n <div>\n <croco-html-html-raw-editor (onTagUpdated)=\"tagUpdatedHandler($event)\" [tag]=\"tag\">\n </croco-html-html-raw-editor>\n </div>\n }\n @else if (isDefinedCustomTag()) {\n <div>\n <croco-html-defined-custom-editor-block [tag]=\"tag\"\n (onTagUpdated)=\"tagUpdatedHandler($event)\"></croco-html-defined-custom-editor-block>\n </div>\n }\n @else {\n <div>\n {{tag.tagDescription.tag}} \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\n </div>\n <div>\n {{tag | json}}\n </div>\n }\n\n </div>\n\n <div class=\"d-flex justify-content-between\">\n <div class=\"d-flex justify-content-end align-self-center\">\n <div style=\"margin-left: 16px;min-width: 96px\">\n @if (tag.presentOrEdit) {\n <button (click)=\"tag.presentOrEdit = false\" mat-icon-button>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M14.4374 0C15.0921 0 15.7197 0.261421 16.1781 0.723424L19.279 3.82432C19.7407 4.286 20.0001 4.91217 20.0001 5.56508C20.0001 6.21799 19.7407 6.84416 19.279 7.30584L7.95751 18.6238C7.25903 19.4295 6.2689 19.9245 5.1346 20.0023H0V19.0023L0.00324754 14.7873C0.0884381 13.7328 0.578667 12.7523 1.3265 12.0934L12.6954 0.72463C13.1564 0.260831 13.7834 0 14.4374 0ZM5.06401 18.0048C5.59823 17.967 6.09551 17.7184 6.49482 17.2616L14.0567 9.69971L10.3024 5.94518L2.69613 13.5496C2.29098 13.9079 2.04034 14.4092 2.00003 14.8678V18.0029L5.06401 18.0048ZM11.7167 4.53114L15.471 8.28549L17.8648 5.89162C17.9514 5.80502 18.0001 5.68756 18.0001 5.56508C18.0001 5.4426 17.9514 5.32514 17.8648 5.23854L14.7612 2.13486C14.6755 2.04855 14.559 2 14.4374 2C14.3158 2 14.1992 2.04855 14.1136 2.13486L11.7167 4.53114Z\"\n fill=\"#323E8B\" />\n </svg>\n </button>\n }\n @else {\n <button (click)=\"save()\" mat-icon-button>\n <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\"\n aria-labelledby=\"saveIconTitle\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"square\"\n stroke-linejoin=\"miter\" fill=\"none\" color=\"#000000\">\n <title id=\"saveIconTitle\">Save</title>\n <path\n d=\"M17.2928932,3.29289322 L21,7 L21,20 C21,20.5522847 20.5522847,21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 L16.5857864,3 C16.8510029,3 17.1053568,3.10535684 17.2928932,3.29289322 Z\" />\n <rect width=\"10\" height=\"8\" x=\"7\" y=\"13\" />\n <rect width=\"8\" height=\"5\" x=\"8\" y=\"3\" />\n </svg>\n </button>\n }\n <button (click)=\"deleteItem()\" mat-icon-button color=\"warn\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M7.49988 0.833332H12.4999C13.4204 0.833332 14.1665 1.57952 14.1665 2.5V3.33333H16.6665C17.587 3.33333 18.3332 4.07952 18.3332 4.99999V6.66666C18.3332 7.58714 17.587 8.33333 16.6665 8.33333H16.5998L15.8332 17.5C15.8332 18.4205 15.087 19.1667 14.1665 19.1667H5.8332C4.91272 19.1667 4.16653 18.4205 4.16941 17.5692L3.39975 8.33333H3.33317C2.4127 8.33333 1.6665 7.58714 1.6665 6.66666V4.99999C1.6665 4.07952 2.4127 3.33333 3.33317 3.33333H5.83321V2.5C5.83321 1.57952 6.5794 0.833332 7.49988 0.833332ZM5.83321 5V4.99999H3.33317V6.66666H16.6665V4.99999L14.1665 5H5.83321ZM5.83324 17.5L5.07198 8.33333H14.9276L14.1695 17.4308L14.1666 17.5H5.83324ZM12.4999 2.5V3.33334H7.49992V2.5H12.4999Z\"\n fill=\"#F96666\" />\n </svg>\n </button>\n </div>\n </div>\n\n </div>\n</div>", styles: [".main-editor-block{display:flex;justify-content:space-between}.editor-container{flex-grow:1}@media screen and (max-width: 700px){.main-editor-block{display:flex;flex-direction:column}}\n"] }]
|
|
2308
2308
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2309
2309
|
type: Inject,
|
|
2310
2310
|
args: [CrocoHtmlOptionsToken]
|
|
@@ -2460,7 +2460,7 @@ class VisualEditorComponent {
|
|
|
2460
2460
|
this.recalculateHtml();
|
|
2461
2461
|
}
|
|
2462
2462
|
recalculateHtml() {
|
|
2463
|
-
let result = BodyTagsExtensions.bodyTagsToHtml(this.bodyTags);
|
|
2463
|
+
let result = BodyTagsExtensions.bodyTagsToHtml(this.bodyTags, this._options);
|
|
2464
2464
|
this.html = XmlExtensions.formatXml("<body>" + result + "</body>");
|
|
2465
2465
|
this.onHtmlChanged.emit(this.html);
|
|
2466
2466
|
}
|