chore: link dialog plugin uses tailwind

mdx-editor · Apr 20, 2023 · 02a61c6 · 02a61c6
1 parent 11ef10c
commit 02a61c6
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 211 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
diff --git a/.idea/dictionaries/petyo.xml b/.idea/dictionaries/petyo.xml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
diff --git a/.idea/lexical-mdx.iml b/.idea/lexical-mdx.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/src/ui/LinkDialogPlugin/index.tsx b/src/ui/LinkDialogPlugin/index.tsx
@@ -4,15 +4,15 @@ import React from 'react'
 
 import { createCommand, LexicalCommand } from 'lexical'
 import { useEmitterValues, usePublisher } from '../../system'
-import { PopoverAnchor, PopoverContent } from '../Popover/primitives'
 import { ReactComponent as CheckIcon } from './icons/check.svg'
 import { ReactComponent as CloseIcon } from './icons/close.svg'
 import { ReactComponent as CopyIcon } from './icons/content_copy.svg'
 import { ReactComponent as EditIcon } from './icons/edit.svg'
 import { ReactComponent as LinkOffIcon } from './icons/link_off.svg'
 import { ReactComponent as OpenInNewIcon } from './icons/open_in_new.svg'
-import { LinkTextContainer, LinkUIInput, PopoverButton, TooltipArrow, TooltipContent, WorkingLink } from './primitives'
 import { useForm } from 'react-hook-form'
+import classNames from 'classnames'
+import { buttonClasses } from '../commonCssClasses'
 
 export const OPEN_LINK_DIALOG: LexicalCommand<undefined> = createCommand()
 
@@ -40,16 +40,21 @@ function LinkEditForm({ initialUrl, onSubmit, onCancel }: LinkEditFormProps) {
   }, [])
 
   return (
-    <form onSubmit={onSubmitEH} onReset={onCancel}>
-      <LinkUIInput {...register('url')} onKeyDown={onKeyDownEH} autoFocus />
+    <form onSubmit={onSubmitEH} onReset={onCancel} className="flex ">
+      <input
+        className="mr-3 py-1 px-2 rounded-md border-1 border-primary-100 border-solid text-sm font-sans"
+        {...register('url')}
+        onKeyDown={onKeyDownEH}
+        autoFocus
+      />
 
-      <PopoverButton type="submit" title="Set URL" aria-label="Set URL">
+      <ActionButton type="submit" title="Set URL" aria-label="Set URL">
         <CheckIcon />
-      </PopoverButton>
+      </ActionButton>
 
-      <PopoverButton type="reset" title="Cancel change" aria-label="Cancel change">
+      <ActionButton type="reset" title="Cancel change" aria-label="Cancel change">
         <CloseIcon />
-      </PopoverButton>
+      </ActionButton>
     </form>
   )
 }
