[web] - Move text editing nodes outside of shadowDOM, reland (flutter#40968)

[web] - Move text editing nodes outside of shadowDOM, reland

Author: htoor3

lib/web_ui/lib/src/engine/embedder.dart

@@ -24,7 +24,8 @@ import 'view_embedder/embedding_strategy/embedding_strategy.dart';
 /// Manages several top-level elements that host Flutter-generated content,
 /// including:
 ///
-/// - [glassPaneElement], the root element of a Flutter view.
+/// - [flutterViewElement], the root element of a Flutter view.
+/// - [glassPaneElement], the glass pane element that hosts the shadowDOM.
 /// - [glassPaneShadow], the shadow root used to isolate Flutter-rendered
 ///   content from the surrounding page content, including from the platform
 ///   views.
@@ -62,7 +63,10 @@ class FlutterViewEmbedder {
   /// Abstracts all the DOM manipulations required to embed a Flutter app in an user-supplied `hostElement`.
   final EmbeddingStrategy _embeddingStrategy;
 
-  // The tag name for the root view of the flutter app (glass-pane)
+  // The tag name for the Flutter View, which hosts the app.
+  static const String flutterViewTagName = 'flutter-view';
+
+  // The tag name for the glass-pane.
   static const String glassPaneTagName = 'flt-glass-pane';
 
   /// The element that contains the [sceneElement].
@@ -117,13 +121,19 @@ class FlutterViewEmbedder {
   /// which captures semantics input events. The semantics DOM tree must be a
   /// child of the glass pane element so that events bubble up to the glass pane
   /// if they are not handled by semantics.
+  DomElement get flutterViewElement => _flutterViewElement;
+  late DomElement _flutterViewElement;
+
   DomElement get glassPaneElement => _glassPaneElement;
   late DomElement _glassPaneElement;
 
   /// The [HostNode] of the [glassPaneElement], which contains the whole Flutter app.
   HostNode get glassPaneShadow => _glassPaneShadow;
   late HostNode _glassPaneShadow;
 
+  DomElement get textEditingHostNode => _textEditingHostNode;
+  late DomElement _textEditingHostNode;
+
   static const String defaultFontStyle = 'normal';
   static const String defaultFontWeight = 'normal';
   static const double defaultFontSize = 14;
@@ -149,14 +159,17 @@ class FlutterViewEmbedder {
     );
 
     // Create and inject the [_glassPaneElement].
+    _flutterViewElement = domDocument.createElement(flutterViewTagName);
     _glassPaneElement = domDocument.createElement(glassPaneTagName);
 
+
     // This must be attached to the DOM now, so the engine can create a host
     // node (ShadowDOM or a fallback) next.
     //
     // The embeddingStrategy will take care of cleaning up the glassPane on hot
     // restart.
-    _embeddingStrategy.attachGlassPane(glassPaneElement);
+    _embeddingStrategy.attachGlassPane(flutterViewElement);
+    flutterViewElement.appendChild(glassPaneElement);
 
     // Create a [HostNode] under the glass pane element, and attach everything
     // there, instead of directly underneath the glass panel.
@@ -168,6 +181,9 @@ class FlutterViewEmbedder {
     );
     _glassPaneShadow = glassPaneElementHostNode;
 
+    _textEditingHostNode =
+        createTextEditingHostNode(flutterViewElement, defaultCssFont);
+
     // Don't allow the scene to receive pointer events.
     _sceneHostElement = domDocument.createElement('flt-scene-host')
       ..style.pointerEvents = 'none';
@@ -189,20 +205,20 @@ class FlutterViewEmbedder {
     glassPaneElementHostNode.appendAll(<DomNode>[
       accessibilityPlaceholder,
       _sceneHostElement!,
-
-      // The semantic host goes last because hit-test order-wise it must be
-      // first. If semantics goes under the scene host, platform views will
-      // obscure semantic elements.
-      //
-      // You may be wondering: wouldn't semantics obscure platform views and
-      // make then not accessible? At least with some careful planning, that
-      // should not be the case. The semantics tree makes all of its non-leaf
-      // elements transparent. This way, if a platform view appears among other
-      // interactive Flutter widgets, as long as those widgets do not intersect
-      // with the platform view, the platform view will be reachable.
-      semanticsHostElement,
     ]);
 
+    // The semantic host goes last because hit-test order-wise it must be
+    // first. If semantics goes under the scene host, platform views will
+    // obscure semantic elements.
+    //
+    // You may be wondering: wouldn't semantics obscure platform views and
+    // make then not accessible? At least with some careful planning, that
+    // should not be the case. The semantics tree makes all of its non-leaf
+    // elements transparent. This way, if a platform view appears among other
+    // interactive Flutter widgets, as long as those widgets do not intersect
+    // with the platform view, the platform view will be reachable.
+    flutterViewElement.appendChild(semanticsHostElement);
+
     // When debugging semantics, make the scene semi-transparent so that the
     // semantics tree is more prominent.
     if (configuration.debugShowSemanticsNodes) {
@@ -211,7 +227,7 @@ class FlutterViewEmbedder {
 
     KeyboardBinding.initInstance();
     PointerBinding.initInstance(
-      glassPaneElement,
+      flutterViewElement,
       KeyboardBinding.instance!.converter,
     );
 
@@ -336,7 +352,7 @@ class FlutterViewEmbedder {
       if (isWebKit) {
         // The resourcesHost *must* be a sibling of the glassPaneElement.
         _embeddingStrategy.attachResourcesHost(resourcesHost,
-            nextTo: glassPaneElement);
+            nextTo: flutterViewElement);
       } else {
         glassPaneShadow.node
             .insertBefore(resourcesHost, glassPaneShadow.node.firstChild);
@@ -393,3 +409,24 @@ FlutterViewEmbedder? _flutterViewEmbedder;
 FlutterViewEmbedder ensureFlutterViewEmbedderInitialized() =>
     _flutterViewEmbedder ??=
         FlutterViewEmbedder(hostElement: configuration.hostElement);
+
+/// Creates a node to host text editing elements and applies a stylesheet
+/// to Flutter nodes that exist outside of the shadowDOM.
+DomElement createTextEditingHostNode(DomElement root, String defaultFont) {
+  final DomElement domElement =
+      domDocument.createElement('flt-text-editing-host');
+  final DomHTMLStyleElement styleElement = createDomHTMLStyleElement();
+
+  styleElement.id = 'flt-text-editing-stylesheet';
+  root.appendChild(styleElement);
+  applyGlobalCssRulesToSheet(
+    styleElement.sheet! as DomCSSStyleSheet,
+    hasAutofillOverlay: browserHasAutofillOverlay(),
+    cssSelectorPrefix: FlutterViewEmbedder.flutterViewTagName,
+    defaultCssFont: defaultFont,
+  );
+
+  root.appendChild(domElement);
+
+  return domElement;
+}

lib/web_ui/lib/src/engine/host_node.dart

@@ -110,10 +110,8 @@ class ShadowDomHostNode implements HostNode {
   /// This also calls [applyGlobalCssRulesToSheet], with the [defaultFont]
   /// to be used as the default font definition.
   ShadowDomHostNode(DomElement root, String defaultFont)
-      : assert(
-          root.isConnected ?? true,
-          'The `root` of a ShadowDomHostNode must be connected to the Document object or a ShadowRoot.'
-        ) {
+      : assert(root.isConnected ?? true,
+            'The `root` of a ShadowDomHostNode must be connected to the Document object or a ShadowRoot.') {
     _shadow = root.attachShadow(<String, dynamic>{
       'mode': 'open',
       // This needs to stay false to prevent issues like this:
@@ -181,7 +179,7 @@ class ElementHostNode implements HostNode {
     applyGlobalCssRulesToSheet(
       styleElement.sheet! as DomCSSStyleSheet,
       hasAutofillOverlay: browserHasAutofillOverlay(),
-      cssSelectorPrefix: FlutterViewEmbedder.glassPaneTagName,
+      cssSelectorPrefix: FlutterViewEmbedder.flutterViewTagName,
       defaultCssFont: defaultFont,
     );
 

lib/web_ui/lib/src/engine/mouse_cursor.dart

@@ -67,7 +67,7 @@ class MouseCursor {
 
   void activateSystemCursor(String? kind) {
     setElementStyle(
-      flutterViewEmbedder.glassPaneElement,
+      flutterViewEmbedder.flutterViewElement,
       'cursor',
       _mapKindToCssValue(kind),
     );

lib/web_ui/lib/src/engine/platform_views/content_manager.dart

@@ -128,8 +128,9 @@ class PlatformViewManager {
       }
 
       _ensureContentCorrectlySized(content, viewType);
+      wrapper.append(content);
 
-      return wrapper..append(content);
+      return wrapper;
     });
   }