/md-wysiwyg-editor

Markdown WYSIWYG Editor is a simple web rich-text/WYSIWYG markdown editor.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Markdown WYSIWYG Editor

Markdown WYSIWYG Editor is a simple web rich-text/WYSIWYG markdown editor written in JavaScript, HTML, and CSS. It is a progressive web app (PWA) made with TinyMCE 5 and EasyMDE, various markdown–HTML conversion engines (markdown-it, Turndown, and Showdown), and the new Native File System (NFS) API (credit to Google's demo Text Editor code). Currently in a developmental stage—use cautiously if at all!

Launch

➡ Launch with example file

➡ Launch with new/blank file

Use the markdown button in the toolbar for markdown mode (full-width or split-screen).

Note the web browser requirements for the editor to have full functionality.

Screenshots

WYSIWYG Editing Mode (Light Mode)

WYSIWYG Editing Mode (Dark Mode)

Markdown Editing Mode (Light Mode)

Markdown Editing Mode (Dark Mode)

Split-Screen Editing Mode (Light Mode)

Split-Screen Editing Mode (Dark Mode)

WYSIWYG Editing Mode (Mobile—Android 11)

Light Mode Dark Mode

Requirements

The web browser must be up-to-date and have the Native File System API enabled (e.g., in Google Chrome flags—one or both of these flags may not be enabled by default at this time):

  • chrome://flags/#native-file-system-api
  • chrome://flags/#file-handling-api

Features

  • Rich-text/WYSIWYG markdown editor. WYSIWYG, markdown, and split-screen editing modes.
  • Open and save files as markdown, HTML, or plain text. File association / "open with" support in the native file manager for these formats. The file handling functionality is implemented via the Native File System API. The web browser must support this API and it must be enabled.
  • Rich-text editing mode is restricted to the formatting options of markdown and a small amount more. The rich-text features that are supported include headings, bold, italics, underline, strikethrough, superscript, subscript, bulleted lists, numbered lists, links, block quotes, code, tables, images, and horizontal lines. Everything else—e.g. font size, colors, alignment, positioning, etc.—is automatically filtered as soon as it enters the editor.
  • Automatic conversion of typed markdown syntax into rich-text formatting in rich-text editing mode. For example, typing # Header title will make an H1 header and typing This text is bold will give bolded text. In addition to markdown syntax, certain strings will convert to special characters (namely -- to en dash and --- to em dash). See pattern-conversions.md for a list of conversions.
  • Extensive keyboard shortcuts. See keyboard-shortcuts.md for a list.
  • Works offline when installed as a PWA.
  • Works on mobile and installable on mobile as an app (via add to homescreen).
  • Light and dark modes.
  • Option to switch between HTML-to-markdown conversion engines (Turndown and Showdown). The Turndown engine generally seems to produce better output and is set to default. Some plugins for additional markdown syntax (e.g., tables) are included with the engines.
  • Option to switch between markdown-to-HTML conversion engines (markdown-it and Showdown). Some plugins for additional markdown syntax (e.g., tables) are included with the engines.
  • Optional customization of rich-text appearance via CSS in preferences. You can use this feature to make your markdown files look and render just like they would on your own website.

Notes

The editor is still under development and has many bugs that need to be fixed.

Due to the bidirectional conversion between rich text/HTML and markdown, the editor may alter markdown files—sometimes in undesirable ways. A number of examples are illustrative. Escapes (\) may be added to certain markdown syntax characters that aren't part of the markdown (e.g., ~, |). Headerless markdown tables will be escaped and thereby broken with Showdown as the HTML-to-markdown engine. YAML and TOML front matter is automatically put inside of markdown code blocks (```) to prevent it from being parsed by the HTML-to-markdown conversion engines. Changes to markdown files will vary depending on whether Turndown or Showdown is selected as the HTML-to-markdown conversion engine. For example, Showdown doesn't handle headerless tables, whereas Turndown does thanks to a plugin. For markdown-to-HTML conversion, only markdown-it handles headerless tables. Headerless tables must at least have a | --- | --- | --- | row.

Rich-text HTML editing with the editor is solid. But, as described, the markdown functionality may have issues here and there. Hence, you've been warned—use the markdown features at your own risk! Specifically, HTML–markdown interconversion via usage of the markdown editing mode as well as opening/saving files as markdown.

The editor is slow with larger files in split-screen mode when markdown syntax highlighting/styling is on.

The editor has only been tested on Google Chrome at this time.

Future

  • Lots of bug fixes and minor features.
  • Incremental updating for markdown–HTML conversion to make things faster?
  • Tabs for multiple files at once?
  • Left pane with tabs for folder/workspace and document table of contents?
  • Other things...