feat: Add configurable block and inline styles for Tiptap #51

fsbraun · 2025-01-06T21:11:39Z

Summary by Sourcery

Add support for configurable inline and block styles, replacing the hardcoded small, kbd, var, and samp styles.

New Features:

Introduce configurable inline and block styles in the editor.

Tests:

Update tests to reflect the changes in the available styles.

sourcery-ai · 2025-01-06T21:11:43Z

Reviewer's Guide by Sourcery

This pull request introduces a flexible styling system for inline and block elements, replacing the fixed styles (Small, Var, Kbd, Samp) with configurable styles. The toolbar has been updated to support these changes.

Sequence diagram for style application

sequenceDiagram
    participant User
    participant Editor
    participant StyleSystem
    participant DOM

    User->>Editor: Clicks style button
    Editor->>StyleSystem: toggleStyle(id)
    StyleSystem->>StyleSystem: Check style exists
    alt Style exists
        StyleSystem->>StyleSystem: Check if style active
        alt Style is active
            StyleSystem->>DOM: Remove style
        else Style not active
            StyleSystem->>DOM: Apply style attributes
        end
    end
    DOM-->>User: Updated content display

Class diagram for the new style system

classDiagram
    class Style {
        +addOptions()
        +addAttributes()
        +parseHTML()
        +renderHTML()
    }

    class InlineStyle {
        +name: string
        +defaultTag: string
        +addOptions()
        +addCommands()
        -toggleInlineStyle(id)
        -activeInlineStyle(id)
    }

    class BlockStyle {
        +name: string
        +group: string
        +content: string
        +defaultTag: string
        +addCommands()
        -toggleBlockStyle(id)
        -activeBlockStyle(id)
    }

    Style <|-- InlineStyle
    Style <|-- BlockStyle

    note for Style "Base functionality for styling"
    note for InlineStyle "Handles inline text styling"
    note for BlockStyle "Handles block-level styling"

File-Level Changes

Change	Details	Files
Replaced fixed inline styles with configurable styles	Removed fixed inline style components (Small, Var, Kbd, Samp). Added `InlineStyle` component to enable configurable inline styles. Added logic to parse and render configurable inline styles based on editor options. Added commands to toggle and check the active state of inline styles. Updated style rendering to handle both element-based and attribute-based styles.	`private/js/tiptap_plugins/cms.styles.js`
Introduced configurable block styles	Added `BlockStyle` component to manage configurable block-level styles. Implemented logic to parse and apply block styles from editor options. Added commands for toggling and checking the status of block styles. Updated style rendering to support configurable block elements and attributes.	`private/js/tiptap_plugins/cms.styles.js`
Updated toolbar to accommodate configurable styles	Added new toolbar buttons for inline and block styles. Implemented rendering of style menus in the toolbar. Updated toolbar configuration to include the new style buttons. Added options for inline and block styles to the editor configuration. Modified toolbar update logic to handle enabled and active states of style buttons.	`private/js/tiptap_plugins/cms.styles.js` `private/js/tiptap_plugins/cms.tiptap.toolbar.js` `djangocms_text/editors.py` `private/js/cms.tiptap.js` `private/js/tiptap_plugins/cms.toolbar.js`
Refactored color menu rendering	Moved color menu rendering logic from `cms.tiptap.toolbar.js` to `cms.styles.js`. Simplified color menu rendering using array-based approach.	`private/js/tiptap_plugins/cms.styles.js` `private/js/tiptap_plugins/cms.tiptap.toolbar.js`
Made CMS plugins draggable and atomic	Added `atom: true` and `draggable: true` properties to CMS plugin nodes.	`private/js/tiptap_plugins/cms.plugin.js`
Updated dynamic link handling	Removed unnecessary strict mode declaration from dynamic link code.	`private/js/tiptap_plugins/cms.dynlink.js`

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.

sourcery-ai

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

Overall Comments:

Please remove the console.log statements before merging (in cms.styles.js)

Here's what I looked at during the review

🟡 General issues: 1 issue found
🟢 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 ✨

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

