From 876ce8e955bb37453297c65ffe71532011e5da2e Mon Sep 17 00:00:00 2001
From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Wed, 9 Oct 2024 10:41:08 +0200
Subject: [PATCH] Insert smiley in a widget

---
 .../ckeditor5-woltlab-smiley/src/woltlabsmiley.ts    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/plugins/ckeditor5-woltlab-smiley/src/woltlabsmiley.ts b/plugins/ckeditor5-woltlab-smiley/src/woltlabsmiley.ts
index cd06650..f53188c 100644
--- a/plugins/ckeditor5-woltlab-smiley/src/woltlabsmiley.ts
+++ b/plugins/ckeditor5-woltlab-smiley/src/woltlabsmiley.ts
@@ -12,6 +12,7 @@ import type { DowncastInsertEvent } from "@ckeditor/ckeditor5-engine";
 import { Image } from "@ckeditor/ckeditor5-image";
 
 import "../theme/woltlabsmiley.css";
+import { toWidget } from "@ckeditor/ckeditor5-widget";
 
 export class WoltlabSmiley extends Plugin {
   static get pluginName() {
@@ -69,13 +70,20 @@ export class WoltlabSmiley extends Plugin {
           consumable.consume(item, "insert");
 
           const image = writer.createEmptyElement("img");
+          const container = writer.createContainerElement(
+            "span",
+            { class: "image-inline" },
+            image,
+          );
           writer.setAttribute("translate", "no", image);
           const position = mapper.toViewPosition(
             this.editor.model.createPositionBefore(item),
           );
-          writer.insert(position, image);
+          toWidget(container, writer);
+
+          writer.insert(position, container);
 
-          mapper.bindElements(item, image);
+          mapper.bindElements(item, container);
         },
         { priority: "high" },
       );