Text editor for custom workflow templates #5654
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -143,7 +148,7 @@ function WorkflowPage() { | |||
| form.setValue("activeOn", activeOn || []); | |||
| setIsAllDataLoaded(true); | |||
| } | |||
| }, [workflow]); | |||
| }, [isLoading]); | |||
There was a problem hiding this comment.
fixes issue that data was always reset after leaving tab
| step.template === WorkflowTemplates.CUSTOM && | ||
| !isSMSAction && | ||
| convert(step.reminderBody).length <= 1; | ||
| if (isBodyEmpty) { |
There was a problem hiding this comment.
For custom email bodies it needs to be checked if it is not empty. For all other input fields, the browser form validation is used
| {isEmailSubjectNeeded ? t("email_body") : t("text_message")} | ||
| </Label> | ||
| </div> | ||
| <Editor form={form} stepNumber={step.stepNumber} /> |
There was a problem hiding this comment.
New editor is only used for email body
| setIsPhoneNumberNeeded(val.value === WorkflowActions.SMS_NUMBER); | ||
|
|
||
| if (!wasSMSAction) { | ||
| form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, ""); |
There was a problem hiding this comment.
Decided to remove input text if action is changed from SMS to Email or the other way around as SMS actions don't use the new editor
| @@ -0,0 +1,430 @@ | |||
|
|
|||
| .editor a { | |||
There was a problem hiding this comment.
css classes mainly come from here: https://codesandbox.io/s/lexical-rich-text-example-5tncvy?file=/src/styles.css but adapted them and removed everything that was not needed
| editor.registerUpdateListener(({ editorState }) => { | ||
| editorState.read(() => { | ||
| const textInHtml = $generateHtmlFromNodes(editor); | ||
| props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, textInHtml); |
There was a problem hiding this comment.
Set reminderBody in html format when editor updates
| } | ||
| }, [editor]); | ||
|
|
||
| const addVariable = (variable: string) => { |
There was a problem hiding this comment.
Function to add dynamic variables with editor.update
There was a problem hiding this comment.
Impressive work @CarinaWolli 🙏🏽
Just one minor detail. Can we do something about the "Add variable" button on mobile?
Good catch @zomars! I changed the mobile view. That's how it looks now: |
What does this PR do?
Adds a text editor to create better custom email bodies.
Uses facebook/lexical instead of Draft.js (old PR) for text editor because Draft.js is not maintained anymore (facebookarchive/draft-js#3136 (comment))
Lexical Rich Text Example was used as a basis
Fixes #5599
Loom: https://www.loom.com/share/4648ba5faace4378acf940ef38994b7b
Environment: Staging(main branch)
Type of change
How should this be tested?