private/js/tiptap_plugins/cms.toolbar.js

private/js/tiptap_plugins/cms.styles.js

codecov · 2025-01-06T21:34:06Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.22%. Comparing base (182fabf) to head (f2e7495).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #51   +/-   ##
=======================================
  Coverage   81.22%   81.22%           
=======================================
  Files          17       17           
  Lines         932      932           
  Branches      104      104           
=======================================
  Hits          757      757           
  Misses        132      132           
  Partials       43       43

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

fsbraun · 2025-01-06T23:13:48Z

@sourcery-ai review

sourcery-ai

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

Overall Comments:

Consider using a more efficient comparison method than JSON.stringify() for style matching. For deeply nested styles, this could impact performance.
The HTML string concatenation in generateColorMenu and renderStyleMenu functions could be vulnerable to XSS. Consider using DOM manipulation methods or a templating library instead.

Here's what I looked at during the review

🟡 General issues: 2 issues found
🟢 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 ✨

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

private/js/tiptap_plugins/cms.styles.js

fsbraun · 2025-01-06T23:41:02Z

@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: 1 issue found
🟢 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 ✨

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

private/js/tiptap_plugins/cms.styles.js

feat: Add configurable styles

3ade985

sourcery-ai bot reviewed Jan 6, 2025

View reviewed changes

private/js/tiptap_plugins/cms.toolbar.js Show resolved Hide resolved

private/js/tiptap_plugins/cms.styles.js Show resolved Hide resolved

fsbraun added 2 commits January 6, 2025 23:52

Remove stylesSet support

248e229

fix: reduce nesting

2ad233d

sourcery-ai bot reviewed Jan 6, 2025

View reviewed changes

code simplifications

1b4b9e2

sourcery-ai bot reviewed Jan 6, 2025

View reviewed changes

private/js/tiptap_plugins/cms.styles.js Show resolved Hide resolved

private/js/tiptap_plugins/cms.styles.js Show resolved Hide resolved

fsbraun added 2 commits January 7, 2025 00:51

Fix text color options

120fe53

Add check for existence of classList in node

f2e7495

fsbraun changed the title ~~feat: Add configurable styles~~ feat: Add configurable block and inline styles for Tiptap Jan 6, 2025

fsbraun merged commit 25c019f into main Jan 6, 2025
31 checks passed

fsbraun deleted the feat/configurable-styles branch January 6, 2025 23:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add configurable block and inline styles for Tiptap #51

feat: Add configurable block and inline styles for Tiptap #51

fsbraun commented Jan 6, 2025 •

edited by sourcery-ai bot

Loading

sourcery-ai bot commented Jan 6, 2025 •

edited

Loading

Interacting with Sourcery

Customizing Your Experience

Getting Help

sourcery-ai bot left a comment

codecov bot commented Jan 6, 2025 •

edited

Loading

fsbraun commented Jan 6, 2025

sourcery-ai bot left a comment

fsbraun commented Jan 6, 2025

sourcery-ai bot left a comment

feat: Add configurable block and inline styles for Tiptap #51

feat: Add configurable block and inline styles for Tiptap #51

Conversation

fsbraun commented Jan 6, 2025 • edited by sourcery-ai bot Loading

Summary by Sourcery

sourcery-ai bot commented Jan 6, 2025 • edited Loading

Reviewer's Guide by Sourcery

Sequence diagram for style application

Class diagram for the new style system

File-Level Changes

Interacting with Sourcery

Customizing Your Experience

Getting Help

sourcery-ai bot left a comment

Choose a reason for hiding this comment

codecov bot commented Jan 6, 2025 • edited Loading

Codecov Report

fsbraun commented Jan 6, 2025

sourcery-ai bot left a comment

Choose a reason for hiding this comment

fsbraun commented Jan 6, 2025

sourcery-ai bot left a comment

Choose a reason for hiding this comment

fsbraun commented Jan 6, 2025 •

edited by sourcery-ai bot

Loading

sourcery-ai bot commented Jan 6, 2025 •

edited

Loading

codecov bot commented Jan 6, 2025 •

edited

Loading