- Home /
How to bold/un-bold selected characters from an InputField using rich text by pressing a button?
Hey guys!
Currently, I am working on a note-taking-like app and I am trying to emulate what google docs or any other word processor do (i.e. have a toolbar with bold, italics, etc.. buttons that can be pressed and the selected text changes accordingly). I have been trying to design this by using the TMP_InputField
together with rich text.
Firstly, I want to give you a quick insight into what I used and what my current problem is. Getting the currently selected substring bolded was pretty easy to do. As I said, I want to achieve something like google docs therefore I decided to add the <b></b>
tags to every character in the selection. The reason I'm doing this is that I would like the user to have the freedom to bold and unbold whatever combination of character he/she wants.
The way I keep track of the selected characters is by using selectionStringAnchorPosition
and selectionStringFocusPosition
which return the start and end indices of a selection. Therefore, I just do a for loop, and for each character in the selection, I add the tags.
Now, my main problems come when I try to undo the characters who are already bolded. My main idea was to use something like String.IndexOf
and String.LastIndexOf
to get some sort of reference to the start and end tags of a character. However, the biggest problem here is if for e.g. I have the string TE, the selected text would look like: T<b><b>E
, or some sort of combination similar to this, depending on how the selection was done in the input field. This makes things a lot harder when I try to use the String methods mentioned above and adds unnecessary complexity (e.g. use Regex
or something similar in order to correct the selection).
My question is if you guys have any ideas on how to approach this because I'm stuck. I have attached my current code in case anyone needs it.
Thank you in advance!
using System;
using TMPro;
using UnityEngine;
public class NotesController: MonoBehaviour
{
private TMP_InputField _inputField;
private void Awake()
{
_inputField = transform.Find("Body/InputField").GetComponent<TMP_InputField>();
_inputField.onFocusSelectAll = false;
}
/// <summary>
/// Checks if there is any text selected. If it is then it either bolds or un-bolds the selected characters based on
/// what their current font/tags.
/// </summary>
public void MakeSelectionBold()
{
if (!IsTextSelected())
return;
var start = _inputField.selectionStringAnchorPosition; // Start index of selection
var end = _inputField.selectionStringFocusPosition; // End index of selection
// If selection is in reverse, swap indices
if (IsSelectionReversed())
{
var tmp = start;
start = end;
end = tmp;
}
// Bold every character in the selection
for (var i = start; i < end + GetSelectedText().Length * 7; i += 8)
{
_inputField.text = _inputField.text.Insert(i, "<b>");
_inputField.text = _inputField.text.Insert(i + 4, "</b>");
}
}
/// <summary>
/// Checks if the current selection is reversed or not.
/// </summary>
/// <returns>A boolean which is true if the selection was done from right to left</returns>
private bool IsSelectionReversed()
{
return _inputField.selectionAnchorPosition > _inputField.selectionFocusPosition;
}
/// <summary>
/// Checks if any characters in the <c>_inputField</c> are selected.
/// </summary>
/// <returns>
/// A boolean which is true when start index is different than the end index and false otherwise
/// </returns>
private bool IsTextSelected()
{
return _inputField.selectionAnchorPosition != _inputField.selectionFocusPosition;
}
}
Your answer
Follow this Question
Related Questions
Best 2d User Interface for Mobile and Other platforms 1 Answer
RawImage - Cannot update material's UV offset. 1 Answer
UI element not showing unless I select it in Heirachy list? Possible bug? 1 Answer
SVG UI Image Lighting gets distorted?,SVG files have distorted lighting as UI SVG Images. 0 Answers