Revert "Fix table width (superdesk#4380)"

This reverts commit 43f988f.
dzonidoo · Nov 16, 2023 · 8f9f268 · 8f9f268
1 parent f2d8cf1
commit 8f9f268
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 25 deletions.
diff --git a/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx b/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx
@@ -5,8 +5,6 @@ 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;
@@ -26,8 +24,7 @@ export class MultiLineQuoteComponent extends React.Component<IProps> {
     render() {
         return (
             <TableBlock
-                fullWidth
-                className={MULTI_LINE_QUOTE_CLASS}
+                className="multi-line-quote"
                 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,7 +24,6 @@ interface IProps {
     setCustomToolbar?(toolbarStyle: IEditorStore['customToolbarStyle']): void;
     toolbarStyle?: IEditorStore['customToolbarStyle'];
     className?: string;
-    fullWidth?: boolean;
 }
 
 /**
@@ -148,23 +147,19 @@ 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 style={fullWidthStyle}>
-                    <tbody style={fullWidthStyle}>
+                <table>
+                    <tbody>
                         {Array.from(new Array(numRows)).map((_, i) => (
-                            <tr style={fullWidthStyle} key={`col-${i}-${numRows}-${numCols}`}>
+                            <tr 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,4 +1,5 @@
 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';
@@ -10,7 +11,6 @@ interface IProps {
     onUndo: () => void;
     onRedo: () => void;
     onFocus: (styles: Array<string>, selection: SelectionState) => void;
-    fullWidth?: boolean;
 }
 
 interface IState {
@@ -185,17 +185,9 @@ 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
-                // Disabling to prevent misbehavior and bugs when dragging & dropping text
-                onDragStart={(e) => {
-                    e.preventDefault();
-                }}
-                style={fullWidthStyle}
-                onClick={(event) => event.stopPropagation()}
-            >
+            <td 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,7 +53,6 @@ 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,7 +3,6 @@ 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
@@ -201,7 +200,7 @@ export class AtomicBlockParser {
         }
 
         const {cells} = data;
-        let html = `<div class="${MULTI_LINE_QUOTE_CLASS}">`;
+        let html = '<div class="multi-line-quote">';
         const cellContentState = cells[0]?.[0] != null
             ? convertFromRaw(cells[0][0])
             : ContentState.createFromText('');