Overleaf/services/web/app/views/project/editor/editor.jade

div.full-size(
	ng-show="ui.view == 'editor'"
	layout="pdf"
	layout-disabled="ui.pdfLayout != 'sideBySide'"
	mask-iframes-on-resize="true"
	resize-on="layout:main:resize"
	resize-proportionally="true"
	initial-size-east="'50%'"
	minimum-restore-size-east="300"
	allow-overflow-on="'center'"
)
	.ui-layout-center(ng-controller="ReviewPanelController", ng-class="{'has-review-panel': ui.reviewPanelOpen, 'has-entries': reviewPanel.hasEntries }")
		.loading-panel(ng-show="!editor.sharejs_doc || editor.opening")
			span(ng-show="editor.open_doc_id")
				i.fa.fa-spin.fa-refresh
				|   #{translate("loading")}...
			span(ng-show="!editor.open_doc_id")
				i.fa.fa-arrow-left
				|   #{translate("open_a_file_on_the_left")}

		#editor(
			ace-editor="editor",
			ng-show="!!editor.sharejs_doc && !editor.opening"
			theme="settings.theme",
			keybindings="settings.mode",
			font-size="settings.fontSize",
			auto-complete="settings.autoComplete",
			spell-check="!anonymous",
			spell-check-language="project.spellCheckLanguage",
			highlights="onlineUserCursorHighlights[editor.open_doc_id]"
			show-print-margin="false",
			sharejs-doc="editor.sharejs_doc",
			last-updated="editor.last_updated",
			cursor-position="editor.cursorPosition",
			goto-line="editor.gotoLine",
			resize-on="layout:main:resize,layout:pdf:resize,layout:review:resize,review-panel:toggle",
			annotations="pdf.logEntryAnnotations[editor.open_doc_id]",
			read-only="!permissions.write",
			file-name="editor.open_doc_name",
			on-ctrl-enter="recompileViaKey",
			syntax-validation="settings.syntaxValidation",
			review-panel="reviewPanel",
			on-scroll="onScroll",
			scroll-events="scrollEvents",
			track-changes-enabled="trackChangesFeatureFlag",
			track-new-changes= "reviewPanel.trackNewChanges",
			changes-tracker="reviewPanel.changesTracker",
			doc-id="editor.open_doc_id"
		)
		#review-panel
			.review-panel-toolbar
				| Track Changes 
				input(type="checkbox", ng-model="reviewPanel.trackNewChanges")
			.review-panel-scroller
				.rp-entry-list(
					review-panel-sorted
					ng-if="reviewPanel.subView === SubViews.CUR_FILE"
				)
					.rp-entry-wrapper(
						ng-repeat="(entry_id, entry) in reviewPanel.entries[editor.open_doc_id]"
					)
						.rp-entry-callout(
							ng-class="'rp-entry-callout-' + entry.type"
						)

						div(ng-switch="entry.type")
							.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
								i.fa.fa-pencil
							.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
								i.rp-icon-delete
							.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
								i.fa.fa-comment
							.rp-entry-indicator(
								ng-switch-when="add-comment"
								ng-if="!commentState.adding"
								ng-click="startNewComment(); toggleReviewPanel();"
							)
								i.fa.fa-commenting

						.rp-entry(
							ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
						)
							div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
								.rp-entry-header
									.rp-entry-action-icon(ng-switch="entry.type")
										i.fa.fa-pencil(ng-switch-when="insert")
										i.rp-icon-delete(ng-switch-when="delete")

									.rp-entry-metadata
										p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
										p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
									.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
								.rp-entry-body(ng-switch="entry.type")
										span(ng-switch-when="insert") Added 
											ins.rp-content-highlight {{ entry.content }} 
										span(ng-switch-when="delete") Delete 
											del.rp-content-highlight {{ entry.content }} 
								.rp-entry-actions
									a.rp-entry-button(href, ng-click="rejectChange(entry_id)") 
										i.fa.fa-times
										|  Reject
									a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
										i.fa.fa-check
										|  Accept
							div(ng-if="entry.type == 'comment'")
								.rp-comment(
									ng-repeat="comment in entry.thread"
									ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';"
								)
									.rp-avatar(
										ng-if="!users[comment.user_id].isSelf;"
										style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);"
									) {{ users[comment.user_id].avatar_text }}
									.rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);")
										p.rp-comment-content {{ comment.content }}
										p.rp-comment-metadata
											| {{ comment.ts | date : 'MMM d, y h:mm a' }}
											|  • 
											span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }}
								.rp-comment-reply
									textarea.rp-comment-input(
										ng-model="entry.replyContent"
										ng-keypress="handleCommentReplyKeyPress($event, entry);"
										placeholder="Hit \"Enter\" to reply"
									)
								.rp-entry-actions
									a.rp-entry-button(href) 
										i.fa.fa-check
										|  Mark as resolved
							
							div(ng-if="entry.type == 'add-comment'")
								a.rp-add-comment-btn(
									href
									ng-if="!commentState.adding"
									ng-click="startNewComment()"
								) 
									i.fa.fa-comment
									|  Add comment
								div(ng-if="commentState.adding")
									.rp-new-comment
										textarea.rp-comment-input(
											ng-model="commentState.content"
											placeholder="Add your comment here"
										)
									.rp-entry-actions
										a.rp-entry-button(href, ng-click="cancelNewComment()") 
											i.fa.fa-times
											|  Cancel
										a.rp-entry-button(href, ng-click="submitNewComment()") 
											i.fa.fa-comment
											|  Comment

				.rp-overview-entry-list(
					ng-if="reviewPanel.subView === SubViews.OVERVIEW"
				)
					.rp-overview-file(
						ng-repeat="(doc_id, entries) in reviewPanel.entries"
					)
						.rp-overview-file-header
							| {{ doc_id }}
						.rp-entry-wrapper(
							ng-repeat="(entry_id, entry) in entries"
						)
							.rp-entry-callout(
								ng-class="'rp-entry-callout-' + entry.type"
							)

							div(ng-switch="entry.type")
								.rp-entry-indicator(ng-switch-when="insert", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
									i.fa.fa-pencil
								.rp-entry-indicator(ng-switch-when="delete", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
									i.rp-icon-delete
								.rp-entry-indicator(ng-switch-when="comment", ng-class="{ 'rp-entry-indicator-focused': entry.focused }")
									i.fa.fa-comment
								.rp-entry-indicator(
									ng-switch-when="add-comment"
									ng-if="!commentState.adding"
									ng-click="startNewComment(); toggleReviewPanel();"
								)
									i.fa.fa-commenting

							.rp-entry(
								ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : ''), (entry.focused ? 'rp-entry-focused' : '')]"
							)
								div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
									.rp-entry-header
										.rp-entry-action-icon(ng-switch="entry.type")
											i.fa.fa-pencil(ng-switch-when="insert")
											i.rp-icon-delete(ng-switch-when="delete")

										.rp-entry-metadata
											p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
											p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
										.rp-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
									.rp-entry-body(ng-switch="entry.type")
											span(ng-switch-when="insert") Added 
												ins.rp-content-highlight {{ entry.content }} 
											span(ng-switch-when="delete") Delete 
												del.rp-content-highlight {{ entry.content }} 
									.rp-entry-actions
										a.rp-entry-button(href, ng-click="rejectChange(entry_id)") 
											i.fa.fa-times
											|  Reject
										a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
											i.fa.fa-check
											|  Accept
								div(ng-if="entry.type == 'comment'")
									.rp-comment(
										ng-repeat="comment in entry.thread"
										ng-class="users[comment.user_id].isSelf ? 'rp-comment-self' : '';"
									)
										.rp-avatar(
											ng-if="!users[comment.user_id].isSelf;"
											style="background-color: hsl({{ users[comment.user_id].hue }}, 70%, 50%);"
										) {{ users[comment.user_id].avatar_text }}
										.rp-comment-body(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 90%);")
											p.rp-comment-content {{ comment.content }}
											p.rp-comment-metadata
												| {{ comment.ts | date : 'MMM d, y h:mm a' }}
												|  • 
												span(style="color: hsl({{ users[comment.user_id].hue }}, 70%, 40%);") {{ users[comment.user_id].name }}
									.rp-comment-reply
										textarea.rp-comment-input(
											ng-model="entry.replyContent"
											ng-keypress="handleCommentReplyKeyPress($event, entry);"
											placeholder="Hit \"Enter\" to reply"
										)
									.rp-entry-actions
										a.rp-entry-button(href) 
											i.fa.fa-check
											|  Mark as resolved
							
								div(ng-if="entry.type == 'add-comment'")
									a.rp-add-comment-btn(
										href
										ng-if="!commentState.adding"
										ng-click="startNewComment()"
									) 
										i.fa.fa-comment
										|  Add comment
									div(ng-if="commentState.adding")
										.rp-new-comment
											textarea.rp-comment-input(
												ng-model="commentState.content"
												placeholder="Add your comment here"
											)
										.rp-entry-actions
											a.rp-entry-button(href, ng-click="cancelNewComment()") 
												i.fa.fa-times
												|  Cancel
											a.rp-entry-button(href, ng-click="submitNewComment()") 
												i.fa.fa-comment
												|  Comment

			.rp-nav
				a.rp-nav-item(
					href
					ng-click="setSubView(SubViews.CUR_FILE);"
					ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.CUR_FILE }"
				)
					i.fa.fa-file-text-o
					span.rp-nav-label Current file
				a.rp-nav-item(
					href
					ng-click="setSubView(SubViews.OVERVIEW);"
					ng-class="{ 'rp-nav-item-active' : reviewPanel.subView === SubViews.OVERVIEW }"
				)
					i.fa.fa-list
					span.rp-nav-label Overview

	.ui-layout-east
		div(ng-if="ui.pdfLayout == 'sideBySide'")
			include ./pdf

	.ui-layout-resizer-controls.synctex-controls(
		ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
		ng-controller="PdfSynctexController"
	)
		a.btn.btn-default.btn-xs(
			tooltip="#{translate('go_to_code_location_in_pdf')}"
			tooltip-placement="right"
			tooltip-append-to-body="true"
			ng-click="syncToPdf()"
		)
			i.fa.fa-long-arrow-right
		br
		a.btn.btn-default.btn-xs(
			tooltip-html="'#{translate('go_to_pdf_location_in_code')}'"
			tooltip-placement="right"
			tooltip-append-to-body="true"
			ng-click="syncToCode()"
		)
			i.fa.fa-long-arrow-left
			
div.full-size(
	ng-if="ui.pdfLayout == 'flat'"
	ng-show="ui.view == 'pdf'"
)
	include ./pdf