diff --git a/frontend/ee b/frontend/ee index 715a830c7a..4b950ed3d0 160000 --- a/frontend/ee +++ b/frontend/ee @@ -1 +1 @@ -Subproject commit 715a830c7a8d75efc7f77106292d9e4499005b69 +Subproject commit 4b950ed3d0ba15edddf217936e9c9ae1ca3cf11a diff --git a/frontend/src/AppBuilder/Widgets/Table/Markdown.jsx b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Markdown.jsx similarity index 72% rename from frontend/src/AppBuilder/Widgets/Table/Markdown.jsx rename to frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/Markdown.jsx index abd121182a..fff48c5160 100644 --- a/frontend/src/AppBuilder/Widgets/Table/Markdown.jsx +++ b/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', }} > - {getCellValue(cellValue)} + {getCellValue(cellValue)} ); @@ -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 = ({
{ @@ -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 : {getCellValue(cellValue)}} + {isEditing ? ( + cellValue + ) : ( + {getCellValue(cellValue)} + )}
); }; @@ -132,17 +151,11 @@ const Markdown = ({ > - {getCellValue(cellValue)} + {getCellValue(cellValue)} ) : ( @@ -162,5 +175,3 @@ const Markdown = ({ ); }; - -export default Markdown; diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js b/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js index 0801f2a2dc..ee2fb701a0 100644 --- a/frontend/src/AppBuilder/Widgets/NewTable/_components/DataTypes/index.js +++ b/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'; diff --git a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js b/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js index 45e4b8be15..817493a4d7 100644 --- a/frontend/src/AppBuilder/Widgets/NewTable/_utils/generateColumnsData.js +++ b/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 ( + + ); + } + default: return cellValue || ''; } diff --git a/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx b/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx index 6e56e6e6ef..257de7c4ae 100644 --- a/frontend/src/AppBuilder/Widgets/Table/columns/index.jsx +++ b/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 ( - - ); - } } return cellValue || ''; }, diff --git a/server/ee b/server/ee index 0eefbb71a1..683647f83d 160000 --- a/server/ee +++ b/server/ee @@ -1 +1 @@ -Subproject commit 0eefbb71a1d5288f49641af5efaaab25970f27d1 +Subproject commit 683647f83d3efeeadbe69c40b8e8dd5ba4e8ea06