Skip to content

Repeatable CodeMirror textarea cannot click/drag to highlight text #1299

@JPry

Description

@JPry

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):

  1. Register a repeatable textarea_code field, and do not disable code mirror.
  2. Add a second field to the group
  3. 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions