feat: Add table support for TipTap editor

[fsbraun]

This PR adds table support for the TipTap RTE:

• Add tables from the editor toolbar (1x1 up to 10x10)
• Add/delete rows and columns from the toolbar
• Merge/split cells
• Resize columns

Fixes #21

Summary by Sourcery

Add support for table manipulation in the TipTap editor.

New Features:

• Enable resizing of tables in the editor.

Tests:

• Update tests to cover the new table features.

Summary by Sourcery

Add support for creating and manipulating tables in the TipTap editor.

New Features:

• Add table support to the TipTap editor, including creating tables from the toolbar (1x1 up to 10x10), adding and deleting rows and columns, merging and splitting cells, and resizing columns.

Tests:

• Update existing tests to cover new table features.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR adds support for tables in the TipTap editor, including creating tables, adding/deleting rows and columns, merging/splitting cells, and resizing columns.

Sequence diagram for table creation and manipulation

sequenceDiagram
    actor User
    participant TB as Table Button
    participant Editor as TipTap Editor
    participant Table as Table Component

    User->>TB: Click table button
    TB->>Editor: Show table size selector
    User->>TB: Select dimensions (1x1 to 10x10)
    TB->>Editor: insertTable(rows, cols)
    Editor->>Table: Create table

    Note over User,Table: Table Manipulation
    User->>Table: Modify table structure
    Table->>Editor: Update table
    Editor->>Table: Apply changes

    Note over User,Table: Column Resizing
    User->>Table: Drag column border
    Table->>Editor: Update column width
    Editor->>Table: Apply new dimensions

Loading

Class diagram for TipTap table toolbar implementation

classDiagram
  class TiptapToolbar {
    +Table
    +addColumnBefore
    +addColumnAfter
    +deleteColumn
    +addRowBefore
    +addRowAfter
    +deleteRow
    +mergeOrSplit
  }

  class TableConfig {
    +resizable: true
    +HTMLAttributes: object
  }

  class TableActions {
    +generateButtonArray(rows, cols)
    +generateTableMenu(editor, builder)
  }

  TiptapToolbar -- TableActions
  TableActions -- TableConfig

Loading

File-Level Changes

Change	Details	Files
Added table support to TipTap editor	Added table creation functionality with size selection from 1x1 to 10x10. Implemented adding and deleting rows and columns. Enabled merging and splitting of table cells. Added column resizing feature. Updated CSS to support table display and focus styles. Added table manipulation options to the editor toolbar. Updated translations for new table features. Updated tests to cover new table features.	private/js/cms.tiptap.js private/js/tiptap_plugins/cms.tiptap.toolbar.js private/css/cms.tiptap.css djangocms_text/editors.py
Fixed focus in editor	Fixed focus issue that prevented saving when clicking outside the editor. Removed console log statement from CKEditor4 plugin.	private/js/cms.tiptap.js private/js/ckeditor4_plugins/cmsplugins/plugin.js

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#21	Enable users to add/remove rows and columns in tables	✅
#21	Allow users to create tables of different sizes (not just 3x3)	✅
#21	Add additional table manipulation features (merge/split cells, resize columns)	✅

Possibly linked issues

• Table functionality in TipTap Editor is limited #21: The PR addresses the issue by adding support for table manipulation in the TipTap editor, including adding, deleting, merging, splitting, and resizing.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.16%. Comparing base (5281364) to head (a86a780).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #42   +/-   ##
=======================================
  Coverage   81.16%   81.16%           
=======================================
  Files          17       17           
  Lines         929      929           
  Branches      104      104           
=======================================
  Hits          754      754           
  Misses        132      132           
  Partials       43       43           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sourcery-ai]

Hey @fsbraun - I've reviewed your changes - here's some feedback:

Overall Comments:

• There's a console.log statement in cmsplugins/plugin.js that should be removed before merging

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}