Text editor for custom workflow templates

apps/web/package.json

@@ -43,6 +43,7 @@
     "@heroicons/react": "^1.0.6",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.9.7",
+    "@lexical/react": "^0.5.0",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@next/bundle-analyzer": "^12.2.5",
     "@radix-ui/react-avatar": "^1.0.0",
@@ -71,9 +72,11 @@
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
+    "html-to-text": "^8.2.1",
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
     "kbar": "^0.1.0-beta.36",
+    "lexical": "^0.5.0",
     "libphonenumber-js": "^1.10.12",
     "lodash": "^4.17.21",
     "lottie-react": "^2.3.1",

apps/web/public/static/locales/en/common.json

@@ -1372,5 +1372,6 @@
   "route_to": "Route to",
   "test_preview_description": "Test your routing form without submitting any data",
   "test_routing": "Test Routing",
-  "booking_limit_reached":"Booking Limit for this event type has been reached"
+  "booking_limit_reached":"Booking Limit for this event type has been reached",
+  "fill_this_field": "Please fill in this field"
 }

packages/features/ee/workflows/components/AddVariablesDropdown.tsx

@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Icon } from "@calcom/ui";
 
 interface IAddVariablesDropdown {
-  addVariable: (isEmailSubject: boolean, variable: string) => void;
+  addVariable: (variable: string, isEmailSubject?: boolean) => void;
   isEmailSubject: boolean;
 }
 
@@ -39,7 +39,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
                 key={variable}
                 type="button"
                 className="w-full px-4 py-2"
-                onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
+                onClick={() => props.addVariable(t(`${variable}_workflow`), props.isEmailSubject)}>
                 <div className="sm:grid sm:grid-cols-2">
                   <div className="mr-3 text-left md:col-span-1">
                     {`{${t(`${variable}_workflow`).toUpperCase().replace(/ /g, "_")}}`}

packages/features/ee/workflows/components/TextEditor/Editor.tsx

@@ -0,0 +1,69 @@
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { TRANSFORMERS } from "@lexical/markdown";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { UseFormReturn } from "react-hook-form";
+
+import { FormValues } from "../../pages/workflow";
+import ExampleTheme from "./ExampleTheme";
+import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import "./stylesEditor.css";
+
+export type TextEditorProps = {
+  form: UseFormReturn<FormValues>;
+  stepNumber: number;
+};
+
+const editorConfig = {
+  // The editor theme
+  theme: ExampleTheme,
+  // Handling of errors during update
+  onError(error: any) {
+    throw error;
+  },
+  namespace: "",
+  // Any custom nodes go here
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+  ],
+};
+
+export default function Editor(props: TextEditorProps) {
+  return (
+    <div className="editor">
+      <LexicalComposer initialConfig={editorConfig}>
+        <div className="editor-container">
+          <ToolbarPlugin form={props.form} stepNumber={props.stepNumber} />
+          <div className="editor-inner">
+            <RichTextPlugin contentEditable={<ContentEditable className="editor-input" />} placeholder="" />
+            <AutoFocusPlugin />
+            <ListPlugin />
+            <LinkPlugin />
+            <AutoLinkPlugin />
+            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          </div>
+        </div>
+      </LexicalComposer>
+    </div>
+  );
+}

packages/features/ee/workflows/components/TextEditor/ExampleTheme.ts

@@ -0,0 +1,24 @@
+const exampleTheme = {
+  placeholder: "editor-placeholder",
+  paragraph: "editor-paragraph",
+  heading: {
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+  },
+  list: {
+    nested: {
+      listitem: "editor-nested-listitem",
+    },
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    listitem: "editor-listitem",
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "editor-text-bold",
+    italic: "editor-text-italic",
+  },
+};
+
+export default exampleTheme;

packages/features/ee/workflows/components/TextEditor/plugins/AutoLinkPlugin.tsx

@@ -0,0 +1,36 @@
+import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
+
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const EMAIL_MATCHER =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  (text: any) => {
+    const match = URL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: match[0],
+      }
+    );
+  },
+  (text: any) => {
+    const match = EMAIL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: `mailto:${match[0]}`,
+      }
+    );
+  },
+];
+
+export default function PlaygroundAutoLinkPlugin() {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}