├── .prettierignore
├── src
    ├── Label
    │   ├── index.ts
    │   └── Label.tsx
    ├── Submit
    │   ├── index.ts
    │   └── Submit.tsx
    ├── vite-env.d.ts
    ├── Input
    │   ├── index.ts
    │   ├── Text.tsx
    │   └── Input.tsx
    ├── Form
    │   ├── index.ts
    │   ├── FormContext.ts
    │   └── Form.tsx
    ├── Textarea
    │   ├── index.ts
    │   ├── Container.tsx
    │   ├── Text.tsx
    │   └── Textarea.tsx
    ├── index.ts
    ├── utils.ts
    ├── types.ts
    └── troika-three-text.d.ts
├── .storybook
    ├── assets
    │   └── fonts
    │   │   ├── fonts.d.ts
    │   │   ├── Poppins-Bold.ttf
    │   │   ├── Montserrat-Bold.ttf
    │   │   ├── MajorMonoDisplay.ttf
    │   │   └── PlayfairDisplay-Regular.ttf
    ├── manager-head.html
    ├── style.css
    ├── main.ts
    ├── preview.tsx
    ├── stories
    │   ├── Input.stories.tsx
    │   ├── Textarea.stories.tsx
    │   └── Form.stories.tsx
    └── common.tsx
├── .prettierrc
├── tsconfig.node.json
├── .gitignore
├── .github
    ├── workflows
    │   ├── build-ci.yml
    │   ├── semantic-release.yml
    │   └── build-storybook.yml
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    ├── dependabot.yml
    └── pull_request_template.md
├── tsconfig.json
├── .eslintrc.cjs
├── vite.config.ts
├── package.json
└── README.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/


--------------------------------------------------------------------------------
/src/Label/index.ts:
--------------------------------------------------------------------------------
1 | export { Label } from "./Label";
2 | 


--------------------------------------------------------------------------------
/src/Submit/index.ts:
--------------------------------------------------------------------------------
1 | export { Submit } from "./Submit";
2 | 


--------------------------------------------------------------------------------
/.storybook/assets/fonts/fonts.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.ttf";
2 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/Input/index.ts:
--------------------------------------------------------------------------------
1 | export { Input } from "./Input";
2 | export { InputText } from "./Text";
3 | 


--------------------------------------------------------------------------------
/src/Form/index.ts:
--------------------------------------------------------------------------------
1 | export { Form } from "./Form";
2 | export { useFormContext } from "./FormContext";
3 | 


--------------------------------------------------------------------------------
/src/Textarea/index.ts:
--------------------------------------------------------------------------------
1 | export { Textarea } from "./Textarea";
2 | export { TextareaText } from "./Text";
3 | 


--------------------------------------------------------------------------------
/.storybook/manager-head.html:
--------------------------------------------------------------------------------
1 | <style>
2 |   body {
3 |     margin: 0;
4 |     padding: 0 !important;
5 |   }
6 | </style>
7 | 


--------------------------------------------------------------------------------
/.storybook/style.css:
--------------------------------------------------------------------------------
1 | * {
2 |   margin: 0;
3 |   padding: 0 !important;
4 | }
5 | 
6 | body {
7 |   height: 100dvh;
8 | }
9 | 


--------------------------------------------------------------------------------
/.storybook/assets/fonts/Poppins-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMBeresford/r3f-form/HEAD/.storybook/assets/fonts/Poppins-Bold.ttf


--------------------------------------------------------------------------------
/.storybook/assets/fonts/Montserrat-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMBeresford/r3f-form/HEAD/.storybook/assets/fonts/Montserrat-Bold.ttf


--------------------------------------------------------------------------------
/.storybook/assets/fonts/MajorMonoDisplay.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMBeresford/r3f-form/HEAD/.storybook/assets/fonts/MajorMonoDisplay.ttf


--------------------------------------------------------------------------------
/.storybook/assets/fonts/PlayfairDisplay-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JMBeresford/r3f-form/HEAD/.storybook/assets/fonts/PlayfairDisplay-Regular.ttf


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Input";
2 | export * from "./Label";
3 | export * from "./Textarea";
4 | export * from "./Form";
5 | export * from "./Submit";
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "trailingComma": "es5",
4 |   "singleQuote": false,
5 |   "tabWidth": 2,
6 |   "printWidth": 100,
7 |   "useTabs": false
8 | }
9 | 


--------------------------------------------------------------------------------
/src/Form/FormContext.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | 
3 | export const FormContext = React.createContext<React.RefObject<HTMLFormElement>>({ current: null });
4 | 
5 | export function useFormContext() {
6 |   return React.useContext(FormContext);
7 | }
8 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | export function lerp(x: number, y: number, t: number): number {
2 |   return x + (y - x) * t;
3 | }
4 | 
5 | export function damp(x: number, y: number, lambda: number, dt: number): number {
6 |   return lerp(x, y, 1 - Math.exp(-lambda * dt));
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true,
 8 |     "strict": true
 9 |   },
10 |   "include": ["vite.config.ts"]
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | # storybook artifacts
27 | storybook-static
28 | 


--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
 1 | import type { StorybookConfig } from "@storybook/react-vite";
 2 | 
 3 | const config: StorybookConfig = {
 4 |   stories: [
 5 |     "../src/**/*.mdx",
 6 |     "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
 7 |     "./stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
 8 |   ],
 9 |   framework: {
10 |     name: "@storybook/react-vite",
11 |     options: {},
12 |   },
13 |   staticDirs: ["./assets"],
14 |   docs: {
15 |     autodocs: "tag",
16 |   },
17 | };
18 | 
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/.github/workflows/build-ci.yml:
--------------------------------------------------------------------------------
 1 | name: Build CI
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     types: ["opened", "reopened", "synchronize"]
 6 |     branches: ["main"]
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v3
13 |       - uses: actions/setup-node@v3
14 |         with:
15 |           node-version: "18.x"
16 |       - name: Setup
17 |         run: npm ci
18 |       - name: Format
19 |         run: npm run format:check
20 |       - name: Lint
21 |         run: npm run lint
22 |       - name: Build
23 |         run: npm run build
24 | 


--------------------------------------------------------------------------------
/.storybook/preview.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import "./style.css";
 3 | import type { Preview } from "@storybook/react";
 4 | import { Scene } from "./common";
 5 | 
 6 | const preview: Preview = {
 7 |   decorators: [
 8 |     (Story) => (
 9 |       <React.Suspense fallback={null}>
10 |         <div style={{ height: "100dvh" }}>
11 |           <Scene>
12 |             <Story />
13 |           </Scene>
14 |         </div>
15 |       </React.Suspense>
16 |     ),
17 |   ],
18 |   parameters: {
19 |     actions: { argTypesRegex: "^on[A-Z].*" },
20 |   },
21 | };
22 | 
23 | export default preview;
24 | 


--------------------------------------------------------------------------------
/.github/workflows/semantic-release.yml:
--------------------------------------------------------------------------------
 1 | name: Semantic Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: ["main"]
 6 | 
 7 |   workflow_dispatch:
 8 |     # allows manual trigger in github web UI
 9 | 
10 | jobs:
11 |   release:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: "20.11.1"
18 |       - run: npm ci
19 |       - run: npm run build
20 |       - name: Release
21 |         env:
22 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
23 |           GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
24 |         run: npm run semantic-release
25 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: "feat: <feature title>"
 5 | labels: enhancement
 6 | assignees: ""
 7 | ---
 8 | 
 9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
11 | 
12 | **Describe the solution you'd like**
13 | A clear and concise description of what you want to happen.
14 | 
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 | 
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 |     "moduleResolution": "bundler",
 9 |     "allowImportingTsExtensions": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "noEmit": true,
13 |     "jsx": "react-jsx",
14 |     "strict": true,
15 |     "noUnusedLocals": true,
16 |     "noUnusedParameters": true,
17 |     "noFallthroughCasesInSwitch": true,
18 |     "noImplicitAny": true
19 |   },
20 |   "include": ["src", ".storybook"],
21 |   "references": [
22 |     {
23 |       "path": "./tsconfig.node.json"
24 |     }
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import { Color } from "@react-three/fiber";
 2 | import { TextRenderInfo } from "troika-three-text";
 3 | 
 4 | export type TroikaTextProps = {
 5 |   color?: Color;
 6 |   fontSize?: number;
 7 |   letterSpacing?: number;
 8 |   font?: string;
 9 |   depthOffset?: number;
10 |   outlineWidth?: number | string;
11 |   outlineOffsetX?: number | string;
12 |   outlineOffsetY?: number | string;
13 |   outlineBlur?: number | string;
14 |   outlineColor?: Color;
15 |   outlineOpacity?: number;
16 |   strokeWidth?: number | string;
17 |   strokeColor?: Color;
18 |   strokeOpacity?: number;
19 |   fillOpacity?: number;
20 |   fillColor?: Color;
21 |   onSync?: (troika: { textRenderInfo: TextRenderInfo }) => void;
22 | } & Omit<JSX.IntrinsicElements["mesh"], "ref" | "type">;
23 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     "eslint:recommended",
 6 |     "plugin:@typescript-eslint/recommended",
 7 |     "plugin:react-hooks/recommended",
 8 |     "plugin:react/recommended",
 9 |     "plugin:storybook/recommended",
10 |   ],
11 |   ignorePatterns: ["dist", ".eslintrc.cjs"],
12 |   parser: "@typescript-eslint/parser",
13 |   plugins: ["react-refresh", "prettier"],
14 |   rules: {
15 |     "react/no-unknown-property": "off",
16 |     "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
17 |     "react/jsx-uses-react": "off",
18 |     "react/react-in-jsx-scope": "off",
19 |   },
20 |   settings: {
21 |     react: {
22 |       version: "detect",
23 |     },
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "npm" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "monthly"
12 |     groups:
13 |       major-updates:
14 |         update-types:
15 |           - "major"
16 |     ignore:
17 |       - dependency-name: "*"
18 |         update-types: ["version-update:semver-minor", "version-update:semver-patch"]
19 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import dts from "vite-plugin-dts";
 3 | import react from "@vitejs/plugin-react";
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   build: {
 8 |     lib: {
 9 |       entry: "src/index.ts",
10 |       name: "r3f-form",
11 |       fileName: "index",
12 |       formats: ["es"],
13 |     },
14 |     rollupOptions: {
15 |       external: [
16 |         "react",
17 |         "@react-three/fiber",
18 |         "@react-three/drei",
19 |         "troika-three-text",
20 |         "react-dom",
21 |         "three",
22 |         "react/jsx-runtime",
23 |       ],
24 |       output: {
25 |         globals: {
26 |           react: "React",
27 |         },
28 |       },
29 |     },
30 |   },
31 |   plugins: [dts({ exclude: "src/utils.ts" }), react()],
32 | });
33 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | - **Please check if the PR fulfills these requirements**
 2 | 
 3 | * [ ] The commit message follows our guidelines: https://www.conventionalcommits.org/
 4 | * [ ] Docs and READMEs have been added / updated (if required)
 5 | * [ ] Storybook(s) have been added / updated (if required)
 6 | 
 7 | - **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
 8 |   e.g. fixes #<bug_issue_number>, resolves #<feature_issue_number> with additional descriptions if needed
 9 | 
10 | - **What is the current behavior?** (You can also link to an open issue here)
11 | 
12 | - **What is the new behavior (if this is a feature change)?**
13 | 
14 | - **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?)
15 | 
16 | - **Other information**:
17 | 


--------------------------------------------------------------------------------
/src/Textarea/Container.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Color } from "@react-three/fiber";
 3 | import { useCursor } from "@react-three/drei";
 4 | 
 5 | type Props = {
 6 |   width: number;
 7 |   height: number;
 8 |   backgroundColor: Color;
 9 |   backgroundOpacity: number;
10 | } & JSX.IntrinsicElements["mesh"];
11 | 
12 | const Container = (props: Props) => {
13 |   const { width, height, backgroundColor, backgroundOpacity, ...restProps } = props;
14 | 
15 |   const [hovered, setHovered] = React.useState(false);
16 |   useCursor(hovered, "text");
17 | 
18 |   return (
19 |     <mesh
20 |       onPointerEnter={() => setHovered(true)}
21 |       onPointerLeave={() => setHovered(false)}
22 |       renderOrder={1}
23 |       {...restProps}
24 |     >
25 |       <planeGeometry args={[width, height]} />
26 |       <meshBasicMaterial
27 |         color={backgroundColor}
28 |         transparent
29 |         opacity={backgroundOpacity}
30 |         depthWrite={false}
31 |       />
32 |     </mesh>
33 |   );
34 | };
35 | 
36 | export default Container;
37 | 


