refactor(editor): override image and link dialog

src/components/Markdown/Dialog.module.scss

@@ -0,0 +1,10 @@
+.formAction {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+}
+
+.wrapper {
+  border-radius: 0;
+}

src/components/Markdown/Editor.tsx

@@ -39,6 +39,8 @@ import React, {
   useMemo,
   useRef
 } from 'react'
+import { ImageDialog } from './ImageDialog'
+import { LinkDialog } from './LinkDialog'
 
 export interface EditorRef {
   setMarkdown: (md: string) => void
@@ -95,10 +97,14 @@ export const Editor = React.memo(
         }),
         headingsPlugin(),
         quotePlugin(),
-        imagePlugin(),
+        imagePlugin({
+          ImageDialog: ImageDialog
+        }),
         tablePlugin(),
         linkPlugin(),
-        linkDialogPlugin(),
+        linkDialogPlugin({
+          LinkDialog: LinkDialog
+        }),
         listsPlugin(),
         thematicBreakPlugin(),
         directivesPlugin({

src/components/Markdown/ImageDialog.tsx

@@ -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
+  )
+}

src/components/Markdown/LinkDialog.tsx

@@ -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>
+  )
+}

src/styles/mdxEditor.scss

@@ -101,6 +101,9 @@
   padding-top: 10px;
   min-height: 75px;
 }
+.mdxeditor {
+  --baseBg: rgba(255, 255, 255, 0.05);
+}
 .mdxeditor,
 .mdxeditor-popup-container {
   --basePageBg: var(--slate-3);