From 0e2bbfdf8d5a06d25f555331766bc9252cf01435 Mon Sep 17 00:00:00 2001
From: i-just <iwona@pixelandtonic.com>
Date: Fri, 7 Aug 2026 10:58:58 +0200
Subject: [PATCH] respect custom styles in fullscreen mode

---
 src/Field.php | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/Field.php b/src/Field.php
index 0fdd2fc3..38f52fc0 100644
--- a/src/Field.php
+++ b/src/Field.php
@@ -1588,6 +1588,8 @@ private function _inputHtml(mixed $value, ?ElementInterface $element, bool $stat
         $idJs = Json::encode($view->namespaceInputId($id));
         $wordCountId = "$id-counts";
         $wordCountIdJs = Json::encode($view->namespaceInputId($wordCountId));
+        $inputId = Html::id('input-ckeditor-' . $id);
+        $namespacedInputId = $view->namespaceInputId($inputId);
 
         $baseConfig = array_filter([
             'defaultTransform' => $defaultTransform?->handle,
@@ -1719,6 +1721,7 @@ private function _inputHtml(mixed $value, ?ElementInterface $element, bool $stat
             $wordLimitJs,
             $characterLimitJs,
             $imageMode,
+            $namespacedInputIdJs,
         ) => <<<JS
 $imports
 $uiTranslationImport
@@ -1773,6 +1776,30 @@ private function _inputHtml(mixed $value, ?ElementInterface $element, bool $stat
     config.heading.options = Object.values(headings);
   }
 
+  // special case for fullscreen mode and Custom Styles
+  // see https://github.com/craftcms/ckeditor/issues/614
+  if (config.toolbar.items.indexOf('fullscreen') >= 0) {
+    const fullscreenConfig = customConfig?.fullscreen ?? {};
+    const userOnEnterCallback = fullscreenConfig?.onEnterCallback;
+    const userOnLeaveCallback = fullscreenConfig?.onLeaveCallback;
+    const fieldInputId = $namespacedInputIdJs;
+    config.fullscreen = {
+      ...fullscreenConfig,
+      onEnterCallback: (container) => {
+        container.classList.add(fieldInputId);
+        if (userOnEnterCallback) {
+          userOnEnterCallback(container);
+        }
+      },
+      onLeaveCallback: (container) => {
+        if (userOnLeaveCallback) {
+          userOnLeaveCallback(container);
+        }
+        container.classList.remove(fieldInputId);
+      },
+    };
+  }
+
   const extraRemovePlugins = [];
   if ($showWordCountJs) {
     if (typeof config.wordCount === 'undefined') {
@@ -1841,13 +1868,13 @@ private function _inputHtml(mixed $value, ?ElementInterface $element, bool $stat
                 $this->wordLimit ?: 0,
                 $this->characterLimit ?: 0,
                 $this->imageMode,
+                $namespacedInputId,
             ],
             View::POS_END,
             ['type' => 'module']
         );
 
         $value = $this->prepValueForInput($value, $element);
-        $inputId = Html::id('input-ckeditor-' . $id);
         $html = Html::textarea($this->handle, $value, [
             'id' => $id,
             'class' => 'hidden',
@@ -1873,7 +1900,9 @@ private function _inputHtml(mixed $value, ?ElementInterface $element, bool $stat
             }
             $css = trim($css);
             if ($css !== '') {
-                $view->registerCss("#{$view->namespaceInputId($inputId)} { $css }");
+                // the id is needed for the regular field
+                // the class is used by the fullscreen mode (there can only be one at the time)
+                $view->registerCss("#{$namespacedInputId}, .{$namespacedInputId} { $css }");
             }
         }