mduvall / grande.js Goto Github PK

View Code? Open in Web Editor NEW

1.3K 31.0 86.0 824 KB

It's a Medium at Starbucks. Pinky ring out.

License: MIT License

JavaScript 96.52% CSS 3.48%

grande.js's Introduction

grande.js

This is a small Javascript library that implements features from Medium's editing experience. Take a look here.

How to get started

Installation

Bower is the preferred way to install grande.js, it is available as grande in the Bower package repository.

Simply bower install grande

Usage

See the index.html in this repository for a functional example using the library.

To get up and running simply...

Include an <article> with contenteditable
Include the grande.min.js file (in dist/ directory) at the bottom of your <body>
Bind the events on the article tags with grande.bind(document.querySelectorAll("article"))
You are set!

Included files

There are two CSS files that come with the included demo:

editor.css: this file provides the style for the contenteditable elements on the page
menu.css: this file provides the toolbar styling to appear as it does below

Options to grande.bind

The bind function currently accepts two parameters: bindableNodes and an options list.

The calling code can pass in a NodeList as the first parameter that will bind to these elements and enable contentEditable on them, if nothing is passed in it defaults to elements that match the selector .g-body article.

The second parameter is an options object that accepts the following keys:

animate: if true, this will trigger the CSS animations (defaults to true). Useful to turn to false if subpixel-antialised is needed in Safari.

The following tag stylings are available: <b>, <i>, <h1>, <h2>, <blockquote>, <a>, <ol>, <ul>, <hr>

Questions

This is very similar to Zenpen, why?

First off, major props to @tholman for the inspirational script. grande.js is a spiritual cousin of the fantastic plugin and aims to have feature parity with Medium. It adds multiple styles and will be diverging from the vision of being an in-browser editing experience to being a provider of the in-browser editing experience. grande.js will be providing the foundation for your website to have a wonderful editing experience.

Roadmap

Images (figure)
execCommand to support <strong> and <em>
CSS animations to match the pop-upwards on Medium

grande.js's People

Contributors

Stargazers

Watchers

grande.js's Issues

Smart quotes functionality

That’s “this” not "this" when editing, should be automatic.

Selection shows Grande's toolbar even in elements there were not binded

I'm using Grande.js in an app and I'm binding Grande.js to a specific element. However, if I select text in a totally unrelated element, Grande's toolbar (with the tools h1, h2, h3, etc) pops up anyway.

I'm sure I'm only binding Grande to the desired element.

Is this normal or could I be doing something wrong?

This is how I am binding Grande:

window.grande.bind(document.getElementById("editor-article"));

Do images work?

Are image uploads supported? There reason I ask is because the roadmap says they will eventually be included, but there seems to be some commit that indicates they might have been included: #17

Are there any examples of how to use inline images if they are supported?

missing feature

it's just missing the image tag

and what about youtube tag and other social media tags like the new wordpress editor

Add support for <figure>

Implement how Medium inserts images into the contenteditable region, the corresponding HTML tag is <figure>, see image below:

Check whether selected nodes are editable

per @zzimbler's feedback on #7.

The hook would be on the text selection events to ensure that the node selected is in the list of nodes passed in the constructor.

Editing hyperlink text results in underlined text

Problem: Changing the text of a link results in <u> elements instead of the text being changed inside the <a> element.

Steps to Reproduce:

Type some text
Create a hyperlink using the editor
Place cursor at the end of the hyperlink
Press BACKSPACE
Type new text
This new text is wrapped in <u>

Demo link not working

Hi @mduvall! I wasn't sure if it was still being maintained but incase it is - the demo link doesn't seem to be working, could you please take a look?

<h1> backspace merges previousSibling

Stated in ticket #20

This needs to handle backspace events to merge the nodes gracefully. Medium probably has a transformation map of what to do with element types (<h1>s =><p>s as an example).

Animation on menu for popping upwards

Currently being worked on here.

Have you heard of Markdown?

Headings not inline with Medium

Medium's toolbar contains buttons for adding H1 and H2 level headings. But the HTML output is H2 and H3 respectively at the dom level.

Grade.js insets H1 as H2, and so forth...

Replace execCommand defaults with semantic tags

