From abfba1f61eacec4bf88d867852c3506d023248e2 Mon Sep 17 00:00:00 2001 From: Alessandro Macanha Date: Wed, 21 Jul 2021 13:38:56 -0300 Subject: [PATCH 1/2] fix: fixed problem with link form on WYSIWYG component --- CHANGELOG.md | 2 ++ package-lock.json | 2 +- .../Toolbar/Options/Hyperlink.tsx | 35 ++++++++----------- src/components/WYSIWYGInput/translations.tsx | 3 +- 4 files changed, 19 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ef7ba3..35db463 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- Fixed bug on `WYSIWYGInput` component that cause the link form to not work properly + ## [3.1.0] - 2021-07-12 ### Added diff --git a/package-lock.json b/package-lock.json index 21dff52..a26592c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@perimetre/ui", - "version": "3.0.8", + "version": "3.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/WYSIWYGInput/Toolbar/Options/Hyperlink.tsx b/src/components/WYSIWYGInput/Toolbar/Options/Hyperlink.tsx index 81a1a10..80afa0c 100644 --- a/src/components/WYSIWYGInput/Toolbar/Options/Hyperlink.tsx +++ b/src/components/WYSIWYGInput/Toolbar/Options/Hyperlink.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classnames from 'classnames'; import { EditorState, RichUtils } from 'draft-js'; import { useFormik } from 'formik'; -import React, { useCallback, useRef, useState } from 'react'; +import React, { useCallback, useRef } from 'react'; import { object, string, StringSchema } from 'yup'; import { getLinkIfAny } from '../../../../utils/wysiwyg'; import { Dropdown } from '../../../Dropdown'; @@ -49,9 +49,6 @@ export const Hyperlink: React.FC = ({ translations, isActive, ed // eslint-disable-next-line @typescript-eslint/no-explicit-any const tooltipRef = useRef(null); - // Whether it has initial url - const [hasInitialUrl, setHasInitialUrl] = useState(false); - // A callback used to add a link to the current editorstate const addLink = useCallback( (editorState?: EditorState, link?: string) => { @@ -88,9 +85,6 @@ export const Hyperlink: React.FC = ({ translations, isActive, ed // Update the editor state by toggling the link to null, thus, removing it if (setEditorState) setEditorState(RichUtils.toggleLink(editorState, selection, null)); } - - // Declare that it doesn't has initial url anymore - setHasInitialUrl(false); }, [setEditorState] ); @@ -111,10 +105,18 @@ export const Hyperlink: React.FC = ({ translations, isActive, ed // This is useful because the user can delete a link by not typing anything // So we only validate if the user has typed something, or else the user wouldn't be able // To continue with no text - link && link.length > 0 ? schema.url().required() : schema + link && link.length > 0 + ? schema + .matches( + /((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#-]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/, + translations.linkErrorLabel + ) + .required() + : schema ) .label(translations.linkInputLabel) }), + validateOnChange: false, initialValues: { link: '' }, @@ -138,8 +140,6 @@ export const Hyperlink: React.FC = ({ translations, isActive, ed if (tooltipRef?.current?._tippy?.hide) tooltipRef.current._tippy.hide(); // Clear the form formik.resetForm(); - // Declare that it doesn't has initial url anymore, if any - setHasInitialUrl(false); } }); @@ -148,8 +148,6 @@ export const Hyperlink: React.FC = ({ translations, isActive, ed if (tooltipRef?.current?._tippy?.hide) tooltipRef.current._tippy.hide(); // Clear the form formik.resetForm(); - // Declare that it doesn't has initial url anymore, if any - setHasInitialUrl(false); }, [formik]); return ( @@ -186,7 +184,6 @@ export const Hyperlink: React.FC = ({ translations, isActive, ed - @@ -208,15 +201,15 @@ export const Hyperlink: React.FC = ({ translations, isActive, ed onShow={() => { // When the tooltip opens + // Reset the errors + formik.setErrors({ link: undefined }); + // Get if has link const link = getLinkIfAny(editorState); // Update the formik state formik.setFieldValue('link', link); - // Update whether or not has initial url to enable the button - setHasInitialUrl(!!link); - // Focus the input inputRef?.current?.focus(); }} diff --git a/src/components/WYSIWYGInput/translations.tsx b/src/components/WYSIWYGInput/translations.tsx index edfe0c4..632270e 100644 --- a/src/components/WYSIWYGInput/translations.tsx +++ b/src/components/WYSIWYGInput/translations.tsx @@ -1,7 +1,8 @@ export const defaultWYSIWYGTranslations = { textStyleDropdown: 'Style', linkInputLabel: 'Link', - linkInputSubmit: 'Ok' + linkInputSubmit: 'Ok', + linkErrorLabel: 'Enter a valid url!' }; export type WYSIWYGTranslations = typeof defaultWYSIWYGTranslations; From 3e39a425969ae996b8eb5eec74b9815cb3c78f6b Mon Sep 17 00:00:00 2001 From: Alessandro Macanha Date: Wed, 21 Jul 2021 13:42:06 -0300 Subject: [PATCH 2/2] build: bumping version: 3.1.1 --- CHANGELOG.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35db463..acfab0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +## [3.1.1] - 2021-07-21 + +### Fixed + - Fixed bug on `WYSIWYGInput` component that cause the link form to not work properly ## [3.1.0] - 2021-07-12 diff --git a/package.json b/package.json index 0bf9a97..9ca0cad 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@perimetre/ui", "description": "A component library made by @perimetre", - "version": "3.1.0", + "version": "3.1.1", "repository": { "type": "git", "url": "git+https://github.com/perimetre/ui.git"