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

Editor tweaks (#829)

Browse Source 
* Show border around selected embeds

* Make editor tooltips not animate
This commit is contained in:
Sinclair Chen 2022-08-31 20:52:12 -07:00 committed by GitHub
parent 2c3cd34444
commit 7c1e663b26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/editor.tsx
View File

@ -73,7 +73,9 @@ export function useTextEditor(props: {
const editorClass = clsx( const editorClass = clsx(
proseClass, proseClass,
!simple && 'min-h-[6em]', !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( const editor = useEditor(
@ -164,7 +166,7 @@ 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">
<Tooltip className="flex items-center" text="Add image" noTap> <Tooltip text="Add image" noTap noFade>
<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"
@ -172,7 +174,7 @@ export function TextEditor(props: {
<PhotographIcon className="h-5 w-5" aria-hidden="true" /> <PhotographIcon className="h-5 w-5" aria-hidden="true" />
</FileUploadButton> </FileUploadButton>
</Tooltip> </Tooltip>
<Tooltip className="flex items-center" text="Add embed" noTap> <Tooltip text="Add embed" noTap noFade>
<button <button
type="button" type="button"
onClick={() => setIframeOpen(true)} onClick={() => setIframeOpen(true)}
@ -186,7 +188,7 @@ export function TextEditor(props: {
<CodeIcon className="h-5 w-5" aria-hidden="true" /> <CodeIcon className="h-5 w-5" aria-hidden="true" />
</button> </button>
</Tooltip> </Tooltip>
<Tooltip className="flex items-center" text="Add market" noTap> <Tooltip text="Add market" noTap noFade>
<button <button
type="button" type="button"
onClick={() => setMarketOpen(true)} onClick={() => setMarketOpen(true)}

9
web/components/tooltip.tsx
View File

@ -21,8 +21,9 @@ export function Tooltip(props: {
className?: string className?: string
placement?: Placement placement?: Placement
noTap?: boolean 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) const arrowRef = useRef(null)
@ -64,10 +65,10 @@ export function Tooltip(props: {
{/* conditionally render tooltip and fade in/out */} {/* conditionally render tooltip and fade in/out */}
<Transition <Transition
show={open} show={open}
enter="transition ease-out duration-200" enter="transition ease-out duration-50"
enterFrom="opacity-0 " enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="transition ease-in duration-150" leave={noFade ? '' : 'transition ease-in duration-150'}
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
// div attributes // div attributes