--------------------------------------------------------------------------------
/.github/workflows/build-storybook.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy Storybook to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: "pages"
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   buildAndDeploy:
25 |     environment:
26 |       name: github-pages
27 |       url: ${{ steps.deployment.outputs.page_url }}
28 |     runs-on: ubuntu-latest
29 |     steps:
30 |       - uses: actions/checkout@v3
31 |       - uses: actions/setup-node@v3
32 |         with:
33 |           node-version: "16.x"
34 |           registry-url: https://registry.npmjs.org/
35 |       - run: npm ci
36 |       - run: npm run build-storybook
37 |       - name: Setup Pages
38 |         uses: actions/configure-pages@v2
39 |       - name: Upload artifact
40 |         uses: actions/upload-pages-artifact@v1
41 |         with:
42 |           # Upload only storybook static files
43 |           path: "storybook-static"
44 |       - name: Deploy to GitHub Pages
45 |         id: deployment
46 |         uses: actions/deploy-pages@v1
47 | 


--------------------------------------------------------------------------------
/src/Label/Label.tsx:
--------------------------------------------------------------------------------
 1 | import { Color } from "@react-three/fiber";
 2 | import { Text } from "@react-three/drei";
 3 | 
 4 | type Props = {
 5 |   characters?: string;
 6 |   color?: Color;
 7 |   fontSize?: number;
 8 |   maxWidth?: number;
 9 |   lineHeight?: number;
10 |   letterSpacing?: number;
11 |   textAlign?: "left" | "right" | "center" | "justify";
12 |   font?: string;
13 |   anchorX?: number | "left" | "center" | "right";
14 |   anchorY?: number | "top" | "top-baseline" | "middle" | "bottom-baseline" | "bottom";
15 |   depthOffset?: number;
16 |   overflowWrap?: "normal" | "break-word";
17 |   whiteSpace?: "normal" | "overflowWrap" | "nowrap";
18 |   outlineWidth?: number | string;
19 |   outlineOffsetX?: number | string;
20 |   outlineOffsetY?: number | string;
21 |   outlineBlur?: number | string;
22 |   outlineOpacity?: number;
23 |   strokeWidth?: number | string;
24 |   strokeOpacity?: number;
25 |   fillOpacity?: number;
26 |   debugSDF?: boolean;
27 |   text?: string;
28 | } & JSX.IntrinsicElements["mesh"];
29 | 
30 | const Label = (props: Props) => {
31 |   const {
32 |     color = "black",
33 |     text,
34 |     anchorX = "center",
35 |     anchorY = "bottom",
36 |     fontSize = 0.07,
37 |     ...restProps
38 |   } = props;
39 | 
40 |   return (
41 |     <>
42 |       <group>
43 |         <Text anchorX={anchorX} anchorY={anchorY} fontSize={fontSize} {...restProps}>
44 |           {text}
45 |           <meshBasicMaterial color={color} />
46 |         </Text>
47 |       </group>
48 |     </>
49 |   );
50 | };
51 | 
52 | export { Label };
53 | 


--------------------------------------------------------------------------------
/src/Form/Form.tsx:
--------------------------------------------------------------------------------
 1 | import { useThree } from "@react-three/fiber";
 2 | import * as React from "react";
 3 | import * as ReactDOM from "react-dom/client";
 4 | import { FormContext } from "./FormContext";
 5 | 
 6 | type Props = Omit<React.HTMLAttributes<HTMLFormElement>, "ref">;
 7 | 
 8 | const Form = React.forwardRef((props: Props, ref: React.ForwardedRef<HTMLFormElement>) => {
 9 |   const { children, ...restProps } = props;
10 |   const events = useThree((s) => s.events);
11 |   const gl = useThree((s) => s.gl);
12 |   const root = React.useRef<ReactDOM.Root | null>(null);
13 |   const domRef = React.useRef<HTMLFormElement>(null!);
14 |   const target = (events.connected || gl.domElement.parentNode) as HTMLElement;
15 |   React.useImperativeHandle(ref, () => domRef.current);
16 | 
17 |   const [domEl] = React.useState(() => document.createElement("div"));
18 | 
19 |   React.useLayoutEffect(() => {
20 |     root.current = ReactDOM.createRoot(domEl);
21 |     const curRoot = root.current;
22 | 
23 |     target?.appendChild(domEl);
24 | 
25 |     return () => {
26 |       target?.removeChild(domEl);
27 |       curRoot.unmount();
28 |     };
29 |   }, [target, domEl]);
30 | 
31 |   React.useLayoutEffect(() => {
32 |     root.current?.render(
33 |       <form
34 |         ref={domRef}
35 |         id="_r3f-input-form"
36 |         style={{ opacity: 0, pointerEvents: "none", touchAction: "none" }}
37 |         {...restProps}
38 |       ></form>
39 |     );
40 |   });
41 | 
42 |   return <FormContext.Provider value={domRef}>{children}</FormContext.Provider>;
43 | });
44 | 
45 | Form.displayName = "Form";
46 | 
47 | export { Form };
48 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: "bug: <bug title>"
 5 | labels: bug
 6 | assignees: ""
 7 | ---
 8 | 
 9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 | 
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 | 
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Code Sandbox**
24 | Sometimes it is easier to show rather than tell. Try to reproduce the bug in a codesandbox and give us the link. You can use this template to start:
25 | 
26 | https://codesandbox.io/p/sandbox/r3f-form-bug-report-5lwyrr
27 | 
28 | **Screenshots**
29 | If applicable, add screenshots to help explain your problem.
30 | 
31 | **Desktop (please complete the following information):**
32 | 
33 | - OS: [e.g. macOS, windows]
34 | - OS Version [e.g. 13.3]
35 | - Browser [e.g. chrome, safari]
36 | - Browser Version [e.g. 22.5]
37 | 
38 | **Smartphone (please complete the following information):**
39 | 
40 | - Device: [e.g. iPhone6]
41 | - OS and version: [e.g. iOS8.1]
42 | - Browser [e.g. stock browser, safari]
43 | - Browser Version [e.g. 22]
44 | 
45 | **Package Versions**
46 | 
47 | - Node.js version [e.g. 16.x]
48 | - NPM version [e.g. 8.9.x]
49 | - React Three Fiber version [e.g. 9.x]
50 | - THREE.js version [e.g. 0.146.x]
51 | - Drei version [e.g. 8.x]
52 | - Troika-Three-Text version [e.g. 1.x]
53 | 
54 | **Additional context**
55 | Add any other context about the problem here.
56 | 


--------------------------------------------------------------------------------
/src/Textarea/Text.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Text as TextImpl, useMask } from "@react-three/drei";
 3 | import { Color } from "@react-three/fiber";
 4 | 
 5 | type Props = {
 6 |   characters?: string;
 7 |   color?: Color;
 8 |   fontSize?: number;
 9 |   maxWidth?: number;
10 |   lineHeight?: number;
11 |   letterSpacing?: number;
12 |   textAlign?: "left" | "right" | "center" | "justify";
13 |   font?: string;
14 |   anchorX?: number | "left" | "center" | "right";
15 |   anchorY?: number | "top" | "top-baseline" | "middle" | "bottom-baseline" | "bottom";
16 |   depthOffset?: number;
17 |   outlineWidth?: number | string;
18 |   outlineOffsetX?: number | string;
19 |   outlineOffsetY?: number | string;
20 |   outlineBlur?: number | string;
21 |   outlineOpacity?: number;
22 |   strokeWidth?: number | string;
23 |   strokeOpacity?: number;
24 |   fillOpacity?: number;
25 |   debugSDF?: boolean;
26 |   onSync?: (troika: unknown) => void;
27 |   text?: string;
28 | } & JSX.IntrinsicElements["mesh"];
29 | 
30 | const TextareaText = React.forwardRef((props: Props, ref) => {
31 |   const {
32 |     fontSize = 0.07,
33 |     anchorX = "left",
34 |     anchorY = "middle",
35 |     depthOffset = 0.5,
36 |     color = "black",
37 |     text,
38 |     ...restProps
39 |   } = props;
40 | 
41 |   const stencil = useMask(2);
42 | 
43 |   return (
44 |     <TextImpl
45 |       ref={ref}
46 |       {...restProps}
47 |       fontSize={fontSize}
48 |       anchorX={anchorX}
49 |       anchorY={anchorY}
50 |       depthOffset={depthOffset}
51 |     >
52 |       {text}
53 |       <meshBasicMaterial color={color} toneMapped={false} {...stencil} />
54 |     </TextImpl>
55 |   );
56 | });
57 | 
58 | TextareaText.displayName = "TextareaText";
59 | 
60 | export { TextareaText };
61 | 


--------------------------------------------------------------------------------
/.storybook/stories/Input.stories.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Input, Label, InputText } from "../../src";
 3 | import type { Meta, StoryObj } from "@storybook/react";
 4 | 
 5 | const meta: Meta<typeof Input> = {
 6 |   component: Default,
 7 |   title: "Input",
 8 | };
 9 | 
10 | export default meta;
11 | type Story = StoryObj<typeof Input>;
12 | 
13 | function Default() {
14 |   return <Input />;
15 | }
16 | 
17 | function WithLabel() {
18 |   return (
19 |     <group>
20 |       <Label text="Username" position-y={0.1} />
21 |       <Input />
22 |     </group>
23 |   );
24 | }
25 | 
26 | function WithPlaceholder() {
27 |   return <Input placeholder="Username" />;
28 | }
29 | 
30 | function WithColor() {
31 |   return (
32 |     <group>
33 |       <Label text="Username" position-y={0.1} color="blue" />
34 |       <Input backgroundColor={"red"}>
35 |         <InputText color="white" />
36 |       </Input>
37 |     </group>
38 |   );
39 | }
40 | 
41 | function WithCustomFont() {
42 |   return (
43 |     <group>
44 |       <Label text="Username" position-y={0.1} font="fonts/PlayfairDisplay-Regular.ttf" />
45 |       <Input>
46 |         <InputText font="fonts/MajorMonoDisplay.ttf" />
47 |       </Input>
48 |     </group>
49 |   );
50 | }
51 | 
52 | export const DefaultStory: Story = {
53 |   name: "Default",
54 |   render: () => <Default />,
55 | };
56 | 
57 | export const WithLabelStory: Story = {
58 |   name: "With Label",
59 |   render: () => <WithLabel />,
60 | };
61 | 
62 | export const WithPlaceholderStory: Story = {
63 |   name: "With Placeholder",
64 |   render: () => <WithPlaceholder />,
65 | };
66 | 
67 | export const WithColorStory: Story = {
68 |   name: "With Color",
69 |   render: () => <WithColor />,
70 | };
71 | 
72 | export const WithCustomFontStory: Story = {
73 |   name: "With Custom Font",
74 |   render: () => <WithCustomFont />,
75 | };
76 | 


--------------------------------------------------------------------------------
/.storybook/stories/Textarea.stories.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Textarea, Label, TextareaText } from "../../src";
 3 | import type { Meta, StoryObj } from "@storybook/react";
 4 | 
 5 | const meta: Meta<typeof Textarea> = {
 6 |   component: Default,
 7 |   title: "Textarea",
 8 | };
 9 | 
