Merge release/v3.2.0 into main branch (#1244)

* fixes class name redundancies (#1241)

* Allow RichTextEditor to be read-only (#1243)

Author: github-actions[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "dependencies": {
     "@tiptap/core": "^2.3.1",
     "@tiptap/extension-bold": "^2.3.1",

src/FlexContainer/utils.ts

@@ -5,7 +5,7 @@ export function computeBreakpointClassNames(
   props: Omit<FlexContainerProps, 'children' | 'className'>,
   bp?: 'xs' | 'sm' | 'md' | 'lg'| 'xl' | 'xxl',
 ): string[] {
-  if (bp && bp in props) {
+  if (bp) {
     const attributes = props[bp];
     return [
       styles[`${bp}_alignItems_${attributes?.alignItems}`],

src/RichTextEditor/RichTextEditor.test.tsx

@@ -2,8 +2,17 @@ import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import RichTextEditor, { type RichTextEditorProps } from './RichTextEditor';
+import { RichTextEditorDefaultActionsArray } from './richTextEditorActions';
 
 describe('<RichTextEditor />', () => {
+  const elements = {
+    textbox: {
+      find: () => screen.findByRole('textbox'),
+    },
+    allButtons: {
+      findAll: () => screen.findAllByRole('button'),
+    },
+  };
   const Setup = (overrides: Omit<RichTextEditorProps, 'id' | 'onChange'> = {}) => (
     <RichTextEditor
       id="some-id"
@@ -27,4 +36,20 @@ describe('<RichTextEditor />', () => {
       expect(await screen.findByText('hello world')).toBeInTheDocument();
     });
   });
+
+  describe('with prop editable set to false', () => {
+    it('renders disabled editor', async () => {
+      render(<Setup editable={false} initialValue="<p>hello world</p>" />);
+
+      expect(await screen.findByText('hello world')).toBeInTheDocument();
+      const textbox = await elements.textbox.find();
+      expect(textbox).toBeInTheDocument();
+
+      const buttons = await elements.allButtons.findAll();
+      const disabledButtons = buttons.filter((button) => button.hasAttribute('disabled'));
+
+      expect(disabledButtons.length).toBe(RichTextEditorDefaultActionsArray.length);
+      expect(textbox.firstChild).toHaveAttribute('contenteditable', 'false');
+    });
+  });
 });

src/RichTextEditor/RichTextEditor.tsx

@@ -4,7 +4,7 @@ import type { Extension, Node as TipTapNode, Mark } from '@tiptap/core';
 import './RichTextEditor.scss';
 
 import React, {
- forwardRef, useImperativeHandle, type AriaAttributes, type ForwardedRef,
+  forwardRef, useImperativeHandle, type AriaAttributes, type ForwardedRef, useEffect,
 } from 'react';
 
 import classNames from 'classnames';
@@ -81,6 +81,7 @@ export type RichTextEditorProps = {
    https://tiptap.dev/docs/editor/guide/custom-extensions
   */
   customExtensions?: (Extension | TipTapNode | Mark)[];
+  editable?: boolean;
   hasErrors?: boolean;
   id: string;
   /**
@@ -105,6 +106,7 @@ const RichTextEditor = forwardRef((
     allowedTags,
     ariaAttributes,
     availableActions = RichTextEditorDefaultActionsArray,
+    editable = true,
     characterLimit,
     className,
     hasErrors,
@@ -189,6 +191,7 @@ const RichTextEditor = forwardRef((
 
       onChange(sanitizedHtml);
     },
+    editable,
   });
 
   useImperativeHandle(ref, () => ({
@@ -198,6 +201,12 @@ const RichTextEditor = forwardRef((
     },
   }));
 
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(editable);
+    }
+  }, [editor, editable]);
+
   return (
     editor ? (
       <div
@@ -207,6 +216,7 @@ const RichTextEditor = forwardRef((
         {availableActions.length > 0 && (
           <RichTextEditorMenuBar
             availableActions={availableActions}
+            editable={editable}
             editor={editor}
           />
         )}

src/RichTextEditor/RichTextEditorMenuBar.tsx

@@ -3,8 +3,6 @@ import type { Editor } from '@tiptap/core';
 import './RichTextEditorMenuBar.scss';
 
 import React from 'react';
-import * as propTypes from 'prop-types';
-
 import classNames from 'classnames';
 
 import {
@@ -17,68 +15,74 @@ import {
 } from '@fortawesome/pro-regular-svg-icons';
 import IconButton from '../IconButton';
 
-import { RichTextEditorActions, RichTextEditorAllActionsArray } from './richTextEditorActions';
+import { RichTextEditorActions } from './richTextEditorActions';
 import { createActionHandlers } from './actionHandlers';
 
 type RichTextEditorMenuBarProps = {
   availableActions: typeof RichTextEditorActions[keyof typeof RichTextEditorActions][];
   editor: Editor;
+  editable?: boolean
 }
 
 function RichTextEditorMenuBar({
   availableActions,
   editor,
+  editable = true,
 }: RichTextEditorMenuBarProps) {
   const actionHandlers = createActionHandlers(editor);
 
   const actions = [
     {
       label: 'Bold',
       name: RichTextEditorActions.BOLD,
-      disabled: availableActions.includes(RichTextEditorActions.BOLD) && !editor.can()
-        .chain()
-        .focus()
-        .toggleBold()
-        .run(),
+      disabled: !editable || (
+        availableActions.includes(RichTextEditorActions.BOLD) && !editor.can()
+          .chain()
+          .focus()
+          .toggleBold()
+          .run()
+        ),
       onClick: actionHandlers.bold,
       icon: faBold,
     },
     {
       label: 'Italic',
       name: RichTextEditorActions.ITALIC,
-      disabled: availableActions.includes(RichTextEditorActions.ITALIC) && !editor.can()
-        .chain()
-        .focus()
-        .toggleItalic()
-        .run(),
+      disabled: !editable || (
+        availableActions.includes(RichTextEditorActions.ITALIC) && !editor.can()
+          .chain()
+          .focus()
+          .toggleItalic()
+          .run()
+        ),
       onClick: actionHandlers.italic,
       icon: faItalic,
     },
     {
       label: 'Link',
       name: RichTextEditorActions.LINK,
-      disabled: false,
+      disabled: !editable,
       onClick: actionHandlers.link,
       icon: faLink,
     },
     {
       label: 'Unlink',
       name: RichTextEditorActions.UNLINK,
-      disabled: availableActions.includes(RichTextEditorActions.LINK) && !editor.isActive('link'),
+      disabled: !editable || (availableActions.includes(RichTextEditorActions.LINK) && !editor.isActive('link')),
       onClick: actionHandlers.unlink,
       icon: faUnlink,
     },
     {
       label: 'Unordered List',
       name: RichTextEditorActions.UNORDERED_LIST,
-      disabled: false,
+      disabled: !editable,
       onClick: actionHandlers.unorderedList,
       icon: faListUl,
     },
     {
       label: 'Ordered List',
       name: RichTextEditorActions.ORDERED_LIST,
-      disabled: false,
+      disabled: !editable,
       onClick: actionHandlers.orderedList,
       icon: faListOl,
     },
@@ -104,10 +108,5 @@ function RichTextEditorMenuBar({
   );
 }
 
-RichTextEditorMenuBar.propTypes = {
-  availableActions: propTypes.arrayOf(propTypes.oneOf(RichTextEditorAllActionsArray)).isRequired,
-  editor: propTypes.object.isRequired,
-};
-
 // eslint-disable-next-line import/no-default-export
 export default RichTextEditorMenuBar;