From 044ecf21577e65563e3abfd9602d20d2f462d535 Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Mon, 26 Dec 2016 13:05:40 -0500
Subject: [PATCH] Keep TinyMCE dialogs within frame

This isn't ideal, but it mostly works, and keeps the dialogs vertically
(if not horizontally) moveable. It would be nice if the dialogs
automatically flowed to the available width.

This could be turned off in standalone note windows above a certain
width.
---
 resource/tinymce/css/note-ui.css | 120 +++++++++++++++++++++++++++++--
 resource/tinymce/note.html       |   2 +
 2 files changed, 118 insertions(+), 4 deletions(-)

diff --git a/resource/tinymce/css/note-ui.css b/resource/tinymce/css/note-ui.css
index 7f685dd26..10a4e4fe3 100644
--- a/resource/tinymce/css/note-ui.css
+++ b/resource/tinymce/css/note-ui.css
@@ -43,12 +43,124 @@ html, body {
 	margin-left: 0;
 }
 
-/* Keep popup windows within frame */
-.mce-window {
-	max-width: calc(100% - 15px) !important;
-	overflow-x: hidden;
+/*
+ * Keep popups within frame
+ *
+ * Modified from http://stackoverflow.com/a/34627616
+ */
+#mce-modal-block {
 }
 
+.mce-window {
+	width: auto !important;
+	background: none !important;
+}
+
+/* This is unfortunate, but without it the Search/Replace window runs off the left side when the
+   pane is too narrow */
+.mce-window:not([role=alertdialog]) {
+	left: 0 !important;
+}
+
+.mce-window-head {
+	background: #fff !important;
+}
+
+.mce-window-body {
+	background: #fff !important;
+}
+
+.mce-foot {
+}
+
+.mce-foot > .mce-container-body {
+	padding: 10px !important;
+}
+
+.mce-foot button {
+}
+
+.mce-panel {
+	max-width: 100% !important;
+}
+
+.mce-container {
+	max-width: 100% !important;
+	height: auto !important;
+}
+
+.mce-container-body {
+	max-width: 100% !important;
+	height: auto !important;
+}
+
+.mce-form {
+	padding: 10px !important;
+}
+
+.mce-tabs {
+	max-width: 100% !important;
+}
+
+.mce-tabs .mce-tab, .mce-tabs .mce-tab.mce-active {
+}
+
+.mce-formitem {
+	margin: 10px 0 !important;
+}
+
+/* Keep button sizes consistent */
+.mce-window .mce-menubtn {
+	min-width: 150px
+}
+
+.mce-foot .mce-primary {
+
+}
+
+/* Space out buttons */
+.mce-foot .mce-btn {
+  margin-right: 6px;
+	margin-top: 5px;
+	min-width: 75px !important;;
+}
+
+/* Correct for margin on buttons */
+.mce-foot .mce-container-body {
+	margin-top: -5px;
+}
+
+/* Space out alerts (e.g., string not found in search) */
+.mce-floatpanel[role=alertdialog] .mce-window-body .mce-first {
+	padding: 20px 40px 0;
+}
+
+.mce-abs-layout-item {
+	position: static !important;
+	width: auto !important;
+}
+
+.mce-abs-layout-item.mce-label {
+	display: block !important;
+}
+
+.mce-abs-layout-item.mce-textbox {
+	box-sizing: border-box !important;
+	display: block !important;
+	width: 100% !important;
+}
+
+.mce-abs-layout-item.mce-combobox {
+	display: flex !important;
+}
+
+.mce-abs-layout-item.mce-combobox > .mce-textbox {
+	flex: 1 1 auto;
+	height: 29px !important;
+}
+
+
+
 #noScriptWarning {
 	padding: 4px;
 	font-family: sans-serif;
diff --git a/resource/tinymce/note.html b/resource/tinymce/note.html
index db4067940..2ad446bc1 100644
--- a/resource/tinymce/note.html
+++ b/resource/tinymce/note.html
@@ -29,6 +29,8 @@
 		link_context_toolbar: true,
 		link_assume_external_targets: true,
 		
+		target_list: false,
+		
 		setup: function (ed) {
 			setLocale(ed);