10 | export default meta;
11 | type Story = StoryObj<typeof Textarea>;
12 | 
13 | function Default() {
14 |   return <Textarea />;
15 | }
16 | 
17 | function WithLabel() {
18 |   return (
19 |     <group>
20 |       <Label text="Username" position-y={0.1} />
21 |       <Textarea />
22 |     </group>
23 |   );
24 | }
25 | 
26 | function WithPlaceholder() {
27 |   return <Textarea placeholder="What is your life story?" />;
28 | }
29 | 
30 | function WithColor() {
31 |   return (
32 |     <group>
33 |       <Label text="Username" position-y={0.1} color="blue" />
34 |       <Textarea backgroundColor={"red"}>
35 |         <TextareaText color="white" />
36 |       </Textarea>
37 |     </group>
38 |   );
39 | }
40 | 
41 | function WithCustomFont() {
42 |   return (
43 |     <group>
44 |       <Label text="Username" position-y={0.1} font="fonts/PlayfairDisplay-Regular.ttf" />
45 |       <Textarea>
46 |         <TextareaText font="fonts/MajorMonoDisplay.ttf" />
47 |       </Textarea>
48 |     </group>
49 |   );
50 | }
51 | 
52 | export const DefaultStory: Story = {
53 |   name: "Default",
54 |   render: () => <Default />,
55 | };
56 | 
57 | export const WithLabelStory: Story = {
58 |   name: "With Label",
59 |   render: () => <WithLabel />,
60 | };
61 | 
62 | export const WithPlaceholderStory: Story = {
63 |   name: "With Placeholder",
64 |   render: () => <WithPlaceholder />,
65 | };
66 | 
67 | export const WithColorStory: Story = {
68 |   name: "With Color",
69 |   render: () => <WithColor />,
70 | };
71 | 
72 | export const WithCustomFontStory: Story = {
73 |   name: "With Custom Font",
74 |   render: () => <WithCustomFont />,
75 | };
76 | 


--------------------------------------------------------------------------------
/src/Input/Text.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Text as TextImpl, useMask } from "@react-three/drei";
 3 | import { Color } from "@react-three/fiber";
 4 | import { TextRenderInfo } from "troika-three-text";
 5 | 
 6 | type Props = {
 7 |   characters?: string;
 8 |   color?: Color;
 9 |   fontSize?: number;
10 |   maxWidth?: number;
11 |   lineHeight?: number;
12 |   letterSpacing?: number;
13 |   textAlign?: "left" | "right" | "center" | "justify";
14 |   font?: string;
15 |   anchorX?: number | "left" | "center" | "right";
16 |   anchorY?: number | "top" | "top-baseline" | "middle" | "bottom-baseline" | "bottom";
17 |   depthOffset?: number;
18 |   overflowWrap?: "normal" | "break-word";
19 |   outlineWidth?: number | string;
20 |   outlineOffsetX?: number | string;
21 |   outlineOffsetY?: number | string;
22 |   outlineBlur?: number | string;
23 |   outlineOpacity?: number;
24 |   strokeWidth?: number | string;
25 |   strokeOpacity?: number;
26 |   fillOpacity?: number;
27 |   debugSDF?: boolean;
28 |   onSync?: (troika: { textRenderInfo: TextRenderInfo }) => void;
29 |   text?: string;
30 | } & JSX.IntrinsicElements["mesh"];
31 | 
32 | const InputText = React.forwardRef((props: Props, ref) => {
33 |   const {
34 |     fontSize = 0.07,
35 |     anchorX = "left",
36 |     anchorY = "middle",
37 |     depthOffset = 0.5,
38 |     color = "black",
39 |     text,
40 |     children,
41 |     ...restProps
42 |   } = props;
43 | 
44 |   const localRef = React.useRef<typeof TextImpl>(null);
45 |   React.useImperativeHandle(ref, () => localRef.current);
46 |   const stencil = useMask(1);
47 | 
48 |   return (
49 |     <TextImpl
50 |       ref={localRef}
51 |       {...restProps}
52 |       fontSize={fontSize}
53 |       anchorX={anchorX}
54 |       anchorY={anchorY}
55 |       depthOffset={depthOffset}
56 |       whiteSpace="nowrap"
57 |     >
58 |       <meshBasicMaterial color={color} toneMapped={false} {...stencil} />
59 |       {children}
60 |       {text}
61 |     </TextImpl>
62 |   );
63 | });
64 | 
65 | InputText.displayName = "InputText";
66 | 
67 | export { InputText };
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.0.0-development",
 3 |   "name": "r3f-form",
 4 |   "description": "An *accessible* webGL form component library for use with React Three Fiber",
 5 |   "type": "module",
 6 |   "module": "dist/index.js",
 7 |   "main": "dist/index.js",
 8 |   "types": "dist/index.d.ts",
 9 |   "publishConfig": {
10 |     "access": "public"
11 |   },
12 |   "scripts": {
13 |     "dev": "vite",
14 |     "build": "tsc && vite build",
15 |     "format": "prettier --write .",
16 |     "format:check": "prettier --check .",
17 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
18 |     "preview": "vite preview",
19 |     "commit": "cz",
20 |     "semantic-release": "semantic-release --branches main",
21 |     "storybook": "storybook dev -p 6006",
22 |     "build-storybook": "storybook build"
23 |   },
24 |   "author": "John Beresford",
25 |   "license": "MIT",
26 |   "devDependencies": {
27 |     "@storybook/addon-essentials": "^7.6.17",
28 |     "@storybook/addon-interactions": "^7.6.17",
29 |     "@storybook/addon-links": "^7.6.17",
30 |     "@storybook/addon-onboarding": "^1.0.11",
31 |     "@storybook/blocks": "^7.6.17",
32 |     "@storybook/jest": "^0.2.3",
33 |     "@storybook/react": "^7.6.17",
34 |     "@storybook/react-vite": "^7.6.17",
35 |     "@storybook/test": "^7.6.17",
36 |     "@storybook/testing-library": "^0.2.2",
37 |     "@types/react": "^18.2.56",
38 |     "@types/react-dom": "^18.2.19",
39 |     "@types/three": "^0.155.1",
40 |     "@typescript-eslint/eslint-plugin": "^7.0.2",
41 |     "@typescript-eslint/parser": "^7.0.2",
42 |     "@vitejs/plugin-react": "^4.2.1",
43 |     "commitizen": "^4.3.0",
44 |     "cz-conventional-changelog": "^3.3.0",
45 |     "eslint": "^8.56.0",
46 |     "eslint-config-prettier": "^9.0.0",
47 |     "eslint-plugin-prettier": "^5.0.0",
48 |     "eslint-plugin-react": "^7.31.11",
49 |     "eslint-plugin-react-hooks": "^4.6.0",
50 |     "eslint-plugin-react-refresh": "^0.4.5",
51 |     "eslint-plugin-storybook": "^0.8.0",
52 |     "prettier": "^3.0.0",
53 |     "semantic-release": "^23.0.2",
54 |     "storybook": "^7.6.17",
55 |     "tslib": "^2.6.2",
56 |     "typescript": "^5.2.2",
57 |     "vite": "^5.1.4",
58 |     "vite-plugin-dts": "^3.7.3"
59 |   },
60 |   "peerDependencies": {
61 |     "@react-three/drei": ">=9.0",
62 |     "@react-three/fiber": ">=8.0",
63 |     "react": ">=18.0",
64 |     "troika-three-text": "^0.49.0",
65 |     "react-dom": ">=18.0",
66 |     "three": ">=0.146.0"
67 |   },
68 |   "repository": {
69 |     "type": "git",
70 |     "url": "https://github.com/JMBeresford/r3f-form.git"
71 |   },
72 |   "config": {
73 |     "commitizen": {
74 |       "path": "./node_modules/cz-conventional-changelog"
75 |     }
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/.storybook/common.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Canvas, Color, useFrame, useThree } from "@react-three/fiber";
 3 | import { Environment, Float } from "@react-three/drei";
 4 | import { damp, randFloat, randInt, seededRandom } from "three/src/math/MathUtils";
 5 | import { Group } from "three";
 6 | 
 7 | const Shapes = () => {
 8 |   let n = 7;
 9 |   const ref = React.useRef<Group>(null);
10 | 
11 |   useFrame((_, delta) => {
12 |     if (ref.current && ref.current.rotation.y) {
13 |       ref.current.rotation.y += delta * 10;
14 |     }
15 |   });
16 | 
17 |   return (
18 |     <>
19 |       <group ref={ref}>
20 |         {Array.from({ length: n }).map((_, idx) => {
21 |           const r = randFloat(0.35, 0.8);
22 |           const b = randFloat(0.35, 0.8);
23 |           const g = randFloat(0.35, 0.8);
24 |           const color: Color = [r, g, b];
25 | 
26 |           const pos: [number, number, number] = [
27 |             randFloat(0.2, 1.2) * (Math.random() < 0.5 ? 1 : -1),
28 |             randFloat(0.2, 0.8) * (Math.random() < 0.5 ? 1 : -1),
29 |             randFloat(0.2, 0.5) * (Math.random() < 0.5 ? 1 : -1),
30 |           ];
31 | 
32 |           const rot: [number, number, number] = [
33 |             randFloat(-Math.PI * 2, Math.PI * 2),
34 |             randFloat(-Math.PI * 2, Math.PI * 2),
35 |             randFloat(-Math.PI * 2, Math.PI * 2),
36 |           ];
37 | 
38 |           const geometries = [
39 |             <sphereGeometry args={[0.075, 20, 20]} />,
40 |             <coneGeometry args={[0.075, 0.15, 15, 10]} />,
41 |             <boxGeometry args={[0.15, 0.15, 0.15]} />,
42 |           ];
43 | 
44 |           return (
45 |             <Float key={idx} speed={seededRandom(idx) + 0.5}>
46 |               <mesh position={pos} rotation={rot}>
47 |                 {geometries[randInt(0, geometries.length - 1)]}
48 |                 <meshStandardMaterial color={color} toneMapped={true} />
49 |               </mesh>
50 |             </Float>
51 |           );
52 |         })}
53 |       </group>
54 |     </>
55 |   );
56 | };
57 | 
58 | const Rig = () => {
59 |   const camera = useThree((s) => s.camera);
60 | 
61 |   useFrame(({ mouse }, delta) => {
62 |     let x = mouse.x * 0.1;
63 |     let y = mouse.y * 0.1;
64 | 
65 |     camera.rotation.x = damp(camera.rotation.x, y, 12, delta);
66 |     camera.rotation.y = damp(camera.rotation.y, -x, 12, delta);
67 |   });
68 |   return <></>;
69 | };
70 | 
71 | const Scene = ({ lightColor = "red", children }) => (
72 |   <Canvas dpr={[1, 2]} camera={{ position: [0, 0, 1.125], fov: 65 }}>
73 |     <Environment background preset="sunset" blur={0.85} />
74 |     <hemisphereLight args={["#ffffff", lightColor]} />
75 |     {/* <ContactShadows position-y={-1} opacity={0.85} blur={1} /> */}
76 |     <Shapes />
77 | 
78 |     {children}
79 |     <Rig />
80 |   </Canvas>
81 | );
82 | 
83 | export { Scene };
84 | 


