From 333801d2ae21fe48f19928c81f2496fd43d43d01 Mon Sep 17 00:00:00 2001 From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Date: Fri, 27 Jan 2023 18:14:58 -0500 Subject: [PATCH] Fix shift-enter in bio editor (#6769) * fix wrong enabled update button at first load * fix shift-enter error * small fixes + code clean up --------- Co-authored-by: CarinaWolli --- .../steps-views/UserProfile.tsx | 4 +- .../web/pages/settings/my-account/profile.tsx | 4 +- .../ee/teams/pages/team-profile-view.tsx | 4 +- packages/lib/turndownService.ts | 45 +++++++++++++++++-- .../editor/plugins/ToolbarPlugin.tsx | 1 - .../ui/components/editor/stylesEditor.css | 1 - 6 files changed, 47 insertions(+), 12 deletions(-) diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx index 1cb8f91ea1..74de82d55c 100644 --- a/apps/web/components/getting-started/steps-views/UserProfile.tsx +++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx @@ -5,7 +5,7 @@ import { FormEvent, useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import turndownService from "@calcom/lib/turndownService"; +import turndown from "@calcom/lib/turndownService"; import { trpc } from "@calcom/trpc/react"; import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui"; import { Avatar } from "@calcom/ui"; @@ -142,7 +142,7 @@ const UserProfile = (props: IUserProfileProps) => { md.render(getValues("bio") || user?.bio || "")} - setText={(value: string) => setValue("bio", turndownService.turndown(value))} + setText={(value: string) => setValue("bio", turndown(value))} excludedToolbarItems={["blockType"]} />

diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx index e9c0dc4913..a3d576335c 100644 --- a/apps/web/pages/settings/my-account/profile.tsx +++ b/apps/web/pages/settings/my-account/profile.tsx @@ -10,7 +10,7 @@ import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; import { ErrorCode } from "@calcom/lib/auth"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import turndownService from "@calcom/lib/turndownService"; +import turndown from "@calcom/lib/turndownService"; import { TRPCClientErrorLike } from "@calcom/trpc/client"; import { trpc } from "@calcom/trpc/react"; import { AppRouter } from "@calcom/trpc/server/routers/_app"; @@ -370,7 +370,7 @@ const ProfileForm = ({ md.render(formMethods.getValues("bio") || "")} setText={(value: string) => { - formMethods.setValue("bio", turndownService.turndown(value), { shouldDirty: true }); + formMethods.setValue("bio", turndown(value), { shouldDirty: true }); }} excludedToolbarItems={["blockType"]} /> diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx index ef3bcb41e0..ed3d49d49f 100644 --- a/packages/features/ee/teams/pages/team-profile-view.tsx +++ b/packages/features/ee/teams/pages/team-profile-view.tsx @@ -12,7 +12,7 @@ import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import objectKeys from "@calcom/lib/objectKeys"; -import turndownService from "@calcom/lib/turndownService"; +import turndown from "@calcom/lib/turndownService"; import { trpc } from "@calcom/trpc/react"; import { Avatar, @@ -223,7 +223,7 @@ const ProfileView = () => { md.render(form.getValues("bio") || "")} - setText={(value: string) => form.setValue("bio", turndownService.turndown(value))} + setText={(value: string) => form.setValue("bio", turndown(value))} excludedToolbarItems={["blockType"]} /> diff --git a/packages/lib/turndownService.ts b/packages/lib/turndownService.ts index 85cc0d4955..47e1854db5 100644 --- a/packages/lib/turndownService.ts +++ b/packages/lib/turndownService.ts @@ -2,11 +2,48 @@ import TurndownService from "turndown"; const turndownService = new TurndownService(); -turndownService.addRule("newLine", { - filter: ["br"], - replacement: () => { +function turndown(html: string | TurndownService.Node): string { + let result = turndownService.turndown(html); + result = result.replaceAll("[


]", ""); + + if (result === "


") { + result = ""; + } + + return result; +} + +turndownService.addRule("shiftEnter", { + filter: function (node) { + return node.nodeName === "BR" && !!isShiftEnter(node); + }, + replacement: function () { + return "
"; + }, +}); + +turndownService.addRule("enter", { + filter: function (node) { + return node.nodeName === "BR" && !isShiftEnter(node); + }, + replacement: function () { return "


"; }, }); -export default turndownService; +function isShiftEnter(node: HTMLElement) { + let currentNode: HTMLElement | null | ParentNode = node; + + while (currentNode != null && currentNode.nodeType !== 1) { + currentNode = currentNode.parentElement || currentNode.parentNode; + } + + return ( + currentNode && + currentNode.nodeType === 1 && + currentNode.parentElement && + currentNode.parentElement.childNodes.length !== 1 // normal enter is


(p has exactly one childNode) + ); +} + +export default turndown; diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx index abf00195cd..e2ed05a223 100644 --- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx +++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx @@ -387,7 +387,6 @@ export default function ToolbarPlugin(props: TextEditorProps) { editor.dispatchCommand(TOGGLE_LINK_COMMAND, null); } }, [editor, isLink]); - console.log("TEST", blockTypeToBlockName[blockType]); return (

<> diff --git a/packages/ui/components/editor/stylesEditor.css b/packages/ui/components/editor/stylesEditor.css index b46fd8b9b2..65c89ef81e 100644 --- a/packages/ui/components/editor/stylesEditor.css +++ b/packages/ui/components/editor/stylesEditor.css @@ -68,7 +68,6 @@ .editor-paragraph { margin: 0; - margin-bottom: 8px; position: relative; }