Feat: Editor plugins can be rendered without an active document

Author: trusz

package-lock.json

@@ -39,13 +39,13 @@
     "@material/mwc-textarea": "0.22.1",
     "@material/mwc-textfield": "0.22.1",
     "@material/mwc-top-app-bar-fixed": "0.22.1",
+    "@openscd/core": "*",
+    "@openscd/xml": "*",
     "ace-custom-element": "^1.6.5",
     "lit": "^2.2.7",
     "lit-translate": "^1.2.1",
     "marked": "^4.0.10",
-    "panzoom": "^9.4.2",
-    "@openscd/core": "*",
-    "@openscd/xml": "*"
+    "panzoom": "^9.4.2"
   },
   "scripts": {
     "clean": "rimraf build",
@@ -85,6 +85,7 @@
     "@typescript-eslint/parser": "^4.29.2",
     "@web/dev-server-esbuild": "^0.2.16",
     "@web/test-runner": "^0.13.22",
+    "@web/test-runner-playwright": "^0.11.0",
     "concurrently": "^6.2.1",
     "deepmerge": "^4.2.2",
     "es-dev-server": "^2.1.0",
@@ -171,4 +172,4 @@
     ],
     "commitUrlFormat": "https://github.com/openscd/open-scd/commits/{{hash}}"
   }
-}
+}

packages/openscd/package.json

@@ -468,18 +468,33 @@ export class OscdLayout extends LitElement {
 
   /** Renders the enabled editor plugins and a tab bar to switch between them*/
   protected renderContent(): TemplateResult {
+    const hasActiveDoc = Boolean(this.doc);
+
+    const activeEditors = this.editors
+    .filter(editor => {
+      // this is necessary because `requireDoc` can be undefined
+      // and that is not the same as false
+      const doesNotRequireDoc = editor.requireDoc === false
+      return doesNotRequireDoc || hasActiveDoc
+    })
+    .map(this.renderEditorTab)
 
-    if(!this.doc) return html``;
+    const hasActiveEditors = activeEditors.length > 0;
+    if(!hasActiveEditors){ return html``; }
 
     return html`
       <mwc-tab-bar @MDCTabBar:activated=${(e: CustomEvent) => (this.activeTab = e.detail.index)}>
-        ${this.editors.map(this.renderEditorTab)}
+        ${activeEditors}
       </mwc-tab-bar>
-      ${renderEditorContent(this.editors, this.activeTab)}
+      ${renderEditorContent(this.editors, this.activeTab, this.doc)}
     `;
 
-    function renderEditorContent(editors: Plugin[], activeTab: number){
-      const content = editors[activeTab]?.content;
+    function renderEditorContent(editors: Plugin[], activeTab: number, doc: XMLDocument | null){
+      const editor = editors[activeTab];
+      const requireDoc = editor?.requireDoc
+      if(requireDoc && !doc) { return html`` }
+
+      const content = editor?.content;
       if(!content) { return html`` }
 
       return html`${content}`;
@@ -633,6 +648,14 @@ export class OscdLayout extends LitElement {
             class="${plugin.official ? 'official' : 'external'}"
             value="${plugin.src}"
             ?selected=${plugin.installed}
+            @request-selected=${(e: CustomEvent<{source: string}>) => {
+              if(e.detail.source !== 'interaction'){
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                return false;
+              }
+            }}
             hasMeta
             left
           >

packages/openscd/src/addons/Layout.ts

@@ -488,10 +488,12 @@ export class OpenSCD extends LitElement {
 
   private addContent(plugin: Omit<Plugin, 'content'>): Plugin {
     const tag = pluginTag(plugin.src);
+
     if (!loadedPlugins.has(tag)) {
       loadedPlugins.add(tag);
       import(plugin.src).then(mod => customElements.define(tag, mod.default));
     }
+
     return {
       ...plugin,
       content: staticTagHtml`<${tag}