From 430430e0cdf762467d60ca23c9ed7f7153c3c369 Mon Sep 17 00:00:00 2001 From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Date: Mon, 9 Jan 2023 21:22:17 -0500 Subject: [PATCH] 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 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Peer Richelsen Co-authored-by: alannnc --- .../components/WorkflowStepContainer.tsx | 19 ++++--------------- .../features/ee/workflows/lib/constants.ts | 12 ++++++++++++ .../ee/workflows/lib/variableTranslations.ts | 19 +++++-------------- .../editor/plugins/AddVariablesDropdown.tsx | 4 ++-- .../editor/plugins/ToolbarPlugin.tsx | 10 +++++----- .../ui/components/editor/stylesEditor.css | 4 ++-- 6 files changed, 30 insertions(+), 38 deletions(-) diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx index 4a8d34f321..eaab69dd97 100644 --- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx +++ b/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>; }; -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) {
@@ -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) {
diff --git a/packages/features/ee/workflows/lib/constants.ts b/packages/features/ee/workflows/lib/constants.ts index 07e43a397b..97b6d13d6a 100644 --- a/packages/features/ee/workflows/lib/constants.ts +++ b/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", +]; diff --git a/packages/features/ee/workflows/lib/variableTranslations.ts b/packages/features/ee/workflows/lib/variableTranslations.ts index 04526c63d4..9040a5e167 100644 --- a/packages/features/ee/workflows/lib/variableTranslations.ts +++ b/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 diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx index 954d770cfb..ba54d99dbb 100644 --- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx +++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx @@ -18,14 +18,14 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => { <>
{t("add_variable")} - +
+
) : (
{t("add_variable")} - +
)} diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx index b0b692f1db..233649ca10 100644 --- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx +++ b/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" : "" )}> <> @@ -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"> @@ -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"> @@ -468,7 +468,7 @@ export default function ToolbarPlugin(props: TextEditorProps) { diff --git a/packages/ui/components/editor/stylesEditor.css b/packages/ui/components/editor/stylesEditor.css index 2ca8c65ed6..dad449736f 100644 --- a/packages/ui/components/editor/stylesEditor.css +++ b/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;