Feedback of reusable wysiwyg editor (#6357)

* make text editor reusable

* use dropdown component for block type

* remove ring when clicking on block type

* allow excluding items in toolbar

* refactor code

* make AddVariableDropdown reusable

* fixed missed translations

* fixes variable translation issue

* change missed translation variables

* make AddVariablesDropdown reusable

* reorder block types in dropdown

* remove not needed prop

* code clean up

* center add variable dropwdown icon

* remove rounded borders in dropwdown on hover and active

* center icons

* fix tool bar items dropdown

* add constant for dynamic text variables

* remove not needed variables (added from merge)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: alannnc <alannnc@gmail.com>

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

@@ -38,6 +38,7 @@ import {
   AddVariablesDropdown,
 } from "@calcom/ui";
 
+import { DYNAMIC_TEXT_VARIABLES } from "../lib/constants";
 import { getWorkflowTemplateOptions, getWorkflowTriggerOptions } from "../lib/getOptions";
 import { translateVariablesToEnglish } from "../lib/variableTranslations";
 import type { FormValues } from "../pages/workflow";
@@ -50,18 +51,6 @@ type WorkflowStepProps = {
   setReload?: Dispatch<SetStateAction<boolean>>;
 };
 
-const dynamicTextVariables = [
-  "event_name",
-  "event_date",
-  "event_time",
-  "location",
-  "organizer_name",
-  "attendee_name",
-  "attendee_email",
-  "additional_notes",
-  "meeting_url",
-];
-
 export default function WorkflowStepContainer(props: WorkflowStepProps) {
   const { t, i18n } = useLocale();
   const utils = trpc.useContext();
@@ -557,7 +546,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         <div className="flex-grow text-right">
                           <AddVariablesDropdown
                             addVariable={addVariableEmailSubject}
-                            variables={dynamicTextVariables}
+                            variables={DYNAMIC_TEXT_VARIABLES}
                           />
                         </div>
                       </div>
@@ -596,7 +585,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                           props.form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, text);
                           props.form.clearErrors();
                         }}