--------------------------------------------------------------------------------
/src/Submit/Submit.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as ReactDOM from "react-dom/client";
  3 | import { Text, useCursor } from "@react-three/drei";
  4 | import { Color, ThreeEvent, useThree } from "@react-three/fiber";
  5 | import { useFormContext } from "../Form";
  6 | 
  7 | type ButtonProps = {
  8 |   value?: string;
  9 |   fontSize?: number;
 10 |   width?: number;
 11 |   height?: number;
 12 |   color?: Color;
 13 |   backgroundColor?: Color;
 14 | };
 15 | 
 16 | export type Props = ButtonProps &
 17 |   Pick<JSX.IntrinsicElements["group"], "position" | "rotation" | "scale"> &
 18 |   Omit<JSX.IntrinsicElements["input"], "ref">;
 19 | 
 20 | const Button = (props: ButtonProps) => {
 21 |   const {
 22 |     backgroundColor,
 23 |     width = 1.5,
 24 |     height = 0.1325,
 25 |     fontSize = 0.0825,
 26 |     color = "black",
 27 |     value,
 28 |   } = props;
 29 | 
 30 |   return (
 31 |     <group>
 32 |       <Text fontSize={fontSize} color={color} renderOrder={3} anchorY={"middle"}>
 33 |         {value}
 34 |       </Text>
 35 |       <mesh renderOrder={1}>
 36 |         <planeGeometry args={[width, height]} />
 37 |         <meshBasicMaterial color={backgroundColor} depthWrite={false} transparent />
 38 |       </mesh>
 39 |     </group>
 40 |   );
 41 | };
 42 | 
 43 | const Submit = React.forwardRef((props: Props, ref: React.ForwardedRef<HTMLInputElement>) => {
 44 |   const { value, children, position, rotation, scale, ...restProps } = props;
 45 | 
 46 |   const root = React.useRef<ReactDOM.Root | null>(null);
 47 |   const formNode = useFormContext();
 48 |   const events = useThree((s) => s.events);
 49 |   const gl = useThree((s) => s.gl);
 50 |   const target = (formNode?.current || events.connected || gl.domElement.parentNode) as HTMLElement;
 51 | 
 52 |   const [domEl] = React.useState(() => document.createElement("div"));
 53 |   const [hovered, setHovered] = React.useState<boolean>(false);
 54 | 
 55 |   useCursor(hovered);
 56 | 
 57 |   const handleClick = React.useCallback(
 58 |     (e: ThreeEvent<MouseEvent>) => {
 59 |       e.stopPropagation();
 60 | 
 61 |       if (formNode.current?.requestSubmit) {
 62 |         formNode.current.requestSubmit();
 63 |       } else {
 64 |         formNode.current?.submit();
 65 |       }
 66 |     },
 67 |     [formNode]
 68 |   );
 69 | 
 70 |   React.useLayoutEffect(() => {
 71 |     root.current = ReactDOM.createRoot(domEl);
 72 |     const curRoot = root.current;
 73 | 
 74 |     target?.appendChild(domEl);
 75 | 
 76 |     return () => {
 77 |       target?.removeChild(domEl);
 78 |       curRoot.unmount();
 79 |     };
 80 |   }, [domEl, target]);
 81 | 
 82 |   React.useLayoutEffect(() => {
 83 |     root.current?.render(
 84 |       <input
 85 |         ref={ref}
 86 |         type="submit"
 87 |         value={value}
 88 |         style={{
 89 |           position: "absolute",
 90 |           left: "-1000vw",
 91 |           touchAction: "none",
 92 |           pointerEvents: "none",
 93 |           opacity: 0,
 94 |         }}
 95 |         {...restProps}
 96 |       />
 97 |     );
 98 |   });
 99 | 
100 |   return (
101 |     <>
102 |       <group
103 |         onClick={handleClick}
104 |         onPointerOver={() => setHovered(true)}
105 |         onPointerLeave={() => setHovered(false)}
106 |         position={position}
107 |         rotation={rotation}
108 |         scale={scale}
109 |       >
110 |         {children ? children : <Button {...(props as ButtonProps)} />}
111 |       </group>
112 |     </>
113 |   );
114 | });
115 | 
116 | Submit.displayName = "InputSubmit";
117 | 
118 | export { Submit };
119 | 


--------------------------------------------------------------------------------
/src/troika-three-text.d.ts:
--------------------------------------------------------------------------------
  1 | declare module "troika-three-text" {
  2 |   declare type SelectionRect = {
  3 |     bottom: number;
  4 |     top: number;
  5 |     left: number;
  6 |     right: number;
  7 |   };
  8 | 
  9 |   declare type AnchorXValue = number | "left" | "center" | "right";
 10 | 
 11 |   declare type AnchorYValue =
 12 |     | number
 13 |     | "top"
 14 |     | "top-baseline"
 15 |     | "top-cap"
 16 |     | "top-ex"
 17 |     | "middle"
 18 |     | "bottom-baseline"
 19 |     | "bottom";
 20 | 
 21 |   declare type TypesetParams = {
 22 |     text?: string;
 23 |     fontSize?: number;
 24 |     font?: unknown;
 25 |     lang?: string;
 26 |     sdfGlyphSize?: number;
 27 |     fontWeight?: number | "normal" | "bold";
 28 |     fontStyle?: "normal" | "italic";
 29 |     letterSpacing?: number;
 30 |     lineHeight?: number | "normal";
 31 |     maxWidth?: number;
 32 |     direction?: "ltr" | "rtl";
 33 |     textAlign?: "left" | "right" | "center" | "justify";
 34 |     textIndent?: number;
 35 |     whiteSpace?: "normal" | "nowrap";
 36 |     overflowWrap?: "normal" | "break-word";
 37 |     anchorX?: AnchorXValue;
 38 |     anchorY?: AnchorYValue;
 39 |     metricsOnly?: boolean;
 40 |     unicodeFontsURL?: string;
 41 |     preResolveFonts?: unknown;
 42 |     includeCaretPositions?: boolean;
 43 |     chunkedBoundsSize?: number;
 44 |     colorRanges?: unknown;
 45 |   };
 46 | 
 47 |   declare type BoundingRect = [minX: number, minY: number, maxX: number, maxY: number];
 48 | 
 49 |   declare type ChunkedBounds = {
 50 |     start: number;
 51 |     end: number;
 52 |     rect: BoundingRect;
 53 |   };
 54 | 
 55 |   declare type TextRenderInfo = {
 56 |     parameters?: TypesetParams;
 57 |     sdfTexture?: Texture;
 58 |     sdfGlyphSize?: number;
 59 |     sdfExponent?: number;
 60 | 
 61 |     // List of [minX, minY, maxX, maxY] quad bounds for each glyph.
 62 |     glyphBounds?: number[];
 63 | 
 64 |     // List holding each glyph's index in the SDF atlas.
 65 |     glyphAtlasIndices?: number[];
 66 | 
 67 |     // List holding each glyph's [r, g, b] color, if `colorRanges` was supplied.
 68 |     glyphColors?: number[];
 69 | 
 70 |     // A list of caret positions for all characters in the string; each is
 71 |     // four elements: the starting X, the ending X, the bottom Y, and the top Y for the caret.
 72 |     caretPositions?: number[];
 73 | 
 74 |     // An appropriate height for all selection carets.
 75 |     caretHeight?: number;
 76 | 
 77 |     // The font's ascender metric.
 78 |     ascender?: number;
 79 | 
 80 |     // The font's descender metric.
 81 |     descender?: number;
 82 | 
 83 |     // The font's cap height metric, based on the height of Latin capital letters.
 84 |     capHeight?: number;
 85 | 
 86 |     // The font's x height metric, based on the height of Latin lowercase letters.
 87 |     xHeight?: number;
 88 | 
 89 |     // The final computed lineHeight measurement.
 90 |     lineHeight?: number;
 91 | 
 92 |     // The y position of the top line's baseline.
 93 |     topBaseline?: number;
 94 | 
 95 |     // The total [minX, minY, maxX, maxY] rect of the whole text block;
 96 |     // this can include extra vertical space beyond the visible glyphs due to lineHeight.
 97 |     // Equivalent to the dimensions of a block-level text element in CSS.
 98 |     blockBounds?: number[];
 99 | 
100 |     // The total [minX, minY, maxX, maxY] rect of the whole text block;
101 |     // unlike `blockBounds` this is tightly wrapped to the visible glyph paths.
102 |     // Equivalent to the dimensions of an inline text element in CSS.
103 |     visibleBounds?: number[];
104 | 
105 |     // List of bounding rects for each consecutive set of N glyphs,
106 |     // in the format `{start:N, end:N, rect:[minX, minY, maxX, maxY]}`.
107 |     chunkedBounds?: ChunkedBounds[];
108 | 
109 |     // Timing info for various parts of the rendering logic including SDF
110 |     // generation, typesetting, etc.
111 |     timings?: object;
112 |   };
113 |   declare function getCaretAtPoint(
114 |     troikaText: TextRenderInfo,
115 |     x: number,
116 |     y: number
117 |   ): { charIndex: number };
118 |   declare function getSelectionRects(
119 |     troikaText: TextRenderInfo,
120 |     start: number,
121 |     end: number
122 |   ): SelectionRect[];
123 | }
124 | 


