Streambits Contact
Home Productivity Developers Custom Solutions News Contact
In the Works: Collea Alpha 3
collea in the works products

We are delighted to have just released our third major alpha release of Collea, our productivity platform, to our internal testers. In this blog post we cover all the exciting new features and go over some bug fixes as well!

Highlights

The goals for our Alpha 3 release centered around:

  1. Improving the overall messaging experience of Collea
  2. Design refinements
  3. Addressing feedback and identified issues from Alpha 2

Messaging Improvements

In Alpha 3 we wanted to invest in improving the messaging experience, making the editor more sophisticated and adding functionality to enable you to express your thoughts, emotions, or current status.

Emojis

Emojis are useful for conveying emotion, actions, or miscellaneous information. Feeling happy? There is an emoji for that. Travelling? There are emojis for that. Hungry? Yes, even for that too.

To support emojis, we implemented two different systems for searching and adding emojis to the editor. Both of these systems have a unified codebase for adding emojis into the current editor, enabling us to intelligently and consistently insert the emoji at the current editor position and even automatically split and update Markdown-syntax text.

Emoji Selector
2020/05/Collea Alpha 3 Emoji Selector

The most prominent way to browse and select emojis is our Emoji Selector. This is a dedicated “popover” window that organizes Emojis by category, allowing you to jump to or collapse categories, as well as quickly filter for specific emojis. This system is useful when you aren’t quite sure what you want to add, when you want to add multiple emojis with a few quick clicks, or you’re using a touch-driven device such as a mobile device.

Emoji Type-Ahead
2020/05/Collea Alpha 3 Emoji Type Ahead

The other prominent way to search for and select emojis is our Emoji Type-Ahead user experience. This is a keyboard-driven method that enables your hands to never leave the keyboard to look for and add an emoji. This can be triggered when typing the colon symbol (:), following by your search term. When you find the right emoji, you can use either the Tab or Enter key (handy on mobile) to pick the right one.

You can also use the left and right arrow keys to navigate on the Type-Ahead section, so if you started typing an emoji referenced by “smilehearts”, you could start typing :smi then use the right arrow key to navigate over to it!

If you are on a device with a mouse or touchpad, you can also scroll up or down on the horizontal list of emojis to see more of them!

Markdown Support

Alpha 3 introduces partial Markdown support using a custom Markdown parser. We decided to go the direction of a custom Markdown parser for various reasons, such as maximizing flexibility and minimizing third-party library usage.

We had originally looked into existing JavaScript-based Markdown Parsers and even some custom editors, however they didn’t quite meet our standards.

Existing Solutions

Showdown

Showdown is a Markdown to HTML converter used by Google Cloud Platform, Meteor, and Stackexchange. This converter has a fairly comprehensive API and while it is a fantastic solution when you want full Markdown specification compliance, it lacks the ability to disable a significant portion of the specification. Some examples of parts of Markdown specifications (whether based on John Gruber’s specification or GitHub Flavored Markdown) that we don’t wish to support are:

  1. Headers - These cannot be disabled outright in Showdown. You can only specify the starting point (like header level 3).
  2. Images - We have Smart Files and Smart Links that provide a curated image viewing and embedding experience
  3. Links - We automatically generate Smart Links as well as perform link generation, so this part of the specification isn’t desired.
  4. Horizontal Rules

Expanding on this, various features such as strikethroughs and underlines are disable by default, experimental, or use syntax that deviate from our standards. The library is about 24KB, which a significant amount is in support of features or functionality we are unlikely to utilize (tables, “smart indent”, GitHub mention conversions, document metadata generation, etc.).

Markdown-it

Markdown-it is a Markdown parser that follows the CommonMark specification, provides a plugin-based architecture, and has an API that facilitates the ability to start with all Markdown rules disabled by default and then subsequently enable specific rules. This was initially quite promising at first look however utilizing it with a superset of JavaScript such as Typescript turned out to not be ideal given how we use TypeScript.

TypeScript provides numerous benefits and features that we take advantage of, such as namespaces and static typing. Static typing enables us to catch common type-related errors during compile-time effortlessly, while namespaces allow us to organize code and set it in the “global” namespace.

