Release @lexical-devtools/react v0.1.11 (#8)

* Update to `v0.1.11`

* Transpile `@lexical-devtools/utils` when bundling `@lexical-devtools/react`

apps/extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "version": "0.1.0",
   "name": "lexical-devtools",
-  "description": "Lexical developer tools",
+  "description": "Lexical DevTools",
   "permissions": ["scripting", "activeTab", "webNavigation", "tabs"],
   "host_permissions": [
     "*://localhost/*",

apps/extension/pages/devtools-panel/app.tsx

@@ -13,6 +13,7 @@ import PanelRightCloseIcon from "./icons/panel-right-close-icon";
 import PanelRightOpenIcon from "./icons/panel-right-open-icon";
 import SelectionPanel from "./selection-panel";
 import AlertCircledIcon from "./icons/alert-circled-icon";
+import InfoCircledIcon from "./icons/info-circled-icon";
 
 export default function App() {
   const revalidate = useRevalidateEditors();
@@ -104,7 +105,7 @@ export default function App() {
           <AlertCircledIcon className="w-7 h-7" />
           <h1 className="font-semibold text-sm">Could not load editors</h1>
         </div>
-        <p className="text-[11px] w-full flex items-center justify-center p-4 text-[rgb(71_71_71)] dark:text-[rgb(143_143_143)] border-t border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)]">
+        <p className="text-[11px] w-full text-center p-4 text-[rgb(71_71_71)] dark:text-[rgb(143_143_143)] border-t border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)]">
           Lexical DevTools can only access Lexical editors on applications that
           are running on a localhost environment.
         </p>
@@ -141,11 +142,14 @@ function Panel({ editors }: { editors: SerializedEditorState[] }) {
 
   if (editors.length === 0) {
     return (
-      <div className="h-full w-full flex flex-col gap-2 items-center justify-center p-4">
-        <h1 className="font-semibold text-sm">No editors found.</h1>
-        <p className="text-xs text-[rgb(71_71_71)] dark:text-[rgb(143_143_143)]">
-          To integrate developer tools for Lexical.js in your React application,
-          install <code>@lexical-devtools/react</code> and import{" "}
+      <div className="h-screen bg-white dark:bg-[rgb(40_40_40)] text-black dark:text-white flex flex-col items-center justify-between gap-2">
+        <div className="flex flex-1 flex-col items-center justify-center gap-2">
+          <InfoCircledIcon className="w-7 h-7" />
+          <h1 className="font-semibold text-sm">No editors found</h1>
+        </div>
+        <p className="text-[11px] w-full text-center p-4 text-[rgb(71_71_71)] dark:text-[rgb(143_143_143)] border-t border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)]">
+          To use Lexical DevTools in your React application, install{" "}
+          <code>@lexical-devtools/react</code> and import{" "}
           <code>{`<DevtoolsPlugin />`}</code> inside your{" "}
           <code>{`LexicalComposer`}</code> component.
         </p>

apps/extension/pages/devtools-panel/icons/info-circled-icon.tsx

@@ -0,0 +1,40 @@
+/**
+ * ISC License
+ *
+ * Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of
+ * Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose
+ * with or without fee is hereby granted, provided that the above copyright notice
+ * and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD
+ * TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS.
+ * IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL
+ * DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
+ * IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+ * IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+import { SVGAttributes } from "react";
+
+export default function InfoCircledIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4" />
+      <path d="M12 8h.01" />
+    </svg>
+  );
+}

apps/extension/pages/devtools-panel/selection-panel.tsx

@@ -6,8 +6,8 @@ import {
   SerializedSelection,
 } from "@lexical-devtools/utils";
 import * as Collapsible from "./collapsible";
-import TriangleRightIcon from "./icons/triangle-right-icon";
 import TextSelectionOffIcon from "./icons/text-selection-off-icon";
+import ChevronRightIcon from "./icons/chevron-right-icon";
 
 const TreeContext = createContext<SerializedRootNode | null>(null);
 
@@ -91,31 +91,31 @@ function RangeTable({
 
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className="w-full">
-      <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center bg-[rgb(238_242_249)] dark:bg-[rgb(42_44_48)] border-b border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)] h-[25px]">
-        <TriangleRightIcon className="group-data-[state=open]:rotate-90 h-4 w-4" />
-        <span className="flex items-center gap-2 text-[11px]">Range</span>
+      <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center justify-between bg-[rgb(238_242_249)] dark:bg-[rgb(42_44_48)] border-b border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)] h-[25px] px-2">
+        <span>Range</span>
+        <ChevronRightIcon className="group-data-[state=open]:rotate-90 h-3 w-3 stroke-current stroke-1" />
       </Collapsible.Trigger>
 
-      <Collapsible.Content className="w-full bg-[rgb(255_255_255)] dark:bg-[rgb(40_40_40)] text-[11px]">
+      <Collapsible.Content className="w-full bg-[rgb(255_255_255)] dark:bg-[rgb(40_40_40)]">
         {/* Anchor */}
         <Collapsible.Root
           open={anchorOpen}
           onOpenChange={setAnchorOpen}
-          className="w-full pl-2"
+          className="w-full"
         >
-          <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center py-[2px]">
-            <TriangleRightIcon className="group-data-[state=open]:rotate-90 h-4 w-4" />
+          <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center h-[25px] px-2">
+            <ChevronRightIcon className="group-data-[state=open]:rotate-90 h-3 w-3 stroke-current stroke-1" />
             <span>Anchor</span>
           </Collapsible.Trigger>
 
           <Collapsible.Content className="w-full bg-[rgb(255_255_255)] dark:bg-[rgb(40_40_40)] pl-5">
-            <dl className="flex flex-col">
-              <div className="grid grid-cols-2 gap-2 py-[2px]">
+            <dl className="flex flex-col px-1">
+              <div className="grid grid-cols-2 gap-2 min-h-[20px] py-[2px]">
                 <dt>Key</dt>
                 <dl>{anchor.key}</dl>
               </div>
 
-              <div className="grid grid-cols-2 gap-2 py-[2px]">
+              <div className="grid grid-cols-2 gap-2 min-h-[20px] py-[2px]">
                 <dt>Offset</dt>
                 <dl>{anchor.offset}</dl>
               </div>
@@ -127,21 +127,21 @@ function RangeTable({
         <Collapsible.Root
           open={focusOpen}
           onOpenChange={setFocusOpen}
-          className="w-full pl-2"
+          className="w-full"
         >
-          <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center py-[2px]">
-            <TriangleRightIcon className="group-data-[state=open]:rotate-90 h-4 w-4" />
+          <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center h-[25px] px-2">
+            <ChevronRightIcon className="group-data-[state=open]:rotate-90 h-3 w-3 stroke-current stroke-1" />
             <span>Focus</span>
           </Collapsible.Trigger>
 
           <Collapsible.Content className="w-full bg-[rgb(255_255_255)] dark:bg-[rgb(40_40_40)] pl-5">
-            <dl className="flex flex-col">
-              <div className="grid grid-cols-2 gap-2 py-[2px]">
+            <dl className="flex flex-col px-1">
+              <div className="grid grid-cols-2 gap-2 min-h-[20px] py-[2px]">
                 <dt>Key</dt>
                 <dl>{focus.key}</dl>
               </div>
 
-              <div className="grid grid-cols-2 gap-2 py-[2px]">
+              <div className="grid grid-cols-2 gap-2 min-h-[20px] py-[2px]">
                 <dt>Offset</dt>
                 <dl>{focus.offset}</dl>
               </div>
@@ -163,12 +163,12 @@ function NodesTable({
 
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className="w-full">
-      <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center bg-[rgb(238_242_249)] dark:bg-[rgb(42_44_48)] border-b border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)] h-[25px]">
-        <TriangleRightIcon className="group-data-[state=open]:rotate-90 h-4 w-4" />
-        <span className="flex items-center gap-2 text-[11px]">Nodes</span>
+      <Collapsible.Trigger className="group flex flex-row w-full gap-1 items-center justify-between bg-[rgb(238_242_249)] dark:bg-[rgb(42_44_48)] border-b border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)] h-[25px] px-2">
+        <span>Nodes</span>
+        <ChevronRightIcon className="group-data-[state=open]:rotate-90 h-3 w-3 stroke-current stroke-1" />
       </Collapsible.Trigger>
 
-      <Collapsible.Content className="w-full bg-[rgb(255_255_255)] dark:bg-[rgb(40_40_40)] text-[11px]">
+      <Collapsible.Content className="w-full bg-[rgb(255_255_255)] dark:bg-[rgb(40_40_40)]">
         <table className="w-full text-left table-fixed border-b border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)]">
           <thead className="border-b border-[rgb(214_226_251)] dark:border-[rgb(94_94_94)]">
             <tr>

apps/extension/tsconfig.json

@@ -7,8 +7,8 @@
     "isolatedModules": false,
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "moduleResolution": "node",
-    "module": "esnext",
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext",
     "resolveJsonModule": true,
     "strict": true,
     "target": "esnext",

packages/react/CHANGELOG.md

@@ -1,7 +1,7 @@
 # @lexical-devtools/react
 
-## 0.1.0
+## 0.1.11
 
 ### Minor Changes
 
-- - Export `DevToolsPlugin` component.
+- Export `DevToolsPlugin` component.

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lexical-devtools/react",
   "description": "React plugin for Lexical DevTools",
-  "version": "0.1.0",
+  "version": "0.1.11",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -17,16 +17,15 @@
     "build": "tsup",
     "dev": "tsup --watch"
   },
-  "dependencies": {
-    "@lexical-devtools/utils": "*"
-  },
   "peerDependencies": {
+    "lexical": "^0.16.0",
     "@lexical/react": "^0.16.0",
     "react": ">=18.x"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.268",
     "@types/react": "^18.3.2",
+    "@lexical-devtools/utils": "*",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   }

packages/utils/package.json

@@ -4,19 +4,8 @@
   "version": "0.0.0",
   "license": "MIT",
   "private": true,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
+    ".": "./src/index.ts"
   },
   "peerDependencies": {
     "lexical": "^0.16.0"