feat: allow text truncation with ellipsis

[MinCrohn]

💡 Summary

Added the overflow style property to the Text component to control how text is displayed when it exceeds its content area.
You can now prevent text from breaking the layout by clipping it (hidden) or adding an ellipsis (...).

✨ Key Changes

Previously, text that was longer than its container would always overflow and remain visible (visible), which could disrupt the layout.
This update introduces the overflow option in the style property, allowing you to control this behavior.

The supported modes are:

• visible (default): Text flows outside the bounds, same as the existing behavior.
• hidden: Text exceeding the bounds is clipped and hidden.
• ellipsis: Text exceeding the bounds is truncated and replaced with ....

📖 How to Use

Set the overflow key within the style property of the Text component.

1. Ellipsis

Truncates long text with ... to maintain the layout while indicating there is more text.

{
  type: 'text',
  text: 'This is a very long text string that exceeds the width',
  style: {
    fontSize: 16,
    overflow: 'ellipsis' // Renders as 'This is a very...' if it overflows
  }
}

2. Clipping Text (Hidden)

Simply hides any text that exceeds the bounds.

{
  type: 'text',
  text: 'This is a very long text string',
  style: {
    overflow: 'hidden' // Text is cut off at the boundary
  }
}

3. Dynamic Update

You can dynamically change the overflow property using the update() method. It automatically recalculates when the container's size or margin changes.

patchmap.update({
  path: '$..[?(@.id=="text-1")]',
  changes: {
    style: { overflow: 'visible' } // Reverts to showing the full text
  }
});

✅ Notes

• This feature works in conjunction with fontSize: 'auto'. If autoFont is configured, the library will first attempt to shrink the font size to fit the container. The overflow logic is applied only if the text still overflows after reaching the minimum font size (min).

[gemini-code-assist]

Summary of Changes

Hello @MinCrohn, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the Text component by introducing a new overflow style property. This feature provides greater control over text rendering within constrained spaces, allowing text to be gracefully clipped or truncated with an ellipsis rather than disrupting the layout. This improvement ensures better visual consistency and a more polished user experience, especially when dealing with dynamic or user-generated content.

Highlights

• New overflow Style Property: Introduced an overflow property to the Text component's style, allowing control over how text is displayed when it exceeds its container.
• Text Truncation Options: The overflow property supports three modes: visible (default, text flows outside), hidden (text is clipped), and ellipsis (text is truncated with '...').
• Integration with autoFont: The new overflow logic works in conjunction with autoFont, prioritizing font size reduction before applying truncation if text still overflows.
• Dynamic Updates: The overflow property can be dynamically updated, with automatic recalculation when container size or margin changes.
• Improved Code Modernization: Replaced instances of Object.prototype.hasOwnProperty.call with the more modern and robust Object.hasOwn method.
• Comprehensive Testing: Added extensive unit tests for the Text component, specifically covering various overflow scenarios, autoFont interactions, and dynamic updates.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a valuable text overflow feature, allowing for text truncation with hidden and ellipsis options. The implementation is solid, with a new overflow property in the TextStyle schema and an efficient binary search algorithm for truncation. The addition of comprehensive tests for the new functionality is also a great contribution.

I've made one suggestion in src/display/mixins/Textstyleable.js to refactor a small piece of duplicated logic for improved code clarity and maintainability.

Overall, this is a well-executed feature enhancement.

[MinCrohn]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a valuable text overflow feature with ellipsis and hidden options. The implementation is well-done, particularly the efficient binary search algorithm for truncation and the careful state management to restore the full text when needed. The code is clean, and the refactoring to move splitText to a shared utility and modernize hasOwnProperty checks are good improvements. The addition of a comprehensive test suite for the new functionality is excellent and ensures its robustness. I have one suggestion regarding a linter configuration change, but overall, this is a high-quality contribution.