Autogrow support #132

OscarGodson · 2012-06-18T04:36:22Z

If autoGrow: true, in/decrease the height Npx each line of text put into the editor

The text was updated successfully, but these errors were encountered:

cornae · 2012-08-23T13:44:16Z

That would be great to have.

jipiboily · 2012-09-23T23:25:22Z

👍

OscarGodson · 2013-01-28T16:41:59Z

This shouldn't be too hard actually. Someone asked how to do this on StackOverflow so I took a stab at it. It's actually pretty easy if anyone wants to implement this before I get to it:

var editor = new EpicEditor();

var updateEditorHeight = function () {
  var editorHeight = $(editor.getElement('editor').body).height();
  // +20 for padding
  $('#epiceditor').height(editorHeight + 20);
  editor.reflow();
}

editor.load(function (){
  updateEditorHeight();
});

editor.on('update', function () {
  // You should probably put a check here so it doesn't
  // run for every update, but just on update, AND if the
  // element's height is different then before.
  updateEditorHeight();
});

The important bits being just the updateEditorHeight function and that it's called on load and update.

@techwraith - I know you wanted to know how hard this would be too awhile back.

DEMO: http://jsbin.com/eyidey/1/edit

arghav · 2013-02-07T16:19:58Z

This doesn't seem to work on Chrome. The body height just keeps on increasing! I'm not sure why. Works perfectly on Firefox.

Gankra · 2013-06-26T19:13:03Z

So I started poking at making this possible in a desperate attempt to cobble something usable for #27. We need to make the internal iframes all have <!doctype HTML>, or else they fallback to quirks/html4 mode.

In particular, this makes the body always the size of the parent iframe, meaning the document will indefinitely grow but not shrink. Is there any reason to exclude the doctype? I assume up until now it was just never considered.

Gankra · 2013-06-26T19:16:10Z

For anyone who needs/wants it, this code works for adding autogrow externally:

    // make sure that editor has correct size
    var oldHeight;
    editor.on("update", resize);
    resize();

function resize() {
    if(!editor.is("fullscreen")){
        var editorHeight = $(editor.getElement('editor').documentElement).innerHeight();
        var minHeight = 150;
        var newHeight = editorHeight;

        if (newHeight < minHeight) {
            newHeight = minHeight;
        }

        if(newHeight != oldHeight){
            $("#epiceditor").height(newHeight);
            editor.reflow();
            oldHeight = newHeight;
        }
    }
}

(edited several times to fix mistakes)

Gankra · 2013-06-26T19:17:57Z

Note that this works right in FF without the doctype fix, but only grows in chrome (and presumably all webkit) without it.

(it is also a quick strip-out of what I actually used, so I might have borked something in the translation)

Gankra · 2013-06-26T20:44:37Z

// make sure that editor has correct size
  var oldHeight;

  function resize() {
    if (!editor.is("fullscreen")) {
      var editorHeight = $(editor.getElement('editor').documentElement).innerHeight()
      , minHeight = 150
      , newHeight = editorHeight;

      if (newHeight < minHeight) {
        newHeight = minHeight;
      }

      if (newHeight != oldHeight) {
        $("#example-1").height(newHeight);
        editor.reflow();
        window.scrollBy(0, newHeight-oldHeight);
        oldHeight = newHeight;
      }
    }
  }

  editor.on("update", resize);
  resize();

Cleaned up to comply with EE's code style, and made it so that the window scrolls as the thing grows.

Edit: Adding this to the end of /docs/main.js makes the docs page work pretty well in ios! (with the doctype fix)

OscarGodson · 2013-06-26T22:33:38Z

@jeremybenaim actually added DOCTYPEs already here. You could probably cherry-pick this into master, maybe?

jeremybenaim@4ca6e4c

Gankra · 2013-06-27T05:11:27Z

Any reason why this was never merged in?

OscarGodson · 2013-06-27T05:15:35Z

It was in the IE8 branch that I never finished and didn't have a need–until now–to merge it in.

Gankra · 2013-06-27T16:27:30Z

Alright, I'll consider merging it in (or hacking in my own version).

Anyway, here's the final version of the autogrow hack:

  // make sure that editor has correct size
  var oldHeight;

  function resize() {
    if (!editor.is("fullscreen")) {
      var editorHeight
      , minHeight = 150
      , newHeight;

      if (editor.is("edit")) {
        editorHeight = editor.getElement('editor').documentElement.scrollHeight;
      }
      else {
        editorHeight = editor.getElement('previewer').documentElement.scrollHeight;
      }

      newHeight = editorHeight;

      if (newHeight < minHeight) {
        newHeight = minHeight;
      }

      if (newHeight != oldHeight) {
        editor.getElement("container").style.height = newHeight + "px";
        editor.reflow();
        window.scrollBy(0, newHeight - oldHeight);
        oldHeight = newHeight;
      }
    }
  }

  editor.on("update", resize);
  editor.on("edit", resize);
  editor.on("preview", resize);
  resize();

