Merge pull request #14686 from overleaf/mj-table-generator-copy

[visual] Update copy for table generator

GitOrigin-RevId: ed5693fc3bf04bade2db70c652c7bdcb38e2195e

services/web/frontend/extracted-translations.json

@@ -54,6 +54,8 @@
   "aggregate_changed": "",
   "aggregate_to": "",
   "agree_with_the_terms": "",
+  "alignment": "",
+  "all_borders": "",
   "all_premium_features": "",
   "all_premium_features_including": "",
   "all_projects": "",
@@ -113,6 +115,8 @@
   "cannot_invite_self": "",
   "cannot_verify_user_not_robot": "",
   "cant_see_what_youre_looking_for_question": "",
+  "caption_above": "",
+  "caption_below": "",
   "card_details": "",
   "card_details_are_not_valid": "",
   "card_must_be_authenticated_by_3dsecure": "",
@@ -122,6 +126,7 @@
   "category_misc": "",
   "category_operators": "",
   "category_relations": "",
+  "center": "",
   "change": "",
   "change_currency": "",
   "change_or_cancel-cancel": "",
@@ -136,6 +141,7 @@
   "change_to_group_plan": "",
   "change_to_this_plan": "",
   "changing_the_position_of_your_figure": "",
+  "changing_the_position_of_your_table": "",
   "chat": "",
   "chat_error": "",
   "checking_dropbox_status": "",
@@ -211,8 +217,10 @@
   "currently_seeing_only_24_hrs_history": "",
   "currently_signed_in_as_x": "",
   "currently_subscribed_to_plan": "",
+  "custom_borders": "",
   "customize_your_group_subscription": "",
   "customizing_figures": "",
+  "customizing_tables": "",
   "date_and_owner": "",
   "dealing_with_errors": "",
   "delete": "",
@@ -226,6 +234,8 @@
   "delete_authentication_token_info": "",
   "delete_figure": "",
   "delete_projects": "",
+  "delete_row_or_column": "",
+  "delete_table": "",
   "delete_tag": "",
   "delete_token": "",
   "delete_user": "",
@@ -462,8 +472,10 @@
   "hotkey_toggle_track_changes": "",
   "hotkey_undo": "",
   "hotkeys": "",
+  "how_it_works": "",
   "i_want_to_stay": "",
   "if_error_persists_try_relinking_provider": "",
+  "if_you_need_to_customize_your_table_further_you_can": "",
   "ignore_validation_errors": "",
   "ill_take_it": "",
   "image_file": "",
@@ -487,11 +499,20 @@
   "inr_discount_modal_title": "",
   "inr_discount_offer": "",
   "inr_discount_offer_green_banner": "",
+  "insert": "",
+  "insert_column_left": "",
+  "insert_column_right": "",
   "insert_figure": "",
   "insert_from_another_project": "",
   "insert_from_project_files": "",
   "insert_from_url": "",
   "insert_image": "",
+  "insert_row_above": "",
+  "insert_row_below": "",
+  "insert_x_columns_left": "",
+  "insert_x_columns_right": "",
+  "insert_x_rows_above": "",
+  "insert_x_rows_below": "",
   "institution": "",
   "institution_account": "",
   "institution_acct_successfully_linked_2": "",
@@ -517,6 +538,7 @@
   "keep_personal_projects_separate": "",
   "keybindings": "",
   "labels_help_you_to_easily_reference_your_figures": "",
+  "labels_help_you_to_reference_your_tables": "",
   "labs_program_already_participating": "",
   "labs_program_benefits": "<0></0>",
   "labs_program_not_participating": "",
@@ -530,6 +552,7 @@
   "latam_discount_offer": "",
   "latex_help_guide": "",
   "latex_places_figures_according_to_a_special_algorithm": "",
+  "latex_places_tables_according_to_a_special_algorithm": "",
   "layout": "",
   "layout_processing": "",
   "learn_more": "",
@@ -540,6 +563,7 @@
   "leave_group": "",
   "leave_now": "",
   "leave_projects": "",
+  "left": "",
   "let_us_know": "",
   "license_for_educational_purposes": "",
   "limited_offer": "",
@@ -620,9 +644,11 @@
   "mendeley_reference_loading_error_forbidden": "",
   "mendeley_sync_description": "",
   "menu": "",
+  "merge_cells": "",
   "month": "",
   "more": "",
   "more_actions": "",
+  "more_options_for_border_settings_coming_soon": "",
   "n_items": "",
   "n_items_plural": "",
   "n_more_updates_above": "",
@@ -653,6 +679,8 @@
   "newsletter": "",
   "next_payment_of_x_collectected_on_y": "",
   "no_actions": "",
+  "no_borders": "",
+  "no_caption": "",
   "no_comments": "",
   "no_existing_password": "",
   "no_folder": "",
@@ -874,6 +902,7 @@
   "review_your_peers_work": "",
   "revoke": "",
   "revoke_invite": "",
+  "right": "",
   "role": "",
   "save": "",
   "save_or_cancel-cancel": "",
@@ -905,16 +934,19 @@
   "search_within_selection": "",
   "security": "",
   "see_changes_in_your_documents_live": "",
