Integrate `@camunda/form-playground` into the Desktop Modeler

What should we do?

Integrate the first version of @camunda/form-playground into the Form Editor.

This includes

Part 1

• Replace the existing form editor
• Add toggle to the status bar
• Error Panel reduces Viewport Size instead of Overlapping
• Persist toggle states across sessions (global layout)
• Add keyboard shortcut to toggle between modes (CTRL/CMD + P, as we already have with BPMN/DMN Properties Panel and DMN Overview)

Part 2

• #3247

To consider as follow up

• https://github.com/camunda/form-playground/issues/3
• Auto-collapse preview on minimal width (cf. https://github.com/bpmn-io/internal-docs/issues/617#issuecomment-1238428647)
• Persist input data across sessions (per file?)

Why should we do it?

Integrate the new Forms Playground 🎉 Child of https://github.com/bpmn-io/internal-docs/issues/527 Depends on https://github.com/bpmn-io/internal-docs/issues/617

[christian-konrad]

@pinussilvestrus I assume resizability of the preview and editor does not add value; I try to ask myself when do I want to resize them so the one is larger than the other? Thinking about the future, when we also have horizontal layouts (very likely flexboxes) and those may also wrap on smaller screens, then it may be hard to correlate the left to the right view in case the left shows wrapped components, while the other doesn’t (depending on the wrap breakpoints). @YanaSegal would you see value in independently resizable editor+preview?

I assume vertical resizability is more helpful, to resize the mock input/output panels. To do so, we need to decide if resizing does result in absolute or relative sizes, which is important when you collapse the error/log panels: should then both editor and form input panel resize, or one is sticky and the other resizes? My proposal: let’s do it the VS Code way (don’t reinvent the wheel) and do relative sizes:

https://user-images.githubusercontent.com/56470362/193879573-af1682c1-a9e1-4a94-82ad-f37691bfa8f6.mov

[pinussilvestrus]

Persist toggle states across sessions

Is this something we want to persist globally in the config.json. Context: we do the same for any other UI component (properties panel, error panel, DMN overview, log)

My proposal would be, therefore, to keep it consistent and also keep the playground toggle states globally.

{
  "layout": {
    "formEditor": {
      "form-preview": {
        "open": true
      },
      "form-input": {
        "open": true
      },
      "form-output": {
        "open": true
      }
    },
    "log": {
      "height": 130,
      "open": false
    },
    "panel": {
      "open": true,
      "tab": "linting"
    },
    "dmnOverview": {
      "open": true,
      "width": 350
    },
    "propertiesPanel": {
       "open": true,
       "width": 280
     }
  }
}

/cc @christian-konrad