Create @lexical-devtools/react package (#7)

* Create `@lexical-devtools/react` package.

* Add CHANGELOG.md for `@lexical-devtools/react`

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["example", "lexical-devtools-extension"]
+}

README.md

@@ -1,81 +1,14 @@
-# Turborepo starter
+# Lexical developer tools
 
-This is an official starter Turborepo.
+Lexical DevTools is a browser devtools extension that lets you inspect your Lexical.js editor state.
 
-## Using this example
+To get started, install Lexical Developer Tools from the [Chrome Web Store](https://chromewebstore.google.com/detail/lexical-devtools/dmbopeepjkdlplkjcjbnfiikajiddhnd).
 
-Run the following command:
-
-```sh
-npx create-turbo@latest
-```
-
-## What's inside?
-
-This Turborepo includes the following packages/apps:
-
-### Apps and Packages
-
-- `docs`: a [Next.js](https://nextjs.org/) app
-- `web`: another [Next.js](https://nextjs.org/) app
-- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
-- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
-
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
-
-### Utilities
-
-This Turborepo has some additional tools already setup for you:
-
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
-
-### Build
-
-To build all apps and packages, run the following command:
-
-```
-cd my-turborepo
-pnpm build
-```
-
-### Develop
-
-To develop all apps and packages, run the following command:
-
-```
-cd my-turborepo
-pnpm dev
-```
-
-### Remote Caching
-
-Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
-
-By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
-
-```
-cd my-turborepo
-npx turbo login
-```
-
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
-
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
-
-```
-npx turbo link
-```
-
-## Useful Links
-
-Learn more about the power of Turborepo:
-
-- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
-- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
-- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
-- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
-- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
-- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
+<a href="https://chromewebstore.google.com/detail/lexical-devtools/dmbopeepjkdlplkjcjbnfiikajiddhnd">
+  <kbd>
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/nimeshnayaju/lexical-devtools/assets/35807215/4acd42f3-362b-4523-988a-fea9914e9af9">
+      <img alt="Screenshot of Lexical DevTools" src="https://github.com/nimeshnayaju/lexical-devtools/assets/35807215/f79c7551-8f98-42cc-b11f-c37788225dc0">
+    </picture>
+  </kbd>
+</a>

apps/example/app/lexical/devtools-plugin.tsx

@@ -5,15 +5,15 @@ import { LexicalEditor } from "lexical";
 
 const EXTENSION_ID = "dmbopeepjkdlplkjcjbnfiikajiddhnd";
 
-export default function DevtoolsPlugin() {
+export default function DevToolsPlugin() {
   if (typeof chrome === "undefined") return null;
 
   if (chrome.runtime === undefined) return null;
 
-  return <DevtoolsPluginImpl />;
+  return <DevToolsPluginImpl />;
 }
 
-function DevtoolsPluginImpl() {
+function DevToolsPluginImpl() {
   const editor = useComposer();
   const root = useRootElement(editor);
   const key = editor.getKey();