chore: plain text plugin for Editor (#17134)

* chore: plain text plugin for Editor

* fix build error

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 &&

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 = "";

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>
   );

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;
+}