feat(iOS): Suppress menu items (react-native-webview#3082)

android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java

@@ -220,6 +220,10 @@ public void setMenuItems(RNCWebView view, @Nullable ReadableArray items) {
         mRNCWebViewManagerImpl.setMenuCustomItems(view, items);
     }
 
+    @Override
+    @ReactProp(name = "suppressMenuItems ")
+    public void setSuppressMenuItems(RNCWebView view, @Nullable ReadableArray items) {}
+
     @Override
     @ReactProp(name = "messagingEnabled")
     public void setMessagingEnabled(RNCWebView view, boolean value) {

apple/RNCWebView.mm

@@ -374,6 +374,15 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
         }
         [_view setMenuItems:newMenuItems];
     }
+    if(oldViewProps.suppressMenuItems != newViewProps.suppressMenuItems) {
+        NSMutableArray *suppressMenuItems = [NSMutableArray array];
+
+        for (const auto &menuItem: newViewProps.suppressMenuItems) {
+            [suppressMenuItems addObject: RCTNSStringFromString(menuItem)];
+        }
+
+        [_view setSuppressMenuItems:suppressMenuItems];
+    }
     if (oldViewProps.hasOnFileDownload != newViewProps.hasOnFileDownload) {
         if (newViewProps.hasOnFileDownload) {
             _view.onFileDownload = [self](NSDictionary* dictionary) {

apple/RNCWebViewImpl.h

@@ -99,6 +99,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, assign) BOOL pullToRefreshEnabled;
 @property (nonatomic, assign) BOOL enableApplePay;
 @property (nonatomic, copy) NSArray<NSDictionary *> * _Nullable menuItems;
+@property (nonatomic, copy) NSArray<NSString *> * _Nullable suppressMenuItems;
 @property (nonatomic, copy) RCTDirectEventBlock onCustomMenuSelection;
 #if !TARGET_OS_OSX
 @property (nonatomic, assign) WKDataDetectorTypes dataDetectorTypes;

apple/RNCWebViewImpl.m

@@ -51,13 +51,42 @@ -(id)inputAccessoryView
 @interface RNCWKWebView : WKWebView
 #if !TARGET_OS_OSX
 @property (nonatomic, copy) NSArray<NSDictionary *> * _Nullable menuItems;
+@property (nonatomic, copy) NSArray<NSString *> * _Nullable suppressMenuItems;
 #endif // !TARGET_OS_OSX
 @end
 @implementation RNCWKWebView
 #if !TARGET_OS_OSX
+- (NSString *)stringFromAction:(SEL) action {
+  NSString *sel = NSStringFromSelector(action);
+
+  NSDictionary *map = @{
+      @"cut:":               @"cut",
+      @"copy:":              @"copy",
+      @"paste:":             @"paste",
+      @"delete:":            @"delete",
+      @"select:":             @"select",
+      @"selectAll:":         @"selectAll",
+      @"_promptForReplace:": @"replace",
+      @"_define:":           @"lookup",
+      @"_translate:":        @"translate",
+      @"toggleBoldface:":    @"bold",
+      @"toggleItalics:":     @"italic",
+      @"toggleUnderline:":   @"underline",
+      @"_share:":            @"share",
+  };
+
+  return map[sel] ?: sel;
+}
+
 - (BOOL)canPerformAction:(SEL)action
               withSender:(id)sender{
-
+  if(self.suppressMenuItems) {
+      NSString * sel = [self stringFromAction:action];
+      if ([self.suppressMenuItems containsObject: sel]) {
+          return NO;
+      }
+  }
+
   if (!self.menuItems) {
       return [super canPerformAction:action withSender:sender];
   }
@@ -452,6 +481,7 @@ - (void)didMoveToWindow
     [self setBackgroundColor: _savedBackgroundColor];
 #if !TARGET_OS_OSX
     _webView.menuItems = _menuItems;
+    _webView.suppressMenuItems = _suppressMenuItems;
     _webView.scrollView.delegate = self;
 #endif // !TARGET_OS_OSX
     _webView.UIDelegate = self;
@@ -799,6 +829,11 @@ -(void)setMenuItems:(NSArray<NSDictionary *> *)menuItems {
     _webView.menuItems = menuItems;
 }
 
+-(void)setSuppressMenuItems:(NSArray<NSString *> *)suppressMenuItems {
+    _suppressMenuItems = suppressMenuItems;
+    _webView.suppressMenuItems = suppressMenuItems;
+}
+
 -(void)setKeyboardDisplayRequiresUserAction:(BOOL)keyboardDisplayRequiresUserAction
 {
   if (_webView == nil) {

apple/RNCWebViewManager.mm

@@ -121,6 +121,7 @@ - (RNCView *)view
 RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(enableApplePay, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(menuItems, NSArray);
+RCT_EXPORT_VIEW_PROPERTY(suppressMenuItems, NSArray);
 
 // New arch only
 RCT_CUSTOM_VIEW_PROPERTY(hasOnFileDownload, BOOL, RNCWebViewImpl) {}

docs/Reference.md

@@ -77,6 +77,7 @@ This document lays out the current public properties and methods for the React N
 - [`onFileDownload`](Reference.md#onFileDownload)
 - [`limitsNavigationsToAppBoundDomains`](Reference.md#limitsNavigationsToAppBoundDomains)
 - [`textInteractionEnabled`](Reference.md#textInteractionEnabled)
+- [`suppressMenuItems`](Reference.md#suppressMenuItems)
 - [`mediaCapturePermissionGrantType`](Reference.md#mediaCapturePermissionGrantType)
 - [`autoManageStatusBarEnabled`](Reference.md#autoManageStatusBarEnabled)
 - [`setSupportMultipleWindows`](Reference.md#setSupportMultipleWindows)
@@ -1420,6 +1421,30 @@ Example:
 
 ---
 
+### `suppressMenuItems`[⬆](#props-index)
+
+Allows to suppress menu item from the default context menu.
+
+Possible values are:
+
+- `cut`
+- `copy`
+- `paste`
+- `delete`
+- `select`
+- `selectAll`
+- `replace`
+- `lookup`
+- `translate`
+- `bold`
+- `italic`
+- `underline`
+- `share`
+
+| Type             | Required | Default      | Platform |
+| ---------------- | -------- | ------------ | -------- |
+| array of strings | No       | []           | iOS      |
+
 ### `mediaCapturePermissionGrantType`[⬆](#props-index)
 
 This property specifies how to handle media capture permission requests. Defaults to `prompt`, resulting in the user being prompted repeatedly. Available on iOS 15 and later.

example/App.tsx

@@ -22,6 +22,7 @@ import NativeWebpage from './examples/NativeWebpage';
 import ApplePay from './examples/ApplePay';
 import CustomMenu from './examples/CustomMenu';
 import OpenWindow from './examples/OpenWindow';
+import SuppressMenuItems from './examples/Suppress';
 
 const TESTS = {
   Messaging: {
@@ -119,6 +120,14 @@ const TESTS = {
     render() {
       return <OpenWindow />;
     },
+  },
+  SuppressMenuItems: {
+    title: 'SuppressMenuItems',
+    testId: 'SuppressMenuItems',
+    description: 'SuppressMenuItems in editable content',
+    render() {
+      return <SuppressMenuItems />;
+    }
   }
 };
 
@@ -222,6 +231,11 @@ export default class App extends Component<Props, State> {
             title="OpenWindow"
             onPress={() => this._changeTest('OpenWindow')}
           />
+          <Button
+            testID="testType_suppressMenuItems"
+            title="SuppressMenuItems"
+            onPress={() => this._changeTest('SuppressMenuItems')}
+          />
         </View>
 
         {restarting ? null : (

example/examples/Suppress.tsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+
+import WebView from 'react-native-webview';
+
+interface Props {}
+interface State {}
+
+const HTML = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Context Menu</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+  </head>
+  <body>
+    <p contenteditable autofocus>
+      Select text to see the context menu.
+    </p>
+  </body>
+</html>
+`
+
+export default class NativeWebpage extends Component<Props, State> {
+  state = {};
+
+  render() {
+    return (
+      <View style={{ height: 400 }}>
+        <WebView
+          source={{ html: HTML }}
+          style={{ width: '100%', height: '100%' }}
+          onShouldStartLoadWithRequest={(event) => {
+            console.log("onShouldStartLoadWithRequest", event);
+            return true;
+          }}
+          onLoadStart={(event) => {
+            console.log("onLoadStart", event.nativeEvent);
+          }}
+          suppressMenuItems={["cut", "copy", "paste", "replace", "bold", "italic", "underline", "select", "share", "lookup"]}
+        />
+      </View>
+    );
+  }
+}

src/RNCWebViewNativeComponent.ts

@@ -207,6 +207,7 @@ export interface NativeProps extends ViewProps {
   onFileDownload?: DirectEventHandler<WebViewDownloadEvent>;
   // eslint-disable-next-line @typescript-eslint/array-type
   menuItems?: ReadonlyArray<Readonly<{label: string, key: string}>>;
+  suppressMenuItems?: Readonly<string>[];
   // Workaround to watch if listener if defined
   hasOnFileDownload?: boolean;
   fraudulentWebsiteWarningEnabled?: boolean;

src/WebViewTypes.ts

@@ -236,6 +236,20 @@ export interface WebViewCustomMenuItems {
   label: string;
 }
 
+export declare type SuppressMenuItem = 
+  | "cut"
+  | "copy"
+  | "paste"
+  | "replace"
+  | "bold"
+  | "italic"
+  | "underline"
+  | "select"
+  | "selectAll"
+  | "translate"
+  | "lookup"
+  | "share";
+
 export type WebViewSource = WebViewSourceUri | WebViewSourceHtml;
 
 export interface ViewManager {
@@ -683,6 +697,12 @@ export interface IOSWebViewProps extends WebViewSharedProps {
    */
   menuItems?: WebViewCustomMenuItems[];
 
+  /**
+   * An array of strings which will be suppressed from the menu.
+   * @platform ios
+   */
+  suppressMenuItems?: SuppressMenuItem[];
+
   /**
    * The function fired when selecting a custom menu item created by `menuItems`.
    * It passes a WebViewEvent with a `nativeEvent`, where custom keys are passed: