Issue #2358529 by Tom Verhaeghe, Wim Leers, brylie, brahmjeet789,...

Issue #2358529 by Tom Verhaeghe, Wim Leers, brylie, brahmjeet789, effulgentsia: Right-aligned images in CKEditor appear to the right of other fields

core/modules/entity_reference/src/Tests/EntityReferenceFormatterTest.php

@@ -171,7 +171,7 @@ public function testEntityFormatter() {
       </div>
 </div>
 ';
-    $expected_rendered_body_field_1 = '<div class="field field-entity-test--body field-name-body field-type-text field-label-above">
+    $expected_rendered_body_field_1 = '<div class="field field-entity-test--body field-name-body field-type-text field-label-above clearfix">
       <div class="field-label">Body</div>
     <div class="field-items">
           <div class="field-item"><p>Hello, world!</p></div>

core/modules/text/templates/field--text-long.html.twig

+{% extends "@text/field--text.html.twig" %}

core/modules/text/templates/field--text-with-summary.html.twig

+{% extends "@text/field--text.html.twig" %}

core/modules/text/templates/field--text.html.twig

+{% extends "@system/field.html.twig" %}
+{#
+/**
+ * @file
+ * Default theme implementation for a text field.
+ *
+ * A 'clearfix' class is added, because 'text' fields have a 'format' property
+ * that allows a Text Format to be associated with the entered text, which then
+ * applies filtering on output. A common use case is to align images to the left
+ * or right, and without this 'clearfix' class, such aligned images may be
+ * rendered outside of the 'text' field formatter's boundaries, and hence
+ * overlap with other fields. By setting the 'clearfix' class on all 'text'
+ * fields, we prevent that.
+ *
+ * @see https://www.drupal.org/node/2358529
+ *
+ * @ingroup themeable
+ */
+#}
+{% set attributes = attributes.addClass('clearfix') %}

core/modules/text/text.module

@@ -38,6 +38,29 @@ function text_help($route_name, RouteMatchInterface $route_match) {
   }
 }
 
+/**
+ * Implements hook_theme().
+ */
+function text_theme() {
+  return [
+    // Normally theme suggestion templates are only picked up when they are in
+    // themes. We explicitly define theme suggestions here so that the text
+    // field templates in core/modules/text/templates are picked up.
+    'field__text' => [
+      'render element' => 'elements',
+      'base hook' => 'field',
+    ],
+    'field__text_long' => [
+      'render element' => 'elements',
+      'base hook' => 'field',
+    ],
+    'field__text_with_summary' => [
+      'render element' => 'elements',
+      'base hook' => 'field',
+    ],
+  ];
+}
+
 /**
  * Generates a trimmed, formatted version of a text field value.
  *