@wysimark/react
Advanced tools
A modern and clean rich text editor for React that supports 100% of CommonMark and GitHub Flavored Markdown.
Readme
Wysimark supports 100% of the CommonMark and GFM Markdown spec.
It has clean modern design, great usability, and features serverless image and file uploads with image resizing.
This version of Wysimark is for React.js. There is also a standalone version and a version for Vue.js
Learn more about the Wysimark Markdown Editor at the Wysimark Editor Home Page.
Read the Getting Started Guide and API Reference for the Wysimark Editor for React.
** for bold, # for a heading.CTRL+B (Windows, Nix) or CMD+B (Mac) for bold, CTRL+SHIFT+1 (Windows, Nix) or CMD+OPT+1 (Mac) for a heading.Hovering over the toolbar displays helpful tooltips and keyboard shortcuts. Window, Linux and Mac each get their own OS specific shortcuts following the conventions of each operating system.
Menus stay closed until they are clicked open and then they stay open as you hover over other menu buttons. This makes discoverability in menus fast, easy and it works like your operating system. Drop down menus show icons, hints and device operating system dependant shortcuts.
Use the flyout to quickly select how many rows and columns in your table.
Integrates the emoji-mart Emoji Picker.
Wysimark supports image and file uploading using Portive, a service created by the creator of Wysimark to an Amazon AWS S3 Bucket. Wysimark supports three intuitive ways to upload images to Wysimark.
Click the image or attachment icon in the toolbar then select an image from your computer to upload it.
Drag and drop files from Windows Explorer the Mac Finder or your operating system's equivalent directly into editor to start uploading.
Copy and paste images from anywhere in your operating system directly into the editor to start uploading.
Grab a resize handle on the image and drag to resize.
The current width and height of the image are shown as you drag.
An image, resized and optimized in the cloud, will be delivered to the user based on the final width and height.
You can provide a set of preset shortcuts to your users with fixed bounds that users can click.
In this example, we provide S, M and L sizes and M is set to have bounds of 320x320. Based on this image, the preset value shows 320x213.
You can also provide a set of preset shortcuts to your users with fractional sizes that users can click. This is useful, for example, if a user takes a screenshot in a high DPI device (e.g. 2x) and the use wants to resize it to exactly half the uploaded size so as to maintain a 1 to 1 size in the editor.
Supports nested checklists. Supports toggling of checklists by clicking on them.
Supports mixing of numbered, bullet and checklists.
Supports nesting of block quotes through the toolbar menu. Selected block quote indent and outdent content. Fully supports all content type in block quotes like lists, tables and images.
Click a link in the editor to see its details, like the website domain, link path, and tooltip. Want to change or delete the link? Use the icons at the top of the dialog.
When Viewing Link Details click the "Edit Link" icon to edit the link. You can easily edit the URL and tooltip text for any link.
The Wysimark Toolbar dynamically adjusts the layout of its buttons depending on the width of the available space. Works with full screen editing all the way down to narrow devices in portrait mode or thinner web forms.
Insert for table, images attachments and emoji are merged into one button.
The bold and italic styles are merged into the styles button.
Built-in support for syntax highlighting in code blocks.
FAQs
A modern and clean rich text editor for React that supports 100% of CommonMark and GitHub Flavored Markdown.
The npm package @wysimark/react receives a total of 377 weekly downloads. As such, @wysimark/react popularity was classified as not popular.
We found that @wysimark/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.