@@ -94,9 +99,10 @@ export function LinkDialogPlugin() {
 
   return (
     <Popover.Root open={linkDialogState.type !== 'inactive'}>
-      <PopoverAnchor
+      <Popover.Anchor
+        data-visible={linkDialogState.type === 'edit'}
+        className='data-[visible="true"]:visible data-[visible=false]:invisible absolute bg-[highlight] z-[-1]'
         style={{
-          visibility: linkDialogState.type === 'edit' ? 'visible' : 'hidden',
           top: theRect?.top,
           left: theRect?.left,
           width: theRect?.width,
@@ -105,54 +111,70 @@ export function LinkDialogPlugin() {
       />
 
       <Popover.Portal>
-        <PopoverContent sideOffset={5} onOpenAutoFocus={(e) => e.preventDefault()} key={linkDialogState.linkNodeKey}>
-          <div style={{ display: 'flex', gap: 8, alignContent: 'center', padding: 8 }}>
-            {linkDialogState.type === 'edit' && (
-              <LinkEditForm initialUrl={linkDialogState.url} onSubmit={onSubmitEH} onCancel={cancelLinkEdit.bind(null, true)} />
-            )}
-
-            {linkDialogState.type === 'preview' && (
-              <>
-                <WorkingLink href={linkDialogState.url} target="_blank" rel="noreferrer" title={linkDialogState.url}>
-                  <LinkTextContainer>{linkDialogState.url}</LinkTextContainer>
-                  <OpenInNewIcon />
-                </WorkingLink>
-                <PopoverButton onClick={() => switchFromPreviewToLinkEdit(true)} title="Edit link URL" aria-label="Edit link URL">
-                  <EditIcon />
-                </PopoverButton>
-                <Tooltip.Provider>
-                  <Tooltip.Root open={copyUrlTooltipOpen}>
-                    <Tooltip.Trigger asChild>
-                      <PopoverButton
-                        title="Copy to clipboard"
-                        aria-label="Copy link URL"
-                        onClick={() => {
-                          void window.navigator.clipboard.writeText(linkDialogState.url).then(() => {
-                            setCopyUrlTooltipOpen(true)
-                            setTimeout(() => setCopyUrlTooltipOpen(false), 1000)
-                          })
-                        }}
-                      >
-                        {copyUrlTooltipOpen ? <CheckIcon /> : <CopyIcon />}
-                      </PopoverButton>
-                    </Tooltip.Trigger>
-                    <Tooltip.Portal>
-                      <TooltipContent sideOffset={5}>
-                        Copied!
-                        <TooltipArrow />
-                      </TooltipContent>
-                    </Tooltip.Portal>
-                  </Tooltip.Root>
-                </Tooltip.Provider>
-
-                <PopoverButton title="Remove link" aria-label="Remove link" onClick={() => removeLink(true)}>
-                  <LinkOffIcon />
-                </PopoverButton>
-              </>
-            )}
-          </div>
-        </PopoverContent>
+        <Popover.Content
+          className="flex flex-row items-center gap-0.5 rounded-md border-2 border-solid border-surface-50 bg-popoverBg px-4 py-2 pr-3 font-sans text-sm shadow-sm shadow-surface-200"
+          sideOffset={5}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          key={linkDialogState.linkNodeKey}
+        >
+          {linkDialogState.type === 'edit' && (
+            <LinkEditForm initialUrl={linkDialogState.url} onSubmit={onSubmitEH} onCancel={cancelLinkEdit.bind(null, true)} />
+          )}
+
+          {linkDialogState.type === 'preview' && (
+            <>
+              <a
+                className="mr-3 pl-2 flex flex-row items-center text-primary-600 no-underline [&_svg]:w-5 [&_svg]:h-5 border-transparent border-solid border-1"
+                href={linkDialogState.url}
+                target="_blank"
+                rel="noreferrer"
+                title={linkDialogState.url}
+              >
+                <span className="max-w-[10rem] overflow-hidden text-ellipsis whitespace-nowrap">{linkDialogState.url}</span>
+                <OpenInNewIcon className="ml-2" />
+              </a>
+              <ActionButton onClick={() => switchFromPreviewToLinkEdit(true)} title="Edit link URL" aria-label="Edit link URL">
+                <EditIcon />
+              </ActionButton>
+              <Tooltip.Provider>
+                <Tooltip.Root open={copyUrlTooltipOpen}>
+                  <Tooltip.Trigger asChild>
+                    <ActionButton
+                      title="Copy to clipboard"
+                      aria-label="Copy link URL"
+                      onClick={() => {
+                        void window.navigator.clipboard.writeText(linkDialogState.url).then(() => {
+                          setCopyUrlTooltipOpen(true)
+                          setTimeout(() => setCopyUrlTooltipOpen(false), 1000)
+                        })
+                      }}
+                    >
+                      {copyUrlTooltipOpen ? <CheckIcon /> : <CopyIcon />}
+                    </ActionButton>
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content
+                      className="rounded-md bg-slate-700 p-1 px-2 font-sans text-xs text-slate-50 data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+                      sideOffset={5}
+                    >
+                      Copied!
+                      <Tooltip.Arrow />
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+              </Tooltip.Provider>
+
+              <ActionButton title="Remove link" aria-label="Remove link" onClick={() => removeLink(true)}>
+                <LinkOffIcon />
+              </ActionButton>
+            </>
+          )}
+        </Popover.Content>
       </Popover.Portal>
     </Popover.Root>
   )
 }
+
+const ActionButton = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(({ className, ...props }, ref) => {
+  return <button className={classNames(buttonClasses, className, '[&_svg]:w-5 [&_svg]:h-5')} ref={ref} {...props} />
+})
diff --git a/src/ui/LinkDialogPlugin/primitives.tsx b/src/ui/LinkDialogPlugin/primitives.tsx
diff --git a/src/ui/ToolbarPlugin/index.tsx b/src/ui/ToolbarPlugin/index.tsx
@@ -19,11 +19,11 @@ import { ReactComponent as HorizontalRuleIcon } from './icons/horizontal_rule.sv
 import { ReactComponent as LinkIcon } from './icons/link.svg'
 import { ReactComponent as MarkdownIcon } from './icons/markdown.svg'
 
+import classnames from 'classnames'
 import { ViewMode } from '../'
 import { IS_BOLD, IS_CODE, IS_ITALIC, IS_UNDERLINE } from '../../FormatConstants'
 import { useEmitterValues, usePublisher } from '../../system'
-import classnames from 'classnames'
-import { buttonClasses, childSvgClasses, toggleItemClasses } from '../commonCssClasses'
+import { buttonClasses, toggleItemClasses } from '../commonCssClasses'
 
 export const ToolbarPlugin = () => {
   const [currentFormat, currentListType, viewMode, activeSandpackNode] = useEmitterValues(
@@ -60,7 +60,7 @@ export const ToolbarPlugin = () => {
 
   return (
     <RadixToolbar.Root
-      className="mb-6 flex flex-row gap-2 rounded-md border-2 border-solid border-surface-50 p-2"
+      className="m-2 mb-6 flex flex-row gap-2 rounded-md border-2 border-solid border-surface-50 p-2 min-w-max"
       aria-label="Formatting options"
     >
       <GroupGroup>
@@ -181,7 +181,7 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, RadixToolbar.ToolbarBu
 const ToggleSingleGroup = React.forwardRef<HTMLDivElement, Omit<RadixToolbar.ToolbarToggleGroupSingleProps, 'type'>>(
   ({ children, ...props }, forwardedRef) => {
     return (
-      <RadixToolbar.ToggleGroup {...props} type="single" ref={forwardedRef}>
+      <RadixToolbar.ToggleGroup {...props} type="single" ref={forwardedRef} className="whitespace-nowrap">
         {children}
       </RadixToolbar.ToggleGroup>
     )

diff --git a/src/utils/lexicalHelpers.ts b/src/utils/lexicalHelpers.ts
@@ -53,13 +53,6 @@ export function getSelectionRectangle(editor: LexicalEditor) {
       rect = domRange.getBoundingClientRect()
     }
 
-    console.log({
-      top: rect.top + window.scrollY,
-      left: rect.left + window.scrollX,
-      width: rect.width,
-      height: rect.height,
-    })
-
     return {
       top: rect.top + window.scrollY,
       left: rect.left + window.scrollX,