feat: Improve tiptop-integration of toolbars for better UX

[fsbraun]

UX improvements

This PR introduces a new toolbar system for improved user experience.

• The toolbars move into the editable div as Prosemirror decorations. This avoids problems with timeouts when the editable div blurs.
• Visibility of toolbar and dropdown can be defined more clearly using CSS
• The block toolbar is moved from a dialog tag to a div tag to leverage the different focus concepts.
• The block toolbar button now can be used as a block handle for draging block content.
• Events are (largely) handled by the Prosemirror engine for better consistency.
• The toolbar code has been fully refactored and moved into its own module.

Summary by Sourcery

New Features:

• Introduce a new toolbar system that enhances user experience.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR refactors the toolbar system to improve UX by moving the toolbars into the editable div, changing the block toolbar from a dialog to a div, and refactoring the toolbar code into its own module.

Sequence diagram for toolbar interaction flow

sequenceDiagram
    actor User
    participant Editor
    participant Toolbar
    participant ProseMirror

    User->>Editor: Click in editable area
    Editor->>ProseMirror: Focus event
    ProseMirror->>Toolbar: Show toolbar decorations
    User->>Toolbar: Click toolbar button
    Toolbar->>ProseMirror: Execute command
    ProseMirror->>Editor: Update content
    Editor->>Toolbar: Update button states

Loading

Class diagram for the new toolbar system

classDiagram
    class CmsToolbarPlugin {
        +addProseMirrorPlugins()
    }
    class ToolbarPlugin {
        +props
        +state
        -handleDOMEvents
        -createToolbar()
        -updateToolbar()
    }
    class TiptapToolbar {
        +action()
        +enabled()
        +active()
        +type: string
    }
    CmsToolbarPlugin --> ToolbarPlugin
    ToolbarPlugin --> TiptapToolbar
    note for CmsToolbarPlugin "Extension that adds toolbar functionality"
    note for ToolbarPlugin "ProseMirror plugin for toolbar management"
    note for TiptapToolbar "Toolbar button definitions and handlers"

Loading

File-Level Changes

Change	Details	Files
Toolbars are now decorations within the ProseMirror editor	Toolbars moved into the editable div as decorations Events are handled by the ProseMirror engine Toolbar code refactored and moved into its own module	private/js/tiptap_plugins/cms.toolbar.js private/js/cms.tiptap.js private/css/cms.tiptap.css
Block toolbar is now a div	Block toolbar changed from dialog to div Block toolbar button can be used as a block handle for dragging	private/js/tiptap_plugins/cms.toolbar.js private/css/cms.tiptap.css private/css/cms.text.css
Toolbar button states are updated dynamically	Toolbar button states are updated based on editor state	private/js/tiptap_plugins/cms.toolbar.js
Dropdown and form handling improved	Dropdown positioning and behavior improved Form handling and submission updated	private/js/tiptap_plugins/cms.toolbar.js private/js/tiptap_plugins/cms.dynlink.js private/js/tiptap_plugins/cms.formextension.js private/css/cms.toolbar.css djangocms_text/static/djangocms_text/css/cms.text.css
Table features enhanced	Table resizing disabled Toggle header column and row features added Table icons updated	private/js/tiptap_plugins/cms.toolbar.js private/js/tiptap_plugins/cms.tiptap.toolbar.js djangocms_text/editors.py

---

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 (ee5db1a) to head (73bdc0d).

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #43   +/-   ##
=======================================
  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 and found some issues that need to be addressed.

Blocking issues:

• Fix typo in mousedowxn event handler name (link)

Overall Comments:

• Consider moving the SVG icon definitions to separate asset files to improve code readability and maintainability

Here's what I looked at during the review

• 🔴 General issues: 1 blocking issue
• 🟢 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.}

[fsbraun]

@sourcery-ai review

[sourcery-ai]

Hey @fsbraun - I've reviewed your changes and they look great!

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 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.}

[sourcery-ai]

issue (complexity): Consider refactoring the toolbar creation and event handling to be more modular and reduce duplication.

The toolbar implementation has unnecessary complexity that can be reduced in two key areas:

1. Break down the monolithic _populateToolbar function into focused component builders:

function _createToolbarButton(editor, item, filter) {
    // Existing button creation logic
}

function _createDropdown(editor, item, filter) {
    const dropdown = typeof item.items === 'function' 
        ? item.items(editor, items => _populateToolbar(editor, items, filter))
        : _populateToolbar(editor, item.items, filter);

    return `<span title='${item.title}' class="dropdown" role="button">
        ${item.icon}<div class="dropdown-content ${item.class || ''}">${dropdown}</div>
    </span>`;
}

function _populateToolbar(editor, array, filter) {
    return array.map(item => {
        if (Array.isArray(item)) return _handleGroup(editor, item, filter);
        if (item.constructor === Object) return _createDropdown(editor, item, filter);
        if (item === '|') return editor.options.separator_markup;
        return _createToolbarButton(editor, item, filter);
    }).join('');
}

2. Consolidate duplicated event handling between block and top toolbar:

const sharedToolbarHandlers = {
    handleClick(view, event, editor) {
        if (this.containsTarget(event.target)) {
            _handleToolbarClick(event, editor);
            return true;
        }
        _closeAllDropdowns(event, editor);
        return false;
    },

    containsTarget(target) {
        return this.toolbar?.contains(target);
    }
};

function createToolbarPlugin(editor, type) {
    return new Plugin({
        props: {
            handleDOMEvents: {
                click(view, event) {
                    return sharedToolbarHandlers.handleClick(view, event, editor);
                }
            }
        }
        // ... rest of plugin config
    });
}

These changes maintain all functionality while making the code more maintainable and easier to understand.