Workaround for the reverse typing in Safari after a reset

See https://www.woltlab.com/community/thread/301269-safari-beitrag-absenden-setzt-den-fokus-in-den-nachfolgenden-editor-und-schreibt/

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
index da7178b5054f494e2434af2729969e2132e69bbb..e65673ece8f2fb3ebae152ac4cb5f10a5c084c87 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
@@ -27,6 +27,7 @@ import Devtools from "../Devtools";
 import { ClassicEditor, CodeBlockConfig, EditorConfig, Element as CkeElement } from "./Ckeditor/Types";
 import { setupSubmitShortcut } from "./Ckeditor/Keyboard";
 import { setup as setupLayer } from "./Ckeditor/Layer";
+import { browser, touch } from "../Environment";
 
 const instances = new WeakMap<HTMLElement, CKEditor>();
 
@@ -122,6 +123,17 @@ class Ckeditor {
     dispatchToCkeditor(this.sourceElement).reset({
       ckeditor: this,
     });
+
+    if (browser() === "safari" && !touch()) {
+      // Safari sometimes suffers from a “reverse typing” effect caused by the
+      // improper shift of the focus out of the editing area.
+      // https://github.com/ckeditor/ckeditor5/issues/14702
+      const editor = this.#editor.ui.element!;
+      editor.focus();
+      window.setTimeout(() => {
+        editor.blur();
+      }, 0);
+    }
   }
 
   get element(): HTMLElement {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
index 7dbfa6f9ac1fd28f2e64d896c1dd0aaa47af0cc9..2033785a475303371dc3331b900d43e22416bd9e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
@@ -12,7 +12,7 @@
  * @since 6.0
  * @woltlabExcludeBundle tiny
  */
-define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Media", "./Ckeditor/Mention", "./Ckeditor/Quote", "./Ckeditor/Autosave", "./Ckeditor/Configuration", "./Ckeditor/Event", "./Ckeditor/SubmitOnEnter", "./Ckeditor/Normalizer", "../Ui/Scroll", "../Devtools", "./Ckeditor/Keyboard", "./Ckeditor/Layer"], function (require, exports, tslib_1, Attachment_1, Media_1, Mention_1, Quote_1, Autosave_1, Configuration_1, Event_1, SubmitOnEnter_1, Normalizer_1, Scroll_1, Devtools_1, Keyboard_1, Layer_1) {
+define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Media", "./Ckeditor/Mention", "./Ckeditor/Quote", "./Ckeditor/Autosave", "./Ckeditor/Configuration", "./Ckeditor/Event", "./Ckeditor/SubmitOnEnter", "./Ckeditor/Normalizer", "../Ui/Scroll", "../Devtools", "./Ckeditor/Keyboard", "./Ckeditor/Layer", "../Environment"], function (require, exports, tslib_1, Attachment_1, Media_1, Mention_1, Quote_1, Autosave_1, Configuration_1, Event_1, SubmitOnEnter_1, Normalizer_1, Scroll_1, Devtools_1, Keyboard_1, Layer_1, Environment_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getCkeditorById = exports.getCkeditor = exports.setupCkeditor = void 0;
@@ -93,6 +93,11 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi
             (0, Event_1.dispatchToCkeditor)(this.sourceElement).reset({
                 ckeditor: this,
             });
+            if ((0, Environment_1.browser)() === "safari" && !(0, Environment_1.touch)()) {
+                const editor = this.#editor.ui.element;
+                editor.focus();
+                editor.blur();
+            }
         }
         get element() {
             return this.#editor.ui.element;