Text-based custom material designer

As a designer/developer I want to develop vertex and fragment shader snippets for 3D custom materials in a convenient way, with

• syntax highlighting
• instant feedback on shader compilation errors
• live example visualization that helps me instantly see how the material (QML + shaders) would look when used in a real scene
• and a more natural way to add and manage custom properties directly in the Property editor panel, without having to dig in the "Connection View" panel.

In short, I do not want this:

but rather expect that once I turn a CustomMaterial into its own component, clicking on it opens a material editing (designing) view that conceptually would do something like the following standalone prototype:

As a user, my basic expectation for the minimum acceptable workflow is something like the following, but I will gladly accept something more sophisticated as well:

• once I added a CustomMaterial to a model, I turn it into a component to be editable on its own:
  
• now opening the resulting component should bring up the material designer view, not an empty 3D Editor
  (once the concept of visual material designing is introduced, I expect to get the visual editor opened here, but until that a reasonable text-based environment is acceptable as well)
  
• custom properties (which are often animated as well) are central to custom materials and effects. On the properties pane for a custom material I expect to have tools to add/remove/edit custom properties. (when the component is open) Curently this is a multi-click method due to having to find the appropriate page in the "Connection View".