Как совместить Jeditable и jQueryUI с изменяемым размером?

Я пытаюсь объединить Jeditable с изменяемым размером пользовательского интерфейса jQuery. Я подобрался так близко, за исключением того, что Jeditable делает что-то забавное с изменяемой функциональностью.

Проблема с приведенным ниже кодом заключается в том, что есть ошибка (см. ниже) при вызове функции уничтожения resizable. Я проверил, класс все еще там. Я сначала не включал уничтожение ресайза, но без его уничтожения и повторной инициализации, после первого редактирования (или отмены) ресайз уже не работает. При ошибке отмена больше не работает (т.е. сохраняет правки).

Error: cannot call methods on resizable prior to initialization; attempted to call method 'destroy'

JSFiddle -> http://jsfiddle.net/y8Ayd/

HTML

<div class="box">Hello</div>

CSS

.box {
  background-color: #ccf;
  height: 150px;
  width: 150px;
}

JS

$('.box').resizable();

$('.box').editable(
function (value, settings) {
    return (value);
}, 
{
    cancel: 'x',
    callback: function (value, settings) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    data: function (value, settings) {
        return value.replace('<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>', '');
    },
    event: 'dblclick',
    onreset: function (settings, original) {
        $(this).resizable('destroy');
        $(this).resizable();
    },
    submit: 'ok'
});