It will now resize when you change between preview/edit mode. Also doesn't rely on jquery at all now, meaning this could be fairly easily merged internally.

Gankra · 2013-07-08T19:59:00Z

Note: it appears that the latest firefox update changes the behaviour of document.documentElement.scrollHeight to match that of IE, instead of that of webkit. I am not clear if this is a bug or not (as the webkit approach to this value, imo, makes much more sense-- and is the one documented on mdn).

As such, the solution above does not work in the latest versions of FF/IE (they both grow indefinitely). Additionally, due to a quirk of innerText unique to IE, the solution above will not work for trailing whitespace (because it gets stripped, and EE can't tell a change even occured).

My browser literally updated itself right before I was going to submit a PR to make this a proper feature, which led to a lot of swearing and confusion.

Gankra · 2013-07-22T13:56:13Z

The develop branch now supports autogrow through autogrow:true, with more granular subcontrols if you pass autogrow an object instead.

OscarGodson · 2013-07-22T17:51:06Z

👍

OscarGodson · 2013-07-22T20:22:27Z

@gankro One weird thing, maybe it's just the docs?, but rather than the typable area getting pushed down it's like the whole page scrolls. Super weird feeling.

OscarGodson · 2013-07-22T20:23:14Z

I keep noticing myself holding enter down, making the textarea bigger, then scrolling back to the top. Can we not scroll the whole window down?

Gankra · 2013-07-22T20:24:27Z

Both are happening. The typeable area grows, and the page scrolls to follow the cursor It does create an odd stand-still illusion. I do this mostly for iOS support, where it seems more than happy to let the bloody thing scroll away. It could definitely be tweaked, but I think it works alright.

OscarGodson · 2013-07-22T20:30:09Z

If you're doing it mostly for mobile anyway to just sniff iOS? Feel awkward on desktop, personally. Feels like an old school typewriter where the paper comes out the top :P

techwraith · 2013-07-22T22:06:13Z

If you could leave that in as an option, that would be great. I'd love to
use that in Scotch (assuming we get good md syntax highlighting).

On Monday, July 22, 2013, Oscar Godson wrote:

If you're doing it mostly for mobile anyway to just sniff iOS? Feel
awkward on desktop, personally. Feels like an old school typewriter where
the paper comes out the top :P

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/132#issuecomment-21373135
.

OscarGodson · 2013-07-22T22:18:52Z

@techwraith leave which thing exactly? Moving the page upwards rather than pushing downwards? Have you played with it? Curious what your thoughts are on it.

techwraith · 2013-07-22T22:20:27Z

Typewriter mode :)

I use that in byword in full screen mode all the time. I haven't tried
@gankro's version yet though.

On Monday, July 22, 2013, Oscar Godson wrote:

@techwraith https://github.com/Techwraith leave which thing exactly?
Moving the page upwards rather than pushing downwards? Have you played with
it? Curious what your thoughts are on it.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/132#issuecomment-21380202
.

OscarGodson · 2013-07-22T22:22:16Z

Yeah, if you could clone, pull up index.html, and try it out that'd rock just to know we're talking about the same things and we could do it as an option (forced on iOS tho)

techwraith · 2013-07-22T22:27:50Z

Looks good to me, it works really well if the backgroud of the parent element of the editor is the same as the background of the editor.

OscarGodson · 2013-07-22T22:28:34Z

I'll have to try that out. Cool, maybe we'll make that an option then.

Gankra · 2013-07-23T13:41:55Z

It is actually

autogrow.scroll:true/false

It's just true by default. I just ran a double-check on all the browsers, and it seems to not just be iOS, but Safari in general. Both desktop and mobile are willing to let the cursor fall off the page.

I highly recommend keeping scroll:true as the default. I'd rather not have it browser sniff for safari, especially if that means inconsistent cross-browser behaviour.

It also makes the experience with preview/edit toggling better, as it scrolls to the same relative place when preview/edit causes a resize.

Just to be totally clear: if someone doesn't like it, it's always one config setting away. It seems it's just a matter of the default should be (and if browser sniffing should occur). I highly recommend true be the default for reasons stated above.

Gankra · 2013-07-25T16:06:02Z

So do you guys want me to change anything, or...?

OscarGodson · 2013-07-25T20:32:11Z

It's fine as is as long as I can turn that off for my stuff. If I get lots of people asking about it or wanting to turn it off we can look at it again. Thank you for doing all this!

basteyy · 2013-07-31T19:13:38Z

