docs: added an ability to show video demos (#437)

## 📜 Description

Added an ability to show video as demo (before it was possible to show
only lottie - but it was expensive in terms of creation).

## 💡 Motivation and Context

Videos are much faster to create and upload/paste. So I decided to give
a try and upload a first video for selection demo (I think when people
are having visual reference - it's easier to understand how it works).

## 📢 Changelog

### Docs

- added `Video` component;
- started to use it in `useFocusedInputHandler` page;
- corrected documentation for `useFocusedInputHandler` slightly.

## 🤔 How Has This Been Tested?

Tested manually on `localhost:3000`.

## 📸 Screenshots (if appropriate):


![image](https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/bb521d2f-4b8a-4a0a-b55b-3802b317f55b)

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

cspell.json

@@ -107,7 +107,8 @@
     "ccache",
     "ivar",
     "objc",
-    "QWERT"
+    "QWERT",
+    "autoplayed"
   ],
   "ignorePaths": [
     "node_modules",

docs/__tests__/screenshot.css

@@ -25,3 +25,7 @@ img[src$='.gif'],
 .playwright {
   display: none;
 }
+/* Videos are autoplayed */
+.video {
+  display: none;
+}

docs/docs/api/hooks/input/use-focused-input-handler.md → docs/docs/api/hooks/input/use-focused-input-handler.mdx

@@ -26,6 +26,9 @@ useFocusedInputHandler(
     onChangeText: ({ text }) => {
       "worklet";
     },
+    onSelectionChange: ({ target, selection }) => {
+      "worklet";
+    },
   },
   [],
 );
@@ -70,4 +73,8 @@ type FocusedInputSelectionChangedEvent = {
 };
 ```
 
-This handler can be handy when you need to have an access to input on a global level (i. e. when you don't have a direct access to your `TextInput`) or if you need to have an access to coordinates of text selection (for example to draw a custom element that follows caret position).
+This handler can be handy when you need to have an access to input on a global level (i. e. when you don't have a direct access to your `TextInput`) or if you need to have an access to coordinates of text selection (for example to draw a custom element that follows caret position):
+
+import Video from "@site/src/components/Video";
+
+<Video src="/video/selection-demo.mov" width={60} />

docs/src/components/Video/index.tsx

@@ -0,0 +1,26 @@
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import React from "react";
+
+type VideoProps = {
+  src: string;
+  width?: number;
+};
+
+export default function Video({ src, width = 100, ...props }: VideoProps) {
+  const source = useBaseUrl(src);
+
+  return (
+    <div className="center video">
+      <video
+        src={source}
+        width={`${width}%`}
+        height="100%"
+        playsInline
+        autoPlay
+        muted
+        loop
+        {...props}
+      />
+    </div>
+  );
+}

docs/src/css/custom.css

@@ -222,3 +222,11 @@ h3 .label {
   white-space: nowrap;
   width: 6px;
 }
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}