From 1b7ad1f00bbf44b798c2ca39ce1ef4054573b553 Mon Sep 17 00:00:00 2001 From: Benjamin Piouffle Date: Fri, 20 Dec 2024 14:46:59 +0100 Subject: [PATCH] deps(Trix): Move back to official editor --- .storybook/preview.js | 2 +- components/RichTextEditor.tsx | 10 ++++++---- package-lock.json | 28 ++++++++++++++++++++-------- package.json | 2 +- pages/_app.js | 2 +- renovate.json | 2 +- 6 files changed, 30 insertions(+), 16 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index fe67a4a5e0f..6e5642a9a16 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -14,7 +14,7 @@ import UserProvider from '../components/UserProvider'; import 'react-pdf/dist/esm/Page/TextLayer.css'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'nprogress/nprogress.css'; -import '@opencollective/trix/dist/trix.css'; +import 'trix/dist/trix.css'; import '../public/static/styles/app.css'; // config file diff --git a/components/RichTextEditor.tsx b/components/RichTextEditor.tsx index 96524b5ddee..43b93131d18 100644 --- a/components/RichTextEditor.tsx +++ b/components/RichTextEditor.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { css } from '@styled-system/css'; -import { get, remove } from 'lodash'; +import { get } from 'lodash'; import styled from 'styled-components'; import { v4 as uuid } from 'uuid'; import { isURL } from 'validator'; @@ -272,7 +272,7 @@ export default class RichTextEditor extends React.Component { this.Trix.config.blockAttributes.heading1 = { tagName: 'h3' }; this.Trix.config.attachments.preview.caption = { name: false, size: false }; - remove(this.Trix.config.parser.forbiddenElements, type => type === 'iframe'); // Allow iframes for video embeds - this.Trix.config.parser.allowedAttributes.push('frameborder', 'allowfullscreen'); + if (this.props.videoEmbedEnabled) { + this.Trix.config.dompurify.ADD_TAGS = ['iframe']; // Allow iframes for video embeds + this.Trix.config.dompurify.ADD_ATTR = ['allowfullscreen', 'frameborder']; + } }; trixInitialize = event => { diff --git a/package-lock.json b/package-lock.json index 3095962d69c..dc631e5741e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,6 @@ "@hyperwatch/hyperwatch": "4.0.0", "@icons-pack/react-simple-icons": "^10.0.0", "@opencollective/taxes": "5.0.0", - "@opencollective/trix": "2.1.6", "@popperjs/core": "2.11.8", "@radix-ui/react-accordion": "1.2.1", "@radix-ui/react-alert-dialog": "1.1.2", @@ -134,6 +133,7 @@ "styled-system": "5.1.5", "tailwind-merge": "2.5.4", "throng": "5.0.0", + "trix": "2.1.11", "uuid": "10.0.0", "validator": "13.12.0", "webpack-manifest-plugin": "5.0.0", @@ -7184,12 +7184,6 @@ "npm": ">9.0.0" } }, - "node_modules/@opencollective/trix": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/@opencollective/trix/-/trix-2.1.6.tgz", - "integrity": "sha512-O6yVkQSxzwnePjQjsAXmzmyekSo4yhRcOsfeqZcOwonbilEbDgvuPneJq7dEL3V5PLE0ExkuEVOrBKz7IR2hQg==", - "license": "MIT" - }, "node_modules/@peculiar/asn1-schema": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.8.tgz", @@ -17757,7 +17751,7 @@ "version": "2.0.7", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", - "dev": true + "devOptional": true }, "node_modules/@types/unist": { "version": "2.0.10", @@ -23422,6 +23416,15 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz", + "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", @@ -40255,6 +40258,15 @@ "node": ">= 14.0.0" } }, + "node_modules/trix": { + "version": "2.1.11", + "resolved": "https://registry.npmjs.org/trix/-/trix-2.1.11.tgz", + "integrity": "sha512-xAndkKAQCZ7DbLvfU5svNEEo3+nnIh4uUTwZ3VAPgDfhGv0m82yjxS6b1BR3c8YnBM9brJgFsAZKwBHiMl2kjA==", + "license": "MIT", + "dependencies": { + "dompurify": "^3.2.3" + } + }, "node_modules/ts-api-utils": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", diff --git a/package.json b/package.json index 4bd797c4ba4..9a5245052de 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@hyperwatch/hyperwatch": "4.0.0", "@icons-pack/react-simple-icons": "^10.0.0", "@opencollective/taxes": "5.0.0", - "@opencollective/trix": "2.1.6", + "trix": "2.1.11", "@popperjs/core": "2.11.8", "@radix-ui/react-accordion": "1.2.1", "@radix-ui/react-alert-dialog": "1.1.2", diff --git a/pages/_app.js b/pages/_app.js index 4817eb5b497..9a311bdaa2a 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -23,7 +23,7 @@ import { WorkspaceProvider } from '../components/WorkspaceProvider'; import 'react-pdf/dist/esm/Page/TextLayer.css'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'nprogress/nprogress.css'; -import '@opencollective/trix/dist/trix.css'; +import 'trix/dist/trix.css'; import '../public/static/styles/app.css'; import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'; diff --git a/renovate.json b/renovate.json index 918f91e0b96..3c3dd174104 100644 --- a/renovate.json +++ b/renovate.json @@ -6,7 +6,7 @@ "assignees": ["betree"], "matchPackageNames": [ "@opencollective/taxes", - "@opencollective/trix", + "trix", "@sentry/**", "interweave**", "lottie-react",