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
- React-dropzone
- 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
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.