Currently execCommand with bold and italic produce the <b> and <i> tags respectively. There should be an override to the document.execCommand to support the additional args and fall back to the standard if necessary, Medium looks like they implement a function queryCommandValue in the main-posters.bundle.js that provides some of this additional functionality.

Unable to install through bower.

I tried to install this through Bower but it is showing the following error :

bower grande#*              not-cached git://github.com:mduvall/grande.js.git#*
bower grande#*                 resolve git://github.com:mduvall/grande.js.git#*
bower grande#*                 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com:mduvall/grande.js.git", exit code of #128

Additional error details:
fatal: unable to connect to github.com:
github.com: Servname not supported for ai_socktype

I did a google search and I got this StackOverflow result.

Can you have a look, I would really like to use grande.Thanks!

Feature request: Test link

Would be great if you could test the link you type. This could be done by detecting holding down Ctrl or Cmd key while you hover the link, making it clickable... or you could add a little button to the link dialog box that you can click to test it.

This link should only open in a new window/tab also, of course. 😄

Inserting hr before non empty paragraph

In 7b45776, prevSibling is assigned the previousSibling of selection.anchorNode. The problem is that when the user presses enter and the caret is at the beginning of a non-empty paragraph, selection.anchorNode is the text node inside the paragraph, not the paragprah itself.

Because of this, inserting a hr before an existing paragraph is broken right now, as prevSibling isn't the expected node.

In that situation in medium, the first enter keypress inserts an hr, the second a paragraph, etc. This makes it possible to stack empty paragraph and hrs, so that might be a bug on their end but not a very important one.

Using selection.anchorNode.parentNode is probably not robust enough either, because if the paragraph starts with an i tag, we'll get the text node inside the i. This is why I initially used getParentWithTag but it feels a bit hacky.

Any appetite for tables?

It seems that most 'medium-style' editing experiences eschew HTML tables. I think I get the reasoning, but I also think there's certainly a place for one that includes simplified table management. Is there any appetite for this in your project?

Non-selectable nodes unselectable.

Hey there Matt,

I've run into an issue (may well be the idiosyncrasies of my setup?) where the other elements on my page that are not contenteditable / selectable by grande then become non-selectable (i.e. can't highlight text / select a text input etc.).

