ds-markdown 0.1.6 → 0.1.7-beta.0

package/README.en.md

@@ -38,6 +38,7 @@ A React component designed specifically for modern AI applications, providing sm
 - [🎛️ Timer Mode Details](#️-timer-mode-details)
 - [💡 Practical Examples](#-practical-examples)
 - [🔧 Best Practices](#-best-practices)
+- [ConfigProvider Internationalization (i18n)](<#ConfigProvider-Internationalization-(i18n)>)
 
 ---
 
@@ -1102,3 +1103,111 @@ import { MarkdownCMDRef } from 'ds-markdown';
 const ref = useRef<MarkdownCMDRef>(null);
 // Complete TypeScript type hints
 ```
+
+## ConfigProvider Internationalization (i18n)
+
+ConfigProvider is a component provided by ds-markdown for managing internationalized text in your application.
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { ConfigProvider } from 'ds-markdown';
+import zhCN from 'ds-markdown/i18n/zh';
+
+const App: React.FC = () => {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <YourApp />
+    </ConfigProvider>
+  );
+};
+```
+
+### Available Locales
+
+#### Chinese (zhCN)
+
+```tsx
+import zhCN from 'ds-markdown/i18n/zh';
+```
+
+#### English (enUS)
+
+```tsx
+import enUS from 'ds-markdown/i18n/en';
+```
+
+### Using Locale in Components
+
+Use the `useLocale` hook to get the current locale:
+
+```tsx
+import React from 'react';
+import { useLocale } from 'ds-markdown';
+
+const MyComponent: React.FC = () => {
+  const locale = useLocale();
+
+  return (
+    <div>
+      <button>{locale.codeBlock.copy}</button>
+      <span>{locale.codeBlock.copied}</span>
+      <button>{locale.codeBlock.download}</button>
+    </div>
+  );
+};
+```
+
+### Locale Structure
+
+Currently supported locale fields:
+
+```typescript
+interface Locale {
+  codeBlock: {
+    copy: string;
+    copied: string;
+    download: string;
+  };
+  [key: string]: string;
+}
+```
+
+### Full Example
+
+```tsx
+import React from 'react';
+import { ConfigProvider, useLocale } from 'ds-markdown';
+import zhCN from 'ds-markdown/i18n/zh';
+
+const ExampleComponent: React.FC = () => {
+  const locale = useLocale();
+
+  return (
+    <div>
+      <h2>i18n Example</h2>
+      <p>Copy button: {locale.codeBlock.copy}</p>
+      <p>Copied tip: {locale.codeBlock.copied}</p>
+      <p>Download button: {locale.codeBlock.download}</p>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <ExampleComponent />
+    </ConfigProvider>
+  );
+};
+
+export default App;
+```
+
+### Notes
+
+1. `ConfigProvider` must wrap components that use `useLocale`.
+2. The locale object is memoized to avoid unnecessary re-renders.
+3. You can extend the locale object with custom fields.
+4. If `ConfigProvider` is not provided, the default locale is Chinese.

package/README.md

@@ -9,7 +9,7 @@
 [![npm version](https://img.shields.io/npm/v/ds-markdown)](https://www.npmjs.com/package/ds-markdown)
 [![npm downloads](https://img.shields.io/npm/dm/ds-markdown.svg)](https://www.npmjs.com/package/ds-markdown)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/ds-markdown)](https://bundlephobia.com/package/ds-markdown)
-[![React](https://img.shields.io/badge/React-16.8+-blue)](https://react.dev)
+[![React](https://img.shields.io/badge/React-18.0.0+-blue)](https://react.dev)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
 
 [📖 在线演示](https://onshinpei.github.io/ds-markdown/)
@@ -67,6 +67,7 @@
 - [🔌 插件系统](#-插件系统)
 - [🎛️ 定时器模式详解](#️-定时器模式详解)
 - [💡 实战示例](#-实战示例)
+- [多语言配置](#-多语言配置)
 - [🔧 最佳实践](#-最佳实践)
 
 ---
@@ -955,3 +956,111 @@ import { MarkdownCMDRef } from 'ds-markdown';
 const ref = useRef<MarkdownCMDRef>(null);
 // 完整的 TypeScript 类型提示
 ```
+
+## 多语言配置
+
+ConfigProvider 是 ds-markdown 提供的多语言配置组件，用于管理应用中的国际化文本。
+
+### 基本用法
+
+```tsx
+import React from 'react';
+import { ConfigProvider } from 'ds-markdown';
+import zhCN from 'ds-markdown/i18n/zh';
+
+const App: React.FC = () => {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <YourApp />
+    </ConfigProvider>
+  );
+};
+```
+
+### 可用的语言包
+
+#### 中文 (zhCN)
+
+```tsx
+import zhCN from 'ds-markdown/i18n/zh';
+```
+
+#### 英文 (enUS)
+
+```tsx
+import enUS from 'ds-markdown/i18n/en';
+```
+
+### 在组件中使用语言包
+
+使用 `useLocale` hook 来获取当前的语言包：
+
+```tsx
+import React from 'react';
+import { useLocale } from 'ds-markdown';
+
+const MyComponent: React.FC = () => {
+  const locale = useLocale();
+
+  return (
+    <div>
+      <button>{locale.codeBlock.copy}</button>
+      <span>{locale.codeBlock.copied}</span>
+      <button>{locale.codeBlock.download}</button>
+    </div>
+  );
+};
+```
+
+### 语言包结构
+
+当前支持的语言包包含以下字段：
+
+```typescript
+interface Locale {
+  codeBlock: {
+    copy: string;
+    copied: string;
+    download: string;
+  };
+  [key: string]: string;
+}
+```
+
+### 完整示例
+
+```tsx
+import React from 'react';
+import { ConfigProvider, useLocale } from 'ds-markdown';
+import zhCN from 'ds-markdown/i18n/zh';
+
+const ExampleComponent: React.FC = () => {
+  const locale = useLocale();
+
+  return (
+    <div>
+      <h2>多语言示例</h2>
+      <p>复制按钮: {locale.codeBlock.copy}</p>
+      <p>已复制提示: {locale.codeBlock.copied}</p>
+      <p>下载按钮: {locale.codeBlock.download}</p>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <ExampleComponent />
+    </ConfigProvider>
+  );
+};
+
+export default App;
+```
+
+### 注意事项
+
+1. `ConfigProvider` 必须包裹在使用 `useLocale` 的组件外层
+2. 语言包对象会被缓存，避免不必要的重新渲染
+3. 支持扩展自定义的语言包字段
+4. 如果没有提供 `ConfigProvider`，会使用默认的中文语言包

package/dist/cjs/i18n/en/index.d.ts

@@ -0,0 +1,11 @@
+declare const enUS: {
+    readonly codeBlock: {
+        readonly copy: "Copy";
+        readonly copied: "Copied";
+        readonly download: "Download";
+    };
+};
+type EnUS = typeof enUS;
+
+export { enUS as default, enUS };
+export type { EnUS };

package/dist/cjs/i18n/en/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const enUS = {
+    codeBlock: {
+        copy: 'Copy',
+        copied: 'Copied',
+        download: 'Download',
+    },
+};
+
+exports.default = enUS;
+exports.enUS = enUS;
+//# sourceMappingURL=index.js.map

package/dist/cjs/i18n/en/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/i18n/en/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAa,MAAA,IAAI,GAAG;AAClB,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;;;;;;"}

package/dist/cjs/i18n/zh/index.d.ts

@@ -0,0 +1,11 @@
+declare const zhCN: {
+    readonly codeBlock: {
+        readonly copy: "复制";
+        readonly copied: "已复制";
+        readonly download: "下载";
+    };
+};
+type ZhCN = typeof zhCN;
+
+export { zhCN as default, zhCN };
+export type { ZhCN };

package/dist/cjs/i18n/zh/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const zhCN = {
+    codeBlock: {
+        copy: '复制',
+        copied: '已复制',
+        download: '下载',
+    },
+};
+
+exports.default = zhCN;
+exports.zhCN = zhCN;
+//# sourceMappingURL=index.js.map

package/dist/cjs/i18n/zh/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/i18n/zh/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAa,MAAA,IAAI,GAAG;AAClB,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA;;;;;;"}

package/dist/cjs/index.d.ts

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import react__default from 'react';
+import * as React$1 from 'react';
+import React__default from 'react';
 
 /**
  * 回答类型，思考和回答
@@ -19,11 +19,21 @@ interface ITypedChar extends IOnTypedCharData {
 interface IBeforeTypedChar extends IOnTypedCharData {
     percent: number;
 }
+interface IMarkdownThemeProps {
+    /** 主题 */
+    theme?: Theme;
+    /** 数学公式配置 */
+    math?: IMarkdownMath;
+    /** 代码块配置 */
+    codeBlock?: IMarkdownCode;
+    /** 插件配置 */
+    plugins?: IMarkdownPlugin[];
+    /** 回答类型 */
+    answerType?: 'thinking' | 'answer';
+}
 interface MarkdownBaseProps {
     /** 计时类型： 支持setTimeout和requestAnimationFrame */
     timerType?: 'setTimeout' | 'requestAnimationFrame';
-    /** 回答类型 */
-    answerType?: 'thinking' | 'answer';
     /** 打字机效果间隔时间 */
     interval: number;
     /** 是否关闭打字机效果 */
@@ -40,21 +50,23 @@ interface MarkdownBaseProps {
      * @param index 字符索引
      */
     onTypedChar?: (data?: ITypedChar) => void;
-    /** 主题 */
-    theme?: Theme;
-    /** 数学公式配置 */
-    math?: IMarkdownMath;
-    /** 插件配置 */
-    plugins?: IMarkdownPlugin[];
     /** 是否自动开启打字动画 */
     autoStartTyping?: boolean;
 }
-interface MarkdownProps extends MarkdownBaseProps {
+interface IMarkdownCode {
+    /** 是否显示头部操作按钮
+     * 如果为true，则显示头部操作按钮
+     * 如果为React.ReactNode，则显示自定义头部操作按钮
+     */
+    headerActions?: boolean | React.ReactNode;
+}
+interface MarkdownProps extends MarkdownBaseProps, IMarkdownThemeProps {
     children: string | undefined;
 }
 /**  MarkdownCMD 组件不需要 children */
-interface MarkdownCMDProps extends MarkdownBaseProps {
+interface MarkdownCMDProps extends MarkdownBaseProps, IMarkdownThemeProps {
     children?: undefined;
+    isInnerRender?: boolean;
 }
 interface IMarkdownPlugin {
     remarkPlugin?: unknown;
@@ -90,9 +102,29 @@ interface IEndData {
     str: string;
 }
 
-declare const MarkdownCMD: react.ForwardRefExoticComponent<MarkdownCMDProps & react.RefAttributes<MarkdownCMDRef>>;
+declare const MarkdownCMD: React$1.ForwardRefExoticComponent<MarkdownCMDProps & React$1.RefAttributes<MarkdownCMDRef>>;
+
+declare const _default: React__default.NamedExoticComponent<MarkdownProps & React__default.RefAttributes<MarkdownBaseRef>>;
 
-declare const _default: react__default.NamedExoticComponent<MarkdownProps & react__default.RefAttributes<MarkdownBaseRef>>;
+interface Locale {
+    codeBlock: {
+        copy: string;
+        copied: string;
+        download: string;
+        [key: string]: string;
+    };
+    [key: string]: unknown;
+}
+interface ConfigProviderProps {
+    locale?: Locale;
+    children: React__default.ReactNode;
+}
+interface ConfigContextType {
+    locale: Locale;
+}
+declare const ConfigProvider: React__default.FC<ConfigProviderProps>;
+declare const useConfig: () => ConfigContextType;
+declare const useLocale: () => Locale;
 
-export { _default as Markdown, MarkdownCMD, _default as default };
-export type { IMarkdownMath, ITypedChar, MarkdownCMDProps, MarkdownCMDRef, MarkdownProps, MarkdownRef };
+export { ConfigProvider, _default as Markdown, MarkdownCMD, _default as default, useConfig, useLocale };
+export type { ConfigContextType, ConfigProviderProps, IMarkdownMath, ITypedChar, Locale, MarkdownCMDProps, MarkdownCMDRef, MarkdownProps, MarkdownRef };