The Wayback Machine - https://web.archive.org/web/20210201233259/https://github.com/psolom/RichFilemanager/issues/88
Skip to content

/ RichFilemanager

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Side-by-side edit and preview of Markdown files #88

Closed
dereks opened this issue Jan 19, 2017 · 7 comments
Closed

Side-by-side edit and preview of Markdown files #88

dereks opened this issue Jan 19, 2017 · 7 comments
Labels
feature request
Milestone
2.3.0

Comments

@dereks
Copy link
Contributor

@dereks dereks commented Jan 19, 2017

I would like to edit Markdown files with the ACE editor, incl. syntax highlighting:

https://ace.c9.io/

...and then see the rendered HTML results in real time using Markdown-it:

https://markdown-it.github.io/

This is how the Realms wiki does it, and it's awesome:

https://dl.dropboxusercontent.com/u/13941904/screenshots/realms/2.png

(Realms uses ACE and Markdown-it.)

I am willing to help code it up, but I would need some onboarding help. I'm also willing to pay a bounty for this.

Thank you!
@psolom
Copy link
Owner

@psolom psolom commented Jan 19, 2017

This one is based on #85 and #87.
@dereks dereks mentioned this issue Jan 19, 2017
Closed
@psolom
Copy link
Owner

@psolom psolom commented Jan 21, 2017

Partially commented wiithin related issue #87.

Just to recap:

I believe CodeMirror is able to meet your requirements and it's possible to integrate it with a side-by-side editor. However the implementation of this feture is time consuming and I have other stuff in my todo list. If you want to implement this feature then I would gladly accept your pull request.

Leaving this issue open for some time as a reminder of the possible feature implementation.
@dereks
Copy link
Contributor Author

@dereks dereks commented Feb 9, 2017

Hi! I've been working hard on this feature. Here are some screenshots.

markdown_preview

markdown_side-by-side

As you edit the file in the side-by-side CodeMirror editor, the markdown is rendered into HTML in real time (with each keystroke). This gives the user an instant preview of the rendered markdown (like Realms-Wiki). Clicking "Save" saves the file to the connector.

I'll submit a pull request shortly. (I just merged in the latest dev branch, so it should be up-to-date.) I've only tested it lightly under Chrome, so I encourage more testing and a detailed code review. I'd like to make this feature robust. Thanks!
@psolom
Copy link
Owner

@psolom psolom commented Feb 9, 2017

Wow! Looks great.
Seems you did a really good job.
Would be great if you will test it for other browsers.
Looking forward you to polish it and submit a PR.
@dereks dereks mentioned this issue Feb 9, 2017
Merged
@dereks
Copy link
Contributor Author

@dereks dereks commented Feb 9, 2017

There was one minor bugfix for Firefox. In Firefox, <img src="" ...> shows a broken image due to invalid src, but <img data-bind="attr: {src: null}" > does not show the broken image icon. Fixed and pushed.
@dereks
Copy link
Contributor Author

@dereks dereks commented Feb 10, 2017

(I seem to have lost a github comment somehow...? I thought I had posted these screenshots already.)

I added a default "DirIndex" file name for rendering, either above or below the dir list contents (by config):

markdown_above

Here the Markdown is rendered below the file list:

markdown_below
psolom added a commit that referenced this issue Feb 11, 2017
@psolom
markdown: covered "exclusiveFolder" case,; improvements #88
811f4f8
@psolom psolom added this to the 2.3.0 milestone Feb 12, 2017
psolom added a commit that referenced this issue Mar 5, 2017
@psolom
implement Editor and Renderer models, lot of improvements for markdow…
bec87b2 
…n preview and rendering #88
psolom added a commit that referenced this issue Mar 6, 2017
@psolom
bugfix: file data isn't updated in preview mode after save updated co…
494d9cd 
…ntent #88
psolom added a commit that referenced this issue Mar 8, 2017
@psolom
extended Render model to cover folder index file preview #88
449cc7e
psolom added a commit that referenced this issue Mar 11, 2017
@psolom
unify renderers interface, no need specify renderer type in HTML #88
397e496
psolom added a commit that referenced this issue Mar 12, 2017
@psolom
bugfix: scrollbar issue with renderer enabled in view mode #88
dec891e
psolom added a commit that referenced this issue Mar 12, 2017
@psolom
update descriptive panel content on close previewer #88
4d0b2ab
psolom added a commit that referenced this issue Mar 15, 2017
@psolom
instantly render changes of editor content based on renderer `interac…
7e0be63 
…tive` option #88
@psolom
Copy link
Owner

@psolom psolom commented Mar 17, 2017

Released in v2.3.0
@psolom psolom closed this Mar 17, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request
2 participants
@dereks @psolom