Narrowed it down to line 529 in the triggerTextSelection() function which returned false when an element wasn't contenteditable (i.e. 'cancelled' the selection event).

  function triggerTextSelection(e) {
      // The selected text is not editable
      if (!e.srcElement.isContentEditable) {
          return false;
      }

Again this could well be the particularities of my page setup, but if anyone else runs into the same issue, I got things back on track by returning from the function, but not returning false.

i.e.:

  function triggerTextSelection(e) {
      // The selected text is not editable
      if (!e.srcElement.isContentEditable) {
          return;
      }

Great work on this plugin!

Cheers,

Dylan.

Unable to make a heading bold in firefox

Text in a heading (tested h1-3) won't turn bold. It is possible to turn text that is already bold into a heading, but not the other way round. Occurs in firefox on both linux and mac. Works fine in chrome.
Thanks for the nice editor guys! Keep on that nice work!

Input blurs when trying to insert a link url via CTRL-V

The menu turns back to the normal buttons view when i press ctrl on the url input.
I'm on a linux machine if that matters. Problem occurs in both ff and chrome. Seems to work fine on Mac with the cmd key.

Any way to change enter press to <br> instead of <p>?

I made a custom dashboard for Wordpress using grande.js. Is there anyway to output line breaks on enter, instead of the regular paragraph break?

Small and large quotes

Medium has both small and large quotes, see:
http://littlebigdetails.com/post/67563746125/medium-small-and-large-quotes-are-visually

AFAIK grande.js only has small quotes.

Backspace on start/empty removes wrapper tags

You can see this on the demo page. Select everything, delete and delete again. You can now type and your text won't be formatted properly. Start a new line and you're back inside a paragraph tag.

<article class="content" contenteditable="true">
  Look ma, no tags!
  <div><p>
    From tags to riches.
  </p></div>
</article>

Ensure Bootstrap and grande.js get along

Looks like collisions on CSS classes, @peleteiro suggested in #36 to prepend a prefix. May be good or scope under an element and normalize the g-body.

Lists!

I know the whole idea is minimal but ordered and unordered lists as a plugin option would be great - and that is the only missing thing.

The way I see it is you highlight the text choose list icon and it indents the line and starts the list returning creates the new item deleting that breaks out of list.

Can I bind to dynamically generated DOM elements?

Thanks for the work, this is beautiful.

I am looking for a light-weight text editor like this to apply in a CMS.

Instead of grande.bind() or grande.init() to the whole document, can I apply this to part of the DOM just when the editable area is generated?

Disable menu when non-editable text is selected

See description in #51.

Test harness for visual and logical regression

The code's getting to a point where a test automation framework will be useful in order to merge code at a higher cadence.

Catching logical regression should be fairly straightforward, could use either Jasmine or QUnit, no real preference.

This plugin needs to maintain visual consistency between major browsers (Safari, Chrome, and FF for now) and checking all these by hand is a bit taxing for innocuous fixes. Was thinking of a visual regression tool such as Huxley, PhantomCSS, or Wraith.

Changes in Medium 1.0

Is Grande.js looking for parity with Medium in terms of features? If so, this means a couple of new features concerning images since Medium changed their interface.

Images can now be floated inline, floated inline and offset to the left, small, large, or cover mode, taking the full width of the screen. Attached is a screen shot.

Emit a typing event to be used with autosave scripts?

Just wondering if this belongs in here. While it's easy enough to do on it's own, I imagine a lot of people trying to use this to emulate Medium will also use autosave.

I'm imagining something like an 'updated' event fired on every keystroke, throttled to emit every second or so during rapid typing.

Description is too awesome.

It's a Medium at Starbucks. Pinky ring out.

I mean, seriously. Isn't a Medium-inspired editor good enough??

Could I add align features?

Support for hr

One of the lesser known features of the medium composer is the ability to add horizontal breaks by hitting enter twice.

I have a patch ready that implements this but it's probably better to land it on a separate branch for review and further testing. Would you mind creating a branch so I can send a pull request? :)

ul/ol Differentiation

It seems that sometimes I start with an

Code support

Hitting ctrl + 6 should trigger...

a code block

Emit change events when text is manipulated

I.e. when a user emboldens a phrase.

Editor not working well when using Firefox.

I tried deleting the entire default content (select all then delete) in an attempt to start writing something from scratch. Editor seems to no longer work properly when I do.
Please see the video link:
http://www.screencast.com/t/tXqSBPGG

Note:
Editor works well with Safari and Chrome. Only Firefox seems to have this issue so far. (haven't tested in IE yet).

Thanks!

Cheers!

Still maintained?

I'm updating the list of WYSIWYG editors.

<li> backspace merges previousSibling

Stated in ticket #20.

Medium's behavior seems to merge all non-paragraph elements into the previousSibling paragraph. This will probably be good enough for now.

This fix will likely be related to #23 since the transformation table should take care of the issue.

Ordered list padding problem

When you reach above 10 points on your list the text will slightly blend with the numbers on the left. Also, when you go above 100 points they will completely overlap.

Backspace bugs

Right now, backspaces in grande behave a bit differently than on medium. Here's a non-exhaustive list of issues I noticed:

H1 WTF in Chrome

Carret at the start of an h1 which is preceeded by a paragraph, hit backspace; the content of the node is appended to the previous paragraph but surrounded with a <span style="font-size:2em"> (i wiish I were kidding :p)

On medium the nodes content is simply appended to the previous paragraph.

Cancelling `li`s

On medium, when the carret is at the start of an li and the user presses backspaces, the li is turned into a p, regardless of the content of that li or the number of surrounding lis.

In grande the behavior differs depending on the browser. Chrome usually deletes the li and appends the content to the previous tag, regardless of what that previous tag is.
Firefox has a range of different behaviors depending on whether the li contains text or not, whether it's inside and ol or ul or even the lis position in the list.

Deleting `hr`s

I didn't mention it in #19 but hr deletion will need adressing too. Chrome handles it rather fine, but Firefox and IE do very different (and non-sensical) things.

Deleting <hr>s doesn't work cross-browser

Stated in #20.

Chrome gracefully handles deleting the previousSibling

, Firefox/IE do not however, will need to hook in preprocessKeyDown to ensure the right deletion happens.