feat: Add multi-language support

README.md

@@ -1,119 +1,118 @@
 <div>
     <h1 align="center"><code>pdf.js Annotation Extension</code> ⚡️ </h1>
     <p align="center">
-        <strong>基于pdf.js viewer的批注扩展，text支持中文字符，支持pdf打印，下载的嵌入</strong>
+        <strong>An annotation extension based on pdf.js viewer <br/> supporting embedding annotations for PDF printing and downloading.</strong>
     </p>
 </div>
 
 ---
 
-## 1、背景
+English | [简体中文](./README_CN.md)
 
-[PDF.js](https://mozilla.github.io/pdf.js/) 已经提供了 [Viewer](https://mozilla.github.io/pdf.js/web/viewer.html) 用于PDF文件的在线预览，并且提供了一部分的批注功能（FREETEXT、HIGHLIGHT、STAMP、INK）。
+## 1. Background
 
-在实际使用中，可能会需要各种形式的批注工具，逐产生在viewer上扩展做额外批注的想法。
+[PDF.js](https://mozilla.github.io/pdf.js/) provides a [Viewer](https://mozilla.github.io/pdf.js/web/viewer.html) for online PDF preview and includes some basic annotation functionalities (FREETEXT, HIGHLIGHT, STAMP, INK).
 
-项目基于konva、react、antd、web-highlighter，使用外部引入的方式，不影响 pdfjs viewer 原有代码，增加并扩展了一部分批注类型，同时解决了中文字符批注不显示问题（转为图片插入），打印，下载批注都能嵌入至pdf文件中，效果见下图：
+In actual use cases, there is often a need for various annotation tools, leading to the idea of extending the viewer to add more annotation capabilities.
+
+This project is based on `konva`, `react`, `antd`, and `web-highlighter`. It introduces additional annotation types by extending the existing `pdf.js` viewer without modifying its original code. These annotations can also be embedded in the PDF for printing and downloading, as shown below:
 
 <div align="center">
   <img src="/examples/demo.gif" alt="demo" />
 </div>
 
-#### 多页盖章
+#### Multi-page Stamping
 
 <div align="center">
-  <img src="/examples/stamp.gif" alt="demo" />
+  <img src="/examples/stamp.gif" alt="stamp demo" />
 </div>
 
-#### 移动端
+#### Mobile Version
 
 <div align="center">
-  <img src="/examples/mobile.gif" alt="demo" />
+  <img src="/examples/mobile.gif" alt="mobile demo" />
 </div>
 
-对PDF Viewer来说，这是一个很有用的功能，如果需求只是简单的批注，项目中的现有功能已经可以直接满足。
-如果有更特殊的需求或功能要求，可以在此基础上进一步开发。
-
-## 2、绘图工具，已支持移动端 📱
+For PDF Viewer users, this is a highly useful feature. If your requirement is simple annotation, the current features in the project should suffice. For more specific needs or requirements, you can further develop based on this extension.
 
-1. 矩形
-2. 圆形
-3. 自由绘制，一段时间内的绘制会被归为一组
-4. 自由高亮，有自动修正
-5. 文字，所有输入文字会被转为图片，可能存在不清晰情况
-6. 签名
-7. 盖章，自由上传图片，支持多页设置
-8. 文字高亮
-9. 文字删除线
-10. 文字下划线
-11. 选择，选中对象 del 删除，或者双击删除
+## 2. Drawing Tools (Mobile Supported 📱)
 
+1. Rectangle
+2. Circle
+3. Free Hand (grouped if drawn within a short time)
+4. Free Highlight (with auto-correction)
+5. Text (all inputted text is converted to images, which may sometimes result in unclear display)
+6. Signature
+7. Stamp (upload custom images, supports multi-page stamping)
+8. Text Highlight
+9. Text Strikeout
+10. Text Underline
+11. Annotation Selection (use `del` key or double-click to delete the selected object)
 
-## 3、快速开始
+## 3. Quick Start
 
-### 初始化
+### Installation
 
 ```bash
-    $ npm install 或 yarn
+ $ npm install or yarn
 ```
 
-### 运行开发模式
+### Run in Development Mode
 
 ```bash
-    $ npm run dev 或 yarn dev
+  $ npm run dev or yarn dev
 ```
 
-### 查看效果pdfjs viewer 效果
+### Run PDF.js Viewer
 
-仓库自带了一个 DEMO 示例（在examples文件夹中, 进入 ./examples/pdfjs-4.3.136-dist 目录
+A DEMO example is provided in the repository (located in the examples folder). Navigate to ./examples/pdfjs-4.3.136-dist:
 
 ```bash
-    $ miniserve 或其他静态服务
+    $ miniserve or use another static server
 ```
 
-打开地址：http://localhost:8080/web/viewer.html 即可看到效果
+Open the URL: http://localhost:8080/web/viewer.html to see the result.
 
-## 4、使用方式
+## 4、Usage
 
-### 修改生成文件地址
+### Modify Output Directory
 
-   配置在文件：/configuration/environment.js 中
-   默认为 examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension
-   您可将它修改为您pdfjs dist地址，以方便开发
+   The configuration can be found in the /configuration/environment.js file. By default, it points to examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension. You can modify it to match your local pdfjs-dist directory to facilitate development:
 
 ```bash
     output: path.resolve(__dirname, '../examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension'),
 ```
 
-### 打包
+### Build
 
 ```bash
-    $ npm run build 或 yarn build
+    $ npm run build or yarn build
 ```
 
-也可以直接下载发布版本
+Alternatively, you can directly download the release version.
 
-### pdfjs dist 引入扩展
+### Integrating with PDF.js
 
-修改文件：pdfjs-dist/web/viewer.html，只需增加一行代码，引入生成的文件即可
+Modify the pdfjs-dist/web/viewer.html file by adding a single line to include the generated extension file:
 
 ```html
     <script src="../build/pdf.mjs" type="module"></script>
     <link rel="stylesheet" href="viewer.css">
     <script src="viewer.mjs" type="module"></script>
-    <!--这里引入生成的文件-->
+    <!-- Insert the generated annotation extension file -->
     <script src="./pdfjs-annotation-extension/pdfjs-annotation-extension.js" type="module"></script>
-    <!--这里引入生成的文件-->
-  </head>
+    <!-- End -->
+    </head>
 ```
 
-## 5、工作原理
+## 5、How It Works
+
+By leveraging the pdfjs EventBus, we capture page events and dynamically insert a Konva drawing layer. Shapes are drawn on the Konva layer, and the shape data is then converted into a format compatible with pdfjs annotationStorage, storing the annotations in annotationStorage. Although there are more annotation types, they are essentially mapped to the ones supported by pdfjs with some additional custom transformations.
 
-利用pdfjs EventBus捕获页面事件，动态插入Konva绘图层，在Konva上绘制图形，并将图形数据转换为 pdfjs annotationStorage对应格式数据，存储至annotationStorage中。
-批注类型虽然看上去多了，但实际支持与pdfjs一致，只是做了一些特殊的转换。
-关于 pdfjs 批注类型的说明请看这里 👇
+For details about pdfjs annotation types, please refer to the documentation here 👇
  https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-annotations
 
-## 6、兼容性
+## 6、Compatibility
 
- 目前仅测试 pdfjs-4.3.136-dist， 不支持页面旋转后的绘制
+ Currently, this extension has been tested only with pdfjs-4.3.136-dist.
+ **Note that it does not support drawing on rotated pages.**

README_CN.md

@@ -0,0 +1,121 @@
+<div>
+    <h1 align="center"><code>pdf.js Annotation Extension</code> ⚡️ </h1>
+    <p align="center">
+        <strong>基于pdf.js viewer的批注扩展，支持pdf打印，下载的嵌入</strong>
+    </p>
+</div>
+
+---
+
+[English](./README.md) ｜ 简体中文
+
+## 1、背景
+
+[PDF.js](https://mozilla.github.io/pdf.js/) 已经提供了 [Viewer](https://mozilla.github.io/pdf.js/web/viewer.html) 用于PDF文件的在线预览，并且提供了一部分的批注功能（FREETEXT、HIGHLIGHT、STAMP、INK）。
+
+在实际使用中，需要各种形式的批注工具，逐产生在viewer上扩展做额外批注的想法。
+
+项目基于konva、react、antd、web-highlighter，使用外部引入的方式，不影响 pdfjs viewer 原有代码，增加并扩展了一部分批注类型，打印，下载批注都能嵌入至pdf文件中，效果见下图：
+
+<div align="center">
+  <img src="/examples/demo.gif" alt="demo" />
+</div>
+
+#### 多页盖章
+
+<div align="center">
+  <img src="/examples/stamp.gif" alt="demo" />
+</div>
+
+#### 移动端
+
+<div align="center">
+  <img src="/examples/mobile.gif" alt="demo" />
+</div>
+
+对PDF Viewer来说，这是一个很有用的功能，如果需求只是简单的批注，项目中的现有功能已经可以直接满足。
+如果有更特殊的需求或功能要求，可以在此基础上进一步开发。
+
+## 2、绘图工具，已支持移动端 📱
+
+1. 矩形
+2. 圆形
+3. 自由绘制，一段时间内的绘制会被归为一组
+4. 自由高亮，有自动修正
+5. 文字，所有输入文字会被转为图片，可能存在不清晰情况
+6. 签名
+7. 盖章，自由上传图片，支持多页设置
+8. 文字高亮
+9. 文字删除线
+10. 文字下划线
+11. 选择，选中对象 del 删除，或者双击删除
+
+
+## 3、快速开始
+
+### 初始化
+
+```bash
+    $ npm install 或 yarn
+```
+
+### 运行开发模式
+
+```bash
+    $ npm run dev 或 yarn dev
+```
+
+### 查看效果pdfjs viewer 效果
+
+仓库自带了一个 DEMO 示例（在examples文件夹中, 进入 ./examples/pdfjs-4.3.136-dist 目录
+
+```bash
+    $ miniserve 或其他静态服务
+```
+
+打开地址：http://localhost:8080/web/viewer.html 即可看到效果
+
+## 4、使用方式
+
+### 修改生成文件地址
+
+   配置在文件：/configuration/environment.js 中
+   默认为 examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension
+   您可将它修改为您pdfjs dist地址，以方便开发
+
+```bash
+    output: path.resolve(__dirname, '../examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension'),
+```
+
+### 打包
+
+```bash
+    $ npm run build 或 yarn build
+```
+
+也可以直接下载发布版本
+
+### pdfjs dist 引入扩展
+
+修改文件：pdfjs-dist/web/viewer.html，只需增加一行代码，引入生成的文件即可
+
+```html
+    <script src="../build/pdf.mjs" type="module"></script>
+    <link rel="stylesheet" href="viewer.css">
+    <script src="viewer.mjs" type="module"></script>
+    <!--这里引入生成的文件-->
+    <script src="./pdfjs-annotation-extension/pdfjs-annotation-extension.js" type="module"></script>
+    <!--这里引入生成的文件-->
+  </head>
+```
+
+## 5、工作原理
+
+利用pdfjs EventBus捕获页面事件，动态插入Konva绘图层，在Konva上绘制图形，并将图形数据转换为 pdfjs annotationStorage对应格式数据，存储至annotationStorage中。
+批注类型虽然看上去多了，但实际支持与pdfjs一致，只是做了一些特殊的转换。
+关于 pdfjs 批注类型的说明请看这里 👇
+ https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-annotations
+
+## 6、兼容性
+
+ 目前仅测试 pdfjs-4.3.136-dist， 不支持页面旋转后的绘制

examples/pdfjs-4.3.136-dist/web/viewer.mjs

@@ -13511,9 +13511,9 @@ initCom(PDFViewerApplication);
         return;
       }
       const fileOrigin = new URL(file, window.location.href).origin;
-      if (fileOrigin !== viewerOrigin) {
-        throw new Error("file origin does not match viewer's");
-      }
+      // if (fileOrigin !== viewerOrigin) {
+      //   throw new Error("file origin does not match viewer's");
+      // }
     } catch (ex) {
       PDFViewerApplication._documentError("pdfjs-loading-error", {
         message: ex.message

package.json

@@ -56,9 +56,11 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.10",
     "antd": "^5.15.3",
+    "i18next": "^23.15.1",
     "konva": "^9.3.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.0.2",
     "web-highlighter": "^0.7.4"
   }
 }

src/components/popbar/index.scss

@@ -21,7 +21,7 @@
             border: 1px solid transparent;
             color: var(--main-color);
             cursor: default;
-            width: 70px;
+            width: 80px;
             .icon {
                 font-size: 14px;
                 padding: 5px 10px 0 10px;

src/components/popbar/index.tsx

@@ -5,6 +5,8 @@ import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } f
 
 import { annotationDefinitions, IAnnotationType, PdfjsAnnotationEditorType } from '../../const/definitions'
 
+import { useTranslation } from 'react-i18next'
+
 
 interface CustomPopbarProps {
     onChange: (annotation: IAnnotationType | null, range: Range | null) => void
@@ -26,6 +28,8 @@ const CustomPopbar = forwardRef<CustomPopbarRef, CustomPopbarProps>(function Cus
 
     const containerRef = useRef<HTMLDivElement | null>(null)
 
+    const { t } = useTranslation()
+
     useImperativeHandle(ref, () => ({
         open,
         close
@@ -89,7 +93,7 @@ const CustomPopbar = forwardRef<CustomPopbarRef, CustomPopbarProps>(function Cus
         return (
             <li key={index} onMouseDown={() => handleAnnotationClick(annotation)}>
                 <div className="icon">{annotation.icon}</div>
-                <div className="name">{annotation.name}</div>
+                <div className="name">{t(`annotations.${annotation.name}`)}</div>
             </li>
         )
     })

src/components/toolbar/index.scss

@@ -72,8 +72,7 @@
             cursor: crosshair;
         }
 
-        &::after {
-            content: '签名处...';
+        &-info {
             font-size: 20px;
             z-index: 0;
             color: #ccc;