Update icons compatibility with CKEditor

Appreciate this is for version 3.x and not actively supported alongside 4.x
Have created a MR so those still stuck on 3.x can patch and resolve the issue.
Thanks!

For simplicity, I have removed the use of icons for save and cancel, and changed to be text buttons instead.

I am on core 10.5.1 and 3.1.0. The patch is failing to apply for me.

here's the rej file. not sure it would help.

--- assets/js/build/footnotes.js
+++ assets/js/build/footnotes.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.footnotes=t())}(self,(()=>(()=>{var e={"./node_modules/css-loader/dist/cjs.js!./assets/js/ckeditor5_plugins/footnotes/theme/footnotes.css":(e,t,o)=>{"use strict";o.d(t,{Z:()=>a});var n=o("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),s=o.n(n),r=o("./node_modules/css-loader/dist/runtime/api.js"),i=o.n(r)()(s());i.push([e.id,".ck.ck-abbr-footnotes .ck-input {\n  width: 30em;\n}\n\n.ck.ck-abbr-footnotes textarea {\n  height: 10em;\n}\n",""]);const a=i},"./node_modules/css-loader/dist/runtime/api.js":e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var o="",n=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),n&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),n&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o})).join("")},t.i=function(e,o,n,s,r){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var a=0;a<this.length;a++){var l=this[a][0];null!=l&&(i[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);n&&i[d[0]]||(void 0!==r&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=r),o&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=o):d[2]=o),s&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=s):d[4]="".concat(s)),t.push(d))}},t}},"./node_modules/css-loader/dist/runtime/noSourceMaps.js":e=>{"use strict";e.exports=function(e){return e[1]}},"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":e=>{"use strict";var t=[];function o(e){for(var o=-1,n=0;n<t.length;n++)if(t[n].identifier===e){o=n;break}return o}function n(e,n){for(var r={},i=[],a=0;a<e.length;a++){var l=e[a],c=n.base?l[0]+n.base:l[0],d=r[c]||0,u="".concat(c," ").concat(d);r[c]=d+1;var m=o(u),f={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==m)t[m].references++,t[m].updater(f);else{var h=s(f,n);n.byIndex=a,t.splice(a,0,{identifier:u,updater:h,references:1})}i.push(u)}return i}function s(e,t){var o=t.domAPI(t);o.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;o.update(e=t)}else o.remove()}}e.exports=function(e,s){var r=n(e=e||[],s=s||{});return function(e){e=e||[];for(var i=0;i<r.length;i++){var a=o(r[i]);t[a].references--}for(var l=n(e,s),c=0;c<r.length;c++){var d=o(r[c]);0===t[d].references&&(t[d].updater(),t.splice(d,1))}r=l}}},"./node_modules/style-loader/dist/runtime/insertBySelector.js":e=>{"use strict";var t={};e.exports=function(e,o){var n=function(e){if(void 0===t[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}t[e]=o}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(o)}},"./node_modules/style-loader/dist/runtime/insertStyleElement.js":e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(e,t,o)=>{"use strict";e.exports=function(e){var t=o.nc;t&&e.setAttribute("nonce",t)}},"./node_modules/style-loader/dist/runtime/styleDomAPI.js":e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(o){!function(e,t,o){var n="";o.supports&&(n+="@supports (".concat(o.supports,") {")),o.media&&(n+="@media ".concat(o.media," {"));var s=void 0!==o.layer;s&&(n+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),n+=o.css,s&&(n+="}"),o.media&&(n+="}"),o.supports&&(n+="}");var r=o.sourceMap;r&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,o)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},"./node_modules/style-loader/dist/runtime/styleTagTransform.js":e=>{"use strict";e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},"ckeditor5/src/core.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/engine.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/engine.js")},"ckeditor5/src/ui.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/widget.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function o(n){var s=t[n];if(void 0!==s)return s.exports;var r=t[n]={id:n,exports:{}};return e[n](r,r.exports,o),r.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.nc=void 0;var n={};return(()=>{"use strict";o.d(n,{default:()=>C});var e=o("ckeditor5/src/core.js"),t=o("ckeditor5/src/widget.js");class s extends e.Command{execute(e){const{model:t}=this.editor;t.change((o=>{t.insertObject(function(e,t){const o=e.createElement("Footnotes",{value:t.footnotes_value,text:t.footnotes_text});return o}(o,e),null,null,{setSelection:"on"})}))}}var r=o("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),i=o.n(r),a=o("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),l=o.n(a),c=o("./node_modules/style-loader/dist/runtime/insertBySelector.js"),d=o.n(c),u=o("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),m=o.n(u),f=o("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),h=o.n(f),p=o("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),v=o.n(p),w=o("./node_modules/css-loader/dist/cjs.js!./assets/js/ckeditor5_plugins/footnotes/theme/footnotes.css"),g={};g.styleTagTransform=v(),g.setAttributes=m(),g.insert=d().bind(null,"head"),g.domAPI=l(),g.insertStyleElement=h();i()(w.Z,g);w.Z&&w.Z.locals&&w.Z.locals;class b extends e.Plugin{static get requires(){return[t.Widget]}constructor(e){super(e)}init(){this._defineSchema(),this._defineConverters(),this.editor.commands.add("insertFootnotes",new s(this.editor))}_defineSchema(){this.editor.model.schema.register("Footnotes",{isInline:!0,isObject:!0,allowWhere:"$text",allowAttributes:["value","text"]})}_defineConverters(){const e=this.editor.conversion;e.for("upcast").elementToElement({view:{name:"fn",attributes:["value"]},model:(e,{writer:t})=>{const o=this.editor.editing.view.domConverter.viewToDom(e).innerHTML,n=e.getAttribute("text");return t.createElement("Footnotes",{value:e.getAttribute("value"),text:n||o})}}),e.for("dataDowncast").elementToElement({model:"Footnotes",view:(e,{writer:t})=>t.createContainerElement("fn",{value:e.getAttribute("value"),text:e.getAttribute("text")})}),e.for("editingDowncast").elementToElement({model:"Footnotes",view:(e,{writer:o})=>{const n=o.createContainerElement("fn",{value:e.getAttribute("value"),text:e.getAttribute("text")});return o.insert(o.createPositionAt(n,0),o.createText("[fn]")),(0,t.toWidget)(n,o)}})}}var x=o("ckeditor5/src/ui.js");class y extends x.InputView{constructor(e){super(e),this.template.tag="textarea"}}function _(e,t,o){const n=new y(e.locale);return n.set({id:t,ariaDescribedById:o}),n.bind("isReadOnly").to(e,"isEnabled",(e=>!e)),n.bind("hasError").to(e,"errorText",(e=>!!e)),n.on("input",(()=>{e.errorText=null})),e.bind("isEmpty","isFocused","placeholder").to(n),n}class j extends x.View{constructor(t){super(t),this.footnotesText=this._createTextArea("Footnote text"),this.footnotesValue=this._createInput("Value"),this.saveButtonView=this._createButton("Save",e.icons.check,"ck-button-save"),this.saveButtonView.type="submit",this.cancelButtonView=this._createButton("Cancel",e.icons.cancel,"ck-button-cancel"),this.cancelButtonView.delegate("execute").to(this,"cancel"),this.childViews=this.createCollection([this.footnotesText,this.footnotesValue,this.saveButtonView,this.cancelButtonView]),this.setTemplate({tag:"form",attributes:{class:["ck","ck-abbr-footnotes"],tabindex:"-1"},children:this.childViews})}render(){super.render(),(0,x.submitHandler)({view:this})}focus(){this.childViews.first.focus()}_createTextArea(e){const t=new x.LabeledFieldView(this.locale,_);return t.label=e,t}_createInput(e){const t=new x.LabeledFieldView(this.locale,x.createLabeledInputText);return t.label=e,t}_createButton(e,t,o){const n=new x.ButtonView;return n.set({label:e,icon:t,tooltip:!0,class:o}),n}}var T=o("ckeditor5/src/engine.js");class V extends e.Plugin{static get requires(){return[x.ContextualBalloon]}init(){const e=this.editor;this._balloon=this.editor.plugins.get(x.ContextualBalloon),this.formView=this._createFormView(),e.ui.componentFactory.add("Footnotes",(t=>{const o=e.commands.get("insertFootnotes"),n=new x.ButtonView(t);return n.set({label:e.t("Footnotes"),icon:'<?xml version="1.0" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"\n "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">\n<svg version="1.0" xmlns="http://www.w3.org/2000/svg"\n width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"\n preserveAspectRatio="xMidYMid meet">\n\n<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"\nfill="#000000" stroke="none">\n<path d="M115 115 c0 -14 5 -25 11 -25 7 0 9 10 6 25 -2 14 -7 25 -11 25 -3 0\n-6 -11 -6 -25z"/>\n<path d="M35 110 c-4 -6 5 -10 19 -10 14 0 26 -4 26 -10 0 -5 -8 -10 -19 -10\n-24 0 -45 -25 -38 -45 4 -9 19 -14 42 -13 33 1 35 3 35 38 0 20 -5 41 -12 48\n-15 15 -45 16 -53 2z m45 -60 c0 -5 -9 -10 -20 -10 -11 0 -20 5 -20 10 0 6 9\n10 20 10 11 0 20 -4 20 -10z"/>\n</g>\n</svg>\n',tooltip:!0}),n.bind("isOn","isEnabled").to(o,"value","isEnabled"),this.listenTo(n,"execute",(()=>{this._showUI()})),n})),e.editing.view.addObserver(T.ClickObserver),e.listenTo(e.editing.view.document,"click",((t,o)=>{const n=e.editing.mapper.toModelElement(o.target);"Footnotes"==n.name&&(this.formView.footnotesText.fieldView.value=n.getAttribute("text"),this.formView.footnotesValue.fieldView.value=n.getAttribute("value"),this._showUI())}))}_createFormView(){const e=this.editor,t=new j(e.locale);return this.listenTo(t,"submit",(()=>{const o={footnotes_text:t.footnotesText.fieldView.element.value,footnotes_value:t.footnotesValue.fieldView.element.value};e.execute("insertFootnotes",o),this._hideUI()})),this.listenTo(t,"cancel",(()=>{this._hideUI()})),(0,x.clickOutsideHandler)({emitter:t,activator:()=>this._balloon.visibleView===t,contextElements:[this._balloon.view.element],callback:()=>this._hideUI()}),t}_showUI(){this._balloon.add({view:this.formView,position:this._getBalloonPositionData()}),this.formView.focus()}_hideUI(){this.formView.footnotesText.fieldView.value="",this.formView.footnotesValue.fieldView.value="",this.formView.element.reset(),this._balloon.remove(this.formView),this.editor.editing.view.focus()}_getBalloonPositionData(){const e=this.editor.editing.view,t=e.document;let o=null;return o=()=>e.domConverter.viewRangeToDom(t.selection.getFirstRange()),{target:o}}}class E extends e.Plugin{static get requires(){return[b,V]}}const C={Footnotes:E}})(),n=n.default})()));+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.footnotes=t())}(self,()=>(()=>{var e={"./node_modules/css-loader/dist/cjs.js!./assets/js/ckeditor5_plugins/footnotes/theme/footnotes.css":(e,t,o)=>{"use strict";o.d(t,{A:()=>a});var n=o("./node_modules/css-loader/dist/runtime/noSourceMaps.js"),s=o.n(n),r=o("./node_modules/css-loader/dist/runtime/api.js"),i=o.n(r)()(s());i.push([e.id,".ck.ck-abbr-footnotes .ck-input {\n  width: 30em;\n}\n\n.ck.ck-abbr-footnotes textarea {\n  height: 10em;\n}\n",""]);const a=i},"./node_modules/css-loader/dist/runtime/api.js":e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o="",n=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),n&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),n&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o}).join("")},t.i=function(e,o,n,s,r){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var a=0;a<this.length;a++){var l=this[a][0];null!=l&&(i[l]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);n&&i[d[0]]||(void 0!==r&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=r),o&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=o):d[2]=o),s&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=s):d[4]="".concat(s)),t.push(d))}},t}},"./node_modules/css-loader/dist/runtime/noSourceMaps.js":e=>{"use strict";e.exports=function(e){return e[1]}},"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":e=>{"use strict";var t=[];function o(e){for(var o=-1,n=0;n<t.length;n++)if(t[n].identifier===e){o=n;break}return o}function n(e,n){for(var r={},i=[],a=0;a<e.length;a++){var l=e[a],c=n.base?l[0]+n.base:l[0],d=r[c]||0,u="".concat(c," ").concat(d);r[c]=d+1;var m=o(u),f={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==m)t[m].references++,t[m].updater(f);else{var h=s(f,n);n.byIndex=a,t.splice(a,0,{identifier:u,updater:h,references:1})}i.push(u)}return i}function s(e,t){var o=t.domAPI(t);o.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;o.update(e=t)}else o.remove()}}e.exports=function(e,s){var r=n(e=e||[],s=s||{});return function(e){e=e||[];for(var i=0;i<r.length;i++){var a=o(r[i]);t[a].references--}for(var l=n(e,s),c=0;c<r.length;c++){var d=o(r[c]);0===t[d].references&&(t[d].updater(),t.splice(d,1))}r=l}}},"./node_modules/style-loader/dist/runtime/insertBySelector.js":e=>{"use strict";var t={};e.exports=function(e,o){var n=function(e){if(void 0===t[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}t[e]=o}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(o)}},"./node_modules/style-loader/dist/runtime/insertStyleElement.js":e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(e,t,o)=>{"use strict";e.exports=function(e){var t=o.nc;t&&e.setAttribute("nonce",t)}},"./node_modules/style-loader/dist/runtime/styleDomAPI.js":e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(o){!function(e,t,o){var n="";o.supports&&(n+="@supports (".concat(o.supports,") {")),o.media&&(n+="@media ".concat(o.media," {"));var s=void 0!==o.layer;s&&(n+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),n+=o.css,s&&(n+="}"),o.media&&(n+="}"),o.supports&&(n+="}");var r=o.sourceMap;r&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,o)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},"./node_modules/style-loader/dist/runtime/styleTagTransform.js":e=>{"use strict";e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},"ckeditor5/src/core.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/engine.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/engine.js")},"ckeditor5/src/ui.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/widget.js":(e,t,o)=>{e.exports=o("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function o(n){var s=t[n];if(void 0!==s)return s.exports;var r=t[n]={id:n,exports:{}};return e[n](r,r.exports,o),r.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.nc=void 0;var n={};return(()=>{"use strict";o.d(n,{default:()=>C});var e=o("ckeditor5/src/core.js"),t=o("ckeditor5/src/widget.js");class s extends e.Command{execute(e){const{model:t}=this.editor;t.change(o=>{t.insertObject(function(e,t){const o=e.createElement("Footnotes",{value:t.footnotes_value,text:t.footnotes_text});return o}(o,e),null,null,{setSelection:"on"})})}}var r=o("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),i=o.n(r),a=o("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),l=o.n(a),c=o("./node_modules/style-loader/dist/runtime/insertBySelector.js"),d=o.n(c),u=o("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),m=o.n(u),f=o("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),h=o.n(f),p=o("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),v=o.n(p),w=o("./node_modules/css-loader/dist/cjs.js!./assets/js/ckeditor5_plugins/footnotes/theme/footnotes.css"),g={};g.styleTagTransform=v(),g.setAttributes=m(),g.insert=d().bind(null,"head"),g.domAPI=l(),g.insertStyleElement=h();i()(w.A,g);w.A&&w.A.locals&&w.A.locals;class b extends e.Plugin{static get requires(){return[t.Widget]}constructor(e){super(e)}init(){this._defineSchema(),this._defineConverters(),this.editor.commands.add("insertFootnotes",new s(this.editor))}_defineSchema(){this.editor.model.schema.register("Footnotes",{isInline:!0,isObject:!0,allowWhere:"$text",allowAttributes:["value","text"]})}_defineConverters(){const e=this.editor.conversion;e.for("upcast").elementToElement({view:{name:"fn",attributes:["value"]},model:(e,{writer:t})=>{const o=this.editor.editing.view.domConverter.viewToDom(e).innerHTML,n=e.getAttribute("text");return t.createElement("Footnotes",{value:e.getAttribute("value"),text:n||o})}}),e.for("dataDowncast").elementToElement({model:"Footnotes",view:(e,{writer:t})=>t.createContainerElement("fn",{value:e.getAttribute("value"),text:e.getAttribute("text")})}),e.for("editingDowncast").elementToElement({model:"Footnotes",view:(e,{writer:o})=>{const n=o.createContainerElement("fn",{value:e.getAttribute("value"),text:e.getAttribute("text")});return o.insert(o.createPositionAt(n,0),o.createText("[fn]")),(0,t.toWidget)(n,o)}})}}var x=o("ckeditor5/src/ui.js");class y extends x.InputView{constructor(e){super(e),this.template.tag="textarea"}}function _(e,t,o){const n=new y(e.locale);return n.set({id:t,ariaDescribedById:o}),n.bind("isReadOnly").to(e,"isEnabled",e=>!e),n.bind("hasError").to(e,"errorText",e=>!!e),n.on("input",()=>{e.errorText=null}),e.bind("isEmpty","isFocused","placeholder").to(n),n}class j extends x.View{constructor(e){super(e),this.footnotesText=this._createTextArea("Footnote text"),this.footnotesValue=this._createInput("Value"),this.saveButtonView=this._createButton("Save","ck-button-save"),this.saveButtonView.type="submit",this.cancelButtonView=this._createButton("Cancel","ck-button-cancel"),this.cancelButtonView.delegate("execute").to(this,"cancel"),this.childViews=this.createCollection([this.footnotesText,this.footnotesValue,this.saveButtonView,this.cancelButtonView]),this.setTemplate({tag:"form",attributes:{class:["ck","ck-abbr-footnotes"],tabindex:"-1"},children:this.childViews})}render(){super.render(),(0,x.submitHandler)({view:this})}focus(){this.childViews.first.focus()}_createTextArea(e){const t=new x.LabeledFieldView(this.locale,_);return t.label=e,t}_createInput(e){const t=new x.LabeledFieldView(this.locale,x.createLabeledInputText);return t.label=e,t}_createButton(e,t){const o=new x.ButtonView;return o.set({label:e,withText:!0,class:t}),o}}var T=o("ckeditor5/src/engine.js");class V extends e.Plugin{static get requires(){return[x.ContextualBalloon]}init(){const e=this.editor;this._balloon=this.editor.plugins.get(x.ContextualBalloon),this.formView=this._createFormView(),e.ui.componentFactory.add("Footnotes",t=>{const o=e.commands.get("insertFootnotes"),n=new x.ButtonView(t);return n.set({label:e.t("Footnotes"),icon:'<?xml version="1.0" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"\n "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">\n<svg version="1.0" xmlns="http://www.w3.org/2000/svg"\n width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"\n preserveAspectRatio="xMidYMid meet">\n\n<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)"\nfill="#000000" stroke="none">\n<path d="M115 115 c0 -14 5 -25 11 -25 7 0 9 10 6 25 -2 14 -7 25 -11 25 -3 0\n-6 -11 -6 -25z"/>\n<path d="M35 110 c-4 -6 5 -10 19 -10 14 0 26 -4 26 -10 0 -5 -8 -10 -19 -10\n-24 0 -45 -25 -38 -45 4 -9 19 -14 42 -13 33 1 35 3 35 38 0 20 -5 41 -12 48\n-15 15 -45 16 -53 2z m45 -60 c0 -5 -9 -10 -20 -10 -11 0 -20 5 -20 10 0 6 9\n10 20 10 11 0 20 -4 20 -10z"/>\n</g>\n</svg>\n',tooltip:!0}),n.bind("isOn","isEnabled").to(o,"value","isEnabled"),this.listenTo(n,"execute",()=>{this._showUI()}),n}),e.editing.view.addObserver(T.ClickObserver),e.listenTo(e.editing.view.document,"click",(t,o)=>{const n=e.editing.mapper.toModelElement(o.target);"Footnotes"==n.name&&(this.formView.footnotesText.fieldView.value=n.getAttribute("text"),this.formView.footnotesValue.fieldView.value=n.getAttribute("value"),this._showUI())})}_createFormView(){const e=this.editor,t=new j(e.locale);return this.listenTo(t,"submit",()=>{const o={footnotes_text:t.footnotesText.fieldView.element.value,footnotes_value:t.footnotesValue.fieldView.element.value};e.execute("insertFootnotes",o),this._hideUI()}),this.listenTo(t,"cancel",()=>{this._hideUI()}),(0,x.clickOutsideHandler)({emitter:t,activator:()=>this._balloon.visibleView===t,contextElements:[this._balloon.view.element],callback:()=>this._hideUI()}),t}_showUI(){this._balloon.add({view:this.formView,position:this._getBalloonPositionData()}),this.formView.focus()}_hideUI(){this.formView.footnotesText.fieldView.value="",this.formView.footnotesValue.fieldView.value="",this.formView.element.reset(),this._balloon.remove(this.formView),this.editor.editing.view.focus()}_getBalloonPositionData(){const e=this.editor.editing.view,t=e.document;let o=null;return o=()=>e.domConverter.viewRangeToDom(t.selection.getFirstRange()),{target:o}}}class E extends e.Plugin{static get requires(){return[b,V]}}const C={Footnotes:E}})(),n=n.default})());

Hi

I have tested this on drupal 11.x and followed the below steps:

Steps to reproduce

• Update drupal to 10.5.x or 11.x
• Attempt to load a textarea using CKeditor

After applying patch successfully, observed that able to update the textarea with CKEditor and icons compatibility.

Hence this can be moved to RTBC+1. Attaching the screenshot for the reference

Keeping the ticekt in the Needs review for code review.