More performance - Bump prose init up in call stack

adobe · Jan 13, 2025 · 7c8dfe6 · 7c8dfe6
1 parent 328800e
commit 7c8dfe6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/blocks/edit/da-content/da-content.js b/blocks/edit/da-content/da-content.js
@@ -9,6 +9,8 @@ export default class DaContent extends LitElement {
   static properties = {
     details: { attribute: false },
     permissions: { attribute: false },
+    proseEl: { attribute: false },
+    wsProvider: { attribute: false },
     _editorLoaded: { state: true },
     _versionUrl: { state: true },
   };
@@ -66,6 +68,8 @@ export default class DaContent extends LitElement {
           path="${this.details.sourceUrl}"
           version="${this._versionUrl}"
           .permissions=${this.permissions}
+          .proseEl=${this.proseEl}
+          .wsProvider=${this.wsProvider}
           @proseloaded=${this.handleEditorLoaded}
           @versionreset=${this.handleReset}>
         </da-editor>

diff --git a/blocks/edit/da-editor/da-editor.js b/blocks/edit/da-editor/da-editor.js
@@ -1,6 +1,5 @@
 import { DOMParser as proseDOMParser } from 'da-y-wrapper';
 import { LitElement, html, nothing } from 'da-lit';
-import initProse from '../prose/index.js';
 import getSheet from '../../shared/sheet.js';
 import { initIms, daFetch } from '../../shared/utils.js';
 import { parse, aem2prose } from '../utils/helpers.js';
@@ -11,6 +10,8 @@ export default class DaEditor extends LitElement {
   static properties = {
     path: { type: String },
     version: { type: String },
+    proseEl: { attribute: false },
+    wsProvider: { attribute: false },
     permissions: { state: true },
     _imsLoaded: { state: false },
     _versionDom: { state: true },
@@ -23,18 +24,6 @@ export default class DaEditor extends LitElement {
     initIms().then(() => { this._imsLoaded = true; });
   }
 
-  disconnectWebsocket() {
-    if (this.wsProvider) {
-      this.wsProvider.disconnect({ data: 'Client navigation' });
-      this.wsProvider = undefined;
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.disconnectWebsocket();
-  }
-
   async fetchVersion() {
     this._versionDom = null;
     const resp = await daFetch(this.version);
@@ -70,6 +59,10 @@ export default class DaEditor extends LitElement {
     this.handleCancel();
   }
 
+  get _proseEl() {
+    return this.shadowRoot.querySelector('.da-prose-mirror');
+  }
+
   renderVersion() {
     return html`
       <div class="da-prose-mirror da-version-preview">
@@ -83,7 +76,6 @@ export default class DaEditor extends LitElement {
 
   render() {
     return html`
-      <div class="da-prose-mirror"></div>
       ${this._versionDom ? this.renderVersion() : nothing}
     `;
   }
@@ -94,14 +86,9 @@ export default class DaEditor extends LitElement {
     }
 
     // Do not setup prosemirror until we know the permissions
-    if (props.has('permissions')) {
-      if (this.path && this.permissions) {
-        this.disconnectWebsocket();
-        const editor = this.shadowRoot.querySelector('.da-prose-mirror');
-        editor.innerHTML = '';
-
-        this.wsProvider = initProse({ editor, path: this.path, permissions: this.permissions });
-      }
+    if (props.has('proseEl') && this.path && this.permissions) {
+      if (this._proseEl) this._proseEl.remove();
+      this.shadowRoot.append(this.proseEl);
     }
   }
 }

diff --git a/blocks/edit/edit.js b/blocks/edit/edit.js
@@ -1,4 +1,8 @@
 import getPathDetails from '../shared/pathDetails.js';
+import initProse from './prose/index.js';
+
+let proseEl;
+let wsProvider;
 
 async function setUI(el, utils) {
   const details = getPathDetails();
@@ -34,6 +38,12 @@ async function setUI(el, utils) {
   const { permissions } = await daFetch(details.sourceUrl, { method: 'HEAD' });
   daTitle.permissions = permissions;
   daContent.permissions = permissions;
+
+  if (wsProvider) wsProvider.disconnect({ data: 'Client navigation' });
+
+  ({ proseEl, wsProvider } = initProse({ path: details.sourceUrl, permissions }));
+  daContent.proseEl = proseEl;
+  daContent.wsProvider = wsProvider;
 }
 
 export default async function init(el) {

diff --git a/blocks/edit/prose/index.js b/blocks/edit/prose/index.js
@@ -174,9 +174,11 @@ function restoreCursorPosition(view) {
   }
 }
 
-export default function initProse({ editor, path, permissions }) {
+export default function initProse({ path, permissions }) {
   // Destroy ProseMirror if it already exists - GH-212
   if (window.view) delete window.view;
+  const editor = document.createElement('div');
+  editor.className = 'da-prose-mirror';
 
   const schema = getSchema();
 
@@ -260,10 +262,7 @@ export default function initProse({ editor, path, permissions }) {
     plugins.push(menu);
   }
 
-  let state = EditorState.create({
-    schema,
-    plugins,
-  });
+  let state = EditorState.create({ schema, plugins });
 
   const fix = fixTables(state);
   if (fix) state = state.apply(fix.setMeta('addToHistory', false));
@@ -299,5 +298,5 @@ export default function initProse({ editor, path, permissions }) {
   document.execCommand('enableObjectResizing', false, 'false');
   document.execCommand('enableInlineTableEditing', false, 'false');
 
-  return wsProvider;
+  return { proseEl: editor, wsProvider };
 }