Merge pull request #413 from tautastic/tautastic/issue412

bug: Usage of `editor.chain().focus()` removes focus from tippy popover Fixes #412
steven-tey · Jul 15, 2024 · d0555b9 · d0555b9
2 parents fb42c23 + ad2e6f8
commit d0555b9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/apps/web/components/tailwind/selectors/color-selector.tsx b/apps/web/components/tailwind/selectors/color-selector.tsx
@@ -134,6 +134,7 @@ export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
                     .focus()
                     .setColor(color || "")
                     .run();
+                onOpenChange(false);
               }}
               className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent"
             >
@@ -153,7 +154,8 @@ export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
               key={name}
               onSelect={() => {
                 editor.commands.unsetHighlight();
-                name !== "Default" && editor.commands.setHighlight({ color });
+                name !== "Default" && editor.chain().focus().setHighlight({ color }).run();
+                onOpenChange(false);
               }}
               className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent"
             >

diff --git a/apps/web/components/tailwind/selectors/link-selector.tsx b/apps/web/components/tailwind/selectors/link-selector.tsx
@@ -60,7 +60,10 @@ export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
             e.preventDefault();
             const input = target[0] as HTMLInputElement;
             const url = getUrlFromString(input.value);
-            url && editor.chain().focus().setLink({ href: url }).run();
+            if (url) {
+              editor.chain().focus().setLink({ href: url }).run();
+              onOpenChange(false);
+            }
           }}
           className="flex  p-1 "
         >
@@ -80,6 +83,7 @@ export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
               onClick={() => {
                 editor.chain().focus().unsetLink().run();
                 inputRef.current.value = "";
+                onOpenChange(false);
               }}
             >
               <Trash className="h-4 w-4" />

diff --git a/examples/novel-tailwind/src/components/editor/selectors/color-selector.tsx b/examples/novel-tailwind/src/components/editor/selectors/color-selector.tsx
@@ -145,6 +145,7 @@ export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
                     .focus()
                     .setColor(color || "")
                     .run();
+                onOpenChange(false);
               }}
               className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent"
             >
@@ -169,7 +170,8 @@ export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
               key={index}
               onSelect={() => {
                 editor.commands.unsetHighlight();
-                name !== "Default" && editor.commands.setHighlight({ color });
+                name !== "Default" && editor.chain().focus().setHighlight({ color }).run();
+                onOpenChange(false);
               }}
               className="flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent"
             >

diff --git a/examples/novel-tailwind/src/components/editor/selectors/link-selector.tsx b/examples/novel-tailwind/src/components/editor/selectors/link-selector.tsx
@@ -73,7 +73,10 @@ export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
             e.preventDefault();
             const input = target[0] as HTMLInputElement;
             const url = getUrlFromString(input.value);
-            url && editor.chain().focus().setLink({ href: url }).run();
+            if (url) {
+              editor.chain().focus().setLink({ href: url }).run();
+              onOpenChange(false);
+            }
           }}
           className="flex  p-1 "
         >
@@ -92,6 +95,7 @@ export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
               className="flex h-8 items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
               onClick={() => {
                 editor.chain().focus().unsetLink().run();
+                onOpenChange(false);
               }}
             >
               <Trash className="h-4 w-4" />