twitter-archive / rtltextarea Goto Github PK

Automatically detects RTL and configures a text input

License: MIT License

JavaScript 95.54% CSS 3.59% HTML 0.88%

rtltextarea's Introduction

RTLtextarea

Automatically detects RTL (right-to-left) languages and appropriately configures the text input, without having to manually specify CSS direction or dir property on page load. Allows automatic switching between LTR and RTL languages.

What it does

This module will set the direction of a textarea to RTL when a threshold of RTL characters has been reached (rtlThreshold). It also applies Twitter- specific RTL rules regarding the placement of @ signs, # tags, and URLs.

Before:

After:

How to use

Bind keyup and keydown to RTLText.onTextChange. If you have initial text, call RTLText.setText(textarea, initial_string) to set markers on that initial text.

  $(document).ready(function(){
    var $textarea = $('#someTextarea');
    $textarea.on('keyup', RTLText.onTextChange);
    $textarea.on('keydown', RTLText.onTextChange);
    RTLText.setText($textarea.get(0), $textarea.val());
  });

When storing or submitting the text, make sure to extract the unicode markers first:

  var textToSubmit = RTLText.cleanText($("#someTextarea").val());

Get the length of the text minus the control characters:

  var textLength = RTLText.textLength($("#someTextarea").val());

Add markers to a string without affecting the text box:

  var stringWithMarkers = RTLText.addRTLMarkers(string);

Versioning

We use semantic versioning, as described here: http://semver.org/

Releases are numbered and constructed with the following guidelines:

Breaking backwards compatibility bumps the major
New additions without breaking backwards compatibility bumps the minor
Bug fixes and misc changes bump the patch

Testing

Tests use Jasmine and PhantomJS.

Before running the tests for the first time, install the required packages by typing: npm update.

After the packages are installed, you can run the tests by typing: npm test.

Authors

Naoki Takano

Esten Hurtle

License

Licensed under the MIT License

rtltextarea's People

Contributors

Stargazers

Watchers

rtltextarea's Issues

'twttr' is not defined

The variable twttr is not defined. I suppose that it is loaded in a Twitter library.

It would be nice to make this library independent of Twitter code.

Arabic string not switching to RTL

This string:

أنا عربي

is in Arabic (it says 'I'm Arab'), and does not seem to work as in:

http://jsbin.com/ifiyit/6/edit

The result of calling JavaScripts native escape() passing the previous string to it was:

%u0623%u0646%u0627%20%u0639%u0631%u0628%u064A

Interestingly, it works on twitter tweet box though.

RTLTextarea not working properly or is it correct?

I have built a jsfiddle on http://jsfiddle.net/un92atkn/ , if you enter some arabic text in it, it works great. But when you split an arabic word with 2 spaces and in the middle of the spaces you enter a hash tag followed by a latin character, the caret position jumps to the end of the text. Is this behavior ok or not?

For example. If I enter the word: الجديدة

When I move my cursor to the center and add 2 spaces and move the cursor to the middle of the two spaces and enter a hashtag followed by a character [a-z] , the caret jumps to the end.

getting notification when direction is changed

Hi,
I wanted to trigger some event when textarea's direction is changed by this lib. Is it possible now?

can I create a pr for this?

The entire library is worthless

Since there's no individual handling of sentences this whole library can be replaced with a single line:

<textarea dir="auto" /> Reported by @tomer.

Should support inputs which do not themselves support selection

SelectionStart and other selection props are used throughout, however this makes the lib incompatible with anything except: Text, search, url, tel, and email types.

See: https://html.spec.whatwg.org/multipage/forms.html#input-type-attr-summary

Ideally it'd smoothly degrade for other types.

rtlHashtag, oldText and getSelection don't seem to be used

JSHint reports the variables rtlHashtag and oldText and the function getSelection() as defined, but never used. It seems to be correct - they aren't used in their scope in the RTLtext function. They should probably be removed, but I may be missing something.

shouldBeRTL function with weird length?

In the shouldBeRTL function the urlMentionsLength measures the length of the url and the mentions so it can be removed from the actual length for determining which characters are rtl or not. But there is also a + 1 and a + 2, can anybody explain why that is? For the length of a mention it could be the extra @ sign, but for the url I can't find a valid explanation.

for (i = 0; i < mentionsLength; i++) { 
    urlMentionsLength += mentions[i].screenName.length + 1; 
}

for (i = 0; i < urlsLength; i++) { 
  urlMentionsLength += urls[i].url.length + 2; 
}