feat(@lexical/devtools): Added DevTools panel + shared state

facebook · Mar 20, 2024 · 4aa3be8 · 4aa3be8
1 parent b1caaee
commit 4aa3be8
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 0 deletions.
diff --git a/packages/lexical-devtools/entrypoints/devtools-panel/App.tsx b/packages/lexical-devtools/entrypoints/devtools-panel/App.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useState} from 'react';
+import * as React from 'react';
+
+import lexicalLogo from '/lexical.svg';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://lexical.dev" target="_blank">
+          <img src={lexicalLogo} className="logo" alt="Lexical logo" />
+        </a>
+      </div>
+      <div className="card">
+        <button onClick={() => setCount((c) => c + 1)}>count is {count}</button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+    </>
+  );
+}
+
+export default App;
diff --git a/packages/lexical-devtools/entrypoints/devtools-panel/index.html b/packages/lexical-devtools/entrypoints/devtools-panel/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/lexical-devtools/entrypoints/devtools-panel/main.tsx b/packages/lexical-devtools/entrypoints/devtools-panel/main.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/packages/lexical-devtools/entrypoints/devtools/index.html b/packages/lexical-devtools/entrypoints/devtools/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="./main.ts"></script>
+  </head>
+</html>
diff --git a/packages/lexical-devtools/entrypoints/devtools/main.ts b/packages/lexical-devtools/entrypoints/devtools/main.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// Create the panel which appears within the browser devtools
+browser.devtools.panels.create(
+  'Lexical',
+  'icon/128.png',
+  'devtools-panel.html',
+);