@windward/core 0.9.2 → 0.11.0

package/components/Settings/AccordionSettings.vue

@@ -98,53 +98,18 @@
                                     )
                                 }}
                             </h4>
-                            <v-text-field
-                                v-model="
-                                    block.metadata.config.items[index].altText
-                                "
-                                class="pt-3 pb-3"
-                                :hide-details="true"
-                                dense
-                                outlined
-                                :label="
-                                    $t(
-                                        'windward.core.shared.settings.alt_image'
-                                    )
-                                "
-                                :disabled="render"
-                            ></v-text-field>
-                            <v-text-field
+                            <ImageAssetSettings
                                 v-model="
                                     block.metadata.config.items[index]
-                                        .ariaDescribedBy
-                                "
-                                class="pt-3 pb-3"
-                                :hide-details="true"
-                                dense
-                                outlined
-                                :label="
-                                    $t(
-                                        'windward.core.shared.settings.aria_described'
-                                    )
-                                "
-                                :disabled="render"
-                            ></v-text-field>
-                            <ContentBlockAsset
-                                v-model="
-                                    block.metadata.config.items[index].file
+                                        .fileConfig
                                 "
-                                mimes="image/png,image/jpeg"
                                 :assets.sync="block.assets"
-                                outlined
-                            >
-                                <template #title>
-                                    {{
-                                        $t(
-                                            'windward.core.components.settings.image.place_image'
-                                        )
-                                    }}
-                                </template>
-                            </ContentBlockAsset>
+                                :disabled="render"
+                                hide-background
+                                hide-decorative
+                                hide-modal
+                                show-spacing
+                            ></ImageAssetSettings>
                         </v-container>
                     </v-container>
                 </template>
