From 3c3fdfc092a82fcb7c5bfb00d8b45b78596b7da4 Mon Sep 17 00:00:00 2001 From: Austin Turner Date: Mon, 11 Nov 2024 08:25:28 -0700 Subject: [PATCH] Remove rich text editor This component was not used and had some out-dated dependencies where some transitive dependencies we causing build failures when updating security vulnerability via dependabot --- libs/ui/src/index.ts | 1 - libs/ui/src/lib/form/rich-text/RichText.tsx | 138 ------------------ .../lib/form/rich-text/RichTextToolbar.tsx | 112 -------------- .../lib/form/rich-text/rich-text.stories.tsx | 34 ----- package.json | 7 +- yarn.lock | 72 +-------- 6 files changed, 4 insertions(+), 360 deletions(-) delete mode 100644 libs/ui/src/lib/form/rich-text/RichText.tsx delete mode 100644 libs/ui/src/lib/form/rich-text/RichTextToolbar.tsx delete mode 100644 libs/ui/src/lib/form/rich-text/rich-text.stories.tsx diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index 5234e00b7..eac3af454 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -61,7 +61,6 @@ export * from './lib/form/radio/Radio'; export * from './lib/form/radio/RadioButton'; export * from './lib/form/radio/RadioGroup'; export * from './lib/form/readonly-form-element/ReadOnlyFormElement'; -export * from './lib/form/rich-text/RichText'; export * from './lib/form/search-input/SearchInput'; export * from './lib/form/select/Select'; export * from './lib/form/textarea/Textarea'; diff --git a/libs/ui/src/lib/form/rich-text/RichText.tsx b/libs/ui/src/lib/form/rich-text/RichText.tsx deleted file mode 100644 index 35dcd1b1d..000000000 --- a/libs/ui/src/lib/form/rich-text/RichText.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { css } from '@emotion/react'; -import { useDebounce, useNonInitialEffect } from '@jetstream/shared/ui-utils'; -import classNames from 'classnames'; -import RichTextToolbar from './RichTextToolbar'; -import HelpText from '../../widgets/HelpText'; -import isBoolean from 'lodash/isBoolean'; -import uniqueId from 'lodash/uniqueId'; -import Quill, { DeltaOperation, DeltaStatic, QuillOptionsStatic, Sources } from 'quill'; -import { Fragment, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'; - -const DEFAULT_OPTIONS: QuillOptionsStatic = { - formats: [ - 'header', - 'size', - 'bold', - 'italic', - 'underline', - 'strike', - 'blockquote', - 'list', - 'bullet', - 'link', - 'image', - 'indent', - 'code', - 'code-block', - ], - modules: { - toolbar: { - container: '#toolbar', - }, - }, -}; - -export interface RichTextProps { - label?: string; - isRequired?: boolean; - options?: QuillOptionsStatic; - labelHelp?: string | JSX.Element | null; - debounceTimeMs?: number; - disabled?: boolean; - onChange: (contents: DeltaOperation[]) => void; -} - -export const RichText: FunctionComponent = ({ - label, - isRequired, - labelHelp, - options = {}, - debounceTimeMs = 300, - disabled, - onChange, -}) => { - const [id] = useState(uniqueId('rich-text-')); - const editorContainerRef = useRef(null); - const editorRef = useRef(); - const [contents, setContents] = useState(); - const debouncedContents = useDebounce(contents, debounceTimeMs); - const [hasFocus, setHasFocus] = useState(false); - - const handleTextChange = useCallback( - (delta: DeltaStatic, oldDelta: DeltaStatic, source: Sources) => { - setContents(editorRef.current?.getContents().ops); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [editorContainerRef.current, setContents] - ); - - useEffect(() => { - if (editorContainerRef.current && !editorRef.current) { - editorRef.current = new Quill(editorContainerRef.current, { - ...DEFAULT_OPTIONS, - scrollingContainer: `${id}-container`, - readOnly: !!disabled, - ...options, - }); - editorRef.current.on('text-change', handleTextChange); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [editorContainerRef.current]); - - useNonInitialEffect(() => { - if (isBoolean(disabled) && editorRef.current) { - editorRef.current.enable(!disabled); - } - }, [disabled]); - - useNonInitialEffect(() => { - debouncedContents && onChange(debouncedContents); - }, [debouncedContents, onChange]); - - function handleFocus(focus: boolean) { - setHasFocus(focus); - } - - return ( -
- {label && ( - - - {labelHelp && } - - )} -
-
- -
-
handleFocus(true)} - onBlur={() => handleFocus(false)} - >
-
-
-
-
- ); -}; - -export default RichText; diff --git a/libs/ui/src/lib/form/rich-text/RichTextToolbar.tsx b/libs/ui/src/lib/form/rich-text/RichTextToolbar.tsx deleted file mode 100644 index 284258611..000000000 --- a/libs/ui/src/lib/form/rich-text/RichTextToolbar.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { IconName } from '@jetstream/icon-factory'; -import uniqueId from 'lodash/uniqueId'; -import { FunctionComponent, useState } from 'react'; -import Icon from '../../widgets/Icon'; -import Select from '../select/Select'; - -export interface RichTextToolbarProps { - disabled?: boolean; -} - -export const RichTextToolbar: FunctionComponent = ({ disabled }) => { - const [selectId] = useState(uniqueId('select')); - - /** - * TODO: keyboard navigation, arrows to move between buttons - */ - - return ( - - ); -}; - -export default RichTextToolbar; - -const RichTextToolbarButton: FunctionComponent<{ - className: string; - icon: IconName; - label: string; - tabIndex?: number; - value?: string; - disabled?: boolean; -}> = ({ className, label, icon, tabIndex = -1, value, disabled }) => { - return ( - - ); -}; diff --git a/libs/ui/src/lib/form/rich-text/rich-text.stories.tsx b/libs/ui/src/lib/form/rich-text/rich-text.stories.tsx deleted file mode 100644 index 56d1f3479..000000000 --- a/libs/ui/src/lib/form/rich-text/rich-text.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import { text, boolean, select } from '@storybook/addon-knobs'; -import uniqueId from 'lodash/uniqueId'; -import React from 'react'; -import RichText from './RichText'; - -export default { - component: RichText, - title: 'forms/RichText', -}; - -export const base = () => { - const id = uniqueId('select'); - return ( - - ); -}; diff --git a/package.json b/package.json index 68cafa830..9044b7fb7 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,8 @@ "start:cron:save-analytics-summary": "node dist/apps/cron-tasks/save-analytics-summary.js", "build": "cross-env NODE_ENV=production npm-run-all db:generate build:core build:landing generate:version", "build:pre-deploy": "cross-env NODE_ENV=production npm-run-all --parallel rollbar:upload-sourcemaps db:migrate", - "build:core": "NODE_OPTIONS=--max_old_space_size=8192 nx run-many --target=build --parallel=3 --projects=jetstream,api,download-zip-sw --configuration=production", - "build:ci": "npx nx run-many --target=build --parallel=3 --projects=jetstream,api,download-zip-sw,landing,jetstream-web-extension --configuration=production", + "build:core": "NODE_OPTIONS=--max_old_space_size=8192 nx run-many --output-style=dynamic --target=build --parallel=3 --projects=jetstream,api,download-zip-sw --configuration=production", + "build:ci": "npx nx run-many --output-style=static --target=build --parallel=3 --projects=jetstream,api,download-zip-sw,landing,jetstream-web-extension --configuration=production", "build:affected": "nx affected --target=build --parallel=3 --configuration=production", "build:docker": "cross-env NODE_ENV=production npm-run-all db:generate build:client:docker build:api:docker build:sw build:landing generate:version", "build:test": "npm-run-all db:generate build:client:test build:api:test build:sw build:landing generate:version", @@ -156,7 +156,6 @@ "@types/passport-auth0": "^1.0.4", "@types/passport-local": "^1.0.34", "@types/pg": "^8.11.5", - "@types/quill": "^1.3.10", "@types/react": "18.3.1", "@types/react-dom": "18.3.0", "@types/react-router-dom": "5.3.3", @@ -306,8 +305,6 @@ "pino-pretty": "^10.3.1", "postcss-import": "^12.0.1", "prettier-plugin-prisma": "^3.1.1", - "quill": "^1.3.7", - "quill-delta": "^3.6.3", "react": "18.3.1", "react-data-grid": "7.0.0-beta.41", "react-dnd": "^16.0.1", diff --git a/yarn.lock b/yarn.lock index 535376c9b..b68d451d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8892,13 +8892,6 @@ resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== -"@types/quill@^1.3.10": - version "1.3.10" - resolved "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz" - integrity sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw== - dependencies: - parchment "^1.1.2" - "@types/range-parser@*": version "1.2.4" resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz" @@ -11336,11 +11329,6 @@ clone@^1.0.2: resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== -clone@^2.1.1: - version "2.1.2" - resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz" - integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w== - cloudinary-core@^2.10.2: version "2.12.3" resolved "https://registry.npmjs.org/cloudinary-core/-/cloudinary-core-2.12.3.tgz" @@ -12279,18 +12267,6 @@ deep-eql@^4.1.3: dependencies: type-detect "^4.0.0" -deep-equal@^1.0.1: - version "1.1.1" - resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz" - integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g== - dependencies: - is-arguments "^1.0.4" - is-date-object "^1.0.1" - is-regex "^1.0.4" - object-is "^1.0.1" - object-keys "^1.1.1" - regexp.prototype.flags "^1.2.0" - deep-equal@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" @@ -13633,11 +13609,6 @@ event-target-shim@^5.0.0: resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz" integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ== -eventemitter3@^2.0.3: - version "2.0.3" - resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz" - integrity sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg== - eventemitter3@^4.0.0: version "4.0.7" resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz" @@ -13912,11 +13883,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-diff@1.1.2: - version "1.1.2" - resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz" - integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig== - fast-glob@3.2.7: version "3.2.7" resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz" @@ -15832,7 +15798,7 @@ is-promise@^4.0.0: resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-4.0.0.tgz#42ff9f84206c1991d26debf520dd5c01042dd2f3" integrity sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ== -is-regex@^1.0.4, is-regex@^1.1.4: +is-regex@^1.1.4: version "1.1.4" resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz" integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg== @@ -18649,14 +18615,6 @@ object-inspect@^1.13.1: resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2" integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ== -object-is@^1.0.1: - version "1.1.5" - resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz" - integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw== - dependencies: - call-bind "^1.0.2" - define-properties "^1.1.3" - object-keys@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz" @@ -19120,11 +19078,6 @@ param-case@^3.0.4: dot-case "^3.0.4" tslib "^2.0.3" -parchment@^1.1.2, parchment@^1.1.4: - version "1.1.4" - resolved "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz" - integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg== - parent-module@^1.0.0: version "1.0.1" resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz" @@ -20702,27 +20655,6 @@ quick-lru@^5.1.1: resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== -quill-delta@^3.6.2, quill-delta@^3.6.3: - version "3.6.3" - resolved "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz" - integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg== - dependencies: - deep-equal "^1.0.1" - extend "^3.0.2" - fast-diff "1.1.2" - -quill@^1.3.7: - version "1.3.7" - resolved "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz" - integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g== - dependencies: - clone "^2.1.1" - deep-equal "^1.0.1" - eventemitter3 "^2.0.3" - extend "^3.0.2" - parchment "^1.1.4" - quill-delta "^3.6.2" - rambda@^9.1.0: version "9.3.0" resolved "https://registry.yarnpkg.com/rambda/-/rambda-9.3.0.tgz#12b5c336320e6c5fdb1fbe4d38ab69f4983d821c" @@ -21151,7 +21083,7 @@ regexp-to-ast@0.5.0: resolved "https://registry.npmjs.org/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz" integrity sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw== -regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.3: +regexp.prototype.flags@^1.4.3: version "1.4.3" resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz" integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==