From 8a7ffaf3c3b6a1968ded7ee4dd86f6c86fd8e003 Mon Sep 17 00:00:00 2001
From: Gordon Lin <75815453+gordlin@users.noreply.github.com>
Date: Wed, 30 Oct 2024 16:45:48 -0400
Subject: [PATCH] Add config option dropdown menu

---
 package-lock.json                        |  12 +-
 package.json                             |   2 +-
 src/components/editor.vue                |  15 +-
 src/components/helpers/dropdown-menu.vue | 201 +++++++++++++++++++
 src/components/helpers/toc-options.vue   | 124 ++++++++++++
 src/components/metadata-editor.vue       |  35 ++--
 src/components/preview.vue               |  11 ++
 src/components/slide-toc.vue             | 239 ++++++++++-------------
 src/definitions.ts                       |   4 +-
 src/lang/lang.csv                        |  17 +-
 10 files changed, 473 insertions(+), 187 deletions(-)
 create mode 100644 src/components/helpers/dropdown-menu.vue
 create mode 100644 src/components/helpers/toc-options.vue

diff --git a/package-lock.json b/package-lock.json
index 4389b719..586bf9e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
                 "nouislider": "^15.5.0",
                 "ramp-config-editor_editeur-config-pcar": "^3.6.0",
                 "ramp-pcar": "^4.8.0",
-                "ramp-storylines_demo-scenarios-pcar": "^3.2.4",
+                "ramp-storylines_demo-scenarios-pcar": "^3.2.8",
                 "throttle-debounce": "^5.0.0",
                 "url": "^0.11.3",
                 "uuid": "^9.0.0",
