[Chat][RTE] RTE feature setup (#3973)

Author: vhuseinova-msft

change-beta/@azure-communication-react-d99780b3-de43-4231-b959-61152ac12f71.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "RTE",
+  "comment": "Add internal storybook page and a feature flag for Rich Text Editor feature",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-d99780b3-de43-4231-b959-61152ac12f71.json

@@ -0,0 +1,9 @@
+{
+  "type": "none",
+  "area": "improvement",
+  "workstream": "RTE",
+  "comment": "Add internal storybook page and a feature flag for Rich Text Editor feature",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

common/config/babel/features.js

@@ -82,6 +82,8 @@ module.exports = {
     'dtmf-dialer',
     // Feature for meeting reactions
     'reaction',
+    // Feature for Rich Text Editor (RTE) support
+    'rich-text-editor',
   ],
   // A list of in progress beta feature.
   // These features are still beta feature but "in progress"
@@ -107,6 +109,8 @@ module.exports = {
     'dtmf-dialer',
     // Feature for meeting reactions
     'reaction',
+    // Feature for Rich Text Editor (RTE) support
+    'rich-text-editor',
   ],
   // A list of stabilized features.
   // These features can be listed in the conditional compilation directives without

packages/react-components/review/beta/react-components.api.md

@@ -1929,6 +1929,15 @@ export const _RemoteVideoTile: React_2.MemoExoticComponent<(props: {
     toggleAnnouncerString?: ((announcerString: string) => void) | undefined;
 }) => React_2.JSX.Element>;
 
+// @beta
+export const RTESendBox: (props: RTESendBoxProps) => JSX.Element;
+
+// @beta
+export interface RTESendBoxProps {
+    // (undocumented)
+    valueToDisplay?: string;
+}
+
 // @public
 export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;
 

packages/react-components/src/components/RTE/RTESendBox.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+
+/**
+ * Props for {@link RTESendBox}.
+ *
+ * @beta
+ */
+export interface RTESendBoxProps {
+  // just a value to be displayed for now but it should be deleted when the component development starts
+  valueToDisplay?: string;
+}
+
+/**
+ * A component to render SendBox with Rich Text Editor support.
+ *
+ * @beta
+ */
+export const RTESendBox = (props: RTESendBoxProps): JSX.Element => {
+  const { valueToDisplay = 'Hello World!' } = props;
+  return <div>{valueToDisplay}</div>;
+};

packages/react-components/src/components/index.ts

@@ -19,6 +19,11 @@ export type { ImageGalleryStrings } from './ImageGallery';
 
 export type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';
 
+/* @conditional-compile-remove(rich-text-editor) */
+export { RTESendBox } from './RTE/RTESendBox';
+/* @conditional-compile-remove(rich-text-editor) */
+export type { RTESendBoxProps } from './RTE/RTESendBox';
+
 /* @conditional-compile-remove(mention) */
 export type {
   _MentionPopoverProps,

packages/storybook/stories/INTERNAL/RTE/RTESendBox.stories.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { RTESendBox as RTESendBoxComponent } from '@internal/react-components';
+import { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+import { COMPONENT_FOLDER_PREFIX } from '../../constants';
+
+const RTESendBoxStory = (args): JSX.Element => {
+  return <RTESendBoxComponent valueToDisplay={args.valueToDisplay} />;
+};
+
+// This must be the only named export from this module, and must be named to match the storybook path suffix.
+// This ensures that storybook hoists the story instead of creating a folder with a single entry.
+export const RTESendBox = RTESendBoxStory.bind({});
+
+export default {
+  id: `${COMPONENT_FOLDER_PREFIX}-internal-rtesendbox`,
+  title: `${COMPONENT_FOLDER_PREFIX}/Internal/RTESendBox`,
+  component: RTESendBoxComponent,
+  argTypes: {
+    // just a value to be displayed for now but it should be deleted when the component development starts
+    valueToDisplay: { control: 'text', defaultValue: 'Hello World!' }
+  }
+} as Meta;