Help button and panel

package.json

@@ -20,6 +20,7 @@
         "intersection-observer": "^0.12.0",
         "jszip": "^3.10.1",
         "markdown-it": "^12.0.6",
+        "marked": "^4.0.10",
         "nouislider": "^15.5.0",
         "ramp-config-editor_editeur-config-pcar": "^1.1.8",
         "ramp-storylines_demo-scenarios-pcar": "^3.1.3",
@@ -39,6 +40,7 @@
         "@types/clone-deep": "^4.0.1",
         "@types/file-saver": "^2.0.5",
         "@types/markdown-it": "^12.0.1",
+        "@types/marked": "^4.0.1",
         "@typescript-eslint/eslint-plugin": "^4.18.0",
         "@typescript-eslint/parser": "^4.18.0",
         "@vue/cli-plugin-babel": "^4.5.19",

public/help/respect-help-en.md

@@ -0,0 +1,72 @@
+
+# General User Interface Guidance
+
+### Creating a new project
+
+- Brief explainer of what RESPECT is
+
+- Edit project metadata
+
+- Add & reorder slides
+
+- Preview your project
+
+(Likely unecessary now) Keep track of your UUID. This is how you will access your project if you need to leave your current editing session and return at a later time.
+
+For general or technical inquiries, feature feedback, and/or custom Storylines development regarding RAD's Enhanced Storylines Product Editor & Creation Tool, please contact [[email protected]](mailto:[email protected]).
+
+
+# Add & Edit Content
+
+- General info re: panel names, left, right, full slide (**loss of existing work), selecting content types
+
+### Text
+
+- Uses Markdown, ribbon operates the same as many other text editors
+
+- Point to external Markdown resource
+
+### Image
+
+- Adding & reordering images
+
+- Adding alt tags & captions
+
+### Video
+
+- Adding video
+
+### Chart
+
+- Adding data 
+
+- Designing the chart (labels, colours, chart type, etc.) 
+
+- Using advanced customization & adding custom code 
+
+### Map
+
+- Saving your map (loading a backup)
+
+__(Possibly) For further guidance on configuring maps, refer to the Help section in the Map editor.__
+
+### Dynamic
+
+- Adding panels, linking to panels
+
+The editing process for content in dynamic panels is the same as the content types above.
+
+
+# Advanced Editor
+
+
+# Submit for review
+
+
+# Accessibility
+
+RAD's Enhanced Storylines Product Editor & Creation Tool is designed to be used in a context that is WCAG 2.1 "AA" compliant. Due diligence for full compliance is the responsibility of the page owner. 
+
+#### Keyboard Navigation
+
+Keyboard functionality is provided as an alternative for users who are unable to use a mouse. Use the Tab key to navigate forward to links and controls on the page. Press Shift+Tab to go back one step. Use the Enter or Spacebar keys to activate links and controls. 

src/components/editor/editor.vue

@@ -78,6 +78,22 @@
                     <spinner size="16px" color="#009cd1" class="ml-1 mb-1"></spinner>
                 </span>
             </button>
+            <link
+                rel="stylesheet"
+                href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
+            />
+            <button
+                @click="$vfm.open(`help-panel`)"
+                class="p-1 bg-white border border-black rounded-full hover:bg-gray-100"
+                v-tippy="{
+                    delay: '200',
+                    placement: 'top',
+                    content: $t('help.title'),
+                    animateFill: true
+                }"
+            >
+                <span class="material-symbols-outlined bottom-0"> question_mark </span>
+            </button>
         </div>
         <div class="flex">
             <div class="w-80 flex-shrink-0 border-r border-black editor-toc">
@@ -128,6 +144,7 @@
             ></slide-editor>
         </div>
         <slot name="metadataModal"></slot>
+        <help-panel :helpSections="helpSections" :originalTextArray="originalTextArray"></help-panel>
         <confirmation-modal
             :name="`reload-config`"
             :message="$t('editor.refreshChanges.modal')"
@@ -138,21 +155,27 @@
 
 <script lang="ts">
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
-import { ConfigFileStructure, MetadataContent, Slide, SourceCounts, StoryRampConfig } from '@/definitions';
+import { ConfigFileStructure, HelpSection, MetadataContent, Slide, SourceCounts, StoryRampConfig } from '@/definitions';
+import axios from 'axios';
+import { marked } from 'marked';
 
 import { VueSpinnerOval } from 'vue3-spinners';
 import SlideEditorV from './slide-editor.vue';
 import SlideTocV from './slide-toc.vue';
 import MetadataContentV from './helpers/metadata-content.vue';
 import ConfirmationModalV from './helpers/confirmation-modal.vue';
+import HelpPanelV from './help-panel.vue';
+import HelpSectionV from './helpers/help-section.vue';
 
 @Options({
     components: {
         'metadata-content': MetadataContentV,
         'confirmation-modal': ConfirmationModalV,
         spinner: VueSpinnerOval,
         'slide-editor': SlideEditorV,
-        'slide-toc': SlideTocV
+        'slide-toc': SlideTocV,
+        'help-panel': HelpPanelV,
+        'help-section': HelpSectionV
     }
 })
 export default class EditorV extends Vue {
@@ -173,6 +196,9 @@ export default class EditorV extends Vue {
     loadSlides: undefined | Slide[] = undefined;
     currentSlide: Slide | string = '';
     slideIndex = -1;
+    helpSections: HelpSection[] = [];
+    helpMd = '';
+    originalTextArray: string[] = [];
 
     @Watch('slides', { deep: true })
     onSlidesEdited(): void {
@@ -189,6 +215,8 @@ export default class EditorV extends Vue {
         this.uuid = this.$route.params.uid as string;
 
         window.addEventListener('beforeunload', this.beforeWindowUnload);
+
+        this.fetchMarkdown();
     }
 
     mounted(): void {
@@ -237,6 +265,36 @@ export default class EditorV extends Vue {
         this.slideIndex = this.loadSlides.indexOf(this.currentSlide as Slide);
     }
 
+    /**
+     * Fetch markdown content for help panel.
+     */
+    fetchMarkdown(): void {
+        const url = 'https://raw.githubusercontent.com/ramp4-pcar4/ramp4-pcar4/main/public/help/en.md'; // Construct the URL to the Markdown file
+        axios.get(url).then((r) => {
+            const reg = /^#\s(.*)\n{2}(?:.+|\n(?!\n{2,}))*/gm;
+            const renderer = new marked.Renderer();
+            renderer.image = (href: string, title: string, text: string) => {
+                if (href.indexOf('http') === -1) {
+                    href = 'https://github.com/ramp4-pcar4/ramp4-pcar4/blob/main/public/help/' + 'images/' + href;
+                }
+                return `<img src="${href}" alt="${text}">`;
+            };
+            this.helpMd = r.data.replace(new RegExp(String.fromCharCode(13), 'g'), '');
+            let section;
+            while ((section = reg.exec(this.helpMd))) {
+                const info_results = marked(section[0].split('\n').splice(2).join('\n'), { renderer }) as string;
+                this.helpSections.push({
+                    header: section[1],
+                    info: info_results,
+                    drawn: true,
+                    expanded: false
+                });
+                //copy of the original text to refer to after highlighting
+                this.originalTextArray.push(info_results);
+            }
+        });
+    }
+
     /**
      * Open current editor config as a new Storylines product in new tab.
      */
@@ -343,4 +401,8 @@ export default class EditorV extends Vue {
 .fade-leave-to {
     opacity: 0;
 }
+
+.material-symbols-outlined {
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
 </style>