drafty.js

Basic parser and formatter for very simple text markup. Mostly targeted at mobile use cases similar to Telegram, WhatsApp, and FB Messenger.

Supports conversion of user keyboard input to formatted text:

  • *abc* → abc
  • _abc_ → abc
  • ~abc~ → abc
  • `abc` → abc
Also supports forms and buttons. Nested formatting is supported, e.g. *abc _def_* -> abc def URLs, @mentions, and #hashtags are extracted and converted into links. Forms and buttons can be added procedurally. JSON data representation is inspired by Draft.js raw formatting.
Version:
  • 0.15
Copyright:
  • 2015-2018 Tinode
License:
  • Apache 2.0
Source:

Example

Text:
<pre>
    this is *bold*, `code` and _italic_, ~strike~
    combined *bold and _italic_*
    an url: https://www.example.com/abc#fragment and another _www.tinode.co_
    this is a @mention and a #hashtag in a string
    second #hashtag
</pre>

 Sample JSON representation of the text above:
 {
    "txt": "this is bold, code and italic, strike combined bold and italic an url: https://www.example.com/abc#fragment " +
            "and another www.tinode.co this is a @mention and a #hashtag in a string second #hashtag",
    "fmt": [
        { "at":8, "len":4,"tp":"ST" },{ "at":14, "len":4, "tp":"CO" },{ "at":23, "len":6, "tp":"EM"},
        { "at":31, "len":6, "tp":"DL" },{ "tp":"BR", "len":1, "at":37 },{ "at":56, "len":6, "tp":"EM" },
        { "at":47, "len":15, "tp":"ST" },{ "tp":"BR", "len":1, "at":62 },{ "at":120, "len":13, "tp":"EM" },
        { "at":71, "len":36, "key":0 },{ "at":120, "len":13, "key":1 },{ "tp":"BR", "len":1, "at":133 },
        { "at":144, "len":8, "key":2 },{ "at":159, "len":8, "key":3 },{ "tp":"BR", "len":1, "at":179 },
        { "at":187, "len":8, "key":3 },{ "tp":"BR", "len":1, "at":195 }
    ],
    "ent": [
        { "tp":"LN", "data":{ "url":"https://www.example.com/abc#fragment" } },
        { "tp":"LN", "data":{ "url":"http://www.tinode.co" } },
        { "tp":"MN", "data":{ "val":"mention" } },
        { "tp":"HT", "data":{ "val":"hashtag" } }
    ]
 }

tinode.js

SDK to connect to Tinode chat server. See https://github.com/tinode/webapp for real-life usage.
Version:
  • 0.15
Copyright:
  • 2015-2018 Tinode
License:
  • Apache 2.0
Source:

Example

<head>
<script src=".../tinode.js"></script>
</head>

<body>
 ...
<script>
 // Instantiate tinode.
 const tinode = new Tinode(APP_NAME, HOST, API_KEY, null, true);
 tinode.enableLogging(true);
 // Add logic to handle disconnects.
 tinode.onDisconnect = function(err) { ... };
 // Connect to the server.
 tinode.connect().then(() => {
   // Connected. Login now.
   return tinode.loginBasic(login, password);
 }).then((ctrl) => {
   // Logged in fine, attach callbacks, subscribe to 'me'.
   const me = tinode.getMeTopic();
   me.onMetaDesc = function(meta) { ... };
   // Subscribe, fetch topic description and the list of contacts.
   me.subscribe({get: {desc: {}, sub: {}});
 }).catch((err) => {
   // Login or subscription failed, do something.
   ...
 });
 ...
</script>
</body>