@ckeditor/ckeditor5-html-embed/build/html-embed.js

HTML embed feature for CKEditor 5.

!function(e){const t=e.en=e.en||{};t.dictionary=Object.assign(t.dictionary||{},{"Edit source":"Edit source","Empty snippet content":"Empty snippet content","HTML snippet":"HTML snippet","Insert HTML":"Insert HTML","No preview available":"No preview available","Paste raw HTML here...":"Paste raw HTML here...","Save changes":"Save changes"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={})),
/*!
 * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md.
 */(()=>{var e={21:e=>{"use strict";e.exports=function(e,t){Object.keys(t).forEach((function(r){e.setAttribute(r,t[r])}))}},51:e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},128:e=>{"use strict";var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},199:(e,t,r)=>{"use strict";r.d(t,{A:()=>c});var n=r(758),a=r.n(n),i=r(935),o=r.n(i)()(a());o.push([e.id,".ck-widget.raw-html-embed{display:flow-root;font-style:normal;margin:.9em auto;min-width:15em;position:relative}.ck-widget.raw-html-embed:before{position:absolute;z-index:1}.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper{display:flex;flex-direction:column;position:absolute}.ck-widget.raw-html-embed .raw-html-embed__preview{display:flex;overflow:hidden;position:relative}.ck-widget.raw-html-embed .raw-html-embed__preview-content{border-collapse:separate;border-spacing:7px;display:table;margin:auto;position:relative;width:100%}.ck-widget.raw-html-embed .raw-html-embed__preview-placeholder{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}:root{--ck-html-embed-content-width:calc(100% - var(--ck-icon-size)*1.5);--ck-html-embed-source-height:10em;--ck-html-embed-unfocused-outline-width:1px;--ck-html-embed-content-min-height:calc(var(--ck-icon-size) + var(--ck-spacing-standard));--ck-html-embed-source-disabled-background:var(--ck-color-base-foreground);--ck-html-embed-source-disabled-color:#737373}.ck-widget.raw-html-embed{background-color:var(--ck-color-base-foreground);font-size:var(--ck-font-size-base)}.ck-widget.raw-html-embed:not(.ck-widget_selected):not(:hover){outline:var(--ck-html-embed-unfocused-outline-width) dashed var(--ck-color-widget-blurred-border)}.ck-widget.raw-html-embed[dir=ltr]{text-align:left}.ck-widget.raw-html-embed[dir=rtl]{text-align:right}.ck-widget.raw-html-embed:before{background:#999;border-radius:0 0 var(--ck-border-radius) var(--ck-border-radius);color:var(--ck-color-base-background);content:attr(data-html-embed-label);font-family:var(--ck-font-face);font-size:var(--ck-font-size-tiny);left:var(--ck-spacing-standard);padding:calc(var(--ck-spacing-tiny) + var(--ck-html-embed-unfocused-outline-width)) var(--ck-spacing-small) var(--ck-spacing-tiny);top:calc(var(--ck-html-embed-unfocused-outline-width)*-1);transition:background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve)}.ck-widget.raw-html-embed[dir=rtl]:before{left:auto;right:var(--ck-spacing-standard)}.ck-widget.raw-html-embed[dir=ltr] .ck-widget__type-around .ck-widget__type-around__button.ck-widget__type-around__button_before{margin-left:50px}.ck.ck-editor__editable.ck-blurred .ck-widget.raw-html-embed.ck-widget_selected:before{padding:var(--ck-spacing-tiny) var(--ck-spacing-small);top:0}.ck.ck-editor__editable:not(.ck-blurred) .ck-widget.raw-html-embed.ck-widget_selected:before{background:var(--ck-color-focus-border);padding:var(--ck-spacing-tiny) var(--ck-spacing-small);top:0}.ck.ck-editor__editable .ck-widget.raw-html-embed:not(.ck-widget_selected):hover:before{padding:var(--ck-spacing-tiny) var(--ck-spacing-small);top:0}.ck-widget.raw-html-embed .raw-html-embed__content-wrapper{padding:var(--ck-spacing-standard)}.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper{right:var(--ck-spacing-standard);top:var(--ck-spacing-standard)}.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__save-button{color:var(--ck-color-button-save)}.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button.raw-html-embed__cancel-button{color:var(--ck-color-button-cancel)}.ck-widget.raw-html-embed .raw-html-embed__buttons-wrapper .ck-button:not(:first-child){margin-top:var(--ck-spacing-small)}.ck-widget.raw-html-embed[dir=rtl] .raw-html-embed__buttons-wrapper{left:var(--ck-spacing-standard);right:auto}.ck-widget.raw-html-embed .raw-html-embed__source{box-sizing:border-box;direction:ltr;font-family:monospace;font-size:var(--ck-font-size-base);height:var(--ck-html-embed-source-height);min-width:0;padding:var(--ck-spacing-standard);resize:none;tab-size:4;text-align:left;white-space:pre-wrap;width:var(--ck-html-embed-content-width)}.ck-widget.raw-html-embed .raw-html-embed__source[disabled]{background:var(--ck-html-embed-source-disabled-background);color:var(--ck-html-embed-source-disabled-color);-webkit-text-fill-color:var(--ck-html-embed-source-disabled-color);opacity:1}.ck-widget.raw-html-embed .raw-html-embed__preview{min-height:var(--ck-html-embed-content-min-height);width:var(--ck-html-embed-content-width)}.ck-editor__editable:not(.ck-read-only) .ck-widget.raw-html-embed .raw-html-embed__preview{pointer-events:none}.ck-widget.raw-html-embed .raw-html-embed__preview-content{background-color:var(--ck-color-base-foreground);box-sizing:border-box}.ck-widget.raw-html-embed .raw-html-embed__preview-content>*{margin-left:auto;margin-right:auto}.ck-widget.raw-html-embed .raw-html-embed__preview-placeholder{color:var(--ck-html-embed-source-disabled-color)}",""]);const c=o},237:e=>{"use strict";e.exports=CKEditor5.dll},311:(e,t,r)=>{e.exports=r(237)("./src/ui.js")},355:(e,t,r)=>{e.exports=r(237)("./src/icons.js")},584:(e,t,r)=>{e.exports=r(237)("./src/utils.js")},591:e=>{"use strict";var t=[];function r(e){for(var r=-1,n=0;n<t.length;n++)if(t[n].identifier===e){r=n;break}return r}function n(e,n){for(var i={},o=[],c=0;c<e.length;c++){var l=e[c],s=n.base?l[0]+n.base:l[0],d=i[s]||0,m="".concat(s," ").concat(d);i[s]=d+1;var u=r(m),p={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==u)t[u].references++,t[u].updater(p);else{var b=a(p,n);n.byIndex=c,t.splice(c,0,{identifier:m,updater:b,references:1})}o.push(m)}return o}function a(e,t){var r=t.domAPI(t);r.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;r.update(e=t)}else r.remove()}}e.exports=function(e,a){var i=n(e=e||[],a=a||{});return function(e){e=e||[];for(var o=0;o<i.length;o++){var c=r(i[o]);t[c].references--}for(var l=n(e,a),s=0;s<i.length;s++){var d=r(i[s]);0===t[d].references&&(t[d].updater(),t.splice(d,1))}i=l}}},639:e=>{"use strict";var t,r=(t=[],function(e,r){return t[e]=r,t.filter(Boolean).join("\n")});function n(e,t,n,a){var i;if(n)i="";else{i="",a.supports&&(i+="@supports (".concat(a.supports,") {")),a.media&&(i+="@media ".concat(a.media," {"));var o=void 0!==a.layer;o&&(i+="@layer".concat(a.layer.length>0?" ".concat(a.layer):""," {")),i+=a.css,o&&(i+="}"),a.media&&(i+="}"),a.supports&&(i+="}")}if(e.styleSheet)e.styleSheet.cssText=r(t,i);else{var c=document.createTextNode(i),l=e.childNodes;l[t]&&e.removeChild(l[t]),l.length?e.insertBefore(c,l[t]):e.appendChild(c)}}var a={singleton:null,singletonCounter:0};e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=a.singletonCounter++,r=a.singleton||(a.singleton=e.insertStyleElement(e));return{update:function(e){n(r,t,!1,e)},remove:function(e){n(r,t,!0,e)}}}},758:e=>{"use strict";e.exports=function(e){return e[1]}},782:(e,t,r)=>{e.exports=r(237)("./src/core.js")},901:(e,t,r)=>{e.exports=r(237)("./src/widget.js")},935:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,a,i){"string"==typeof e&&(e=[[null,e,void 0]]);var o={};if(n)for(var c=0;c<this.length;c++){var l=this[c][0];null!=l&&(o[l]=!0)}for(var s=0;s<e.length;s++){var d=[].concat(e[s]);n&&o[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),r&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=r):d[2]=r),a&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=a):d[4]="".concat(a)),t.push(d))}},t}}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var i=t[n]={id:n,exports:{}};return e[n](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};(()=>{"use strict";r.r(n),r.d(n,{HtmlEmbed:()=>x,HtmlEmbedEditing:()=>_,HtmlEmbedUI:()=>y});var e=r(782),t=r(901),a=r(311),i=r(584),o=r(355);class c extends e.Command{refresh(){const e=this.editor.model,r=e.schema,n=e.document.selection,a=l(n);this.isEnabled=function(e,r,n){const a=function(e,r){const n=(0,t.findOptimalInsertionRange)(e,r),a=n.start.parent;if(a.isEmpty&&!a.is("rootElement"))return a.parent;return a}(e,n);return r.checkChild(a,"rawHtml")}(n,r,e),this.value=a?a.getAttribute("value")||"":null}execute(e){const t=this.editor.model,r=t.document.selection;t.change((n=>{let a;null!==this.value?a=l(r):(a=n.createElement("rawHtml"),t.insertObject(a,null,null,{setSelection:"on"})),n.setAttribute("value",e,a)}))}}function l(e){const t=e.getSelectedElement();return t&&t.is("element","rawHtml")?t:null}var s=r(591),d=r.n(s),m=r(639),u=r.n(m),p=r(128),b=r.n(p),h=r(21),w=r.n(h),g=r(51),v=r.n(g),f=r(199),k={attributes:{"data-cke":!0}};k.setAttributes=w(),k.insert=b().bind(null,"head"),k.domAPI=u(),k.insertStyleElement=v();d()(f.A,k);f.A&&f.A.locals&&f.A.locals;class _ extends e.Plugin{_widgetButtonViewReferences=new Set;static get pluginName(){return"HtmlEmbedEditing"}static get isOfficialPlugin(){return!0}constructor(e){super(e),e.config.define("htmlEmbed",{showPreviews:!1,sanitizeHtml:e=>((0,i.logWarning)("html-embed-provide-sanitize-function"),{html:e,hasChanged:!1})})}init(){const e=this.editor;e.model.schema.register("rawHtml",{inheritAllFrom:"$blockObject",allowAttributes:["value"]}),e.commands.add("htmlEmbed",new c(e)),this._setupConversion()}_setupConversion(){const e=this.editor,r=e.t,n=e.editing.view,a=this._widgetButtonViewReferences,o=e.config.get("htmlEmbed");function c({editor:e,domElement:t,state:n,props:o}){t.textContent="";const c=t.ownerDocument;let s;if(n.isEditable){const e={isDisabled:!1,placeholder:o.textareaPlaceholder};s=l({domDocument:c,state:n,props:e}),t.append(s)}else if(n.showPreviews){const a={sanitizeHtml:o.sanitizeHtml};t.append(function({editor:e,domDocument:t,state:n,props:a}){const o=a.sanitizeHtml(n.getRawHtmlValue()),c=n.getRawHtmlValue().length>0?r("No preview available"):r("Empty snippet content"),l=(0,i.createElement)(t,"div",{class:"ck ck-reset_all raw-html-embed__preview-placeholder"},c),s=(0,i.createElement)(t,"div",{class:"raw-html-embed__preview-content",dir:e.locale.contentLanguageDirection}),d=t.createRange(),m=d.createContextualFragment(o.html);s.appendChild(m);const u=(0,i.createElement)(t,"div",{class:"raw-html-embed__preview"},[l,s]);return u}({domDocument:c,state:n,props:a,editor:e}))}else{const e={isDisabled:!0,placeholder:o.textareaPlaceholder};t.append(l({domDocument:c,state:n,props:e}))}const d={onEditClick:o.onEditClick,onSaveClick:()=>{o.onSaveClick(s.value)},onCancelClick:o.onCancelClick};t.prepend(function({editor:e,domDocument:t,state:r,props:n}){const o=(0,i.createElement)(t,"div",{class:"raw-html-embed__buttons-wrapper"});if(r.isEditable){const t=E(e,"save",n.onSaveClick),r=E(e,"cancel",n.onCancelClick);o.append(t.element,r.element),a.add(t).add(r)}else{const t=E(e,"edit",n.onEditClick);o.append(t.element),a.add(t)}return o}({editor:e,domDocument:c,state:n,props:d}))}function l({domDocument:e,state:t,props:r}){const n=(0,i.createElement)(e,"textarea",{placeholder:r.placeholder,class:"ck ck-reset ck-input ck-input-text raw-html-embed__source"});return n.disabled=r.isDisabled,n.value=t.getRawHtmlValue(),n}this.editor.editing.view.on("render",(()=>{for(const e of a){if(e.element&&e.element.isConnected)return;e.destroy(),a.delete(e)}}),{priority:"lowest"}),e.data.registerRawContentMatcher({name:"div",classes:"raw-html-embed"}),e.conversion.for("upcast").elementToElement({view:{name:"div",classes:"raw-html-embed"},model:(e,{writer:t})=>t.createElement("rawHtml",{value:e.getCustomProperty("$rawContent")})}),e.conversion.for("dataDowncast").elementToElement({model:"rawHtml",view:(e,{writer:t})=>t.createRawElement("div",{class:"raw-html-embed"},(function(t){t.innerHTML=e.getAttribute("value")||""}))}),e.conversion.for("editingDowncast").elementToStructure({model:{name:"rawHtml",attributes:["value"]},view:(a,{writer:i})=>{let l,s,d;const m=i.createRawElement("div",{class:"raw-html-embed__content-wrapper"},(function(t){l=t,c({editor:e,domElement:t,state:s,props:d}),l.addEventListener("mousedown",(()=>{if(s.isEditable){const t=e.model;t.document.selection.getSelectedElement()!==a&&t.change((e=>e.setSelection(a,"on")))}}),!0)})),u={makeEditable(){s=Object.assign({},s,{isEditable:!0}),c({domElement:l,editor:e,state:s,props:d}),n.change((e=>{e.setAttribute("data-cke-ignore-events","true",m)})),l.querySelector("textarea").focus()},save(t){t!==s.getRawHtmlValue()?(e.execute("htmlEmbed",t),e.editing.view.focus()):this.cancel()},cancel(){s=Object.assign({},s,{isEditable:!1}),c({domElement:l,editor:e,state:s,props:d}),e.editing.view.focus(),n.change((e=>{e.removeAttribute("data-cke-ignore-events",m)}))}};s={showPreviews:o.showPreviews,isEditable:!1,getRawHtmlValue:()=>a.getAttribute("value")||""},d={sanitizeHtml:o.sanitizeHtml,textareaPlaceholder:r("Paste raw HTML here..."),onEditClick(){u.makeEditable()},onSaveClick(e){u.save(e)},onCancelClick(){u.cancel()}};const p=i.createContainerElement("div",{class:"raw-html-embed","data-html-embed-label":r("HTML snippet"),dir:e.locale.uiLanguageDirection},m);return i.setCustomProperty("rawHtmlApi",u,p),i.setCustomProperty("rawHtml",!0,p),(0,t.toWidget)(p,i,{label:r("HTML snippet"),hasSelectionHandle:!0})}})}}function E(e,t,r){const{t:n}=e.locale,i=new a.ButtonView(e.locale),c=e.commands.get("htmlEmbed");return i.set({class:`raw-html-embed__${t}-button`,icon:o.IconPencil,tooltip:!0,tooltipPosition:"rtl"===e.locale.uiLanguageDirection?"e":"w"}),i.render(),"edit"===t?(i.set({icon:o.IconPencil,label:n("Edit source")}),i.bind("isEnabled").to(c)):"save"===t?(i.set({icon:o.IconCheck,label:n("Save changes")}),i.bind("isEnabled").to(c)):i.set({icon:o.IconCancel,label:n("Cancel")}),i.on("execute",r),i}class y extends e.Plugin{static get pluginName(){return"HtmlEmbedUI"}static get isOfficialPlugin(){return!0}init(){const e=this.editor,t=e.locale.t;e.ui.componentFactory.add("htmlEmbed",(()=>{const e=this._createButton(a.ButtonView);return e.set({tooltip:!0,label:t("Insert HTML")}),e})),e.ui.componentFactory.add("menuBar:htmlEmbed",(()=>{const e=this._createButton(a.MenuBarMenuListItemButtonView);return e.set({label:t("HTML snippet")}),e}))}_createButton(e){const t=this.editor,r=t.commands.get("htmlEmbed"),n=new e(t.locale);return n.set({icon:o.IconHtml}),n.bind("isEnabled").to(r,"isEnabled"),this.listenTo(n,"execute",(()=>{t.execute("htmlEmbed"),t.editing.view.focus();t.editing.view.document.selection.getSelectedElement().getCustomProperty("rawHtmlApi").makeEditable()})),n}}class x extends e.Plugin{static get requires(){return[_,y,t.Widget]}static get pluginName(){return"HtmlEmbed"}static get isOfficialPlugin(){return!0}}})(),(window.CKEditor5=window.CKEditor5||{}).htmlEmbed=n})();