Handle context menu on embedding strategy

Author: justinmc

lib/web_ui/lib/src/engine.dart

@@ -58,7 +58,6 @@ export 'engine/canvaskit/vertices.dart';
 export 'engine/clipboard.dart';
 export 'engine/color_filter.dart';
 export 'engine/configuration.dart';
-export 'engine/context_menu.dart';
 export 'engine/dom.dart';
 export 'engine/embedder.dart';
 export 'engine/engine_canvas.dart';

lib/web_ui/lib/src/engine/context_menu.dart

@@ -356,6 +356,20 @@ class FlutterViewEmbedder {
     assert(element.parentNode == _resourcesHost);
     element.remove();
   }
+
+  /// Enables the browser's context menu for this part of the DOM.
+  ///
+  /// By default, when a Flutter web app starts, the context menu is already
+  /// enabled. Typically, this method would be used after calling
+  /// [disableContextMenu] to first disable it.
+  void enableContextMenu() => _embeddingStrategy.enableContextMenu();
+
+  /// Disables the browser's context menu for this part of the DOM.
+  ///
+  /// By default, when a Flutter web app starts, the context menu is enabled.
+  ///
+  /// Can be re-enabled by calling [enableContextMenu].
+  void disableContextMenu() => _embeddingStrategy.disableContextMenu();
 }
 
 /// The embedder singleton.

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

@@ -12,7 +12,6 @@ import 'package:ui/ui.dart' as ui;
 
 import '../engine.dart'  show platformViewManager, registerHotRestartListener;
 import 'clipboard.dart';
-import 'context_menu.dart';
 import 'dom.dart';
 import 'embedder.dart';
 import 'mouse_cursor.dart';
@@ -537,11 +536,11 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {
         final MethodCall decoded = codec.decodeMethodCall(data);
         switch (decoded.method) {
           case 'enableContextMenu':
-            ContextMenu.enableContextMenu();
+            flutterViewEmbedder.enableContextMenu();
             replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
             return;
           case 'disableContextMenu':
-            ContextMenu.disableContextMenu();
+            flutterViewEmbedder.disableContextMenu();
             replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
             return;
         }

lib/web_ui/lib/src/engine/platform_dispatcher.dart

@@ -51,6 +51,12 @@ class CustomElementEmbeddingStrategy extends EmbeddingStrategy {
     registerElementForCleanup(resourceHost);
   }
 
+  @override
+  void disableContextMenu() => disableContextMenuOn(_hostElement);
+
+  @override
+  void enableContextMenu() => enableContextMenuOn(_hostElement);
+
   void _setHostAttribute(String name, String value) {
     _hostElement.setAttribute(name, value);
   }

lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/custom_element_embedding_strategy.dart

@@ -5,6 +5,7 @@
 import 'package:meta/meta.dart';
 
 import 'package:ui/src/engine/dom.dart';
+import 'package:ui/src/engine/safe_browser_api.dart';
 import 'package:ui/src/engine/view_embedder/hot_restart_cache_handler.dart';
 
 import 'custom_element_embedding_strategy.dart';
@@ -20,7 +21,7 @@ import 'full_page_embedding_strategy.dart';
 /// * [CustomElementEmbeddingStrategy] - Flutter is rendered inside a custom host
 ///   element, provided by the web app programmer through the engine
 ///   initialization.
-abstract class EmbeddingStrategy {
+abstract class EmbeddingStrategy with _ContextMenu {
   EmbeddingStrategy() {
     // Initialize code to handle hot-restart (debug only).
     assert(() {
@@ -56,3 +57,70 @@ abstract class EmbeddingStrategy {
     _hotRestartCache?.registerElement(element);
   }
 }
+
+mixin _ContextMenu {
+  /// False when the context menu has been disabled, otherwise true.
+  bool _contextMenuEnabled = true;
+
+  /// Listener for contextmenu events that prevents the browser's context menu
+  /// from being shown.
+  final DomEventListener _disablingContextMenuListener = allowInterop((DomEvent event) {
+    event.preventDefault();
+  });
+
+  /// Disables the browser's context menu for this part of the DOM.
+  ///
+  /// By default, when a Flutter web app starts, the context menu is enabled.
+  ///
+  /// Can be re-enabled by calling [enableContextMenu].
+  ///
+  /// See also:
+  ///
+  ///  * [disableContextMenuOn], which is like this but takes the relevant
+  ///    [DomElement] as a parameter.
+  void disableContextMenu();
+
+  /// Disables the browser's context menu for the given [DomElement].
+  ///
+  /// See also:
+  ///
+  ///  * [disableContextMenu], which is like this but is not passed a
+  ///    [DomElement].
+  @protected
+  void disableContextMenuOn(DomElement element) {
+    if (!_contextMenuEnabled) {
+      return;
+    }
+
+    element.addEventListener('contextmenu', _disablingContextMenuListener);
+    _contextMenuEnabled = false;
+  }
+
+  /// Enables the browser's context menu for this part of the DOM.
+  ///
+  /// By default, when a Flutter web app starts, the context menu is already
+  /// enabled. Typically, this method would be used after calling
+  /// [disableContextMenu] to first disable it.
+  ///
+  /// See also:
+  ///
+  ///  * [enableContextMenuOn], which is like this but takes the relevant
+  ///    [DomElement] as a parameter.
+  void enableContextMenu();
+
+  /// Enables the browser's context menu for the given [DomElement].
+  ///
+  /// See also:
+  ///
+  ///  * [enableContextMenu], which is like this but is not passed a
+  ///    [DomElement].
+  @protected
+  void enableContextMenuOn(DomElement element) {
+    if (_contextMenuEnabled) {
+      return;
+    }
+
+    element.removeEventListener('contextmenu', _disablingContextMenuListener);
+    _contextMenuEnabled = true;
+  }
+}

lib/web_ui/lib/src/engine/view_embedder/embedding_strategy/embedding_strategy.dart

@@ -48,6 +48,12 @@ class FullPageEmbeddingStrategy extends EmbeddingStrategy {
     registerElementForCleanup(resourceHost);
   }
 
+  @override
+  void disableContextMenu() => disableContextMenuOn(domDocument.body!);
+
+  @override
+  void enableContextMenu() => enableContextMenuOn(domDocument.body!);
+
   void _setHostAttribute(String name, String value) {
     domDocument.body!.setAttribute(name, value);
   }