diff --git a/web/components/editor.tsx b/web/components/editor.tsx index 3ec0663b..41c2b80a 100644 --- a/web/components/editor.tsx +++ b/web/components/editor.tsx @@ -18,12 +18,10 @@ import { uploadImage } from 'web/lib/firebase/storage' import { useMutation } from 'react-query' import { exhibitExts } from 'common/util/parse' import { FileUploadButton } from './file-upload-button' +import { linkClass } from './site-link' const proseClass = clsx( 'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none', - // link styles mostly copied from site-link.ts - 'prose-a:no-underline prose-a:!text-indigo-700', - 'prose-a:z-10 prose-a:break-words hover:prose-a:underline hover:prose-a:decoration-indigo-400 prose-a:hover:decoration-2' ) export function useTextEditor(props: { @@ -52,7 +50,7 @@ export function useTextEditor(props: { }), CharacterCount.configure({ limit: max }), Image, - Link, + Link.configure({ HTMLAttributes: { class: clsx('no-underline !text-indigo-700', linkClass)}}), ], content: defaultValue, }) diff --git a/web/components/site-link.tsx b/web/components/site-link.tsx index 8137eb08..ee12d519 100644 --- a/web/components/site-link.tsx +++ b/web/components/site-link.tsx @@ -2,6 +2,9 @@ import clsx from 'clsx' import { ReactNode } from 'react' import Link from 'next/link' +export const linkClass = + 'z-10 break-words hover:underline hover:decoration-indigo-400 hover:decoration-2' + export const SiteLink = (props: { href: string children?: ReactNode @@ -13,10 +16,7 @@ export const SiteLink = (props: { return (