input and textarea support

Author: asyndesis

src/ExamplePage.js

@@ -13,6 +13,8 @@ import {
   FormControl,
   FormLabel,
   Switch,
+  Input,
+  Textarea,
 } from "@chakra-ui/react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
@@ -175,6 +177,14 @@ function ExamplePage() {
             showStyles={true}
             styleColor={styleColor}
           />
+          <Heading size="md">Input components</Heading>
+          <Text>
+            The popover should also work inside of Input and TextArea
+            components, but has limited support for the X,Y due to browser
+            constraints.
+          </Text>
+          <Input defaultValue="Highlight my value" />
+          <Textarea defaultValue="Highlight my text" />
         </CardBody>
       </Card>
     </ChakraProvider>

src/lib/useTextSelection.js

@@ -9,20 +9,38 @@ function resolveTargets(target) {
   return [target?.current];
 }
 
-function hasSelection() {
-  const selection = window?.getSelection();
-  return !selection?.isCollapsed;
+function getSelection(e) {
+  return getDomSelection(e) || getUISelection(e);
 }
 
-function getSelection() {
-  if (!hasSelection()) return;
+/* Input and Textarea selections are rendered in the browsers native UI. We need to handle them differently */
+function getUISelection(e) {
+  const focusedElement = document?.activeElement;
+
+  const selectedText = focusedElement?.value?.substring?.(
+    focusedElement?.selectionStart,
+    focusedElement?.selectionEnd
+  );
+
+  if (!selectedText) return;
+
+  return {
+    baseNode: focusedElement,
+    extentNode: focusedElement,
+    range: focusedElement /* TODO: better support X,Y of mouse */,
+    selectedText,
+  };
+}
+
+/* Get the selection for non-UI elements */
+function getDomSelection() {
+  if (window?.getSelection?.()?.isCollapsed) return;
   const selection = window?.getSelection();
   const range = selection?.getRangeAt(0);
   const selectedHtml = Serializer.serializeToString(range?.cloneContents());
   const selectedText = selection?.toString();
   return {
     baseNode: selection?.anchorNode,
-    baseOffset: selection?.anchorOffset,
     extentNode: selection?.focusNode,
     range,
     selectedHtml,
@@ -37,16 +55,17 @@ function isTargetInSelection(targets, selection) {
 
 export function useTextSelection(target) {
   const [state, setState] = useState();
-  const updateAnchorPos = () => {
+
+  const updateAnchorPos = (e) => {
     const targets = resolveTargets(target);
-    const selection = getSelection();
+    const selection = getSelection(e);
     if (isTargetInSelection(targets, selection)) {
       setState(selection);
     }
   };
 
-  const onSelectionChange = () => {
-    const selection = getSelection();
+  const onSelectionChange = (e) => {
+    const selection = getSelection(e);
     if (!selection?.range) {
       setState({});
     }
@@ -64,6 +83,7 @@ export function useTextSelection(target) {
     document.addEventListener("scroll", onWindowScroll, {
       capture: true,
     });
+
     return () => {
       document.removeEventListener("mouseup", updateAnchorPos);
       document.removeEventListener("selectionchange", onSelectionChange);