Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add full rich text to text entry widget #21

Open
rasteric opened this issue Oct 5, 2018 · 13 comments
Open

Add full rich text to text entry widget #21

rasteric opened this issue Oct 5, 2018 · 13 comments
Assignees
Labels
blocker Items that would block a forthcoming release enhancement New feature or request

Comments

@rasteric
Copy link

rasteric commented Oct 5, 2018

I know it's a very complex control but I'd still suggest, for the future, a multiline text entry field with the following rich text features:

  • text styles bold, underline, italic; sticky and non-sticky
  • text color
  • different fonts in one field
  • paragraph alignment
  • simple inline images, for many purposes an option to add an image in a line is enough, where the surrounding text is aligned bottom, center, or top
  • "standard" import/export format: html, xml, rtf, markdown, or whatever else you think is best, but not something totally non-standard
  • custom data ranges with an option to extend them when writing text (like a sticky style) and an option for mouse callbacks/clickbacks

The last one requires explanation. An entry field should allow some way to add custom data to ranges of glyphs and some way of retrieving it by cursor position or mouse position. This is hard to implement later by a user of the library without access to the underlying implementation, because that would require one to maintain some parallel data structure and capture all edit events. If you miss one way the text might be changed, then the data structures get our of sync, so it's much better to have a way to add more functionality directly with the styled text. I'm thinking about hyperlinks, tooltips, etc.

Background: The reason I add this very general feature request is that I've seen dozens of handmade GUI libraries for various languages, and they all lack in the above functionality. So people turn to Qt or browser-based overblown solutions instead.

@rasteric rasteric changed the title Add full rich text to text entry fields Add full rich text to text entry widget Oct 5, 2018
@andydotxyz
Copy link
Member

This is a really great suggestion and we will work toward it slowly.
The canvas text object will only ever support 1 set of styles per block of text (to keep the backends simple) but we can do lots of cool stuff in Go.

The widget.Label has recently added multi line so you can see how this is started - we add (with lots of tests) the layout code and the application of styles (through an API or a markup) which will then apply to label and entry.

I agree that this is something many toolkits lack, but it is very hard to get right and keep efficient. Let's make it happen :)

@andydotxyz andydotxyz added enhancement New feature or request future Features that might take a while to be sheduled labels Oct 20, 2018
@andydotxyz
Copy link
Member

Work has also begun on the cursor handling in widget.Entry. Once that is complete we should be able to start work on how rich / marked up text be supported...

@stuartmscott
Copy link
Member

@andydotxyz I'm not sure 263a14d fixes this issue since it is concerned with select box and not entry/label. Should this issue be reopened?

@andydotxyz
Copy link
Member

Oops, that was a typo in the commit message I guess

@andydotxyz andydotxyz reopened this Mar 31, 2020
@MJacred MJacred mentioned this issue Jun 9, 2020
@carwyn
Copy link

carwyn commented Dec 22, 2020

Arguably #1447 is related to this. As mentioned there there isn't currently a mono-spaced editor widget but TextGrid is able to display mono-space. A basic example use case is a simple text editor for editing config files or perhaps as a base for a simple code editor. This would fit nicely into fynedesk much like notepad does in Windows or gedit in Gnome.

@mrjrieke
Copy link
Contributor

I've spent quite a lot of thought over the last few days on this because it's something I really need. I'm kind of trying to work with the existing fyne widgets to frankenstein what I need.

One idea I like is that content is represented by a giant slice(able) array of runes. Then the styling of the slice and (subslices) is determined by a separate index stack where for each entry in the stack it specifies the beginning index and ending index and the style to apply. That way, the edit content itself doesn't need to be broken up.

Another idea I had was playing with the idea of using a variant of GridWrapLayout to make this happen with unfortunately very ugly results (since gridwraplayout has fixed cell sizes). So, essentially a grid of Entry widgets that are arranged adjacently. The trick comes when you want to move the cursor transparently between the different entry boxes. :)

An enhanced wrapping HBoxLayout might work better since sub elements can be sized and even styled independently. Again problems with edit cursor movement between Edit elements.

@andydotxyz
Copy link
Member

Thanks for the thoughts. I just don't think we can make a good experience with multiple entry widgets.
Once we have a good API for handling rich text rendering it may be clearer how to manage the editing of it.
See #2074

@mrjrieke
Copy link
Contributor

I eagerly await the rich text solution you suggested.

@andydotxyz
Copy link
Member

andydotxyz commented Apr 4, 2021

Possible API that I have just been looking at:

var (
	RichTextStyleInline RichTextStyle
	RichTextStyleParagraph RichTextStyle
	RichTextStyleHeading RichTextStyle
	RichTextStyleSubHeading RichTextStyle
	RichTextStyleQuote RichTextStyle
	RichTextStyleURL RichTextURL
	RichTextStyleEmphasis RichTextStyle
)

type RichText struct {
	BaseWidget

	Segments []RichTextSegment
}

type RichTextSegment interface {
	TextRepresentation() string
	CanvasRepresentation() fyne.CanvasObject
}

type TextSegment struct { // would implement RichTextSegment, handles rendering text
	Text string
	Type RichTextStyle
}

type RichTextStyle struct {
	Alignment fyne.TextAlign
	ColorName ThemeColorName
	Inline    bool
	TextSize  float32
	TextStyle fyne.TextStyle
}

type RichTextURL struct {
	RichTextStyle
	URL url.URL
}

type HorizontalRuleSegment struct { // would implement RichTextSegment, just draws a line
}

@niondir
Copy link

niondir commented Jul 16, 2021

I need the same.

Looking for a Scrolling box with selectable but read-only mono-spaced text for a Log View.

A feature with ScrollToLine(n int) or SetCursorToLine(n int) would be very helpful as well to guide the user to a specific line, e.g. scroll to bottom, top or a search result inside the text.

@andydotxyz
Copy link
Member

In 2.1 we add the rich text APIs, but they will not be exposed through Entry until a future release, as the cursor management etc is more complex.

@andydotxyz andydotxyz added blocker Items that would block a forthcoming release and removed future Features that might take a while to be sheduled labels Jun 6, 2022
@bon-ami
Copy link

bon-ami commented Jul 15, 2022

I've checked for many days and could not find how to set a font for a (Rich-)Text/Entry control. Can I expect for it on a future release please? Thanks.

@andydotxyz
Copy link
Member

I've checked for many days and could not find how to set a font for a (Rich-)Text/Entry control. Can I expect for it on a future release please? Thanks.

The font used in Entry matches the rest of the app and is set by the theme. To modify the styles of items inside an entry will indeed need a rich text editor, which this ticket tracks. You can see that it is currently assigned to "Cragganmore (est Sept 2022)" which is the plan as it stands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blocker Items that would block a forthcoming release enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

7 participants