From 7c1e663b264b05ed62aaf942e4df2f987d1c0fd1 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 31 Aug 2022 20:52:12 -0700
Subject: [PATCH] Editor tweaks (#829)

* Show border around selected embeds

* Make editor tooltips not animate
---
 web/components/editor.tsx  | 10 ++++++----
 web/components/tooltip.tsx |  9 +++++----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index d7836c34..c15d17b1 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -73,7 +73,9 @@ export function useTextEditor(props: {
   const editorClass = clsx(
     proseClass,
     !simple && 'min-h-[6em]',
-    'outline-none pt-2 px-4'
+    'outline-none pt-2 px-4',
+    'prose-img:select-auto',
+    '[&_.ProseMirror-selectednode]:outline-dotted [&_*]:outline-indigo-300' // selected img, emebeds
   )
 
   const editor = useEditor(
@@ -164,7 +166,7 @@ export function TextEditor(props: {
           <EditorContent editor={editor} />
           {/* Toolbar, with buttons for images and embeds */}
           <div className="flex h-9 items-center gap-5 pl-4 pr-1">
-            <Tooltip className="flex items-center" text="Add image" noTap>
+            <Tooltip text="Add image" noTap noFade>
               <FileUploadButton
                 onFiles={upload.mutate}
                 className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
@@ -172,7 +174,7 @@ export function TextEditor(props: {
                 <PhotographIcon className="h-5 w-5" aria-hidden="true" />
               </FileUploadButton>
             </Tooltip>
-            <Tooltip className="flex items-center" text="Add embed" noTap>
+            <Tooltip text="Add embed" noTap noFade>
               <button
                 type="button"
                 onClick={() => setIframeOpen(true)}
@@ -186,7 +188,7 @@ export function TextEditor(props: {
                 <CodeIcon className="h-5 w-5" aria-hidden="true" />
               </button>
             </Tooltip>
-            <Tooltip className="flex items-center" text="Add market" noTap>
+            <Tooltip text="Add market" noTap noFade>
               <button
                 type="button"
                 onClick={() => setMarketOpen(true)}
diff --git a/web/components/tooltip.tsx b/web/components/tooltip.tsx
index 4dd1f6e2..418be88e 100644
--- a/web/components/tooltip.tsx
+++ b/web/components/tooltip.tsx
@@ -21,8 +21,9 @@ export function Tooltip(props: {
   className?: string
   placement?: Placement
   noTap?: boolean
+  noFade?: boolean
 }) {
-  const { text, children, className, placement = 'top', noTap } = props
+  const { text, children, className, placement = 'top', noTap, noFade } = props
 
   const arrowRef = useRef(null)
 
@@ -64,10 +65,10 @@ export function Tooltip(props: {
       {/* conditionally render tooltip and fade in/out */}
       <Transition
         show={open}
-        enter="transition ease-out duration-200"
-        enterFrom="opacity-0 "
+        enter="transition ease-out duration-50"
+        enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition ease-in duration-150"
+        leave={noFade ? '' : 'transition ease-in duration-150'}
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         // div attributes