@hep-code-runner/react 1.1.0 → 1.3.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() | 关闭弹窗 |