For those who want to use an maximum height: Just replace this in the hack (#132 (comment) ):

// Old
if (newHeight != oldHeight) {

// New
if (newHeight != oldHeight && newHeight < 1000 )
// and change 1000 to whatever ;)

OscarGodson · 2013-07-31T19:16:57Z

@basteyy EpicEditor now supports autogrow and has a maxHeight option :) see the README and the options table.

Gankra · 2013-07-31T21:12:38Z

Perhaps we should do a minor point release to have this stuff official?

OscarGodson · 2013-08-01T00:48:30Z

indeed. This weekend I'll do it.

basteyy · 2013-08-02T13:33:06Z

#132 (comment) Okay, i just read the docs on your website ;)

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 8, 2013

Ticket OscarGodson#132 - Adding in doctypes

1e822df

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 8, 2013

Ticket OscarGodson#132 - autogrow support

d583c87

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 8, 2013

Ticket OscarGodson#132 - Adding in doctypes

916e9c1

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 8, 2013

Ticket OscarGodson#132 - autogrow support

cf25288

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 8, 2013

Ticket OscarGodson#132 - documenting autogrow

1a395df

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 8, 2013

Ticket OscarGodson#132 - removing doctype from previewer for FF support

41fd59b

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 8, 2013

Ticket OscarGodson#132 - adding IE support hack

ecf557c

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 9, 2013

Ticket OscarGodson#132 proper cross-browser solution

754440a

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 9, 2013

Ticket OscarGodson#132 rebuilding

95509d8

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 9, 2013

Ticket OscarGodson#132 - adding tests, fixing firefox import

db78a76

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 9, 2013

Ticket OscarGodson#132 - autogrow final draft

5408edd

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 9, 2013

Ticket OscarGodson#132 - removing useless event listener

d0d0521

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 9, 2013

Ticket OscarGodson#132 - adding bigger timeouts for view changes

7e1f48c

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 9, 2013

Ticket OscarGodson#132 - using __update event

e4bb115

Gankra added a commit to Gankra/EpicEditor that referenced this issue Jul 11, 2013

Ticket OscarGodson#132 - simplifying repeated code

a640e87

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 11, 2013

Ticket OscarGodson#132 - updating docs to reflect autogrow's influence

7e3849e

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 11, 2013

Ticket OscarGodson#132 - fixing fullscreen

d8405d7

Gankra pushed a commit to Gankra/EpicEditor that referenced this issue Jul 19, 2013

Ticket OscarGodson#132 - fixing scrollbars when using maxHeight

11d3ce5

Gankra closed this as completed Jul 22, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Autogrow support #132

Autogrow support #132

OscarGodson commented Jun 18, 2012

cornae commented Aug 23, 2012

jipiboily commented Sep 23, 2012

OscarGodson commented Jan 28, 2013

arghav commented Feb 7, 2013

Gankra commented Jun 26, 2013

Gankra commented Jun 26, 2013

Gankra commented Jun 26, 2013

Gankra commented Jun 26, 2013

OscarGodson commented Jun 26, 2013

Gankra commented Jun 27, 2013

OscarGodson commented Jun 27, 2013

Gankra commented Jun 27, 2013

Gankra commented Jul 8, 2013

Gankra commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

Gankra commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

techwraith commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

techwraith commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

techwraith commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

Gankra commented Jul 23, 2013

Gankra commented Jul 25, 2013

OscarGodson commented Jul 25, 2013

basteyy commented Jul 31, 2013

OscarGodson commented Jul 31, 2013

Gankra commented Jul 31, 2013

OscarGodson commented Aug 1, 2013

basteyy commented Aug 2, 2013

Autogrow support #132

Autogrow support #132

Comments

OscarGodson commented Jun 18, 2012

cornae commented Aug 23, 2012

jipiboily commented Sep 23, 2012

OscarGodson commented Jan 28, 2013

arghav commented Feb 7, 2013

Gankra commented Jun 26, 2013

Gankra commented Jun 26, 2013

Gankra commented Jun 26, 2013

Gankra commented Jun 26, 2013

OscarGodson commented Jun 26, 2013

Gankra commented Jun 27, 2013

OscarGodson commented Jun 27, 2013

Gankra commented Jun 27, 2013

Gankra commented Jul 8, 2013

Gankra commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

Gankra commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

techwraith commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

techwraith commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

techwraith commented Jul 22, 2013

OscarGodson commented Jul 22, 2013

Gankra commented Jul 23, 2013

Gankra commented Jul 25, 2013

OscarGodson commented Jul 25, 2013

basteyy commented Jul 31, 2013

OscarGodson commented Jul 31, 2013

Gankra commented Jul 31, 2013

OscarGodson commented Aug 1, 2013

basteyy commented Aug 2, 2013