fix: finalize table feature for story markdown editor and viewer

package.json

@@ -33,8 +33,6 @@
     "@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/forms/components/TableCellMenuComponent.tsx

@@ -0,0 +1,69 @@
+import { ChevronDownIcon } from '@chakra-ui/icons'
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemProps,
+  MenuList,
+  VStack,
+} from '@chakra-ui/react'
+import { useCommands } from '@remirror/react'
+import { useTranslation } from 'react-i18next'
+
+export const TableCellMenuComponent = () => {
+  const { t } = useTranslation()
+  const commands = useCommands()
+
+  const ModifiedMenuItem = (props: MenuItemProps) => {
+    return (
+      <MenuItem
+        paddingX="10px"
+        paddingY="5px"
+        _hover={{ bg: 'neutral.200' }}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Menu>
+      <MenuButton
+        mr="5px"
+        size="sm"
+        as={IconButton}
+        icon={<ChevronDownIcon />}
+        border="1px solid"
+        borderRadius="4px"
+        borderColor="neutral.200"
+        _hover={{ color: 'primary.400', borderColor: 'primary.400' }}
+      />
+      <MenuList
+        as={VStack}
+        bg="neutral.0"
+        border="1px solid"
+        borderColor="neutral.200"
+        borderRadius={'4px'}
+      >
+        <ModifiedMenuItem onClick={() => commands.addTableRowBefore()}>
+          {t('Add row above')}
+        </ModifiedMenuItem>
+        <ModifiedMenuItem onClick={() => commands.addTableRowAfter()}>
+          {t('Add row below')}
+        </ModifiedMenuItem>
+        <ModifiedMenuItem onClick={() => commands.addTableColumnBefore()}>
+          {t('Add column left')}
+        </ModifiedMenuItem>
+        <ModifiedMenuItem onClick={() => commands.addTableColumnAfter()}>
+          {t('Add column right')}
+        </ModifiedMenuItem>
+        <ModifiedMenuItem onClick={() => commands.deleteTableColumn()}>
+          {t('Remove column')}
+        </ModifiedMenuItem>
+        <ModifiedMenuItem onClick={() => commands.deleteTableRow()}>
+          {t('Remove row')}
+        </ModifiedMenuItem>
+      </MenuList>
+    </Menu>
+  )
+}

src/forms/markdown/MarkdownField.tsx

@@ -1,5 +1,4 @@
 import { Box, Button, HStack, Text } from '@chakra-ui/react'
-// import { ReactComponentExtension } from '@remirror/extension-react-component'
 import {
   EditorComponent,
   Remirror,
@@ -36,6 +35,7 @@ import TurndownService from 'turndown'
 import { useSignedUpload } from '../../hooks'
 import { useMobileMode } from '../../utils'
 import { ReactHookTextArea } from '../components/ReactHookTextArea'
+import { TableCellMenuComponent } from '../components/TableCellMenuComponent'
 import { PreviewRenderer } from './helpers/PreviewRenderer'
 import { SaveModule } from './helpers/SaveModule'
 import { StyleProvider } from './helpers/StyleProvider'
@@ -113,7 +113,6 @@ export const MarkdownField = ({
       new TrailingNodeExtension(),
       new BulletListExtension(),
       new TextExtension(),
-
       new ImageExtension({
         uploadHandler(files) {
           return files.map(
@@ -142,18 +141,12 @@ export const MarkdownField = ({
     react: {
       nodeViewComponents: {
         image: imageHandler,
-        // paragraph: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
-        //   <Box mb={4} ref={forwardRef} />
-        // ),
         bulletList: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
           <Box pl={5} ref={forwardRef} />
         ),
         orderedList: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
           <Box pl={5} ref={forwardRef} />
         ),
-        table: ({ forwardRef }: { forwardRef: ForwardedRef<any> }) => (
-          <Box mb={0} ref={forwardRef} />
-        ),
       },
     },
   })
@@ -221,7 +214,9 @@ export const MarkdownField = ({
       )}
       <StyleProvider flex={flex} display={isEditorMode ? 'none' : undefined}>
         <EditorComponent />
-        <TableComponents enableTableCellMenu={false} />
+        <TableComponents
+          tableCellMenuProps={{ Component: TableCellMenuComponent }}
+        />
       </StyleProvider>
       <SaveModule name={name} control={control} />
     </Remirror>

src/forms/markdown/helpers/PreviewRenderer.tsx

@@ -10,19 +10,49 @@ export const PreviewRenderer = ({
   manager: RemirrorManager<any>
   content?: RemirrorContentType
 }) => {
-  const newContent = content?.toString().replaceAll(/\n/g, '\\n')
-  console.log('checking content', content)
-  console.log('checking newContent', newContent)
+  // const newContent = formatString(content?.toString() || '')
+
   return (
     <RemirrorRenderer
       typeMap={typeMap}
       markMap={markMap}
       json={getRemirrorJSON(
         manager.createState({
-          content: newContent,
+          content,
           stringHandler: 'markdown',
         }),
       )}
     />
   )
 }
+
+// export const matchMarkDownSpecialKeysAtLineEnd =
+//   /\n(?!.*(\*|_|#|-|\||`|[0-9]+(\.|\))))/g
+
+// const formatString = (value: string): string => {
+//   const adjustForLineChange = value
+//     ? value.replaceAll(matchMarkDownSpecialKeysAtLineEnd, '\\\n')
+//     : ''
+
+//   const adjustedForMultiParagrah = adjustForLineChange.replaceAll(
+//     /\n\n/g,
+//     '\n\\\n',
+//   )
+
+//   const finalValue = getRidOfEndSlash(adjustedForMultiParagrah)
+
+//   console.log('before content', JSON.stringify(value))
+//   console.log('medium content', JSON.stringify(adjustForLineChange))
+//   console.log('after content', JSON.stringify(adjustedForMultiParagrah))
+
+//   return finalValue
+// }
+
+// const getRidOfEndSlash = (value: string): string => {
+//   if (value[value.length - 2] === '\\') {
+//     const newValue = value.slice(0, value.length - 2)
+//     return getRidOfEndSlash(newValue)
+//   }
+
+//   return value
+// }

src/forms/markdown/helpers/StyleProvider.tsx

@@ -5,12 +5,19 @@ import { useMemo } from 'react'
 import { RemirrorThemeType } from 'remirror'
 
 import { useCustomTheme } from '../../../utils'
+import { tableCellStyles } from './typeMaps'
 
 const Container = styled(Box, {
   baseStyle: {
     '& p, & iframe, & h1, & h2, & h3, & h4, & h5': {
       mt: 4,
     },
+    '& table': {
+      '& p': {
+        margin: '0px',
+      },
+      ...tableCellStyles,
+    },
     '& iframe': {
       minHeight: '28em',
     },

src/forms/markdown/helpers/typeMaps.tsx

@@ -40,6 +40,44 @@ export const listItemHandler = ({ children }: ListProps) => {
   return <ListItem>{children}</ListItem>
 }
 
+export const tableCellStyles = {
+  '& th, & td': {
+    padding: '3px 8px',
+    border: '1px solid',
+    borderColor: 'neutral.200',
+  },
+}
+
+export const tableHandler = (props: any) => {
+  const hasHeader =
+    props?.children[0]?.props?.json?.content[0]?.type === 'tableHeaderCell'
+
+  return (
+    <Table
+      w="full"
+      variant="simple"
+      borderColor="neutral.200"
+      sx={{
+        ...tableCellStyles,
+      }}
+    >
+      {hasHeader && <Thead>{props.children[0]}</Thead>}
+
+      {
+        <Tbody>
+          {props.children.map((child: any, index: number) => {
+            if (hasHeader && index === 0) {
+              return null
+            }
+
+            return child
+          })}
+        </Tbody>
+      }
+    </Table>
+  )
+}
+
 export const typeMap = {
   blockquote: 'blockquote',
   bulletList: unorderedListHandler,
@@ -55,7 +93,7 @@ export const typeMap = {
   paragraph: 'p',
   orderedList: OrderedList,
   text: TextHandler,
-  table: Table,
+  table: tableHandler,
   tableHeader: Thead,
   tableHeaderCell: Th,
   tbody: Tbody,

src/translations/English.json

@@ -655,5 +655,11 @@
   "There's a new version of Geyser!":"There's a new version of Geyser!",
   "Restart the app to load the new version":"Restart the app to load the new version",
   "Not now":"Not now",
-  "Restart app":"Restart app"
+  "Restart app":"Restart app",
+  "Add row above":"Add row above",
+  "Add row below":"Add row below",
+  "Add column left":"Add column left",
+  "Add column right":"Add column right",
+  "Remove column":"Remove column",
+  "Remove row":"Remove row"
 }