fix: markdown table in WIP

package.json

@@ -32,6 +32,9 @@
     "@hookform/resolvers": "^3.1.0",
     "@loadable/component": "^5.15.3",
     "@react-hookz/web": "^23.0.0",
+    "@remirror/extension-node-formatting": "^2.0.13",
+    "@remirror/extension-react-component": "^2.0.13",
+    "@remirror/extension-react-tables": "^2.2.18",
     "@remirror/pm": "^2.0.5",
     "@remirror/react": "^2.0.28",
     "@remirror/react-components": "^2.1.12",

src/config/theme/popOverTheme.ts

@@ -0,0 +1,14 @@
+import { popoverAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(popoverAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+  body: {
+    bg: 'neutral.0',
+    borderRadius: '8px',
+  },
+})
+
+export const popOverTheme = defineMultiStyleConfig({ baseStyle })

src/config/theme/theme.ts

@@ -5,6 +5,7 @@ import { alertTheme } from './alertTheme'
 import { drawerTheme } from './drawerTheme'
 import { menuTheme } from './menuTheme'
 import { modalTheme } from './modalTheme'
+import { popOverTheme } from './popOverTheme'
 
 export const theme = {
   initialColorMode: 'system',
@@ -247,6 +248,7 @@ export const theme = {
     Menu: menuTheme,
     Modal: modalTheme,
     Drawer: drawerTheme,
+    Popover: popOverTheme,
     Input: {
       defaultProps: {
         focusBorderColor: 'primary.400',

src/forms/components/TableExtension.tsx

@@ -0,0 +1 @@
+import { TableExtension } from '@remirror/extension-react-tables'

src/forms/markdown/MarkdownField.tsx

@@ -1,10 +1,11 @@
 import { Box, Button, HStack, Text } from '@chakra-ui/react'
+// import { ReactComponentExtension } from '@remirror/extension-react-component'
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react'
 import { ForwardedRef, useCallback } from 'react'
 import { Control } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BsGear } from 'react-icons/bs'
-import { InvalidContentHandler } from 'remirror'
+import { AnyExtension, InvalidContentHandler } from 'remirror'
 import {
   BlockquoteExtension,
   BoldExtension,
@@ -17,6 +18,7 @@ import {
   ItalicExtension,
   LinkExtension,
   MarkdownExtension,
+  NodeFormattingExtension,
   OrderedListExtension,
   PlaceholderExtension,
   TableExtension,
@@ -80,8 +82,8 @@ export const MarkdownField = ({
 
   const { uploadFile } = useSignedUpload()
 
-  const extensions = useCallback(
-    () => [
+  const extensions = useCallback<() => AnyExtension[]>(() => {
+    const exts = [
       new PlaceholderExtension({ placeholder }),
       new LinkExtension({
         autoLink: true,
@@ -92,7 +94,11 @@ export const MarkdownField = ({
       }),
       new MarkdownExtension({
         copyAsMarkdown: true,
-        htmlToMarkdown: (html) => turndownService.turndown(html),
+        htmlToMarkdown(html) {
+          console.log('checking html', html)
+          return `${html}`
+        },
+        // htmlToMarkdown: (html) => turndownService.turndown(html),
       }),
       new BoldExtension(),
       new UnderlineExtension(),
@@ -107,6 +113,7 @@ export const MarkdownField = ({
       new TrailingNodeExtension(),
       new BulletListExtension(),
       new TextExtension(),
+
       new ImageExtension({
         uploadHandler(files) {
           return files.map(
@@ -119,9 +126,14 @@ export const MarkdownField = ({
         },
         enableResizing: false,
       }),
-    ],
-    [placeholder, uploadFile],
-  )
+    ] as AnyExtension[]
+
+    if (!preview) {
+      exts.push(new NodeFormattingExtension())
+    }
+
+    return exts
+  }, [placeholder, uploadFile])
 
   const { manager } = useRemirror({
     extensions,
@@ -139,6 +151,9 @@ export const MarkdownField = ({
         orderedList: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
           <Box pl={5} ref={forwardRef} />
         ),
+        table: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
+          <Box mb={4} ref={forwardRef} />
+        ),
       },
     },
   })
@@ -165,6 +180,7 @@ export const MarkdownField = ({
         display="flex"
         justifyContent="space-between"
         alignItems="start"
+        mb={2}
         sx={
           stickyToolbar !== undefined && stickyToolbar !== false
             ? {

src/forms/markdown/MarkdownToolbar.tsx

@@ -4,6 +4,7 @@ import { ToolbarBlocks } from './toolbar/ToolbarBlocks'
 import { ToolbarCommon } from './toolbar/ToolbarCommon'
 import { ToolbarHeading } from './toolbar/ToolbarHeading'
 import { ToolbarMedia } from './toolbar/ToolbarMedia'
+import { ToolbarTable } from './toolbar/ToolbarTable'
 
 export const MarkdownToolbar = ({ isDisabled }: { isDisabled?: boolean }) => {
   return (
@@ -12,6 +13,7 @@ export const MarkdownToolbar = ({ isDisabled }: { isDisabled?: boolean }) => {
       <ToolbarBlocks isDisabled={isDisabled} />
       <ToolbarHeading isDisabled={isDisabled} />
       <ToolbarMedia isDisabled={isDisabled} />
+      <ToolbarTable isDisabled={isDisabled} />
     </HStack>
   )
 }

src/forms/markdown/commands/ImageCommand.tsx

@@ -9,10 +9,12 @@ export const ImageCommand = ({ isDisabled }: { isDisabled?: boolean }) => {
   const commands = useCommands()
 
   const modal = useInsertLinkModal(({ url, label }: MarkdownImage) => {
+    if (!commands.insertImage) return
     commands.insertImage({
       src: url,
       alt: label || 'image',
     })
+
     modal.onClose()
   })
 

src/forms/markdown/commands/LinkCommand.tsx

@@ -12,6 +12,7 @@ export const LinkCommand = ({ isDisabled }: { isDisabled?: boolean }) => {
   const commands = useCommands()
 
   const modal = useInsertLinkModal(({ url, label }: MarkdownLink) => {
+    if (!commands.insertMarkdown) return
     commands.insertMarkdown(`[${label || url}](${url})`)
     modal.onClose()
   })

src/forms/markdown/commands/TableCommand.tsx

@@ -0,0 +1,167 @@
+import {
+  Box,
+  Checkbox,
+  HStack,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+  useDisclosure,
+  VStack,
+} from '@chakra-ui/react'
+import { useCommands } from '@remirror/react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BsTable } from 'react-icons/bs'
+import {
+  RiDeleteColumn,
+  RiDeleteRow,
+  RiInsertColumnRight,
+  RiInsertRowBottom,
+} from 'react-icons/ri'
+
+import { Body2, MonoBody2 } from '../../../components/typography'
+import { useDebounce } from '../../../hooks'
+import { ToolbarCommandButton } from './ToolbarCommandButton'
+
+interface TableCommandProps {
+  isDisabled?: boolean
+}
+
+const tableBoxes = [
+  [1, 2, 3, 4, 5, 6],
+  [1, 2, 3, 4, 5, 6],
+  [1, 2, 3, 4, 5, 6],
+  [1, 2, 3, 4, 5, 6],
+  [1, 2, 3, 4, 5, 6],
+]
+
+export const TableCommand = ({ isDisabled }: TableCommandProps) => {
+  const { t } = useTranslation()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [hasHeader, setHasHeader] = useState(true)
+
+  const commands = useCommands()
+
+  const debouncedIsOpen = useDebounce(isOpen, 200)
+
+  const [currentPosition, setCurrentPosition] = useState({ i: 0, j: 0 })
+
+  const handleTableCreate = ({ i, j }: { i: number; j: number }) => {
+    if (!commands.createTable) return
+    commands.createTable({
+      rowsCount: i + 1,
+      columnsCount: j + 1,
+    })
+    onClose()
+  }
+
+  return (
+    <>
+      <Popover
+        isOpen={debouncedIsOpen}
+        onClose={onClose}
+        placement={'bottom'}
+        closeOnBlur
+      >
+        <PopoverTrigger>
+          <ToolbarCommandButton
+            isDisabled={isDisabled}
+            name="table"
+            label="Table"
+            onMouseOver={onOpen}
+            onMouseLeave={onClose}
+          >
+            <BsTable />
+          </ToolbarCommandButton>
+        </PopoverTrigger>
+        <PopoverContent
+          maxWidth="200px"
+          onMouseOver={onOpen}
+          onMouseLeave={onClose}
+        >
+          <PopoverArrow />
+          <PopoverBody>
+            <VStack>
+              <HStack w="full" spacing="5px">
+                <ToolbarCommandButton
+                  isDisabled={isDisabled}
+                  name="addTableRowAfter"
+                  label="add row below selected"
+                  onClick={commands.addTableRowAfter}
+                >
+                  <RiInsertRowBottom />
+                </ToolbarCommandButton>
+                <ToolbarCommandButton
+                  isDisabled={isDisabled}
+                  name="addTableColumnAfter"
+                  label="add column to right of selected"
+                  onClick={commands.addTableColumnAfter}
+                >
+                  <RiInsertColumnRight />
+                </ToolbarCommandButton>
+                <ToolbarCommandButton
+                  isDisabled={isDisabled}
+                  name="deleteTableRow"
+                  label="delete selected row"
+                  onClick={commands.deleteTableRow}
+                >
+                  <RiDeleteRow />
+                </ToolbarCommandButton>
+                <ToolbarCommandButton
+                  isDisabled={isDisabled}
+                  name="deleteTableColumn"
+                  label="delete selected column"
+                  onClick={commands.deleteTableColumn}
+                >
+                  <RiDeleteColumn />
+                </ToolbarCommandButton>
+              </HStack>
+              <VStack spacing="0px" _hover={{ cursor: 'pointer' }}>
+                {tableBoxes.map((row, i) => (
+                  <HStack key={i} spacing="0px">
+                    {row.map((col, j) => (
+                      <Box
+                        key={j}
+                        padding="5px"
+                        onMouseEnter={() => setCurrentPosition({ i, j })}
+                        onClick={() => handleTableCreate({ i, j })}
+                      >
+                        <Box
+                          height="20px"
+                          width="20px"
+                          borderRadius="4px"
+                          backgroundColor={
+                            i <= currentPosition.i && j <= currentPosition.j
+                              ? 'neutral.300'
+                              : 'neutral.800'
+                          }
+                          transition="background-color 0.1s ease-in-out"
+                        />
+                      </Box>
+                    ))}
+                  </HStack>
+                ))}
+              </VStack>
+              <HStack w="full" justifyContent="space-between" spacing="0">
+                <Checkbox
+                  size="sm"
+                  isChecked={hasHeader}
+                  onChange={(e) => setHasHeader(e.target.checked)}
+                >
+                  <MonoBody2 semiBold> {t('headers')} </MonoBody2>
+                </Checkbox>
+                <MonoBody2 semiBold>{`${currentPosition.i + 1}X${
+                  currentPosition.j + 1
+                }`}</MonoBody2>
+              </HStack>
+            </VStack>
+          </PopoverBody>
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}

src/forms/markdown/commands/VideoCommand.tsx

@@ -12,6 +12,7 @@ export const VideoCommand = ({ isDisabled }: { isDisabled?: boolean }) => {
   const commands = useCommands()
 
   const modal = useInsertVideoModal(({ url }: MarkdownVideo) => {
+    if (!commands.addYouTubeVideo) return
     commands.addYouTubeVideo({ video: url })
     modal.onClose()
   })

src/forms/markdown/commands/useToolbarCommand.ts

@@ -11,7 +11,7 @@ export const useToolbarCommand = (name: string, cmd: string) => {
     (attrs?: any) => {
       if (command) {
         command(attrs)
-        commands.focus()
+        commands.focus?.()
       }
     },
     [command, commands],

src/forms/markdown/helpers/StyleProvider.tsx

@@ -17,6 +17,9 @@ const Container = styled(Box, {
     '& a': {
       textDecoration: 'underline',
     },
+    '& tr, & th, & td': {
+      height: '10px',
+    },
     width: '100%',
   },
 })