@@ -181,12 +146,14 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
 import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
     name: 'AccordionSettings',
     components: {
         TextEditor,
         SortableExpansionPanel,
+        ImageAssetSettings,
     },
     extends: BaseContentSettings,
     beforeMount() {
@@ -219,9 +186,14 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
-                file: null,
-                altText: '',
-                ariaDescribedBy: '',
+                fileConfig: {
+                    display: {
+                        width: 100,
+                        margin: '',
+                        padding: '',
+                    },
+                    hideBackground: true,
+                },
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -243,8 +215,30 @@ export default {
     },
     mounted() {
         this.block.metadata.config.selectedPanels = 0
+        this.checkForCustomSpacing()
     },
     methods: {
+        checkForCustomSpacing() {
+            // check if block has items set up already and if they were created before the display key was added to image asset object
+            if (
+                this.block.metadata.config.items.length >= 1 &&
+                _.isEmpty(
+                    this.block.metadata.config.items[0].fileConfig.display
+                )
+            ) {
+                // need to add display.margin ect. for custom spacing component so that changes are tracked reactively
+                this.block.metadata.config.items.forEach((item) => {
+                    if (!item.fileConfig.display) {
+                        item.fileConfig.display = {
+                            width: 100,
+                            margin: '',
+                            padding: '',
+                        }
+                        item.fileConfig.hideBackground = true
+                    }
+                })
+            }
+        },
         onUpdatePanel($event) {
             if ($event !== this.block.metadata.config.selectedPanels) {
                 //catch click event to open selected panel to edit
@@ -260,9 +254,14 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
-                file: null,
-                altText: '',
-                ariaDescribedBy: '',
+                fileConfig: {
+                    display: {
+                        width: 100,
+                        margin: '',
+                        padding: '',
+                    },
+                    hideBackground: true,
+                },
             }
             this.block.metadata.config.items.push(default_item)
             this.block.metadata.config.selectedPanels =

package/components/Settings/ClickableIconsSettings.vue

@@ -87,8 +87,8 @@
                     @click:close="onRemoveElement"
                 >
                     <template #header="{ item }">
-                        <v-avatar v-if="item.iconImage && item.iconAsset">
-                            <v-img :src="getImagePublicUrl(item.iconAsset)" />
+                        <v-avatar v-if="item.iconImage && item.fileConfig">
+                            <v-img :src="getImagePublicUrl(item.fileConfig.asset)" />
                         </v-avatar>
                         <v-icon
                             v-else-if="
@@ -146,29 +146,19 @@
                                 :rules="validation.iconRules"
                                 :disabled="render"
                             ></TextIconPicker>
-
-                            <ContentBlockAsset
+                            <ImageAssetSettings
                                 v-if="
                                     block.metadata.config.items[index].iconImage
                                 "
                                 v-model="
-                                    block.metadata.config.items[index].iconAsset
+                                    block.metadata.config.items[index]
+                                        .fileConfig
                                 "
                                 :assets.sync="block.assets"
-                                class="mb-4"
-                                mimes="image/jpeg,image/png,image/gif"
-                                :disabled="render"
-                                outlined
-                                @click:file="onFileSelect($event, index)"
-                            >
-                                <template #title>
-                                    {{
-                                        $t(
-                                            'windward.core.components.settings.image.place_image'
-                                        )
-                                    }}
-                                </template>
-                            </ContentBlockAsset>
+                                hide-background
+                                hide-decorative
+                                hide-modal
+                            ></ImageAssetSettings>
                             <v-text-field
                                 v-model="
                                     block.metadata.config.items[index].title
@@ -234,6 +224,7 @@ import TextIconPicker from '~/components/Core/TextIconPicker.vue'
 import ColorPicker from '~/components/Core/ColorPicker.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
     name: 'ClickableIconsSettings',
@@ -243,6 +234,7 @@ export default {
         TextIconPicker,
         ColorPicker,
         ContentBlockAsset,
+        ImageAssetSettings,
     },
     extends: BaseContentSettings,
     data() {
@@ -311,7 +303,7 @@ export default {
         onAddElement() {
             const defaultObject = {
                 icon: '',
-                iconAsset: null,
+                fileConfig: {},
                 iconImage: false,
                 title: '',
                 body: '<p></p>',
@@ -336,7 +328,7 @@ export default {
         onClickToggleIconImage(index) {
             // We're switching between images / text. Clear the relevant fields
             this.block.metadata.config.items[index].icon = ''
-            this.block.metadata.config.items[index].iconAsset = null
+            this.block.metadata.config.items[index].fileConfig = null
         },
         onFileSelect(file, index) {
             // file = null when you remove a file

package/components/Settings/TabSettings.vue

@@ -76,13 +76,18 @@
                     ></TextEditor>
 
                     <v-card class="mt-2">
-                        <v-card-text>
+                        <v-card-text class="pa-0">
                             <ImageAssetSettings
                                 v-model="
                                     block.metadata.config.items[index]
                                         .imageAsset
                                 "
                                 :assets.sync="block.assets"
+                                :disabled="render"
+                                hide-background
+                                hide-decorative
+                                hide-modal
+                                show-spacing
                             >
                             </ImageAssetSettings>
                         </v-card-text>
@@ -160,7 +165,14 @@ export default {
                 tabHeader: '',
                 expand: false,
                 content: '',
-                imageAsset: null,
+                imageAsset: {
+                    display: {
+                        width: 100,
+                        margin: '',
+                        padding: '',
+                    },
+                    hideBackground: true,
+                },
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -178,6 +190,7 @@ export default {
         if (this.block.metadata.config.items.length <= 0) {
             this.onAddElement()
         }
+        this.checkForCustomSpacing()
     },
     beforeDestroy() {
         if (this.debouncer) {
@@ -185,12 +198,40 @@ export default {
         }
     },
     methods: {
+        checkForCustomSpacing() {
+            // check if block has items set up already and if they were created before the dispaly key was added to image asset object
+            if (
+                this.block.metadata.config.items.length >= 1 &&
+                _.isEmpty(
+                    this.block.metadata.config.items[0].imageAsset.display
+                )
+            ) {
+                // need to add display.margin ect. for custom spacing component so that changes are tracked reactively
+                this.block.metadata.config.items.forEach((item) => {
+                    if (!item.imageAsset.display) {
+                        item.imageAsset.display = {
+                            width: 100,
+                            margin: '',
+                            padding: '',
+                        }
+                        item.imageAsset.hideBackground = true
+                    }
+                })
+            }
+        },
         onAddElement() {
             const defaultObject = {
                 tabHeader: '',
                 expand: false,
                 content: '',
-                imageAsset: null,
+                imageAsset: {
+                    display: {
+                        width: 100,
+                        margin: '',
+                        padding: '',
+                    },
+                    hideBackground: true,
+                },
             }
             this.block.metadata.config.items.push(defaultObject)
             this.block.metadata.config.currentTab =

package/components/Settings/VideoSettings/SourcePicker.vue

@@ -21,7 +21,7 @@
                 {{
                     sourceDescription ||
                     $t(
-                        'windward.core.components.settings.video.video.configure_blurb'
+                        'windward.core.components.settings.video.media.configure_blurb'
                     )
                 }}
             </template>

package/components/Settings/VideoSettings.vue

@@ -123,7 +123,10 @@
                                 (file, rawFile) =>
                                     onAdSourceSelect(file, rawFile, 0)
                             "
-                            @change:track="onAdTrackSelect($event, 0)"
+                            @change:track="
+                                (file, rawFile) =>
+                                    onAdTrackSelect(file, rawFile, 0)
+                            "
                         ></SourcePicker>
                     </v-tab-item>
 
@@ -146,9 +149,12 @@
                             :disabled="render"
                             @change:source="
                                 (file, rawFile) =>
-                                    onAdSourceSelect(file, rawFile, 0)
+                                    onAdSourceSelect(file, rawFile, 100)
+                            "
+                            @change:track="
+                                (file, rawFile) =>
+                                    onAdTrackSelect(file, rawFile, 100)
                             "
-                            @change:track="onAdTrackSelect($event, 0)"
                         ></SourcePicker>
                     </v-tab-item>
                 </v-tabs-items>
@@ -575,6 +581,11 @@ export default {
             return ads.length
         },
         onRemovePlaylistItem() {
+            // If there's still items in the playlist then decrement it down to the previous item
+            if (this.playlistIndex > 0) {
+                this.playlistPaginator--
+            }
+
             if (this.block.metadata.config.playlist.length > 1) {
                 this.block.metadata.config.playlist.splice(
                     this.playlistIndex,
@@ -621,7 +632,7 @@ export default {
 
             this.reloadVideo()
         },
-        onSourceSelect(file, rawFile) {
+        onSourceSelect(file, _rawFile) {
             // No file, clear the selection
             if (_.isEmpty(file)) {
                 delete this.block.metadata.config.playlist[this.playlistIndex]
@@ -632,7 +643,7 @@ export default {
 
                 // Clear out any associated captions
                 this.media.track = null
-                this.onTrackSelect(null)
+                this.onTrackSelect()
 
                 this.showVideo = false
             } else {
@@ -652,11 +663,11 @@ export default {
 
                 // Clear the tracks. it will either be inherited via linked captions or be hard-set by the user
                 this.media.track = null
-                this.onTrackSelect(null)
+                this.onTrackSelect()
             }
             this.reloadVideo()
         },
-        onTrackSelect(file) {
+        onTrackSelect(file = null, _rawFile = null) {
             if (_.isEmpty(file)) {
                 this.block.metadata.config.playlist[this.playlistIndex].tracks =
                     []
@@ -667,7 +678,7 @@ export default {
             }
             this.reloadVideo()
         },
-        onAdSourceSelect(file, rawFile, playAtPercent) {
+        onAdSourceSelect(file, _rawFile, playAtPercent) {
             const adIndex = this.getAdSlot(playAtPercent)
 
             // Prep in case the ad slot isn't setup yet
@@ -688,11 +699,11 @@ export default {
 
                 // Clear the tracks. it will either be inherited via linked captions or be hard-set by the user
                 this.media.ads[playAtPercent].track = null
-                this.onAdTrackSelect(null, playAtPercent)
+                this.onAdTrackSelect(null, null, playAtPercent)
             }
             this.reloadVideo()
         },
-        onAdTrackSelect(file, playAtPercent) {
+        onAdTrackSelect(file, _rawFile, playAtPercent) {
             const adIndex = this.getAdSlot(playAtPercent)
 
             if (_.isEmpty(file)) {
@@ -710,7 +721,7 @@ export default {
             }
             this.reloadVideo()
         },
-        onPlaybackChange(e) {
+        onPlaybackChange(_e) {
             // Sort the list so we don't get instances of 2, 1, 0.25, 3
             this.block.metadata.config.attributes.playbackrates.sort()
         },

package/components/utils/ContentViewer.vue

@@ -54,6 +54,21 @@ export default {
                     content =
                         FillInBlankHelper.renderFillInTHeBlankHtml(content)
                 }
+                // finds any underscores grouped together of any length over 2
+                let regex = /(_{2,})/g
+                if (content.match(regex)) {
+                    content = content.replace(regex, (match) => {
+                        return (
+                            '<span role="img" aria-label="' +
+                            this.$t(
+                                'windward.core.components.utils.tiny_mce_wrapper.blank'
+                            ) +
+                            '">' +
+                            match +
+                            '</span>'
+                        )
+                    })
+                }
             }
             return Vue.compile('<div>' + content + '</div>')
         },
@@ -84,4 +99,8 @@ img {
     font-size: 1rem;
     line-height: 1.75em;
 }
+caption {
+    color: var(--v-primary-base);
+    text-align: left;
+}
 </style>

package/components/utils/TinyMCEWrapper.vue

@@ -11,7 +11,7 @@
                 <label v-if="label" class="editor-label">{{ label }}</label>
             </slot>
             <Editor
-                :id="id"
+                :id="editorId"
                 :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
                 v-model="text"
                 initial-value=""
@@ -121,6 +121,7 @@ export default {
     props: {
         value: { type: String, required: true, default: '' },
         id: { type: String, required: false, default: '' },
+        dataKey: { type: String, required: false, default: '' }, // used as a unique key for testing
         height: { type: Number, required: false, default: null },
         menubar: {
             type: String,
@@ -152,12 +153,26 @@ export default {
     computed: {
         dataCy() {
             return (
+                this.dataKey ||
                 this.id ||
                 this.label.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
                 this.hint.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
                 _.get(this, '$parent.$parent.$options.name', '')
             )
         },
+        editorId() {
+            // If the id is not empty then make sure it's unique
+            // TinyMCE fails to load if an id is duplicated. Also duplicate ids are just bad in general
+            if (this.id) {
+                const duplicates = document.querySelectorAll(`#${this.id}`)
+
+                return duplicates.length === 0
+                    ? this.id
+                    : this.id + '-' + this.seed
+            } else {
+                return ''
+            }
+        },
         isDarkTheme() {
             return this.$vuetify.theme.isDark
         },
@@ -194,7 +209,7 @@ export default {
                 },
                 autoresize_min_height: 100,
                 autoresize_max_height: 1000,
-                autoresize_bottom_margin: 0,
+                autoresize_bottom_margin: 1,
                 plugins: [
                     'autoresize',
                     'advlist',
@@ -425,6 +440,7 @@ export default {
                     '    color: #1a1d1e;' +
                     '}',
                 importcss_append: true,
+                link_default_target: '_blank',
             }
         },
         elementBody() {

package/components/utils/assets/tinymce/content/global.scss

@@ -9,7 +9,17 @@ table {
         border: 1px solid var(--v-primary-base);
         padding: 3px;
     }
+
+    // Define styles for floating buttons and behavior in small screens
+    @media (max-width: 600px) {
+        // Ensure table is scrollable horizontally
+        display: block;
+        white-space: nowrap;
+        overflow-x: auto;
+        position: relative;
+    }
 }
+
 table {
     &.windward-table-default {
         color: black;

package/components/utils/assets/tinymce/ui/global.scss

@@ -1,8 +1,12 @@
 table {
-    border: 1px solid black !important;
+    border: var(--v-primary-base);
     th,
     td {
-        border: 1px solid black !important;
+        border: var(--v-primary-base);
+    }
+    caption {
+        text-align: left;
+        color: var(--v-primary-base);
     }
 }
 

package/components/utils/glossary/CourseGlossary.vue

@@ -33,6 +33,7 @@
                                         'writable'
                                     )
                                 "
+                                :disabled="disabled"
                                 @click:save="save"
                                 @click:save-new="saveNew"
                                 @click:trigger="addTerm"
@@ -108,6 +109,7 @@
                                 <SpeedDial
                                     direction="left"
                                     transition="slide-x-reverse-transition"
+                                    :disabled="disabled"
                                 >
                                     <v-btn
                                         color="error"
@@ -142,7 +144,7 @@
                                     >
                                         {{ $t('shared.forms.edit') }}
                                         <span class="sr-only">{{
-                                            $t('forms.edit')
+                                            $t('shared.forms.edit')
                                         }}</span>
                                     </v-btn>
                                 </SpeedDial>
@@ -171,8 +173,9 @@ export default {
     components: { DialogBox, CourseGlossaryForm, SpeedDial, TextViewer },
     layout: 'course',
     middleware: ['auth'],
-    props: {},
-
+    props: {
+        disabled: { type: Boolean, required: false, default: false },
+    },
     data() {
         return {
             dialog: false,

package/components/utils/glossary/GlossaryToolTip.vue

@@ -1,25 +1,25 @@
 <template>
     <div
+        v-click-outside="onClickOutside"
         class="glossary-word"
         :class="{ active: show }"
-        v-click-outside="onClickOutside"
         @click="show = !show"
     >
         <v-tooltip
-            top
             v-model="show"
+            top
             :open-on-hover="false"
             color="primary"
             max-width="768px"
             z-index="10"
         >
             <template #activator="{ on }">
-                <span v-on="on">
+                <span tabindex="0" v-on="on">
                     <slot name="term"></slot>
                 </span>
             </template>
             <div>
-                <div v-if="this.$slots['definition']">
+                <div v-if="$slots['definition']">
                     <h6 class="text-capitalize">
                         <slot name="term"></slot>
                         {{
@@ -33,7 +33,7 @@
                         <slot name="definition"></slot>
                     </p>
                 </div>
-                <div v-if="this.$slots['alternate_forms']">
+                <div v-if="$slots['alternate_forms']">
                     <h4 class="text-capitalize">
                         <slot name="term"></slot>
                         {{
@@ -46,7 +46,7 @@
                     <p><slot name="alternate_forms"></slot></p>
                 </div>
 
-                <div v-if="this.$slots['related_terms']">
+                <div v-if="$slots['related_terms']">
                     <h4 class="text-capitalize">
                         {{
                             $t(

package/i18n/en-US/components/content/blocks/generate_questions.ts

@@ -1,5 +1,25 @@
 export default {
-    error: 'Could not generate question from provided content.',
+    error: {
+        default: 'Could not generate question from provided content.',
+        default_support:
+            'Please try again or contact support if the issue persists.',
+
+        insufficient_content: 'More content needed to generate questions.',
+        insufficient_content_support:
+            'Please add more text, examples, or explanations to this section. We recommend at least 2-3 paragraphs of content.',
+
+        content_mismatch: "Content doesn't match question type.",
+        content_mismatch_support:
+            "The current content isn't suitable for this type of question. Consider adding more specific examples or comparable items.",
+
+        llm_unavailable: 'Question generation temporarily unavailable.',
+        llm_unavailable_support:
+            "We're unable to connect to our AI service at the moment. Please try again in a few minutes.",
+
+        technical: 'Unable to process request.',
+        technical_support:
+            'Something went wrong. Please try again or contact support if this continues.',
+    },
     button_label: 'Generate Question',
     selected_pages: 'Selected Page',
 }

package/i18n/en-US/components/content/blocks/video.ts

@@ -1,4 +1,4 @@
 export default {
-    not_configured_title: 'Video not configured',
+    not_configured_title: 'Media not configured',
     edit_prompt: 'Edit this block to get started',
 }