Convert Text to Text with Smiles during user typing

Question

I try solve this problem. I have bindable richTextBox for Text and Document properties, this control is derived from richTextBox from Extended WPF Toolkit.

My scenario is : User is typing some text to richTextBox, if he wrote text emoticons I want convert this text emoticons to image emoticons and show him in richTextBox.

For example: Hello world :) -> Hello world IMAGE_SMILE

I have own class which convert string with emoticons to type of Paragraph with text and images.

Here ist it:

public Paragraph ConvertToMessageWithEmoticons(string rpText){...}

In WPF app I bind properties on Text and Document properties of richTextBox control.

    //bind on Text property of richTextBoxControl
    public string RtbText
    {
        get { return _rtbText; }
        set
        {
            _rtbText = value;
            NotifyPropertyChanged("RtbText");
        }
    }

    //bind on Document property of richTextBoxControl
    public FlowDocument RtbFlowDocument
    {
        get { return _rtbFlowDocument; }
        set
        {
            _rtbFlowDocument = value;
            NotifyPropertyChanged("RtbFlowDocument");
        }
    }

I use Reactive Extensions for .NET (Rx) and make Observer on property RtbText

        Observable.FromEvent<PropertyChangedEventArgs>(this, "PropertyChanged")
            .Where(e => e.EventArgs.PropertyName == "RtbText")
            .Select(_ => this.RtbText)
            .Where(text => text.Length > 1)
            .Do(AddSmiles)
            .Throttle(TimeSpan.FromSeconds(500))
            .Subscribe(AddSmiles);

My problem is how elegant replace text with smiles to text with emoticons. I try this:

   private void AddSmiles(string text)
   {
        Paragraph paragraph = _smileConverter.ConvertToMessageWithEmoticons(RtbText);

        RtbFlowDocument.Blocks.Clear();

        RtbFlowDocument.Blocks.Add(paragraph);
   }

I try check on smiles only 3 last characters of RtbText, but if is user typing property RtbText is still change.

Any advice how replace text to text with smile during user typing?

score 1 · Answer 1 · answered Jan 20 '11 at 17:46

I've implemented classes like this before (closed source though otherwise I'd share). The tricky part is managing the position of the caret when the user hits backspace - cause then you need to convert the Smiley back to the :-, while handling the edge cases (beginning/end of paragraph, document, etc)

score 0 · Answer 2 · answered Jan 07 '11 at 16:12

0

If you get the carret position you can look for the characters around the carret (the previous 3 and the next 3) when the text changes.

answered Jan 07 '11 at 16:12

dcarneiro

7,060
11
51
74

Convert Text to Text with Smiles during user typing

2 Answers2