Ticket #18311: 18311_qtags_ui.4.diff

File 18311_qtags_ui.4.diff, 13.6 KB (added by sushkov, 15 months ago)

Added wpLink back.

Line 
1diff --git wp-admin/css/wp-admin.dev.css wp-admin/css/wp-admin.dev.css
2index 3b9dca7..c675425 100644
3--- wp-admin/css/wp-admin.dev.css
4+++ wp-admin/css/wp-admin.dev.css
5@@ -3724,7 +3724,8 @@ abbr.required {
6 }
7 
8 .media-item .describe input[type="text"],
9-.media-item .describe textarea {
10+.media-item .describe textarea,
11+.media-item .wp-editor-wrap {
12        width: 460px;
13 }
14 
15@@ -3906,10 +3907,6 @@ abbr.required {
16        border-radius: 3px;
17 }
18 
19-.media-item .post_excerpt textarea {
20-    height: 60px;
21-}
22-
23 /*------------------------------------------------------------------------------
24   14.1 - Media Library
25 ------------------------------------------------------------------------------*/
26diff --git wp-admin/includes/media.php wp-admin/includes/media.php
27index a300769..5662dd6 100644
28--- wp-admin/includes/media.php
29+++ wp-admin/includes/media.php
30@@ -791,25 +791,44 @@ function image_link_input_fields($post, $url_type = '') {
31 ";
32 }
33 
34-function wp_caption_input_textarea($edit_post) {
35+/**
36+ * Render an editor for image caption
37+ *
38+ * @see `get_attachment_fields_to_edit()`
39+ * @since 3.4
40+ *
41+ * @param Object $edit_post, media item object, default is false
42+ * @param String $name, the name/id of the textarea if $edit_post is false, default is `caption`
43+ * @param String $caption, value for caption if $edit_post is false, default is ``
44+ * @return String, the generated html
45+ */
46+function wp_caption_input_textarea( $edit_post = false, $name = 'caption', $caption = '' ) {
47        // post data is already escaped
48-       $name = "attachments[{$edit_post->ID}][post_excerpt]";
49+       if ( $edit_post ) {
50+               $name = "attachments[{$edit_post->ID}][post_excerpt]";
51+               $caption = $edit_post->post_excerpt;
52+       }
53 
54-       return '
55-       <textarea class="code" name="' . $name . '" id="' . $name . '">' . $edit_post->post_excerpt . '</textarea>
56-       <div class="edit-caption-controls hide-if-no-js">
57-       <input type="button" class="button caption-insert-link" value="' . esc_attr__('Insert Link') . '" />
58-       <div class="caption-insert-link-wrap hidden">
59-       <label><span>' . __('Link URL') . '</span>
60-       <input type="text" value="" class="caption-insert-link-url" /></label>
61-       <label><span>' . __('Linked text') . '</span>
62-       <input type="text" value="" class="caption-insert-link-text" /></label>
63-       <div class="caption-insert-link-buttons">
64-       <input type="button" class="button caption-cancel" value="' . esc_attr__('Cancel') . '" />
65-       <input type="button" class="button-primary caption-save" value="' . esc_attr__('Insert') . '" />
66-       <br class="clear" />
67-       </div></div></div>
68-       ';
69+       $defaults = array(
70+               'teeny' => true,
71+               'tinymce' => false,
72+               'media_buttons' => false,
73+               'textarea_rows' => 10,
74+               'quicktags' => array(
75+                       'buttons' => 'strong,em,link,del,ins,code,close'
76+               )
77+       );
78+       $settings = apply_filters( 'caption_input_textarea', $defaults, $edit_post );
79+
80+       if ( defined( 'IFRAME_REQUEST' ) && IFRAME_REQUEST == true ) {
81+               wp_enqueue_script( 'quicktags' );
82+               wp_enqueue_script('wplink');
83+       }
84+
85+       // Use a buffer to get the output, otherway it will just echo everything
86+       ob_start();
87+       wp_editor( $caption, $name, $settings );
88+       return ob_get_clean();
89 }
90 
91 /**
92@@ -956,7 +975,7 @@ function get_attachment_fields_to_edit($post, $errors = null) {
93                'post_excerpt' => array(
94                        'label'      => __('Default Caption'),
95                        'input'      => 'html',
96-                       'html'       => wp_caption_input_textarea($edit_post)
97+                       'html'       => wp_caption_input_textarea( $edit_post )
98                ),
99                'post_content' => array(
100                        'label'      => __('Description'),
101@@ -1954,9 +1973,8 @@ function wp_media_insert_url_form( $default_view = 'image' ) {
102                        <th valign="top" scope="row" class="label">
103                                <span class="alignleft"><label for="caption">' . __('Image Caption') . '</label></span>
104                        </th>
105-                       <td class="field"><input id="caption" name="caption" value="" type="text" /></td>
106-               </tr>
107-';
108+                       <td class="field">' . wp_caption_input_textarea() . '</td>
109+               </tr>';
110        } else {
111                $caption = '';
112        }
113diff --git wp-includes/class-wp-editor.php wp-includes/class-wp-editor.php
114index af69b08..65878e4 100644
115--- wp-includes/class-wp-editor.php
116+++ wp-includes/class-wp-editor.php
117@@ -554,7 +554,7 @@ final class _WP_Editors {
118                (function(){
119                        var init, ed, qt, first_init, mce = <?php echo wp_default_editor() == 'tinymce' ? 'true' : 'false'; ?>;
120 
121-                       if ( typeof(tinymce) == 'object' ) {
122+                       if ( typeof(tinymce) == 'object' && tinymce !== null ) {
123                                // mark wp_theme/ui.css as loaded
124                                tinymce.DOM.files[tinymce.baseURI.getURI() + '/themes/advanced/skins/wp_theme/ui.css'] = true;
125 
126diff --git wp-includes/js/tinymce/langs/wp-langs-en.js wp-includes/js/tinymce/langs/wp-langs-en.js
127index 6921eab..53d784a 100644
128--- wp-includes/js/tinymce/langs/wp-langs-en.js
129+++ wp-includes/js/tinymce/langs/wp-langs-en.js
130@@ -499,7 +499,5 @@ s120:"120%",
131 s130:"130%",
132 img_title:"Title",
133 caption:"Caption",
134-insert_link:"Insert link",
135-linked_text:"Linked text",
136 alt:"Alternate Text"
137 });
138diff --git wp-includes/js/tinymce/langs/wp-langs.php wp-includes/js/tinymce/langs/wp-langs.php
139index 625ef75..6100383 100644
140--- wp-includes/js/tinymce/langs/wp-langs.php
141+++ wp-includes/js/tinymce/langs/wp-langs.php
142@@ -542,8 +542,6 @@ function wp_mce_translation() {
143                's130' => __('130%'),
144                'img_title' => __('Title'),
145                'caption' => __('Caption'),
146-               'insert_link' => __('Insert link'),
147-               'linked_text' => __('Linked text'),
148                'alt' => __('Alternate Text')
149        );
150 
151diff --git wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.dev.js wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.dev.js
152index 6e25a1f..2f680ea 100644
153--- wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.dev.js
154+++ wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.dev.js
155@@ -8,7 +8,11 @@
156                open: function() {
157                        var ed;
158 
159-                       // Initialize tinyMCEPopup if it exists and is the editor is active.
160+                       // Try to load tinyMCEPopup from parent window if we are inside an iframe
161+                       if ( typeof(tinyMCEPopup) === 'undefined' && window !== parent )
162+                               window.tinyMCEPopup = parent.tinyMCEPopup;
163+
164+                       // Initialize tinyMCEPopup if it exists and if the editor is active.
165                        if ( tinyMCEPopup && typeof tinyMCE != 'undefined' && ( ed = tinyMCE.activeEditor ) && !ed.isHidden() ) {
166                                tinyMCEPopup.init();
167                        }
168diff --git wp-includes/js/tinymce/plugins/wpeditimage/editimage.html wp-includes/js/tinymce/plugins/wpeditimage/editimage.html
169index 6437801..bddd108 100644
170--- wp-includes/js/tinymce/plugins/wpeditimage/editimage.html
171+++ wp-includes/js/tinymce/plugins/wpeditimage/editimage.html
172@@ -7,6 +7,12 @@
173 <link rel="stylesheet" href="css/editimage.css?ver=348" type="text/css" media="all" />
174 <script type="text/javascript" src="js/editimage.js?ver=348"></script>
175 <script type="text/javascript" src="../../utils/form_utils.js?ver=348"></script>
176+<script type='text/javascript'>
177+/* <![CDATA[ */
178+               window.quicktagsL10n = parent.quicktagsL10n || {};
179+/* ]]> */
180+</script>
181+<script type="text/javascript" src="../../../quicktags.js?ver=3.4"></script>
182 <base target="_self" />
183 </head>
184 
185@@ -101,21 +107,8 @@ if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
186                                </label>
187                        </th>
188                        <td class="field">
189-                               <textarea id="img_cap_text"></textarea>
190-
191-                               <div class="edit-caption-controls">
192-                               <input type="button" class="button caption-insert-link" value="{#wpeditimage.insert_link}" />
193-
194-                               <div class="caption-insert-link-wrap hidden">
195-                               <label><span>{#advanced_dlg.link_url}</span>
196-                               <input type="text" value="" class="caption-insert-link-url" /></label>
197+                               <textarea id="img_cap_text" rows="5" cols="40"></textarea>
198 
199-                               <label><span>{#wpeditimage.linked_text}</span>
200-                               <input type="text" value="" class="caption-insert-link-text" /></label>
201-
202-                               <div class="caption-insert-link-buttons">
203-                               <input type="button" class="button caption-cancel" value="{#cancel}" />
204-                               <input type="button" class="button-primary caption-save" value="{#insert}" />
205                                <br class="clear" />
206                                </div></div></div>
207                        </td>
208@@ -285,5 +278,17 @@ if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') )
209 </form>
210 </div>
211 
212+<div id="quicktags">
213+       <textarea id="editor" rows="5" cols="40"></textarea>
214+       <script type='text/javascript'>
215+       /* <![CDATA[ */
216+                       quicktags({
217+                               id: 'editor',
218+                               buttons: 'strong,em,link,del,ins,code,close'
219+                       });
220+       /* ]]> */
221+       </script>
222+</div>
223+
224 </body>
225 </html>
226diff --git wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
227index 5a27d10..51c32ce 100644
228--- wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
229+++ wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
230@@ -236,16 +236,19 @@ wpImage = {
231        },
232 
233        init : function() {
234-               var ed = tinyMCEPopup.editor, h;
235+               var ed = tinyMCEPopup.editor, header, img_edit;
236+
237+               header = document.getElementById('media-upload-header');
238+               img_edit = document.getElementById('img-edit');
239+               header.innerHTML = ed.translate(header.innerHTML);
240+               img_edit.innerHTML = ed.translate(img_edit.innerHTML);
241 
242-               h = document.body.innerHTML;
243-               document.body.innerHTML = ed.translate(h);
244                window.setTimeout( function(){wpImage.setup();}, 500 );
245        },
246 
247        setup : function() {
248                var t = this, c, el, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor,
249-                       d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa, bookmark, insert_link;
250+                       d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa;
251 
252                document.dir = tinyMCEPopup.editor.getParam('directionality','');
253 
254@@ -329,80 +332,10 @@ wpImage = {
255                if ( t.width && t.preloadImg.width )
256                        t.showSizeSet();
257               
258-               document.body.style.display = '';
259-
260-               tinyMCEPopup.events.add(document.body, 'click', function(e) {
261-                       var target = e.target, parent = target.parentNode, tr, c, el, textarea, sel, text, startPos, endPos;
262-
263-                       if ( dom.hasClass(target, 'caption-insert-link') ) {
264-                               el = dom.select('div.caption-insert-link-wrap', parent)[0], textarea = dom.select('#img_cap_text')[0];
265-
266-                               if ( document.selection ) {
267-                                       textarea.focus();
268-                                       sel = document.selection.createRange();
269-                                       bookmark = sel.getBookmark();
270-
271-                                       if ( sel.text )
272-                                               dom.select('.caption-insert-link-text', el)[0].value = sel.text;
273-
274-                               } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
275-                                       text = textarea.value;
276-                                       startPos = textarea.selectionStart;
277-                                       endPos = textarea.selectionEnd;
278-
279-                                       if ( startPos != endPos )
280-                                               dom.select('.caption-insert-link-text', el)[0].value = text.substring(startPos, endPos);
281-                               }
282-
283-                               dom.hide(target);
284-                               dom.show(el);
285-                               dom.select('.caption-insert-link-url', el)[0].focus();
286-                       } else if ( dom.hasClass(target, 'caption-cancel') || dom.hasClass(target, 'caption-save') ) {
287-                               if ( dom.hasClass(target, 'caption-save') )
288-                                       insert_link();
289-
290-                               dom.hide( dom.select('.caption-insert-link-wrap') );
291-                               dom.show( dom.select('.caption-insert-link') );
292-                       }
293-               });
294-
295-               insert_link = function() {
296-                       var sel, content, startPos, endPos, scrollTop, text, textarea = dom.select('#img_cap_text')[0],
297-                               url = dom.select('.caption-insert-link-url')[0], link_text = dom.select('.caption-insert-link-text')[0];
298-
299-                       if ( !url || !link_text )
300-                               return;
301-
302-                       content = "<a href='"+url.value+"'>"+link_text.value+"</a>";
303+               // Setup the quicktags
304+               wpImage.enableQTags();
305 
306-                       if ( document.selection ) {
307-                               textarea.focus();
308-                               sel = document.selection.createRange();
309-
310-                               if ( bookmark ) {
311-                                       sel.moveToBookmark( bookmark );
312-                                       bookmark = '';
313-                               }
314-
315-                               sel.text = content;
316-                               textarea.focus();
317-                       } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
318-                               text = textarea.value;
319-                               startPos = textarea.selectionStart;
320-                               endPos = textarea.selectionEnd;
321-                               scrollTop = textarea.scrollTop;
322-
323-                               textarea.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
324-
325-                               textarea.focus();
326-                               textarea.selectionStart = startPos + content.length;
327-                               textarea.selectionEnd = startPos + content.length;
328-                               textarea.scrollTop = scrollTop;
329-                       }
330-
331-                       url.value = '';
332-                       link_text.value = '';
333-               };
334+               document.body.style.display = '';
335        },
336 
337        remove : function() {
338@@ -684,9 +617,36 @@ wpImage = {
339                t.preloadImg.onload = t.updateImageData;
340                t.preloadImg.onerror = t.resetImageData;
341                t.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.img_src.value);
342+       },
343+
344+       /**
345+        * Enables a Quicktags editor for the caption textarea
346+        */
347+       enableQTags : function() {
348+               var old = document.getElementById('img_cap_text');
349+               var neu = document.getElementById('quicktags');
350+               var editor = document.getElementById('editor');
351+               var buttons = document.getElementById('qt_editor_toolbar').childNodes;
352+
353+               // Add button classes to quicktags buttons
354+               for (var i=0; i<buttons.length; i++) {
355+                       buttons[i].className += ' button';
356+               }
357+
358+               // Move the new quicktags where old textarea used to be
359+               // QTags breaks if you leave it inside an element that calls `ed.translate()`
360+               old.parentNode.appendChild(neu);
361+               // Hide old textarea, don't remove, it's still being used
362+               old.style.display = 'none';
363+
364+               // Map old textarea value to the new quicktags
365+               editor.value = old.value;
366+               // Replace double-quotes so tinyMCE caption don't break
367+               editor.onblur = function() {
368+                       old.value = this.value.replace(/"/g, "'");
369+               }
370        }
371 };
372 
373 window.onload = function(){wpImage.init();}
374 wpImage.preInit();
375-
376diff --git wp-includes/js/wplink.dev.js wp-includes/js/wplink.dev.js
377index 24403d3..d0ba1c6 100644
378--- wp-includes/js/wplink.dev.js
379+++ wp-includes/js/wplink.dev.js
380@@ -62,7 +62,7 @@ var wpLink;
381                        if ( !wpActiveEditor )
382                                return;
383 
384-                       this.textarea = $('#'+wpActiveEditor).get(0);
385+                       this.textarea = document.getElementById(wpActiveEditor);
386 
387                        // Initialize the dialog if necessary (html mode).
388                        if ( ! inputs.dialog.data('wpdialog') ) {