@mindfiredigital/canvas-editor
v1.2.0
Published
rich text editor by canvas/svg
Downloads
18
Readme
Canvas Editor project uses and extends the canvas-editor-plugin, adding useful features like as table support, font size optimization, and the export of important DOM handlers. We would like to offer our heartfelt appreciation for their substantial contributions to the open-source community.
Table of Contents
Features
- Event Handling: DOM handlers were not exported so we helped exporting it so others can make use of it.
- New Feature:
- Tables: A new feature has been introduced to enable the use of tables
- Improved Font Size: The font size has been optimized to enhance readability and user experience.
Installation
npm i @mindfiredigital/canvas-editor
Usage
import {
DOMEventHandlers,
ListStyle,
ListType,
RowFlex,
} from '@mindfiredigital/canvas-editor'
<ButtonWrapper
title="bold"
handleClick={DOMEventHandlers.handleBold}>
<FormatBoldIcon />
</ButtonWrapper>
<ButtonWrapper
title="italic"
handleClick={DOMEventHandlers.handleItalic}>
<FormatItalicIcon />
</ButtonWrapper>
<ButtonWrapper
title="underline"
handleClick={DOMEventHandlers.handleUnderline}>
<FormatUnderlinedIcon />
</ButtonWrapper>
DOM Handlers
handleUndo
: This handler is responsible for undoing the previous action performed in the editor.handleRedo
: ThehandleRedo
handler allows you to redo an action that was previously undone.handleBold
: With thehandleBold
handler, you can apply or remove bold formatting to the selected text.handleItalic
: ThehandleItalic
handler enables you to apply or remove italic formatting to the selected text.handleUnderline
: This handler allows you to apply or remove underline formatting to the selected text.handleStrikeout
: ThehandleStrikeout
handler enables you to apply or remove strikeout formatting to the selected text.handleSuperscript
: With thehandleSuperscript
handler, you can apply or remove superscript formatting to the selected text.handleSubscript
: ThehandleSubscript
handler allows you to apply or remove subscript formatting to the selected text.handleFontFamily
: This handler is used to change the font family of the selected text.handleAlign
: ThehandleAlign
handler allows you to align the selected text to the left, center, or right.handleList
: With thehandleList
handler, you can create bulleted or numbered lists.setFontColor
: This handler is responsible for changing the font color of the selected text.highlightText
: ThehighlightText
handler enables you to apply or remove highlighting to the selected text.setFont
: With thesetFont
handler, you can change the font of the selected text.setSize
: This handler allows you to set the font size of the selected text.increaseFontSize
: TheincreaseFontSize
handler increases the font size of the selected text.decreaseFontSize
: ThedecreaseFontSize
handler decreases the font size of the selected text.getContent
: This handler retrieves the content of the editor.setContent
: ThesetContent
handler sets the content of the editor.createTable
: With thecreateTable
handler, you can insert a table into the editor.setTitle
: This handler sets the title of the editor.getContentStyles
: ThegetContentStyles
handler retrieves the styles applied to the content of the editor.setImage
: With thesetImage
handler, you can insert an image into the editor.createHyperLink
: This handler allows you to create a hyperlink in the editor.setHorizontalLine
: ThesetHorizontalLine
handler inserts a horizontal line into the editor.setPaperMargins
: This handler sets the paper margins of the editor.getSelectedText
: ThegetSelectedText
handler retrieves the currently selected text in the editor.insertElement
: With theinsertElement
handler, you can insert a custom element into the editor.
Contributing
This project welcomes contributions and suggestions.
License
Copyright (c) Mindfire Digital llp. All rights reserved.
Licensed under the MIT license.