Use native eyedropper API if available

packages/story-editor/src/components/canvas/eyedropperLayer.js

@@ -30,6 +30,7 @@ import {
  * Internal dependencies
  */
 import { useCanvas, useLayout } from '../../app';
+import useEyeDropperApi from '../eyedropper/useEyeDropperApi';
 import { Layer, PageArea } from './layout';
 import getColorFromPixelData from './utils/getColorFromPixelData';
 
@@ -141,6 +142,8 @@ function EyedropperLayer() {
     })
   );
 
+  const { isEyeDropperApiSupported } = useEyeDropperApi({});
+
   const { pageWidth } = useLayout(({ state: { pageWidth } }) => ({
     pageWidth,
   }));
@@ -163,7 +166,7 @@ function EyedropperLayer() {
 
   useGlobalKeyDownEffect('esc', closeEyedropper);
 
-  if (isEyedropperActive && !img) {
+  if (isEyedropperActive && !isEyeDropperApiSupported && !img) {
     return (
       <>
         {/* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions -- No keyboard navigation for Eyedropper. */}
@@ -272,17 +275,21 @@ function EyedropperLayer() {
       <DisplayPageArea withSafezone={false} showOverflow>
         {/* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions -- No pixel-by-pixel keyboard navigation. */}
         <EyedropperCanvas ref={eyedropperCanvas} onClick={onClick}>
-          <CanvasImage ref={imgRef} src={img} alt="" />
-          <Magnifier ref={magnifierInfo}>
-            <Circle>
-              <canvas
-                ref={magnifier}
-                width={MAGNIFIER_SIZE}
-                height={MAGNIFIER_SIZE}
-              />
-            </Circle>
-            <ColorInfo ref={magnifierColor} />
-          </Magnifier>
+          {!isEyeDropperApiSupported && (
+            <CanvasImage ref={imgRef} src={img} alt="" />
+          )}
+          {!isEyeDropperApiSupported && (
+            <Magnifier ref={magnifierInfo}>
+              <Circle>
+                <canvas
+                  ref={magnifier}
+                  width={MAGNIFIER_SIZE}
+                  height={MAGNIFIER_SIZE}
+                />
+              </Circle>
+              <ColorInfo ref={magnifierColor} />
+            </Magnifier>
+          )}
         </EyedropperCanvas>
       </DisplayPageArea>
     </EyedropperBackground>

packages/story-editor/src/components/colorPicker/basicColorPicker.js

@@ -33,7 +33,7 @@ import {
   themeHelpers,
 } from '@googleforcreators/design-system';
 import { __ } from '@googleforcreators/i18n';
-import { useState } from '@googleforcreators/react';
+import { useState, useCallback } from '@googleforcreators/react';
 
 /**
  * Internal dependencies
@@ -124,7 +124,10 @@ function BasicColorPicker({
   const hasPresets = storyColors.length > 0 || savedColors.length > 0;
 
   const { initEyedropper } = useEyedropper({
-    onChange: (newColor) => handleColorChange({ color: newColor }),
+    onChange: useCallback(
+      (newColor) => handleColorChange({ color: newColor }),
+      [handleColorChange]
+    ),
   });
 
   const { deleteLocalColor, deleteGlobalColor } = useDeleteColor({

packages/story-editor/src/components/colorPicker/currentColorPicker.js

@@ -155,9 +155,7 @@ function CurrentColorPicker({
     [rgb, onChange]
   );
 
-  const { initEyedropper } = useEyedropper({
-    onChange,
-  });
+  const { initEyedropper } = useEyedropper({ onChange });
 
   return (
     <>

packages/story-editor/src/components/colorPicker/karma/eyedropper.karma.js

@@ -27,9 +27,29 @@ import { useStory } from '../../../app';
 
 describe('Eyedropper', () => {
   let fixture;
+  let eyeDropper;
+
+  beforeAll(() => {
+    eyeDropper = window.EyeDropper;
+
+    // removed to run test against htmlToImage EyeDropper vs API
+    // see issue testing with native API here
+    // https://github.com/GoogleForCreators/web-stories-wp/pull/11739#issuecomment-1162367409
+    delete window.EyeDropper;
+  });
+
+  afterAll(() => {
+    window.EyeDropper = eyeDropper;
+  });
 
   beforeEach(async () => {
     fixture = new Fixture();
+
+    // removed to run test against htmlToImage EyeDropper vs API
+    // see issue testing with native API here
+    // https://github.com/GoogleForCreators/web-stories-wp/pull/11739#issuecomment-1162367409
+    delete window.EyeDropper;
+
     await fixture.render();
     await fixture.collapseHelpCenter();
   });

packages/story-editor/src/components/eyedropper/index.js

@@ -24,6 +24,7 @@ import { useCallback } from '@googleforcreators/react';
  */
 import { useCanvas, useLayout } from '../../app';
 import { ZOOM_SETTING } from '../../constants';
+import useEyeDropperApi from './useEyeDropperApi';
 
 export default ({ onChange }) => {
   const {
@@ -52,6 +53,13 @@ export default ({ onChange }) => {
     })
   );
 
+  const { isEyeDropperApiSupported, openEyeDropper } = useEyeDropperApi({
+    onChange,
+    handleClose: useCallback(() => {
+      setIsEyedropperActive(false);
+    }, [setIsEyedropperActive]),
+  });
+
   const { zoomSetting, setZoomSetting } = useLayout(
     ({ state: { zoomSetting }, actions: { setZoomSetting } }) => ({
       zoomSetting,
@@ -62,6 +70,16 @@ export default ({ onChange }) => {
   const initEyedropper = useCallback(
     (resetZoom = true) =>
       async () => {
+        if (isEyeDropperApiSupported) {
+          if (resetZoom) {
+            setIsEyedropperActive(true);
+            openEyeDropper();
+          }
+
+          // pointer event just return
+          return;
+        }
+
         if (!resetZoom && zoomSetting !== ZOOM_SETTING.FIT) {
           return;
         }
@@ -123,6 +141,8 @@ export default ({ onChange }) => {
       setEyedropperImg,
       setEyedropperPixelData,
       setZoomSetting,
+      isEyeDropperApiSupported,
+      openEyeDropper,
     ]
   );
 

packages/story-editor/src/components/eyedropper/useEyeDropperApi.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies
+ */
+import { useEffect, useCallback, useRef } from 'react';
+import { getSolidFromHex } from '@googleforcreators/patterns';
+import { noop } from '@googleforcreators/design-system';
+
+function useEyeDropperApi({ onChange = noop, handleClose = noop }) {
+  const isEyeDropperApiSupported =
+    typeof window !== 'undefined' && 'EyeDropper' in window;
+  const eyeDropper = useRef(null);
+
+  useEffect(() => {
+    if (isEyeDropperApiSupported && !eyeDropper.current) {
+      eyeDropper.current = new window.EyeDropper();
+    }
+  }, [isEyeDropperApiSupported]);
+
+  const openEyeDropper = useCallback(async () => {
+    if (!eyeDropper.current || !isEyeDropperApiSupported) {
+      return;
+    }
+
+    try {
+      const { sRGBHex } = await eyeDropper.current.open();
+      onChange(getSolidFromHex(sRGBHex.substring(1)).color);
+      handleClose();
+    } catch (e) {
+      //eslint-disable-next-line no-console -- Surface error for debugging.
+      console.log(e.message);
+    }
+  }, [eyeDropper, isEyeDropperApiSupported, onChange, handleClose]);
+
+  return { isEyeDropperApiSupported, openEyeDropper };
+}
+
+export default useEyeDropperApi;

packages/story-editor/src/components/form/color/color.js

@@ -128,8 +128,9 @@ const Color = forwardRef(function Color(
     value !== MULTIPLE_VALUE && Boolean(getPreviewText(value)) && hasInputs;
 
   const { initEyedropper } = useEyedropper({
-    onChange: (color) => onChange({ color }),
+    onChange: useCallback((color) => onChange({ color }), [onChange]),
   });
+
   const tooltip = __('Pick a color from canvas', 'web-stories');
 
   const tooltipPlacement =