diff --git a/apps/extension/manifest.json b/apps/extension/manifest.json index 9a15b4e..5b7dcec 100644 --- a/apps/extension/manifest.json +++ b/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/*", diff --git a/apps/extension/pages/devtools-panel/app.tsx b/apps/extension/pages/devtools-panel/app.tsx index d1e3dd6..4675e60 100644 --- a/apps/extension/pages/devtools-panel/app.tsx +++ b/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() {

Could not load editors

-

+

Lexical DevTools can only access Lexical editors on applications that are running on a localhost environment.

@@ -141,11 +142,14 @@ function Panel({ editors }: { editors: SerializedEditorState[] }) { if (editors.length === 0) { return ( -
-

No editors found.

-

- To integrate developer tools for Lexical.js in your React application, - install @lexical-devtools/react and import{" "} +

+
+ +

No editors found

+
+

+ To use Lexical DevTools in your React application, install{" "} + @lexical-devtools/react and import{" "} {``} inside your{" "} {`LexicalComposer`} component.

diff --git a/apps/extension/pages/devtools-panel/icons/info-circled-icon.tsx b/apps/extension/pages/devtools-panel/icons/info-circled-icon.tsx new file mode 100644 index 0000000..3e4c4a2 --- /dev/null +++ b/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) { + return ( + + + + + + ); +} diff --git a/apps/extension/pages/devtools-panel/selection-panel.tsx b/apps/extension/pages/devtools-panel/selection-panel.tsx index 6fcbafb..1753db3 100644 --- a/apps/extension/pages/devtools-panel/selection-panel.tsx +++ b/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(null); @@ -91,31 +91,31 @@ function RangeTable({ return ( - - - Range + + Range + - + {/* Anchor */} - - + + Anchor -
-
+
+
Key
{anchor.key}
-
+
Offset
{anchor.offset}
@@ -127,21 +127,21 @@ function RangeTable({ - - + + Focus -
-
+
+
Key
{focus.key}
-
+
Offset
{focus.offset}
@@ -163,12 +163,12 @@ function NodesTable({ return ( - - - Nodes + + Nodes + - + diff --git a/apps/extension/tsconfig.json b/apps/extension/tsconfig.json index 42db7a4..6dea708 100644 --- a/apps/extension/tsconfig.json +++ b/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", diff --git a/package-lock.json b/package-lock.json index cb4ce61..574d06d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17874,7 +17874,7 @@ }, "packages/react": { "name": "@lexical-devtools/react", - "version": "0.0.0", + "version": "0.1.0", "license": "MIT", "dependencies": { "@lexical-devtools/utils": "*" @@ -17892,7 +17892,7 @@ }, "packages/utils": { "name": "@lexical-devtools/utils", - "version": "0.0.1", + "version": "0.0.0", "license": "MIT", "devDependencies": { "@types/chrome": "^0.0.268", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index b6c2052..8c20da2 100644 --- a/packages/react/CHANGELOG.md +++ b/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. diff --git a/packages/react/package.json b/packages/react/package.json index d9b6dc3..dcbe1c0 100644 --- a/packages/react/package.json +++ b/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" } diff --git a/packages/utils/package.json b/packages/utils/package.json index 2f9f567..817f9bd 100644 --- a/packages/utils/package.json +++ b/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" diff --git a/packages/utils/tsup.config.ts b/packages/utils/tsup.config.ts deleted file mode 100644 index 4866434..0000000 --- a/packages/utils/tsup.config.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { defineConfig } from "tsup"; - -export default defineConfig({ - entryPoints: ["src/index.ts"], - outDir: "dist", - format: ["esm", "cjs"], - tsconfig: "./tsconfig.json", - target: "es2018", - minify: false, - minifySyntax: false, - minifyWhitespace: false, - minifyIdentifiers: false, - sourcemap: true, - clean: true, - dts: true, -});