feature(dev): add devtools

ValenberghsSven · Dec 3, 2022 · ab86e4d · ab86e4d
1 parent f376ac0
commit ab86e4d
Show file tree

Hide file tree

Showing 8 changed files with 1,147 additions and 60 deletions.
diff --git a/addon/components/rdfa/rdfa-editor-with-debug.hbs b/addon/components/rdfa/rdfa-editor-with-debug.hbs
@@ -59,6 +59,7 @@
           @editorOptions={{@editorOptions}}
           @toolbarOptions={{@toolbarOptions}}
           @pasteBehaviour={{this.pasteBehaviour}}
+          @devtools={{this.devtools}}
         />
       </div>
     </div>

diff --git a/addon/components/rdfa/rdfa-editor-with-debug.ts b/addon/components/rdfa/rdfa-editor-with-debug.ts
@@ -11,6 +11,7 @@ import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
 
 interface RdfaEditorDebugArgs {
   rdfaEditorInit: (rdfaDocument: ProseController) => void;
+  devtools?: boolean;
 }
 
 export default class RdfaRdfaEditorWithDebug extends Component<RdfaEditorDebugArgs> {
@@ -46,6 +47,10 @@ export default class RdfaRdfaEditorWithDebug extends Component<RdfaEditorDebugAr
     this.debug = info;
   }
 
+  get devtools() {
+    return this.args.devtools ?? true;
+  }
+
   @action
   setupXmlEditor(element: HTMLElement) {
     this.xmlEditor = new EditorView({

diff --git a/addon/components/rdfa/rdfa-editor.ts b/addon/components/rdfa/rdfa-editor.ts
@@ -41,6 +41,7 @@ interface RdfaEditorArgs {
   plugins: PluginConfig[];
   stealFocus?: boolean;
   pasteBehaviour?: string;
+  devtools?: boolean;
 }
 
 /**
@@ -117,7 +118,8 @@ export default class RdfaEditor extends Component<RdfaEditorArgs> {
       target,
       rdfaSchema,
       window.document.baseURI,
-      initializedPlugins
+      initializedPlugins,
+      this.args.devtools
     );
     window.__PM = this.prosemirror;
     window.__PC = new ProseController(this.prosemirror);

diff --git a/addon/core/prosemirror.ts b/addon/core/prosemirror.ts
@@ -32,6 +32,7 @@ import RdfaEditorPlugin from './rdfa-editor-plugin';
 import MapUtils from '../utils/map-utils';
 import { createLogger, Logger } from '../utils/logging-utils';
 import { filter, objectValues } from 'iter-tools';
+import applyDevTools from "prosemirror-dev-tools";
 
 export type WidgetLocation =
   | 'toolbarMiddle'
@@ -167,7 +168,8 @@ export default class Prosemirror {
     target: Element,
     schema: Schema,
     baseIRI: string,
-    plugins: RdfaEditorPlugin[]
+    plugins: RdfaEditorPlugin[],
+    devtools = false
   ) {
     this.logger = createLogger(this.constructor.name);
     this.root = target;
@@ -182,6 +184,23 @@ export default class Prosemirror {
       nodeViews: initializeNodeViewConstructors(plugins),
       dispatchTransaction: this.dispatch,
     });
+    if (devtools) {
+      applyDevTools(this.view);
+    }
+
+    // see https://github.com/ef4/ember-auto-import/issues/551
+    // if (devtools) {
+    //   import('prosemirror-dev-tools').then(
+    //     ({ default: applyDevTools }) => {
+    //       applyDevTools(this.view);
+    //     },
+    //     () => {
+    //       this.logger(
+    //         'optional dependency prosemirror-dev-tools is not installed'
+    //       );
+    //     }
+    //   );
+    // }
     this._state = this.view.state;
     this.pathFromRoot = getPathFromRoot(this.root, false);
     this.tag = tag(this.schema);

diff --git a/index.js b/index.js
@@ -8,6 +8,7 @@ module.exports = {
   options: {
     babel: {
       sourceMaps: 'inline',
+      plugins: [require.resolve('ember-auto-import/babel-plugin')],
     },
     autoImport: {
       webpack: {