@@ -8072,9 +8072,10 @@
             }
         },
         "node_modules/ramp-storylines_demo-scenarios-pcar": {
-            "version": "3.2.4",
-            "resolved": "https://registry.npmjs.org/ramp-storylines_demo-scenarios-pcar/-/ramp-storylines_demo-scenarios-pcar-3.2.4.tgz",
-            "integrity": "sha512-lj8lJrPcoFTk7s5RXx++c7Jw12Kt220jj+OVUqnoNccT496JRua4PkG/24PBPNEPH/n9tBq38yTbCYhMBZGtSg==",
+            "version": "3.2.8",
+            "resolved": "https://registry.npmjs.org/ramp-storylines_demo-scenarios-pcar/-/ramp-storylines_demo-scenarios-pcar-3.2.8.tgz",
+            "integrity": "sha512-GChEZiJQKWdzciSj0P5uSpzvayfiJ7AmClDF5y+gv/RcM9dBPFJkVPW0egSmFcf1pHbaR9Ln9sElkL/ab+Sg0A==",
+            "license": "MIT",
             "dependencies": {
                 "@rollup/plugin-dsv": "^3.0.4",
                 "@tailwindcss/typography": "^0.4.0",
@@ -8540,7 +8541,8 @@
         "node_modules/scrollama": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/scrollama/-/scrollama-3.2.0.tgz",
-            "integrity": "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ=="
+            "integrity": "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ==",
+            "license": "MIT"
         },
         "node_modules/section-matter": {
             "version": "1.0.0",
diff --git a/package.json b/package.json
index 4642315d..c16e8598 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
         "nouislider": "^15.5.0",
         "ramp-config-editor_editeur-config-pcar": "^3.6.0",
         "ramp-pcar": "^4.8.0",
-        "ramp-storylines_demo-scenarios-pcar": "^3.2.4",
+        "ramp-storylines_demo-scenarios-pcar": "^3.2.8",
         "throttle-debounce": "^5.0.0",
         "url": "^0.11.3",
         "uuid": "^9.0.0",
diff --git a/src/components/editor.vue b/src/components/editor.vue
index ae5b5e29..1c14dadd 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -336,7 +336,7 @@ import {
     HelpSection,
     MetadataContent,
     Slide,
-    SlideForBothLanguages,
+    MultiLanguageSlide,
     SourceCounts,
     StoryRampConfig,
     TextPanel
@@ -371,7 +371,7 @@ export default class EditorV extends Vue {
     @Prop() sourceCounts!: SourceCounts;
     @Prop() metadata!: MetadataContent;
 
-    @Prop() slides!: SlideForBothLanguages[];
+    @Prop() slides!: MultiLanguageSlide[];
     @Prop() configLang!: string;
     @Prop() saving!: boolean;
     @Prop() unsavedChanges!: boolean;
@@ -379,7 +379,7 @@ export default class EditorV extends Vue {
     // Form properties.
     uuid = '';
     logoImage: undefined | File = undefined;
-    loadSlides: undefined | SlideForBothLanguages[] = undefined;
+    loadSlides: undefined | MultiLanguageSlide[] = undefined;
     currentSlide: Slide | string = '';
     slideIndex = -1;
     helpSections: HelpSection[] = [];
@@ -471,8 +471,7 @@ export default class EditorV extends Vue {
             if (index === -1 || !this.loadSlides) {
                 this.currentSlide = '';
             } else {
-                const selectedLang =
-                    (lang as keyof SlideForBothLanguages) ?? (this.configLang as keyof SlideForBothLanguages);
+                const selectedLang = (lang ?? this.configLang) as keyof MultiLanguageSlide;
                 const selectedSlide = this.loadSlides[index][selectedLang];
                 this.currentSlide = selectedSlide ?? '';
             }
@@ -489,9 +488,7 @@ export default class EditorV extends Vue {
      */
     updateCustomSlide(slideConfig: Slide, save?: boolean, lang?: string): void {
         this.currentSlide = slideConfig;
-        this.slides[this.slideIndex][
-            (lang as keyof SlideForBothLanguages) ?? (this.configLang as keyof SlideForBothLanguages)
-        ] = slideConfig;
+        this.slides[this.slideIndex][(lang ?? this.configLang) as keyof MultiLanguageSlide] = slideConfig;
         // save changes emitted from advanced editor
         if (save) {
             this.$emit('save-changes');
@@ -501,7 +498,7 @@ export default class EditorV extends Vue {
     /**
      * Updates slides after adding, removing, or reordering.
      */
-    updateSlides(slides: SlideForBothLanguages[]): void {
+    updateSlides(slides: MultiLanguageSlide[]): void {
         this.loadSlides = slides;
         this.slideIndex = this.loadSlides.findIndex(
             (bothSlides) =>
diff --git a/src/components/helpers/dropdown-menu.vue b/src/components/helpers/dropdown-menu.vue
new file mode 100644
index 00000000..b41e1dc2
--- /dev/null
+++ b/src/components/helpers/dropdown-menu.vue
@@ -0,0 +1,201 @@
+<template>
+    <div ref="el">
+        <button
+            type="button"
+            class="text-gray-500 hover:text-black dropdown-button"
+            @click="toggleDropdown"
+            :content="tooltip"
+            :aria-label="ariaLabel ? String(ariaLabel) : String(tooltip)"
+            v-tippy="{
+                placement: tooltipPlacement,
+                appendTo: 'parent',
+                trigger: 'manual',
+                delay: '200',
+                touch: ['hold', 500]
+            }"
+            ref="dropdownTrigger"
+        >
+            <slot name="header"></slot>
+        </button>
+        <div
+            v-show="open"
+            @click="
+                popper.update();
+                open = false;
+            "
+            class="rv-dropdown shadow-md border border-gray:200 py-1 bg-white rounded z-10"
+            :class="{ 'text-center': centered }"
+            ref="dropdown"
+        >
+            <slot v-bind:close="() => (open = !open)"></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import type { Placement, Modifier, State } from '@popperjs/core';
+import { createPopper, detectOverflow } from '@popperjs/core';
+
+const open = ref<boolean>(false);
+const popper = ref<any>(null);
+const watchers = reactive<Array<Function>>([]);
+
+const el = ref();
+const dropdown = ref<HTMLElement>();
+const dropdownTrigger = ref<Element>();
+
+const props = defineProps({
+    position: {
+        type: String,
+        default: 'top-start'
+    },
+    popperOptions: {
+        type: Object,
+        default() {
+            return {};
+        }
+    },
+    tooltip: { type: String },
+    tooltipPlacement: { type: String, default: 'bottom' },
+    tooltipPlacementAlt: { type: String, default: 'top' },
+    centered: { type: Boolean, default: true },
+    ariaLabel: { type: String }
+});
+
+watchers.push(
+    watch(open, () => {
+        popper.value.update();
+    })
+);
+
+const toggleDropdown = () => {
+    open.value = !open.value;
+    (dropdownTrigger.value as any)._tippy.hide();
+};
+
+const focusDropdownTrigger = () => {
+    (dropdownTrigger.value as any)._tippy.setProps({
+        placement: open.value ? props.tooltipPlacementAlt : props.tooltipPlacement
+    });
+    (dropdownTrigger.value as any)._tippy.show();
+};
+
+const blurDropdownTrigger = () => {
+    (dropdownTrigger.value as any)._tippy.hide();
+};
+
+onMounted(() => {
+    window.addEventListener(
+        'click',
+        (event) => {
+            if (!el.value || !el.value.contains(event.target)) {
+                open.value = false;
+            }
+        },
+        { capture: true }
+    );
+
+    window.addEventListener('blur', () => {
+        open.value = false;
+    });
+
+    window.addEventListener('focusin', (event) => {
+        if (!el.value || !el.value.contains(event.target)) {
+            open.value = false;
+        }
+    });
+
+    dropdownTrigger.value!.addEventListener('focus', focusDropdownTrigger);
+
+    dropdownTrigger.value!.addEventListener('blur', blurDropdownTrigger);
+
+    dropdownTrigger.value!.addEventListener('mouseover', focusDropdownTrigger);
+
+    dropdownTrigger.value!.addEventListener('mouseleave', blurDropdownTrigger);
+
+    // nextTick should prevent any race conditions by letting the child elements render before trying to place them using popper
+    nextTick(() => {
+        const overflowScrollModifier: Modifier<'overflowScroll', {}> = {
+            name: 'overflowScroll',
+            enabled: true,
+            phase: 'main',
+            fn({ state }: { state: State }) {
+                const { bottom } = detectOverflow(state);
+
+                if (bottom > 0) {
+                    state.styles.popper.overflowY = bottom > 100 ? 'auto' : undefined;
+                    state.styles.popper.overflowX = 'hidden';
+                    state.styles.popper.height = `${state.rects.popper.height - bottom - 8}px`;
+                } else {
+                    state.styles.popper.height = 'auto';
+                }
+            }
+        };
+
+        if (dropdownTrigger.value && dropdown.value) {
+            popper.value = createPopper(dropdownTrigger.value as Element, dropdown.value as HTMLElement, {
+                placement: (props.position || 'bottom') as Placement,
+                modifiers: [
+                    overflowScrollModifier,
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 5]
+                        }
+                    }
+                ],
+                ...props.popperOptions
+            });
+        }
+    });
+});
+
+onBeforeUnmount(() => {
+    watchers.forEach((unwatch) => unwatch());
+
+    window.removeEventListener(
+        'click',
+        (event) => {
+            if (!el.value || !el.value.contains(event.target)) {
+                open.value = false;
+            }
+        },
+        { capture: true }
+    );
+
+    window.removeEventListener('blur', () => {
+        open.value = false;
+    });
+
+    window.removeEventListener('focusin', (event) => {
+        if (!el.value || !el.value.contains(event.target)) {
+            open.value = false;
+        }
+    });
+
+    dropdownTrigger.value!.removeEventListener('focus', focusDropdownTrigger);
+
+    dropdownTrigger.value!.removeEventListener('blur', blurDropdownTrigger);
+
+    dropdownTrigger.value!.removeEventListener('mouseover', focusDropdownTrigger);
+
+    dropdownTrigger.value!.removeEventListener('mouseleave', blurDropdownTrigger);
+
+    open.value = false;
+});
+</script>
+
+<style lang="scss">
+.rv-dropdown > * {
+    padding: 0.5rem 1rem;
+    display: block !important;
+    text-decoration: none !important;
+}
+.rv-dropdown > :not(.disabled) {
+    color: #2d3748 !important;
+}
+.rv-dropdown > *:hover:not(.disabled) {
+    background-color: #eee;
+}
+</style>
diff --git a/src/components/helpers/toc-options.vue b/src/components/helpers/toc-options.vue
new file mode 100644
index 00000000..f8edc398
--- /dev/null
+++ b/src/components/helpers/toc-options.vue
@@ -0,0 +1,124 @@
+<template>
+    <div @click.stop @mouseover.stop class="slide-toc-button cursor-auto">
+        <dropdown-menu
+            class="flex-shrink-0"
+            position="bottom-start"
+            :tooltip="$t('editor.slides.toc.dropdownTooltip')"
+            tooltipPlacement="top-start"
+            tooltipPlacementAlt="left"
+            ref="dropdown"
+        >
+            <template #header>
+                <div class="slide-toc-button flex justify-center items-center">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        x="0px"
+                        y="0px"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 122.88 29.956"
+                        enable-background="new 0 0 122.88 29.956"
+                        xml:space="preserve"
+                        class="mb-0 leading-none"
+                    >
+                        <g>
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M122.88,14.978c0,8.271-6.708,14.979-14.979,14.979s-14.976-6.708-14.976-14.979 C92.926,6.708,99.631,0,107.901,0S122.88,6.708,122.88,14.978L122.88,14.978z M29.954,14.978c0,8.271-6.708,14.979-14.979,14.979 S0,23.248,0,14.978C0,6.708,6.705,0,14.976,0S29.954,6.708,29.954,14.978L29.954,14.978z M76.417,14.978 c0,8.271-6.708,14.979-14.979,14.979c-8.27,0-14.978-6.708-14.978-14.979C46.46,6.708,53.168,0,61.438,0 C69.709,0,76.417,6.708,76.417,14.978L76.417,14.978z"
+                            />
+                        </g>
+                    </svg>
+                </div>
+            </template>
+            <a
+                href="javascript:;"
+                class="flex items-center space-x-2 leading-snug text-left w-auto"
+                :class="{
+                    'disabled click-events-none cursor-not-allowed opacity-60': !copyAllowed
+                }"
+                @click="copyAllowed && copySlide()"
+                role="button"
+                aria-label="copy-contents"
+            >
+                <span class="flex items-center gap-1">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        height="17"
+                        width="17"
+                        viewBox="0 0 24 24"
+                        class="flex-shrink-0 mx-2 my-1"
+                    >
+                        <path
+                            d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
+                        />
+                    </svg>
+                    <span>{{ $t('editor.slides.toc.dropdown.copy') }}</span>
+                </span>
+            </a>
+            <a
+                href="javascript:;"
+                class="flex leading-snug items-center text-left w-auto"
+                :class="{
+                    'disabled click-events-none cursor-not-allowed opacity-60': !deleteAllowed
+                }"
+                @click="deleteAllowed && clearSlide()"
+                role="button"
+                aria-label="DELETE"
+            >
+                <span class="flex items-center gap-1.5">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 110.61 122.88"
+                        width="15"
+                        height="15"
+                        class="mx-2 my-1"
+                    >
+                        <path
+                            d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
+                        />
+                    </svg>
+                    <span>{{ $t('editor.slides.toc.dropdown.clear') }}</span>
+                </span>
+            </a>
+        </dropdown-menu>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Prop, Vue } from 'vue-property-decorator';
+import DropdownMenu from '@/components/helpers/dropdown-menu.vue';
+
+@Options({
+    components: {
+        'dropdown-menu': DropdownMenu
+    }
+})
+export default class TocOptionsV extends Vue {
+    @Prop({ default: true }) copyAllowed!: boolean;
+    @Prop({ default: true }) deleteAllowed!: boolean;
+
+    copySlide() {
+        this.$emit('copy');
+    }
+
+    clearSlide() {
+        this.$emit('clear');
+    }
+}
+</script>
+
+<style lang="css" scoped>
+.slide-toc-button {
+    border-radius: 3px;
+    padding: 2px;
+    line-height: 1;
+}
+.slide-toc-button:hover {
+    background-color: rgb(209, 213, 219);
+}
+span {
+    font-weight: 500;
+}
+</style>
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 6fff70bd..e7f0fb9b 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -283,13 +283,6 @@
             </editor>
         </template>
     </div>
-    <!--Modal shows when undefined configs may be overwritten-->
-    <action-modal
-        name="overwrite-undefined-config"
-        :title="$t('editor.slides.overwrite.title')"
-        :message="$t('editor.slides.overwrite.text')"
-        @ok="generateConfig"
-    />
 </template>
 
 <script lang="ts">
@@ -310,7 +303,7 @@ import {
     MetadataContent,
     PanelType,
     Slide,
-    SlideForBothLanguages,
+    MultiLanguageSlide,
     SlideshowPanel,
     SourceCounts,
     StoryRampConfig,
@@ -432,7 +425,7 @@ export default class MetadataEditorV extends Vue {
     reqFields: { uuid: boolean } = {
         uuid: true
     };
-    slides: SlideForBothLanguages[] = [];
+    slides: MultiLanguageSlide[] = [];
 
     sourceCounts: SourceCounts = {};
 
@@ -527,13 +520,15 @@ export default class MetadataEditorV extends Vue {
         const engSlides =
             configs.en?.slides.map((engSlide) => {
                 return {
-                    en: engSlide
+                    // "Undefined" slides will be the undefined type while inside Storylines Editor, and {} on save/in file.
+                    en: engSlide && Object.keys(engSlide).length ? (engSlide as Slide) : undefined
                 };
             }) ?? [];
         const frSlides =
             configs.fr?.slides.map((frSlide) => {
                 return {
-                    fr: frSlide
+                    // "Undefined" slides will be the undefined type while inside Storylines Editor, and {} on save/in file.
+                    fr: frSlide && Object.keys(frSlide).length ? (frSlide as Slide) : undefined
                 };
             }) ?? [];
 
@@ -998,15 +993,9 @@ export default class MetadataEditorV extends Vue {
      * Conducts various checks before saving.
      */
     onSave(): void {
-        // Detect if there are any undefined configs
-        const engConfigHasUndefined = this.configs.en?.slides.some((slide) => !slide) as boolean;
-        const frConfigHasUndefined = this.configs.fr?.slides.some((slide) => !slide) as boolean;
-
-        if (engConfigHasUndefined || frConfigHasUndefined) {
-            this.$vfm.open('overwrite-undefined-config');
-        } else {
-            this.generateConfig();
-        }
+        // Currently allowing undefined configs & handling them elsewhere
+        // If that changes in the future, can detect for undefined configs and warn user here
+        this.generateConfig();
     }
 
     /**
@@ -1020,12 +1009,12 @@ export default class MetadataEditorV extends Vue {
         const engFileName = `${this.uuid}_en.json`;
         const frFileName = `${this.uuid}_fr.json`;
 
-        // Replace undefined slides with empty slides
+        // Replace undefined slides with empty objects
         this.configs.en!.slides = this.configs.en!.slides.map((slide) => {
-            return slide ?? JSON.parse(JSON.stringify(this.defaultBlankSlide));
+            return slide ?? {};
         });
         this.configs.fr!.slides = this.configs.fr!.slides.map((slide) => {
-            return slide ?? JSON.parse(JSON.stringify(this.defaultBlankSlide));
+            return slide ?? {};
         });
         this.loadSlides(this.configs);
 
diff --git a/src/components/preview.vue b/src/components/preview.vue
index 6892bdac..18f3aa56 100644
--- a/src/components/preview.vue
+++ b/src/components/preview.vue
@@ -158,6 +158,17 @@ export default class StoryPreviewV extends Vue {
             });
         }
 
+        // Purge undefined slides from configs
+        if (this.config) {
+            this.config.slides = this.config.slides.filter((slide) => slide && Object.keys(slide).length);
+        }
+        if (this.configs['en']) {
+            this.configs['en'].slides = this.configs['en'].slides.filter((slide) => slide && Object.keys(slide).length);
+        }
+        if (this.configs['fr']) {
+            this.configs['fr'].slides = this.configs['fr'].slides.filter((slide) => slide && Object.keys(slide).length);
+        }
+
         // set page lang
         const html = document.documentElement;
         html.setAttribute('lang', this.lang);
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
index 06b9ccdb..ee50ae0c 100644
--- a/src/components/slide-toc.vue
+++ b/src/components/slide-toc.vue
@@ -100,6 +100,8 @@
                                     </div>
                                 </section>
                                 <!-- ENG and FR configs for slide -->
+                                <!-- TODO: Modularize an individual config button and just reuse it twice here.
+                                           There's a lot of repeated code with just "EN" and "FR" swapped. -->
                                 <section class="flex flex-col gap-0.5 text-sm">
                                     <!-- ENG config for slide -->
                                     <button
@@ -172,7 +174,7 @@
                                                 @click="
                                                     index - 1 !== -1 && !slides[index - 1]?.en
                                                         ? ''
-                                                        : createNewConfig(element, 'en')
+                                                        : createNewConfig(index, 'en')
                                                 "
                                             >
                                                 <svg
@@ -215,7 +217,7 @@
                                                 @click="
                                                     index - 1 !== -1 && !slides[index - 1]?.en
                                                         ? ''
-                                                        : copyConfigFromOtherLang(element, 'en')
+                                                        : copyConfigFromOtherLang(index, 'en')
                                                 "
                                             >
                                                 <svg
@@ -230,77 +232,50 @@
                                                     />
                                                 </svg>
                                             </button>
-                                            <!-- Warning indicator for isolated undefined configs: Defined configs below it WILL be moved up! -->
-                                            <button
-                                                class="slide-toc-button cursor-default"
-                                                v-if="
-                                                    slides.slice(0, index).some((slide) => slide.en) &&
-                                                    slides.slice(index + 1).some((slide) => slide.en)
-                                                "
-                                                v-tippy="{
-                                                    delay: '200',
-                                                    placement: 'top-start',
-                                                    content: $t('editor.slides.toc.isolatedUndefinedENGconfig'),
-                                                    animateFill: false,
-                                                    touch: ['hold', 500]
-                                                }"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    shape-rendering="geometricPrecision"
-                                                    text-rendering="geometricPrecision"
-                                                    image-rendering="optimizeQuality"
-                                                    fill-rule="evenodd"
-                                                    clip-rule="evenodd"
-                                                    viewBox="0 0 512 463.43"
-                                                    height="16"
-                                                    width="16"
-                                                    style="fill: rgb(248, 113, 113)"
-                                                >
-                                                    <path
-                                                        d="M189.46 44.02c34.26-58.66 99.16-58.77 133.24.12l.97 1.81 175.27 304.4c33.71 56.4-1.2 113.76-66.17 112.96v.12H73.53c-.9 0-1.78-.04-2.66-.11-58.34-.79-86.64-54.22-61.9-106.84.39-.85.82-1.67 1.28-2.46l-.04-.03 179.3-309.94-.05-.03zm50.32 302.4c4.26-4.13 9.35-6.19 14.45-6.56 3.4-.24 6.8.29 9.94 1.48 3.13 1.19 6.01 3.03 8.39 5.41 6.92 6.91 8.72 17.38 4.64 26.16-2.69 5.8-7.08 9.7-12.11 11.78-3.03 1.27-6.3 1.84-9.56 1.76-3.27-.08-6.49-.82-9.41-2.18-5.02-2.33-9.3-6.43-11.7-12.2-2.65-6.36-2.27-12.96.63-19.15 1.15-2.46 2.75-4.81 4.73-6.5zm33.86-47.07c-.8 19.91-34.51 19.93-35.28-.01-3.41-34.1-12.13-110.53-11.85-142.58.28-9.87 8.47-15.72 18.94-17.95 3.23-.69 6.78-1.03 10.35-1.02 3.6.01 7.16.36 10.39 1.05 10.82 2.3 19.31 8.39 19.31 18.45l-.05 1-11.81 141.06z"
-                                                    />
-                                                </svg>
-                                            </button>
                                         </div>
                                         <div v-else class="ml-auto flex my-auto">
-                                            <!-- Allow deleting the final slide -->
-                                            <!-- TODO: Do we want a warning for deleting individual configs in a slide? -->
-                                            <button
-                                                class="slide-toc-button"
-                                                v-if="!slides.slice(index + 1).some((slide) => slide.en)"
-                                                v-tippy="{
-                                                    delay: '200',
-                                                    placement: 'top-start',
-                                                    content: $t('editor.slides.toc.deleteConfig'),
-                                                    animateFill: false,
-                                                    touch: ['hold', 500]
-                                                }"
-                                                @click.stop="$vfm.open(`delete-slide-${index}-en-config`)"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 110.61 122.88"
-                                                    width="14"
-                                                    height="14"
-                                                    class="mx-1 my-0.5"
-                                                >
-                                                    <path
-                                                        d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
-                                                    />
-                                                </svg>
-                                            </button>
+                                            <!-- ENG options dropdown menu -->
+                                            <toc-options
+                                                :copy-allowed="!!element.fr"
+                                                @copy="
+                                                    configEmpty(element, 'en')
+                                                        ? copyConfigFromOtherLang(index, 'en')
+                                                        : $vfm.open(`copy-other-slide-${index}-en-config`)
+                                                "
+                                                @clear="$vfm.open(`delete-slide-${index}-en-config`)"
+                                            />
                                         </div>
                                     </button>
                                     <!-- Delete ENG confirmation modal -->
-                                    <confirmation-modal
+                                    <action-modal
                                         :name="`delete-slide-${index}-en-config`"
+                                        :title="
+                                            $t('editor.slides.deleteConfig.title', {
+                                                lang: $t('editor.lang.en'),
+                                                num: index + 1
+                                            })
+                                        "
                                         :message="
                                             $t('editor.slides.deleteConfig.confirm', {
-                                                title: element['en']?.title
+                                                title: element['en']?.title || ''
                                             })
                                         "
-                                        @ok="deleteConfig(element, 'en')"
+                                        @ok="createNewConfig(index, 'en')"
+                                    />
+                                    <!-- ENG copy other slide confirmation modal -->
+                                    <action-modal
+                                        :name="`copy-other-slide-${index}-en-config`"
+                                        :title="$t('editor.slides.toc.copySlide.warning.title')"
+                                        :message="
+                                            $t('editor.slides.toc.copySlide.warning.message', {
+                                                num: index + 1,
+                                                oldLang: $t('editor.lang.en'),
+                                                newLang: $t('editor.lang.fr'),
+                                                oldTitle: element['en']?.title || '',
+                                                newTitle: element['fr']?.title || ''
+                                            })
+                                        "
+                                        @ok="copyConfigFromOtherLang(index, 'en')"
                                     />
                                     <hr v-if="isMobileSidebar" />
                                     <!-- FR config for slide -->
@@ -374,7 +349,7 @@
                                                 @click="
                                                     index - 1 !== -1 && !slides[index - 1]?.fr
                                                         ? ''
-                                                        : createNewConfig(element, 'fr')
+                                                        : createNewConfig(index, 'fr')
                                                 "
                                             >
                                                 <svg
@@ -417,7 +392,7 @@
                                                 @click="
                                                     index - 1 !== -1 && !slides[index - 1]?.fr
                                                         ? ''
-                                                        : copyConfigFromOtherLang(element, 'fr')
+                                                        : copyConfigFromOtherLang(index, 'fr')
                                                 "
                                             >
                                                 <svg
@@ -432,76 +407,50 @@
                                                     />
                                                 </svg>
                                             </button>
-                                            <!-- Warning indicator for isolated undefined configs: Defined configs below it WILL be moved up! -->
-                                            <button
-                                                class="slide-toc-button cursor-default"
-                                                v-if="
-                                                    slides.slice(0, index).some((slide) => slide.fr) &&
-                                                    slides.slice(index + 1).some((slide) => slide.fr)
-                                                "
-                                                v-tippy="{
-                                                    delay: '200',
-                                                    placement: 'bottom-start',
-                                                    content: $t('editor.slides.toc.isolatedUndefinedFRconfig'),
-                                                    animateFill: false,
-                                                    touch: ['hold', 500]
-                                                }"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    shape-rendering="geometricPrecision"
-                                                    text-rendering="geometricPrecision"
-                                                    image-rendering="optimizeQuality"
-                                                    fill-rule="evenodd"
-                                                    clip-rule="evenodd"
-                                                    viewBox="0 0 512 463.43"
-                                                    height="16"
-                                                    width="16"
-                                                    style="fill: rgb(248, 113, 113)"
-                                                >
-                                                    <path
-                                                        d="M189.46 44.02c34.26-58.66 99.16-58.77 133.24.12l.97 1.81 175.27 304.4c33.71 56.4-1.2 113.76-66.17 112.96v.12H73.53c-.9 0-1.78-.04-2.66-.11-58.34-.79-86.64-54.22-61.9-106.84.39-.85.82-1.67 1.28-2.46l-.04-.03 179.3-309.94-.05-.03zm50.32 302.4c4.26-4.13 9.35-6.19 14.45-6.56 3.4-.24 6.8.29 9.94 1.48 3.13 1.19 6.01 3.03 8.39 5.41 6.92 6.91 8.72 17.38 4.64 26.16-2.69 5.8-7.08 9.7-12.11 11.78-3.03 1.27-6.3 1.84-9.56 1.76-3.27-.08-6.49-.82-9.41-2.18-5.02-2.33-9.3-6.43-11.7-12.2-2.65-6.36-2.27-12.96.63-19.15 1.15-2.46 2.75-4.81 4.73-6.5zm33.86-47.07c-.8 19.91-34.51 19.93-35.28-.01-3.41-34.1-12.13-110.53-11.85-142.58.28-9.87 8.47-15.72 18.94-17.95 3.23-.69 6.78-1.03 10.35-1.02 3.6.01 7.16.36 10.39 1.05 10.82 2.3 19.31 8.39 19.31 18.45l-.05 1-11.81 141.06z"
-                                                    />
-                                                </svg>
-                                            </button>
                                         </div>
                                         <div v-else class="ml-auto flex my-auto">
-                                            <!-- Allow deleting the final slide -->
-                                            <button
-                                                class="slide-toc-button"
-                                                v-if="!slides.slice(index + 1).some((slide) => slide.fr)"
-                                                v-tippy="{
-                                                    delay: '200',
-                                                    placement: 'bottom-start',
-                                                    content: $t('editor.slides.toc.deleteConfig'),
-                                                    animateFill: false,
-                                                    touch: ['hold', 500]
-                                                }"
-                                                @click.stop="$vfm.open(`delete-slide-${index}-fr-config`)"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 110.61 122.88"
-                                                    width="14"
-                                                    height="14"
-                                                    class="mx-1 my-0.5"
-                                                >
-                                                    <path
-                                                        d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
-                                                    />
-                                                </svg>
-                                            </button>
+                                            <!-- FR options dropdown menu -->
+                                            <toc-options
+                                                :copy-allowed="!!element.en"
+                                                @copy="
+                                                    configEmpty(element, 'fr')
+                                                        ? copyConfigFromOtherLang(index, 'fr')
+                                                        : $vfm.open(`copy-other-slide-${index}-fr-config`)
+                                                "
+                                                @clear="$vfm.open(`delete-slide-${index}-fr-config`)"
+                                            />
                                         </div>
                                     </button>
                                     <!-- Delete FR confirmation modal -->
-                                    <confirmation-modal
+                                    <action-modal
                                         :name="`delete-slide-${index}-fr-config`"
+                                        :title="
+                                            $t('editor.slides.deleteConfig.title', {
+                                                lang: $t('editor.lang.fr'),
+                                                num: index + 1
+                                            })
+                                        "
                                         :message="
                                             $t('editor.slides.deleteConfig.confirm', {
-                                                title: element['fr']?.title
+                                                title: element['fr']?.title || ''
+                                            })
+                                        "
+                                        @ok="createNewConfig(index, 'fr')"
+                                    />
+                                    <!-- FR copy other slide confirmation modal -->
+                                    <action-modal
+                                        :name="`copy-other-slide-${index}-fr-config`"
+                                        :title="$t('editor.slides.toc.copySlide.warning.title')"
+                                        :message="
+                                            $t('editor.slides.toc.copySlide.warning.message', {
+                                                num: index + 1,
+                                                oldLang: $t('editor.lang.fr'),
+                                                newLang: $t('editor.lang.en'),
+                                                oldTitle: element['fr']?.title || '',
+                                                newTitle: element['en']?.title || ''
                                             })
                                         "
-                                        @ok="deleteConfig(element, 'fr')"
+                                        @ok="copyConfigFromOtherLang(index, 'fr')"
                                     />
                                 </section>
                             </div>
@@ -609,6 +558,7 @@
 
 <script lang="ts">
 import ActionModal from '@/components/helpers/action-modal.vue';
+import TocOptions from '@/components/helpers/toc-options.vue';
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import {
     BasePanel,
@@ -619,7 +569,7 @@ import {
     ImagePanel,
     MapPanel,
     Slide,
-    SlideForBothLanguages,
+    MultiLanguageSlide,
     SlideshowPanel,
     SourceCounts,
     TextPanel,
@@ -636,6 +586,7 @@ import ConfirmationModalV from './helpers/confirmation-modal.vue';
 
 @Options({
     components: {
+        TocOptions,
         ActionModal,
         'slide-editor': SlideEditorV,
         'confirmation-modal': ConfirmationModalV,
@@ -644,7 +595,7 @@ import ConfirmationModalV from './helpers/confirmation-modal.vue';
     }
 })
 export default class SlideTocV extends Vue {
-    @Prop() slides!: SlideForBothLanguages[];
+    @Prop() slides!: MultiLanguageSlide[];
     @Prop() currentSlide!: Slide | string;
     @Prop() slideIndex!: number;
     @Prop() configFileStructure!: ConfigFileStructure;
@@ -653,8 +604,6 @@ export default class SlideTocV extends Vue {
     @Prop() closeSidebar!: Function;
     @Prop({ default: false }) isMobileSidebar!: boolean;
 
-    selectedForCopying = 0;
-
     defaultBlankSlide: Slide = {
         title: '',
         panel: [
@@ -671,6 +620,15 @@ export default class SlideTocV extends Vue {
         ]
     };
 
+    /**
+     * Determines if a particular config is empty.
+     * @param slide Slide object to check.
+     * @param lang Specific config in slide to check ('en' or 'fr')
+     */
+    configEmpty(slide: MultiLanguageSlide, lang: keyof MultiLanguageSlide): boolean {
+        return JSON.stringify(slide[lang]) === JSON.stringify(this.defaultBlankSlide);
+    }
+
     /**
      * Selects a config (english or french) of a particular slide, and opens its editor.
      * @param index Index of slide to select (usually slide number [in UI] - 1)
@@ -705,7 +663,7 @@ export default class SlideTocV extends Vue {
      * @param slides A slide, containing an English and French config.
      * @param currLang The config to delete, either 'en' for English of 'fr' for French.
      */
-    deleteConfig(slides: SlideForBothLanguages, currLang: 'en' | 'fr'): void {
+    deleteConfig(slides: MultiLanguageSlide, currLang: 'en' | 'fr'): void {
         slides[currLang] = undefined;
         this.$emit('slides-updated', this.slides);
     }
@@ -723,21 +681,21 @@ export default class SlideTocV extends Vue {
     }
 
     // Assumes that you've already checked that the other lang DOES have a config.
-    copyConfigFromOtherLang(slides: SlideForBothLanguages, currLang: string): void {
-        slides[currLang as keyof SlideForBothLanguages] = JSON.parse(
-            JSON.stringify(slides[currLang === 'en' ? 'fr' : 'en'])
-        );
+    copyConfigFromOtherLang(index: number, currLang: keyof MultiLanguageSlide): void {
+        this.slides[index][currLang] = JSON.parse(JSON.stringify(this.slides[index][currLang === 'en' ? 'fr' : 'en']));
         this.$emit('slides-updated', this.slides);
+        this.$emit('slide-change', index, currLang);
     }
 
     /**
      * Creates a new blank config for a single language on a particular slide.
-     * @param slides A slide, containing an English and French config (either/both can be undefined).
+     * @param index The index of the slide to be changed into a blank slide.
      * @param currLang The language to create a blank config for.
      */
-    createNewConfig(slides: SlideForBothLanguages, currLang: 'en' | 'fr'): void {
-        slides[currLang] = JSON.parse(JSON.stringify(this.defaultBlankSlide));
+    createNewConfig(index: number, currLang: 'en' | 'fr'): void {
+        this.slides[index][currLang] = JSON.parse(JSON.stringify(this.defaultBlankSlide));
         this.$emit('slides-updated', this.slides);
+        this.$emit('slide-change', index, currLang);
     }
 
     /**
@@ -765,8 +723,8 @@ export default class SlideTocV extends Vue {
     }
 
     removeSourceCounts(deletedIndex: number): void {
-        let panelEn = this.slides.find((slide: SlideForBothLanguages, idx: number) => idx === deletedIndex)?.en?.panel;
-        let panelFr = this.slides.find((slide: SlideForBothLanguages, idx: number) => idx === deletedIndex)?.fr?.panel;
+        let panelEn = this.slides.find((slide: MultiLanguageSlide, idx: number) => idx === deletedIndex)?.en?.panel;
+        let panelFr = this.slides.find((slide: MultiLanguageSlide, idx: number) => idx === deletedIndex)?.fr?.panel;
 
         panelEn?.forEach((p: BasePanel) => this.removeSourceHelper(p));
         panelFr?.forEach((p: BasePanel) => this.removeSourceHelper(p));
@@ -847,10 +805,11 @@ export default class SlideTocV extends Vue {
 
     moveDown(index: number): void {
         this.slides.splice(index + 1, 0, this.slides.splice(index, 1)[0]);
+        this.scrollToElement(index + 1);
         this.$emit('slides-updated', this.slides);
     }
 
-    getSlideId(slide: SlideForBothLanguages): string {
+    getSlideId(slide: MultiLanguageSlide): string {
         return 'slide' + this.slides.indexOf(slide);
     }
 }
diff --git a/src/definitions.ts b/src/definitions.ts
index 4a54affe..bc09e317 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -4,7 +4,7 @@ export interface StoryRampConfig {
     title: string;
     lang: string;
     introSlide: Intro;
-    slides: Slide[];
+    slides: (Slide | {})[];
     contextLink: string;
     contextLabel: string;
     tocOrientation: string;
@@ -143,7 +143,7 @@ export interface Slide {
     includeInToc?: boolean;
 }
 
-export interface SlideForBothLanguages {
+export interface MultiLanguageSlide {
     en: Slide | undefined;
     fr: Slide | undefined;
 }
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 3608fac0..6f8161ae 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -32,7 +32,7 @@ editor.window.title,RAMP Storylines Editor,1,Éditeur de scénarios de la PCAR,1
 editor.configOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,Êtes-vous sûr de vouloir remplacer le produit « {uuid} » ?,0
 editor.createProduct,Create New Storylines Product,1,Créer un nouveau produit de scénarios,1
 editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de scénarios,1
-editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées,1
+editor.editMetadata,Edit Project Metadata,1,Mod. les métadonnées,1
 editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions,Fill in metadata details about your new Storylines product. Use the "Preview" button to see what your slides will look like.,1,Inscrivez les métadonnées de votre nouveau produit de scénario. Utilisez la fonction « Afficher l’aperçu » pour voir à quoi ressemblent vos diapositives.,1
 editor.uuid,UUID,1,UUID,1
@@ -123,8 +123,6 @@ editor.slideshow.label.edit,Edit existing item,1,Modifier un élément existant,
 editor.slideshow.label.type,Type,1,Type,0
 editor.slideshow.label.add,Add,1,Ajouter,1
 editor.slideshow.label.slideNumber,Slide Number,1,Numéro de diapositive,0
-editor.slides.overwrite.title,Save will overwrite undefined configs,1,L'enregistrement écrasera les configurations non définies,0
-editor.slides.overwrite.text,Saving will replace all undefined configs with blank configs. Are you sure you want to continue?,1,L'enregistrement remplacera toutes les configurations non définies par des diapositives vides. Êtes-vous sûr de vouloir continuer ?,0
 editor.slides.continue,Continue,1,Continuer,0
 editor.slides.title,Intro title,1,Titre de l’introduction,1
 editor.slides.addSlide,"New blank slide",1,Nouvelle diapositive,0
@@ -132,8 +130,8 @@ editor.slides.currentLangLabel,({lang} slide),1,(Diapositive en {lang}),0
 editor.slides.copyFromLang,"Copy slides from the other language",1,"Copier les diapositives de l’autre langue",1
 editor.slides.deleteSlide.title,Delete slide {num}?,1,Supprimer la diapositive {num} ?,0
 editor.slides.deleteSlide.confirm,"Both English and French configurations will be deleted{title}.",1,"Les configurations anglaise et française seront supprimées{title}.",0
-editor.slides.deleteConfig.title,Delete {lang} config?,1,Supprimer la configuration {lang} ?,0
-editor.slides.deleteConfig.confirm,"Are you sure you want to delete this config {title}?",1,Êtes-vous sûr de vouloir supprimer cette configuration {title} ?,0
+editor.slides.deleteConfig.title,Slide {num} {lang} config will be cleared,1,La configuration de la diapositive {num} {lang} sera effacée,0
+editor.slides.deleteConfig.confirm,"This will replace the config '{title}' with a blank config.",1,Cela remplacera la configuration '{title}' par une configuration vide.,0
 editor.slides.changeSlide.confirm,"Are you sure you want to change the slide {title}? All unsaved progress will be lost.",1,"Voulez-vous vraiment modifier la diapositive {titre}? Toute modification non enregistrée sera perdue.",1
 editor.slides.makeFull,Make the right panel the full slide,1,Mettre la diapositive complète dans le panneau de droite,1
 editor.slides.centerPanel,Center panel content,1,Contenu de la diapositive centrale,0
@@ -142,10 +140,15 @@ editor.slides.copyAll,Copy all,1,Copier tout,1
 editor.slides.copyAll.confirm,Are you sure you want to copy all slides?,1,Êtes-vous sûr de vouloir copier toutes les diapositives ?,0
 editor.slides.copy,Copy,1,Copier,1
 editor.slides.slide,Slide,1,Diapositive,1
+editor.slides.toc.dropdownTooltip,Options,1,Options,0
+editor.slides.toc.dropdown.copy,Copy from other config,1,Copier à partir d'une autre config.,0
+editor.slides.toc.dropdown.clear,Clear content,1,Contenu clair,0
+editor.slides.toc.copySlide.warning.title,Copy will delete existing contents,1,La copie supprimera le contenu existant,0
+editor.slides.toc.copySlide.warning.message,Slide {num}'s {oldLang} config ('{oldTitle}') will be replaced with the {newLang} config ('{newTitle}'). All existing contents will be lost.,1,La configuration {oldLang} de la diapositive {num} ('{oldTitle}') sera remplacée par la configuration {newLang} ('{newTitle}'). Tout le contenu existant sera perdu.,0
 editor.slides.toc.copySlide,Copy Slide,1,Copier la diapositive,0
 editor.slides.toc.deleteSlide,Delete Slide,1,Supprimer la diapositive,0
-editor.slides.toc.newENGSlideText,New ENG Slide *,1,Nouvelle diapositive ANG *,0
-editor.slides.toc.newFRSlideText,New FR Slide *,1,Novelle diapositive FR *,0
+editor.slides.toc.newENGSlideText,New EN Slide*,1,Nouvelle diapositive AN*,0
+editor.slides.toc.newFRSlideText,New FR Slide*,1,Nouvelle diapositive FR*,0
 editor.slides.toc.noENGslide,(No English Config),1,(Pas de configuration Anglais),0
 editor.slide.toc.noFRSlide,(No French Config),1,(Pas de configuration française),0
 editor.slide.toc.untitledENG,(Untitled English slide),1,(Diapositive anglaise sans titre),0