Miles By Motorcycle
established 11 years ago
I think I've managed to improve the editor.Subscribe to this blog RSS Feed
    You must be logged in and belong to this group to post to this forum.
    1 of 7
    Yermo
    10 years ago
    First, I wanted to thank you all for the patience you've shown when using this post editor I've written. Under various circumstances it fails miserable.

    A little background:

    One of the key things I want to do with Miles By Motorcycle is to link everything together and do so visually.

    For instance, you've seen how you can insert photos, videos, links, maps and other 'things' inline in the conversation visually, right? As in:

    Video #9040
    Yermo
    10 years ago

    TeamZilla Rides the Tail of the Dragon

    Some folks from RevZilla ride Deals Gap

    (I clicked the INSERT button below, select Video and searched over Yesterday and clicked INSERT next to the video I wanted inserted into the post).

    So Facebook does it differently. You can have one thing associated with a post. It's either a link, a photo, a note, etc. But you can't do multiple photos in line in one post. So adding a photo like this one in-line:

    Unable to embed shared object. Sharing permissions error?
    Isn't something they support. That has always bugged me. 

    I really wanted to be able to do all this stuff in line visually so we can could see what we're talking discussing right here right now. When someone mentions the SMH10 communicator that so many of us use, wouldn't it be nice if there was a nicely descriptive with picture link right here in line? 

    Embedded Object Error
    (Unfortunately, it looks like I have broken inserting links .. I will fix that tomorrow.)

    Nevertheless, the whole point was that I wanted to be able to insert all these things inline in the conversation. These "things" become words in the language of motorcycling and in the end my hope is that it will make the conversations more meaningful, while they are happening, and then later when we refer back to them. 

    The other thing about what I've done here, each of these things that we insert into the conversation gets saved separately, so you can go to advanced search for links for this week, see the smh10, and click on its permalink. You'll notice at the bottom where the comments are there's a tab called Mentions. Click on that and you'll see that it's mentioned in this post. 

    So we can find the things we're looking for in a number of ways. 

    Unfortunately, there's nothing in the browser that makes this easy to do and there was no code I could find Out There that already did this. 

    So I had to write this editor from scratch myself. The first version took me over a month full time to write. 

    And as we all know, it's been buggy as hell. 

    But there's a reason for it's bugginess, which is why Facebook does not do this and why so many other people haven't even attempted this.

    Because it's actually quite hard and terribly fiddly to get to work. I'm constrained by what the browser makers provide me and when it comes to this box we can type into, each provider does it very very differently. They each have different bugs that you have to, through trial and error, figure out and then work around. And there are all kinds of different side effects. 

    I've dreaded getting back into this and after doing a bunch of research and seeing how many other people have abandoned the 'rich text' way of doing things in favor of the kinds of things you see on ADVRider (ever wonder why they do all that ugly text stuff?) I was on the verge of just abandoning this "rich_textarea" editor of mine and just doing the simple thing that other forums do. 

    But I just don't find that compelling at all. :( 

    I spent a day looking at other projects and evaluated a few that I thought might make a better replacement. Some looked really promising, but all failed in one way or another. In addition I realized I would have to rewrite about 75% of the code that makes up this editor (at it stands it's over 5000 lines).

    So I tried to see if there was something I could do to at least to improve things and it turns out there was something that had been staring me in the face the whole time that would allow me to simplify the problem. It involved telling the browser "dude, I've got this" and rewriting a bunch of the things the browser does for you (differently in each browser case mind you), like for instance, scrolling the scroll bar to the right when you type and make sure the ENTER key works like it should. But it turns out doing this the brute force way allowed me to get it to work more or less the same in all browser finally allowing me to get the arrow keys, backspace and delete keys working almost like they should and my hope is that I've finally gotten rid of that gawdawful double and expanding newline problem that was putting all that whitespace where it doesn't belong.

    I've tested it in Chrome, FireFox, MSIE 10 and Safari and it works better than it did in all of them in my testing. There are some new problems, like moving the dialog causes it to jump to the bottom of the page and entering links is broken now. In some cases you have to press delete twice to delete the first character on a line and I'm sure there'll be some other problems that will arise. And I just discovered I've broken the delete key when pressed in the middle of the line. That's also something I'll fix tomorrow.

    But hopefully, with a little more work, this will turn into a more useful tool. 

    It's strange how this editor component, which I consider the lynchpin of the whole project, which is actually the smallest part, has turned out to be by far the most painful. 

    I hate browsers. I really do hate browsers with a passion. There is only pain and suffering there.
    2 of 7
    Yermo
    10 years ago
    I stand corrected. It looks like pasting of new links works as long as you haven't done a search and inserted something from the database. (Via the INSERT button.)

    But nevertheless, I will fix it. 

    If you notice problems, of which I'm sure there will be many, please let me know. 

    Thanks!
    3 of 7
    Yermo
    10 years ago
    I made some more progress today, I think.

    The DELETE key should now be working correctly in all browsers and should no longer jump to the beginning of the line.

    The annoying bug involving multiple new lines being added when you edited and resaved a post has been fixed. 

    The bug under MSIE and FireFox where the dialog box jumps to the bottom of the page when you try to drag the dialog is not my bug. It's a jQuery UI bug. They say it's not going to get fixed until the next version, so in the meantime I've disabled dragging on the dialog boxes. 

    There are still some edge cases that don't work correctly, but overall this should be a huge improvement over what we had before. 
    4 of 7
    buffalo
    10 years ago
    Nice work!
    5 of 7
    Yermo
    10 years ago
    Thanks! Let me know if you notice any new problems.
    6 of 7
    Yermo
    10 years ago
    Another day, another bug fix. 

    It seems that pasting of links wasn't working if you used the scrollbar at all. That should work now.

    The way it's supposed to work, after pasting a link press SPACE and the dropdown allowing you to tag it will appear. Click SAVE.
    7 of 7
    Yermo
    10 years ago
    Another bug fix. The editor was getting confused if you pressed ENTER as the first thing you entered into the window.