StackEdit 4 beta preview

[benweet]

This is a dedicated ticket for any feedback on StackEdit 4 beta preview (https://stackedit-beta.herokuapp.com/).

Your feedback is much appreciated!

If you like it, say it. If you don't, or you haven't noticed any difference, say it. If you have any suggestion, I'm happy to hear it. If you just found a bug, declare a new issue.

If you like StackEdit, please give it 5 stars on the Chrome Web Store...

Cheers!

[endolith]

would be nice if we could auto-upload to imgur from the image button, or even include images as data URLs?

[jeromesun14]

When I export to disk with format PDF, it only exported "Created with Raphaël 2.1.0aabbccdd" rather than a flow drawing.

my flow code is following:

a=>operation: aa
b=>operation: bb
c=>operation: cc
d=>operation: dd

a->b->c->d

[kbilsted]

I prefer to smaller / narrower coding font used in the stackedit v3.xx. Maybe it could be configurable which coding font to use?

[mospaw]

I am trying to "Publish on WordPress" and my blog is in a subfolder (http://mydomain/thoughts) and not the root URL. It will accept the root URL (which is a different blog, but no Jetpack and not where I want to publish) but will not accept URLs with a "/" in them, giving me the glowing red error.

[canpolat]

@mospaw You don't need to provide the subfolder URL to be able to publish to a blog installed in a subfolder. When you provide the root URL, in the next window you should be able to select the blog installed in the subfolder. Note that Jetpack has problems with this setup though. I had to use a subdomain instead of a subfolder (http://blog.mydomain.com). If you google a bit, I'm sure you will find the issue discussed in Wordpress blogs.

[superChing]

HI ,really like it with markdown extra and table of content.

one inconvenience is : photo insertion not allow to paste the local one and auto upload. If I capture/copy a photo in Adobe PDF ,I can't directly paste it to and auto upload it. Even manually upload fails because you need explicit path of file , while the one in hand is a "copy" without explicit path.

I think the photo paste(when pasting, it auto writes markdown and local path for you ) is possible because I've seen it at Marxico editor.

[atomlab]

Hi. Realy need support bitbucket.org like github.com

[tomao]

@benweet @martin0258 There is a client side library to handle plain text to class diagram conversion : http://plantuml.sourceforge.net/jquery.html I currently use "PlantText UML Editor" to generate an image that i included in stackedit.

[benweet]

@tomao PlantUML is Java library. The jquery plugin is just a wrapper to a web service (not usable offline).

[Darkhogg]

A bit of a bug report: Monospaced font in editor is not really monospaced for me.

I'm using Chromium on Linux (Manjaro Linux), it was like this on Chrome also.

The "computed style" tab of the debugger shows 'Source Code Pro', monospace as font family. Leaving it only as monospace solves the problem for me.

[azu]

https://github.com/benweet/stackedit/issues/385#issuecomment-42464385 +1 FWIW, ACE has IME issue. (Japanese / Chinese IME)

CodeMirror( CodeMirror with IME mod is more better) and Orion are free of major problems about IME. I know that will be good for IME user, but IME user may seem minority...

[hanxue]

@benweet is the beta source code available on Github? Don't see it in the dev branch

[benweet]

@hanxue No sorry, not released yet.

[levacic]

We are currently using StackEdit at our company to write various documentation, both for in-house use, as well as for stuff like project briefs, functional and technical specification documents for clients, etc.

Due to client's needs, we usually export documents as PDF, so that they may be printed (as a developer, I understand that some stuff just isn't meant to be printed, but we still need to do it). There are a few things which we've noticed that could be really helpful for getting nicely formatted documents. Sorry if the format of the suggestions seems too formal or something - we realize this is open-source software you're making on your own time, and we're very thankful for what you've already created, it's an amazing tool!

1. Automatic "responsive" image scaling

So, we sometimes include stuff like database diagrams in our documentation. When we upload an image, there is an option to set its width in pixels - this resizes the image to that width, while keeping its ratio. However, when exporting to PDF, the image size will depend on the printing resolution, the paper size, etc. Sometimes, to fit the image into the page, all of the text gets scaled down into a thin column with a tiny font-size instead of stretching horizontally to fill the page.

So what we do is upload an image in its natural size (which is large enough), then scroll down to the end, copy the URL of the uploaded image, and add an <img src="http://example.com/image.gif" width="100%"> (we know this is not valid HTML5 but it works as a hack and is a bit easier/more readable than doing style="width:100%"), with newlines before and after the image. This has the effect that the image is stretched horizontally to the width of the browser, and, more importantly, to the width of the page when exported to PDF, which looks nicely aligned. What we'd like is a simpler way to accomplish this - basically, an option when uploading an image to make it stretch horizontally to 100% (or maybe even an arbitrary percentage, and make it centered).

2. A shortcut for page breaks

Since our target output is a PDF document, and a lot of the time we need to be able to add custom page breaks, to get a nice formatting, we copy/paste <div style="page-break-after: always;"></div>, which works great. It would be cool if there was a shortcut for this, perhaps in some custom Markdown syntax (I wasn't able to find any existing implementations of this, though).

---

Cheers, and thanks for the great tool!

[benweet]

@levacic You could use a custom extension like this one (to be copy/pasted in Settings>Extensions>UserCustom):

    userCustom.onPagedownConfigure = function(editor) {
        editor.getConverter().hooks.chain("postConversion", function(text) {
            text = text.replace(/<img /g, '<img width="100%" ');
            text = text.replace(/<p>\[br\]<\/p>/g, '<div class="page-break-after"></div>');
            return text;
        });
    };

And add this in the <head> of your PDF template (Settings>Advanced>PDF template):

<style>.page-break-after { page-break-after: always; }</style>

This will:

• add the width="100%" attribute to all your <img> tags (I agree that would be a nice option to add)

• and convert this:

  
  [br]
  

  into <div class="page-break-after"></div> (using a CSS class because the style attribute is subject to XSS attack, it wouldn't work in StackEdit 4 with HTML Sanitizer extension enabled).

[TechArtisanIO]

I just started using StackEdit and love what I see. Thanks for all the hard work!

I wonder if instead of having the little flyout menu in the bottom right it could be moved up to the actual menu bar at the top as a drop down menu. I would probably put in in the upper right with the sync and publish icon. It took me forever to find the flyout the first go around as it is very hard to see/recognize. I also agree with Xeoncore on styling the right sidebar to look like he suggested. It better matches the rest of the application. At some point it would be awesome to simplify uploading a custom css file. The current process of changing the styles is a bit of pain because of limited screen space, having to mess with javascript (even if just a little) and the fact that the user custom extension is buried way down the list. It would be nice if I could just point to a .css file and click 'upload' and stackedit would take care of the rest. Even just creating a separate Custom extension tab under settings with a larger work area would be a big improvement.

[rkennesson]

I have an issue with viewing the editor with the live viewer to the side. I have my desktop split in to using Windows key + left and right. When I use the page up / down keys I get a shift in the left margin that makes the text a little hard to read.

Hope this helps.

Using Chrome. Firefox Works fine.

Before	After

[rkennesson]

Also in chrome you can go directly to the top or bottom of the page by pressing Ctrl + Home / End you might want to add that to the shortcut page. I don't know if it is changeable but you could just grey out the item and make a note that it is a browser shortcut.

"Ctrl + Del" will also delete the word the cursor is in front or or delete the rest of a word up to the point of a space if it in the middle of a word.

I was messing around and I tried to find a combination that would open the editor only or vice versa and i thought I found one but couldn't figure out how I did it. Maybe you guys would know.

"Ctrl + m" will bring up the comment windows. I looked at the non-beta version and I din't see this one or the others that I mentioned as shortcuts on the shortcuts page.

[SquidLord]

Beta 4 is super picky about which comes first, URL references or footnotes. If the refs come after the footnotes, they aren't seen as references at all.

[Viktorminator]

@benweet Hi, thank you for this app! :+1: I really enjoy it and use very often for blogging purposes. I have a suggestion to add a feature in settings - "Save to" - "Set a folder". It will be helpful because, for example, in my case during work I save files via Chrome into ~/Downloads/ and during blogging I want to save my files in ~/Repositories/myblog/_posts/ . So changing setting in Chrome here and there will be boring... Hopefully you'll find a way to add this feature. UPD: Also it'd be great if images would take that path setting and appear in preview window.

[manuti]

Its shut down completly my computer, not only the browser, every time I open the right panel. I use Chromium on Ubuntu 14.04 64 bits

[erikr]

It would be nice to run more than one instance of StackEdit at a time in the same browser.

[endolith]

+1 to multiple instances with different documents!

[alexilyaev]

Hi, I love the 4th edition! :-)

The headings lost a bit of their contrast, would like to see them reverted to weight: 500; as it used to be.

In default.css:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 300;
    line-height: 1.1;
    color: inherit;
}

[r2d2rigo]

Been trying the editor and I think it's awesome for us people that aren't used to Markdown and have to look at the syntax all the time (specially with the default document that explains the entire formatting).

I have a suggestion when publishing to WordPress (I don't know if it's available in other blog providers), but being able to publish the post as Draft would be nice, so it can be then edited to add extra tags/metadata from WordPress before publishing it.

[alexilyaev]

Publishing a new document to GitHub fails with a 404 error. Tried with the same settings as in the v3, where it does work. The username field is missing in v4, but adding it doesn't help as well.

[benweet]

@alexilyaev Yes I changed the GitHub publish dialog slightly in version 4. Just add the repo url instead of repo name + user.

[alexilyaev]

@benweet Awesome, makes more sense. Perhaps we can add a line that explains it.

Also wanted to ask, would it be possible to Synchronize with a file on GitHub? And, when synchronizing with Drive, I don't see shared folders (v3 and v4), so I can't work on a file that someone shared with me. I have a Can Edit permission on those folders.

[orelby]

This is so awesome. Thank you so much! Finally a Markdown editor that atually supports RTL, and what a wonderful one.

I am so gonna see how it works behind the scenes if and when I have the time, and assist in improving it (is it even possible? :smile:).

A couple of suggestions:

• It wouldn't hurt to add a little padding in the top of the editor and the preview; the content is too close to the upper edge.
• When the edit mode is RTL, the editor and preview should switch sides.
• An option to choose Kramdown (it has better syntax and more options).
• Config/extention for easily adding custom CSS to the preview globaly or in a certain folder.

Again, thank you guys!

[alexilyaev]

Shared folders on Drive can be seen by dragging the shared folder on top of "My Drive". and then it can be accessed and synced on StackEdit.

@benweet I keep getting a pop up requiring me to authorize StackEdit with my Google account (using Drive sync).

[benweet]

@alexilyaev Yes I have this issue sometimes. Try to signout from google and signin again.

[alexilyaev]

@benweet I signed out and signed it again, didn't help. I'm signed into a couple accounts on Google, btw.

[ajmccall]

"You are being redirected to Google authorization page." is shown quite regularly.

This may be a result of being logged into two Google accounts and I'm using the non-default one to sync my StackEdits.

Thanks

[design-innovations]

Is there any way to add the ability for links to open into new pages? For some reason it wouldn't even do it with HTML using _blank. I just started using this so maybe I'm missing something somewhere. Incredible job with this! I'm also wanting a default max-width:100% on images but haven't gotten that working yet either. I'll keep trying!

[alexilyaev]

@learncss See this question on StackOverflow: http://stackoverflow.com/questions/4425198/markdown-target-blank

Remember you can use plain HTMl in your MarkDown as well.

[alexilyaev]

@benweet @learncss is right, the style attribute doesn't work in the Beta version:

<p style="color: red">Some text</p>

[benweet]

@learncss @alexilyaev That's probably because of the new "HTML Sanitizer" extension. Disable it at your own risk...

[alexilyaev]

@benweet Confirmed

[alexilyaev]

@benweet The beta version is missing the Shortcuts tab in the settings. Did it move?

Also, can we add a shortcut to create comments?

<!-- HTML Comment -->
<!--- StackEdit Comment -->

[benweet]

@alexilyaev That would be the new "Shortcuts" extension.

It's not really documented yet, but I suppose you can play with the expand() function. Also, there is a new feature to add inline comments/discussions in the beta, see the "Comments" button in the navigation bar.

[alexilyaev]

@benweet The inline comments are nice.

About the Shortcuts extension, I think that comments are a basic thing to use. Would be nice to have a shortcut for that. Or have a way to define where the caret will be placed after the expand function result.

[lukehoggett]

When I have document synced with Google Drive the Google auth request comes up very regularly, perhaps every 5 minutes.

Anything I should be doing to stop this and ensure the auth is persistent?

[benweet]

@lukehoggett Signout from google and signin again.

[joezeng]

For some reason, the editor pane sometimes "breaks loose" from the rest of the program, and when the text in the editor pane is updated, neither the preview is updated nor the file saved, even when I press Ctrl+S (once I save and reload the page, the file is back to the way it was before I changed it).

It usually happens when I'm at the bottom of the file.

[alexilyaev]

@lukehoggett As @ajmccall mentioned, this happens when you're logged in to 2 Google accounts, and then you sync in StackEdit with the non default one. Meaning, you signed into 1 account, then added another, then synced with the 2nd. The first 1 is the default.

You can check which one is default by clicking on your profile pic (or email) on Google.com. If it doesn't say (default) after one of the accounts, then it's the first one.

Click Sign Out, then login to the account you want to sync with, then add the other one.

@benweet Just re-signing doesn't help, and it requires the tedious process I mentioned above. Can we fix it?

[benweet]

@alexilyaev I can't reproduce the issue by syncing with 2 different accounts. I would be happy to fix if I could reproduce it. By the way, multi account is not officially supported by the JS client library.

[alexilyaev]

@benweet I'm syncing only one file, but logged in into 2 accounts in Google.

Reproduction steps:

1. Logout of all accounts in Google
2. Log in to one account
3. Add a second account
4. Sync a file from Drive of the second account
5. Refresh the page

Using Chrome 36.

[tinguelyp]

Suggestion:

• Could be awesome if we can juste drag and drop an image from the localhost machine to document!

[Construction]

suggestion：

• it will be very convenient if local image files can be inserted directly

[Naatan]

Suggestion:

• Please add a setting to disable sync-scrolling