More features to Steem Ultimate Editor!

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

More features added for users!

1) Post divider button!

I believe it is a painful experience to create your post without a separator between paragraphs. It is so annoying to both readers and writers in order to have a good read or let writers to properly organize their post. Steem Ultimate Editor is proud to bring you another feature that will ease your burden to create a post! Let us have a look how easy it is to create a banner!

Process of building such extension for editor :

1. First need to create event listener for the post divider extension

Separator.prototype.events = function () {
        $(document)
            .on('click', $.proxy(this, 'closeModal'))
            .on('keydown', $.proxy(this, 'remSep'))

        // When the user clicks on <span> (x), close the modal
        $('span.close')
            .on('click', $.proxy(this, 'closeModal2'));

        $("select.image-picker").imagepicker({
            hide_select: true,
            show_label: false
        });
        $("select.image-picker")
            .on('change', $.proxy(this, 'SelectSep'));

    };

2) Fires off modal window when the button is clicked

var $place = this.$el.find('.medium-insert-active');
       
        $place.addClass('medium-insert-separator');

        $place.html(this.templates['src/js/templates/core-empty-line.hbs']().trim());

        
        modal.style.display = "block";
    }

3) Closes selected modal and add to the workspace

//Selected separator in modal fire function
    Separator.prototype.SelectSep = function () {
        var $src = $(".image-picker option:selected").attr('data-');
        var $place = this.$el.find('.medium-insert-separator');
        $place.html('<center contenteditable="false"><i></center>');
        if ($src) {
            modal.style.display = 'none';
        }
    }

2) Images are now hosted on IPFS

IPFS is a distributed file system that imitate Bittorrent way of sharing data. They aspire to become the next world wide web. Not only that, image uploading through IPFS is incredibly fast and the retrieved data are intact with no corruption. This will benefit our user very much compare to steemit traditional upload to s3 bucket. Sometimes i experienced some failure in upload with no error message to be found. IPFS will be a great solution to STEEM ULTIMATE EDITOR.

const ipfsAPI = require('ipfs-api');

const ipfsHost = process.env.IPFS_HOST || 'localhost';

const ipfs = ipfsAPI('localhost', '5001', {protocol: 'http'});

function getIPFS(CID){
  return new Promise(function(resolve,reject){
    ipfs.files.get(CID, function(err,res){
      if(err){
        reject(err);
      }else{
        resolve(res);
        return res;
      }
    })
  })
}


async function uploadAndPin(buffer) {

  const resp = await ipfs.files.add(buffer);

  const hash = resp[0].hash;

  await ipfs.pin.add(hash);

  return hash;
};

Full function of Steem Ultimate Editor so far plus the added feature above :

Technology Stack

Jquery, HTML, Handlebars, Javascript

Roadmap

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

How to contribute?

-Contact me personally on discord or comment below!