@forge-kit/plugin-json-viewer 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forge-kit/plugin-json-viewer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "entry": "./dist/app.js",
   "publishConfig": {
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@forge-kit/component": "workspace:*",
-    "@forge-kit/forge-kit": "workspace:*",
+    "@forge-kit/types": "workspace:*",
     "@forge-kit/icons": "workspace:*",
     "classnames": "^2.5.1",
     "jsonc-parser": "^3.3.1",

package/src/App.less

@@ -38,6 +38,7 @@ html, body, #root {
         padding-top: var(--space-3);
         flex: 1;
         overflow: hidden;
+        height: max-content;
       }
     }
   }

package/src/App.tsx

@@ -179,7 +179,13 @@ const colorConfig: ColorConfig = {
     null: "orange",
 }
 
-export const App: React.FC = () => {
+interface AppProps {
+    themeProps?: React.ComponentProps<typeof Theme>
+}
+
+export const App: React.FC<AppProps> = (props) => {
+
+    const {themeProps} = props
 
     const [json, setJson] = useState("");
 
@@ -223,8 +229,7 @@ export const App: React.FC = () => {
     )
 
     return (
-        <Theme className="forge-kit-plugin-json-viewer" accentColor="gray" appearance="dark" radius="full"
-               apply={import.meta.env.DEV}>
+        <Theme className="forge-kit-plugin-json-viewer" accentColor="gray" appearance="dark" radius="full" {...themeProps}>
             <Flex className="forge-kit-plugin-json-viewer-content" gap="4">
                 <CardLayout className="text-area-card" title="SOURCE INPUT" extra={sourceInputExtra}>
                     <TextArea className="text-area" size="3" value={json} onChange={handleTextAreaChange}/>

package/src/main.tsx

@@ -1,6 +1,6 @@
 import {StrictMode} from 'react'
 import ReactDOM from "react-dom/client";
-import {definePlugin} from '@forge-kit/forge-kit'
+import {definePlugin} from '@forge-kit/types'
 import {App} from './App.tsx'
 
 let rootInstance: ReturnType<typeof ReactDOM.createRoot> | null = null;
@@ -10,11 +10,11 @@ const plugin = definePlugin({
     name: 'JSON 解析工具',
     icon: `${import.meta.env.BASE_URL}icon.svg`,
     description: "JSON 解析工具",
-    mount: (container: any) => {
+    mount: (container: any, props: Record<string, any> = {}) => {
         rootInstance = ReactDOM.createRoot(container);
         rootInstance.render(
             <StrictMode>
-                <App/>
+                <App {...props}/>
             </StrictMode>,
         )
     },