open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

migrate another daisy tooltip to ours

Browse Source
This commit is contained in:
Sinclair Chen 2022-08-11 19:34:42 -07:00
parent 4e80038997
commit 9d8a21653c
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/editor.tsx
View File

@ -33,6 +33,7 @@ import { Row } from './layout/row'
import { Spacer } from './layout/spacer' import { Spacer } from './layout/spacer'
import { MarketModal } from './editor/market-modal' import { MarketModal } from './editor/market-modal'
import { insertContent } from './editor/utils' import { insertContent } from './editor/utils'
import { Tooltip } from './tooltip'
const DisplayImage = Image.configure({ const DisplayImage = Image.configure({
HTMLAttributes: { HTMLAttributes: {
@ -155,15 +156,15 @@ export function TextEditor(props: {
<EditorContent editor={editor} /> <EditorContent editor={editor} />
{/* Toolbar, with buttons for images and embeds */} {/* Toolbar, with buttons for images and embeds */}
<div className="flex h-9 items-center gap-5 pl-4 pr-1"> <div className="flex h-9 items-center gap-5 pl-4 pr-1">
<div className="tooltip flex items-center" data-tip="Add image"> <Tooltip className="flex items-center" text="Add image" noTap>
<FileUploadButton <FileUploadButton
onFiles={upload.mutate} 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" className="-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
> >
<PhotographIcon className="h-5 w-5" aria-hidden="true" /> <PhotographIcon className="h-5 w-5" aria-hidden="true" />
</FileUploadButton> </FileUploadButton>
</div> </Tooltip>
<div className="tooltip flex items-center" data-tip="Add embed"> <Tooltip className="flex items-center" text="Add embed" noTap>
<button <button
type="button" type="button"
onClick={() => setIframeOpen(true)} onClick={() => setIframeOpen(true)}
@ -176,8 +177,8 @@ export function TextEditor(props: {
/> />
<CodeIcon className="h-5 w-5" aria-hidden="true" /> <CodeIcon className="h-5 w-5" aria-hidden="true" />
</button> </button>
</div> </Tooltip>
<div className="tooltip flex items-center" data-tip="Add market"> <Tooltip className="flex items-center" text="Add market" noTap>
<button <button
type="button" type="button"
onClick={() => setMarketOpen(true)} onClick={() => setMarketOpen(true)}
@ -193,7 +194,7 @@ export function TextEditor(props: {
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
</div> </Tooltip>
{/* Spacer that also focuses editor on click */} {/* Spacer that also focuses editor on click */}
<div <div
className="grow cursor-text self-stretch" className="grow cursor-text self-stretch"

4
web/components/tooltip.tsx
View File

@ -46,7 +46,7 @@ export function Tooltip(props: {
}[placement.split('-')[0]] as string }[placement.split('-')[0]] as string
return text ? ( return text ? (
<> <div className="contents">
<div <div
className={clsx('peer inline-block', className)} className={clsx('peer inline-block', className)}
ref={reference} ref={reference}
@ -74,7 +74,7 @@ export function Tooltip(props: {
}} }}
/> />
</div> </div>
</> </div>
) : ( ) : (
<>{children}</> <>{children}</>
) )