Moved to modularisation along with fixes for new line

frontend/ee

@@ -1 +1 @@
-Subproject commit 715a830c7a8d75efc7f77106292d9e4499005b69
+Subproject commit 4b950ed3d0ba15edddf217936e9c9ae1ca3cf11a

frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Markdown.jsx

@@ -2,24 +2,30 @@ import React, { useState, useEffect } from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { determineJustifyContentValue } from '@/_helpers/utils';
 import { default as ReactMarkdown } from 'react-markdown';
+import useTextColor from '../DataTypes/_hooks/useTextColor';
+import useTableStore from '../../_stores/tableStore';
+import { getMaxHeight } from '../../_utils/helper';
+import { shallow } from 'zustand/shallow';
+import remarkBreaks from 'remark-breaks';
 import DOMPurify from 'dompurify';
 
-const Markdown = ({
+export const MarkdownColumn = ({
+  id,
   isEditable,
   darkMode,
   handleCellValueChange,
-  cellTextColor,
+  textColor,
   cellValue,
   column,
   containerWidth,
   cell,
   horizontalAlignment,
-  isMaxRowHeightAuto,
   cellSize,
-  maxRowHeightValue,
 }) => {
   const ref = React.useRef(null);
-
+  const cellTextColor = useTextColor(id, textColor, 'json');
+  const isMaxRowHeightAuto = useTableStore((state) => state.getTableStyles(id)?.isMaxRowHeightAuto, shallow);
+  const maxRowHeightValue = useTableStore((state) => state.getTableStyles(id)?.maxRowHeightValue, shallow);
   const [hovered, setHovered] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
 
@@ -28,7 +34,15 @@ const Markdown = ({
   };
 
   const getCellValue = (value) => {
-    return DOMPurify.sanitize(value);
+    let transformedValue = value;
+    if (typeof value !== 'string') {
+      try {
+        transformedValue = String(value);
+      } catch (e) {
+        transformedValue = '';
+      }
+    }
+    return DOMPurify.sanitize(transformedValue.trim());
   };
 
   useEffect(() => {
@@ -51,7 +65,7 @@ const Markdown = ({
             whiteSpace: 'pre-wrap',
           }}
         >
-          <ReactMarkdown>{getCellValue(cellValue)}</ReactMarkdown>
+          <ReactMarkdown remarkPlugins={[remarkBreaks]}>{getCellValue(cellValue)}</ReactMarkdown>
         </span>
       </div>
     );
@@ -60,7 +74,7 @@ const Markdown = ({
   const renderEditable = () => {
     const onChange = (e) => {
       if (cellValue !== e.target.textContent) {
-        const value = e.target.textContent.replace(/\n/g, '');
+        const value = e.target.textContent;
         handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
       }
     };
@@ -69,7 +83,7 @@ const Markdown = ({
       <div
         ref={ref}
         contentEditable={'true'}
-        className={`h-100 text-container long-text-input d-flex align-items-center ${
+        className={`h-100 text-container long-text-input d-flex${
           darkMode ? ' textarea-dark-theme' : ''
         } justify-content-${determineJustifyContentValue(horizontalAlignment)}`}
         tabIndex={-1}
@@ -80,6 +94,7 @@ const Markdown = ({
           background: 'inherit',
           position: 'relative',
           height: '100%',
+          flexDirection: 'column',
         }}
         readOnly={!isEditable}
         onBlur={(e) => {
@@ -87,7 +102,7 @@ const Markdown = ({
           onChange(e);
         }}
         onKeyDown={(e) => {
-          if (e.key === 'Enter') {
+          if (e.key === 'Enter' && !e.shiftKey) {
             ref.current.blur();
             onChange(e);
           }
@@ -97,7 +112,11 @@ const Markdown = ({
           e.stopPropagation();
         }}
       >
-        {isEditing ? cellValue : <ReactMarkdown>{getCellValue(cellValue)}</ReactMarkdown>}
+        {isEditing ? (
+          cellValue
+        ) : (
+          <ReactMarkdown remarkPlugins={[remarkBreaks]}>{getCellValue(cellValue)}</ReactMarkdown>
+        )}
       </div>
     );
   };
@@ -132,17 +151,11 @@ const Markdown = ({
           >
             <span
               style={{
-                maxHeight: isMaxRowHeightAuto
-                  ? 'fit-content'
-                  : maxRowHeightValue
-                  ? `${maxRowHeightValue}px`
-                  : cellSize === 'condensed'
-                  ? '39px'
-                  : '45px',
+                maxHeight: getMaxHeight(isMaxRowHeightAuto, maxRowHeightValue, cellSize),
                 whiteSpace: 'pre-wrap',
               }}
             >
-              <ReactMarkdown>{getCellValue(cellValue)}</ReactMarkdown>
+              <ReactMarkdown remarkPlugins={[remarkBreaks]}>{getCellValue(cellValue)}</ReactMarkdown>
             </span>
           </div>
         ) : (
@@ -162,5 +175,3 @@ const Markdown = ({
     </>
   );
 };
-
-export default Markdown;

frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js

@@ -13,3 +13,4 @@ export { CustomDropdownColumn } from './CustomDropdown';
 // export { SelectColumn } from './Select';
 export { TextColumn } from './Text';
 export { JsonColumn } from './JSON';
+export { MarkdownColumn } from './Markdown';

frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js

@@ -19,6 +19,7 @@ import {
   CustomDropdownColumn,
   TextColumn,
   JsonColumn,
+  MarkdownColumn,
 } from '../_components/DataTypes';
 import useTableStore from '../_stores/tableStore';
 
@@ -339,6 +340,23 @@ export default function generateColumnsData({
                 />
               );
 
+            case 'markdown': {
+              return (
+                <MarkdownColumn
+                  isEditable={isEditable}
+                  darkMode={darkMode}
+                  handleCellValueChange={handleCellValueChange}
+                  horizontalAlignment={column?.horizontalAlignment}
+                  textColor={getResolvedValue(column.textColor, { cellValue, rowData })}
+                  cellValue={cellValue}
+                  column={column}
+                  containerWidth={columnSize}
+                  cell={cell}
+                  id={id}
+                />
+              );
+            }
+
             default:
               return cellValue || '';
           }

frontend/src/AppBuilder/Widgets/Table/columns/index.jsx

@@ -15,7 +15,6 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';
 import Text from '../Text';
 import StringColumn from '../String';
 import Json from '../Json';
-import Markdown from '../Markdown';
 
 export default function generateColumnsData({
   columnProperties,
@@ -737,25 +736,6 @@ export default function generateColumnsData({
               />
             );
           }
-          case 'markdown': {
-            return (
-              <Markdown
-                isEditable={isEditable}
-                darkMode={darkMode}
-                handleCellValueChange={handleCellValueChange}
-                cellTextColor={cellTextColor}
-                horizontalAlignment={horizontalAlignment}
-                cellValue={cellValue}
-                column={column}
-                currentState={currentState}
-                containerWidth={width}
-                cell={cell}
-                isMaxRowHeightAuto={isMaxRowHeightAuto}
-                cellSize={cellSize}
-                maxRowHeightValue={maxRowHeightValue}
-              />
-            );
-          }
         }
         return cellValue || '';
       },

server/ee

@@ -1 +1 @@
-Subproject commit 0eefbb71a1d5288f49641af5efaaab25970f27d1
+Subproject commit 683647f83d3efeeadbe69c40b8e8dd5ba4e8ea06