## Repository
https://github.com/knacksteem/knacksteem.org 

## Pull Request 
https://github.com/knacksteem/knacksteem.org/pull/52  

![](https://cdn.steemitimages.com/DQmb7UCWRabcT2KgHhc5S7V63kmUKvRJFJPku4rT1mz4XFG/image.png)

![](https://cdn.steemitimages.com/DQmZ6ojCkGKVN8MkYjQkjoJBMB4Bgz5XhFSYNYeWvFfioUd/image.png)

This Pr add a new Editor in the knackSteem Project, The editor accepts functionalities like drag and drop, File clicking, Pasting files. Also a refactor of the App layout to add the side bar component through out the application.

## What did i use?
Building this Editor, the following packages were used

1. React-dropzone
2. React-hotkeys

React dropzone was used to handle drag and drop events on the editor, while React hotkeys was used to handle key events on the editor.


 

```js
insertAtCursor = (before, after, deltaStart = 0, deltaEnd = 0) => {
if (!this.input) return;
const startPos = this.input.selectionStart;
const endPos = this.input.selectionEnd;
this.input.value =
this.input.value.substring(0, startPos) +
before +
this.input.value.substring(startPos, endPos) +
after +
this.input.value.substring(endPos, this.input.value.length);
this.input.selectionStart = startPos + deltaStart;
this.input.selectionEnd = endPos + deltaEnd;
};

```

The above method insert at the cursor position in the text editor, simply by getting the starting and ending position of the cursor.
```
 
handlePastedImage = (e) => {
if (e.clipboardData && e.clipboardData.items) {
const items = e.clipboardData.items;
Array.from(items).forEach((item) => {
if (item.kind === 'file') {
e.preventDefault();

this.setState({
           imageUploading: true,
});

const blob = item.getAsFile();
this.props.onImageInserted(blob, this.insertImage, () =>
this.setState({
             imageUploading: false,
}),
         );
}
});
}
};
```
The above code handle pasted images screenshot on the editor, which is gotten from the clipboard.

## Issue
https://github.com/knacksteem/knacksteem.org/issues/34

## Task Request
https://steemit.com/knacksteem/@knowledges/development-task-request-help-build-knacksteem-front-end-800-steem-bounty 

## What's next?
The next pull for this task will be a refactor of the Editor area and to add a toggle side bar across the application for moderation functionality and basic navigation.  In the future, i will also like to add draft functionality on the editor.

## Commits 
https://github.com/knacksteem/knacksteem.org/pull/52/commits/2aca5f82e88279eeb3bb70c1cad29e97776e546d

https://github.com/knacksteem/knacksteem.org/pull/52/commits/7220c5d708ad666a7015cb427822f7befb7f612f

https://github.com/knacksteem/knacksteem.org/pull/52/commits/3e1f911654a13cf297e6eda25b45f6aaed705270

https://github.com/knacksteem/knacksteem.org/pull/52/commits/7ee61675f1395e84f8ff25a4debaa10d2c89979b

https://github.com/knacksteem/knacksteem.org/pull/52/commits/463d719b6ad6cbb130326f2370f549f9d823b397 

## Github Account
https://github.com/ogbiyoyosky