-
Notifications
You must be signed in to change notification settings - Fork 566
Closed
Description
Expected Behavior:
Repeatable textarea_code fields that utilize CodeMirror for the editor should allow you to click and drag the text within to highlight the text.
Actual Behavior:
Clicking and dragging inside a textarea_code field with CodeMirror enabled will cause the entire field to begin dragging.
Possible Solution
In the cmb.makeRepeatableSortable() JS function, update the parameters passed to .sortable(). We would need to add .CodeMirror to the existing defaults, like this:
$repeatables.sortable({
items : '.cmb-repeat-row',
cursor: 'move',
cancel: 'input,textarea,button,select,option,.CodeMirror'
});Possible Solution's Risk Level
Low risk.
Steps to reproduce (I have confirmed I can reproduce this issue on the develop branch):
- Register a repeatable
textarea_codefield, and do not disable code mirror. - Add a second field to the group
- Try to click and drag to select text within one of the fields. The entire block will begin to move instead of only the text being highlighted.
CMB2 Field Registration Code:
This example includes the after_field property which outputs inline JS. This temporarily resolves the issue with the CodeMirror areas until CMB2 can be updated.
add_action( 'cmb2_init', 'presentation_fields' );
function presentation_fields() {
$prefix = '_jpry_field_';
$cmb = new_cmb2_box( [
'id' => 'presentation_slides',
'title' => 'Presentation Slides',
'object_types' => [ 'jpry_presentation' ],
'context' => 'normal',
'priority' => 'high',
] );
$script = <<<'HTML'
<script>
jQuery( document ).on( 'cmb_init', function( e, cmb ) {
var $repeatables = cmb.metabox().find( '#_jpry_field_slides_repeat .cmb-field-list' );
$repeatables.sortable( "option", "cancel", "input,textarea,button,select,option,.CodeMirror" );
} );
</script>
HTML;
// Add all the fields.
$cmb->add_field( [
'desc' => 'Individual slides.',
'id' => $prefix . 'slides',
'name' => 'Slides',
'repeatable' => true,
'type' => 'textarea_code',
'options' => [
'add_row_text' => 'Add Slide',
],
'attributes' => [
'data-codeeditor' => json_encode( [
'codemirror' => [
'mode' => 'gfm',
'lineWrapping' => true,
'lineNumbers' => false,
'dragDrop' => false,
],
] ),
],
'after_field' => $script,
] );
}Your Environment
Browser name and version: Safari 12.1.2
Operating System and version (desktop or mobile): MacOS 10.14.6
WordPress version: 5.2.3
Metadata
Metadata
Assignees
Labels
No labels