some touches regarding content editor

src/components/graph/GraphModelerConfigBar.vue

@@ -12,15 +12,26 @@
         <ModalComponent :modal="modal_field_content" v-if="modal_field_content.is_open">
             <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Deactivate account</h3>
+                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Edit content</h3>
                     <div class="mt-2">
-                        <p class="text-sm text-gray-500">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
+                        <p class="text-sm text-gray-500">
+                            You can use <a href="https://commonmark.org/help/">markdown</a> to add styles to the content displayed for this node. 
+                            Text containing HTML code will be rendered as HTML.
+                        </p>
+                        <template v-if="modal_field_content.data.read_more">
+                            <p class="text-sm text-gray-500 mt-1">
+                                Docassmble uses Mako as a templating system, to allow for including variables and code in content. More on how to use this at <a href="https://docassemble.org/docs/markup.html#mako">Docassemble</a>.
+                            </p>
+                            <p class="text-sm text-gray-500 mt-1">
+                                Note that when referencing a variable, even in an 'if' statement, the block corresponding to the variable will be first shown to the user (regardless of the order specified in the graph).
+                                To show a variable only when it is defined, one can use the <span class="code text-gray-700">defined('variable')</span> function within Mako, as described at <a href="https://docassemble.org/docs/markup.html#mako">Docassemble</a>.
+                            </p>
+                        </template>
                     </div>
                     <div class="mt-4">
                         <EasymdeView
                             :options="{}"
-                            :value="modal_field_content_editor"
-                            @input="e => modal_field_content_editor = e"
+                            v-model="modal_field_content_editor"
                             ></EasymdeView>
                     </div>
                 </div>
@@ -143,7 +154,6 @@
     import { Modal } from '@/utils/modal';
     import ModalComponent from '@/components/shared/ModalComponent.vue';
 
-    // import TUIEditor from '@/components/shared/tui-editor-vue/TUIEditor.vue'
     import EasymdeView from '@/components/shared/easymde'
     import EasyMDE from 'easymde';
 
@@ -152,10 +162,9 @@
     }>();
     
     /* Modal definitions */
-    const modal_field_content = new Modal();
-    const modal_field_content_editor = ref('sdfdsfds');
+    const modal_field_content = new Modal({read_more: false});
+    const modal_field_content_editor = ref('');
     const modal_field_content_accept = () => {
-        console.log(node_content, modal_field_content_editor)
         node_content.value = modal_field_content_editor.value;
         modal_field_content.close();
     }
@@ -249,4 +258,9 @@ button.action-btn-remove {
     @apply font-normal bg-red-100 hover:bg-red-200 border border-red-200;
     @apply hover:border-red-400  text-red-900 px-3 py-0.5 rounded;
 }
+
+p a {
+    @apply text-blue-600 hover:text-blue-500
+}
+
 </style>

src/components/shared/ModalComponent.vue

@@ -4,12 +4,14 @@
             <!-- from: https://tailwindui.com/components/application-ui/overlays/modals -->
             <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
                 v-if="props.modal.is_open.value"
-                @click="props.modal.close()">
+                @mousedown="mousedown"
+                @mouseup="mouseup"
+            >
                 <div class="modal-bg fixed inset-0 bg-gray-500 bg-opacity-75"></div>
 
                 <div class="fixed z-20 inset-0 overflow-y-auto">
                     <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center">
-                        <div @click.stop class="modal-container relative bg-white rounded-lg text-left overflow-hidden shadow-xl sm:my-8 sm:max-w-3xl sm:w-full">
+                        <div class="modal-container relative bg-white rounded-lg text-left overflow-hidden shadow-xl sm:my-8 sm:max-w-3xl sm:w-full">
                             <slot></slot>
                         </div>
                     </div>
@@ -25,6 +27,23 @@ import { Modal } from '@/utils/modal';
 const props = defineProps<{
     modal: Modal
 }>();
+
+let down_target: Element | null = null;
+
+const mousedown = (e: Event) => {
+    down_target = e.target as Element;
+}
+
+const mouseup = (e: Event) => {
+    if (down_target != null) {
+        const container = document.querySelector('.modal-container');
+        if (container != null && !container.contains(down_target as Element)) {
+            props.modal.close();
+        }
+    }
+
+    down_target = null;
+}
 </script>
 
 <style scoped lang="scss">

src/components/shared/easymde/EasymdeView.vue

@@ -51,4 +51,10 @@ onUnmounted(() => {
         editor.value.cleanup();
     }
 });
-</script>
+</script>
+
+<style>
+.EasyMDEContainer {
+    text-align: initial;
+}
+</style>

src/style/index.scss

@@ -2,6 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
+span.code {
+    @apply font-mono bg-gray-200 px-0.5 text-xs;
+    padding-top: 0.1rem;
+    padding-left: 0.125rem;
+    padding-bottom: 0.1rem;
+    padding-right: 0.125rem;
+}
+
 $node_start_color: #03B54D;
 $node_decision_color: #6A7FDB;
 $node_notice_color: #9a969c;

src/utils/modal.ts

@@ -1,12 +1,12 @@
-// export type Modal = {
-//     is_open: boolean,
-//     open: () => void,
-//     close: () => void
-// };
+import { reactive, ref } from "vue";
 
-import { ref } from "vue";
+export class Modal<DataT extends object> {
+    data;
+
+    constructor(data: DataT) {
+        this.data = reactive(data);
+    }
 
-export class Modal {
     is_open = ref(false);
     open() {
         this.is_open.value = true;