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 <wollencarina@gmail.com>

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) => {
         <Label className="mb-2 block text-sm font-medium text-gray-700">{t("about")}</Label>
         <Editor
           getText={() => md.render(getValues("bio") || user?.bio || "")}
-          setText={(value: string) => setValue("bio", turndownService.turndown(value))}
+          setText={(value: string) => setValue("bio", turndown(value))}
           excludedToolbarItems={["blockType"]}
         />
         <p className="mt-2 font-sans text-sm font-normal text-gray-600 dark:text-white">

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 = ({
         <Editor
           getText={() => 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"]}
         />

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 = () => {
                 <Label>{t("about")}</Label>
                 <Editor
                   getText={() => md.render(form.getValues("bio") || "")}
-                  setText={(value: string) => form.setValue("bio", turndownService.turndown(value))}
+                  setText={(value: string) => form.setValue("bio", turndown(value))}
                   excludedToolbarItems={["blockType"]}
                 />
               </div>

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("[<p><br></p>]", "");
+
+  if (result === "<p><br></p>") {
+    result = "";
+  }
+
+  return result;
+}
+
+turndownService.addRule("shiftEnter", {
+  filter: function (node) {
+    return node.nodeName === "BR" && !!isShiftEnter(node);
+  },
+  replacement: function () {
+    return "<br>";
+  },
+});
+
+turndownService.addRule("enter", {
+  filter: function (node) {
+    return node.nodeName === "BR" && !isShiftEnter(node);
+  },
+  replacement: function () {
     return "<p><br></p>";
   },
 });
 
-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><br><p> (p has exactly one childNode)
+  );
+}
+
+export default turndown;

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 (
     <div className="toolbar flex" ref={toolbarRef}>
       <>

packages/ui/components/editor/stylesEditor.css

@@ -68,7 +68,6 @@
 
 .editor-paragraph {
   margin: 0;
-  margin-bottom: 8px;
   position: relative;
 }