jakiestfu / medium.js Goto Github PK

Currently, medium does not support RequireJS exports.

However, you can shim it to force loading of Rangy and Undo - the problem is that Rangy is UMD wrapped and RequireJS aware, and does not export to global when RequireJS is present. This breaks medium, which always looks for it on the global object

Adding a UMD wrap is tivial but it will mean stopping support for optional Undo/Rangy and wild mode, which rely on falsy - if a depenency is declared and not fulfilled in the define syntax, it will fail - though you can recover it in the require([deps...], cb, errb) - yet it can't have nested define in a require that will guarantee in-time download.

DimitarChristoff@24fcc91

regretfully change diff seems big due to extra spacing but it's not, really. just an extra closure and wrap at bottom.

the above fixes it for now for those that want to use in AMD - though ideally upstream changes need to happen to deps:

• Undo to get UMD
• Rangy submodules that depend on rangy-core don't return anything, even though they are AMD-aware - they should return the rangy object

perhaps two AMD sub modules can be added, medium-wild and medium-domesticated.

Issue here: http://stackoverflow.com/questions/25904306/contenteditable-move-cursor-to-end-on-paste-using-medium-js

This is important!

On your demo page: http://jakiestfu.github.io/Medium.js/docs/
I get the error:

TypeError: node.innerText is undefined
return (node.textContent || node.innerText).trim();

on line: 227 of medium.js

Sorry if this is not a real bug, but I was hoping to enjoy your demo! :)

Medium.com editor is evolving and they've changed image insertion a few times. Is it possible to implement image insertion as it's currently implemented on Medium.com within Medium.js? How would one go about this problem?

It's more suggestion. I couldn't find clear() and getting value methods. So, is there a way to reset component (remove text typed by User and show placeholder)? Another problem if I want to get component value without typing anything. I can't use element.innerHTML() as I will get placeholder text which is wrong. I should call method which will return empty string, as placeholder is not actually a content.

If placeholder is set, there is no way to get the element value when it's empty. text() / html() / etc all return the placeholder value.