As some background, Collea’s JavaScript is currently compiled using TypeScript’s ECMAScript 6 (ES6) module code generation, with TypeScript’s “classic” module resolution strategy, and then compressed using terser. While it is on our roadmap to likely switch the codebase over to using the “Node”-mimicked module resolution, our goal when writing client-side code such as TypeScript is to minimize the use of nodejs, network dependencies, and third-party dependency management tools like Yarn. To that end we actually use our own statically compiled project manager to build all Streambits technology, so until we are able to adopt JavaScript bundling utilities that aren’t node-based (preferably a compiled binary), there are some technologies we aren’t ready to adopt yet (e.g. Asynchronous Module Definition, CommonJS, SystemJS, UMD).

Unfortunately, the definition files for markdown-it are outdated and require Node-based resolution, so using markdown-it isn’t feasible even if it fulfilled all our requirements.

In terms of features, markdown-it comes in at a heavy 70KB compressed, which is over half the size of the entire client-side Collea codebase. This is not including plugins we would need to add to be on par with desired features we’d want to add in the future, such as task list syntax, the intended merged HTML and Markdown that we perform (we will get into that later), nor the obvious code we’d need to write in Collea to integrate markdown-it.

Marked.js

Marked is Markdown parser “built for speed” and offers an almost limitless level of renderer flexibility. You are able to disable numerous features, tie into DOM sanitization libraries like DOMPurify (which we use in our editor and Message parser), and effectively override any of the block and inline level renderer methods, such as for code blocks, headers, lists, tables, bold tags, and more.

Unfortunately, we would’ve needed to implement a shared tokenizer method and override almost all of the existing tokenizer methods to get the Markdown parsing aligned with our standards, not including the 66KB size of the compressed library itself. These aspects in conjunction with an outdated TypeScript definition file (which would’ve taken considerable work to update to match the current Marked.js API) simply made it unsuitable for our use.

Our Solution

All the examples described are fantastic solutions depending on what your requirements are. For Collea, our goal is to support a subset of the Markdown specification, as well as some syntax for superscript and subscript that isn’t in the John Gruber Markdown specification. This solution needed to enable not just the converting of Markdown into HTML where supported, but retain the Markdown syntax itself to make it easy to modify or revert.

For example, all the solutions we highlighted above would’ve converted **hello world** into <strong>hello world</strong>. This is pretty reasonable for most usecases, and we in fact have a similar mechnism to strip out the syntax when we are using the same parser for Messages, however in the editing process we want the syntax retained, so the HTML itself would look like<strong>**hello world**</strong>.

The Markdown parser needed to balance being flexible enough to be used in specific scenarios, in our editor and our Message text, as well as being tightly integrated into our editor when necessary to ensure real-time previewing. So we set out to achieve that and devised a solution to start supporting Markdown, starting with:

We are already in the process of implementing underscore, superscript, and subscript for Alpha 4 as well. The plan beyond Alpha 4 is to introduce blockquote and codeblocks as well.

For paragraphs and new lines, we actually don’t follow the Markdown specification, since we want to ensure both are usable without Markdown, such as a good ol’ “plain text” message. Paragraphs and new lines are retained as-is (using the CSS white-space attribute).

2020/05/Collea Alpha 3 Parsed Markdown

Design Refinements

2020/05/Collea Alpha 3 New Editor

Design is an always evolving, iterative process. In Alpha 3, we spent time refining Collea’s design, lessening our usage of rounded edges and maximizing the editor space.

The editor saw various refinements, such as a new Function Strip that provides a unified location for our primary controls (emoji selection and file attachment buttons), a brand new character counter, file attachment components, and the Emoji Type-Ahead functionality.

The Room banner saw minor tweaks, moving the user button next to the menu button and centering the Room’s Name. In a future release we will be adding Room descriptions to show below the Room’s Name, as well as make both of them dynamically editable.

Feedback and Bug Fixes

Alpha 3 squashed some bugs and addressed feedback provided by internal testers.

  1. There is now a character limit of 8000 and we will prevent sending messages larger than that. The character counter in the editor’s Function Strip will turn red and indicate the error if the limit is exceeded.
  2. Various issues around creating, sending, and rendering multi-line messages were resolved.
  3. Several button alignment issues were fixed on mobile.
  4. Smart Links with empty image previews will no longer attempt to render an empty image.

Want to learn more?

We are excited about building products and services that keep you and your team productive. If you’re excited as we are, click here to learn more about Collea and sign up to be notified when we roll out early access invites!