OnePlace release v0.4.6: posting editor and more

in utopian-io •  6 months ago


Project description

OnePlace is a web-application built on Steem and Golos blockchains. As a basis we took Vue.js with SSR module for frontend and LoopBack for backend. Our project is fully open-source under MIT license.

Technology stack: Node.js, Vue.js, Loopback, Redis, MySQL


Latest release on GithubInstallation guide

New Features

1. Posting editor

View commit

Our posting editor was developed specially for OnePlace on the basis of open-source SimpleMDE Markdown Editor. SimpleMDE was chosen due to its ability to handle both html and markdown formatting and built-in fullscreen preview option featuring two panel layout with code and preview panels. This was one of our basic requirements for the editor, since we wanted to avoid scrolling up and down to check post preview and edit, then check again and edit etc.

OnePlace editor in fullscreen mode

But the basic editor of course was not enough as we wanted to improve UX and add more functionality.

  • At first we reworked the editor layout. Visually we wanted something more Medium-esque with lots of white space and no visual borders. Hence we moved the editor toolbar to the left side and arranged it vertically, the post settings were in turn hidden inside the dropdown menu in a fixed position header, freeing a lot of space and presenting a large whiteboard for post author.


  • Then we needed to add image uploads as this functionality is one of the most sought-after by the users. This was done by implementing private file storage with directory tree data structure. The editor can handle both drag-and-drop and uploading files from a device.
    The limitations for stored images are defined as follows:
    const MAX_UPLOAD_SIZE = 4 * 1024 * 1024
    const MAX_UPLOAD_SIZE_GIF = 20 * 1024 * 1024
    const MAX_IMAGE_WIDTH = 1680
    const MAX_IMAGE_HEIGHT = 1200
    Larger images are resized prior to storage to fit width and height limits.


  • While basic formatting of Steem posts is based on markdown, advanced styling that includes html can be used to format images and text layout. We do not believe that everyone must know html, and besides even advanced users get tired of copying and pasting elements manually, so we decided to extend formatting functionality and add html elements for aligning text and images. This was implemented by attaching a formatting dropdown menu in the editor toolbar.
    This menu allows to add <center> for centering text or image, <div class="text-justify"> for justified text, as well as <div class="pull-left"> and <div class="pull-right"> that align images or text block to one half of the screen. Also text indentation and horizontal line elements can be added here.

  • Last but not the least comes the possibility to save post drafts. While SimpleMDE already had autosaving feature we added ability to save and manage multiple drafts with the Drafts menu. Before publishing the user has to add at least one category tag and select payout preferences in the Publish menu.

    Drafts menu

2. SteemConnect support

View commit

Now it is possible to transfer posting permission to application using a trusted 3rd party intermediary SteemConnect. The users are then redirected back to confirm account access. More info: How to add accounts with SteemConnect.


3. Minor updates in this release


If you would like to contribute please contact @ubik in SteemDevs Chat or just comment on this post.

Posted on - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

it is interesting

Congratulations! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Hey! Thank you for the great work you've done!

We're already looking forward to your next contribution!

Fully Decentralized Rewards

We hope you will take the time to share your expertise and knowledge by rating contributions made by others on to help us reward the best contributions together.

Utopian Witness!

Vote for Utopian Witness! We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

Want to chat? Join us on Discord