How to implement one tab split two parts: top show ui, bottom is built-in editor of theia

A newcome theia devotee,There is a need makes me have any clue…

Appeal for help, many thanks in advance. :smiling_face_with_three_hearts:

My target view effects like pic bellow:
demo

This may learn from the demo => tree-editor, but need to make some change.

And then, what plugin or api is suitable for this. Reference examples are limited.

need a hand~~~ :upside_down_face:

need a hand~~~ :upside_down_face:

@RogueSword thank you for the discussion!
At the moment the question is quite big, is there a specific part you’re stuck on in your implementation, what have you tried/achieved?

It’s really up to you on how you want to achieve your functionality, you can create a layout that has two views (one being your table and the other being an editor). But if you want to create a single view that has a table + draggable separator + editor then you’d need some custom logic for that, and can possible make use of an existing library that facilitates a lot of that for you.

I seem to have seen a similar question before, perhaps the following link can help you
phosphorjs
monaco-editor

1 Like

:handshake: ok, i need to search more info to achivie my goal. tks a lot.

Good job, cool guy!

It seems to be what I want, let me have a look.Many tks for u.