Automattic / Automattic/simplenote-electron

Highlight/Format Markdown to Improve Readability

Open
#2,826 0 comments 15 reactions 0 assignees View on GitHub
[feature] markdown feature request
Dominant language
TypeScript
Stars
5.3k
Forks
588
Avg merge
9h 45m
Merged PRs (30d)
4

Description

## What
Formatting the markdown text would make for a more pleasant and more productive experience without having to flip back and forth between Preview mode.

Simplenote already kind of does this for both ordered and unordered lists, so this is largely a continuation of that feature, which is obviously very helpful!

## Why
I was inspired to dream bigger for Simplenote after reading [this blog post](https://tonsky.me/blog/sublime-writer/). I've realized recently that I really want just a bit of basic markdown formatting ([example package for Sublime Text](https://github.com/SublimeText-Markdown/MarkdownEditing)) when writing. It would make my notes _significantly_ more readable.

The Preview function is useful in theory, but I find I almost never use it because I can't edit anything when in Preview mode and flipping back and forth is a hassle.

## How
Simplenote:
!["Initial Ideas" section below shown in Simplenote is just white text on black background](https://user-images.githubusercontent.com/1238696/113731900-fe023c00-96ad-11eb-936e-ab634d3e4ccd.png)

Markdown highlighting in Sublime Text:
!["Initial Ideas" section below shown in Sublime Text with a Markdown highlighting package formats bold, italic, headings, etc. while still showing markdown markup](https://user-images.githubusercontent.com/1238696/113731924-022e5980-96ae-11eb-971c-06e1c7c76318.png)

"Hanging Punctuation" for Headings (image credit tonsky.com)
![The pound symbols used to make headings in markdown are aligned with a negative indentation so that the heading text is aligned with the left edge of all other text](https://user-images.githubusercontent.com/1238696/113730259-94cdf900-96ac-11eb-9ce5-f7d08183889c.png)

## Initial Ideas

### MVP Features
- Basic inline formatting for: bold, italic, links, code, (and strikethrough?)
- Block formatting for headings, blockquotes, code

### Features that would add polish
- ["Hanging" punctuation](https://tonsky.me/blog/sublime-writer/#hanging-punctuation) for headings
- Some way to collapse links so they are viewable but don't eat up lines. Maybe turn [link](https://example.org/this-is-a-really-long-url/see-how-it-keeps-going/very-long/) into this [link](…) with a tooltip?
- Syntax highlighting for code

Contributor guide

Open the contributing guide

Research direction

The issue names no files, tests, or entry points. Start by locating the editable note component and its Markdown rendering or formatting code, then determine how the requested MVP features fit the existing editor. Done should be defined against the listed inline and block formatting behaviors, with polish items treated separately.

Written by the indexing model from the issue text.

Assessment

Tech stack
markdown, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.