diff --git a/src/link.js b/src/link.js index 8cb0b17..63ea05f 100644 --- a/src/link.js +++ b/src/link.js @@ -87,8 +87,15 @@ export default class Link extends Plugin { _createForm() { const editor = this.editor; const formView = new LinkFormView( editor.locale ); + const linkCommand = editor.commands.get( 'link' ); + const unlinkCommand = editor.commands.get( 'unlink' ); + + formView.urlInputView.bind( 'value' ).to( linkCommand, 'value' ); - formView.urlInputView.bind( 'value' ).to( editor.commands.get( 'link' ), 'value' ); + // Form elements should be read-only when corresponding commands are disabled. + formView.urlInputView.bind( 'isReadOnly' ).to( linkCommand, 'isEnabled', value => !value ); + formView.saveButtonView.bind( 'isEnabled' ).to( linkCommand ); + formView.unlinkButtonView.bind( 'isEnabled' ).to( unlinkCommand ); // Execute link command after clicking on formView `Save` button. this.listenTo( formView, 'submit', () => { diff --git a/tests/link.js b/tests/link.js index 4b302d8..999e970 100644 --- a/tests/link.js +++ b/tests/link.js @@ -175,6 +175,28 @@ describe( 'Link', () => { sinon.assert.calledOnce( spy ); } ); + it( 'should disable #formView elements when link and unlink commands are disabled', () => { + setModelData( editor.document, 'f[o]o' ); + + linkFeature._showPanel(); + + editor.commands.get( 'link' ).isEnabled = true; + editor.commands.get( 'unlink' ).isEnabled = true; + + expect( formView.urlInputView.isReadOnly ).to.false; + expect( formView.saveButtonView.isEnabled ).to.true; + expect( formView.unlinkButtonView.isEnabled ).to.true; + expect( formView.cancelButtonView.isEnabled ).to.true; + + editor.commands.get( 'link' ).isEnabled = false; + editor.commands.get( 'unlink' ).isEnabled = false; + + expect( formView.urlInputView.isReadOnly ).to.true; + expect( formView.saveButtonView.isEnabled ).to.false; + expect( formView.unlinkButtonView.isEnabled ).to.false; + expect( formView.cancelButtonView.isEnabled ).to.true; + } ); + // https://github.com/ckeditor/ckeditor5-link/issues/53 it( 'should set formView.unlinkButtonView#isVisible depending on the selection in a link or not', () => { setModelData( editor.document, 'f[]oo' );