Fix table width (#4380)

superdesk · Nov 16, 2023 · 43f988f · 43f988f
1 parent 30434e2
commit 43f988f
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx b/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx
@@ -5,6 +5,8 @@ import {EditorState, ContentBlock} from 'draft-js';
 import {TableBlock} from '../tables/TableBlock';
 import {IActiveCell} from 'superdesk-api';
 
+export const MULTI_LINE_QUOTE_CLASS = 'multi-line-quote';
+
 interface IProps {
     block: ContentBlock;
     readOnly: boolean;
@@ -24,7 +26,8 @@ export class MultiLineQuoteComponent extends React.Component<IProps> {
     render() {
         return (
             <TableBlock
-                className="multi-line-quote"
+                fullWidth
+                className={MULTI_LINE_QUOTE_CLASS}
                 toolbarStyle="multiLineQuote"
                 block={this.props.block}
                 readOnly={this.props.readOnly}

diff --git a/scripts/core/editor3/components/tables/TableBlock.tsx b/scripts/core/editor3/components/tables/TableBlock.tsx
@@ -24,6 +24,7 @@ interface IProps {
     setCustomToolbar?(toolbarStyle: IEditorStore['customToolbarStyle']): void;
     toolbarStyle?: IEditorStore['customToolbarStyle'];
     className?: string;
+    fullWidth?: boolean;
 }
 
 /**
@@ -147,19 +148,23 @@ export class TableBlockComponent extends React.Component<IProps> {
                 'table-header': withHeader,
             });
 
+        const fullWidthStyle = this.props.fullWidth ? {width: '100%'} : {};
+
         return (
             <div
+                style={fullWidthStyle}
                 className={cx}
                 onMouseDown={(e) => {
                     this.onMouseDown(e);
                 }}
             >
-                <table>
-                    <tbody>
+                <table style={fullWidthStyle}>
+                    <tbody style={fullWidthStyle}>
                         {Array.from(new Array(numRows)).map((_, i) => (
-                            <tr key={`col-${i}-${numRows}-${numCols}`}>
+                            <tr style={fullWidthStyle} key={`col-${i}-${numRows}-${numCols}`}>
                                 {Array.from(new Array(numCols)).map((__, j) => (
                                     <TableCell
+                                        fullWidth={Object.keys(fullWidthStyle).length > 0}
                                         key={`cell-${i}-${j}-${numRows}-${numCols}`}
                                         readOnly={this.props.readOnly}
                                         editorState={this.getCellEditorState(data, i, j)}

diff --git a/scripts/core/editor3/components/tables/TableCell.tsx b/scripts/core/editor3/components/tables/TableCell.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {Editor, RichUtils, getDefaultKeyBinding, DraftHandleValue, SelectionState, EditorState} from 'draft-js';
 import {getSelectedEntityType, getSelectedEntityRange} from '../links/entityUtils';
 import {customStyleMap} from '../customStyleMap';
@@ -11,6 +10,7 @@ interface IProps {
     onUndo: () => void;
     onRedo: () => void;
     onFocus: (styles: Array<string>, selection: SelectionState) => void;
+    fullWidth?: boolean;
 }
 
 interface IState {
@@ -185,9 +185,17 @@ export class TableCell extends React.Component<IProps, IState> {
     render() {
         const {editorState} = this.state;
         const {readOnly} = this.props;
+        const fullWidthStyle = this.props.fullWidth ? {width: '100%'} : {};
 
         return (
-            <td onClick={(event) => event.stopPropagation()}>
+            <td
+                // Disabling to prevent misbehavior and bugs when dragging & dropping text
+                onDragStart={(e) => {
+                    e.preventDefault();
+                }}
+                style={fullWidthStyle}
+                onClick={(event) => event.stopPropagation()}
+            >
                 <Editor
                     onFocus={this.onFocus}
                     editorState={editorState}

diff --git a/scripts/core/editor3/components/tests/tables.spec.tsx b/scripts/core/editor3/components/tests/tables.spec.tsx
@@ -53,6 +53,7 @@ describe('editor3.component.table-cell', () => {
     it('should render', () => {
         const wrapper = shallow(
             <TableCell
+                fullWidth
                 editorState={EditorState.createWithContent(ContentState.createFromText('abc'))}
                 onChange={() => { /* no-op */ }}
                 readOnly={false}

diff --git a/scripts/core/editor3/html/to-html/AtomicBlockParser.ts b/scripts/core/editor3/html/to-html/AtomicBlockParser.ts
@@ -3,6 +3,7 @@ import {isQumuWidget, postProccessQumuEmbed} from '../../components/embeds/QumuW
 import {logger} from 'core/services/logger';
 import {editor3StateToHtml} from './editor3StateToHtml';
 import {getData, IEditor3TableData} from 'core/editor3/helpers/table';
+import {MULTI_LINE_QUOTE_CLASS} from 'core/editor3/components/multi-line-quote/MultiLineQuote';
 
 /**
  * @ngdoc class
@@ -200,7 +201,7 @@ export class AtomicBlockParser {
         }
 
         const {cells} = data;
-        let html = '<div class="multi-line-quote">';
+        let html = `<div class="${MULTI_LINE_QUOTE_CLASS}">`;
         const cellContentState = cells[0]?.[0] != null
             ? convertFromRaw(cells[0][0])
             : ContentState.createFromText('');