Merge pull request #3055 from appsmithorg/fix/rte-newline

Added defaultText and defaultHTML properties in RTE

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/GlobalSearch/GlobalSearch_spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
 const commonlocators = require("../../../../locators/commonlocators.json");
 const queryLocators = require("../../../../locators/QueryEditor.json");
 const dsl = require("../../../../fixtures/MultipleWidgetDsl.json");

app/client/cypress/manual_TestSuite/Modal_Spec.js

@@ -1,11 +1,9 @@
 const dsl = require("../../../fixtures/ModalWidgetDsl.json");
 
 describe("Modal Functionality ", function() {
-
-it("Collapse the tabs of Property pane", function() 
-  {
+  it("Collapse the tabs of Property pane", function() {
     // Add a modal widget from teh entity explorer
-    // Click on the property Pane 
+    // Click on the property Pane
     // Select Form Type as Modal Type
     // Add any widget on the Modal
     // Add a table
@@ -15,36 +13,29 @@ it("Collapse the tabs of Property pane", function()
     // Select Column type as button
     // Add action to "on click"
     // Add Modal
-    // Close the modal 
+    // Close the modal
     // Click on the Table Action button
     // Ensure the modal pop up
-  }
-  )
+  });
 
-  it("Rename a modal", function() 
-  {
-    // Click on the entity explore 
-    // Ensure modal is dispalyed to user 
-    // Rename the modal 
-    // Ensure the modal name is replaced in the table 
-    // Click on the action button 
-    // Ensure the modal pop up 
-  }
-  )
-it("Convert Modal to ", function() 
-  {
-    // Click on the entity explore 
-    // Ensure modal is dispalyed to user 
+  it("Rename a modal", function() {
+    // Click on the entity explore
+    // Ensure modal is dispalyed to user
+    // Rename the modal
+    // Ensure the modal name is replaced in the table
+    // Click on the action button
+    // Ensure the modal pop up
+  });
+  it("Convert Modal to ", function() {
+    // Click on the entity explore
+    // Ensure modal is dispalyed to user
     // Add a button widget
-    // Add an "On click" action with modal 
+    // Add an "On click" action with modal
     // Click on the button
     // Ensure the Alert modal is dispalyed to user
     // Now click on the Modal in entity explorer
     // Convert the Modal from "Alert" to "Form"
-    // Click on the button 
-    // Ensure a form modal is dispalyed to user 
-  }
-  )
-
-}
-)
+    // Click on the button
+    // Ensure a form modal is dispalyed to user
+  });
+});

app/client/cypress/manual_TestSuite/new_Table_Spec.js

@@ -1,53 +1,43 @@
 const dsl = require("../../../fixtures/tableWidgetDsl.json");
 
 describe("Table functionality ", function() {
-  it("Adding background Colour to table", function() 
-  {
+  it("Adding background Colour to table", function() {
     // Add a table
     // Click on the property pane
-    // Scroll Styles 
+    // Scroll Styles
     // Add background colour
     // Add Text Colour
     // Navigate to one of the column
     // Click on the setting/ Control pane of the column
     // Navigate to add background colour and Text colour
     // Ensure the row colour gets overlapped on table colour
-  }
-  )
-  it("Collapse the tabs of Property pane", function() 
-  {
+  });
+  it("Collapse the tabs of Property pane", function() {
     // Add a table
     // Click on the property pane
     // Collapse the General ,Action and Tab option
-  }
-  )
-  it("Bind the column with same name", function() 
-  {
+  });
+  it("Bind the column with same name", function() {
     // Add a table
     // Click on the property pane
-    // Click on the Add new column 
-    // Ensure to add two new column 
-    // Name two column with same name 
+    // Click on the Add new column
+    // Ensure to add two new column
+    // Name two column with same name
     // Add an input widget
-    // Bind the column with new column name 
+    // Bind the column with new column name
     // Select the row from the binded table
-  }
-  )
+  });
 
-  it("Hide and created custom column ", function() 
-  {
+  it("Hide and created custom column ", function() {
     // Add a table
     // Click on the property pane
-    // Click on the Add new column 
+    // Click on the Add new column
     // Click on Setting of column
     // Select Column Type "Date"
-    // Now navigate to exsiting column 
-    // Click on the hide icon 
-    // and observe on edit mode the table column is dispalyed 
+    // Now navigate to exsiting column
+    // Click on the hide icon
+    // and observe on edit mode the table column is dispalyed
     // Click on deploy
-    // Ensure the hidden column is not displayed and custom column is disaplyed to user 
-  }
-  )
-
-}
-)
+    // Ensure the hidden column is not displayed and custom column is disaplyed to user
+  });
+});

app/client/package.json

@@ -117,6 +117,7 @@
     "reselect": "^4.0.0",
     "scroll-into-view-if-needed": "^2.2.26",
     "shallowequal": "^1.1.0",
+    "showdown": "^1.9.1",
     "smartlook-client": "^4.5.1",
     "styled-components": "^5.2.0",
     "styled-system": "^5.1.5",

app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx

@@ -3,8 +3,6 @@ import { debounce } from "lodash";
 import styled from "styled-components";
 import { useScript, ScriptStatus } from "utils/hooks/useScript";
 
