mduvall / grande.js Goto Github PK

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?

Hyperlink option is not working when i use it on bootstrap modal its automatically toggling the other option is working fine

Hello,
I have tried to set H1 tag on a list element and it works correctly. If I want to remove h1 it doesn't work well, I must delete all the phrase.

Try on the index.html.

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!

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!

I'm updating the list of WYSIWYG editors.

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.

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? :)

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.

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

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.

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>

it's just missing the image tag

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

A destroy function that removes all grande-specific DOM elements & event handlers would be incredibly handy.

A destroy function that removes all grande-specific DOM elements & event handlers would be incredibly handy.

Stated in #20.

Chrome gracefully handles deleting the previousSibling

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.

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 lis

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 hrs

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.

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...

Currently being worked on here.

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

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

Hitting ctrl + 6 should trigger...

a code block

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.

It seems that sometimes I start with an

, even if I double return after the last element it will keep the ordered list tag rather than either starting over and/or allowing me to use a
. I couldn't replicate it the other way around. It appears I would have otttriple return or soft return to get it to stop.

Please take a look at this commit: netoneko@93156c0

You set options after init has already happened which makes them essentially useless.

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?

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?

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

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?

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.

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).

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>

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!

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.

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.

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.

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.

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"));

I.e. when a user emboldens a phrase.

See description in #51.

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?

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.

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.

Change -- into — when editing content.

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. 😄

It would be great if I could add an icon to the toolbar which runs a defined callback

A destroy function that removes all grande-specific DOM elements & event handlers would be incredibly handy.