jit-pdf 0.1.0 → 0.1.1

package/README.md

@@ -1,30 +1,163 @@
 # jit-pdf
 
-Jit PDF 是一套面向业务系统的 PDF 预览与编辑 SDK，支持：
+Enterprise-ready PDF viewing and editing SDK for business systems.
 
-- Vue 组件接入
-- 浏览器挂载式接入
-- UMD `<script>` 直引
-- 本地 `IndexedDB` 模式
-- 服务端文件流模式
+`jit-pdf` provides a polished Chinese UI, annotation tools, redaction workflow, local IndexedDB storage, HTTP file-service integration, and multiple integration styles for modern apps and plain HTML pages.
 
-## 安装
+[中文文档 / Chinese Documentation](https://github.com/jitOffice/jit-pdf-sdk/blob/main/packages/pdf-sdk/README.zh-CN.md)
+
+## Why jit-pdf
+
+- Ready-to-use PDF workspace with toolbar, thumbnails, floating inspector, and annotation drawer
+- Built-in annotation tools: highlight, note, free text, ink, delete, batch management
+- Redaction workflow with save-as-copy support
+- Full-text search, page navigation, zoom, and multi-page reading
+- Two storage modes:
+  - pure local mode with IndexedDB
+  - remote file mode with HTTP / Range streaming
+- Multiple integration styles:
+  - Vue component
+  - browser mount API
+  - UMD script tag
+
+## Installation
+
+For Vue projects:
 
 ```bash
-pnpm add jit-pdf
+npm install jit-pdf vue
 ```
 
-## Vue 接入
+Or:
 
-```ts
+```bash
+pnpm add jit-pdf vue
+```
+
+## Package Outputs
+
+This package ships with:
+
+- `jit-pdf`
+  ESM / CJS entry for component usage
+- `jit-pdf/browser`
+  mount-based browser entry for React, Angular, and other frameworks
+- `jit-pdf/styles.css`
+  shared styles
+- `dist/jit-pdf.umd.js`
+  UMD bundle for direct browser usage
+
+## CDN Usage
+
+### jsDelivr
+
+Latest:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jit-pdf/dist/style.css" />
+<script src="https://cdn.jsdelivr.net/npm/jit-pdf/dist/jit-pdf.umd.js"></script>
+```
+
+Pinned version:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jit-pdf@0.1.1/dist/style.css" />
+<script src="https://cdn.jsdelivr.net/npm/jit-pdf@0.1.1/dist/jit-pdf.umd.js"></script>
+```
+
+### UNPKG
+
+Latest:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/jit-pdf/dist/style.css" />
+<script src="https://unpkg.com/jit-pdf/dist/jit-pdf.umd.js"></script>
+```
+
+Pinned version:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/jit-pdf@0.1.1/dist/style.css" />
+<script src="https://unpkg.com/jit-pdf@0.1.1/dist/jit-pdf.umd.js"></script>
+```
+
+Global browser variable:
+
+```js
+window.JitPdfSdk
+```
+
+## Quick Start
+
+### Vue 3 Component Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
 import "jit-pdf/styles.css";
 import {
   JitPdfEditor,
-  createIndexedDbPdfEditorService
+  createIndexedDbPdfEditorService,
+  type PdfSource
 } from "jit-pdf";
+
+const service = createIndexedDbPdfEditorService({
+  databaseName: "jit-pdf-demo"
+});
+
+const source = ref<PdfSource | null>(null);
+
+async function onSelectFile(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+
+  const uploaded = await service.uploadFile(file);
+  source.value = {
+    type: "local",
+    fileId: uploaded.id,
+    name: uploaded.name
+  };
+}
+</script>
+
+<template>
+  <div style="height: 100vh">
+    <input type="file" accept=".pdf,application/pdf" @change="onSelectFile" />
+    <JitPdfEditor
+      v-if="source"
+      :source="source"
+      :service="service"
+      locale="zh-CN"
+      theme="blue-enterprise"
+    />
+  </div>
+</template>
+```
+
+### Remote File Service Mode
+
+```ts
+import { createHttpPdfEditorService } from "jit-pdf";
+
+const service = createHttpPdfEditorService({
+  baseUrl: "http://localhost:4000",
+  annotationDatabaseName: "jit-pdf-annotations"
+});
 ```
 
-## 浏览器挂载
+```vue
+<JitPdfEditor
+  :source="{ type: 'remote', fileId: 'your-file-id' }"
+  :service="service"
+  locale="zh-CN"
+  theme="blue-enterprise"
+/>
+```
+
+### Browser Mount API
+
+Use this when your host app is not written in Vue, or when you want an embeddable container-based integration.
 
 ```ts
 import "jit-pdf/styles.css";
@@ -32,19 +165,186 @@ import {
   createIndexedDbPdfEditorService,
   mountJitPdfEditor
 } from "jit-pdf/browser";
+
+const service = createIndexedDbPdfEditorService({
+  databaseName: "jit-pdf-browser-demo"
+});
+
+const mounted = mountJitPdfEditor({
+  target: "#app",
+  source: {
+    type: "local",
+    fileId: "your-file-id",
+    name: "sample.pdf"
+  },
+  service,
+  locale: "zh-CN",
+  theme: "blue-enterprise"
+});
+
+// later
+mounted.unmount();
 ```
 
-## UMD 直引
+### Plain HTML / UMD
 
 ```html
-<link rel="stylesheet" href="https://cdn.example.com/jit-pdf/dist/style.css" />
-<script src="https://cdn.example.com/jit-pdf/dist/jit-pdf.umd.js"></script>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jit-pdf UMD Demo</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jit-pdf/dist/style.css" />
+    <style>
+      html, body, #app {
+        height: 100%;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <input id="fileInput" type="file" accept=".pdf,application/pdf" />
+    <div id="app" style="height: calc(100% - 40px)"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/jit-pdf/dist/jit-pdf.umd.js"></script>
+    <script>
+      const { createIndexedDbPdfEditorService, mountJitPdfEditor } = window.JitPdfSdk;
+      const service = createIndexedDbPdfEditorService({
+        databaseName: "jit-pdf-html-demo"
+      });
+
+      let mounted = null;
+
+      document.getElementById("fileInput").addEventListener("change", async (event) => {
+        const file = event.target.files && event.target.files[0];
+        if (!file) return;
+
+        const uploaded = await service.uploadFile(file);
+
+        if (mounted) {
+          mounted.unmount();
+        }
+
+        mounted = mountJitPdfEditor({
+          target: "#app",
+          source: {
+            type: "local",
+            fileId: uploaded.id,
+            name: uploaded.name
+          },
+          service,
+          locale: "zh-CN",
+          theme: "blue-enterprise"
+        });
+      });
+    </script>
+  </body>
+</html>
 ```
 
-```js
-const { createIndexedDbPdfEditorService, mountJitPdfEditor } = window.JitPdfSdk;
+## Storage Modes
+
+### Local IndexedDB Mode
+
+Recommended for:
+
+- demos
+- PoCs
+- local-only document workflows
+- environments without backend integration
+
+Use:
+
+```ts
+createIndexedDbPdfEditorService({
+  databaseName: "jit-pdf-demo"
+});
+```
+
+### HTTP File Service Mode
+
+Recommended for:
+
+- large PDF streaming
+- local directory browsing
+- upload / delete / save-copy workflows
+- backend-controlled document access
+
+Use:
+
+```ts
+createHttpPdfEditorService({
+  baseUrl: "http://localhost:4000"
+});
+```
+
+## Main APIs
+
+### Component Entry
+
+```ts
+import { JitPdfEditor } from "jit-pdf";
+```
+
+### Service Factories
+
+```ts
+import {
+  createHttpPdfEditorService,
+  createIndexedDbPdfEditorService
+} from "jit-pdf";
+```
+
+### Browser Mount Entry
+
+```ts
+import { mountJitPdfEditor } from "jit-pdf/browser";
+```
+
+### Types
+
+```ts
+import type {
+  PdfSource,
+  PdfEditorService,
+  JitPdfEditorProps
+} from "jit-pdf";
+```
+
+## Supported Events
+
+Both `JitPdfEditor` and `mountJitPdfEditor()` support:
+
+- `ready`
+- `dirty-change`
+- `save-start`
+- `save-success`
+- `save-error`
+- `load-error`
+
+Example:
+
+```ts
+mountJitPdfEditor({
+  target: "#app",
+  source,
+  service,
+  onReady(event) {
+    console.log("Ready:", event.documentId);
+  },
+  onSaveSuccess(result) {
+    console.log("Saved:", result.relativePath);
+  },
+  onLoadError(error) {
+    console.error("Load failed:", error.message);
+  }
+});
 ```
 
-## 文档
+## GitHub and Examples
 
-- GitHub: https://github.com/jitOffice/jit-pdf-sdk
+- Repository: https://github.com/jitOffice/jit-pdf-sdk
+- Vue example: `packages/pdf-sdk/examples/vue-demo`
+- HTML example: `packages/pdf-sdk/examples/html-demo`
+- Chinese docs: https://github.com/jitOffice/jit-pdf-sdk/blob/main/packages/pdf-sdk/README.zh-CN.md

package/README.zh-CN.md

@@ -0,0 +1,46 @@
+# jit-pdf 中文文档
+
+英文版 npm 文档请查看：
+
+- https://github.com/jitOffice/jit-pdf-sdk/blob/main/packages/pdf-sdk/README.md
+
+仓库主文档请查看：
+
+- https://github.com/jitOffice/jit-pdf-sdk/blob/main/README.md
+
+## 简介
+
+`jit-pdf` 是一套面向业务系统的 PDF 预览与编辑 SDK，支持：
+
+- Vue 组件接入
+- 浏览器挂载式接入
+- UMD `<script>` 直引
+- 本地 `IndexedDB` 模式
+- HTTP 文件服务模式
+- 中文界面、蓝色主题、批注与脱敏
+
+## 安装
+
+```bash
+npm install jit-pdf vue
+```
+
+## CDN
+
+jsDelivr：
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jit-pdf/dist/style.css" />
+<script src="https://cdn.jsdelivr.net/npm/jit-pdf/dist/jit-pdf.umd.js"></script>
+```
+
+UNPKG：
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/jit-pdf/dist/style.css" />
+<script src="https://unpkg.com/jit-pdf/dist/jit-pdf.umd.js"></script>
+```
+
+## 仓库地址
+
+- https://github.com/jitOffice/jit-pdf-sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jit-pdf",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "type": "module",
   "description": "企业级 PDF 预览与编辑 SDK，支持 Vue、浏览器挂载和 UMD 直引",