Merge pull request #378 from embedpdf/feature/chinese-translation

Feature/chinese translation

Author: bobsingor

.changeset/chinese-translations-and-i18n.md

@@ -0,0 +1,7 @@
+---
+'@embedpdf/snippet': patch
+---
+
+- Add Simplified Chinese (zh-CN) translations for all UI elements
+- Add i18n support for annotation type labels in comment sidebar with translation keys and fallbacks
+- Fix rimraf command to use `--glob` flag for compatibility with rimraf v4+

viewers/snippet/package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "dev": "rollup --watch --config rollup.config.js",
-    "prebuild": "rimraf dist/*",
+    "prebuild": "rimraf --glob dist/*",
     "build": "rollup --config rollup.config.js"
   },
   "dependencies": {

viewers/snippet/src/components/app.tsx

@@ -128,6 +128,7 @@ import {
   germanTranslations,
   frenchTranslations,
   spanishTranslations,
+  simplifiedChineseTranslations,
 } from '@/config';
 import { ThemeConfig } from '@/config/theme';
 import { IconsConfig } from '@/config/icon-registry';
@@ -269,6 +270,7 @@ const DEFAULTS = {
       germanTranslations,
       frenchTranslations,
       spanishTranslations,
+      simplifiedChineseTranslations,
     ],
     paramResolvers: defaultParamResolvers,
   } as I18nPluginConfig,

viewers/snippet/src/components/comment-sidebar/annotation-card.tsx

