From cd15335eedbe1882658635d82a76b7e17df45932 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Mon, 11 Nov 2024 20:23:12 +0530
Subject: [PATCH] chore: plain text plugin for Editor (#17134)

* chore: plain text plugin for Editor

* fix build error
---
 .../components/WorkflowStepContainer.tsx      | 11 +++-----
 packages/lib/turndownService.ts               |  1 -
 packages/ui/components/editor/Editor.tsx      |  4 +++
 .../editor/plugins/PlainTextPlugin.tsx        | 27 +++++++++++++++++++
 4 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/components/editor/plugins/PlainTextPlugin.tsx

diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index e162ba192b..f412d45abe 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -10,9 +10,7 @@ import { classNames } from "@calcom/lib";
 import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
-import { md } from "@calcom/lib/markdownIt";
 import { getTimeFormatStringFromUserTimeFormat } from "@calcom/lib/timeFormat";
-import turndown from "@calcom/lib/turndownService";
 import { TimeUnit, WorkflowActions, WorkflowTemplates, WorkflowTriggerEvents } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -917,14 +915,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
                 <Editor
                   getText={() => {
-                    return md.render(props.form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) || "");
+                    return props.form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) || "";
                   }}
                   setText={(text: string) => {
-                    if (isSMSOrWhatsappAction(step.action)) {
-                      props.form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, turndown(text));
-                    } else {
-                      props.form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, text);
-                    }
+                    props.form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, text);
                     props.form.clearErrors();
                   }}
                   variables={DYNAMIC_TEXT_VARIABLES}
@@ -937,6 +931,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   excludedToolbarItems={
                     !isSMSAction(step.action) ? [] : ["blockType", "bold", "italic", "link"]
                   }
+                  plainText={isSMSAction(step.action)}
                 />
 
                 {form.formState.errors.steps &&
diff --git a/packages/lib/turndownService.ts b/packages/lib/turndownService.ts
index f97f60a37b..f80bea7618 100644
--- a/packages/lib/turndownService.ts
+++ b/packages/lib/turndownService.ts
@@ -5,7 +5,6 @@ const turndownService = new TurndownService();
 function turndown(html: string | TurndownService.Node): string {
   let result = turndownService.turndown(html);
   result = result.replaceAll("[<p><br></p>]", "");
-  result = result.replace(/\\_/g, "_");
 
   if (result === "<p><br></p>") {
     result = "";
diff --git a/packages/ui/components/editor/Editor.tsx b/packages/ui/components/editor/Editor.tsx
index 5eefa7afd0..9fa6a8a26f 100644
--- a/packages/ui/components/editor/Editor.tsx
+++ b/packages/ui/components/editor/Editor.tsx
@@ -21,6 +21,7 @@ import { VariableNode } from "./nodes/VariableNode";
 import AddVariablesPlugin from "./plugins/AddVariablesPlugin";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
 import EditablePlugin from "./plugins/EditablePlugin";
+import PlainTextPlugin from "./plugins/PlainTextPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";
 import "./stylesEditor.css";
 
@@ -45,6 +46,7 @@ export type TextEditorProps = {
   firstRender?: boolean;
   setFirstRender?: Dispatch<SetStateAction<boolean>>;
   editable?: boolean;
+  plainText?: boolean;
 };
 
 const editorConfig = {
@@ -71,6 +73,7 @@ const editorConfig = {
 
 export const Editor = (props: TextEditorProps) => {
   const editable = props.editable ?? true;
+  const plainText = props.plainText ?? false;
   return (
     <div className="editor rounded-md">
       <LexicalComposer initialConfig={{ ...editorConfig }}>
@@ -122,6 +125,7 @@ export const Editor = (props: TextEditorProps) => {
           </div>
         </div>
         <EditablePlugin editable={editable} />
+        <PlainTextPlugin setText={props.setText} plainText={plainText} />
       </LexicalComposer>
     </div>
   );
diff --git a/packages/ui/components/editor/plugins/PlainTextPlugin.tsx b/packages/ui/components/editor/plugins/PlainTextPlugin.tsx
new file mode 100644
index 0000000000..58657ce773
--- /dev/null
+++ b/packages/ui/components/editor/plugins/PlainTextPlugin.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot } from "lexical";
+import { useEffect } from "react";
+
+type PlainTextPluginProps = {
+  setText: (text: string) => void;
+  plainText: boolean;
+};
+
+export default function PlainTextPlugin({ setText, plainText }: PlainTextPluginProps) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        if (plainText) {
+          const textContent = $getRoot().getTextContent();
+          setText(textContent);
+        }
+      });
+    });
+  }, [plainText]);
+
+  return null;
+}