From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 21 Aug 2023 12:38:35 +0000 (+0200)
Subject: Workaround for the reverse typing in Safari after a reset
X-Git-Tag: 6.0.0_Beta_2~9
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e43babb86f525605d05459bb943fc8fb7768f8e7;p=GitHub%2FWoltLab%2FWCF.git

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 da7178b505..e65673ece8 100644
--- 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 7dbfa6f9ac..2033785a47 100644
--- 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;