Viewer/Editor App abstraction

[dschmidt]

We have a bunch of apps that either only render certain file types or allow to view, edit and save them.
Currently a lot of the generic functionality is still implemented in the apps themselves (i.e. showing loading/error states, showing save popups, autosaving, keyboard shortcuts, reacting to route changes ...)

Not only is the behavior duplicated and not consistent across our apps but it also requires app authors to know quite a bit about APIs that they should not need to worry about when implementing a simple file viewer or editor app. That is why I would like to split the generic functionality out of our apps and provide a simple API that provides all of this functionality out of the box.

I've brainstormed a bit with @pascalwengerter and these are our ideas for a first iteration:

web-app-pdf-viewer as an example for a viewer app:

<template>
  <ViewerApp
    id="pdf-viewer"
    v-slot="{ url }"
    :file-context="currentFileContext"
    :url-for-resource-options="{
      disposition: 'inline'
    }"
  >
    <object class="pdf-viewer oc-width-1-1" :data="url" type="application/pdf" />
  </ViewerApp>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useAppDefaults } from 'web-pkg/src/composables'

export default defineComponent({
  name: 'PDFViewer',
  setup() {
    return {
      ...useAppDefaults({
        applicationId: 'pdf-viewer'
      })
    }
  }
})
</script>
<style scoped>
.pdf-viewer {
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: calc(100% - 52px);
}
</style>

web-app-text-editor as an example for a simple editor app:

<template>
  <EditorApp
    id="text-editor"
    v-slot="{ resource, serverContent, isReadOnly }"
    :app-top-bar-actions="[]"
    :current-content="currentContent"
    :file-context="currentFileContext"
    :has-auto-save="true"
  >
    <TextEditor
      v-model="currentContent"
      :is-read-only="isReadOnly"
      :resource="resource"
      :server-content="serverContent"
    />
  </EditorApp>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useAppDefaults } from 'web-pkg/src/composables'

export default defineComponent({
  name: 'TextEditor',
  setup() {
    const currentContent = ref()

    return {
      ...useAppDefaults({
      applicationId: 'text-editor'
    }),
      currentContent
    }
  }
})
</script>

In a second iteration we could try to get rid of the ViewerApp and EditorApp components from the app templates and handle them automatically in the runtime when the app declares itself to be of such a type - or it registers an extension of that type