Add a Markdown Editor.

package.json

@@ -17,12 +17,13 @@
     "@types/node": "^18.6.5",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@uiw/react-md-editor": "^3.19.5",
     "autoprefixer": "10.4.8",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
     "bpmn-js": "^9.3.2",
     "bpmn-js-properties-panel": "^1.10.0",
-    "bpmn-js-spiffworkflow": "sartography/bpmn-js-spiffworkflow#main",
+    "bpmn-js-spiffworkflow": "sartography/bpmn-js-spiffworkflow#feature/more_launch_buttons_and_dropdowns",
     "craco": "^0.0.3",
     "date-fns": "^2.28.0",
     "diagram-js": "^8.5.0",

src/components/ReactDiagramEditor.tsx

@@ -68,6 +68,7 @@ type OwnProps = {
   diagramXML?: string | null;
   fileName?: string;
   onLaunchScriptEditor?: (..._args: any[]) => any;
+  onLaunchMarkdownEditor?: (..._args: any[]) => any;
   onElementClick?: (..._args: any[]) => any;
   onServiceTasksRequested?: (..._args: any[]) => any;
   url?: string;
@@ -86,6 +87,7 @@ export default function ReactDiagramEditor({
   diagramXML,
   fileName,
   onLaunchScriptEditor,
+  onLaunchMarkdownEditor,
   onElementClick,
   onServiceTasksRequested,
   url,
@@ -190,6 +192,17 @@ export default function ReactDiagramEditor({
       }
     }
 
+    function handleLaunchMarkdownEditor(
+      element: any,
+      value: string,
+      eventBus: any
+    ) {
+      if (onLaunchMarkdownEditor) {
+        setPerformingXmlUpdates(true);
+        onLaunchMarkdownEditor(element, value, eventBus);
+      }
+    }
+
     function handleElementClick(event: any) {
       if (onElementClick) {
         onElementClick(event.element);
@@ -204,7 +217,7 @@ export default function ReactDiagramEditor({
 
     setDiagramModelerState(diagramModeler);
 
-    diagramModeler.on('script.editor.launch', (event: any) => {
+    diagramModeler.on('spiff.script.edit', (event: any) => {
       const { error, element, scriptType, script, eventBus } = event;
       if (error) {
         console.log(error);
@@ -212,6 +225,14 @@ export default function ReactDiagramEditor({
       handleLaunchScriptEditor(element, script, scriptType, eventBus);
     });
 
+    diagramModeler.on('spiff.markdown.edit', (event: any) => {
+      const { error, element, value, eventBus } = event;
+      if (error) {
+        console.log(error);
+      }
+      handleLaunchMarkdownEditor(element, value, eventBus);
+    });
+
     // 'element.hover',
     // 'element.out',
     // 'element.click',
@@ -229,6 +250,7 @@ export default function ReactDiagramEditor({
     diagramModelerState,
     diagramType,
     onLaunchScriptEditor,
+    onLaunchMarkdownEditor,
     onElementClick,
     onServiceTasksRequested,
   ]);

src/routes/ProcessModelEditDiagram.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { Button, Modal, Stack } from 'react-bootstrap';
 import Container from 'react-bootstrap/Container';
@@ -7,6 +7,7 @@ import Col from 'react-bootstrap/Col';
 
 import Editor from '@monaco-editor/react';
 
+import MDEditor from '@uiw/react-md-editor'
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
@@ -26,6 +27,11 @@ export default function ProcessModelEditDiagram() {
   const [showScriptEditor, setShowScriptEditor] = useState(false);
   const handleShowScriptEditor = () => setShowScriptEditor(true);
 
+  const [markdownText, setMarkdownText] = useState<string | undefined>('');
+  const [markdownEventBus, setMarkdownEventBus] = useState<any>(null);
+  const [showMarkdownEditor, setShowMarkdownEditor] = useState(false);
+  const handleShowMarkdownEditor = () => setShowMarkdownEditor(true);
+
   const editorRef = useRef(null);
   const monacoRef = useRef(null);
 
@@ -298,7 +304,7 @@ export default function ProcessModelEditDiagram() {
   };
 
   const handleScriptEditorClose = () => {
-    scriptEventBus.fire('script.editor.update', {
+    scriptEventBus.fire('spiff.script.update', {
       scriptType,
       script: scriptText,
       element: scriptElement,
@@ -589,6 +595,46 @@ export default function ProcessModelEditDiagram() {
       </Modal>
     );
   };
+  const onLaunchMarkdownEditor = (
+    element: any,
+    markdown: string,
+    eventBus: any
+  ) => {
+    setMarkdownText(markdown || '');
+    setMarkdownEventBus(eventBus);
+    handleShowMarkdownEditor();
+  };
+  const handleMarkdownEditorClose = () => {
+    markdownEventBus.fire('spiff.markdown.update', {
+      value: markdownText,
+    });
+    setShowMarkdownEditor(false);
+  };
+
+  const markdownEditor = () => {
+    return (
+      <Modal
+        size="xl"
+        show={showMarkdownEditor}
+        onHide={handleMarkdownEditorClose}
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>Edit Markdown Content</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <MDEditor
+              value={markdownText}
+              onChange={setMarkdownText}
+            />
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleMarkdownEditorClose}>
+            Close
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  };
 
   const isDmn = () => {
     const fileName = params.file_name || '';
@@ -631,6 +677,7 @@ export default function ProcessModelEditDiagram() {
         diagramType="bpmn"
         onLaunchScriptEditor={onLaunchScriptEditor}
         onServiceTasksRequested={onServiceTasksRequested}
+        onLaunchMarkdownEditor={onLaunchMarkdownEditor}
       />
     );
   };
@@ -651,6 +698,7 @@ export default function ProcessModelEditDiagram() {
         {appropriateEditor()}
         {newFileNameBox()}
         {scriptEditor()}
+        {markdownEditor()}
 
         <div id="diagram-container" />
       </>