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

in #utopian-io6 years ago (edited)

Repository

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

What is Steem Ultimate Editor?


ultedtlogosmall.png

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;
}

Technology Stack

Jquery, HTML, Handlebars, Javascript

Roadmap

-Emojis (checked)
-New banner (checked)
-Chat integration?
-You name the features :)

How to contribute?

-Contact me personally on discord or comment below!

Sort:  

I love this. This is my first time seeing one of these updates. Is image uploading an included feature? I’m building some apps that are front-ends for the blockchain. I’m interested in using your editor for post composition. So far I’m using simpleMDE and it’s pretty good.

Yes I integrated with ipfs! Thanks for your interest! Well once I released it, I'll let you know. Right now, I'm trying to add more features to it before I really launch it. I'm thinking of adding dictionary, todo list feature and etc.

Awesome 👏🏾 I’ll be watching out for it.

Thank you for your contribution. Its a good feature to have but is the Editor supports all type of languages?

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

It support the major languages for now. For example js, ruby, php. This is actually based on the highlight js library. The common languages are supported there.

Hey @tngflx
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by Felix at(tngflx) from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

This post has been curated by TeamMalaysia Community :-

To support the growth of TeamMalaysia Follow our upvotes by using steemauto.com and follow trail of @myach

Vote TeamMalaysia witness bitrocker2020 using this link vote for witness