feat: Add rich text editor to text component (#217)

* Add rich text editor to text component Signed-off-by: Moiz Masud <[email protected]> * Lint alittle Signed-off-by: Moiz Masud <[email protected]> * Add switch for rich text editor/section tag Signed-off-by: Moiz Masud <[email protected]> * Lint alittle Signed-off-by: Moiz Masud <[email protected]> * Removed empty spaces Signed-off-by: Moiz Masud <[email protected]> * Fix indentation and cleaned up If statements Signed-off-by: Moiz Masud <[email protected]> * Fix indentation and cleaned up If statements Signed-off-by: Moiz Masud <[email protected]> * Add guard to if statements Signed-off-by: Moiz Masud <[email protected]> * Added toggle for rich text editor switch Signed-off-by: Moiz Masud <[email protected]> --------- Signed-off-by: Moiz Masud <[email protected]> Co-authored-by: Zvonimir Fras <[email protected]>
IBM · Feb 3, 2023 · 815b12d · 815b12d
1 parent d98004d
commit 815b12d
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -24,7 +24,8 @@
     "react-dom": "17.0.2",
     "react-hook-form": "7.31.1",
     "react-hotkeys-hook": "3.4.6",
-    "react-markdown": "8.0.3",
+	"react-markdown": "8.0.3",
+	"react-quill": "2.0.0",
     "react-resizable": "3.0.4",
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",

diff --git a/src/fragment-components/a-text.tsx b/src/fragment-components/a-text.tsx
@@ -1,22 +1,61 @@
 import React from 'react';
-import { TextInput } from 'carbon-components-react';
 import { AComponent } from './a-component';
 import { ComponentInfo } from '.';
-
+import ReactQuill from 'react-quill';
+import { Checkbox, TextInput, Toggle } from 'carbon-components-react';
+import 'react-quill/dist/quill.snow.css';
 import image from './../assets/component-icons/text.svg';
 import { angularClassNamesFromComponentObj, reactClassNamesFromComponentObj } from '../utils/fragment-tools';
 
 export const ATextSettingsUI = ({ selectedComponent, setComponent }: any) => {
-	return <TextInput
-			value={selectedComponent.text}
-			labelText='Text'
-			onChange={(event: any) => {
+	return <>
+		<Toggle
+			id='useRichTextEditor'
+			checked={selectedComponent.useRichTextEditor}
+			labelA='Text editor'
+			labelB='Rich text editor'
+			labelText='Text editor switch'
+			onClick={(event: any) => {
 				setComponent({
 					...selectedComponent,
-					text: event.currentTarget.value
+					useRichTextEditor: event.currentTarget.checked
 				});
-			}}
-		/>;
+			}} />
+		{
+			selectedComponent.useRichTextEditor
+				? <>
+					<Checkbox
+						labelText='Use section as parent wrapper tag'
+						id='use-section'
+						checked={selectedComponent.useSectionTag}
+						onChange={(checked: boolean) => {
+							setComponent({
+								...selectedComponent,
+								useSectionTag: checked
+							});
+						}} />
+					<ReactQuill
+						key={selectedComponent.id}
+						theme="snow"
+						value={selectedComponent.richText}
+						onChange={(event: any) => {
+							setComponent({
+								...selectedComponent,
+								richText: event
+							});
+						}} />
+				</>
+				: <TextInput
+				value={selectedComponent.text}
+				labelText='Text'
+				onChange={(event: any) => {
+					setComponent({
+						...selectedComponent,
+						text: event.currentTarget.value
+					});
+				}} />
+		}
+	</>;
 };
 
 export const AText = ({
@@ -43,14 +82,22 @@ export const componentInfo: ComponentInfo = {
 		select={select}
 		remove={remove}
 		selected={selected}>
-			{componentObj.text}
+			{
+				componentObj.useRichTextEditor
+				? <div dangerouslySetInnerHTML={{ __html: componentObj.richText }} />
+				: componentObj.text
+			}
+
 	</AText>,
 	keywords: ['text'],
 	name: 'Text',
 	type: 'text',
 	defaultComponentObj: {
 		type: 'text',
-		text: 'Text'
+		text: 'Text',
+		richText: 'Text',
+		useRichTextEditor: false,
+		useSectionTag: false
 	},
 	image,
 	codeExport: {
@@ -59,7 +106,16 @@ export const componentInfo: ComponentInfo = {
 			outputs: (_) => '',
 			imports: [],
 			code: ({ json }) => {
-				if (json.cssClasses) {
+				if (json.useRichTextEditor) {
+					if (!json.cssClasses.length) {
+						return json.richText;
+					}
+					if (json.useSectionTag) {
+						return `<section ${angularClassNamesFromComponentObj(json)}>${json.richText}</section>`;
+					}
+					return `<div ${angularClassNamesFromComponentObj(json)}>${json.richText}</div>`;
+				}
+				if (json.cssClasses.length) {
 					return `<span ${angularClassNamesFromComponentObj(json)}>${json.text}</span>`;
 				}
 				return json.text;
@@ -68,7 +124,16 @@ export const componentInfo: ComponentInfo = {
 		react: {
 			imports: [],
 			code: ({ json }) => {
-				if (json.cssClasses) {
+				if (json.useRichTextEditor) {
+					if (!json.cssClasses.length) {
+						return json.richText;
+					}
+					if (json.useSectionTag) {
+						return `<section ${reactClassNamesFromComponentObj(json)}>${json.richText}</section>`;
+					}
+					return `<div ${reactClassNamesFromComponentObj(json)}>${json.richText}</div>`;
+				}
+				if (json.cssClasses.length) {
 					return `<span ${reactClassNamesFromComponentObj(json)}>${json.text}</span>`;
 				}
 				return json.text;