Update--- KnackSteem Editor and Refactor of the sidebar component across the Application

Repository

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

Pull Request

https://github.com/knacksteem/knacksteem.org/pull/52

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.

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