[BUGFIX] Restore ckeditor selections when unloading modal

Navigating in the RteLinkBrowser by e.g. switching tabs or browsing the
file tree now recovers the selections of the underlying ckeditor. This
allows to invoke a browser search, navigate within the link browser and
place a link afterwards.

Resolves: #91006
Related: #90952
Releases: master, 9.5
Change-Id: If2d943f0b2a8b86babead8c1397d6222b0c0da7d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/64121


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Josef Glatz <josefglatz@gmail.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Josef Glatz <josefglatz@gmail.com>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/TypeScript/rte_ckeditor/Resources/Public/TypeScript/RteLinkBrowser.ts

@@ -23,7 +23,7 @@ import Modal = require('TYPO3/CMS/Backend/Modal');
 class RteLinkBrowser {
   protected plugin: any = null;
   protected CKEditor: CKEDITOR.editor = null;
-  protected ranges: CKEDITOR.dom.range[] = null;
+  protected ranges: CKEDITOR.dom.range[] = [];
   protected siteUrl: string = '';
 
   /**
@@ -48,6 +48,10 @@ class RteLinkBrowser {
       });
     }
 
+    window.addEventListener('beforeunload', (): void => {
+      this.CKEditor.getSelection().selectRanges(this.ranges);
+    });
+
     // Backup all ranges that are active when the Link Browser is requested
     this.ranges = this.CKEditor.getSelection().getRanges();
 

typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/RteLinkBrowser.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","jquery","TYPO3/CMS/Recordlist/LinkBrowser","TYPO3/CMS/Backend/Modal","ckeditor"],(function(t,e,i,n,s){"use strict";class l{constructor(){this.plugin=null,this.CKEditor=null,this.ranges=null,this.siteUrl=""}initialize(t){let e=s.currentModal.data("ckeditor");if(void 0!==e)this.CKEditor=e;else{let e;e=void 0!==top.TYPO3.Backend&&void 0!==top.TYPO3.Backend.ContentContainer.get()?top.TYPO3.Backend.ContentContainer.get():window.parent,i.each(e.CKEDITOR.instances,(e,i)=>{i.id===t&&(this.CKEditor=i)})}this.ranges=this.CKEditor.getSelection().getRanges(),i.extend(l,i("body").data()),i(".t3js-class-selector").on("change",()=>{i("option:selected",this).data("linkTitle")&&i(".t3js-linkTitle").val(i("option:selected",this).data("linkTitle"))}),i(".t3js-removeCurrentLink").on("click",t=>{t.preventDefault(),this.CKEditor.execCommand("unlink"),s.dismiss()})}finalizeFunction(t){const e=this.CKEditor.document.createElement("a"),l=n.getLinkAttributeValues();let r=l.params?l.params:"";l.target&&e.setAttribute("target",l.target),l.class&&e.setAttribute("class",l.class),l.title&&e.setAttribute("title",l.title),delete l.title,delete l.class,delete l.target,delete l.params,i.each(l,(t,i)=>{e.setAttribute(t,i)});const a=t.match(/^([a-z0-9]+:\/\/[^:\/?#]+(?:\/?[^?#]*)?)(\??[^#]*)(#?.*)$/);if(a&&a.length>0){t=a[1]+a[2];const e=a[2].length>0?"&":"?";r.length>0&&("&"===r[0]&&(r=r.substr(1)),r.length>0&&(t+=e+r)),t+=a[3]}e.setAttribute("href",t);const o=this.CKEditor.getSelection();o.selectRanges(this.ranges),o&&""===o.getSelectedText()&&o.selectElement(o.getStartElement()),o&&o.getSelectedText()?e.setText(o.getSelectedText()):e.setText(e.getAttribute("href")),this.CKEditor.insertElement(e),s.dismiss()}}let r=new l;return n.finalizeFunction=t=>{r.finalizeFunction(t)},r}));
\ No newline at end of file
+define(["require","exports","jquery","TYPO3/CMS/Recordlist/LinkBrowser","TYPO3/CMS/Backend/Modal","ckeditor"],(function(t,e,i,n,s){"use strict";class l{constructor(){this.plugin=null,this.CKEditor=null,this.ranges=[],this.siteUrl=""}initialize(t){let e=s.currentModal.data("ckeditor");if(void 0!==e)this.CKEditor=e;else{let e;e=void 0!==top.TYPO3.Backend&&void 0!==top.TYPO3.Backend.ContentContainer.get()?top.TYPO3.Backend.ContentContainer.get():window.parent,i.each(e.CKEDITOR.instances,(e,i)=>{i.id===t&&(this.CKEditor=i)})}window.addEventListener("beforeunload",()=>{this.CKEditor.getSelection().selectRanges(this.ranges)}),this.ranges=this.CKEditor.getSelection().getRanges(),i.extend(l,i("body").data()),i(".t3js-class-selector").on("change",()=>{i("option:selected",this).data("linkTitle")&&i(".t3js-linkTitle").val(i("option:selected",this).data("linkTitle"))}),i(".t3js-removeCurrentLink").on("click",t=>{t.preventDefault(),this.CKEditor.execCommand("unlink"),s.dismiss()})}finalizeFunction(t){const e=this.CKEditor.document.createElement("a"),l=n.getLinkAttributeValues();let r=l.params?l.params:"";l.target&&e.setAttribute("target",l.target),l.class&&e.setAttribute("class",l.class),l.title&&e.setAttribute("title",l.title),delete l.title,delete l.class,delete l.target,delete l.params,i.each(l,(t,i)=>{e.setAttribute(t,i)});const a=t.match(/^([a-z0-9]+:\/\/[^:\/?#]+(?:\/?[^?#]*)?)(\??[^#]*)(#?.*)$/);if(a&&a.length>0){t=a[1]+a[2];const e=a[2].length>0?"&":"?";r.length>0&&("&"===r[0]&&(r=r.substr(1)),r.length>0&&(t+=e+r)),t+=a[3]}e.setAttribute("href",t);const o=this.CKEditor.getSelection();o.selectRanges(this.ranges),o&&""===o.getSelectedText()&&o.selectElement(o.getStartElement()),o&&o.getSelectedText()?e.setText(o.getSelectedText()):e.setText(e.getAttribute("href")),this.CKEditor.insertElement(e),s.dismiss()}}let r=new l;return n.finalizeFunction=t=>{r.finalizeFunction(t)},r}));
\ No newline at end of file