tholman / zenpen

A minimalist writing zone.

ZenPen - A minimalist writing zone.

Zenpen (http://zenpen.io) is a web app for writing minimally, and getting into the Zone.

All information is persistent locally, using HTML5 local storage.

ZenPen's minimal interface

Text styling

Saving

License

The MIT License

Copyright (C) 2016 ~ Tim Holman ~ [email protected]

zenpen's Issues

Start from empty area

Make article empty. Refresh page, and start writing.
Article start with letters but not with <p> tag
At the end i have this text for example:

hi there
<br>
test test

But i think text should be

<p>hi there</p>
<p>test test</p>

Export

To Markdown, plain text, or html?

firefox ui bubble position

Something is appearing wrong with the ui bubble appearing in the right place when firefox has scrolled (tested on nightly's)

Convert Rich HTML to plain text?

How to convert rich HTML for other web pages (that uses another font) to plain text with zenpen?

Feature request: support markdown

That would be so 👍

Key commands

For bold/italic/quote etc.

save as PDF

I'd really like to be able to save to PDF, one way or another.

As an option alongside HTML, markdown and plaintext this is maybe a bit too much to engineer - so let's consider other options.

Using Chromium's print to file, it almost works. However, there are a couple of issues:

• There is a green line running down a bit right of the center of the "printed" page. I suspect this has to do with the progress/completion-bar of word-count also being printed.
• It doesn't print more than one page, i.e. you only print the view of the page from the top. If you have written more than 200 words, your words off-screen are not in the printed file.
• Printing in "night-mode" doesn't work well.
• The integral scroll-bar of zenpen is also showing in the print.

I don't really know how to tackle these issues. For example, should one aim to have a print option alongside save as HTML, plaintext, etc? Or one could make the site more compatible with the browsers' "print to file".

I'd love to get some thoughts and input before I might have a go at it.

Feature request - auto backup text

Hi, I would love to see commiting text into github repository or sending backup via email after hitting button or closing browser tab.

What do you think about it?

Links

The ability to add links from within the text editing popup ui

firefox turn off blockquote isn't working

Tested in nightlys.

Cursor doesn't move to heading line

When deleting lines other than the heading everything works fine. When the cursor should move to the first line after deleting the last character on the second line it just gets stuck. Also moving the cursor to the heading line with up arrow doesn't work. When cursor is placed with mouse on the first line everything works.

Using Chrome 28

Unbold two paragraphs

http://www.youtube.com/watch?v=KpuRnHSAlO0

Chrome Stable. I can't unbold two paragraphs. Actually I can't remove boldness, italicsness (sorry) from any part of text where new line exists.

Add utf8 charset when exporting file to HTML.

Currently there is no support for languages other than English. So I suggest adding <meta charset="utf8"> in the head element when exporting. As far as I saw, the head element is empty.

I'ved added a color picker

I added a color picker. I'm not sure how I would change the text color yet. Has anyone thought about the best way to change the color of text?

Right now I just have my color picker changing the background color to test it. It's beautifully integrated, it just an html <input type="color"> so it will work in the future with html5 color picker.

I've attached two screenshots so you can see how it currently is. I'll style the popup window to be much more zen

What is editor.js built on? What's my best option for wrapping selected text in a span with style="red", so I can apply color?

Can you give me suggestions? I'll probably move the color picker into the tooltip bar.

Enter on Header

Enter on header should tab the caret down to the writing content field.

Bold/italic/quote "states"

The ui bubble should have something to represent the "active/non active" states of highlighted text.

Will also be able to use this module for #6

Feature request: support syntax highlighting

It would be nice to have syntax highlighting support :-)
This feature can be used when you are dealing with documentation or just by posting into a blog.

Full Screen broken only working in Chrome

Currently fullscreen only works in Chrome and not Safari/Webkit. It's a little bit of work, but you can support both easily.

I've got my own fork of this, if I fix it first I'll let you know.

<button> incorrectly closing tag

On line 58 of index.html the fullscreen button is closed with a misspelled word butto"m"

Adding a save feature

I was thinking about adding a save feature to this, but I can't decide on what would be the best course of action in terms of implementing the format in which the code saves the file. Plain text is easy to do, but would rid the code of all enhancements such as bold or italics. I was thinking about having it save in html markup, but even then it leaves something to be desired.

The option I'm most considering is having the user select a method of encoding for the enhancements that are outside the realm of plain text, but wouldn't want to overcomplicate the simplicity of the webpage. Does anyone have any thoughts on this?

firefox ui bubble button states

For some reason, the states on the focus node aren't being properly activated in firefox.

Build system

Use Grunt.js to build minified and concatinated js + css for deploys.

Enter on Word count

Should apply the word count, and close the input area/overlay

.ui button strange css

I've switched the buttons to SVG (because I'm adding a color picker)
I used the .ui class on my button but for some reason the SVG background would not render. I realized that SVG is sensitive to improper border tag. I changed .ui border: 0px;
to border: none; and the problem went away. Also we shouldn't use 0px, just 0.

