diff --git a/applications/browser-extension/src/components/richTextEditor/RichTextEditor.module.scss b/applications/browser-extension/src/components/richTextEditor/RichTextEditor.module.scss index 2f0a2671de..5601949162 100644 --- a/applications/browser-extension/src/components/richTextEditor/RichTextEditor.module.scss +++ b/applications/browser-extension/src/components/richTextEditor/RichTextEditor.module.scss @@ -44,10 +44,29 @@ } .error { + display: flex !important; + align-items: center; color: #dc3545; padding: 4px 8px; font-size: 0.875rem; position: absolute; bottom: 4px; left: 4px; + + :global(.btn) { + margin-left: 8px; + color: #dc3545; + padding: 0; + border: none; + background-color: transparent; + + &:focus, + &:active, + &:hover, + &:active:focus { + color: #dc3545; + background-color: transparent; + box-shadow: none !important; + } + } } diff --git a/applications/browser-extension/src/components/richTextEditor/RichTextEditor.tsx b/applications/browser-extension/src/components/richTextEditor/RichTextEditor.tsx index bfbf5b1e37..a3a142d85a 100644 --- a/applications/browser-extension/src/components/richTextEditor/RichTextEditor.tsx +++ b/applications/browser-extension/src/components/richTextEditor/RichTextEditor.tsx @@ -25,9 +25,12 @@ import React, { useState } from "react"; import Toolbar from "@/components/richTextEditor/toolbar/Toolbar"; import { type UUID } from "@/types/stringTypes"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons"; +import { + faExclamationCircle, + faTimes, +} from "@fortawesome/free-solid-svg-icons"; import ErrorContext from "@/components/richTextEditor/ErrorContext"; -import { Toast } from "react-bootstrap"; +import { Button, Toast } from "react-bootstrap"; type EditorProps = EditorProviderProps & { // A PixieBrix asset database ID to use for uploading images. If not included, the image extension will be disabled. @@ -71,7 +74,22 @@ const RichTextEditor: React.FunctionComponent = ({ ]} slotBefore={} slotAfter={ - {setError(null)}} className={styles.error} autohide> {error} + { + setError(null); + }} + className={styles.error} + autohide + animation={false} + delay={5000} + > + {" "} + {error} + + } {...props} /> diff --git a/applications/browser-extension/src/components/richTextEditor/toolbar/ImageButton/index.tsx b/applications/browser-extension/src/components/richTextEditor/toolbar/ImageButton/index.tsx index 51af0256e6..feafac3755 100644 --- a/applications/browser-extension/src/components/richTextEditor/toolbar/ImageButton/index.tsx +++ b/applications/browser-extension/src/components/richTextEditor/toolbar/ImageButton/index.tsx @@ -23,7 +23,7 @@ import { faImage } from "@fortawesome/free-solid-svg-icons"; import { assertNotNullish } from "@/utils/nullishUtils"; import useUploadAsset from "@/components/richTextEditor/toolbar/ImageButton/useUploadAsset"; import { validateUUID } from "@/types/helpers"; -import {useShowError} from "@/components/richTextEditor/ErrorContext"; +import { useShowError } from "@/components/richTextEditor/ErrorContext"; const getAssetDatabaseId = (editor: Editor) => { const imageExtension = editor.options.extensions.find( @@ -71,9 +71,7 @@ const ImageButton: React.FunctionComponent = () => { .setImage({ src: downloadUrl.href, alt: "" }) .run(); } catch (error) { - // TODO: Implement error message handling in UI - setError("Failed to upload image asset, try again"); - + setError("Failed to upload image, try again"); reportError( new Error("Failed to upload image asset", { cause: error,