@@ -68,7 +68,12 @@ export const AnnotationCard = ({
     >
       <div className="p-4">
         <div className="flex items-start space-x-3">
-          <AnnotationIcon annotation={annotation} config={config} className="h-8 w-8" />
+          <AnnotationIcon
+            annotation={annotation}
+            config={config}
+            title={translate(config.labelKey, { fallback: config.label })}
+            className="h-8 w-8"
+          />
           <div className="min-w-0 flex-1">
             <div className="flex items-center justify-between">
               <div className="leading-none">

viewers/snippet/src/components/comment-sidebar/annotation-icon.tsx

@@ -7,17 +7,19 @@ export const AnnotationIcon = ({
   annotation,
   config,
   className = '',
+  title,
 }: {
   annotation: TrackedAnnotation;
   config: AnnotationConfig;
   className?: string;
+  title: string;
 }) => {
   const iconProps = config.iconProps(annotation.object);
 
   return (
     <div
       className={`bg-bg-surface-alt flex items-center justify-center rounded-full ${className}`}
-      title={config.label}
+      title={title}
     >
       <Icon icon={config.icon} {...iconProps} />
     </div>

viewers/snippet/src/components/comment-sidebar/config.ts

@@ -8,6 +8,7 @@ import {
 // Annotation type configuration
 export interface AnnotationConfig {
   label: string;
+  labelKey: string;
   icon: string;
   iconProps: (annotation: PdfAnnotationObject) => {
     primaryColor?: string;
@@ -20,13 +21,15 @@ export interface AnnotationConfig {
 export const annotationConfigs: Record<SidebarSubtype, AnnotationConfig> = {
   [PdfAnnotationSubtype.HIGHLIGHT]: {
     label: 'Highlight',
+    labelKey: 'annotation.highlight',
     icon: 'highlight',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.color || '#ffff00',
     }),
   },
   [PdfAnnotationSubtype.CIRCLE]: {
     label: 'Circle',
+    labelKey: 'annotation.circle',
     icon: 'circle',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.strokeColor || '#000000',
@@ -35,6 +38,7 @@ export const annotationConfigs: Record<SidebarSubtype, AnnotationConfig> = {
   },
   [PdfAnnotationSubtype.SQUARE]: {
     label: 'Square',
+    labelKey: 'annotation.square',
     icon: 'square',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.strokeColor || '#000000',
@@ -43,48 +47,55 @@ export const annotationConfigs: Record<SidebarSubtype, AnnotationConfig> = {
   },
   [PdfAnnotationSubtype.LINE]: {
     label: 'Line',
+    labelKey: 'annotation.line',
     icon: 'line',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.strokeColor || '#000000',
     }),
   },
   [PdfAnnotationSubtype.UNDERLINE]: {
     label: 'Underline',
+    labelKey: 'annotation.underline',
     icon: 'underline',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.color || '#000000',
     }),
   },
   [PdfAnnotationSubtype.SQUIGGLY]: {
     label: 'Squiggly',
+    labelKey: 'annotation.squiggly',
     icon: 'squiggly',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.color || '#000000',
     }),
   },
   [PdfAnnotationSubtype.STRIKEOUT]: {
     label: 'Strikethrough',
+    labelKey: 'annotation.strikeout',
     icon: 'strikethrough',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.color || '#000000',
     }),
   },
   [PdfAnnotationSubtype.INK]: {
     label: 'Ink',
+    labelKey: 'annotation.ink',
     icon: 'pencilMarker',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.color || '#000000',
     }),
   },
   [PdfAnnotationSubtype.FREETEXT]: {
     label: 'Text',
+    labelKey: 'annotation.freeText',
     icon: 'text',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.fontColor || '#000000',
     }),
   },
   [PdfAnnotationSubtype.POLYGON]: {
     label: 'Polygon',
+    labelKey: 'annotation.polygon',
     icon: 'polygon',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.strokeColor || '#000000',
@@ -93,13 +104,15 @@ export const annotationConfigs: Record<SidebarSubtype, AnnotationConfig> = {
   },
   [PdfAnnotationSubtype.POLYLINE]: {
     label: 'Polyline',
+    labelKey: 'annotation.polyline',
     icon: 'zigzag',
     iconProps: (annotation: any) => ({
       primaryColor: annotation.strokeColor || '#000000',
     }),
   },
   [PdfAnnotationSubtype.STAMP]: {
     label: 'Stamp',
+    labelKey: 'annotation.stamp',
     icon: 'deviceFloppy',
     iconProps: () => ({
       primaryColor: '#dc2626',

viewers/snippet/src/config/translations.ts

@@ -989,6 +989,203 @@ export const spanishTranslations: Locale = {
   },
 };
 
+export const simplifiedChineseTranslations: Locale = {
+  code: 'zh-CN',
+  name: '简体中文',
+  translations: {
+    search: {
+      placeholder: '搜索',
+      caseSensitive: '大小写敏感',
+      wholeWord: '全词匹配',
+      resultsFound: '{count} 个结果',
+      page: '第{page}页',
+    },
+    zoom: {
+      in: '放大',
+      out: '缩小',
+      fitWidth: '适合宽度',
+      fitPage: '适合页面',
+      marquee: '选框缩放',
+      menu: '缩放菜单',
+      level: '缩放比例 ({level}%)',
+    },
+    pan: {
+      toggle: '拖动模式',
+    },
+    pointer: {
+      toggle: '光标模式',
+    },
+    capture: {
+      screenshot: '截图',
+    },
+    document: {
+      menu: '文件选项',
+      open: '打开',
+      close: '关闭',
+      print: '打印',
+      export: '导出',
+      fullscreen: '全屏',
+      loading: '文件加载中...',
+    },
+    emptyState: {
+      title: '尚无打开的文件',
+      description: '请点击“+ 打开文件”按钮选择并打开一个PDF文件。',
+      descriptionMulti: '您可以使用标签页同时打开多个文件。',
+      openButton: '打开文件',
+      supportedFormats: '支持的文件格式为: PDF',
+    },
+    passwordPrompt: {
+      title: '请输入密码',
+      required: '该文件设置有密码保护，要打开文件请输入密码。',
+      incorrect: '你输入的密码错误，请重新输入。',
+      incorrectWarning: '密码错误，请检查后重新输入。',
+      label: '密码',
+      placeholder: '请输入文件密码',
+      open: '打开',
+      opening: '打开中...',
+      cancel: '取消',
+      close: '关闭',
+    },
+    documentError: {
+      title: '文件加载出错',
+      unknown: '未知错误',
+      errorCode: '错误码: {code}',
+      close: '关闭文件',
+    },
+    panel: {
+      sidebar: '大纲与书签',
+      search: '搜索',
+      comment: '评论',
+      thumbnails: '缩略图',
+      outline: '大纲',
+      annotationStyle: '批注样式',
+    },
+    menu: {
+      viewControls: '视图控件',
+      zoomControls: '缩放控件',
+      moreOptions: '更多选项',
+    },
+    outline: {
+      title: '大纲',
+      loading: '大纲加载中...',
+      noOutline: '没有大纲',
+      noBookmarks: '该文件不含书签',
+    },
+    page: {
+      settings: '页面设置',
+      single: '单页视图',
+      twoOdd: '双页视图',
+      twoEven: '书籍视图',
+      vertical: '垂直滚动',
+      horizontal: '水平滚动',
+      spreadMode: '跨页模式',
+      scrollLayout: '滚动布局',
+      rotation: '页面转向',
+      next: '下一页',
+      previous: '上一页',
+    },
+    rotate: {
+      clockwise: '顺时针旋转',
+      counterClockwise: '逆时针旋转',
+    },
+    selection: {
+      copy: '复制',
+    },
+    mode: {
+      view: '阅读',
+      annotate: '批注',
+      shapes: '形状',
+      redact: '遮蔽',
+    },
+    annotation: {
+      text: '任意文本',
+      highlight: '高亮',
+      strikeout: '删除线',
+      underline: '下划线',
+      squiggly: '下划曲线',
+      rectangle: '矩形',
+      circle: '圆形',
+      line: '直线',
+      arrow: '带箭头直线',
+      polygon: '多边形',
+      polyline: '多段线',
+      ink: '自由绘制',
+      stamp: '印章',
+      freeText: '任意文本',
+      square: '矩形',
+      styles: '{type} 样式',
+      defaults: '{type} 默认值',
+      // Sidebar labels
+      color: '颜色',
+      opacity: '透明度',
+      blendMode: '混合模式',
+      strokeWidth: '线条宽度',
+      strokeColor: '线条颜色',
+      borderStyle: '线条样式',
+      fillColor: '填充色',
+      fontSize: '字号',
+      fontFamily: '字体',
+      textAlign: '左右对齐',
+      verticalAlign: '上下对齐',
+      lineEnding: '行尾',
+      lineStart: '线条起点',
+      lineEnd: '线条结尾',
+      font: '字体',
+      fontColor: '字色',
+      backgroundColor: '背景色',
+      noStyles: '该批注无需设置样式。',
+      noStylesStamp: '印章无需设置样式。',
+      selectAnnotation: '在此处查看选中批注的样式。',
+      deleteSelected: '删除选中的批注',
+      moreTools: '更多工具',
+    },
+    redaction: {
+      area: '遮蔽区域',
+      text: '遮蔽文本',
+      applyAll: '全部应用',
+      clearAll: '全部取消',
+      deleteSelected: '取消遮蔽',
+      commitSelected: '应用遮蔽',
+    },
+    history: {
+      undo: '撤销',
+      redo: '恢复',
+    },
+    comments: {
+      page: '第{page}页',
+      commentCount: '{count}条评论',
+      commentCountPlural: '{count}条评论',
+      addComment: '新增评论...',
+      addReply: '新增回复...',
+      save: '保存',
+      cancel: '取消',
+      edit: '编辑',
+      delete: '删除',
+      showMore: '展开',
+      showLess: '收起',
+      emptyState: '添加批注后，可以在这里对批注进行评论。',
+    },
+    blendMode: {
+      normal: '正常',
+      multiply: '正片',
+      screen: '屏幕',
+      overlay: '叠加',
+      darken: '变暗',
+      lighten: '变亮',
+      colorDodge: '色彩减淡',
+      colorBurn: '颜色加深',
+      hardLight: '强光',
+      softLight: '柔光',
+      difference: '差值',
+      exclusion: '排除',
+      hue: '色相',
+      saturation: '饱和度',
+      color: '颜色',
+      luminosity: '亮度',
+    },
+  },
+};
+
 export const paramResolvers: ParamResolvers<State> = {
   'zoom.level': ({ state, documentId }) => {
     const zoomLevel = documentId