[Solved] How to reproduce the drag-to-expand feature of the JSONata expression editor?

Developing Nodes
1

As I'm developing uibuilder v2, I've been wanting to improve the admin ui for editing the front-end files.

One of the things that I'm struggling with is getting the editor to vertically resize properly.

But I noticed that the JSONata expression editor has a draggable bar which might be a really nice addition. However, I can't find the source for the JSONata expression editor!

image
image.png1067Ă—721 22.8 KB

Can anyone point me in the right direction?

Here is what I have so far for uibuilder v2:

image
image.png1046Ă—1018 50 KB

Clicking the edit button gives:
image

It would be nice if I could get the edit box to auto-expand to the available space vertically. As you can see, I've managed to reproduce the "full screen" expander and that works nicely.

2 Likes
2

Ouch, well after some painful experimentation this evening, I've sort of found a way to include a vertical expander. Dropping in here in case it is of interest to anyone else.

The trick is that not only is jQuery included in the admin ui but jQueryUI is also available. That has a resizable function that makes any element resizable.

Template html

Include something like this in the template html for the admin config panel for your node. Note that we've added an extra div:

        <!-- Edit box  editor-tray-content -->
        <div class="form-row node-text-editor-row" style="position:relative">
            <div style="height: 350px; min-height:150px;" class="node-text-editor" id="node-input-template-editor" ></div>
            <div id="edit-drag-y" class="red-ui-panels-separator" style="position: relative;"></div>
        </div>

#node-input-template-editor is the container for the ACE editor.

oneditprepare

Now include the jQuery and jQueryUI code.

// Make the horizontal separator draggable
$('#node-input-template-editor').resizable({
    'handles': 's' //{'s': '#edit-drag-y' }
})
$('#node-input-template-editor > div.ui-resizable-handle.ui-resizable-s').css({
    'height': '25px',
    'bottom': '-25px'
})

What we've done is make the editor field expandable at the bottom only and moved the resize handle down slightly having made it a little larger. In doing so, it actually covers the extra div underneath it which uses a Node-RED built-in class that makes it look like a dragable separator.

All rather cludgy. In theory, we should be able to tell jQueryUI's dragable function to use our separator as the handle but I couldn't get that to work no matter what I tried. Looking around the Internet it strikes me as though that has never quite worked properly.

Here is what it looks like:

image

It could possibly do with looking a little larger but this will do for now and it is a nice addition to the interface.

Enjoy. This will be appearing in the uibuilder v2 beta over the weekend.

3

Hi Julian - sorry I didn't reply to your previous post and that you've now gone through this. I really need to get into the habit of flagging posts I need to go back to if I can't reply there and then.

The JSONata expression editor is here: https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/js/ui/editors/expression.js

It uses a widget we have (that I haven't published docs on) for creating these sorts of resizable panels. You can see it in action here:

We also use it in the markdown editor to do the horizontal split where you can open the preview pane

It is simple and has only been implemented to do the bare minimum we need. You are welcome to start using it.

4

Not a problem I know that you are busy like the rest of us.

A problem I have at work too. :frowning:

Thanks for showing me those. I think I will come back to them as there is still a load of stuff I want to pack into uibuilder v2 so that I get all of the breaking changes out of the way.

For now, the editor is good enough given that it can be manually expanded in both directions and can be automatically expanded to full-screen. I will come back to it in a future update and see if I can use your widget then.

The exercise has been good for me anyway as it has reminded me that we have jQueryUI available in the admin panels and not just jQuery and has reminded me how to do some stuff in jQuery that I'd forgotten. It has also helped me discover more about how to trace things using the developer tools, not easy with something like Node-RED that has so many integral parts.

Good job I only do this for fun though as I've been side-tracking myself something chronic! I still have a dozen things I want to research more to see if they will be helpful. Hopefully, I'll be able to get a few more blog posts out as well which may help others (and me to remember how in 6 months).