Merge pull request #86 from Akshansr/secureRichTextEditor

creates secure rich text editor component.

package.json

@@ -46,6 +46,7 @@
     "@fullcalendar/timegrid": "^6.1.15",
     "@hello-pangea/dnd": "^16.6.0",
     "@pega/cosmos-react-core": "^6.0.10",
+    "@pega/cosmos-react-rte": "^6.0.10",
     "@pega/cosmos-react-social": "^6.0.10",
     "@pega/cosmos-react-work": "^6.0.10",
     "gantt-task-react": "^0.3.9",

src/components/Pega_Extensions_SecureRichText/Docs.mdx

@@ -0,0 +1,15 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+The Secure Rich Text editor is using the same presentational RTE component used in the Constellation application but the ability to insert URLs and images from the toolbar has been removed.
+This component can be used if you want to prevent users to insert any url or images into the HTML and prevent XSS attacks.
+
+<Primary />
+
+## Props
+
+<Controls />

src/components/Pega_Extensions_SecureRichText/config.json

@@ -0,0 +1,111 @@
+{
+  "name": "Pega_Extensions_SecureRichText",
+  "label": "Secure rich text editor",
+  "description": "Secure rich text editor",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_SecureRichText",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "icon": "images/pz-text-area-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}

src/components/Pega_Extensions_SecureRichText/demo.stories.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PegaExtensionsSecureRichText } from './index';
+
+const fieldMetadata = {
+  classID: 'DIXL-MediaCo-Work-NewService',
+  type: 'Text',
+  displayAs: 'pxTextArea',
+  label: 'Paragraph sample'
+};
+
+const stateProps = {
+  value: '.ParagraphSample',
+  hasSuggestions: false
+};
+
+export default {
+  title: 'Fields/Secure rich text editor',
+  argTypes: {
+    getPConnect: {
+      table: {
+        disable: true
+      }
+    },
+    displayMode: {
+      table: {
+        disable: true
+      }
+    },
+    additionalProps: {
+      table: {
+        disable: true
+      }
+    },
+    formatter: {
+      table: {
+        disable: true
+      }
+    },
+    isTableFormatter: {
+      table: {
+        disable: true
+      }
+    },
+    fieldMetadata: {
+      table: {
+        disable: true
+      }
+    }
+  },
+  component: PegaExtensionsSecureRichText
+};
+
+const setPCore = () => {
+  (window as any).PCore = {
+    getComponentsRegistry: () => {
+      return {
+        getLazyComponent: (f: string) => f
+      };
+    },
+    getEnvironmentInfo: () => {
+      return {
+        getTimeZone: () => 'local'
+      };
+    },
+    getActionsSequencer: () => {
+      return {
+        registerBlockingAction: () => {
+          return new Promise(resolve => {
+            resolve();
+          });
+        }
+      };
+    },
+    getAttachmentUtils: () => {
+      return {
+        uploadAttachment: () => {
+          return new Promise(resolve => {
+            resolve({
+              ID: 'sample'
+            });
+          });
+        }
+      };
+    }
+  };
+};
+
+type Story = StoryObj<typeof PegaExtensionsSecureRichText>;
+
+export const Default: Story = {
+  render: args => {
+    setPCore();
+    const props = {
+      ...args,
+
+      getPConnect: () => {
+        return {
+          getStateProps: () => {
+            return stateProps;
+          },
+          getServerURL: () => 'https://www.google.com',
+          getActionsApi: () => {
+            return {
+              openWorkByHandle: () => {
+                /* nothing */
+              },
+              createWork: () => {
+                /* nothing */
+              },
+              updateFieldValue: () => {
+                /* nothing */
+              },
+              triggerFieldChange: () => {
+                /* nothing */
+              },
+              showCasePreview: () => {
+                /* nothing */
+              }
+            };
+          },
+          getActions: () => {
+            return {
+              ACTION_OPENWORKBYHANDLE: 'openWorkByHandle'
+            };
+          },
+          clearErrorMessages: () => {
+            /* nothing */
+          },
+          getValidationApi: () => {
+            return {
+              validate: () => {
+                /* nothing */
+              }
+            };
+          },
+          getContextName: () => 'primary',
+          getLocalizedValue: () => 'local value'
+        };
+      }
+    };
+    return <PegaExtensionsSecureRichText {...props} />;
+  },
+  args: {
+    label: 'Paragraph Sample',
+    value: '',
+    helperText: 'Paragraph Helper Text',
+    testId: 'paragraph-12345678',
+    placeholder: 'Paragraph Placeholder',
+    validatemessage: '',
+    disabled: false,
+    readOnly: false,
+    required: false,
+    hideLabel: false
+  }
+};

src/components/Pega_Extensions_SecureRichText/demo.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+test('renders secure rich text editor component with default args', async () => {
+  render(<Default />);
+  expect(screen.getByLabelText('Paragraph Sample')).toBeInTheDocument();
+  expect(screen.getByText('Paragraph Helper Text')).toBeInTheDocument();
+  expect(screen.getByTestId('paragraph-12345678')).toBeInTheDocument();
+});
+
+test('renders the value in read only mode', async () => {
+  render(<Default readOnly value='test value' />);
+  expect(screen.getByText('test value')).toBeInTheDocument();
+});
+
+test('Should render no value if there no content in display only mode', async () => {
+  render(<Default displayMode='DISPLAY_ONLY' formatter='TextInput' />);
+  expect(screen.getByText('no value')).toBeInTheDocument();
+});
+
+test('Should render the value if there is content in display only mode', async () => {
+  render(
+    <Default displayMode='DISPLAY_ONLY' formatter='TextInput' value='test value' isTableFormatter />
+  );
+  expect(screen.getByText('test value')).toBeInTheDocument();
+});