--------------------------------------------------------------------------------
/.storybook/stories/Form.stories.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { Form, Input, Textarea, Label, Submit, InputText } from "../../src";
  3 | import type { Meta, StoryObj } from "@storybook/react";
  4 | import { action } from "@storybook/addon-actions";
  5 | import { Group } from "three";
  6 | import { damp } from "../../src/utils";
  7 | import { Text } from "@react-three/drei";
  8 | import { useFrame } from "@react-three/fiber";
  9 | 
 10 | const meta: Meta<typeof Form> = {
 11 |   component: Default,
 12 |   title: "Form",
 13 | };
 14 | 
 15 | export default meta;
 16 | type Story = StoryObj<typeof Form>;
 17 | 
 18 | const handleSubmit = (e: React.FormEvent) => {
 19 |   e.preventDefault();
 20 |   const data = new FormData(e.target as HTMLFormElement);
 21 | 
 22 |   let res = "";
 23 | 
 24 |   for (let [k, v] of data.entries()) {
 25 |     if (!v) return;
 26 |     res += `${k}: ${v}\n`;
 27 |   }
 28 | 
 29 |   window.alert(res);
 30 |   return res;
 31 | };
 32 | 
 33 | const submitAction = (event) => {
 34 |   action("form submitted")(handleSubmit(event));
 35 | };
 36 | 
 37 | function Default() {
 38 |   const ref = React.useRef<HTMLFormElement>(null);
 39 | 
 40 |   return (
 41 |     <group position-y={0.2}>
 42 |       <Form ref={ref} onSubmit={(e) => submitAction(e)}>
 43 |         <Label position-y={0.1} text="Username" />
 44 |         <Input name="username" />
 45 | 
 46 |         <group position-y={-0.325}>
 47 |           <Label position-y={0.1} text="Password" />
 48 |           <Input type="password" name="password" />
 49 |         </group>
 50 | 
 51 |         <Submit position={[0, -0.55, 0]} value="Login" backgroundColor="#AA99FF" />
 52 |       </Form>
 53 |     </group>
 54 |   );
 55 | }
 56 | 
 57 | function Button() {
 58 |   const btnRef = React.useRef<Group>(null);
 59 | 
 60 |   const [hovered, setHovered] = React.useState<boolean>(false);
 61 |   const [submitting, setSubmitting] = React.useState<boolean>(false);
 62 | 
 63 |   useFrame((_, delta) => {
 64 |     if (btnRef.current) {
 65 |       let low = submitting ? 0.2 : 0.8;
 66 | 
 67 |       let y = hovered ? low : 1;
 68 |       btnRef.current.scale.y = damp(btnRef.current.scale.y, y, 12, delta);
 69 | 
 70 |       if (btnRef.current.scale.y === 0.2) {
 71 |         setSubmitting(false);
 72 |       }
 73 |     }
 74 |   });
 75 | 
 76 |   return (
 77 |     <group
 78 |       ref={btnRef}
 79 |       position={[0, -1, 0.25]}
 80 |       onPointerOver={() => setHovered(true)}
 81 |       onPointerLeave={() => {
 82 |         setHovered(false);
 83 |         setSubmitting(false);
 84 |       }}
 85 |       onPointerDown={() => setSubmitting(true)}
 86 |       onPointerUp={() => setSubmitting(false)}
 87 |     >
 88 |       <Text
 89 |         color="#aa5566"
 90 |         renderOrder={5}
 91 |         fontSize={0.185}
 92 |         font="fonts/Poppins-Bold.ttf"
 93 |         rotation-x={-Math.PI / 2}
 94 |         position-y={0.105}
 95 |       >
 96 |         Login
 97 |       </Text>
 98 |       <mesh position={[0, 0.05, 0]} renderOrder={4}>
 99 |         <boxGeometry args={[1, 0.1, 0.5]} />
100 |         <meshStandardMaterial color={"#ff7777"} />
101 |       </mesh>
102 |     </group>
103 |   );
104 | }
105 | 
106 | function WithCustomButton() {
107 |   const ref = React.useRef<HTMLFormElement>(null);
108 | 
109 |   return (
110 |     <group position-z={-0.5}>
111 |       <Form ref={ref} onSubmit={(e) => submitAction(e)}>
112 |         <Label position-y={0.1} text="Username" />
113 |         <Input name="username" defaultValue={"jim"}>
114 |           <InputText color="red" />
115 |         </Input>
116 | 
117 |         <group position-y={-0.325}>
118 |           <Label position-y={0.1} text="Password" />
119 |           <Input type="password" name="password" />
120 |         </group>
121 | 
122 |         <Submit value="submit" position={[0, 0, -0.5]}>
123 |           <Button />
124 |         </Submit>
125 |       </Form>
126 |     </group>
127 |   );
128 | }
129 | 
130 | function WithTextArea() {
131 |   const ref = React.useRef<HTMLFormElement>(null);
132 | 
133 |   return (
134 |     <group position-z={-0.5}>
135 |       <Form ref={ref} onSubmit={(e) => submitAction(e)}>
136 |         <group position-y={0.35}>
137 |           <Label position-y={0.1} text="Username" />
138 |           <Input name="username" />
139 |         </group>
140 | 
141 |         <group position-y={0.05}>
142 |           <Label position-y={0.1} text="Password" />
143 |           <Input type="password" name="password" />
144 |         </group>
145 | 
146 |         <group position-y={-0.25}>
147 |           <Label position-y={0.1} text="Message" />
148 |           <Textarea name="message" rows={2} />
149 |         </group>
150 |         <Submit value="submit" position={[0, 0, -0.5]}>
151 |           <Button />
152 |         </Submit>
153 |       </Form>
154 |     </group>
155 |   );
156 | }
157 | 
158 | export const DefaultStory: Story = {
159 |   name: "Default",
160 |   render: () => <Default />,
161 | };
162 | 
163 | export const CustomButtonStory: Story = {
164 |   name: "With Custom Button",
165 |   render: () => <WithCustomButton />,
166 | };
167 | 
168 | export const WithTextAreaStory: Story = {
169 |   name: "With TextArea",
170 |   render: () => <WithTextArea />,
171 | };
172 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # r3f-form
  2 | 
  3 | ### [View examples](https://jmberesford.github.io/r3f-form/?path=/story/form--default-submit-button)
  4 | 
  5 | > ## WARNING: UNDER HEAVY DEVELOPMENT
  6 | >
  7 | > Each release will aim to be a fully functional and usable release,
  8 | > but breaking API changes WILL be likely for the forseeable future.
  9 | 
 10 | ## A webGL form component for use with React Three Fiber
 11 | 
 12 | ![image](https://user-images.githubusercontent.com/1373954/210024281-c735f61a-1a69-45e5-a5d3-147ed57a6c30.png)
 13 | 
 14 | This package aims to create a fully-functional and **accessible** `<Form />`
 15 | components that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)
 16 | ecosystem. Ultimately, the goal is to have fully functioning HTML `<form>`s -- with all viable input types -- rendered in webGL.
 17 | 
 18 | Current implementation binds webGL elements to the existing state and event systems of respective
 19 | hidden HTML DOM elements. There is a heavy reliance on
 20 | [troika-three-text](https://github.com/protectwise/troika/tree/main/packages/troika-three-text)
 21 | for text-rendering and selection/caret logic.
 22 | 
 23 | > Note that `r3f-form` will only work within a React-Three-Fiber Canvas element.
 24 | > You **must** be using
 25 | >
 26 | > - [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)
 27 | > - [@react-three/drei](https://github.com/pmndrs/drei)
 28 | > - [troika-three-text](https://github.com/protectwise/troika/tree/main/packages/troika-three-text)
 29 | >
 30 | > as dependencies in your project to use `r3f-form`.
 31 | 
 32 | ### Install
 33 | 
 34 | ```sh
 35 | npm install r3f-form
 36 | # or
 37 | yarn add r3f-form
 38 | # or
 39 | pnpm install r3f-form
 40 | ```
 41 | 
 42 | # How to use
 43 | 
 44 | ## Forms
 45 | 
 46 | In order to create a form, just wrap any relevant elements in a `<Form>`:
 47 | 
 48 | ```tsx
 49 | import { Form, Input, Label, Submit } from "r3f-form";
 50 | 
 51 | export function MyForm() {
 52 |   return (
 53 |     <Form>
 54 |       <Label text="username" />
 55 |       <Input name="username" />
 56 | 
 57 |       <Label text="password" />
 58 |       <Input name="password" type="password" />
 59 | 
 60 |       <Submit value="Login" />
 61 |     </Form>
 62 |   );
 63 | }
 64 | ```
 65 | 
 66 | > Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element
 67 | 
 68 | The relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:
 69 | 
 70 | ![image](https://user-images.githubusercontent.com/1373954/217718779-816da536-00af-4375-85dd-de707e79aa8d.png)
 71 | 
 72 | You can define submission behavior just like with any old HTML `<form>`:
 73 | 
 74 | ```tsx
 75 | // redirect to a login script
 76 | <Form action="/login.php"></Form>;
 77 | 
 78 | // or handle it with a callback
 79 | const handleSubmit = (e: FormEvent) => {
 80 |   e.preventDefault();
 81 | 
 82 |   const data = new FormData(e.target);
 83 | 
 84 |   for (let [name, value] of data.entries()) {
 85 |     console.log(`${name}: ${value}`);
 86 |   }
 87 | };
 88 | 
 89 | <Form onSubmit={handleSubmit}></Form>;
 90 | ```
 91 | 
 92 | ## Inputs
 93 | 
 94 | An editable text-box bound to an DOM `<input>` and represented in the webGL canvas.
 95 | 
 96 | ```ts
 97 | type Props = {
 98 |   type?: "text" | "password";
 99 | 
100 |   /** width of the container */
101 |   width?: number;
102 |   backgroundColor?: Color;
103 |   selectionColor?: Color;
104 |   backgroundOpacity?: number;
105 | 
106 |   /** [left/right , top/bottom] in THREE units, respectively
107 |    *
108 |    * note that height is implicitly defined by the capHeight of the rendered
109 |    * text. The cap height is dependant on both the `textProps.font` being used and the
110 |    * `textProps.fontSize` value
111 |    */
112 |   padding?: Vector2;
113 |   cursorWidth?: number;
114 | 
115 |   /** 3D transformations */
116 |   position: Vector3;
117 |   rotation: Euler;
118 |   scale: Vector3;
119 | 
120 |   // And ALL props available to DOM <input>s
121 | };
122 | ```
123 | 
124 | Create a basic input field like so:
125 | 
126 | ```tsx
127 | import { Input, Label } from "r3f-form";
128 | 
129 | export function MyInput() {
130 |   return (
131 |     <>
132 |       <Label text="label" />
133 |       <Input />
134 |     </>
135 |   );
136 | }
137 | ```
138 | 
139 | ![image](https://user-images.githubusercontent.com/1373954/217718847-acb169ed-95ff-4def-a126-491c648346b9.png)
140 | 
141 | You can access the value of the input via the `onChange` callback prop:
142 | 
143 | > The callback is passed the `ChangeEvent` object from the underlying HTML `<input>`s
144 | > change event on every change.
145 | >
146 | > Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
147 | 
148 | ```tsx
149 | import { Input, Label } from "r3f-form";
150 | 
151 | export function MyInput() {
152 |   const [username, setUsername] = React.useState("");
153 |   // username will always contain the current value
154 | 
155 |   function handleChange(e) {
156 |     setUsername(ev.target.value);
157 |   }
158 | 
159 |   return (
160 |     <>
161 |       <Label text="Test Input" />
162 |       <Input onChange={handleChange} />
163 |     </>
164 |   );
165 | }
166 | ```
167 | 
168 | You can also create password inputs:
169 | 
170 | ```tsx
171 | import { Input, Label } from "r3f-form";
172 | 
173 | export function MyPassword() {
174 |   return (
175 |     <>
176 |       <Label text="Password" />
177 |       <Input type="password" />
178 |     </>
179 |   );
180 | }
181 | ```
182 | 
183 | ![image](https://user-images.githubusercontent.com/1373954/217718412-48158e10-53b2-4e79-86c9-54bc5495521a.png)
184 | 
185 | Add custom padding to the text container:
186 | 
187 | ```tsx
188 | import { Input, Label } from "r3f-form";
189 | 
190 | /*
191 |  * padding: [horizontal padding, vertical padding] in THREE units
192 |  */
193 | 
194 | export function MyInput() {
195 |   return (
196 |     <>
197 |       <Label text="Label" />
198 |       <Input padding={[0.05, 0.5]} />
199 |     </>
200 |   );
201 | }
202 | ```
203 | 
204 | ![image](https://user-images.githubusercontent.com/1373954/217718475-1c696ff1-3b1d-4559-9d02-9535bd59cdff.png)
205 | 
206 | ---
207 | 
208 | ## Textarea
209 | 
210 | ```ts
211 | type Props = {
212 |   /** width of the container */
213 |   width?: number;
214 | 
215 |   backgroundColor?: Color;
216 |   backgroundOpacity?: number;
217 |   selectionColor?: Color;
218 | 
219 |   /** [left/right , top/bottom] in THREE units, respectively
220 |    *
221 |    * note that height is implicitly defined by the capHeight of the rendered
222 |    * text. The cap height is dependant on both the `textProps.font` being used
223 |    * and the `textProps.fontSize` value
224 |    */
225 |   padding?: Vector2;
226 |   cursorWidth?: number;
227 | 
228 |   /** 3D transformations */
229 |   position: Vector3;
230 |   rotation: Euler;
231 |   scale: Vector3;
232 | 
233 |   // And ALL props available to DOM <textarea>s
234 | };
235 | ```
236 | 
237 | Similar to the `<Input />` component, you can also create a `<Textarea />` like so:
238 | 
239 | ```tsx
240 | import { Textarea, Label } from "r3f-form";
241 | 
242 | export function App() {
243 |   return (
244 |     <>
245 |       <Label text="Default Textarea:" />
246 |       <Textarea />
247 |     </>
248 |   );
249 | }
250 | ```
251 | 
252 | ![image](https://user-images.githubusercontent.com/1373954/217718566-a718eab7-1e73-4559-96aa-8e14824f0031.png)
253 | 
254 | ---
255 | 
256 | ## Text
257 | 
258 | In order to configure the underlying `troika-three-text` instance
259 | that is responsible for rendering the actual text, you can use the
260 | `<Text />` component.
261 | 
262 | There is a respective `<InputText />` or `<TextareaText />` component for both `<Input />`s and
263 | `<Textarea />`s.
264 | 
265 | For all configuration options, check out the [troika docs](https://github.com/protectwise/troika/tree/main/packages/troika-three-text).
266 | 
267 | > Note that **not all** of troika's props are exposed on these `<Text />`
268 | > components
269 | 
270 | Change color and background opacity:
271 | 
272 | ```tsx
273 | import { Input, Label, InputText } from "r3f-form";
274 | 
275 | export function App() {
276 |   return (
277 |     <>
278 |       <Label text="Test Color/Opacity" />
279 |       <Input backgroundOpacity={0.6} backgroundColor="black">
280 |         <InputText color="red" />
281 |       </Input>
282 |     </>
283 |   );
284 | }
285 | ```
286 | 
287 | ![image](https://user-images.githubusercontent.com/1373954/217718611-c2e4848e-8267-4926-9243-7bb61bced61d.png)
288 | 
289 | ```tsx
290 | import { Input, Textarea, Label, InputText, TextareaText } from "r3f-form";
291 | 
292 | export function App() {
293 |   return (
294 |     <>
295 |       <Label text="Test Color/Opacity" />
296 |       <Input>
297 |         <InputText color="#red" />
298 |       </Input>
299 | 
300 |       <Label text="Test Textarea" />
301 |       <Textarea>
302 |         <TextareaText color="red" />
303 |       </Textarea>
304 |     </>
305 |   );
306 | }
307 | ```
308 | 
309 | ---
310 | 
311 | ## Submit
312 | 
313 | Equivalent to a DOM `<input type="submit" />`, exposed as
314 | an independent component. By default it renders a button
315 | using the following props:
316 | 
317 | ```ts
318 | type Props = {
319 |   value?: string;
320 |   fontSize?: number;
321 |   width?: number;
322 |   height?: number;
323 |   color?: Color;
324 |   backgroundColor?: Color;
325 | 
326 |   /** 3D transformations */
327 |   position: Vector3;
328 |   rotation: Euler;
329 |   scale: Vector3;
330 | 
331 |   // And ALL props available to DOM <input>s
332 | };
333 | ```
334 | 
335 | Add a simple submit button to your forms like so:
336 | 
337 | ```tsx
338 | <Form>
339 |   <Label text="Username" />
340 |   <Input name="username" />
341 | 
342 |   <Label text="Password" />
343 |   <Input name="password" type="password" />
344 | 
345 |   <Submit value="Login" />
346 | </Form>
347 | ```
348 | 
349 | ![image](https://user-images.githubusercontent.com/1373954/217718665-c64f6653-f85f-4310-a1c7-f2cf43154f2e.png)
350 | 
351 | While this provides a somewhat-customizable default button, the main purpose of this component
352 | is to provide a simple interface to use 3D elements to submit your forms. Any children passed in
353 | will submit the form on click. For example:
354 | 
355 | ```tsx
356 | <Form>
357 |   . . .
358 |   <Submit value="submit">
359 |     <MySubmitButton />
360 |   </Submit>
361 | </Form>
362 | ```
363 | 
364 | ![image](https://user-images.githubusercontent.com/1373954/217718713-a0a6671f-3f1e-4817-9ee9-e205bcc22610.png)
365 | 
366 | Clicking on the big red button would submit the `<Form>`
367 | 


--------------------------------------------------------------------------------
/src/Input/Input.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as ReactDOM from "react-dom/client";
  3 | import { Color, ThreeEvent, Vector2, useFrame, useThree } from "@react-three/fiber";
  4 | import { BufferGeometry, Group, Material, Mesh, Vector2 as Vector2Impl } from "three";
  5 | import { Mask, useCursor, useMask } from "@react-three/drei";
  6 | import { InputText } from "./Text";
  7 | import { useFormContext } from "../Form";
  8 | import { getCaretAtPoint, TextRenderInfo } from "troika-three-text";
  9 | import { damp } from "../utils";
 10 | 
 11 | type Props = {
 12 |   type?: "text" | "password";
 13 | 
 14 |   /** width of the container */
 15 |   width?: number;
 16 |   backgroundColor?: Color;
 17 |   selectionColor?: Color;
 18 |   backgroundOpacity?: number;
 19 | 
 20 |   /** [left/right , top/bottom] in THREE units, respectively
 21 |    *
 22 |    * note that height is implicitly defined by the capHeight of the rendered
 23 |    * text. The cap height is dependant on both the `textProps.font` being used and the
 24 |    * `textProps.fontSize` value
 25 |    */
 26 |   padding?: Vector2;
 27 |   cursorWidth?: number;
 28 | } & Pick<JSX.IntrinsicElements["group"], "position" | "rotation" | "scale"> &
 29 |   Omit<JSX.IntrinsicElements["input"], "type" | "ref">;
 30 | 
 31 | /**
 32 |  * An Input field that is rendered in the canvas and bound
 33 |  * to a hidden HTML <\input\> element.
 34 |  */
 35 | const Input = React.forwardRef((props: Props, ref?: React.ForwardedRef<HTMLInputElement>) => {
 36 |   const {
 37 |     type = "text",
 38 |     position,
 39 |     rotation,
 40 |     scale,
 41 |     width = 1.5,
 42 |     backgroundColor = "lightgrey",
 43 |     selectionColor = "#7777ff",
 44 |     backgroundOpacity = 0.3,
 45 |     padding,
 46 |     cursorWidth = 0.005,
 47 |     children,
 48 |     onChange,
 49 |     onFocus,
 50 |     onBlur,
 51 |     onSelect,
 52 |     ...restProps
 53 |   } = props;
 54 | 
 55 |   // REFS etc
 56 |   const domRef = React.useRef<HTMLInputElement>(null);
 57 |   React.useImperativeHandle(ref, () => domRef.current as HTMLInputElement);
 58 |   const textRef = React.useRef<Mesh<BufferGeometry, Material>>(null);
 59 |   const groupRef = React.useRef<Group>(null);
 60 |   const caretRef = React.useRef<Mesh<BufferGeometry, Material>>(null);
 61 |   const stencil = useMask(1);
 62 |   const events = useThree((s) => s.events);
 63 |   const gl = useThree((s) => s.gl);
 64 |   const formNode = useFormContext();
 65 |   const root = React.useRef<ReactDOM.Root | null>(null);
 66 |   const target = formNode?.current || (events.connected as HTMLElement) || gl.domElement.parentNode;
 67 | 
 68 |   // STATE
 69 |   const clock = useThree((s) => s.clock);
 70 |   const time = React.useRef<number>(0);
 71 |   const [domEl] = React.useState(() => document.createElement("div"));
 72 |   const [active, setActive] = React.useState<boolean>(false);
 73 |   const defaultVal = Array.isArray(props.defaultValue)
 74 |     ? props.defaultValue.join("")
 75 |     : props.defaultValue?.toString() ?? "";
 76 | 
 77 |   const [content, setContent] = React.useState<string>(defaultVal);
 78 |   const [caret, setCaret] = React.useState<number | null>(0);
 79 |   const [selection, setSelection] = React.useState<[number, number]>([0, 0]);
 80 |   const [renderInfo, setRenderInfo] = React.useState<TextRenderInfo | null>(null);
 81 |   const [hovered, setHovered] = React.useState<boolean>(false);
 82 | 
 83 |   const _padding = React.useMemo(() => new Vector2Impl(), []);
 84 |   if (padding && Array.isArray(padding)) {
 85 |     _padding.set(padding[0], padding[1]);
 86 |   } else {
 87 |     _padding.set(0.02, 0.02);
 88 |   }
 89 | 
 90 |   const fontSize: number = React.useMemo(() => {
 91 |     return renderInfo?.parameters?.fontSize ?? 0.07;
 92 |   }, [renderInfo]);
 93 | 
 94 |   const height = fontSize + _padding.y * 2;
 95 |   const caretPositions: number[] = React.useMemo(() => {
 96 |     if (!renderInfo?.caretPositions) return [0];
 97 | 
 98 |     const lastCaret = renderInfo.caretPositions[renderInfo.caretPositions.length - 3];
 99 | 
100 |     const caretPositions = renderInfo.caretPositions.filter((_, i) => i % 4 === 0);
101 | 
102 |     return [...caretPositions, lastCaret];
103 |   }, [renderInfo]);
104 | 
105 |   const caretPosition = React.useMemo(() => {
106 |     if (content && caret !== null) {
107 |       return caretPositions[Math.min(caret, caretPositions.length - 1) || 0];
108 |     } else {
109 |       return 0;
110 |     }
111 |   }, [caret, caretPositions, content]);
112 | 
113 |   const renderedContent = React.useMemo(() => {
114 |     if (type === "password") {
115 |       return "•".repeat(content.length);
116 |     }
117 |     if (content) {
118 |       return content;
119 |     }
120 |     return props.placeholder ?? "";
121 |   }, [content, type, props.placeholder]);
122 | 
123 |   // EVENTS
124 |   useCursor(hovered, "text");
125 | 
126 |   const handleSync = (text: { textRenderInfo: TextRenderInfo }) => {
127 |     if (text) setRenderInfo(text.textRenderInfo);
128 |   };
129 | 
130 |   const handleFocus = React.useCallback(
131 |     (e: React.FocusEvent<HTMLInputElement>) => {
132 |       e.nativeEvent.preventDefault();
133 |       setActive(true);
134 |       onFocus && onFocus(e);
135 |     },
136 |     [onFocus]
137 |   );
138 | 
139 |   const handleBlur = React.useCallback(
140 |     (e: React.FocusEvent<HTMLInputElement>) => {
141 |       setSelection([0, 0]);
142 |       setActive(false);
143 |       onBlur && onBlur(e);
144 |     },
145 |     [onBlur]
146 |   );
147 | 
148 |   const handleSelect = React.useCallback(
149 |     (e: React.SyntheticEvent<HTMLInputElement, Event>) => {
150 |       if (e.target instanceof HTMLInputElement) {
151 |         const { selectionStart, selectionEnd } = e.target;
152 | 
153 |         if (selectionStart === selectionEnd) {
154 |           setCaret(selectionStart);
155 |         } else {
156 |           setCaret(null);
157 |         }
158 | 
159 |         setSelection([selectionStart ?? 0, selectionEnd ?? 0]);
160 |         time.current = clock.elapsedTime;
161 |       }
162 | 
163 |       onSelect && onSelect(e);
164 |     },
165 |     [clock, onSelect]
166 |   );
167 | 
168 |   const handleChange = React.useCallback(
169 |     (e: React.ChangeEvent<HTMLInputElement>) => {
170 |       setContent(e.target.value);
171 |       time.current = clock.elapsedTime;
172 |       onChange && onChange(e);
173 |     },
174 |     [onChange, clock]
175 |   );
176 | 
177 |   const handleClick = React.useCallback(
178 |     (e: ThreeEvent<MouseEvent>) => {
179 |       if (!active) {
180 |         domRef.current?.focus();
181 |       }
182 | 
183 |       if (e.detail === 3) {
184 |         domRef.current?.select();
185 |       }
186 |     },
187 |     [active, domRef]
188 |   );
189 | 
190 |   const handleDoubleClick = React.useCallback(() => {
191 |     function isWhitespace(str?: string): boolean {
192 |       return str !== undefined && str.trim() === "";
193 |     }
194 | 
195 |     let start = 0;
196 |     let end = content.length;
197 | 
198 |     if (type === "password" || caret === null) {
199 |       domRef.current?.select();
200 |       return;
201 |     }
202 | 
203 |     for (let i = caret; i < content.length; i++) {
204 |       if (isWhitespace(content[i])) {
205 |         end = i;
206 |         break;
207 |       }
208 |     }
209 | 
210 |     for (let i = caret; i > 0; i--) {
211 |       if (isWhitespace(content[i])) {
212 |         start = i > 0 ? i + 1 : i;
213 |         break;
214 |       }
215 |     }
216 | 
217 |     domRef.current?.setSelectionRange(start, end, "none");
218 |   }, [caret, content, type, domRef]);
219 | 
220 |   const handlePointerDown = React.useCallback(
221 |     (e: ThreeEvent<PointerEvent>) => {
222 |       time.current = clock.elapsedTime;
223 | 
224 |       if (!renderInfo || !content || !textRef.current || !domRef.current) {
225 |         return;
226 |       }
227 | 
228 |       const point = textRef.current.worldToLocal(e.point);
229 |       const idx = getCaretAtPoint(renderInfo, point.x, point.y).charIndex;
230 |       setSelection([idx, idx]);
231 |       setCaret(idx);
232 |       domRef.current.setSelectionRange(idx, idx, "none");
233 |     },
234 |     [domRef, renderInfo, clock, content]
235 |   );
236 | 
237 |   const handlePointerMove = React.useCallback(
238 |     (e: ThreeEvent<PointerEvent>) => {
239 |       const buttons = e.buttons;
240 | 
241 |       // left click not held (i.e. not dragging)
242 |       const dragging = buttons === 1 || buttons === 3;
243 |       if (
244 |         !dragging ||
245 |         !renderInfo ||
246 |         !content ||
247 |         !textRef.current ||
248 |         !domRef.current ||
249 |         caret === null
250 |       ) {
251 |         return;
252 |       }
253 | 
254 |       const point = textRef.current.worldToLocal(e.point);
255 |       const idx = getCaretAtPoint(renderInfo, point.x, point.y).charIndex;
256 |       let start: number, end: number, dir: "forward" | "backward" | "none";
257 | 
258 |       if (idx < caret) {
259 |         start = idx;
260 |         end = caret;
261 |         dir = "backward";
262 |       } else if (idx > caret) {
263 |         start = caret;
264 |         end = idx;
265 |         dir = "forward";
266 |       } else {
267 |         start = end = idx;
268 |         dir = "none";
269 |       }
270 | 
271 |       setSelection([start, end]);
272 |       domRef.current.setSelectionRange(start, end, dir);
273 |     },
274 |     [domRef, renderInfo, caret, content]
275 |   );
276 | 
277 |   // EFFECTS
278 |   React.useLayoutEffect(() => {
279 |     root.current = ReactDOM.createRoot(domEl);
280 |     const curRoot = root.current;
281 | 
282 |     target?.appendChild(domEl);
283 | 
284 |     return () => {
285 |       target?.removeChild(domEl);
286 |       curRoot.unmount();
287 |     };
288 |   }, [domEl, target]);
289 | 
290 |   React.useLayoutEffect(() => {
291 |     root.current?.render(
292 |       <input
293 |         ref={domRef}
294 |         {...restProps}
295 |         onFocus={handleFocus}
296 |         onBlur={handleBlur}
297 |         onChange={handleChange}
298 |         onSelect={handleSelect}
299 |         style={{
300 |           position: "absolute",
301 |           left: "-1000vw",
302 |           transform: "translateX(-50%)",
303 |           width: `${10 * width}em`,
304 |           touchAction: "none",
305 |           pointerEvents: "none",
306 |           opacity: 0,
307 |         }}
308 |       />
309 |     );
310 |   });
311 | 
312 |   React.useEffect(() => {
313 |     if (!groupRef.current || !domRef.current) {
314 |       return;
315 |     }
316 | 
317 |     let pos: number | undefined = undefined;
318 |     const innerWidth = width - _padding.x * 2;
319 |     const [selectionStart, selectionEnd] = [
320 |       caretPositions[selection[0]] + groupRef.current.position.x,
321 |       caretPositions[selection[1]] + groupRef.current.position.x,
322 |     ];
323 | 
324 |     let left = 0;
325 |     const right = innerWidth;
326 | 
327 |     if (caret !== null) {
328 |       pos = caretPositions[caret] + groupRef.current.position.x;
329 |       if (caret > 0) {
330 |         // ensure there is always a character visible on the left
331 |         left += caretPositions[caret] - caretPositions[caret - 1];
332 |       }
333 |       if (pos === undefined || Number.isNaN(pos)) return;
334 |     } else {
335 |       const dir = domRef.current.selectionDirection;
336 |       if (selectionStart < left && dir === "backward") {
337 |         pos = selectionStart;
338 |       } else if (selectionEnd > right && dir === "forward") {
339 |         pos = selectionEnd;
340 |       }
341 |     }
342 | 
343 |     if (pos === undefined) return;
344 | 
345 |     if (pos > right) {
346 |       const dx = pos - right;
347 |       groupRef.current.position.x -= dx;
348 |     } else if (pos < left) {
349 |       const dx = left - pos;
350 |       groupRef.current.position.x += dx;
351 |     }
352 |   }, [_padding, width, padding, caret, caretPositions, selection, domRef]);
353 | 
354 |   // BLACK MAGIC
355 |   const CustomText: React.ReactElement | undefined = React.useMemo(() => {
356 |     const childrenProper = React.Children.toArray(children);
357 |     for (const child of childrenProper) {
358 |       if (typeof child === "string" || typeof child === "number") return;
359 | 
360 |       if ((child as React.ReactElement).type === InputText) {
361 |         const t = React.cloneElement(child as React.ReactElement, {
362 |           ref: textRef,
363 |           onSync: handleSync,
364 |           text: renderedContent,
365 |         });
366 | 
367 |         return t;
368 |       }
369 |     }
370 |   }, [children, renderedContent]);
371 | 
372 |   const color = React.useMemo(() => {
373 |     if (CustomText && CustomText.props.color) {
374 |       return CustomText.props.color;
375 |     }
376 | 
377 |     return "black";
378 |   }, [CustomText]);
379 | 
380 |   useFrame((_, delta) => {
381 |     if (!caretRef.current) return;
382 | 
383 |     const t = (clock.elapsedTime - time.current) % 2;
384 |     const opacity = t <= 1.25 ? 1 : 0;
385 | 
386 |     caretRef.current.material.opacity = damp(caretRef.current.material.opacity, opacity, 24, delta);
387 |   });
388 | 
389 |   return (
390 |     <group position={position} rotation={rotation} scale={scale}>
391 |       <Mask
392 |         id={1}
393 |         onClick={handleClick}
394 |         onDoubleClick={handleDoubleClick}
395 |         onPointerDown={handlePointerDown}
396 |         onPointerMove={handlePointerMove}
397 |       >
398 |         <planeGeometry args={[width - _padding.x, height]} />
399 |       </Mask>
400 | 
401 |       <group position={[-width / 2 + _padding.x, 0, 0]}>
402 |         <group ref={groupRef}>
403 |           <group renderOrder={3} position={[0, -(renderInfo?.capHeight ?? 0) / 2, 0]}>
404 |             <React.Suspense fallback={null}>
405 |               {CustomText ? (
406 |                 CustomText
407 |               ) : (
408 |                 <InputText ref={textRef} onSync={handleSync}>
409 |                   {renderedContent}
410 |                 </InputText>
411 |               )}
412 |             </React.Suspense>
413 |           </group>
414 | 
415 |           <group position-x={cursorWidth / 2}>
416 |             <mesh
417 |               ref={caretRef}
418 |               position={[caretPosition, 0, 0]}
419 |               visible={active && caret !== null}
420 |               renderOrder={3}
421 |               scale={[cursorWidth, fontSize, 1]}
422 |             >
423 |               <planeGeometry args={[1, 1]} />
424 |               <meshBasicMaterial color={color} transparent toneMapped={false} depthWrite={false} />
425 |             </mesh>
426 |           </group>
427 | 
428 |           <group
429 |             position={[(caretPositions[selection[0]] + caretPositions[selection[1]]) / 2, 0, 0]}
430 |           >
431 |             <mesh
432 |               scale-x={Math.abs(caretPositions[selection[0]] - caretPositions[selection[1]])}
433 |               renderOrder={2}
434 |             >
435 |               <planeGeometry args={[1, fontSize]} />
436 |               <meshBasicMaterial
437 |                 color={selectionColor}
438 |                 transparent
439 |                 toneMapped={false}
440 |                 opacity={1}
441 |                 depthWrite={false}
442 |                 {...stencil}
443 |               />
444 |             </mesh>
445 |           </group>
446 |         </group>
447 |       </group>
448 | 
449 |       <mesh
450 |         onPointerEnter={() => setHovered(true)}
451 |         onPointerLeave={() => setHovered(false)}
452 |         renderOrder={1}
453 |       >
454 |         <planeGeometry args={[width, height]} />
455 |         <meshBasicMaterial
456 |           color={backgroundColor}
457 |           transparent
458 |           opacity={backgroundOpacity}
459 |           depthWrite={false}
460 |         />
461 |       </mesh>
462 |     </group>
463 |   );
464 | });
465 | 
466 | Input.displayName = "Input";
467 | 
468 | export { Input };
469 | 


--------------------------------------------------------------------------------
/src/Textarea/Textarea.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as ReactDOM from "react-dom/client";
  3 | import { BufferGeometry, Group, Material, Mesh, Vector2 as Vector2Impl } from "three";
  4 | import { Color, ThreeEvent, Vector2, useFrame, useThree } from "@react-three/fiber";
  5 | import {
  6 |   TextRenderInfo,
  7 |   getCaretAtPoint as getCaretAtPointBuiltIn,
  8 |   getSelectionRects,
  9 | } from "troika-three-text";
 10 | import { TextareaText } from "./Text";
 11 | import { useFormContext } from "../Form";
 12 | import { Mask, useMask } from "@react-three/drei";
 13 | import Container from "./Container";
 14 | import { damp } from "../utils";
 15 | 
 16 | type Props = {
 17 |   /** width of the container */
 18 |   width?: number;
 19 | 
 20 |   backgroundColor?: Color;
 21 |   backgroundOpacity?: number;
 22 |   selectionColor?: Color;
 23 | 
 24 |   /** [left/right , top/bottom] in THREE units, respectively
 25 |    *
 26 |    * note that height is implicitly defined by the capHeight of the rendered
 27 |    * text. The cap height is dependant on both the `textProps.font` being used and the
 28 |    * `textProps.fontSize` value
 29 |    */
 30 |   padding?: Vector2;
 31 |   cursorWidth?: number;
 32 | } & Pick<JSX.IntrinsicElements["group"], "position" | "rotation" | "scale"> &
 33 |   Omit<JSX.IntrinsicElements["textarea"], "ref">;
 34 | 
 35 | type CaretPosition = {
 36 |   x: number;
 37 |   y: number;
 38 | };
 39 | 
 40 | const Textarea = React.forwardRef((props: Props, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
 41 |   const {
 42 |     position,
 43 |     rows = 4,
 44 |     rotation,
 45 |     scale,
 46 |     width = 1.5,
 47 |     backgroundColor = "lightgrey",
 48 |     backgroundOpacity = 0.3,
 49 |     padding,
 50 |     cursorWidth = 0.005,
 51 |     children,
 52 |     onChange,
 53 |     onFocus,
 54 |     onBlur,
 55 |     onSelect,
 56 |     ...restProps
 57 |   } = props;
 58 | 
 59 |   // REFS etc
 60 |   const domRef = React.useRef<HTMLTextAreaElement>(null!);
 61 |   React.useImperativeHandle(ref, () => domRef.current, [domRef]);
 62 |   const groupRef = React.useRef<Group>(null);
 63 |   const caretRef = React.useRef<Mesh<BufferGeometry, Material>>(null);
 64 |   const time = React.useRef<number>(0);
 65 |   const textRef = React.useRef<Mesh<BufferGeometry, Material>>();
 66 |   const formNode = useFormContext();
 67 |   const clock = useThree((s) => s.clock);
 68 |   const events = useThree((s) => s.events);
 69 |   const gl = useThree((s) => s.gl);
 70 |   const stencil = useMask(2);
 71 |   const root = React.useRef<ReactDOM.Root | null>(null);
 72 |   const target = (formNode?.current || events.connected || gl.domElement.parentNode) as HTMLElement;
 73 | 
 74 |   // STATE
 75 |   const [content, setContent] = React.useState<string>((props.defaultValue as string) ?? "");
 76 |   const [active, setActive] = React.useState<boolean>(false);
 77 |   const [renderInfo, setRenderInfo] = React.useState<TextRenderInfo | null>(null);
 78 |   const [caret, setCaret] = React.useState<number>(0);
 79 |   const [selection, setSelection] = React.useState<[number, number]>([0, 0]);
 80 |   const [domEl] = React.useState(() => document.createElement("div"));
 81 |   const _padding = React.useMemo(() => new Vector2Impl(), []);
 82 | 
 83 |   const fontSize = React.useMemo(() => {
 84 |     return renderInfo?.parameters?.fontSize ?? 0.07;
 85 |   }, [renderInfo]);
 86 | 
 87 |   if (padding && Array.isArray(padding)) {
 88 |     _padding.set(padding[0], padding[1]);
 89 |   } else {
 90 |     _padding.set(0.02, 0.02);
 91 |   }
 92 | 
 93 |   const caretPositions: CaretPosition[] = React.useMemo(() => {
 94 |     if (!renderInfo?.caretPositions) return [{ x: 0, y: 0 }];
 95 | 
 96 |     const { parameters } = renderInfo;
 97 | 
 98 |     if (!parameters?.text) return [{ x: 0, y: 0 }];
 99 | 
100 |     const rawPositions: number[] = Array.from(renderInfo.caretPositions);
101 |     const _caretPositions: CaretPosition[] = [];
102 | 
103 |     /**
104 |      * use RHS caret position of last character as 'last LHS caret position'
105 |      * the rawPositions array is in sets of 4 numbers as such:
106 |      *
107 |      * - ith character's left caret x pos (for left to right text)
108 |      * - ith character's right caret x pos (for right to left text)
109 |      * - ith character's caret bottom y position
110 |      * - ith character's caret top y position
111 |      *
112 |      * as we are manually adding this final caret, we must handle newlines
113 |      * ourselves
114 |      */
115 |     const isNewLine = parameters.text[parameters.text.length - 1] === "\n";
116 |     const lastCaretYTop = rawPositions[rawPositions.length - 1];
117 |     const lastCaretYBottom = rawPositions[rawPositions.length - 2];
118 |     const lastCaretY = (lastCaretYTop + lastCaretYBottom) / 2 - (isNewLine ? fontSize : 0);
119 |     const lastCaretX = isNewLine ? 0 : rawPositions[rawPositions.length - 3];
120 | 
121 |     for (let i = 0; i < rawPositions.length - 1; i += 4) {
122 |       const x = rawPositions[i];
123 |       const ytop = rawPositions[i + 3];
124 |       const ybottom = rawPositions[i + 2];
125 | 
126 |       _caretPositions.push({ x, y: (ytop + ybottom) / 2 });
127 |     }
128 | 
129 |     return [..._caretPositions, { x: lastCaretX, y: lastCaretY }];
130 |   }, [renderInfo, fontSize]);
131 | 
132 |   const caretPosition: CaretPosition = React.useMemo(() => {
133 |     if (content) {
134 |       return caretPositions[Math.min(caret, caretPositions.length - 1) || 0];
135 |     } else {
136 |       return { x: 0, y: 0 };
137 |     }
138 |   }, [caret, caretPositions, content]);
139 | 
140 |   const selectionRects = React.useMemo(
141 |     () => (renderInfo ? getSelectionRects(renderInfo, selection[0], selection[1]) : undefined),
142 |     [renderInfo, selection]
143 |   );
144 | 
145 |   const height = rows * fontSize + _padding.y * 2;
146 | 
147 |   // EVENTS
148 |   const handleSync = (text: { textRenderInfo: TextRenderInfo }) => {
149 |     if (!text) return;
150 | 
151 |     setRenderInfo(text.textRenderInfo);
152 |   };
153 | 
154 |   const handleFocus = React.useCallback(
155 |     (e: React.FocusEvent<HTMLTextAreaElement>) => {
156 |       e.preventDefault();
157 |       setActive(true);
158 |       onFocus && onFocus(e);
159 |     },
160 |     [onFocus]
161 |   );
162 | 
163 |   const handleBlur = React.useCallback(
164 |     (e: React.FocusEvent<HTMLTextAreaElement>) => {
165 |       setSelection([0, 0]);
166 |       setActive(false);
167 |       onBlur && onBlur(e);
168 |     },
169 |     [onBlur]
170 |   );
171 | 
172 |   const handleChange = React.useCallback(
173 |     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
174 |       if (e.target.value === null || e.target.value === undefined) return;
175 |       setContent(e.target.value);
176 |       time.current = clock.elapsedTime;
177 |       onChange && onChange(e);
178 |     },
179 |     [onChange, clock]
180 |   );
181 | 
182 |   const handleSelect = React.useCallback(
183 |     (e: React.SyntheticEvent<HTMLTextAreaElement, Event>) => {
184 |       if (e.target instanceof HTMLTextAreaElement) {
185 |         const { selectionStart, selectionEnd, selectionDirection } = e.target;
186 | 
187 |         if (selectionStart === selectionEnd) {
188 |           setCaret(selectionStart);
189 |         } else {
190 |           setCaret(selectionDirection === "backward" ? selectionStart : selectionEnd);
191 |         }
192 | 
193 |         setSelection([selectionStart, selectionEnd]);
194 |         time.current = clock.elapsedTime;
195 |       }
196 | 
197 |       onSelect && onSelect(e);
198 |     },
199 |     [clock, onSelect]
200 |   );
201 | 
202 |   const handleClick = React.useCallback(
203 |     (e: ThreeEvent<MouseEvent>) => {
204 |       if (!active) {
205 |         domRef.current.focus();
206 |       }
207 | 
208 |       if (e.detail === 3) {
209 |         domRef.current.select();
210 |       }
211 |     },
212 |     [active, domRef]
213 |   );
214 | 
215 |   const handleDoubleClick = React.useCallback(() => {
216 |     function isWhitespace(str?: string): boolean {
217 |       return str !== undefined && str.trim() === "";
218 |     }
219 | 
220 |     let start = 0,
221 |       end: number = content.length;
222 | 
223 |     for (let i = caret; i < content.length; i++) {
224 |       if (isWhitespace(content[i])) {
225 |         end = i;
226 |         break;
227 |       }
228 |     }
229 | 
230 |     for (let i = caret; i > 0; i--) {
231 |       if (isWhitespace(content[i])) {
232 |         start = i > 0 ? i + 1 : i;
233 |         break;
234 |       }
235 |     }
236 | 
237 |     domRef.current.setSelectionRange(start, end, "none");
238 |   }, [caret, content, domRef]);
239 | 
240 |   const handlePointerDown = React.useCallback(
241 |     (e: ThreeEvent<PointerEvent>) => {
242 |       time.current = clock.elapsedTime;
243 | 
244 |       if (!renderInfo || !textRef.current) {
245 |         return;
246 |       }
247 | 
248 |       const point = textRef.current.worldToLocal(e.point);
249 |       const idx = getCaretAtPointBuiltIn(renderInfo, point.x, point.y).charIndex;
250 |       domRef.current.setSelectionRange(idx, idx, "none");
251 |       setSelection([idx, idx]);
252 |       setCaret(idx);
253 |     },
254 |     [domRef, renderInfo, clock]
255 |   );
256 | 
257 |   const handlePointerMove = React.useCallback(
258 |     (e: ThreeEvent<PointerEvent>) => {
259 |       const buttons = e.buttons;
260 | 
261 |       // left click not held (i.e. not dragging)
262 |       const dragging = buttons === 1 || buttons === 3;
263 |       if (!dragging || !renderInfo || !content || !textRef.current) return;
264 | 
265 |       const point = textRef.current.worldToLocal(e.point);
266 |       const idx = getCaretAtPointBuiltIn(renderInfo, point.x, point.y).charIndex;
267 |       let start: number, end: number, dir: "forward" | "backward" | "none";
268 | 
269 |       if (idx < caret) {
270 |         start = idx;
271 |         end = caret;
272 |         dir = "backward";
273 |       } else if (idx > caret) {
274 |         start = caret;
275 |         end = idx;
276 |         dir = "forward";
277 |       } else {
278 |         start = end = idx;
279 |         dir = "none";
280 |       }
281 | 
282 |       setSelection([start, end]);
283 |       domRef.current.setSelectionRange(start, end, dir);
284 |     },
285 |     [domRef, renderInfo, caret, content]
286 |   );
287 | 
288 |   // EFFECTS
289 |   React.useLayoutEffect(() => {
290 |     root.current = ReactDOM.createRoot(domEl);
291 |     const curRoot = root.current;
292 | 
293 |     target?.appendChild(domEl);
294 | 
295 |     return () => {
296 |       target?.removeChild(domEl);
297 |       curRoot.unmount();
298 |     };
299 |   }, [domEl, target]);
300 | 
301 |   React.useLayoutEffect(() => {
302 |     root.current?.render(
303 |       <textarea
304 |         {...restProps}
305 |         ref={domRef}
306 |         rows={rows}
307 |         onFocus={handleFocus}
308 |         onBlur={handleBlur}
309 |         onChange={handleChange}
310 |         onSelect={handleSelect}
311 |         wrap="hard"
312 |         style={{
313 |           position: "absolute",
314 |           touchAction: "none",
315 |           pointerEvents: "none",
316 |           fontFamily: "r3f-input",
317 |           fontSize: `${fontSize * 500}px`,
318 |           width: `${(width - _padding.x * 2) * 500}px`,
319 |           left: "-1000vw",
320 |           opacity: 0,
321 |         }}
322 |       />
323 |     );
324 |   });
325 | 
326 |   React.useEffect(() => {
327 |     if (!renderInfo?.parameters?.font) return;
328 | 
329 |     // TODO: figure out how to get proper font-name
330 |     const f = new FontFace("r3f-input", `url(${renderInfo?.parameters.font})`);
331 |     document.fonts.add(f);
332 |   }, [renderInfo]);
333 | 
334 |   React.useEffect(() => {
335 |     if (!caretPosition || !groupRef.current) return;
336 | 
337 |     const pos = caretPosition.y + groupRef.current.position.y;
338 |     const top = 0;
339 |     const bottom = -(height - fontSize) + _padding.y * 2;
340 | 
341 |     if (pos > top) {
342 |       const dy = pos - top;
343 |       groupRef.current.position.y -= dy;
344 |     } else if (pos < bottom) {
345 |       const dy = bottom - pos;
346 |       groupRef.current.position.y += dy;
347 |     }
348 |   }, [caretPosition, _padding, height, fontSize]);
349 | 
350 |   // BLACK MAGIC
351 |   const CustomText: React.ReactElement | undefined = React.useMemo(() => {
352 |     const childrenProper = React.Children.toArray(children);
353 | 
354 |     for (const child of childrenProper) {
355 |       if ((child as React.ReactElement).type === TextareaText) {
356 |         return React.cloneElement(child as React.ReactElement, {
357 |           ref: textRef,
358 |           onSync: handleSync,
359 |           text: content || props.placeholder,
360 |           maxWidth: width - _padding.x * 2,
361 |         });
362 |       }
363 |     }
364 |   }, [children, content, width, _padding, props.placeholder]);
365 | 
366 |   const color = React.useMemo(() => {
367 |     if (CustomText && CustomText.props.color) {
368 |       return CustomText.props.color;
369 |     }
370 |     return "black";
371 |   }, [CustomText]);
372 | 
373 |   useFrame((_, delta) => {
374 |     if (!caretRef.current) return;
375 | 
376 |     const t = (clock.elapsedTime - time.current) % 2;
377 |     const opacity = t <= 1.25 ? 1 : 0;
378 | 
379 |     caretRef.current.material.opacity = damp(caretRef.current.material.opacity, opacity, 24, delta);
380 |   });
381 | 
382 |   return (
383 |     <group position={position} rotation={rotation} scale={scale}>
384 |       <group position-y={-height / 2 + fontSize / 2 + _padding.y}>
385 |         <Mask
386 |           id={2}
387 |           onClick={handleClick}
388 |           onDoubleClick={handleDoubleClick}
389 |           onPointerDown={handlePointerDown}
390 |           onPointerMove={handlePointerMove}
391 |         >
392 |           <planeGeometry args={[width - _padding.x, height - _padding.y]} />
393 |         </Mask>
394 | 
395 |         <Container
396 |           width={width}
397 |           height={height}
398 |           backgroundColor={backgroundColor}
399 |           backgroundOpacity={backgroundOpacity}
400 |         />
401 |       </group>
402 | 
403 |       <group ref={groupRef}>
404 |         <group position={[-width / 2 + _padding.x, 0, 0]}>
405 |           <group renderOrder={3} position={[0, -(renderInfo?.capHeight ?? 0) / 2, 0]}>
406 |             {CustomText ? (
407 |               CustomText
408 |             ) : (
409 |               <TextareaText
410 |                 ref={textRef}
411 |                 onSync={handleSync as (troika: unknown) => void}
412 |                 color={color}
413 |                 text={content || props.placeholder}
414 |                 maxWidth={width - _padding.x * 2}
415 |               />
416 |             )}
417 |           </group>
418 | 
419 |           <group position-x={cursorWidth / 2}>
420 |             <mesh
421 |               ref={caretRef}
422 |               position={[caretPosition?.x, caretPosition?.y, 0]}
423 |               visible={active && caret !== null}
424 |               renderOrder={3}
425 |               scale-x={cursorWidth}
426 |             >
427 |               <planeGeometry args={[1, fontSize]} />
428 |               <meshBasicMaterial color={color} transparent toneMapped={false} depthWrite={false} />
429 |             </mesh>
430 |           </group>
431 | 
432 |           <group position-y={renderInfo?.descender}>
433 |             {selectionRects?.map((rect, idx: number) => {
434 |               const w = rect.right - rect.left;
435 |               const h = rect.top - rect.bottom;
436 | 
437 |               const x = (rect.right + rect.left) / 2;
438 |               const y = (rect.top + rect.bottom) / 2;
439 |               return (
440 |                 <mesh key={idx} position={[x, y, 0]} renderOrder={2}>
441 |                   <planeGeometry args={[w, h]} />
442 |                   <meshBasicMaterial
443 |                     color="#7777ff"
444 |                     transparent
445 |                     toneMapped={false}
446 |                     opacity={1}
447 |                     depthWrite={false}
448 |                     {...stencil}
449 |                   />
450 |                 </mesh>
451 |               );
452 |             })}
453 |           </group>
454 |         </group>
455 |       </group>
456 |     </group>
457 |   );
458 | });
459 | 
460 | Textarea.displayName = "Textarea";
461 | 
462 | export { Textarea };
463 | 


--------------------------------------------------------------------------------