+  "select_a_column_or_a_merged_cell_to_align": "",
   "select_a_file": "",
   "select_a_file_figure_modal": "",
   "select_a_new_owner_for_projects": "",
   "select_a_payment_method": "",
   "select_a_project": "",
   "select_a_project_figure_modal": "",
+  "select_a_row_or_a_column_to_delete": "",
   "select_all": "",
   "select_all_projects": "",
   "select_an_output_file": "",
   "select_an_output_file_figure_modal": "",
+  "select_cells_in_a_single_row_to_merge": "",
   "select_folder_from_project": "",
   "select_from_output_files": "",
   "select_from_project_files": "",
@@ -969,6 +1001,7 @@
   "something_went_wrong_rendering_pdf_expected": "<0></0>",
   "something_went_wrong_server": "",
   "somthing_went_wrong_compiling": "",
+  "sorry_your_table_cant_be_displayed_at_the_moment": "",
   "sort_by": "",
   "sort_by_x": "",
   "source": "",
@@ -1038,12 +1071,14 @@
   "this_action_cannot_be_reversed": "",
   "this_action_cannot_be_undone": "",
   "this_address_will_be_shown_on_the_invoice": "",
+  "this_could_be_because_we_cant_support_some_elements_of_the_table": "",
   "this_field_is_required": "",
   "this_grants_access_to_features_2": "",
   "this_project_is_public": "",
   "this_project_is_public_read_only": "",
   "this_project_will_appear_in_your_dropbox_folder_at": "",
   "this_tool_helps_you_insert_figures": "",
+  "this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback": "",
   "timedout": "",
   "tip": "",
   "title": "",
@@ -1141,6 +1176,7 @@
   "unlink_reference": "",
   "unlink_warning_reference": "",
   "unlinking": "",
+  "unmerge_cells": "",
   "unpublish": "",
   "unpublishing": "",
   "unsubscribe": "",
@@ -1172,6 +1208,7 @@
   "vat_number": "",
   "verify_email_address_before_enabling_managed_users": "",
   "view_all": "",
+  "view_code": "",
   "view_group_members": "",
   "view_hub": "",
   "view_hub_subtext": "",
@@ -1221,6 +1258,7 @@
   "you_have_been_invited_to_transfer_management_of_your_account": "",
   "you_have_been_invited_to_transfer_management_of_your_account_to": "",
   "you_will_be_able_to_reassign_subscription": "",
+  "youll_get_best_results_in_visual_but_can_be_used_in_source": "",
   "your_affiliation_is_confirmed": "",
   "your_browser_does_not_support_this_feature": "",
   "your_git_access_info": "",

services/web/frontend/js/features/source-editor/components/table-generator/help-modal.tsx

