Replace editor #174
10
src/components/Markdown/Dialog.module.scss
Normal file
10
src/components/Markdown/Dialog.module.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.formAction {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: var(--spacing-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
@ -39,6 +39,8 @@ import React, {
|
|||||||
useMemo,
|
useMemo,
|
||||||
useRef
|
useRef
|
||||||
} from 'react'
|
} from 'react'
|
||||||
|
import { ImageDialog } from './ImageDialog'
|
||||||
|
import { LinkDialog } from './LinkDialog'
|
||||||
|
|
||||||
export interface EditorRef {
|
export interface EditorRef {
|
||||||
setMarkdown: (md: string) => void
|
setMarkdown: (md: string) => void
|
||||||
@ -95,10 +97,14 @@ export const Editor = React.memo(
|
|||||||
}),
|
}),
|
||||||
headingsPlugin(),
|
headingsPlugin(),
|
||||||
quotePlugin(),
|
quotePlugin(),
|
||||||
imagePlugin(),
|
imagePlugin({
|
||||||
|
ImageDialog: ImageDialog
|
||||||
|
}),
|
||||||
tablePlugin(),
|
tablePlugin(),
|
||||||
linkPlugin(),
|
linkPlugin(),
|
||||||
linkDialogPlugin(),
|
linkDialogPlugin({
|
||||||
|
LinkDialog: LinkDialog
|
||||||
|
}),
|
||||||
listsPlugin(),
|
listsPlugin(),
|
||||||
thematicBreakPlugin(),
|
thematicBreakPlugin(),
|
||||||
directivesPlugin({
|
directivesPlugin({
|
||||||
|
|||||||
166
src/components/Markdown/ImageDialog.tsx
Normal file
166
src/components/Markdown/ImageDialog.tsx
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
import React, { useCallback, useEffect, useState } from 'react'
|
||||||
|
import { useForm } from 'react-hook-form'
|
||||||
|
import { useCellValues, usePublisher } from '@mdxeditor/gurx'
|
||||||
|
import {
|
||||||
|
closeImageDialog$,
|
||||||
|
editorRootElementRef$,
|
||||||
|
imageDialogState$,
|
||||||
|
imageUploadHandler$,
|
||||||
|
saveImage$
|
||||||
|
} from '@mdxeditor/editor'
|
||||||
|
import styles from './Dialog.module.scss'
|
||||||
|
import { createPortal } from 'react-dom'
|
||||||
|
|
||||||
|
interface ImageFormFields {
|
||||||
|
src: string
|
||||||
|
title: string
|
||||||
|
altText: string
|
||||||
|
file: FileList
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ImageDialog: React.FC = () => {
|
||||||
|
const [state, editorRootElementRef, imageUploadHandler] = useCellValues(
|
||||||
|
imageDialogState$,
|
||||||
|
editorRootElementRef$,
|
||||||
|
imageUploadHandler$
|
||||||
|
)
|
||||||
|
const saveImage = usePublisher(saveImage$)
|
||||||
|
const closeImageDialog = usePublisher(closeImageDialog$)
|
||||||
|
const { register, handleSubmit, setValue, reset } = useForm<ImageFormFields>({
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
|
||||||
|
values: state.type === 'editing' ? (state.initialValues as any) : {}
|
||||||
|
})
|
||||||
|
const [open, setOpen] = useState(state.type !== 'inactive')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setOpen(state.type !== 'inactive')
|
||||||
|
}, [state.type])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) {
|
||||||
|
closeImageDialog()
|
||||||
|
reset({ src: '', title: '', altText: '' })
|
||||||
|
}
|
||||||
|
}, [closeImageDialog, open, reset])
|
||||||
|
|
||||||
|
const handleClose = useCallback(() => {
|
||||||
|
setOpen(false)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (!open) return null
|
||||||
|
if (!editorRootElementRef?.current) return null
|
||||||
|
|
||||||
|
return createPortal(
|
||||||
|
<div className='popUpMain'>
|
||||||
|
<div className='ContainerMain'>
|
||||||
|
<div className='popUpMainCardWrapper'>
|
||||||
|
<div className='popUpMainCard popUpMainCardQR'>
|
||||||
|
<div className='popUpMainCardTop'>
|
||||||
|
<div className='popUpMainCardTopInfo'>
|
||||||
|
<h3>Add an image</h3>
|
||||||
|
</div>
|
||||||
|
<div className='popUpMainCardTopClose' onClick={handleClose}>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='-96 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
style={{ zIndex: 1 }}
|
||||||
|
>
|
||||||
|
<path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='pUMCB_Zaps'>
|
||||||
|
<form
|
||||||
|
className='pUMCB_ZapsInside'
|
||||||
|
onSubmit={(e) => {
|
||||||
|
void handleSubmit(saveImage)(e)
|
||||||
|
reset({ src: '', title: '', altText: '' })
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{imageUploadHandler === null ? (
|
||||||
|
<input type='hidden' accept='image/*' {...register('file')} />
|
||||||
|
) : (
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain' htmlFor='file'>
|
||||||
|
Upload an image from your device:
|
||||||
|
</label>
|
||||||
|
<input type='file' accept='image/*' {...register('file')} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain' htmlFor='src'>
|
||||||
|
{imageUploadHandler !== null
|
||||||
|
? 'Or add an image from an URL:'
|
||||||
|
: 'Add an image from an URL:'}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
defaultValue={
|
||||||
|
state.type === 'editing'
|
||||||
|
? state.initialValues.src ?? ''
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
className='inputMain'
|
||||||
|
size={40}
|
||||||
|
autoFocus
|
||||||
|
{...register('src')}
|
||||||
|
onChange={(e) => setValue('src', e.currentTarget.value)}
|
||||||
|
placeholder={'Paste an image src'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain' htmlFor='alt'>
|
||||||
|
Alt:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
{...register('altText')}
|
||||||
|
className='inputMain'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain' htmlFor='title'>
|
||||||
|
Title:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type='text'
|
||||||
|
{...register('title')}
|
||||||
|
className='inputMain'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.formAction}>
|
||||||
|
<button
|
||||||
|
type='submit'
|
||||||
|
title={'Save'}
|
||||||
|
aria-label={'Save'}
|
||||||
|
className='btn btnMain btnMainPopup'
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type='reset'
|
||||||
|
title={'Cancel'}
|
||||||
|
aria-label={'Cancel'}
|
||||||
|
className='btn btnMain btnMainPopup'
|
||||||
|
onClick={handleClose}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
editorRootElementRef?.current
|
||||||
|
)
|
||||||
|
}
|
||||||
306
src/components/Markdown/LinkDialog.tsx
Normal file
306
src/components/Markdown/LinkDialog.tsx
Normal file
@ -0,0 +1,306 @@
|
|||||||
|
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
||||||
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
||||||
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
||||||
|
import * as Popover from '@radix-ui/react-popover'
|
||||||
|
import * as Tooltip from '@radix-ui/react-tooltip'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import {
|
||||||
|
activeEditor$,
|
||||||
|
editorRootElementRef$,
|
||||||
|
iconComponentFor$,
|
||||||
|
cancelLinkEdit$,
|
||||||
|
linkDialogState$,
|
||||||
|
onWindowChange$,
|
||||||
|
removeLink$,
|
||||||
|
switchFromPreviewToLinkEdit$,
|
||||||
|
updateLink$,
|
||||||
|
ClickLinkCallback
|
||||||
|
} from '@mdxeditor/editor'
|
||||||
|
import { useForm } from 'react-hook-form'
|
||||||
|
import { Cell, useCellValues, usePublisher } from '@mdxeditor/gurx'
|
||||||
|
import styles from './Dialog.module.scss'
|
||||||
|
|
||||||
|
interface LinkEditFormProps {
|
||||||
|
url: string
|
||||||
|
title: string
|
||||||
|
onSubmit: (link: { url: string; title: string }) => void
|
||||||
|
onCancel: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LinkFormFields {
|
||||||
|
url: string
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LinkEditForm({
|
||||||
|
url,
|
||||||
|
title,
|
||||||
|
onSubmit,
|
||||||
|
onCancel
|
||||||
|
}: LinkEditFormProps) {
|
||||||
|
const { register, handleSubmit, setValue } = useForm<LinkFormFields>({
|
||||||
|
values: {
|
||||||
|
url,
|
||||||
|
title
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='pUMCB_Zaps'>
|
||||||
|
<form
|
||||||
|
className='pUMCB_ZapsInside'
|
||||||
|
onSubmit={(e) => {
|
||||||
|
void handleSubmit(onSubmit)(e)
|
||||||
|
e.stopPropagation()
|
||||||
|
e.preventDefault()
|
||||||
|
}}
|
||||||
|
onReset={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
onCancel()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain' htmlFor='file'>
|
||||||
|
URL:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
defaultValue={url}
|
||||||
|
className='inputMain'
|
||||||
|
size={40}
|
||||||
|
autoFocus
|
||||||
|
{...register('url')}
|
||||||
|
onChange={(e) => setValue('url', e.currentTarget.value)}
|
||||||
|
placeholder={'Paste an URL'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='inputLabelWrapperMain'>
|
||||||
|
<label className='form-label labelMain' htmlFor='link-title'>
|
||||||
|
Title:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id='link-title'
|
||||||
|
className='inputMain'
|
||||||
|
size={40}
|
||||||
|
{...register('title')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.formAction}>
|
||||||
|
<button
|
||||||
|
type='submit'
|
||||||
|
title={'Set URL'}
|
||||||
|
aria-label={'Set URL'}
|
||||||
|
className='btn btnMain btnMainPopup'
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type='reset'
|
||||||
|
title={'Cancel change'}
|
||||||
|
aria-label={'Cancel change'}
|
||||||
|
className='btn btnMain btnMainPopup'
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const onClickLinkCallback$ = Cell<ClickLinkCallback | null>(null)
|
||||||
|
|
||||||
|
/** @internal */
|
||||||
|
export const LinkDialog = () => {
|
||||||
|
const [
|
||||||
|
editorRootElementRef,
|
||||||
|
activeEditor,
|
||||||
|
iconComponentFor,
|
||||||
|
linkDialogState,
|
||||||
|
onClickLinkCallback
|
||||||
|
] = useCellValues(
|
||||||
|
editorRootElementRef$,
|
||||||
|
activeEditor$,
|
||||||
|
iconComponentFor$,
|
||||||
|
linkDialogState$,
|
||||||
|
onClickLinkCallback$
|
||||||
|
)
|
||||||
|
const publishWindowChange = usePublisher(onWindowChange$)
|
||||||
|
const updateLink = usePublisher(updateLink$)
|
||||||
|
const cancelLinkEdit = usePublisher(cancelLinkEdit$)
|
||||||
|
const switchFromPreviewToLinkEdit = usePublisher(switchFromPreviewToLinkEdit$)
|
||||||
|
const removeLink = usePublisher(removeLink$)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const update = () => {
|
||||||
|
activeEditor?.getEditorState().read(() => {
|
||||||
|
publishWindowChange(true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', update)
|
||||||
|
window.addEventListener('scroll', update)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', update)
|
||||||
|
window.removeEventListener('scroll', update)
|
||||||
|
}
|
||||||
|
}, [activeEditor, publishWindowChange])
|
||||||
|
|
||||||
|
const [copyUrlTooltipOpen, setCopyUrlTooltipOpen] = React.useState(false)
|
||||||
|
|
||||||
|
const theRect = linkDialogState.rectangle
|
||||||
|
|
||||||
|
const urlIsExternal =
|
||||||
|
linkDialogState.type === 'preview' && linkDialogState.url.startsWith('http')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover.Root open={linkDialogState.type !== 'inactive'}>
|
||||||
|
<Popover.Anchor
|
||||||
|
data-visible={linkDialogState.type === 'edit'}
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: `${theRect?.top ?? 0}px`,
|
||||||
|
left: `${theRect?.left ?? 0}px`,
|
||||||
|
width: `${theRect?.width ?? 0}px`,
|
||||||
|
height: `${theRect?.height ?? 0}px`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Popover.Portal container={editorRootElementRef?.current}>
|
||||||
|
<Popover.Content
|
||||||
|
sideOffset={5}
|
||||||
|
onOpenAutoFocus={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
}}
|
||||||
|
key={linkDialogState.linkNodeKey}
|
||||||
|
className={[
|
||||||
|
'popUpMainCard',
|
||||||
|
...(linkDialogState.type === 'edit' ? [styles.wrapper] : [])
|
||||||
|
].join(' ')}
|
||||||
|
>
|
||||||
|
{linkDialogState.type === 'edit' && (
|
||||||
|
<LinkEditForm
|
||||||
|
url={linkDialogState.url}
|
||||||
|
title={linkDialogState.title}
|
||||||
|
onSubmit={updateLink}
|
||||||
|
onCancel={cancelLinkEdit.bind(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{linkDialogState.type === 'preview' && (
|
||||||
|
<>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
|
||||||
|
<p className='IBMSMSMSSS_Author_Top_Address'>
|
||||||
|
<a
|
||||||
|
className={styles.linkDialogPreviewAnchor}
|
||||||
|
href={linkDialogState.url}
|
||||||
|
{...(urlIsExternal
|
||||||
|
? { target: '_blank', rel: 'noreferrer' }
|
||||||
|
: {})}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (
|
||||||
|
onClickLinkCallback !== null &&
|
||||||
|
typeof onClickLinkCallback === 'function'
|
||||||
|
) {
|
||||||
|
e.preventDefault()
|
||||||
|
onClickLinkCallback(linkDialogState.url)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
title={
|
||||||
|
urlIsExternal
|
||||||
|
? `Open ${linkDialogState.url} in new window`
|
||||||
|
: linkDialogState.url
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span>{linkDialogState.url}</span>
|
||||||
|
{urlIsExternal && iconComponentFor('open_in_new')}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_IconWrapper'>
|
||||||
|
<div
|
||||||
|
className='IBMSMSMSSS_Author_Top_IconWrapped'
|
||||||
|
onClick={() => {
|
||||||
|
switchFromPreviewToLinkEdit()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Icon'
|
||||||
|
>
|
||||||
|
<path d='M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tooltip.Provider>
|
||||||
|
<Tooltip.Root open={copyUrlTooltipOpen}>
|
||||||
|
<Tooltip.Trigger asChild>
|
||||||
|
<div
|
||||||
|
className='IBMSMSMSSS_Author_Top_IconWrapped'
|
||||||
|
onClick={() => {
|
||||||
|
void window.navigator.clipboard
|
||||||
|
.writeText(linkDialogState.url)
|
||||||
|
.then(() => {
|
||||||
|
setCopyUrlTooltipOpen(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
setCopyUrlTooltipOpen(false)
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Icon'
|
||||||
|
>
|
||||||
|
<path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</Tooltip.Trigger>
|
||||||
|
<Tooltip.Portal container={editorRootElementRef?.current}>
|
||||||
|
<Tooltip.Content sideOffset={5}>
|
||||||
|
{'Copied!'}
|
||||||
|
<Tooltip.Arrow />
|
||||||
|
</Tooltip.Content>
|
||||||
|
</Tooltip.Portal>
|
||||||
|
</Tooltip.Root>
|
||||||
|
</Tooltip.Provider>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className='IBMSMSMSSS_Author_Top_IconWrapped'
|
||||||
|
onClick={() => {
|
||||||
|
removeLink()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 640 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Icon'
|
||||||
|
>
|
||||||
|
<path d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z' />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Popover.Arrow />
|
||||||
|
</Popover.Content>
|
||||||
|
</Popover.Portal>
|
||||||
|
</Popover.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -101,6 +101,9 @@
|
|||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
min-height: 75px;
|
min-height: 75px;
|
||||||
}
|
}
|
||||||
|
.mdxeditor {
|
||||||
|
--baseBg: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
.mdxeditor,
|
.mdxeditor,
|
||||||
.mdxeditor-popup-container {
|
.mdxeditor-popup-container {
|
||||||
--basePageBg: var(--slate-3);
|
--basePageBg: var(--slate-3);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user