Wysimark Documentation

Wysimark is a rich text editor for Markdown that provides full support for the CommonMark and GFM (GitHub Flavored Markdown) specifications.

Key features include support for:

• Tables
• Check lists
• Images
• Emojis
• Attachments

Wysimark is a rich text editor for Markdown that supports 100% of the CommonMark and GitHub Flavored Markdown (GFM) specifications. The standalone version is designed for use in vanilla JavaScript or TypeScript environments.

Key features include:

• Markdown Compatibility: Full support for tables, task lists, code blocks with syntax highlighting, and nested block quotes.
• Media Support: Built-in image and file uploading, drag-and-drop, and pasting, powered by Portive's serverless backend.
• Advanced Image Handling: Cloud-based resizing and optimization, including drag-to-resize and preset size options (fixed width or fractional).
• Usability: Responsive toolbar, keyboard shortcuts (OS-specific), and integrated emoji picker.

Wysimark is a rich text editor for Markdown designed specifically for React.js applications. It provides 100% compatibility with CommonMark and GitHub Flavored Markdown (GFM) specifications, ensuring accurate bi-directional conversion between Markdown text and rendered output.

Key features include:

• Full Markdown Support: Tables, task lists, code blocks with syntax highlighting, nested block quotes, and more.
• Advanced Media Handling: Built-in support for image and file uploads (via Portive), drag-and-drop, and pasting images directly into the editor.
• Cloud-based Image Optimization: Automatic resizing and optimization of images in the cloud via a high-speed CDN.
• Intuitive UX: Toolbar with tooltips, keyboard shortcuts (OS-specific), sticky dropdown menus, a quick-pick table builder, and an integrated emoji picker.

Wysimark is a rich text editor designed for Markdown. It provides 100% support for CommonMark and GitHub Flavored Markdown (GFM) specifications. It is suitable for startups and greenfield projects and can be used commercially under its open-source license.

Key features include:

• Markdown Support: Full CommonMark and GFM, including tables, task lists, nested blockquotes, and code blocks.
• Media & Files: Image uploads (with server-side resizing support), file uploads, and an emoji picker.
• Integrations: Available for React, Vue, and standalone JavaScript/TypeScript environments.

Wysimark is a rich text editor for Markdown that provides full support for the CommonMark and GitHub Flavored Markdown (GFM) specifications. It includes built-in support for advanced Markdown features such as:

• Tables
• Check lists
• Images
• Emojis
• Attachments

Wysimark provides 100% Markdown feature support, including:

• Text Styling: Bold, italic, and inline code.
• Blocks: Heading and paragraph blocks, code blocks with syntax highlighting, and nested block quotes.
• Lists: Ordered lists, unordered (bullet) lists, and task lists (checklists), including support for nesting and mixing different list types.
• Tables: Full table support with a Quick Pick Table Builder.
• Media: Images (with uploading and resizing) and file attachments.
• Links: Links with detailed viewing and editing capabilities.
• Other: Inline code and emoji support via an integrated emoji picker.

Wysimark is a rich text editor for Markdown designed specifically for Vue.js applications. It provides 100% compatibility with CommonMark and GitHub Flavored Markdown (GFM) specifications, ensuring accurate bi-directional conversion between Markdown text and rendered content.

Key features include:

• Full Markdown Support: Tables, task lists, nested checklists, code blocks with syntax highlighting, and more.
• Advanced Media Handling: Integrated image and file uploading via Portive, featuring cloud-based resizing and optimization.
• User-Centric UI: Responsive toolbars, keyboard shortcuts (OS-specific), and intuitive menus (including a table builder and emoji picker).
• Modern Design: A contemporary interface that adapts to different screen widths (Wide, Medium, and Narrow layouts).

Wysimark supports both standard Markdown syntax and familiar word-processor keyboard shortcuts. Shortcuts are OS-specific (Windows/Linux vs. macOS).

Markdown Syntax

• **text** for bold
• # heading for headings
• Other standard CommonMark/GFM syntax.

Keyboard Shortcuts

• Bold: CTRL+B (Windows/Linux) or CMD+B (Mac).
• Heading: CTRL+SHIFT+1 (Windows/Linux) or CMD+OPT+1 (Mac).

The core of any Sink Plugin is the PluginCustomTypes declaration. This object defines the unique identity and the data structures (Editor, Element, and Text) that the plugin will operate on. Every plugin must define these four properties:

1. Name: A string literal that uniquely identifies the type.
2. Editor: The specific version of the Editor object the plugin uses. This must extend BaseEditor and can include additional properties (e.g., ReactEditor or custom properties like supportsAnchor: true).
3. Element: The schema for the Element types used by the plugin.
4. Text: The schema for the Text types used by the plugin.

type AnchorCustomTypes = {
  Name: "Anchor"
  Editor: BaseEditor & ReactEditor & { supportsAnchor: true }
  Element: { type: "anchor"; href: string; children: { text: string }[] }
  Text: { text: string }
}

Wysimark provides a dedicated interface for managing links within the editor:

• Viewing Details: Clicking a link opens a dialog showing the website domain, link path, and tooltip.
• Editing: From the details dialog, users can click the 'Edit Link' icon to modify the URL or the tooltip text.
• Deletion: Users can delete links directly from the details dialog using the provided icons.

The Wysimark toolbar is designed for high discoverability and responsiveness:

• Responsive Layouts: The toolbar dynamically adjusts based on available width:
  • Wide: Full button set.
  • Medium: Merges 'Insert for table', 'images', 'attachments', and 'emoji' into a single button.
  • Narrow: Merges 'bold' and 'italic' into a single 'styles' button.
• Tooltips: Hovering over toolbar buttons displays helpful tooltips and OS-specific keyboard shortcuts.
• Sticky Dropdown Menus: Menus stay open while hovering over other menu buttons, mimicking OS behavior. They include icons, hints, and device-specific shortcuts.
• Quick Pick Tools: Includes a flyout for selecting table rows/columns and an integrated emoji-mart Emoji Picker.