feat: add Rich Text Editor component (v0) [WIP]

build-tools/utils/pluralize.js

@@ -66,6 +66,7 @@ const pluralizationMap = {
   PromptInput: 'PromptInputs',
   PropertyFilter: 'PropertyFilters',
   RadioButton: 'RadioButtons',
+  RichTextEditor: 'RichTextEditors',
   RadioGroup: 'RadioGroups',
   S3ResourceSelector: 'S3ResourceSelectors',
   SegmentedControl: 'SegmentedControls',

pages/rich-text-editor/permutations.page.tsx

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import RichTextEditor, { RichTextEditorProps } from '~components/rich-text-editor';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const permutations = createPermutations<RichTextEditorProps>([
+  {
+    value: ['', '<p>Formatted <b>bold</b> and <i>italic</i> text.</p>'],
+    placeholder: ['Enter formatted text'],
+    disabled: [false, true],
+  },
+  {
+    value: ['<ul><li>One</li><li>Two</li></ul>'],
+    readOnly: [false, true],
+  },
+  {
+    value: ['<p>Invalid state</p>'],
+    invalid: [true],
+  },
+  {
+    value: ['<p>Custom toolbar</p>'],
+    toolbarControls: [['bold', 'italic', 'link']],
+  },
+]);
+
+export default function RichTextEditorPermutations() {
+  return (
+    <>
+      <h1>Rich text editor permutations</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => <RichTextEditor ariaLabel="Rich text editor" onChange={() => {}} {...permutation} />}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}

pages/rich-text-editor/simple.page.tsx

@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Box from '~components/box';
+import FormField from '~components/form-field';
+import RichTextEditor from '~components/rich-text-editor';
+import SpaceBetween from '~components/space-between';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function RichTextEditorSimplePage() {
+  const [value, setValue] = useState<string>('<p>Hello, <b>Cloudscape</b>!</p>');
+  return (
+    <Box padding="l">
+      <h1>Rich text editor (WIP v0)</h1>
+      <ScreenshotArea>
+        <SpaceBetween size="l">
+          <FormField label="Description" description="A minimal WYSIWYG editor over contenteditable.">
+            <RichTextEditor
+              value={value}
+              placeholder="Enter formatted text"
+              ariaLabel="Description editor"
+              onChange={event => setValue(event.detail.value)}
+            />
+          </FormField>
+
+          <FormField label="Read-only">
+            <RichTextEditor value={value} readOnly={true} ariaLabel="Read-only editor" onChange={() => {}} />
+          </FormField>
+
+          <Box variant="code">{value}</Box>
+        </SpaceBetween>
+      </ScreenshotArea>
+    </Box>
+  );
+}