-                        variables={dynamicTextVariables}
+                        variables={DYNAMIC_TEXT_VARIABLES}
                       />
                     </>
                   ) : (
@@ -608,7 +597,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         <div className="flex-grow text-right">
                           <AddVariablesDropdown
                             addVariable={addVariableBody}
-                            variables={dynamicTextVariables}
+                            variables={DYNAMIC_TEXT_VARIABLES}
                           />
                         </div>
                       </div>

packages/features/ee/workflows/lib/constants.ts

@@ -19,3 +19,15 @@ export const WORKFLOW_ACTIONS = [
 export const TIME_UNIT = [TimeUnit.DAY, TimeUnit.HOUR, TimeUnit.MINUTE] as const;
 
 export const WORKFLOW_TEMPLATES = [WorkflowTemplates.CUSTOM, WorkflowTemplates.REMINDER] as const;
+
+export const DYNAMIC_TEXT_VARIABLES = [
+  "event_name",
+  "event_date",
+  "event_time",
+  "location",
+  "organizer_name",
+  "attendee_name",
+  "attendee_email",
+  "additional_notes",
+  "meeting_url",
+];

packages/features/ee/workflows/lib/variableTranslations.ts

@@ -1,16 +1,6 @@
 import { TFunction } from "next-i18next";
 
-const originalVariables = [
-  "event_name_variable",
-  "organizer_name_variable",
-  "attendee_name_variable",
-  "event_date_variable",
-  "event_time_variable",
-  "location_variable",
-  "additional_notes_variable",
-  "attendee_email_variable",
-  "meeting_url_variable",
-];
+import { DYNAMIC_TEXT_VARIABLES } from "./constants";
 
 export function getTranslatedText(text: string, language: { locale: string; t: TFunction }) {
   let translatedText = text;
@@ -22,9 +12,9 @@ export function getTranslatedText(text: string, language: { locale: string; t: T
 
     variables?.forEach((variable) => {
       const regex = new RegExp(`{${variable}}`, "g"); // .replaceAll is not available here for some reason
-      const translatedVariable = originalVariables.includes(variable.toLowerCase().concat("_variable"))
+      const translatedVariable = DYNAMIC_TEXT_VARIABLES.includes(variable.toLowerCase())
         ? language.t(variable.toLowerCase().concat("_variable")).replace(/ /g, "_").toLocaleUpperCase()
-        : originalVariables.includes(variable.toLowerCase().concat("_name_variable")) //for the old variables names (ORGANIZER_NAME, ATTENDEE_NAME)
+        : DYNAMIC_TEXT_VARIABLES.includes(variable.toLowerCase().concat("_name")) //for the old variables names (ORGANIZER_NAME, ATTENDEE_NAME)
         ? language.t(variable.toLowerCase().concat("_name_variable")).replace(/ /g, "_").toLocaleUpperCase()
         : variable;
 
@@ -44,8 +34,9 @@ export function translateVariablesToEnglish(text: string, language: { locale: st
     });
 
     variables?.forEach((variable) => {
-      originalVariables.forEach((originalVariable) => {
+      DYNAMIC_TEXT_VARIABLES.forEach((originalVar) => {
         const newVariableName = variable.replace("_NAME", "");
+        const originalVariable = `${originalVar}_variable`;
         if (
           language.t(originalVariable).replace(/ /g, "_").toUpperCase() === variable ||
           language.t(originalVariable).replace(/ /g, "_").toUpperCase() === newVariableName

packages/ui/components/editor/plugins/AddVariablesDropdown.tsx

@@ -18,14 +18,14 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
             <>
               <div className="hidden sm:flex">
                 {t("add_variable")}
-                <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+                <Icon.FiChevronDown className="mt-[2px] ml-1 h-4 w-4" />
               </div>
               <div className="block sm:hidden">+</div>
             </>
           ) : (
             <div className="flex">
               {t("add_variable")}
-              <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+              <Icon.FiChevronDown className="mt-[2px] ml-1 h-4 w-4" />
             </div>
           )}
         </div>

packages/ui/components/editor/plugins/ToolbarPlugin.tsx

@@ -418,8 +418,8 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                         type="button"
                         onClick={() => format(key)}
                         className={classNames(
-                          "toolbar-item w-full focus:ring-0",
-                          blockType === key ? "w-full bg-gray-100" : ""
+                          "toolbar-item  w-full rounded-none focus:ring-0",
+                          blockType === key ? "w-full  bg-gray-100" : ""
                         )}>
                         <>
                           <span className={"icon block-type " + key} />
@@ -444,7 +444,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                   editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
                 }
               }}
-              className={"toolbar-item spaced " + (isBold ? "active" : "")}
+              className={"toolbar-item spaced rounded-md " + (isBold ? "active" : "")}
               aria-label="Format Bold">
               <i className="format bold" />
             </button>
@@ -458,7 +458,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                   editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
                 }
               }}
-              className={"toolbar-item spaced " + (isItalic ? "active" : "")}
+              className={"toolbar-item spaced rounded-md " + (isItalic ? "active" : "")}
               aria-label="Format Italics">
               <i className="format italic" />
             </button>
@@ -468,7 +468,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               <button
                 type="button"
                 onClick={insertLink}
-                className={"toolbar-item spaced " + (isLink ? "active" : "")}
+                className={"toolbar-item spaced rounded-md " + (isLink ? "active" : "")}
                 aria-label="Insert Link">
                 <i className="format link" />
               </button>

packages/ui/components/editor/stylesEditor.css

@@ -129,7 +129,6 @@ pre::-webkit-scrollbar-thumb {
 .toolbar button.toolbar-item {
   border: 0;
   display: flex;
-  border-radius: 10px;
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
@@ -145,7 +144,8 @@ pre::-webkit-scrollbar-thumb {
   display: inline-block;
   height: 18px;
   width: 18px;
-  margin-top: 2px;
+  margin-top: 1px;
+  margin-left: 1px;
   vertical-align: -0.25em;
   display: flex;
   opacity: 0.6;