-import { isString } from "utils/helpers";
-
 const StyledRTEditor = styled.div`
   && {
     width: 100%;
@@ -50,7 +48,7 @@ export const RichtextEditorComponent = (
       (editorContent.current.length === 0 ||
         editorContent.current !== props.defaultValue)
     ) {
-      const content = getContent();
+      const content = props.defaultValue;
 
       editorInstance.setContent(content, {
         format: "html",
@@ -73,20 +71,20 @@ export const RichtextEditorComponent = (
       resize: false,
       setup: (editor: any) => {
         editor.mode.set(props.isDisabled === true ? "readonly" : "design");
-        const content = getContent();
+        const content = props.defaultValue;
         editor.setContent(content, { format: "html" });
         editor
           .on("Change", () => {
-            onChange(editor.getContent());
+            onChange(editor.getContent({ format: "html" }));
           })
           .on("Undo", () => {
-            onChange(editor.getContent());
+            onChange(editor.getContent({ format: "html" }));
           })
           .on("Redo", () => {
-            onChange(editor.getContent());
+            onChange(editor.getContent({ format: "html" }));
           })
           .on("KeyUp", () => {
-            onChange(editor.getContent());
+            onChange(editor.getContent({ format: "html" }));
           });
         setEditorInstance(editor);
         editor.on("init", () => {
@@ -108,15 +106,6 @@ export const RichtextEditorComponent = (
     };
   }, [status]);
 
-  /**
-   * get content for rich text editor
-   */
-  const getContent = () => {
-    return props.defaultValue && isString(props.defaultValue)
-      ? props.defaultValue.replace(/\n/g, "<br/>")
-      : props.defaultValue;
-  };
-
   if (status !== ScriptStatus.READY) return null;
 
   return (

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -34,6 +34,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       isVisible: true,
       widgetName: "RichTextEditor",
       isDefaultClickDisabled: true,
+      inputType: "html",
       version: 1,
     },
     IMAGE_WIDGET: {

app/client/src/utils/WidgetPropsUtils.tsx

@@ -317,6 +317,20 @@ const renamedCanvasNameConflictMigration = (
   return currentDSL;
 };
 
+const rteDefaultValueMigration = (
+  currentDSL: ContainerWidgetProps<WidgetProps>,
+): ContainerWidgetProps<WidgetProps> => {
+  if (currentDSL.type === WidgetTypes.RICH_TEXT_EDITOR_WIDGET) {
+    currentDSL.inputType = "html";
+  }
+  currentDSL.children?.forEach((children) =>
+    rteDefaultValueMigration(children),
+  );
+
+  return currentDSL;
+};
+
+// A rudimentary transform function which updates the DSL based on its version.
 function migrateOldChartData(currentDSL: ContainerWidgetProps<WidgetProps>) {
   if (currentDSL.type === WidgetTypes.CHART_WIDGET) {
     if (isString(currentDSL.chartData)) {
@@ -423,6 +437,11 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
     currentDSL.version = 14;
   }
 
+  if (currentDSL.version === 14) {
+    currentDSL = rteDefaultValueMigration(currentDSL);
+    currentDSL.version = 15;
+  }
+
   return currentDSL;
 };
 

app/client/src/widgets/RichTextEditorWidget.tsx

@@ -9,7 +9,12 @@ import Skeleton from "components/utils/Skeleton";
 import * as Sentry from "@sentry/react";
 import { retryPromise } from "utils/AppsmithUtils";
 import withMeta, { WithMeta } from "./MetaHOC";
+const showdown = require("showdown");
 
+export enum RTEFormats {
+  MARKDOWN = "markdown",
+  HTML = "html",
+}
 const RichTextEditorComponent = lazy(() =>
   retryPromise(() =>
     import(
@@ -27,6 +32,25 @@ class RichTextEditorWidget extends BaseWidget<
       {
         sectionName: "General",
         children: [
+          {
+            propertyName: "inputType",
+            helpText:
+              "Sets the input type of the default text property in widget.",
+            label: "Input Type",
+            controlType: "DROP_DOWN",
+            options: [
+              {
+                label: "Markdown",
+                value: "markdown",
+              },
+              {
+                label: "HTML",
+                value: "html",
+              },
+            ],
+            isBindProperty: false,
+            isTriggerProperty: false,
+          },
           {
             propertyName: "defaultText",
             helpText:
@@ -110,11 +134,16 @@ class RichTextEditorWidget extends BaseWidget<
   };
 
   getPageView() {
+    let defaultValue = this.props.text || "";
+    if (this.props.inputType === RTEFormats.MARKDOWN) {
+      const converter = new showdown.Converter();
+      defaultValue = converter.makeHtml(defaultValue);
+    }
     return (
       <Suspense fallback={<Skeleton />}>
         <RichTextEditorComponent
           onValueChange={this.onValueChange}
-          defaultValue={this.props.text || ""}
+          defaultValue={defaultValue}
           widgetId={this.props.widgetId}
           placeholder={this.props.placeholder}
           key={this.props.widgetId}
@@ -132,7 +161,8 @@ class RichTextEditorWidget extends BaseWidget<
 
 export interface RichTextEditorWidgetProps extends WidgetProps, WithMeta {
   defaultText?: string;
-  text?: string;
+  text: string;
+  inputType: string;
   placeholder?: string;
   onTextChange?: string;
   isDisabled?: boolean;