croco-html 4.1.0 → 4.1.1

package/fesm2022/croco-html.mjs

@@ -223,26 +223,415 @@ class ImageMethods {
     }
 }
 
-var EAlignments;
-(function (EAlignments) {
-    EAlignments["Left"] = "left";
-    EAlignments["Center"] = "center";
-    EAlignments["Right"] = "right";
-})(EAlignments || (EAlignments = {}));
-const AlignmentsData = [
-    { value: EAlignments.Left, text: 'Слева' },
-    { value: EAlignments.Center, text: 'По центру' },
-    { value: EAlignments.Right, text: 'Справа' },
-];
+class FileImageTagService {
+    constructor() {
+        this.tagName = FileImageTagDataConsts.TagName;
+        this.shortDescription = "Изображение";
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        let fileIdAttr = "";
+        let screenMediaRequestAttr = "";
+        if (bodyTag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && bodyTag.attributes[FileImageTagDataConsts.FileIdAttrName]) {
+            fileIdAttr = `${FileImageTagDataConsts.FileIdAttrName}="${bodyTag.attributes[FileImageTagDataConsts.FileIdAttrName]}"`;
+        }
+        if (bodyTag.attributes.hasOwnProperty(FileImageTagDataConsts.ScreenMediaRequest) && bodyTag.attributes[FileImageTagDataConsts.ScreenMediaRequest]) {
+            screenMediaRequestAttr = `${FileImageTagDataConsts.ScreenMediaRequest}="${bodyTag.attributes[FileImageTagDataConsts.ScreenMediaRequest]}"`;
+        }
+        return `<${FileImageTagDataConsts.TagName} ${fileIdAttr} ${screenMediaRequestAttr}></${FileImageTagDataConsts.TagName}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        let fileId = elem.getAttribute(FileImageTagDataConsts.FileIdAttrName);
+        let src = ImageMethods.buildMediumUrl(fileId, options);
+        return {
+            type: FileImageTagDataConsts.TagName,
+            data: {
+                src,
+                fileId: fileId,
+                screenMediaRequest: elem.getAttribute(FileImageTagDataConsts.ScreenMediaRequest)
+            }
+        };
+    }
+    toBodyTag(data) {
+        let fileData = data.data;
+        let attrs = {};
+        if (fileData.fileId) {
+            attrs[FileImageTagDataConsts.FileIdAttrName] = fileData.fileId;
+        }
+        if (fileData.screenMediaRequest) {
+            attrs[FileImageTagDataConsts.ScreenMediaRequest] = fileData.screenMediaRequest;
+        }
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: FileImageTagDataConsts.TagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: attrs,
+            innerHtml: ""
+        };
+    }
+    getDefaultValue() {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {
+                [FileImageTagDataConsts.FileIdAttrName]: null,
+                [FileImageTagDataConsts.ScreenMediaRequest]: FileImageTagDataConsts.DefaultValueForFileImage
+            },
+            presentOrEdit: false,
+            innerHtml: "",
+        };
+    }
+}
 
+var TextAlignment;
+(function (TextAlignment) {
+    TextAlignment["Left"] = "left";
+    TextAlignment["Center"] = "center";
+    TextAlignment["Right"] = "right";
+})(TextAlignment || (TextAlignment = {}));
 class TextTagDataConsts {
     static { this.HAlign = "h-align"; }
 }
+class TextTagHtmlMarkupTagService {
+    constructor(tagName, shortDescription) {
+        this.tagName = "text";
+        this.shortDescription = "T";
+        this.tagName = tagName;
+        this.shortDescription = shortDescription;
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        return `<${this.tagName} h-align="${bodyTag.attributes[TextTagDataConsts.HAlign]}">${bodyTag.innerHtml}</${this.tagName}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        return TextSimpleMethods.ExtractTextTag(elem);
+    }
+    toBodyTag(data) {
+        let textTagData = data.data;
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: { [TextTagDataConsts.HAlign]: textTagData.horizontalAlignment },
+            innerHtml: BodyTagsExtensions.sanitizeInnerHtml(textTagData.html)
+        };
+    }
+    getDefaultValue(props) {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {
+                [TextTagDataConsts.HAlign]: TextAlignment.Left
+            },
+            presentOrEdit: false,
+            innerHtml: "",
+        };
+    }
+}
+
+const defaultLinkYouTube = "https://www.youtube.com/embed/4CtSAnJDfsI?si=scyBNJa0Hs2t5aLE";
+const defaultLinkVk = "https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2";
+class ExternalVideoTagService {
+    constructor() {
+        this.tagName = ExternalVideoTagDataConsts.TagName;
+        this.shortDescription = "Видео";
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        let useResponsiveWrapperAttr = '';
+        if (bodyTag.attributes[ExternalVideoTagDataConsts.VideoTypeAttrName] === ExternalVideoSupportedTypes.Code) {
+            useResponsiveWrapperAttr = `${ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName}="${bodyTag.attributes[ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName] || false}"`;
+        }
+        return `<${bodyTag.tagDescription.tag} ${useResponsiveWrapperAttr} type="${bodyTag.attributes[ExternalVideoTagDataConsts.VideoTypeAttrName]}" link="${bodyTag.attributes[ExternalVideoTagDataConsts.LinkAttrName]}">${bodyTag.innerHtml}</${bodyTag.tagDescription.tag}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        return {
+            type: ExternalVideoTagDataConsts.TagName,
+            data: {
+                type: elem.getAttribute(ExternalVideoTagDataConsts.VideoTypeAttrName),
+                link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName),
+                useResponsiveWrapper: elem.getAttribute(ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName) !== 'false',
+                innerHtml: elem.innerHTML
+            }
+        };
+    }
+    toBodyTag(data) {
+        let fileData = data.data;
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: data.type,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: fileData,
+            innerHtml: ""
+        };
+    }
+    getDefaultValue(props) {
+        let attrs = {};
+        let innerHtml = "";
+        attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = props.selectedVideoPlayer;
+        attrs[ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName] = false;
+        attrs[ExternalVideoTagDataConsts.LinkAttrName] = props.selectedVideoPlayer === ExternalVideoSupportedTypes.Code ? '' :
+            props.selectedVideoPlayer === ExternalVideoSupportedTypes.VkVideo
+                ? defaultLinkVk
+                : defaultLinkYouTube;
+        if (props.selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {
+            innerHtml = props.htmlRaw;
+        }
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: attrs,
+            presentOrEdit: false,
+            innerHtml: "",
+        };
+    }
+}
+
+class HtmlRawTagDataConsts {
+    static { this.TagName = "html-raw"; }
+}
+
+class HtmlRawTagService {
+    constructor() {
+        this.tagName = HtmlRawTagDataConsts.TagName;
+        this.shortDescription = "Разметка";
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        return `<${this.tagName}>${bodyTag.innerHtml}</${this.tagName}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        return {
+            type: HtmlRawTagDataConsts.TagName,
+            data: {
+                innerHTML: elem.innerHTML
+            }
+        };
+    }
+    toBodyTag(data) {
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: HtmlRawTagDataConsts.TagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {},
+            innerHtml: BodyTagsExtensions.sanitizeInnerHtml(data.data["innerHTML"])
+        };
+    }
+    getDefaultValue(props) {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {},
+            presentOrEdit: false,
+            innerHtml: props.htmlRaw,
+        };
+    }
+}
+
+const defaultLinkForDownload = "https://storage.yandexcloud.net/mega-academy/presentation.pdf";
+class DownloadButtonTagDataConsts {
+    static { this.TagName = "download-file-button"; }
+    static { this.TitleAttrName = "title"; }
+    static { this.LinkAttrName = "link"; }
+}
+class DownloadButtonTagService {
+    constructor() {
+        this.tagName = DownloadButtonTagDataConsts.TagName;
+        this.shortDescription = "Кнопка для скачивания";
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        return `<${this.tagName} title="${bodyTag.attributes[DownloadButtonTagDataConsts.TitleAttrName]}" link="${bodyTag.attributes[DownloadButtonTagDataConsts.LinkAttrName]}"></${this.tagName}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        return {
+            type: DownloadButtonTagDataConsts.TagName,
+            data: {
+                title: elem.getAttribute(DownloadButtonTagDataConsts.TitleAttrName),
+                link: elem.getAttribute(DownloadButtonTagDataConsts.LinkAttrName)
+            }
+        };
+    }
+    toBodyTag(data) {
+        let fileData = data.data;
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: data.type,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: fileData,
+            innerHtml: ""
+        };
+    }
+    getDefaultValue(props) {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {
+                [DownloadButtonTagDataConsts.LinkAttrName]: defaultLinkForDownload,
+                [DownloadButtonTagDataConsts.TitleAttrName]: 'Скачать'
+            },
+            presentOrEdit: false,
+            innerHtml: props.htmlRaw,
+        };
+    }
+}
+
+class ButtonTagDataConsts {
+    static { this.TagName = "button"; }
+    static { this.TextAttrName = "text"; }
+    static { this.TypeAttrName = "type"; }
+    static { this.ClickAttrName = "click"; }
+}
+class ButtonTagService {
+    constructor() {
+        this.tagName = ButtonTagDataConsts.TagName;
+        this.shortDescription = "Кнопка";
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        let atts = bodyTag.attributes;
+        return `<${this.tagName} text="${atts[ButtonTagDataConsts.TextAttrName]}" type="${atts[ButtonTagDataConsts.TypeAttrName]}"  click="${atts[ButtonTagDataConsts.ClickAttrName]}"></${this.tagName}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        return {
+            type: ButtonTagDataConsts.TagName,
+            data: {
+                text: elem.getAttribute(ButtonTagDataConsts.TextAttrName),
+                type: elem.getAttribute(ButtonTagDataConsts.TypeAttrName),
+                click: elem.getAttribute(ButtonTagDataConsts.ClickAttrName)
+            }
+        };
+    }
+    toBodyTag(data) {
+        let fileData = data.data;
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: data.type,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: fileData,
+            innerHtml: ""
+        };
+    }
+    getDefaultValue(props) {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {
+                [ButtonTagDataConsts.ClickAttrName]: '',
+                [ButtonTagDataConsts.TypeAttrName]: 'button',
+                [ButtonTagDataConsts.TextAttrName]: 'Кнопка'
+            },
+            presentOrEdit: false,
+            innerHtml: props.htmlRaw,
+        };
+    }
+}
+
+class CustomWidgetTagDataConsts {
+    static { this.TagName = "custom-widget"; }
+    static { this.TypeAttrName = "type"; }
+    static { this.DataIdAttrName = "data-id"; }
+    static { this.WidgetIdAttrName = "widget-id"; }
+}
+class CustomWidgetTagService {
+    constructor() {
+        this.tagName = CustomWidgetTagDataConsts.TagName;
+        this.shortDescription = "Виджет";
+    }
+    bodyTagToHtmlStringConverter(bodyTag) {
+        let attrs = bodyTag.attributes;
+        return `<${this.tagName} type="${attrs[CustomWidgetTagDataConsts.TypeAttrName]}" data-id="${attrs[CustomWidgetTagDataConsts.DataIdAttrName]}"  widget-id="${attrs[CustomWidgetTagDataConsts.WidgetIdAttrName]}"></${this.tagName}>`;
+    }
+    extractBlockFromHtmlElement(elem, options) {
+        return {
+            type: CustomWidgetTagDataConsts.TagName,
+            data: {
+                type: elem.getAttribute(CustomWidgetTagDataConsts.TypeAttrName),
+                dataId: elem.getAttribute(CustomWidgetTagDataConsts.DataIdAttrName),
+                widgetId: elem.getAttribute(CustomWidgetTagDataConsts.WidgetIdAttrName)
+            }
+        };
+    }
+    toBodyTag(data) {
+        let customWidgetTagData = data.data;
+        return {
+            presentOrEdit: true,
+            tagDescription: {
+                tag: data.type,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: customWidgetTagData,
+            innerHtml: ""
+        };
+    }
+    getDefaultValue(props) {
+        return {
+            tagDescription: {
+                tag: this.tagName,
+                displayValue: this.shortDescription,
+                isCustom: false
+            },
+            attributes: {
+                [CustomWidgetTagDataConsts.TypeAttrName]: 'example-type',
+                [CustomWidgetTagDataConsts.DataIdAttrName]: 'example-data-id',
+                [CustomWidgetTagDataConsts.WidgetIdAttrName]: 'example-widget-id'
+            },
+            presentOrEdit: false,
+            innerHtml: props.htmlRaw,
+        };
+    }
+    static ExtractCustomWidgetTagData(attributes) {
+        return {
+            type: attributes[CustomWidgetTagDataConsts.TypeAttrName],
+            dataId: attributes[CustomWidgetTagDataConsts.DataIdAttrName],
+            widgetId: attributes[CustomWidgetTagDataConsts.WidgetIdAttrName]
+        };
+    }
+    static ExtractCustomWidgetAttributes(customWidgetTagData) {
+        return {
+            [CustomWidgetTagDataConsts.TypeAttrName]: customWidgetTagData.type,
+            [CustomWidgetTagDataConsts.DataIdAttrName]: customWidgetTagData.dataId,
+            [CustomWidgetTagDataConsts.WidgetIdAttrName]: customWidgetTagData.widgetId
+        };
+    }
+}
+
 const TextTag = "text";
 class TextSimpleMethods {
     static { this.supportedTags = ["sup", "sub", "strong", "b", "i", "u"]; }
     static ExtractTextTag(elem) {
-        var hAlignValue = elem.getAttribute("h-align") ?? EAlignments.Left;
+        var hAlignValue = elem.getAttribute("h-align") ?? TextAlignment.Left;
         var data = {
             textTagName: elem.tagName.toLowerCase(),
             text: elem.innerText.trim().replace('\n\t', ''),
@@ -263,7 +652,7 @@ class TextSimpleMethods {
         if (result.data.html === '\n') {
             result.data.html = '';
         }
-        var alignmentVals = [EAlignments.Left, EAlignments.Right, EAlignments.Center];
+        var alignmentVals = [TextAlignment.Left, TextAlignment.Right, TextAlignment.Center];
         if (alignmentVals.indexOf(hAlignValue) < 0) {
             result.data.validationResult = {
                 isSucceeded: false,
@@ -516,74 +905,16 @@ class HtmlExtractionMethods {
         }
         return data;
     }
-    static transformHtmlStringToBlocks(value, options) {
-        if (value === undefined || value === null) {
-            return [];
-        }
-        value = value
-            .replace('\n', '')
-            .replace('\t', '');
-        var div = document.createElement("div");
-        div.innerHTML = value;
-        return this.transformHtmlElementToBlocks(div, options);
-    }
-}
-
-class HtmlRawTagDataConsts {
-    static { this.TagName = "html-raw"; }
-}
-
-class CustomWidgetTagDataConsts {
-    static { this.TagName = "custom-widget"; }
-    static { this.TypeAttrName = "type"; }
-    static { this.DataIdAttrName = "data-id"; }
-    static { this.WidgetIdAttrName = "widget-id"; }
-}
-class CustomWidgetTagService {
-    constructor() {
-        this.tagName = CustomWidgetTagDataConsts.TagName;
-        this.shortDescription = "Виджет";
-    }
-    bodyTagToHtmlStringConverter(bodyTag) {
-        let attrs = bodyTag.attributes;
-        return `<${this.tagName} type="${attrs[CustomWidgetTagDataConsts.TypeAttrName]}" data-id="${attrs[CustomWidgetTagDataConsts.DataIdAttrName]}"  widget-id="${attrs[CustomWidgetTagDataConsts.WidgetIdAttrName]}"></${this.tagName}>`;
-    }
-    extractBlockFromHtmlElement(elem, options) {
-        return {
-            type: CustomWidgetTagDataConsts.TagName,
-            data: {
-                type: elem.getAttribute(CustomWidgetTagDataConsts.TypeAttrName),
-                dataId: elem.getAttribute(CustomWidgetTagDataConsts.DataIdAttrName),
-                widgetId: elem.getAttribute(CustomWidgetTagDataConsts.WidgetIdAttrName)
-            }
-        };
-    }
-    toBodyTag(data) {
-        let customWidgetTagData = data.data;
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: data.type,
-                displayValue: this.shortDescription,
-                isCustom: false
-            },
-            attributes: customWidgetTagData,
-            innerHtml: ""
-        };
-    }
-    static ExtractCustomWidgetTagData(attributes) {
-        return {
-            type: attributes[CustomWidgetTagDataConsts.TypeAttrName],
-            dataId: attributes[CustomWidgetTagDataConsts.DataIdAttrName],
-            widgetId: attributes[CustomWidgetTagDataConsts.WidgetIdAttrName]
-        };
-    }
-    static ExtractCustomWidgetAttributes(customWidgetTagData) {
-        return {
-            [CustomWidgetTagDataConsts.TypeAttrName]: customWidgetTagData.type,
-            [CustomWidgetTagDataConsts.DataIdAttrName]: customWidgetTagData.dataId,
-            [CustomWidgetTagDataConsts.WidgetIdAttrName]: customWidgetTagData.widgetId
-        };
+    static transformHtmlStringToBlocks(value, options) {
+        if (value === undefined || value === null) {
+            return [];
+        }
+        value = value
+            .replace('\n', '')
+            .replace('\t', '');
+        var div = document.createElement("div");
+        div.innerHTML = value;
+        return this.transformHtmlElementToBlocks(div, options);
     }
 }
 
@@ -643,229 +974,6 @@ class Tags {
     static { this.CustomWidget = CustomWidgetTagDataConsts.TagName; }
 }
 
-class FileImageTagService {
-    constructor() {
-        this.tagName = FileImageTagDataConsts.TagName;
-        this.shortDescription = "Изображение";
-    }
-    bodyTagToHtmlStringConverter(bodyTag) {
-        let fileIdAttr = "";
-        let screenMediaRequestAttr = "";
-        if (bodyTag.attributes.hasOwnProperty(FileImageTagDataConsts.FileIdAttrName) && bodyTag.attributes[FileImageTagDataConsts.FileIdAttrName]) {
-            fileIdAttr = `${FileImageTagDataConsts.FileIdAttrName}="${bodyTag.attributes[FileImageTagDataConsts.FileIdAttrName]}"`;
-        }
-        if (bodyTag.attributes.hasOwnProperty(FileImageTagDataConsts.ScreenMediaRequest) && bodyTag.attributes[FileImageTagDataConsts.ScreenMediaRequest]) {
-            screenMediaRequestAttr = `${FileImageTagDataConsts.ScreenMediaRequest}="${bodyTag.attributes[FileImageTagDataConsts.ScreenMediaRequest]}"`;
-        }
-        return `<${FileImageTagDataConsts.TagName} ${fileIdAttr} ${screenMediaRequestAttr}></${FileImageTagDataConsts.TagName}>`;
-    }
-    extractBlockFromHtmlElement(elem, options) {
-        let fileId = elem.getAttribute(FileImageTagDataConsts.FileIdAttrName);
-        let src = ImageMethods.buildMediumUrl(fileId, options);
-        return {
-            type: FileImageTagDataConsts.TagName,
-            data: {
-                src,
-                fileId: fileId,
-                screenMediaRequest: elem.getAttribute(FileImageTagDataConsts.ScreenMediaRequest)
-            }
-        };
-    }
-    toBodyTag(data) {
-        let fileData = data.data;
-        let attrs = {};
-        if (fileData.fileId) {
-            attrs[FileImageTagDataConsts.FileIdAttrName] = fileData.fileId;
-        }
-        if (fileData.screenMediaRequest) {
-            attrs[FileImageTagDataConsts.ScreenMediaRequest] = fileData.screenMediaRequest;
-        }
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: FileImageTagDataConsts.TagName,
-                displayValue: this.shortDescription,
-                isCustom: false
-            },
-            attributes: attrs,
-            innerHtml: ""
-        };
-    }
-}
-
-class TextTagHtmlMarkupTagService {
-    constructor(tagName, shortDescription) {
-        this.tagName = "text";
-        this.shortDescription = "T";
-        this.tagName = tagName;
-        this.shortDescription = shortDescription;
-    }
-    bodyTagToHtmlStringConverter(bodyTag) {
-        return `<${this.tagName} h-align="${bodyTag.attributes[TextTagDataConsts.HAlign]}">${bodyTag.innerHtml}</${this.tagName}>`;
-    }
-    extractBlockFromHtmlElement(elem, options) {
-        return TextSimpleMethods.ExtractTextTag(elem);
-    }
-    toBodyTag(data) {
-        let textTagData = data.data;
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: this.tagName,
-                displayValue: this.shortDescription,
-                isCustom: false
-            },
-            attributes: { "h-align": textTagData.horizontalAlignment },
-            innerHtml: BodyTagsExtensions.sanitizeInnerHtml(textTagData.html)
-        };
-    }
-}
-
-class ExternalVideoTagService {
-    constructor() {
-        this.tagName = ExternalVideoTagDataConsts.TagName;
-        this.shortDescription = "Видео";
-    }
-    bodyTagToHtmlStringConverter(bodyTag) {
-        let useResponsiveWrapperAttr = '';
-        if (bodyTag.attributes[ExternalVideoTagDataConsts.VideoTypeAttrName] === ExternalVideoSupportedTypes.Code) {
-            useResponsiveWrapperAttr = `${ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName}="${bodyTag.attributes[ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName] || false}"`;
-        }
-        return `<${bodyTag.tagDescription.tag} ${useResponsiveWrapperAttr} type="${bodyTag.attributes[ExternalVideoTagDataConsts.VideoTypeAttrName]}" link="${bodyTag.attributes[ExternalVideoTagDataConsts.LinkAttrName]}">${bodyTag.innerHtml}</${bodyTag.tagDescription.tag}>`;
-    }
-    extractBlockFromHtmlElement(elem, options) {
-        return {
-            type: ExternalVideoTagDataConsts.TagName,
-            data: {
-                type: elem.getAttribute(ExternalVideoTagDataConsts.VideoTypeAttrName),
-                link: elem.getAttribute(ExternalVideoTagDataConsts.LinkAttrName),
-                useResponsiveWrapper: elem.getAttribute(ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName) !== 'false',
-                innerHtml: elem.innerHTML
-            }
-        };
-    }
-    toBodyTag(data) {
-        let fileData = data.data;
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: data.type,
-                displayValue: this.shortDescription,
-                isCustom: false
-            },
-            attributes: fileData,
-            innerHtml: ""
-        };
-    }
-}
-
-class HtmlRawTagService {
-    constructor() {
-        this.tagName = HtmlRawTagDataConsts.TagName;
-        this.shortDescription = "Разметка";
-    }
-    bodyTagToHtmlStringConverter(bodyTag) {
-        return `<${this.tagName}>${bodyTag.innerHtml}</${this.tagName}>`;
-    }
-    extractBlockFromHtmlElement(elem, options) {
-        return {
-            type: HtmlRawTagDataConsts.TagName,
-            data: {
-                innerHTML: elem.innerHTML
-            }
-        };
-    }
-    toBodyTag(data) {
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: HtmlRawTagDataConsts.TagName,
-                displayValue: this.shortDescription,
-                isCustom: false
-            },
-            attributes: {},
-            innerHtml: BodyTagsExtensions.sanitizeInnerHtml(data.data["innerHTML"])
-        };
-    }
-}
-
-class DownloadButtonTagDataConsts {
-    static { this.TagName = "download-file-button"; }
-    static { this.TitleAttrName = "title"; }
-    static { this.LinkAttrName = "link"; }
-}
-class DownloadButtonTagService {
-    constructor() {
-        this.tagName = DownloadButtonTagDataConsts.TagName;
-        this.shortDescription = "Кнопка для скачивания";
-    }
-    bodyTagToHtmlStringConverter(bodyTag) {
-        return `<${this.tagName} title="${bodyTag.attributes[DownloadButtonTagDataConsts.TitleAttrName]}" link="${bodyTag.attributes[DownloadButtonTagDataConsts.LinkAttrName]}"></${this.tagName}>`;
-    }
-    extractBlockFromHtmlElement(elem, options) {
-        return {
-            type: DownloadButtonTagDataConsts.TagName,
-            data: {
-                title: elem.getAttribute(DownloadButtonTagDataConsts.TitleAttrName),
-                link: elem.getAttribute(DownloadButtonTagDataConsts.LinkAttrName)
-            }
-        };
-    }
-    toBodyTag(data) {
-        let fileData = data.data;
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: data.type,
-                displayValue: this.shortDescription,
-                isCustom: false
-            },
-            attributes: fileData,
-            innerHtml: ""
-        };
-    }
-}
-
-class ButtonTagDataConsts {
-    static { this.TagName = "button"; }
-    static { this.TextAttrName = "text"; }
-    static { this.TypeAttrName = "type"; }
-    static { this.ClickAttrName = "click"; }
-}
-class ButtonTagService {
-    constructor() {
-        this.tagName = ButtonTagDataConsts.TagName;
-        this.shortDescription = "Кнопка";
-    }
-    bodyTagToHtmlStringConverter(bodyTag) {
-        let atts = bodyTag.attributes;
-        return `<${this.tagName} text="${atts[ButtonTagDataConsts.TextAttrName]}" type="${atts[ButtonTagDataConsts.TypeAttrName]}"  click="${atts[ButtonTagDataConsts.ClickAttrName]}"></${this.tagName}>`;
-    }
-    extractBlockFromHtmlElement(elem, options) {
-        return {
-            type: ButtonTagDataConsts.TagName,
-            data: {
-                text: elem.getAttribute(ButtonTagDataConsts.TextAttrName),
-                type: elem.getAttribute(ButtonTagDataConsts.TypeAttrName),
-                click: elem.getAttribute(ButtonTagDataConsts.ClickAttrName)
-            }
-        };
-    }
-    toBodyTag(data) {
-        let fileData = data.data;
-        return {
-            presentOrEdit: true,
-            tagDescription: {
-                tag: data.type,
-                displayValue: this.shortDescription,
-                isCustom: false
-            },
-            attributes: fileData,
-            innerHtml: ""
-        };
-    }
-}
-
 class BodyTagsExtensions {
     static { this.tagServices = {
         [TextTags.text]: new TextTagHtmlMarkupTagService("text", "T"),
@@ -1990,6 +2098,12 @@ class DefaultTags {
     }
 }
 
+const AlignmentsData = [
+    { value: TextAlignment.Left, text: 'Слева' },
+    { value: TextAlignment.Center, text: 'По центру' },
+    { value: TextAlignment.Right, text: 'Справа' },
+];
+
 class DownloadFileButtonEditorComponent {
     constructor() {
         this.onTagUpdated = new EventEmitter();
@@ -2028,8 +2142,6 @@ class TextEditorComponent {
     constructor() {
         this.onTagUpdated = new EventEmitter();
     }
-    ngOnInit() {
-    }
     getInnerHtml() {
         return `<${this.tag.tagDescription.tag}>${this.tag.innerHtml}<${this.tag.tagDescription.tag}/>`;
     }
@@ -2039,7 +2151,7 @@ class TextEditorComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'croco-html-text-editor', standalone: true, imports: [MatButtonToggleGroup, FormsModule, MatButtonToggle, MatIcon, MatFormField, MatLabel, MatInput, CdkTextareaAutosize], template: "@if (tag.presentOrEdit) {\n  <div>\n    <div style=\"height: 10px;\">\n    </div>\n    @if (tag.attributes['h-align'] === 'left') {\n      <div style=\"text-align: left;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'right') {\n      <div style=\"text-align: right;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n    @if (tag.attributes['h-align'] === 'center') {\n      <div style=\"text-align: center;\" [innerHtml]=\"getInnerHtml()\">\n      </div>\n    }\n  </div>\n}\n\n@if (!tag.presentOrEdit) {\n  <div>\n    <div style=\"overflow-x: auto;\">\n      <mat-button-toggle-group [(ngModel)]=\"tag.attributes['h-align']\">\n        <mat-button-toggle value=\"center\">\n          \u041F\u043E \u0446\u0435\u043D\u0442\u0440\u0443 <mat-icon>format_align_center</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"left\">\n          \u0421\u043B\u0435\u0432\u0430 <mat-icon>format_align_left</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"right\">\n          \u0421\u043F\u0440\u0430\u0432\u0430 <mat-icon> format_align_right</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n    <div style=\"height: 10px;\">\n    </div>\n    <div>\n      <mat-form-field class=\"w-100\">\n        <mat-label>\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430</mat-label>\n        <textarea matInput cdkTextareaAutosize #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          placeholder=\"\u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u043E\u0433\u043E \u0442\u0435\u0433\u0430\"\n        [(ngModel)]=\"tag.innerHtml\"></textarea>\n      </mat-form-field>\n    </div>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { tag: [{
+        }], propDecorators: { tag: [{
                 type: Input
             }], onTagUpdated: [{
                 type: Output
@@ -2167,9 +2279,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-const defaultLinkYouTube = "https://www.youtube.com/embed/4CtSAnJDfsI?si=scyBNJa0Hs2t5aLE";
-const defaultLinkVk = "https://vk.com/video_ext.php?oid=-22822305&id=456241864&hd=2";
-const defaultLinkForDownload = "https://storage.yandexcloud.net/mega-academy/presentation.pdf";
 class VisualEditorComponent {
     isHtmlSet() {
         return this.html.startsWith("<body>");
@@ -2189,7 +2298,7 @@ class VisualEditorComponent {
         this.loadingText = "Идёт загрузка";
         this.text = '';
         this.htmlRaw = '';
-        this.alignment = EAlignments.Left;
+        this.alignment = TextAlignment.Left;
         this.textTag = DefaultTags.textTags[0].tag;
         this.textTagOptions = DefaultTags.textTags;
         this.alignmentOptions = AlignmentsData;
@@ -2218,55 +2327,24 @@ class VisualEditorComponent {
     addTagClickHandler() {
         let tagDescription = this.tags
             .find(x => x.tag === this.selectedValue);
-        if (TextTags.allTextTags.includes(tagDescription.tag)) {
+        const tagName = tagDescription.tag;
+        if (TextTags.allTextTags.includes(tagName)) {
             this.addTextTags();
             this.startAddingText();
             return;
         }
-        let attrs = {};
-        let innerHtml = "";
-        if (tagDescription.tag == ExternalVideoTagDataConsts.TagName) {
-            attrs[ExternalVideoTagDataConsts.VideoTypeAttrName] = this.selectedVideoPlayer;
-            attrs[ExternalVideoTagDataConsts.UseResponsiveWrapperAttrName] = false;
-            attrs[ExternalVideoTagDataConsts.LinkAttrName] = this.selectedVideoPlayer === ExternalVideoSupportedTypes.Code ? '' :
-                this.selectedVideoPlayer === ExternalVideoSupportedTypes.VkVideo
-                    ? defaultLinkVk
-                    : defaultLinkYouTube;
-            if (this.selectedVideoPlayer === ExternalVideoSupportedTypes.Code) {
-                innerHtml = this.htmlRaw;
-            }
-        }
-        else if (tagDescription.tag == FileImageTagDataConsts.TagName) {
-            attrs[FileImageTagDataConsts.ScreenMediaRequest] = FileImageTagDataConsts.DefaultValueForFileImage;
-        }
-        else if (tagDescription.tag == DownloadButtonTagDataConsts.TagName) {
-            attrs[DownloadButtonTagDataConsts.LinkAttrName] = defaultLinkForDownload;
-            attrs[DownloadButtonTagDataConsts.TitleAttrName] = 'Скачать';
-        }
-        else if (tagDescription.tag == ButtonTagDataConsts.TagName) {
-            attrs[ButtonTagDataConsts.ClickAttrName] = '';
-            attrs[ButtonTagDataConsts.TypeAttrName] = 'button';
-            attrs[ButtonTagDataConsts.TextAttrName] = 'Кнопка';
-        }
-        else if (tagDescription.tag === HtmlRawTagDataConsts.TagName) {
-            innerHtml = this.htmlRaw;
-        }
-        else if (tagDescription.tag == CustomWidgetTagDataConsts.TagName) {
-            attrs[CustomWidgetTagDataConsts.TypeAttrName] = 'example-type';
-            attrs[CustomWidgetTagDataConsts.DataIdAttrName] = 'example-data-id';
-            attrs[CustomWidgetTagDataConsts.WidgetIdAttrName] = 'example-widget-id';
-        }
-        else if (tagDescription.tag === FileImageTagDataConsts.TagName) {
-            attrs[FileImageTagDataConsts.FileIdAttrName] = null;
+        if (BodyTagsExtensions.tagServices.hasOwnProperty(tagName)) {
+            const tagService = BodyTagsExtensions.tagServices[tagName];
+            let tag = tagService.getDefaultValue({
+                htmlRaw: this.htmlRaw,
+                selectedVideoPlayer: this.selectedVideoPlayer
+            });
+            this.bodyTags.push(tag);
+            this.htmlRaw = '';
+            this.recalculateHtml();
+            return;
         }
-        this.bodyTags.push({
-            tagDescription,
-            innerHtml,
-            attributes: attrs,
-            presentOrEdit: true
-        });
-        this.htmlRaw = '';
-        this.recalculateHtml();
+        alert(`Сервис для тега ${tagName} не зарегистрирован.`);
     }
     startAddingText(tag = '') {
         this.saveBodyTags = [...this.bodyTags];
@@ -2279,7 +2357,7 @@ class VisualEditorComponent {
     }
     resetTextStyle() {
         this.text = '';
-        this.alignment = EAlignments.Left;
+        this.alignment = TextAlignment.Left;
         this.textTag = DefaultTags.textTags[0].tag;
     }
     addTextTags() {
@@ -2748,5 +2826,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagViewComponent, FileType, HtmlRawEditorComponent, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextSimpleMethods, TextTag, TextTagDataConsts, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent, defaultLinkForDownload, defaultLinkVk, defaultLinkYouTube };
+export { AddFilesBtnComponent, AngularMaterialTableMethods, BodyTagsExtensions, BootstrapTableMethods, CrocoHtmlFileOptionsService, CrocoHtmlModule, CrocoHtmlOptionsToken, CustomWidgetEditorComponent, ExternalVideoEditorComponent, ExternalVideoPlayers, ExternalVideoSupportedTypes, ExternalVideoTagDataConsts, FileIdSelectComponent, FileImageTagDataConsts, FileImageTagViewComponent, FileType, HtmlRawEditorComponent, HtmlRawViewComponent, HtmlViewComponent, HtmlViewController, ImageEditorComponent, ImageMethods, MainEditorBlockComponent, MainEditorComponent, TableBuilder, TableMethods, TableTypes, TagToSpanPipe, TextEditorComponent, TextSimpleMethods, TextTag, TextTags, ToHtmlBodyTagsPipe, ToPreviewHtmlPipe, ToPreviewPipe, UploadFilesBtnComponent, VisualEditorComponent, XmlExtensions, XmlTagCustomWidgetComponent, XmlTagExternalVideoComponent, XmlTagHeaderInnerTextViewComponent, XmlTagHeaderTextViewComponent, XmlTagHtmlViewComponent, XmlTagTableViewComponent, XmlTagTextViewComponent, XmlTagViewComponent };
 //# sourceMappingURL=croco-html.mjs.map