Use native eyedropper API if available

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

@@ -123,9 +123,7 @@ function BasicColorPicker({
   const [toDelete, setToDelete] = useState(null);
   const hasPresets = storyColors.length > 0 || savedColors.length > 0;
 
-  const { initEyedropper } = useEyedropper({
-    onChange: (newColor) => handleColorChange({ color: newColor }),
-  });
+  const { initEyedropper } = useEyedropper({ onChange: handleColorChange });
 
   const { deleteLocalColor, deleteGlobalColor } = useDeleteColor({
     onEmpty: () => setIsEditMode(false),

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,10 @@ export default ({ onChange }) => {
     })
   );
 
+  const { isEyeDropperApiSupported, openEyeDropper } = useEyeDropperApi({
+    onChange,
+  });
+
   const { zoomSetting, setZoomSetting } = useLayout(
     ({ state: { zoomSetting }, actions: { setZoomSetting } }) => ({
       zoomSetting,
@@ -62,6 +67,15 @@ export default ({ onChange }) => {
   const initEyedropper = useCallback(
     (resetZoom = true) =>
       async () => {
+        if (isEyeDropperApiSupported) {
+          if (resetZoom) {
+            openEyeDropper();
+          }
+
+          // pointer event just return
+          return;
+        }
+
         if (!resetZoom && zoomSetting !== ZOOM_SETTING.FIT) {
           return;
         }
@@ -107,7 +121,7 @@ export default ({ onChange }) => {
         }
 
         setEyedropperCallback(() => (rgbObject) => {
-          onChange(rgbObject);
+          onChange({ color: rgbObject });
           setIsEyedropperActive(false);
           setEyedropperImg(null);
           setEyedropperPixelData(null);
@@ -123,6 +137,8 @@ export default ({ onChange }) => {
       setEyedropperImg,
       setEyedropperPixelData,
       setZoomSetting,
+      isEyeDropperApiSupported,
+      openEyeDropper,
     ]
   );
 

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

@@ -0,0 +1,51 @@
+/*
+ * 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';
+
+function useEyeDropperApi({ onChange }) {
+  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({ color: getSolidFromHex(sRGBHex.substring(1)).color });
+    } catch (e) {
+      //eslint-disable-next-line no-console -- Surface error for debugging.
+      console.log(e.message);
+    }
+  }, [eyeDropper, isEyeDropperApiSupported, onChange]);
+
+  return { isEyeDropperApiSupported, openEyeDropper };
+}
+
+export default useEyeDropperApi;

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

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