Are there any plans to manage cursor position within the undo stack in domesticated mode? The current behavior of undo/redo (from what I'm seeing in Chrome) always returns the cursor to the beginning.

I'd be willing to take a stab at it if there aren't any plans to support this already.

I would just like to report Rangy is throwing an error about Discontiguous Selection in the Docs page. I'm not sure which Medium.js instance is causing it. This happens everytime after a full refresh in my Chrome, without touching anything.

Here is a screenshot:

http://cl.ly/image/0M1h3n2E1p0q

Bolding and italicising a Medium object in inline mode still works in Chrome v33 and Canary.

Hello,
Is it possible to add classes to some paragraphs?
My idea is to implement some very basic "Syntax Highlighting". Therefore I need to change the classes of some paragraph elements. But when I do that the class gets removed immediately.
How can I do that?

In addition to the issue with resize handles the field is not directly editable under IE10 and earlier versions of IE.

I am able to edit .. but only after several clicks or double clicks on the control.

Tested on Windows 7 with IE10 using browserstack.com.

If you clone the repo, and run bower install and then access the index.html, the rich mode demo will not accept and of the meta key + B/I/U commands.

[Excellent work by the way.]

Just tried a basic copy/paste from hipsteripsum.me of a couple or more paragraphs of text into the rich area. Then I tried placing the cursor somewhere randomly in the text and hitting spacebar. A new paragraph is created (without any additional markup) but the subsequent text isn't encapsulated inside the paragraph. The p is empty. This will continue to produce the same result if repeated.

Using latest Chrome/Safari/OSX.

https://github.com/jakiestfu/Medium.js/blob/master/medium.js#L1383 --> should be style.borderTopWidth= qStyle('border-top-width');

Not that it's necessarily a problem, but what is the rationale for not using semantically meaningful tags in Medium.js? Don't most writers by default intend to use emphasis or strong importance in their writing rather than just changing the appearance of the text?

Also: if this is intended to be used on other sites that don't have a Medium.js-specific stylesheet, wouldn't it be better to use more widely declared styles for <strong> and <em> elements?

It seems the plugin no longer supports IE8 as there is no fallback for the getSelection() property.

I'm happy to do this and create a pull request. I just wanted to know ahead of time @jakiestfu if this is something you'll accept as it add a dependency on Rangy

http://code.google.com/p/rangy/

Which is Tim Down's very excellent library for dealing with Ranges and Selections consistently across many browsers.

Calls in the manner of:
w.getSelection ? w.getSelection().anchorNode : d.activeElement

Would be more dependable. I think there are other side benefits which I will or others can enumerate.

When entering Shift+Return to make a br in partial or rich mode on docs page, my chrome(mac) 37.0.2062.120 freezed and the cpu is run at 100%。

If a medium field has no content and is only displaying the placeholder then tabbing to the field does not set input focus to the field so it can be edited. If the field already contains content then tabbing will work and place the input position at the beginning of the content (end might be better).

To edit the field the user must click on the field and then it goes into input mode.

Is hashtag highlighting possible with medium.js in the way its done in twitters tweetbox?

Works really well on Chrome however, pasting stuff in Firefox shifts the focus and the copied text is not added until you add it twice.

Step to reproduce:

1. Create an editor with a maxLength
2. Fill the editor with enough content to completely exhaust the maxLength (until medium doesn't allow more input)
3. Highlight all the text in the editor and then press a letter, number, or symbol on the keyboard

Expected result: All of the text in the editor is replaced with the typed letter, number, or symbol and the cursor is after this new symbol

Actual result: Nothing happens (the last keystroke is prevented)

When copy pasting from another source, formatting gets copied as well. .Medium-paste-hook does not work. Something like medium-editor?

It is unclear which undo.js and rangy versions need to be included. In the bower package I found:
"rangy": "https://github.com/jackcviers/Rangy",
"undo": "https://github.com/jzaefferer/undo"

However rangy's current version can be found here https://github.com/timdown/rangy. Undo seems quite old and inactive. Is it possible to update the website bit about this ("domesticated: when undo.js & rangy are included before Medium.js, domesticated behavior is triggered...") to be clear about the versions one has to use?

Would be great if this awesomeness was available in NPM, using CommonJS format to quickly plug into NPM-managed projects.

I think this is a great control but as it stands I am wondering if it is able to be used on a production site used by the public (no browser control)?

I am happy to not support older browsers but current generation (IE10 and Firefox) are not working well and they are significant traffic percentages.

It works ok on webkit and mobile browsers but is not a good experience on IE 10 and without the uncommited firefox typeerror fix it does not work there either (using this PR but still issues there).

Also the fact that the firefox fix has not been committed after 3 months makes me wonder if this control has support going forward from the author .. who I am sure is very busy elsewhere and this might have just been a learning exercise or a challenge.

I would love to use it but without wider browser support I will have to remove it from my site before I launch and come back later when the control is more mature or the browser mix changes.

I know I can fork and look at the issues myself but where I am using medium.js is a low priority right now and can just return to standard inputs .. will try to take a look at some point though as I want to use the control.

Appreciate all the work that has gone into the control .. just putting it out there as an issue so new users are aware and solutions can be found.

Thanks.

Hi,

I didn't understand the "mode" option.

I get the differences between inline and the others but not between partial and rich.
It is said that rich mode allows to style the text but I didn't get how.

Moreover, is it ok that a copy (selection of text + ctrl/C) of multi line with styles (the code example given on the site for instance) can be paste as is (in particular, with multi lines in "inline" mode)?

As the title says, is it possible to add a option to strip all styles and html on paste so that only pure text is pasted?

Is there any way to put some text (or html in general) in content editable? I tried to put it in the same div as content editable and it didn't work.

(after I insert some text, DOM would be like this)

When I go to the docs over HTTPS, the demos are broken. When I go to them over HTTP, there is no issue.

Over HTTPS, the following error appears in the console:

Uncaught ReferenceError: $ is not defined

This may be an issue in other browsers, I have not tried. I am using Chrome 35.0.1916.114.

If you click on an empty Rich demo in Firefox or Chrome and hit enter, it appends a small horizontal rule and the placeholder text is (sometimes) not removed.

If you click on an empty Partial demo and hit enter, instead of going to the newly added line, the cursor jumps back to the first line. Lines are appended but the cursor jumps back to the top.

(Edited: some typos)

Testcase for Firefox 32:
http://doppelbauer.name/Medium.js/test.html

Type: abc <enter> abc <enter> abc
Select all: CTRL + A
Type: abc <enter> abc <enter> abc

Expected: Multi-line, but result is single-line

I noticed that this is not possible. I get this error in console:

"Uncaught TypeError: Object [object Object] has no method 'getAttribute'" and it refers to code below the comment "Override defaults with data-attributes" in Medium.js.

Is there a quick way to get this working?

Type a few paragraphs in the rich text editor, then go to the last one and hit backspace until you've deleted the whole paragraph. It removes everything in the editor. Luckily, it can be cmd-z'd back, and if you highlight it and replace it doesn't delete everything, so it's workable, just really annoying.

This happens for all versions up to IE11. I am only really concerned about IE10.

I'm getting this error after typing a few letters. Any ideia what could it be? I'm using Chrome 37.0.2062.94. Thanks!

Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 2.

Please help us to have links and images in editor.

I'm happy to work up a PR for this, but before I waste any time I was hoping to get some consensus on the expected behavior.

Currently it looks like destroy does:

destroy: function () {
    var el = this.element,
        intercept = this.intercept;
    this.utils
        .removeEvent(el, 'keyup', intercept.up)
        .removeEvent(el, 'keydown', intercept.down)
        .removeEvent(el, 'focus', intercept.focus)
        .removeEvent(el, 'blur', intercept.focus);
},

I would also expect it to:

• Remove classes added by Medium
• Remove placeholder (if one was added)
• Disable contentEditable

when trying to enter text into the demo on:
http://jakiestfu.github.io/Medium.js/docs/

the cursor jumps to top left corner after entering the first character.
tested on Chrome 35.0

When setting maxLength option, copy pasting new content seems to go through and ignore that settings.

Haven't figured out a distilled test case for this yet, but if I highlight the content of two Tweets in my Twitter timeline (no more, no less for some reason) and I try to paste into a Medium.js field, the content shows for a split second and disappears.

Tested in Chrome 28. Didn't seem to happen in Safari 6.

Pressing backspace in an empty inline instance causes the following error for me:

On the 'rich' editor on the demo page, write 3 or 4 paragraphs and then go back to paragraph one with the cursor. Now hit enter. It's pretty random where it puts the 'new' paragraph when you hit the enter key. Anyone have an idea of what's causing this?

I'm in the latest version of Chrome for Mac, on the Rich Text example near the bottom of http://jakiestfu.github.io/Medium.js/docs/

Entered the text "Here's some text. Here's some more.", used the left-arrow key to position the cursor after the period following the word "text" and hit Enter.

The cursor jumps to the next line, as expected, but all of the text remains on the first line. In a plain contentEditable DIV the break is inserted as expected, with the second sentence moving as well.

I have no idea where to begin fixing this.

When a field is cleared of text and returned to the placeholder value the caret is removed from the control (chrome) and it is not apparent you are still editing.

If the field is clicked on the caret does not appear. Only when the user start to type does it return and the field returns to normal.

This problem did not occur on firefox however the caret position sometimes moved to the end of the control depending on where you click to return focus to the control.

This was using inline mode.

In particular, the "Usage" section of the docs was updated on master in d962599, but that has not been merged to gh-pages.

Also, apparently gh-pages is 13 commits ahead and 13 commits behind master.

Would support for Markdown editing be within the scope of Medium.js?

Would it be possible to use :empty and :after to do the placeholders?
Like so:

#editor:empty:after {
    content: 'My Placeholder'; /* Changed/inserted with JavaScript */
}

This would probably be faster than using a key listener.

(In CSS 3 the 'official' way to use :after is actually ::after, but more browsers support the older version).

Getting the above error when page loads. I copied the JS code exactly. The code in question:

395 | && settings.element.getAttribute('data-medium-' + key)
396 | ) {
397 | newVal = settings.element.getAttribute('data-medium-' + key);

Could it be something in my own JS code? This is all I have:

var custom = $('#custom');
new Medium({
  element: custom,
  mode: Medium.inlineMode,
  maxLength: 20,
  placeholder: 'Click to add text...'
});

Thanks.