Skip to content

Commit 96f9290

Browse files
ocruzeocruze
committed
chore: upgrade to tiptap v3
1 parent a95e402 commit 96f9290

File tree

12 files changed

+403
-484
lines changed

12 files changed

+403
-484
lines changed

‎examples/package.json‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,29 @@
1111
"prebuild:pages": "react-dsfr update-icons",
1212
"build:pages": "tsc -b && vite build --base=/react-dsfr-tiptap/",
1313
"preview": "vite preview",
14-
"check-types": "tsc --noEmit"
14+
"check-types": "tsc -b --noEmit"
1515
},
1616
"dependencies": {
1717
"@codegouvfr/react-dsfr": "^1.16.4",
1818
"@emotion/react": "^11.14.0",
1919
"@hookform/resolvers": "^4.0.0",
20-
"@tiptap/extension-color": "^2.10.4",
21-
"@tiptap/extension-highlight": "^2.10.4",
22-
"@tiptap/extension-image": "^2.10.4",
23-
"@tiptap/extension-link": "^2.10.4",
24-
"@tiptap/extension-placeholder": "^2.11.3",
25-
"@tiptap/extension-subscript": "^2.10.4",
26-
"@tiptap/extension-superscript": "^2.10.4",
27-
"@tiptap/extension-text-align": "^2.10.4",
28-
"@tiptap/extension-text-style": "^2.10.4",
29-
"@tiptap/extension-underline": "^2.10.4",
30-
"@tiptap/extension-youtube": "^2.10.4",
20+
"@tiptap/core": "^3.7.2",
21+
"@tiptap/extension-color": "^3.7.2",
22+
"@tiptap/extension-highlight": "^3.6.6",
23+
"@tiptap/extension-image": "^3.6.1",
24+
"@tiptap/extension-link": "^3.6.7",
25+
"@tiptap/extension-placeholder": "^3.6.7",
26+
"@tiptap/extension-subscript": "^3.6.7",
27+
"@tiptap/extension-superscript": "^3.6.7",
28+
"@tiptap/extension-text-align": "^3.6.7",
29+
"@tiptap/extension-text-style": "^3.7.2",
30+
"@tiptap/extension-underline": "^3.6.7",
31+
"@tiptap/extension-youtube": "^3.6.7",
32+
"@tiptap/markdown": "^3.7.2",
3133
"react": "^18.3.1",
3234
"react-dom": "^18.3.1",
3335
"react-dsfr-tiptap": "*",
3436
"react-hook-form": "^7.54.1",
35-
"tiptap-markdown": "^0.8.10",
3637
"tss-react": "^4.9.14",
3738
"type-route": "^1.1.0",
3839
"validator": "^13.12.0",

‎examples/src/Custom.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ const Custom = () => {
2727
<RichTextEditor.Provider
2828
content={content}
2929
extensions={[
30-
StarterKit,
30+
StarterKit.configure({
31+
link: false, // Disable link from StarterKit to avoid conflicts with our custom one
32+
}),
3133
Link,
3234
Placeholder.configure({
3335
placeholder: "Write something …",

‎examples/src/Markdown.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,13 @@ const Markdown = () => {
4242
extensionLoader={extensionLoader}
4343
onContentUpdate={setContent}
4444
/>
45-
<pre>{content}</pre>
45+
<pre
46+
style={{
47+
whiteSpace: "pre-wrap",
48+
}}
49+
>
50+
<code>{content}</code>
51+
</pre>
4652
</>
4753
);
4854
};

‎examples/src/Tiptap.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const extensionLoader = {
1010
color: () =>
1111
Promise.all([
1212
import("@tiptap/extension-color").then((module) => module.default),
13-
import("@tiptap/extension-text-style").then((module) => module.default),
13+
import("@tiptap/extension-text-style").then(({ TextStyle }) => TextStyle),
1414
]),
1515
highlight: () => import("@tiptap/extension-highlight").then((module) => module.default),
1616
image: () => import("@tiptap/extension-image").then((module) => module.default),

‎package-lock.json‎

Lines changed: 331 additions & 412 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-dsfr-tiptap/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Vous devez également avoir installé les dépendances suivantes sur votre proje
3838
Pour utiliser l'éditeur markdown, installez les dépendances supplémentaires avec la commande:
3939

4040
```bash
41-
npm i tiptap-markdown
41+
npm i @tiptap/markdown
4242
```
4343

4444
(ou installez avec le package manager de votre choix)
@@ -147,7 +147,7 @@ Puis configurez le composant `<RichTextEditor>` en lui ajoutant les extensions e
147147

148148
```tsx
149149
import { RichTextEditor } from "react-dsfr-tiptap";
150-
import StarterKit from "@tiptap/extension-starter-kit";
150+
import StarterKit from "@tiptap/extension-kit";
151151

152152
import Color from "@tiptap/extension-color";
153153
import Highlight from "@tiptap/extension-highlight";
@@ -200,7 +200,7 @@ et activez les boutons dans le menu:
200200
import { markdownEditorDefaultControls, RichTextEditor } from "react-dsfr-tiptap";
201201
import { ControlImage, ControlLink, ControlUnlink, ControlYoutube } from "react-dsfr-tiptap/dialog";
202202
import "react-dsfr-tiptap/index.css";
203-
import StarterKit from "@tiptap/extension-starter-kit";
203+
import StarterKit from "@tiptap/extension-kit";
204204

205205
import Image from "@tiptap/extension-image";
206206
import Link from "@tiptap/extension-link";
@@ -228,7 +228,7 @@ ou via la props `controlMap`:
228228
import { RichTextEditor } from "react-dsfr-tiptap";
229229
import { ControlImage, ControlLink, ControlUnlink, ControlYoutube } from "react-dsfr-tiptap/dialog";
230230
import "react-dsfr-tiptap/index.css";
231-
import StarterKit from "@tiptap/extension-starter-kit";
231+
import StarterKit from "@tiptap/extension-kit";
232232

233233
import Image from "@tiptap/extension-image";
234234
import Link from "@tiptap/extension-link";
@@ -263,7 +263,7 @@ Par exemple:
263263
import { markdownEditorDefaultControls, RichTextEditor } from "react-dsfr-tiptap";
264264
import { ControlImage, ControlLink, ControlUnlink, ControlYoutube } from "react-dsfr-tiptap/dialog";
265265
import "react-dsfr-tiptap/index.css";
266-
import StarterKit from "@tiptap/extension-starter-kit";
266+
import StarterKit from "@tiptap/extension-kit";
267267

268268
const extensionLoader = {
269269
color: () =>
@@ -299,7 +299,7 @@ function MyComponent() {
299299

300300
Dans ce cas les extensions configurées dans `extensionLoader` ne seront chargés si cela est nécessaire en fonction des boutons que vous définissez dans la props `controls`.
301301

302-
Dans l'exemple ci-dessus, seul les extensions `@tiptap/extension-color`, `@tiptap/extension-text-style` et `@tiptap/extension-underline` (en plus de l'extension `@tiptap/extension-starter-kit` qui est chargée de base) ne seront chargées (car ces extensions sont nécéssaires pour les boutons `"Color"` et `"Underline"`).
302+
Dans l'exemple ci-dessus, seul les extensions `@tiptap/extension-color`, `@tiptap/extension-text-style` et `@tiptap/extension-underline` (en plus de l'extension `@tiptap/extension-kit` qui est chargée de base) ne seront chargées (car ces extensions sont nécéssaires pour les boutons `"Color"` et `"Underline"`).
303303

304304
Vous pouvez aussi réutiliser la configuration via cette variable `extensionLoader` dans plusieurs instances de `<RichTextEditor>` ou `<MarkdownEditor>`.
305305

@@ -348,7 +348,7 @@ Pour le composant `RichTextEditor`:
348348
["Undo", "Redo"],
349349
];
350350
```
351-
- `defaultExtensions` est égal à: `[require("@tiptap/starter-kit"), require("tiptap-markdown")]`
351+
- `defaultExtensions` est égal à: `[require("@tiptap/starter-kit"), require("TypeScript icon, indicating that this package has built-in type declarations")]`
352352

353353
#### Props `RichTextEditor`
354354

‎packages/react-dsfr-tiptap/jest.config.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ export default {
55
transform: {
66
"^.+.[jt]sx?$": ["ts-jest", {}],
77
},
8-
transformIgnorePatterns: ["/node_modules/(?!(@codegouvfr)/)"],
8+
// Transform ESM packages used by @tiptap/markdown (and allow DSFR package)
9+
// marked ships ESM only which Jest needs to transform when imported from node_modules
10+
transformIgnorePatterns: ["/node_modules/(?!(@codegouvfr|@tiptap/markdown|marked)/)"],
911
moduleNameMapper: {
1012
"\\.css$": "<rootDir>/__mocks__/styleMock.ts",
1113
},

‎packages/react-dsfr-tiptap/package.json‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -62,53 +62,56 @@
6262
"build": "tsup src/index.ts src/dialog.ts src/markdown.ts --format cjs,esm --dts --clean",
6363
"test": "jest",
6464
"prepublishOnly": "npm run build",
65-
"check-types": "tsc --noEmit",
65+
"check-types": "tsc -b --noEmit",
6666
"check-exports": "attw --pack .",
6767
"changelog": "changelog"
6868
},
6969
"dependencies": {
70-
"@tiptap/pm": "^2.10.4",
71-
"@tiptap/react": "^2.10.4",
72-
"@tiptap/starter-kit": "^2.10.4"
70+
"@tiptap/core": "^3.7.2",
71+
"@tiptap/pm": "^3.7.2",
72+
"@tiptap/react": "^3.6.7",
73+
"@tiptap/starter-kit": "^3.6.0"
7374
},
7475
"devDependencies": {
7576
"@arethetypeswrong/cli": "^0.18.0",
7677
"@jest/globals": "^30.0.0",
7778
"@testing-library/dom": "^10.4.0",
7879
"@testing-library/jest-dom": "^6.6.3",
7980
"@testing-library/react": "^16.1.0",
80-
"@tiptap/extension-color": "^2.10.4",
81-
"@tiptap/extension-image": "^2.10.4",
82-
"@tiptap/extension-link": "^2.10.4",
83-
"@tiptap/extension-youtube": "^2.10.4",
81+
"@tiptap/extension-color": "^3.7.2",
82+
"@tiptap/extension-text-style": "^3.7.2",
83+
"@tiptap/extension-image": "^3.6.1",
84+
"@tiptap/extension-link": "^3.6.7",
85+
"@tiptap/extension-youtube": "^3.6.7",
86+
"@tiptap/extension-highlight": "^3.6.6",
87+
"@tiptap/markdown": "^3.7.2",
8488
"@types/jest": "^30.0.0",
8589
"@types/react": "^18.3.17",
8690
"@types/react-dom": "^18.3.5",
8791
"generate-changelog": "^1.8.0",
8892
"jest": "^30.0.0",
8993
"jest-environment-jsdom": "^30.0.0",
90-
"tiptap-markdown": "^0.8.10",
9194
"ts-jest": "^29.2.5",
9295
"tsup": "^8.3.5",
9396
"typescript": "~5.6.2"
9497
},
9598
"peerDependencies": {
9699
"@codegouvfr/react-dsfr": "^1.16.4",
97100
"@hookform/resolvers": "^4.0.0 || ^5.0.0",
98-
"@tiptap/extension-color": "^2.10.4",
99-
"@tiptap/extension-highlight": "^2.10.4",
100-
"@tiptap/extension-image": "^2.10.4",
101-
"@tiptap/extension-link": "^2.10.4",
102-
"@tiptap/extension-subscript": "^2.10.4",
103-
"@tiptap/extension-superscript": "^2.10.4",
104-
"@tiptap/extension-text-align": "^2.10.4",
105-
"@tiptap/extension-text-style": "^2.10.4",
106-
"@tiptap/extension-underline": "^2.10.4",
107-
"@tiptap/extension-youtube": "^2.10.4",
101+
"@tiptap/extension-color": "^3.0.0",
102+
"@tiptap/extension-highlight": "^3.0.0",
103+
"@tiptap/extension-image": "^3.0.0",
104+
"@tiptap/extension-link": "^3.0.0",
105+
"@tiptap/extension-subscript": "^3.0.0",
106+
"@tiptap/extension-superscript": "^3.0.0",
107+
"@tiptap/extension-text-align": "^3.0.0",
108+
"@tiptap/extension-text-style": "^3.0.0",
109+
"@tiptap/extension-underline": "^3.0.0",
110+
"@tiptap/extension-youtube": "^3.0.0",
111+
"@tiptap/markdown": "^3.7.2",
108112
"react": "^18.3.1",
109113
"react-dom": "^18.3.1",
110114
"react-hook-form": "^7.54.1",
111-
"tiptap-markdown": "^0.8.10",
112115
"tss-react": "^4.9.14",
113116
"validator": "^13.12.0",
114117
"yup": "^1.6.1"
@@ -150,7 +153,7 @@
150153
"react-hook-form": {
151154
"optional": true
152155
},
153-
"tiptap-markdown": {
156+
"@tiptap/markdown": {
154157
"optional": true
155158
},
156159
"validator": {

‎packages/react-dsfr-tiptap/src/components/MarkdownEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@ const MarkdownEditor = ((props: IMarkdownEditorProps) => {
3232

3333
function handleUpdate(props: EditorEvents["update"]) {
3434
onUpdate?.(props);
35-
onContentUpdate?.(props.editor.storage.markdown.getMarkdown());
35+
onContentUpdate?.(props.editor.getMarkdown());
3636
}
3737

3838
return (
3939
<RichTextEditorLoader
4040
controls={markdownEditorDefaultControls}
4141
extensions={markdownEditorDefaultExtensions}
42-
markdown
42+
contentType="markdown"
4343
onUpdate={handleUpdate}
4444
{...rest}
4545
/>

‎packages/react-dsfr-tiptap/src/components/Provider.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
import { fr } from "@codegouvfr/react-dsfr";
22
import { useEditor, UseEditorOptions } from "@tiptap/react";
3-
import { ReactNode, useEffect } from "react";
3+
import { ReactNode } from "react";
44
import { tss } from "tss-react";
55

66
import { editorContext } from "../contexts/editor";
77

88
export interface IProviderProps extends UseEditorOptions {
99
children?: ReactNode;
10-
markdown?: boolean;
1110
}
1211

1312
function Provider(props: IProviderProps) {
14-
const { children, markdown, ...rest } = props;
15-
const { content } = rest;
13+
const { children, ...rest } = props;
1614
const editor = useEditor(rest);
1715
const { classes } = useStyles();
1816

19-
useEffect(() => {
20-
if (content != null && editor != null) {
21-
const oldContent = markdown ? editor.storage.markdown.getMarkdown() : editor.getHTML();
22-
if (oldContent !== content) {
23-
editor.commands.setContent(content);
24-
}
25-
}
26-
}, [content, editor, markdown]);
27-
2817
return (
2918
<div className={classes.root}>
3019
<editorContext.Provider value={editor}>{children}</editorContext.Provider>

0 commit comments

Comments
 (0)