[DIT-4820] Rich Text for Text Items (#37)

* Add rich text to text items

* Update rich text to use new variable format

Author: asnewman

README.md

@@ -194,7 +194,7 @@ output === "You are owner in this workspace."
 
 `ditto-react` integrates with Ditto Plurals to support pluralized text. Learn how to create and configure Ditto Plurals here: https://www.dittowords.com/docs/pluralization.
 
-*Note: Pluralization will only work if the source file is in the `structured` format.*
+_Note: Pluralization will only work if the source file is in the `structured` format._
 
 When a text item has plural forms, the default plural form will be used when that text item is rendered normally:
 
@@ -245,13 +245,22 @@ To see a working React app utilizing the [Ditto CLI](https://github.com/dittowor
 
 ## Rich Text
 
-Ditto's [rich text](https://www.dittowords.com/docs/rich-text) functionality is currently available for Ditto Components in `ditto-react`. By using the `richText` property on `<Ditto />` or `<DittoComponent />`, `ditto-react` will automatically render the rich text versions of the components.
+Ditto's [rich text](https://www.dittowords.com/docs/rich-text) functionality can be enabled on `<Ditto />`, `<DittoText />` or `<DittoComponent />` via the `richText` property. Once enabled, `ditto-react` will automatically render the rich text versions of the text item/component.
+
+### Examples
 
-### Example
 ```
 <Ditto componentId="shopping-cart" richText />
 ```
 
+```
+<DittoText textId="text_61e7238bbae5dc00fb66de15" variables={{ itemCount: 5 }} richText/>
+```
+
+```
+<DittoComponent componentId="shopping-cart" count={5} variables={{ itemCount: 5 }} richText />
+```
+
 ---
 
 ## Reference
@@ -287,11 +296,12 @@ Which method you use depends on how you've configured your CLI options. Please r
 
 #### Component Library (recommended)
 
-| Prop          | Type              | Description                                                                                                                                                                                                                                             |
-| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `componentId` | string            | The API ID of a component in your component library. If a `variant` prop is passed to an ancestor `DittoProvider`, will attempt to display the specified variant's value for the passed `componentId`; otherwise, will default to displaying base text. |
-| `variables`   | object (optional) | A map of variable key-value pairs to interpolate in your text.                                                                                                                                                                                          |
-| `count`       | number (optional) | This value is used to specify which plural case you wish to use                                                                                                                                                                                         |
+| Prop          | Type               | Description                                                                                                                                                                                                                                             |
+| ------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `componentId` | string             | The API ID of a component in your component library. If a `variant` prop is passed to an ancestor `DittoProvider`, will attempt to display the specified variant's value for the passed `componentId`; otherwise, will default to displaying base text. |
+| `variables`   | object (optional)  | A map of variable key-value pairs to interpolate in your text.                                                                                                                                                                                          |
+| `count`       | number (optional)  | This value is used to specify which plural case you wish to use                                                                                                                                                                                         |
+| `richText`    | boolean (optional) | This value is used to enable rich text rendering                                                                                                                                                                                                        |
 
 ##### Example
 
@@ -314,6 +324,7 @@ Which method you use depends on how you've configured your CLI options. Please r
 | `filters`   | object (optional)                 | object of filters for text items returned. Currently supports a single parameter: tags, an array of tag strings | { tags: ["SELECTS"]}                |
 | `variables` | object (optional)                 | A map of variable key-value pairs to interpolate in your text.                                                  | { email: "support@dittowords.com" } |
 | `count`     | number (optional)                 | This value is used to specify which plural case you wish to use                                                 | 1                                   |
+| `richText`  | boolean (optional)                | This value is used to enable rich text rendering                                                                |
 
 ##### Examples
 

example/src/App.tsx

@@ -155,6 +155,15 @@ const App = (props: AppProps) => {
                 richText
               />
             </div>
+            <div className="dittoItem">
+              <pre>{`<DittoComponent componentId="shopping-cart" count={5} variables={{ itemCount: 5 }} richText />`}</pre>
+              <DittoComponent
+                componentId="shopping-cart"
+                count={5}
+                variables={{ itemCount: 5 }}
+                richText
+              />
+            </div>
           </div>
         </div>
         <div>
@@ -215,10 +224,26 @@ const App = (props: AppProps) => {
               variables={{ itemCount: 5 }}
             />
           </div>
+          <div className="dittoItem">
+            <pre>{`<DittoText textId="text_61e7238bbae5dc00fb66de15" variables={{ itemCount: 5 }} richText/>`}</pre>
+            <DittoText
+              textId="text_61e7238bbae5dc00fb66de15"
+              variables={{ itemCount: 5 }}
+              richText
+            />
+          </div>
           <div className="dittoItem">
             <pre>{`<DittoText textId="text_61e7238bbae5dc00fb66ddff"/>`}</pre>
             <DittoText textId="text_61e7238bbae5dc00fb66ddff" />
           </div>
+          <div className="dittoItem">
+            <pre>{`<Ditto textId="text_61e7238bbae5dc00fb66de15" variables={{ itemCount: 5 }} richText/>`}</pre>
+            <Ditto
+              textId="text_61e7238bbae5dc00fb66de15"
+              variables={{ itemCount: 5 }}
+              richText
+            />
+          </div>
         </div>
       </div>
     </div>

example/src/ditto/ditto-component-library__base.json

@@ -2,7 +2,7 @@
   "role": {
     "name": "Role DO NOT MODIFY",
     "text": "You are {{role}} in this workspace.",
-    "rich_text": "<p>You are <span data-type=\"variable\" data-grammarly-skip class=\"\" data-variable-id=\"64e52580e5120107e7d21260\" data-name=\"role\" data-text=\"an administrator\" data-variable-type=\"map\">an administrator</span> in this workspace.</p>",
+    "rich_text": "<p>You are {{role}} in this workspace.</p>",
     "status": "NONE",
     "folder": null,
     "variables": {
@@ -17,7 +17,7 @@
   "shopping-cart-2": {
     "name": "Shopping Cart 2 DO NOT MODIFY",
     "text": "The cart is filled with {{item}}.",
-    "rich_text": "<p>The <strong>cart is filled</strong> with <span data-type=\"variable\" data-grammarly-skip class=\"\" data-variable-id=\"64e5250c4f28ef74fe4fd2b4\" data-name=\"item\" data-text=\"oranges\" data-variable-type=\"list\">oranges</span>.</p>",
+    "rich_text": "<p>The <strong>cart is filled</strong> with {{item}}.</p>",
     "status": "NONE",
     "folder": null,
     "variables": {
@@ -31,7 +31,7 @@
   "shopping-cart": {
     "name": "Shopping Cart DO NOT MODIFY",
     "text": "There are {{itemCount}} items in the cart",
-    "rich_text": "<p>There are <span data-type=\"variable\" data-grammarly-skip class=\"\" data-variable-id=\"61e72483efde2400db6ac3cb\" data-name=\"itemCount\" data-text=\"10\" data-variable-type=\"number\">10</span> items <b>in the cart</b></p>",
+    "rich_text": "<p>There are {{itemCount}} items <b>in the cart</b></p>",
     "status": "NONE",
     "folder": null,
     "variables": {
@@ -42,9 +42,9 @@
     },
     "plurals": {
       "other": "There are {{itemCount}} items in the cart",
-      "other_rich_text": "<p>There are <span data-type=\"variable\" data-grammarly-skip class=\"\" data-variable-id=\"61e72483efde2400db6ac3cb\" data-name=\"itemCount\" data-text=\"10\" data-variable-type=\"number\">10</span> items <b>in the cart</b></p>",
+      "other_rich_text": "<p>There are {{itemCount}} items <b>in the cart</b></p>",
       "one": "There is {{itemCount}} item in the cart",
-      "one_rich_text": "<p>There is <span data-type=\"variable\" data-grammarly-skip class=\"\" data-variable-id=\"61e72483efde2400db6ac3cb\" data-name=\"itemCount\" data-text=\"10\" data-variable-type=\"number\">10</span> item in the cart</p>",
+      "one_rich_text": "<p>There is {{itemCount}} item in the cart</p>",
       "zero": "The cart is empty",
       "zero_rich_text": "<p>The cart is empty</p>"
     },

example/src/ditto/onboarding-flow__base.json

@@ -63,6 +63,7 @@
   },
   "text_61e7238bbae5dc00fb66de15": {
     "text": "There are {{itemCount}} puppies",
+    "rich_text": "<p><strong><em>There are</em></strong> {{itemCount}} <u>puppies</u></p>",
     "variables": {
       "itemCount": {
         "example": 10,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ditto-react",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React SDK for using product copy from Ditto in development.",
   "author": "Ditto Tech Inc.",
   "license": "MIT",

src/components/Ditto.tsx

@@ -50,6 +50,7 @@ export interface DittoTextProps {
   textId: string;
   variables?: VariablesInput;
   count?: number;
+  richText?: boolean;
   children?: (text: string) => React.ReactNode;
 }
 
@@ -86,7 +87,7 @@ export function Ditto(props: DittoProps) {
     const projectId = props.projectId || dittoContext.projectId;
     if (!projectId) {
       return fragmentError(
-        "No Project ID was provided to the <DittoProvider /> or <Ditto /> components.",
+        "No Project ID was provided to the <DittoProvider /> or <Ditto /> components."
       );
     }
 
@@ -102,6 +103,6 @@ export function Ditto(props: DittoProps) {
   }
 
   return fragmentError(
-    'Invalid props provided to Ditto component; please provide "componentId", "textId" or "frameId"',
+    'Invalid props provided to Ditto component; please provide "componentId", "textId" or "frameId"'
   );
 }

src/components/DittoText.tsx

@@ -11,11 +11,16 @@ export const DittoText = (props: DittoTextProps) => {
     textId,
     variables: variables || {},
     count,
+    richText: props.richText === true,
   });
 
   if (typeof text === "string" && typeof children === "function") {
     return <>{children(text)}</>;
   }
 
+  if (props.richText) {
+    return <span dangerouslySetInnerHTML={{ __html: text || "" }}></span>;
+  }
+
   return <>{text}</>;
 };

src/hooks/useDittoSingleText.ts

@@ -12,10 +12,11 @@ interface useDittoSingleTextProps {
   textId: string;
   variables?: VariablesInput;
   count?: Count;
+  richText?: boolean;
 }
 
 export const useDittoSingleText = (
-  props: useDittoSingleTextProps,
+  props: useDittoSingleTextProps
 ): string | null => {
   const { textId, variables, count } = props;
   const { source, variant } = useContext(DittoContext);
@@ -31,7 +32,7 @@ export const useDittoSingleText = (
           data[textId],
           variables || {},
           count,
-          false,
+          Boolean(props.richText)
         ).text;
       }
 
@@ -47,7 +48,7 @@ export const useDittoSingleText = (
                 block[textId],
                 variables || {},
                 count,
-                false,
+                Boolean(props.richText)
               ).text;
           }
 
@@ -56,7 +57,7 @@ export const useDittoSingleText = (
               frame.otherText[textId],
               variables || {},
               count,
-              false,
+              Boolean(props.richText)
             ).text;
         }
       }
@@ -85,7 +86,7 @@ export const useDittoSingleText = (
             block[textId],
             variables || {},
             count,
-            false,
+            Boolean(props.richText)
           ).text;
       }
 
@@ -94,7 +95,7 @@ export const useDittoSingleText = (
           frame.otherText[textId],
           variables || {},
           count,
-          false,
+          Boolean(props.richText)
         ).text;
     }
   }