border: 0px;

changed

border: none;

Lists?

Support for lists would be awesome... may have time to try something out next week...

Medium's editor does a pretty good job with this..

You can make bulleted or numbered lists. To start a list, type a dash or 1. and then start typing your first item. Once you hit “return” it will change to a list.

• https://medium.com/help-center/128f049a7ad

Anchors aren't clickable

Blockquote isn't reversible

If you hit the demo page, select two paragraphs and then hit quote twice, it sticks the two paragraphs together.

Not the world's biggest problem, I'll admit...

HItting enter when adding a link results in a link to localhost...

at least in firefox

Active style for selected text

If you select text that contains both styled and unstyled text the style bar will hilite the style of the last character selected.
For example, if you have the text "a b c"
If you select "a b" then italics is selected
If you select " b c" italics is not selected.

Was this an intentional design decision? I think the expected behavior is that when both styled and unstyled text is selected don't hilite anything in the style bar.

Sounds

A small option to play some soothing tunes (white noise, rain... etc)

Line heights

Something seems a little buggy with line heights (probably my fault)

Replication: When bold/italics are selected the ui bubble will pop up 1 or 2 pixels.

url shortening

Keyboard shortcuts.

It would be nice to have some keyboard shortcuts, like the following.

• Ctrl+B - Turn the selection to bold.
• Ctrl+I - Turn the selection to italic.
• Ctrl+h - Make hyperlink out of selection.
• Ctrl+q - Make line a quotation.

In the first two the behavior could be done like: If part of the selection is bold but the other part is not, then Ctrl+b turns all of it to bold.

What do you think?

Wrong bubble position on window resize

On window resize the bubble position is not updated and stays at the previous position.

Customisable line height

the ability to chose between a set of increasing line heights for the body text
e.g., 1.25em, 1.5em, 1.75em , 2em

p.s.
Fantastic tool!

Bold/italics are not showing up on Firefox 23

This is likely a getSelection() issue since the boundaries for [startContainer,endContainer] are inconsistent - focusNode is definitely the previousSibling of the selected text on a first click.

Share mode

Since "a" tags and content editable's dont mix, a share mode would probably be the solution... a non editable, sharable version of the page.

With an option to create a new writing, or share via twitter intents.

How can I work on with it?

Well, here's something that's keeping me busy:
I've written down some note but how can I take it and copy it into my favorite editor?
All the formatting (bold, italics, quotes) are getting lost...

Bubble position should be nearest the mouse pointer

Currently the bubble position is set to appear centered horizontally over the selection. It would be better if the bubble appeared nearest the mouse cursor (nearest the end point of the selection) so that one doesn't need to move the mouse so far.

Add img

Bugs for bold, italics functions

When the text selected has more than one paragraph, the bold and italic cannot be removed.

Highlighting the entire block element does not display active styling

Move JS to the bottom

As a "best practice" of frontend web development the script tags should be moved to the bottom of the document.

http://developer.yahoo.com/performance/rules.html#js_bottom

Kind regards,

Support for target _blank

I took a quick stab at implementing this but my Javascript skills aren't greatest. How would you go about doing thing?

Target word count starts at 1

The target word count tool appears to start at 1 instead of 0, you can see this easily by setting the target to be 1 word and it'll give you the green bar on the right rather than an empty bar.

blur ui bubble on scroll.

Otherwise, the absolute element will look to be floating wrongly.

Styling tooltip doesn't come up on latest Webkit

The Bold, italics doesn't tooltip doesn't seem to work any more when highlighting text. I'm using webkit nightly build Version 6.0.3 (8536.28.10, 537+).

It worked two days ago. I'm testing on zenpen.io

URLs don't get added into quotes

Try highlighting all of paragraph 3 and applying the quote style

Browser Support

What is the browser support of ZenPen? (Excluding HTML5 localStorage)

Feature request:clear key

It would be awesome to have a one touch button to clear all text and move the cursor to the heading line