Porting existing code from another project with up-to-date dependencies

- Ported existing code from another project with up-to-date dependencies.
- Currently trying to integrating the embedding of images and other media using InsertEmbedModal and InsertMediaModal

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "search.exclude": {
+        "client/dist/**": true,
+        "vendor/**": true
+    }
+}

client/src/App.js

@@ -0,0 +1,14 @@
+// my-module/client/src/App.js
+import React from 'react';
+import MarkdownEditorComponent from './components/MarkdownEditorComponent/MarkdownEditorComponent';
+
+const App = (props) => (
+  <div id="bootstrapped_markdown_editor_component">
+    <MarkdownEditorComponent
+      textArea={props.textArea}
+      toolbar={props.toolbar}
+      identifier={props.editorDataConfig.identifier}/>
+  </div>
+);
+
+export default App;

client/src/boot/index.js

@@ -1,6 +1,55 @@
 /* global window */
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import $ from 'jquery';
+import { ApolloProvider } from '@apollo/client';
+import Injector, { provideInjector } from 'lib/Injector';
 import registerComponents from 'boot/registerComponents';
 
-window.document.addEventListener('DOMContentLoaded', () => {
-  registerComponents();
+import App from 'App';
+
+registerComponents();
+
+Injector.ready(() => {
+  // const ss = typeof window.ss !== 'undefined' ? window.ss : {};
+  const { apolloClient, store } = window.ss;
+  const AppWithInjector = provideInjector(App);
+
+  $('.js-markdown-container:visible').entwine({
+    ReactRoot: null,
+
+    onmatch() {
+      this._super();
+      this.refresh();
+    },
+
+    onunmatch() {
+      this._super();
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
+    },
+
+    refresh() {
+      const textArea = $(this).parent().find('textarea')[0];
+      const editorDataConfig = JSON.parse(textArea.dataset.config);
+      const toolbar = window.ss.markdownConfigs.readToolbarConfigs(
+        editorDataConfig.toolbar
+      );
+
+      const root = createRoot(this[0]);
+      this.setReactRoot(root);
+      root.render(
+        <ApolloProvider client={apolloClient} store={store}>
+          <AppWithInjector
+            textArea={textArea}
+            editorDataConfig={editorDataConfig}
+            toolbar={toolbar}
+          />
+        </ApolloProvider>
+      );
+    },
+  });
 });

client/src/boot/registerComponents.js

@@ -1,11 +1,9 @@
 import Injector from 'lib/Injector';
-import ExampleComponent from 'components/ExampleComponent/ExampleComponent';
 import MarkdownEditorComponent from 'components/MarkdownEditorComponent/MarkdownEditorComponent';
 
 export default () => {
   Injector.component.registerMany({
     // List your React components here so Injector is aware of them
-    ExampleComponent,
     MarkdownEditorComponent
   });
 };

client/src/bundles/bundle.js

@@ -1,5 +1,6 @@
 // Include any legacy Entwine wrappers
-import 'entwine/example-file';
+import 'entwine/Markdown_ssembed';
+import 'entwine/Markdown_ssmedia';
 
 // Include boot entrypoint
-import 'boot';
+import 'boot/index';

client/src/components/MarkdownEditorComponent/MarkdownEditorComponent.js

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import ReactDOM from 'react-dom';
-
 import SimpleMdeReact from 'react-simplemde-editor';
+import 'easymde/dist/easymde.min.css';
 import jQuery from 'jquery';
 import ShortCodeParser from '../ShortCodeParser/ShortCodeParser';
 
@@ -12,15 +11,17 @@ const EasyMDE = require('easymde');
 const parser = new ShortCodeParser();
 
 const ss = typeof window.ss !== 'undefined' ? window.ss : {};
+
 if (typeof ss.markdownConfigs === 'undefined') {
   ss.markdownConfigs = {};
 }
 
 ss.markdownConfigs.readToolbarConfigs = function (data) {
   const toolbar = [];
-  for (let i = 0; i < data.length; i++) {
-  // for (const key in data) {
-    const key = data[i];
+  const dataKeys = Object.keys(data);
+  for (let i = 0; i < dataKeys.length; i++) {
+    // for (const key in data) {
+    const key = dataKeys[i];
     const element = data[key];
 
     if (typeof element === 'string') {
@@ -57,14 +58,11 @@ parser.registerShortCode(
     `<img src="${opts.thumbnail} width="${opts.width} height="${opts.height}">`
 );
 
-class MarkdownEditorField extends React.Component {
+class MarkdownEditorComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = ss.markdownConfigs;
-  }
-
-  handleChange(value) {
-    this.props.textarea.value = value;
+    this._handleChange = this._handleChange.bind(this);
   }
 
   previewRender(plainText, preview) {
@@ -74,6 +72,12 @@ class MarkdownEditorField extends React.Component {
     return this.parent.markdown(parsedText);
   }
 
+  _handleChange(value) {
+    console.log(value);
+    console.log(this.props.textArea);
+    this.props.textArea.value = value;
+  }
+
   static addCustomAction(key, action) {
     ss.markdownConfigs[key] = action;
   }
@@ -91,9 +95,10 @@ class MarkdownEditorField extends React.Component {
     return (
       <div className="editor-container">
         <SimpleMdeReact
-          value={this.props.textarea.value}
-          onChange={this.handleChange.bind(this)}
+          value={this.props.textArea.value}
+          onChange={this._handleChange}
           options={{
+            // autoDownloadFontAwesome: false,
             spellChecker: true,
             dragDrop: false,
             keyMap: 'sublime',
@@ -107,61 +112,40 @@ class MarkdownEditorField extends React.Component {
   }
 }
 
-window.MarkdownEditorField = MarkdownEditorField;
+window.MarkdownEditorField = MarkdownEditorComponent;
 
 jQuery.entwine('ss', ($) => {
-  MarkdownEditorField.addCustomAction('ssEmbed', (editor) => {
+  MarkdownEditorComponent.addCustomAction('ssEmbed', (editor) => {
     if (window.InsertMediaModal) {
       let dialog = $('#insert-md-embed-react__dialog-wrapper');
       if (!dialog.length) {
         dialog = $('<div id="insert-md-embed-react__dialog-wrapper" />');
         $('body').append(dialog);
       }
+      console.log(dialog);
+      console.log(editor);
       dialog.setElement(editor);
       dialog.open();
     } else {
       alert('Media embed is not supported');
     }
   });
 
-  MarkdownEditorField.addCustomAction('ssImage', (editor) => {
+  MarkdownEditorComponent.addCustomAction('ssImage', (editor) => {
     if (window.InsertMediaModal) {
       let dialog = $('#insert-md-media-react__dialog-wrapper');
       if (!dialog.length) {
         dialog = $('<div id="insert-md-media-react__dialog-wrapper" />');
         $('body').append(dialog);
       }
+      console.log(dialog);
+      console.log(editor);
       dialog.setElement(editor);
       dialog.open();
     } else {
       EasyMDE.drawImage(editor);
     }
   });
-
-  $('.js-markdown-container:visible').entwine({
-    onunmatch() {
-      this._super();
-      ReactDOM.unmountComponentAtNode(this[0]);
-    },
-    onmatch() {
-      this._super();
-      this.refresh();
-    },
-    refresh() {
-      const textArea = $(this).parent().find('textarea')[0];
-      const data = JSON.parse(textArea.dataset.config);
-      const toolbar = ss.markdownConfigs.readToolbarConfigs(data.toolbar);
-
-      ReactDOM.render(
-        <MarkdownEditorField
-          textarea={textArea}
-          toolbar={toolbar}
-          identifier={data.identifier}
-        />,
-        this[0]
-      );
-    },
-  });
 });
 
-export default MarkdownEditorField;
+export default MarkdownEditorComponent;

client/src/components/ShortCodeParser/ShortCodeParser.js

@@ -101,7 +101,10 @@ class ShortCodeParser {
   }
 
   parse(plainText) {
-    for (const name in this.shortCodes) {
+    const shortCodeKeys = Object.keys(this.shortCodes);
+    // for (const name in this.shortCodes) {
+    for (let i = 0; i < shortCodeKeys.length; i++) {
+      const name = shortCodeKeys[i];
       const regex = {
         wrapper: new RegExp(
           util.format(SHORTCODE_OPEN, name) +
@@ -123,8 +126,8 @@ class ShortCodeParser {
       let matches = plainText.match(regex.wrapper);
 
       if (matches) {
-        for (let m, data, i = 0, len = matches.length; i < len; i++) {
-          m = matches[i];
+        for (let m, data, j = 0, len = matches.length; j < len; j++) {
+          m = matches[j];
           data = this.parseShortcode(name, m);
           plainText = plainText.replace(
             m,