@hep-code-runner/react 1.0.0 → 1.2.0

package/README.md

@@ -107,3 +107,93 @@ function App() {
 - react: ^16.8.0 || ^17.0.0 || ^18.0.0
 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 - prismjs: ^1.30.0
+
+## CodeRunnerDialog 弹窗组件
+
+提供弹窗模式的代码执行器，支持受控和非受控模式。
+
+### 引入
+
+```jsx
+import { CodeRunnerDialog } from "@hep-code-runner/react";
+```
+
+### 受控模式
+
+```jsx
+import { useState } from "react";
+import { CodeRunnerDialog } from "@hep-code-runner/react";
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setVisible(true)}>打开弹窗</button>
+
+      <CodeRunnerDialog
+        open={visible}
+        onClose={() => setVisible(false)}
+        title="代码执行器"
+        width={800}
+        footer={
+          <>
+            <button onClick={() => setVisible(false)}>取消</button>
+            <button onClick={handleSave}>保存</button>
+            <button onClick={handleInsert}>插入代码</button>
+          </>
+        }
+      />
+    </>
+  );
+}
+```
+
+### 非受控模式
+
+```jsx
+import { useRef } from "react";
+import { CodeRunnerDialog } from "@hep-code-runner/react";
+
+function App() {
+  const dialogRef = useRef(null);
+
+  return (
+    <>
+      <button onClick={() => dialogRef.current?.open()}>打开弹窗</button>
+
+      <CodeRunnerDialog
+        ref={dialogRef}
+        title="代码执行器"
+        footer={
+          <>
+            <button onClick={() => dialogRef.current?.close()}>取消</button>
+            <button onClick={handleInsert}>插入代码</button>
+          </>
+        }
+      />
+    </>
+  );
+}
+```
+
+### Props 属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| open | boolean | - | 控制显示隐藏（受控模式） |
+| defaultOpen | boolean | false | 初始显示状态（非受控模式） |
+| title | string | '代码执行器' | 弹窗标题 |
+| width | string \| number | 800 | 弹窗宽度 |
+| onClose | () => void | - | 关闭回调 |
+| footer | ReactNode | - | 底部自定义内容 |
+| theme | 'light' \| 'dark' | 'light' | 主题 |
+
+其他 Props 会透传给内部 CodeRunner 组件。
+
+### Ref 方法
+
+| 方法 | 说明 |
+|------|------|
+| open() | 打开弹窗 |
+| close() | 关闭弹窗 |

package/dist/index.d.ts

@@ -1,10 +1,27 @@
 import { default as default_2 } from 'react';
 import { ExecuteResult } from '@hep-code-runner/core';
+import { ReactNode } from 'react';
 
 declare const CodeRunner: default_2.FC<CodeRunnerProps>;
 export { CodeRunner }
 export default CodeRunner;
 
+export declare const CodeRunnerDialog: default_2.ForwardRefExoticComponent<CodeRunnerDialogProps & default_2.RefAttributes<CodeRunnerDialogRef>>;
+
+export declare interface CodeRunnerDialogProps extends Omit<CodeRunnerProps, "theme"> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    title?: string;
+    width?: string | number;
+    onClose?: () => void;
+    footer?: ReactNode;
+    theme?: "light" | "dark";
+}
+
+export declare interface CodeRunnerDialogRef {
+    close: () => void;
+}
+
 export declare interface CodeRunnerProps {
     pistonUrl?: string;
     language?: string;