1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-29 18:19:44 +02:00

markdown preview pane change

This commit is contained in:
Harvey Kandola 2016-11-12 13:13:13 -08:00
parent f8de397f33
commit e7431954a0
4 changed files with 48 additions and 29 deletions

View file

@ -50,8 +50,9 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
if (_.isUndefined(exists)) { if (_.isUndefined(exists)) {
link.orphan = true; link.orphan = true;
} else { } else {
if (link.linkType === "section") {
self.attrs.gotoPage(link.targetId); self.attrs.gotoPage(link.targetId);
return false; }
} }
} }

View file

@ -18,24 +18,22 @@ const {
export default Ember.Component.extend({ export default Ember.Component.extend({
link: service(), link: service(),
editMode: true,
isDirty: false, isDirty: false,
pageBody: "", pageBody: "",
pagePreview: "",
height: $(document).height() - 450,
didReceiveAttrs() { didReceiveAttrs() {
this.set("pageBody", this.get("meta.rawBody")); this.set("pageBody", this.get("meta.rawBody"));
}, },
didInsertElement() { didInsertElement() {
let height = $(document).height() - $(".document-editor > .toolbar").height() - 130; $("#section-markdown-editor").css("height", this.get('height'));
$("#section-markdown-editor, #section-markdown-preview").css("height", height); $("#section-markdown-preview").css("height", this.get('height'));
this.renderPreview(); $("#section-markdown-editor").off("keyup").on("keyup", () => {
let self = this; this.set('isDirty', true);
$("#section-markdown-editor").off("keyup").on("keyup", function () {
self.renderPreview();
self.set('isDirty', true);
}); });
}, },
@ -43,15 +41,26 @@ export default Ember.Component.extend({
$("#section-markdown-editor").off("keyup"); $("#section-markdown-editor").off("keyup");
}, },
renderPreview() { actions: {
let md = window.markdownit({ toggleMode() {
linkify: true this.set('editMode', !this.get('editMode'));
Ember.run.schedule('afterRender', () => {
if (this.get('editMode')) {
$("#section-markdown-editor").off("keyup").on("keyup", () => {
this.set('isDirty', true);
}); });
$("#section-markdown-editor").css("height", this.get('height'));
} else {
let md = window.markdownit({ linkify: true });
let result = md.render(this.get("pageBody")); let result = md.render(this.get("pageBody"));
$("#section-markdown-preview").html(result);
this.set('pagePreview', result);
$("#section-markdown-preview").css("height", this.get('height'));
}
});
}, },
actions: {
onInsertLink(link) { onInsertLink(link) {
let linkMarkdown = this.get('link').buildLink(link); let linkMarkdown = this.get('link').buildLink(link);

View file

@ -33,7 +33,6 @@ export default Ember.Service.extend({
return this.get('ajax').request(`links/${folderId}/${documentId}/${pageId}`, { return this.get('ajax').request(`links/${folderId}/${documentId}/${pageId}`, {
method: 'GET' method: 'GET'
}).then((response) => { }).then((response) => {
console.log(response);
return response; return response;
}); });
}, },

View file

@ -1,16 +1,26 @@
{{#section/base-editor document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}} {{#section/base-editor document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> {{#if editMode}}
{{focus-textarea id="section-markdown-editor" class="mousetrap bordered" value=pageBody}} <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
</div> <div class="margin-bottom-10" >
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> <a {{action 'toggleMode'}}>Preview</a>
<div id="section-markdown-preview" class="mousetrap bordered wysiwyg">
</div> </div>
{{focus-textarea id="section-markdown-editor" class="mousetrap wysiwyg" value=pageBody}}
</div> </div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"> <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
{{document/edit-tools document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}} {{document/edit-tools document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
</div> </div>
{{else}}
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="margin-bottom-10" >
<a {{action 'toggleMode'}}>Edit</a>
</div>
<div id="section-markdown-preview" class="mousetrap wysiwyg bordered">
{{{pagePreview}}}
</div>
</div>
{{/if}}
</div> </div>
</div> </div>
{{/section/base-editor}} {{/section/base-editor}}