Coders, we didn't forget about you! Introducing syntax highlighting!

tngflx(63)

Published in

#utopian-io

Words

278

Reading

2 min

Listen

Play

Repository

https://github.com/tngflx/Steem-UltimateEditor

What is Steem Ultimate Editor?

Steem Ultimate Editor poised to replace markdowns with simple buttons to create a post! Creating post shouldn't be so troublesome and requires a significant amount of time on trial and error. What if I tell you, there's a tool that allows you to just click buttons in order to perform some basic and even advance customization to the style of your post? Let's have a look what Steem Ultimate Editor brought to the table this time after an improvement over the last version. Which you can check out here.

Objectives

Allow minnows or newcomers to have a more friendly environment to create posts
Significantly reduce the amount of time taken to create a post
Beautify your post within clicks!
Promoting high quality posts with future features such as source checking

Feature for the day : Syntax highlighting

Don't you wish your codes are color coded and easy on the eye to differentiate if it's a function, an integer or some html tags? It can be uneasy to spot mistakes in your pasted code. With color coding, editing your code can be much hassle free!

Color coding on the fly! Everything between triple ticks will be color coded!

Like always it worked perfectly on steemit post too! Not to mention the layout.

The hardest part of this feature is to get the caret back to where it was. For unknown reason, it always jump to the beginning of paragraph.

function rangeToPlainText(aRange) {
      // line delimiter is automatically detected by the browser
      // for each platform.
      var prettyText = window.getSelection().toString();
      var linesDelimiter = /(\r?\n)/.test(prettyText) ? RegExp.$1 : '\n';

      var text = '';
      var target = aRange.startContainer;
      if (target.nodeType == target.ELEMENT_NODE &&
          !/^(img|br)$/i.test(target.localName))
        target = target.childNodes[aRange.startOffset];

      var targets = editableNodes();
      var initialTarget = target;
      for (target of targets)
      {
        if (initialTarget) {
          if (target != initialTarget)
            continue;
          initialTarget = null;
        }

        if (target.nodeType == target.TEXT_NODE) {
          let value = target.nodeValue;
          if (target == aRange.endContainer)
            value = value.slice(0, aRange.endOffset);
          if (target == aRange.startContainer)
            value = value.slice(aRange.startOffset);
          text += value;
}