cozy-viewer 30.0.55 → 31.0.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [31.0.0](https://github.com/cozy/cozy-libs/compare/cozy-viewer@30.0.55...cozy-viewer@31.0.0) (2026-10-05)
+
+### Bug Fixes
+
+- **cozy-viewer:** Keep the text viewer scrollbar clickable ([d1a743e](https://github.com/cozy/cozy-libs/commit/d1a743e8428d5f7c15391037d135750ddfd5559c))
+- **cozy-viewer:** Upgrade react-markdown to 6.0.3 ([13cb65f](https://github.com/cozy/cozy-libs/commit/13cb65f912a8fdea6be4a7c1e1fc05bfb066935e))
+
+### Features
+
+- **cozy-viewer:** Upgrade react-pdf to 9.2.1 ([844097e](https://github.com/cozy/cozy-libs/commit/844097ed521349bc1c574da522beca047a7ada43))
+
+### BREAKING CHANGES
+
+- **cozy-viewer:** react-pdf 9 requires React >= 16.14.0 and no longer ships the webpack entries that configured the pdf.js worker. Remove any `react-pdf$` alias and set `pdfjs.GlobalWorkerOptions.workerSrc` in your app, see the cozy-viewer Readme.
+
 ## [30.0.55](https://github.com/cozy/cozy-libs/compare/cozy-viewer@30.0.54...cozy-viewer@30.0.55) (2026-10-05)
 
 **Note:** Version bump only for package cozy-viewer

package/dist/ViewersByFile/TextViewer.js

@@ -71,9 +71,8 @@ var styles = {
 var MarkdownRenderer = function MarkdownRenderer(_ref) {
   var text = _ref.text;
   return /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
-    className: (0, _classnames.default)(styles['viewer-textviewer-content'], 'u-p-1'),
-    source: text
-  });
+    className: (0, _classnames.default)(styles['viewer-textviewer-content'], 'u-p-1')
+  }, text);
 };
 
 var PlainTextRenderer = function PlainTextRenderer(_ref2) {

package/dist/stylesheet.css

@@ -63,6 +63,7 @@
 }
 .styles__viewer-textviewer___1fl1c .styles__viewer-textviewer-content___30dhP {
   white-space: pre-line;
+  box-sizing: border-box;
   width: 100%;
   max-height: 70%;
   overflow: auto;

package/jest.config.js

@@ -9,7 +9,8 @@ module.exports = {
   moduleNameMapper: {
     '\\.(png|gif|jpe?g|svg)$': '<rootDir>/test/__mocks__/fileMock.js',
     '\\.styl$': 'identity-obj-proxy',
-    'react-pdf/dist/esm/entry.webpack': 'react-pdf',
+    // react-pdf needs react/jsx-runtime, missing from the monorepo's React 16.12
+    '^react-pdf$': '<rootDir>/test/__mocks__/react-pdf.js',
     '^cozy-client/src/(.*)$': '<rootDir>/node_modules/cozy-client/dist/$1',
     '^cozy-client$': '<rootDir>/node_modules/cozy-client/dist/index',
     '^cozy-client/dist/(.*)$': '<rootDir>/node_modules/cozy-client/dist/$1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-viewer",
-  "version": "30.0.55",
+  "version": "31.0.0",
   "description": "Cozy-Viewer provides a component to show files in a viewer.",
   "main": "dist/index.js",
   "license": "MIT",
@@ -53,8 +53,8 @@
     "classnames": "^2.5.1",
     "hammerjs": "^2.0.8",
     "lodash": "^4.17.21",
-    "react-markdown": "^4.0.8",
-    "react-pdf": "^5.7.2"
+    "react-markdown": "^6.0.3",
+    "react-pdf": "^9.2.1"
   },
   "peerDependencies": {
     "@linagora/twake-icons": ">=2.6.6",
@@ -66,10 +66,10 @@
     "cozy-sharing": ">=30.0.0",
     "cozy-ui": ">=138.1.0",
     "cozy-ui-plus": ">=6.0.0",
-    "react": ">=16.12.0",
-    "react-dom": ">=16.12.0",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0",
     "react-router-dom": ">=6.14.2",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "17bfcc354f9462050e38fa5c826b4e2cc91fedd3"
+  "gitHead": "4f5afde6a7bb139332739a93efc455ea9e088b81"
 }

package/src/Readme.md

@@ -297,42 +297,39 @@ const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex, cu
 
 ### Using a worker for pdfjs
 
-For performance reasons, it is important to use a web worker when showing PDF files in the viewer. If you use webpack, you should add the following alias in your configuration :
-
-```diff
-+ resolve: {
-+   alias: {
-+     'react-pdf$' : 'react-pdf/dist/esm/entry.webpack'
-+   }
-+ }
-```
-
-With this alias, a specific JS file for the worker will be created in the build directory. By design, this directory is only accessible (ie. served by the stack) if you are logged in. If you need the viewer on a public page, you must tell webpack to create the worker in a public folder, that will be served by the stack even if the user is not logged in.
-
-One way to do this is to explicitly load the web worker in your application like this:
+The PDF viewer relies on [react-pdf](https://github.com/wojtekmaj/react-pdf), which needs the pdf.js worker to be configured by your application, once, before a PDF is shown:
 
 ```js static
-import createWorker from 'react-pdf/dist/esm/pdf.worker.entry';
-import { pdfjs } from 'react-pdf';
+import { pdfjs } from 'react-pdf'
 
-pdfjs.GlobalWorkerOptions.workerPort = createWorker();
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString()
 ```
 
-And then configure the [webpack worker-loader](https://github.com/webpack-contrib/worker-loader) to output the file in a publicly served directory:
+With Webpack 5 or Rspack, also add this configuration:
 
 ```js static
-{
-  test: /\.worker\.entry\.js$/,
-  issuer: { not: [/node_modules\//] }, // only for the worker loaded by the app, leave the workers created by dependencies alone
-  use: [{
-    loader: 'worker-loader',
-    options: {
-      name: 'public-folder/[name].[hash].worker.js'
-    }
-  }]
+resolve: {
+  alias: {
+    'react-pdf$': 'react-pdf/dist/esm/index.js',
+    'pdfjs-dist$': 'pdfjs-dist/legacy/build/pdf.mjs'
+  }
+},
+module: {
+  rules: [
+    { test: /react-pdf[\\/]dist[\\/]esm[\\/]index\.js$/, sideEffects: true }
+  ]
 }
 ```
 
+- react-pdf resets `workerSrc` to `'pdf.worker.mjs'` when it loads. cozy-viewer requires its CommonJS build while your app imports the ESM one: the `react-pdf$` alias keeps a single build, so it cannot load again after your setup.
+- react-pdf declares no side effects, so the bundler may skip its index when you import `pdfjs` and run it later. The `sideEffects` rule runs it first.
+- The `legacy` build of pdf.js supports browsers without `Promise.withResolvers` (iOS and Safari before 17.4), in the main thread and in the worker.
+
+The worker is emitted as an asset. If the viewer is used on a public page, make sure it is written to a folder served by the stack without authentication (for example with `output.assetModuleFilename: 'static/resource/[hash][ext][query]'`).
+
 ### Only works with React
 
 The `Viewer` can be used only in a `React` Application. You can't use it with `Preact`.

package/src/ViewersByFile/TextViewer.jsx

@@ -13,10 +13,9 @@ import { isFileEncrypted } from '../helpers'
 import withFileUrl from '../hoc/withFileUrl'
 
 const MarkdownRenderer = ({ text }) => (
-  <ReactMarkdown
-    className={cx(styles['viewer-textviewer-content'], 'u-p-1')}
-    source={text}
-  />
+  <ReactMarkdown className={cx(styles['viewer-textviewer-content'], 'u-p-1')}>
+    {text}
+  </ReactMarkdown>
 )
 
 const PlainTextRenderer = ({ text }) => (

package/src/ViewersByFile/styles.styl

@@ -52,6 +52,7 @@
 .viewer-textviewer
     .viewer-textviewer-content
         white-space pre-line
+        box-sizing border-box
         width 100%
         max-height 70%
         overflow auto

package/test/__mocks__/react-pdf.js

@@ -0,0 +1,5 @@
+module.exports = {
+  Document: ({ children }) => children,
+  Page: () => null,
+  pdfjs: { GlobalWorkerOptions: {} }
+}