@@ -1,9 +1,11 @@
 import { Button, Modal } from 'react-bootstrap'
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 import { useTabularContext } from './contexts/tabular-context'
+import { Trans, useTranslation } from 'react-i18next'
 
 export const TableGeneratorHelpModal = () => {
   const { helpShown, hideHelp } = useTabularContext()
+  const { t } = useTranslation()
   if (!helpShown) return null
 
   return (
@@ -13,73 +15,77 @@ export const TableGeneratorHelpModal = () => {
       className="table-generator-help-modal"
     >
       <Modal.Header closeButton>
-        <Modal.Title>Help</Modal.Title>
+        <Modal.Title>{t('help')}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <p>
-          This tool helps you insert simple tables into your project without
+          <Trans
-          writing LaTeX code. This tool is new, so please{' '}
+            i18nKey="this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback"
-          <a
+            components={[
-            href="https://forms.gle/ri3fzV1oQDAjmfmD7"
+              // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-            target="_blank"
+              <a
-            rel="noopener noreferrer"
+                href="https://forms.gle/ri3fzV1oQDAjmfmD7"
-          >
+                target="_blank"
-            give us feedback
+                rel="noopener noreferrer"
-          </a>{' '}
+              />,
-          and look out for additional functionality coming soon.
+            ]}
+          />
         </p>
-        <b>How it works</b>
+        <b>{t('how_it_works')}</b>
         <p>
-          You’ll get the best results from using this tool in the{' '}
+          <Trans
-          <b>Visual Editor</b>, although you can still use it to insert tables
+            i18nKey="youll_get_best_results_in_visual_but_can_be_used_in_source"
-          in the <b>Code Editor</b>. Once you’ve selected the number of rows and
+            // eslint-disable-next-line react/jsx-key
-          columns you need, the table will appear in your document and you can
+            components={[<b />, <b />]}
-          double click in a cell to add contents to it.
+          />
         </p>
-        <b>Customizing tables</b>
+        <b>{t('customizing_tables')}</b>
         <p>
-          If you need to customize your table further, you can. Using LaTeX
+          <Trans
-          code, you can change anything from table styles and border styles to
+            i18nKey="if_you_need_to_customize_your_table_further_you_can"
-          colors and column widths.{' '}
+            components={[
-          <a
+              // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-            href="https://www.overleaf.com/learn/latex/Tables"
+              <a
-            target="_blank"
+                href="https://www.overleaf.com/learn/latex/Tables"
-            rel="noopener"
+                target="_blank"
-          >
+                rel="noopener"
-            Read our guide
+              />,
-          </a>{' '}
+            ]}
-          to using tables in LaTeX to help you get started.
+          />
         </p>
-        <b>Changing the position of your table</b>
+        <b>{t('changing_the_position_of_your_table')}</b>
         <p>
-          LaTeX places tables according to a special algorithm. You can use
+          <Trans
-          “placement parameters” to influence the position of the table.{' '}
+            i18nKey="latex_places_tables_according_to_a_special_algorithm"
-          <a
+            components={[
-            href="https://www.overleaf.com/learn/latex/Positioning_images_and_tables"
+              // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-            target="_blank"
+              <a
-            rel="noopener"
+                href="https://www.overleaf.com/learn/latex/Positioning_images_and_tables"
-          >
+                target="_blank"
-            This article
+                rel="noopener"
-          </a>{' '}
+              />,
-          explains how to do this.
+            ]}
+          />
         </p>
-        <b>Understanding labels</b>
+        <b>{t('understanding_labels')}</b>
         <p>
-          Labels help you to reference your tables throughout your document
+          <Trans
-          easily. To reference a table within the text, reference the label
+            i18nKey="labels_help_you_to_reference_your_tables"
-          using the <code>\ref&#123;...&#125;</code> command. This makes it easy
+            components={[
-          to reference tables without manually remembering the table numbering.{' '}
+              // eslint-disable-next-line react/jsx-key
-          <a
+              <code />,
-            href="https://www.overleaf.com/learn/latex/Inserting_Images#Labels_and_cross-references"
+              // eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
-            target="_blank"
+              <a
-            rel="noopener"
+                href="https://www.overleaf.com/learn/latex/Inserting_Images#Labels_and_cross-references"
-          >
+                target="_blank"
-            Read about labels and cross-references.
+                rel="noopener"
-          </a>
+              />,
+            ]}
+          />
         </p>
       </Modal.Body>
       <Modal.Footer>
-        <Button onClick={hideHelp}>Close</Button>
+        <Button onClick={hideHelp}>{t('close')}</Button>
       </Modal.Footer>
     </AccessibleModal>
   )

services/web/frontend/js/features/source-editor/components/table-generator/tabular.tsx

@@ -23,6 +23,7 @@ import Icon from '../../../../shared/components/icon'
 import { BorderTheme } from './toolbar/commands'
 import { TableGeneratorHelpModal } from './help-modal'
 import { SplitTestProvider } from '../../../../shared/context/split-test-context'
+import { useTranslation } from 'react-i18next'
 
 export type ColumnDefinition = {
   alignment: 'left' | 'center' | 'right' | 'paragraph'
@@ -188,23 +189,33 @@ export const TableRenderingError: FC<{
   view: EditorView
   codePosition?: number
 }> = ({ view, codePosition }) => {
+  const { t } = useTranslation()
   return (
     <Alert className="table-generator-error">
       <span className="table-generator-error-icon">
         <Icon type="exclamation-circle" />
       </span>
-      <span className="table-generator-error-message">
+      <div className="table-generator-error-message">
-        We couldn't render your table
+        <p className="table-generator-error-message-header">
-      </span>
+          {t('sorry_your_table_cant_be_displayed_at_the_moment')}
+        </p>
+        <p>
+          {t(
+            'this_could_be_because_we_cant_support_some_elements_of_the_table'
+          )}
+        </p>
+      </div>
       {codePosition !== undefined && (
         <Button
+          bsStyle={null}
+          className="btn-secondary table-generator-error-show-code-button"
           onClick={() =>
             view.dispatch({
               selection: EditorSelection.cursor(codePosition),
             })
           }
         >
-          View code
+          {t('view_code')}
         </Button>
       )}
     </Alert>

services/web/frontend/js/features/source-editor/components/table-generator/toolbar/toolbar.tsx

@@ -21,17 +21,7 @@ import { useCodeMirrorViewContext } from '../../codemirror-editor'
 import { useTableContext } from '../contexts/table-context'
 import { useTabularContext } from '../contexts/tabular-context'
 import SplitTestBadge from '../../../../../shared/components/split-test-badge'
-
+import { useTranslation } from 'react-i18next'
-const borderThemeLabel = (theme: BorderTheme | null) => {
-  switch (theme) {
-    case BorderTheme.FULLY_BORDERED:
-      return 'All borders'
-    case BorderTheme.NO_BORDERS:
-      return 'No borders'
-    default:
-      return 'Custom borders'
-  }
-}
 
 export const Toolbar = memo(function Toolbar() {
   const { selection, setSelection } = useSelectionContext()
@@ -39,21 +29,28 @@ export const Toolbar = memo(function Toolbar() {
   const { positions, rowSeparators, cellSeparators, tableEnvironment, table } =
     useTableContext()
   const { showHelp } = useTabularContext()
+  const { t } = useTranslation()
 
-  const borderDropdownLabel = useMemo(
+  const borderDropdownLabel = useMemo(() => {
-    () => borderThemeLabel(table.getBorderTheme()),
+    switch (table.getBorderTheme()) {
-    [table]
+      case BorderTheme.FULLY_BORDERED:
-  )
+        return t('all_borders')
+      case BorderTheme.NO_BORDERS:
+        return t('no_borders')
+      default:
+        return t('custom_borders')
+    }
+  }, [table, t])
 
   const captionLabel = useMemo(() => {
     if (!tableEnvironment?.caption) {
-      return 'No caption'
+      return t('no_caption')
     }
     if (tableEnvironment.caption.from < positions.tabular.from) {
-      return 'Caption above'
+      return t('caption_above')
     }
-    return 'Caption below'
+    return t('caption_below')
-  }, [tableEnvironment, positions.tabular.from])
+  }, [tableEnvironment, positions.tabular.from, t])
 
   if (!selection) {
     return null
@@ -75,7 +72,7 @@ export const Toolbar = memo(function Toolbar() {
               removeCaption(view, tableEnvironment)
             }}
           >
-            No caption
+            {t('no_caption')}
           </ToolbarDropdownItem>
           <ToolbarDropdownItem
             id="table-generator-caption-above"
@@ -83,7 +80,7 @@ export const Toolbar = memo(function Toolbar() {
               moveCaption(view, positions, 'above', tableEnvironment)
             }}
           >
-            Caption above
+            {t('caption_above')}
           </ToolbarDropdownItem>
           <ToolbarDropdownItem
             id="table-generator-caption-below"
@@ -91,7 +88,7 @@ export const Toolbar = memo(function Toolbar() {
               moveCaption(view, positions, 'below', tableEnvironment)
             }}
           >
-            Caption below
+            {t('caption_below')}
           </ToolbarDropdownItem>
         </ToolbarDropdown>
         <ToolbarDropdown
@@ -111,7 +108,9 @@ export const Toolbar = memo(function Toolbar() {
             }}
           >
             <MaterialIcon type="border_all" />
-            <span className="table-generator-button-label">All borders</span>
+            <span className="table-generator-button-label">
+              {t('all_borders')}
+            </span>
           </ToolbarDropdownItem>
           <ToolbarDropdownItem
             id="table-generator-borders-no-borders"
@@ -126,22 +125,24 @@ export const Toolbar = memo(function Toolbar() {
             }}
           >
             <MaterialIcon type="border_clear" />
-            <span className="table-generator-button-label">No borders</span>
+            <span className="table-generator-button-label">
+              {t('no_borders')}
+            </span>
           </ToolbarDropdownItem>
           <div className="table-generator-border-options-coming-soon">
             <div className="info-icon">
               <MaterialIcon type="info" />
             </div>
-            More options for border settings coming soon.
+            {t('more_options_for_border_settings_coming_soon')}
           </div>
         </ToolbarDropdown>
       </div>
       <div className="table-generator-button-group">
         <ToolbarButtonMenu
-          label="Alignment"
+          label={t('alignment')}
           icon="format_align_left"
           id="table-generator-align-dropdown"
-          disabledLabel="Select a column or a merged cell to align"
+          disabledLabel={t('select_a_column_or_a_merged_cell_to_align')}
           disabled={
             !selection.isColumnSelected(selection.from.cell, table) &&
             !selection.isMergedCellSelected(table)
@@ -150,7 +151,7 @@ export const Toolbar = memo(function Toolbar() {
           <ToolbarButton
             icon="format_align_left"
             id="table-generator-align-left"
-            label="Left"
+            label={t('left')}
             command={() => {
               setAlignment(view, selection, 'left', positions, table)
             }}
@@ -158,7 +159,7 @@ export const Toolbar = memo(function Toolbar() {
           <ToolbarButton
             icon="format_align_center"
             id="table-generator-align-center"
-            label="Center"
+            label={t('center')}
             command={() => {
               setAlignment(view, selection, 'center', positions, table)
             }}
@@ -166,7 +167,7 @@ export const Toolbar = memo(function Toolbar() {
           <ToolbarButton
             icon="format_align_right"
             id="table-generator-align-right"
-            label="Right"
+            label={t('right')}
             command={() => {
               setAlignment(view, selection, 'right', positions, table)
             }}
@@ -177,15 +178,15 @@ export const Toolbar = memo(function Toolbar() {
           id="table-generator-merge-cells"
           label={
             selection.isMergedCellSelected(table)
-              ? 'Unmerge cells'
+              ? t('unmerge_cells')
-              : 'Merge cells'
+              : t('merge_cells')
           }
           active={selection.isMergedCellSelected(table)}
           disabled={
             !selection.isMergedCellSelected(table) &&
             !selection.isMergeableCells(table)
           }
-          disabledLabel="Select cells in a row to merge"
+          disabledLabel={t('select_cells_in_a_single_row_to_merge')}
           command={() => {
             if (selection.isMergedCellSelected(table)) {
               unmergeCells(view, selection, table)
@@ -197,8 +198,8 @@ export const Toolbar = memo(function Toolbar() {
         <ToolbarButton
           icon="delete"
           id="table-generator-remove-column-row"
-          label="Delete row or column"
+          label={t('delete_row_or_column')}
-          disabledLabel="Select a row or a column to delete"
+          disabledLabel={t('select_a_row_or_a_column_to_delete')}
           disabled={
             (!selection.isAnyRowSelected(table) &&
               !selection.isAnyColumnSelected(table)) ||
@@ -220,7 +221,7 @@ export const Toolbar = memo(function Toolbar() {
           id="table-generator-add-dropdown"
           btnClassName="table-generator-toolbar-button"
           icon="add"
-          tooltip="Insert"
+          tooltip={t('insert')}
           disabled={!selection}
         >
           <ToolbarDropdownItem
@@ -233,8 +234,8 @@ export const Toolbar = memo(function Toolbar() {
           >
             <span className="table-generator-button-label">
               {columnsToInsert === 1
-                ? 'Insert column left'
+                ? t('insert_column_left')
-                : `Insert ${columnsToInsert} columns left`}
+                : t('insert_x_columns_left', { columns: columnsToInsert })}
             </span>
           </ToolbarDropdownItem>
           <ToolbarDropdownItem
@@ -247,8 +248,8 @@ export const Toolbar = memo(function Toolbar() {
           >
             <span className="table-generator-button-label">
               {columnsToInsert === 1
-                ? 'Insert column right'
+                ? t('insert_column_right')
-                : `Insert ${columnsToInsert} columns right`}
+                : t('insert_x_columns_right', { columns: columnsToInsert })}
             </span>
           </ToolbarDropdownItem>
           <hr />
@@ -269,8 +270,8 @@ export const Toolbar = memo(function Toolbar() {
           >
             <span className="table-generator-button-label">
               {rowsToInsert === 1
-                ? 'Insert row above'
+                ? t('insert_row_above')
-                : `Insert ${rowsToInsert} rows above`}
+                : t('insert_x_rows_above', { rows: rowsToInsert })}
             </span>
           </ToolbarDropdownItem>
           <ToolbarDropdownItem
@@ -290,8 +291,8 @@ export const Toolbar = memo(function Toolbar() {
           >
             <span className="table-generator-button-label">
               {rowsToInsert === 1
-                ? 'Insert row below'
+                ? t('insert_row_below')
-                : `Insert ${rowsToInsert} rows below`}
+                : t('insert_x_rows_below', { rows: rowsToInsert })}
             </span>
           </ToolbarDropdownItem>
         </ToolbarDropdown>
@@ -300,7 +301,7 @@ export const Toolbar = memo(function Toolbar() {
         <ToolbarButton
           icon="delete_forever"
           id="table-generator-remove-table"
-          label="Delete table"
+          label={t('delete_table')}
           command={() => {
             removeNodes(view, tableEnvironment?.table ?? positions.tabular)
             view.focus()
@@ -309,7 +310,7 @@ export const Toolbar = memo(function Toolbar() {
         <ToolbarButton
           icon="help"
           id="table-generator-show-help"
-          label="Help"
+          label={t('help')}
           command={showHelp}
         />
         <div className="toolbar-beta-badge">

services/web/frontend/js/features/source-editor/extensions/visual/table-generator.ts

@@ -437,6 +437,13 @@ export const tableGeneratorTheme = EditorView.baseTheme({
     '& .table-generator-error-message': {
       flex: '1 1 auto',
     },
+    '& .table-generator-error-message-header': {
+      fontWeight: 'bold',
+      marginBottom: '2px',
+    },
+    '& .table-generator-error-show-code-button': {
+      alignSelf: 'baseline',
+    },
     '& .table-generator-error-icon': {
       color: '#3265B2',
       'margin-right': '12px',

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts

@@ -1,4 +1,4 @@
-import { WidgetType } from '@codemirror/view'
+import { EditorView, WidgetType } from '@codemirror/view'
 import { SyntaxNode } from '@lezer/common'
 
 export class TableRenderingErrorWidget extends WidgetType {
@@ -8,7 +8,7 @@ export class TableRenderingErrorWidget extends WidgetType {
     this.hasTableNode = Boolean(tableNode)
   }
 
-  toDOM(): HTMLElement {
+  toDOM(view: EditorView): HTMLElement {
     const warning = document.createElement('div')
     warning.classList.add('table-generator-error', 'alert')
     warning.role = 'alert'
@@ -18,10 +18,19 @@ export class TableRenderingErrorWidget extends WidgetType {
     iconType.classList.add('fa', 'fa-info-circle')
     icon.appendChild(iconType)
     warning.appendChild(icon)
-    const message = document.createElement('span')
+    const message = document.createElement('div')
     message.classList.add('table-generator-error-message')
-    message.textContent =
+    const messageHeader = document.createElement('p')
-      'We couldn’t render your table.\nThis could be because some features of this table are not supported in the table preview yet, or due to a LaTeX error in the table code.'
+    messageHeader.classList.add('table-generator-error-message-header')
+    messageHeader.textContent = view.state.phrase(
+      'sorry_your_table_cant_be_displayed_at_the_moment'
+    )
+    const messageBody = document.createElement('p')
+    messageBody.textContent = view.state.phrase(
+      'this_could_be_because_we_cant_support_some_elements_of_the_table'
+    )
+    message.appendChild(messageHeader)
+    message.appendChild(messageBody)
     warning.appendChild(message)
     const element = document.createElement('div')
     element.classList.add('table-generator', 'table-generator-error-container')

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/tabular.tsx

@@ -98,7 +98,6 @@ export class TabularWidget extends WidgetType {
   }
 
   destroy() {
-    console.debug('destroying tabular widget')
     if (this.element) {
       ReactDOM.unmountComponentAtNode(this.element)
     }

services/web/locales/en.json

@@ -82,7 +82,9 @@
   "aggregate_changed": "Changed",
   "aggregate_to": "to",
   "agree_with_the_terms": "I agree with the Overleaf terms",
+  "alignment": "Alignment",
   "all": "All",
+  "all_borders": "All borders",
   "all_our_group_plans_offer_educational_discount": "All of our <0>group plans</0> offer an <1>educational discount</1> for students and faculty",
   "all_packages_and_templates": "All the packages and <0>__templatesLink__</0> you need",
   "all_premium_features": "All premium features",
@@ -200,6 +202,8 @@
   "cant_find_email": "That email address is not registered, sorry.",
   "cant_find_page": "Sorry, we can’t find the page you are looking for.",
   "cant_see_what_youre_looking_for_question": "Can’t see what you’re looking for?",
+  "caption_above": "Caption above",
+  "caption_below": "Caption below",
   "card_details": "Card details",
   "card_details_are_not_valid": "Card details are not valid",
   "card_must_be_authenticated_by_3dsecure": "Your card must be authenticated with 3D Secure before continuing",
@@ -210,6 +214,7 @@
   "category_misc": "Misc",
   "category_operators": "Operators",
   "category_relations": "Relations",
+  "center": "Center",
   "change": "Change",
   "change_currency": "Change currency",
   "change_or_cancel-cancel": "cancel",
@@ -225,6 +230,7 @@
   "change_to_group_plan": "Change to a group plan",
   "change_to_this_plan": "Change to this plan",
   "changing_the_position_of_your_figure": "Changing the position of your figure",
+  "changing_the_position_of_your_table": "Changing the position of your table",
   "chat": "Chat",
   "chat_error": "Could not load chat messages, please try again.",
   "check_your_email": "Check your email",
@@ -335,12 +341,14 @@
   "currently_seeing_only_24_hrs_history": "You’re currently seeing the last 24 hours of changes in this project.",
   "currently_signed_in_as_x": "Currently signed in as <0>__userEmail__</0>.",
   "currently_subscribed_to_plan": "You are currently subscribed to the <0>__planName__</0> plan.",
+  "custom_borders": "Custom borders",
   "custom_resource_portal": "Custom resource portal",
   "custom_resource_portal_info": "You can have your own custom portal page on Overleaf. This is a great place for your users to find out more about Overleaf, access templates, FAQs and Help resources, and sign up to Overleaf.",
   "customize": "Customize",
   "customize_your_group_subscription": "Customize your group subscription",
   "customize_your_plan": "Customize your plan",
   "customizing_figures": "Customizing figures",
+  "customizing_tables": "Customizing tables",
   "da": "Danish",
   "date": "Date",
   "date_and_owner": "Date and owner",
@@ -362,6 +370,8 @@
   "delete_figure": "Delete figure",
   "delete_folder": "Delete Folder",
   "delete_projects": "Delete Projects",
+  "delete_row_or_column": "Delete row or column",
+  "delete_table": "Delete table",
   "delete_tag": "Delete Tag",
   "delete_token": "Delete token",
   "delete_user": "Delete user",
@@ -743,6 +753,7 @@
   "hotkey_toggle_track_changes": "Toggle track changes",
   "hotkey_undo": "Undo",
   "hotkeys": "Hotkeys",
+  "how_it_works": "How it works",
   "how_to_create_tables": "How to create tables",
   "how_to_insert_images": "How to insert images",
   "hundreds_templates_info": "Produce beautiful documents starting from our gallery of LaTeX templates for journals, conferences, theses, reports, CVs and much more.",
@@ -750,6 +761,7 @@
   "if_error_persists_try_relinking_provider": "If this error persists, try re-linking your __provider__ account here",
   "if_have_existing_can_link": "If you have an existing <b>__appName__</b> account on another email, you can link it to your <b>__institutionName__</b> account by clicking <b>__clickText__</b>.",
   "if_owner_can_link": "If you own the <b>__appName__</b> account with <b>__email__</b>, you will be allowed to link it to your <b>__institutionName__</b> institutional account.",
+  "if_you_need_to_customize_your_table_further_you_can": "If you need to customize your table further, you can. Using LaTeX code, you can change anything from table styles and border styles to colors and column widths. <0>Read our guide</0> to using tables in LaTeX to help you get started.",
   "ignore_and_continue_institution_linking": "You can also ignore this and <a href=\"__link__\">continue to __appName__ with your <b>__email__</b> account</a>.",
   "ignore_validation_errors": "Don’t check syntax",
   "ill_take_it": "I’ll take it!",
@@ -779,11 +791,20 @@
   "inr_discount_offer": "Good news! You can now use Rupees ₹ to pay for an Overleaf subscription, giving you a <0>70% discount</0> on our premium features.",
   "inr_discount_offer_green_banner": "__flag__ <0>Big news!</0> You qualify for a <0>70% discount</0> on our premium plans because you’re in India. <br />Get additional collaborators, document history, track changes, and more.",
   "inr_discount_offer_plans_page_banner": "__flag__ <b>Great news!</b> We’ve applied a <b>70% discount</b> discount to premium plans for our users in India. Check out the new lower prices below.",
+  "insert": "Insert",
+  "insert_column_left": "Insert column left",
+  "insert_column_right": "Insert column right",
   "insert_figure": "Insert figure",
   "insert_from_another_project": "Insert from another project",
   "insert_from_project_files": "Insert from project files",
   "insert_from_url": "Insert from URL",
   "insert_image": "Insert image",
+  "insert_row_above": "Insert row above",
+  "insert_row_below": "Insert row below",
+  "insert_x_columns_left": "Insert __columns__ columns left",
+  "insert_x_columns_right": "Insert __columns__ columns right",
+  "insert_x_rows_above": "Insert __rows__ rows above",
+  "insert_x_rows_below": "Insert __rows__ rows below",
   "institution": "Institution",
   "institution_account": "Institution Account",
   "institution_account_tried_to_add_affiliated_with_another_institution": "This email is <b>already associated</b> with your account but affiliated with another institution.",
@@ -851,6 +872,7 @@
   "knowledge_base": "knowledge base",
   "ko": "Korean",
   "labels_help_you_to_easily_reference_your_figures": "Labels help you to easily reference your figures throughout your document. To reference a figure within the text, reference the label using the <0>\\ref{...}</0> command. This makes it easy to reference figures without needing to manually remember the figure numbering. <1>Learn more</1>",
+  "labels_help_you_to_reference_your_tables": "Labels help you to reference your tables throughout your document easily. To reference a table within the text, reference the label using the <0>\\ref{...}</0> command. This makes it easy to reference tables without manually remembering the table numbering. <1>Read about labels and cross-references</1>.",
   "labs_program_already_participating": "You are enrolled in Labs",
   "labs_program_badge_description": "While using __appName__, you will see Labs features marked with this badge:",
   "labs_program_benefits": "__appName__ is always looking for new ways to help users work more quickly and effectively. By joining Overleaf Labs, you can participate in experiments that explore innovative ideas in the space of collaborative writing and publishing.",
@@ -874,6 +896,7 @@
   "latex_help_guide": "LaTeX help guide",
   "latex_in_thirty_minutes": "LaTeX in 30 minutes",
   "latex_places_figures_according_to_a_special_algorithm": "LaTeX places figures according to a special algorithm. You can use something called ‘placement parameters’ to influence the positioning of the figure. <0>Find out how</>",
+  "latex_places_tables_according_to_a_special_algorithm": "LaTeX places tables according to a special algorithm. You can use “placement parameters” to influence the position of the table. <0>This article</0> explains how to do this.",
   "latex_templates": "LaTeX Templates",
   "layout": "Layout",
   "layout_processing": "Layout processing",
@@ -890,6 +913,7 @@
   "leave_group": "Leave group",
   "leave_now": "Leave now",
   "leave_projects": "Leave Projects",
+  "left": "Left",
   "let_us_know": "Let us know",
   "license": "License",
   "license_for_educational_purposes": "This license is for educational purposes (applies to students or faculty using __appName__ for teaching)",
@@ -1014,12 +1038,14 @@
   "mendeley_sync_description": "With the Mendeley integration you can import your references from Mendeley into your __appName__ projects.",
   "menu": "Menu",
   "merge": "Merge",
+  "merge_cells": "Merge cells",
   "merging": "Merging",
   "month": "month",
   "monthly": "Monthly",
   "more": "More",
   "more_actions": "More actions",
   "more_info": "More Info",
+  "more_options_for_border_settings_coming_soon": "More options for border settings coming soon.",
   "more_project_collaborators": "<0>More</0> project <0>collaborators</0>",
   "more_than_one_kind_of_snippet_was_requested": "The link to open this content on Overleaf included some invalid parameters. If this keeps happening for links on a particular site, please report this to them.",
   "most_popular": "most popular",
@@ -1068,6 +1094,8 @@
   "no": "Norwegian",
   "no_actions": "No actions",
   "no_articles_matching_your_tags": "There are no articles matching your tags",
+  "no_borders": "No borders",
+  "no_caption": "No caption",
   "no_comments": "No comments",
   "no_complicated_latex_install": "No complicated LaTeX installation",
   "no_existing_password": "Please use the password reset form to set your password",
@@ -1422,6 +1450,7 @@
   "review_your_peers_work": "Review your peers’ work",
   "revoke": "Revoke",
   "revoke_invite": "Revoke Invite",
+  "right": "Right",
   "ro": "Romanian",
   "role": "Role",
   "ru": "Russian",
@@ -1464,16 +1493,19 @@
   "security": "Security",
   "see_changes_in_your_documents_live": "See changes in your documents, live",
   "see_what_has_been": "See what has been ",
+  "select_a_column_or_a_merged_cell_to_align": "Select a column or a merged cell to align",
   "select_a_file": "Select a File",
   "select_a_file_figure_modal": "Select a file",
   "select_a_new_owner_for_projects": "Select a new owner for this user’s projects",
   "select_a_payment_method": "Select a payment method",
   "select_a_project": "Select a Project",
   "select_a_project_figure_modal": "Select a project",
+  "select_a_row_or_a_column_to_delete": "Select a row or a column to delete",
   "select_all": "Select all",
   "select_all_projects": "Select all projects",
   "select_an_output_file": "Select an Output File",
   "select_an_output_file_figure_modal": "Select an output file",
+  "select_cells_in_a_single_row_to_merge": "Select cells in a single row to merge",
   "select_folder_from_project": "Select folder from project",
   "select_from_output_files": "select from output files",
   "select_from_project_files": "select from project files",
@@ -1550,6 +1582,7 @@
   "somthing_went_wrong_compiling": "Sorry, something went wrong and your project could not be compiled. Please try again in a few moments.",
   "sorry_detected_sales_restricted_region": "Sorry, we’ve detected that you are in a region from which we cannot presently accept payments. If you think you’ve received this message in error, please <a href=\"__link__\">contact us</a> with details of your location, and we will look into this for you. We apologize for the inconvenience.",
   "sorry_something_went_wrong_opening_the_document_please_try_again": "Sorry, an unexpected error occurred when trying to open this content on Overleaf. Please try again.",
+  "sorry_your_table_cant_be_displayed_at_the_moment": "Sorry, your table can’t be displayed at the moment.",
   "sorry_your_token_expired": "Sorry, your token expired",
   "sort_by": "Sort by",
   "sort_by_x": "Sort by __x__",
@@ -1670,6 +1703,7 @@
   "this_action_cannot_be_reversed": "This action cannot be reversed.",
   "this_action_cannot_be_undone": "This action cannot be undone.",
   "this_address_will_be_shown_on_the_invoice": "This address will be shown on the invoice",
+  "this_could_be_because_we_cant_support_some_elements_of_the_table": "This could be because we can’t yet support some elements of the table in the table preview. Or there may be an error in the table’s LaTeX code.",
   "this_field_is_required": "This field is required",
   "this_grants_access_to_features_2": "This grants you access to <0>__appName__</0> <0>__featureType__</0> features.",
   "this_is_your_template": "This is your template from your project",
@@ -1677,6 +1711,7 @@
   "this_project_is_public_read_only": "This project is public and can be viewed but not edited by anyone with the URL",
   "this_project_will_appear_in_your_dropbox_folder_at": "This project will appear in your Dropbox folder at ",
   "this_tool_helps_you_insert_figures": "This tool helps you insert figures into your project without needing to write the LaTeX code. The following information explains more about the options in the tool and how to further customize your figures.",
+  "this_tool_helps_you_insert_simple_tables_into_your_project_without_writing_latex_code_give_feedback": "This tool helps you insert simple tables into your project without writing LaTeX code. This tool is new, so please <0>give us feedback</0> and look out for additional functionality coming soon.",
   "thousands_templates": "Thousands of templates",
   "thousands_templates_info": "Produce beautiful documents starting from our gallery of LaTeX templates for journals, conferences, theses, reports, CVs and much more.",
   "three_free_collab": "Three free collaborators",
@@ -1800,6 +1835,7 @@
   "unlink_reference": "Unlink References Provider",
   "unlink_warning_reference": "Warning: When you unlink your account from this provider you will not be able to import references into your projects.",
   "unlinking": "Unlinking",
+  "unmerge_cells": "Unmerge cells",
   "unpublish": "Unpublish",
   "unpublishing": "Unpublishing",
   "unsubscribe": "Unsubscribe",
@@ -1844,6 +1880,7 @@
   "vat_number": "VAT Number",
   "verify_email_address_before_enabling_managed_users": "You need to verify your email address before enabling managed users.",
   "view_all": "View All",
+  "view_code": "View code",
   "view_collab_edits": "View collaborator edits ",
   "view_group_members": "View group members",
   "view_hub": "View Admin Hub",
@@ -1927,6 +1964,7 @@
   "you_plus_6": "You + 6",
   "you_will_be_able_to_contact_us_any_time_to_share_your_feedback": "<0>You will be able to contact us</0> any time to share your feedback",
   "you_will_be_able_to_reassign_subscription": "You will be able to reassign their subscription membership to another person in your organization",
+  "youll_get_best_results_in_visual_but_can_be_used_in_source": "You’ll get the best results from using this tool in the <0>Visual Editor</0>, although you can still use it to insert tables in the <1>Code Editor</1>. Once you’ve selected the number of rows and columns you need, the table will appear in your document and you can double click in a cell to add contents to it.",
   "your_account_is_managed_by_admin_cant_join_additional_group": "Your __appName__ account is managed by your current group admin (__admin__). This means you can’t join additional group subscriptions. <0>Read more about Managed Users.</0>",
   "your_affiliation_is_confirmed": "Your <0>__institutionName__</0> affiliation is confirmed.",
   "your_browser_does_not_support_this_feature": "Sorry, your browser doesn’t support this feature. Please update your browser to its latest version.",