@windward/core 0.27.0 → 0.29.0

package/components/Settings/VideoSettings/SourcePicker.vue

@@ -74,12 +74,17 @@
             }}
         </v-alert>
 
-        <ContentBlockAsset
-            v-if="sourceInherit && hasLinkedCaptions"
-            :value="linkedCaptions"
-            :assets="assets"
-            disabled
-        ></ContentBlockAsset>
+        <!-- Display ALL linked captions when inheriting -->
+        <div v-if="sourceInherit && hasLinkedCaptions">
+            <div v-for="(caption, index) in linkedCaptions" :key="caption.file_asset_id || index" class="mb-2">
+                <ContentBlockAsset
+                    :value="caption"
+                    :assets="assets"
+                    :label="getCaptionLabel(caption)"
+                    disabled
+                ></ContentBlockAsset>
+            </div>
+        </div>
 
         <ContentBlockAsset
             v-if="!sourceInherit"
@@ -169,19 +174,12 @@ export default {
     data() {
         return {
             sourceInherit: true,
-            linkedCaptions: null,
+            linkedCaptions: [],
         }
     },
     computed: {
         hasLinkedCaptions() {
-            return this.linkedCaptions !== null
-        },
-        linkedCaptionsName() {
-            return _.get(
-                this.linkedCaptions,
-                'asset.name',
-                _.get(this.linkedCaptions, 'asset.public_url', '???')
-            )
+            return this.linkedCaptions && this.linkedCaptions.length > 0
         },
         isFromUrl() {
             if (
@@ -225,7 +223,7 @@ export default {
     methods: {
         onSourceChange(file, rawFile) {
             this.linkedCaptions = this.getLinkedCaptions(rawFile)
-            this.sourceInherit = this.linkedCaptions !== null
+            this.sourceInherit = this.hasLinkedCaptions
 
             this.$emit('change:source', file, rawFile)
         },
@@ -238,26 +236,36 @@ export default {
         onUpdateAssets(assets) {
             this.$emit('update:assets', assets)
         },
+        /**
+         * Get ALL linked captions (not just the first one)
+         * @param {Object} file - The video file object
+         * @returns {Array} Array of VTT caption files
+         */
         getLinkedCaptions(file) {
             if (!file) {
-                return null
+                return []
             }
-            // Check to see if the video source has a linked asset and it's a vtt file.
-            // Prefer the most recently linked VTT (last match).
-            const linkedAssets = _.get(file, 'asset.linked_assets', [])
-            const linkedCaption = _.findLast(linkedAssets, function (f) {
-                const ext = _.get(f, 'asset.metadata.extension', '').toLowerCase()
-                const mime = _.get(f, 'asset.metadata.mime', '').toLowerCase()
-                const name = _.get(f, 'asset.name', '').toLowerCase()
-
-                return (
-                    ext === 'vtt' ||
-                    mime === 'text/vtt' ||
-                    name.endsWith('.vtt')
-                )
-            })
+            // Get ALL VTT files from linked_assets (not just the first one)
+            const linkedCaptions = _.filter(
+                _.get(file, 'asset.linked_assets', []),
+                function (f) {
+                    return _.get(f, 'asset.metadata.extension', '') === 'vtt'
+                }
+            )
 
-            return linkedCaption || null
+            return linkedCaptions || []
+        },
+        /**
+         * Get the label with locale in parentheses for a caption
+         * Format: "(EN-US)" - if no locale, assume English
+         * @param {Object} caption - The caption file object
+         * @returns {string} Label with locale code
+         */
+        getCaptionLabel(caption) {
+            const localeCode = _.get(caption, 'locale.code') ||
+                               _.get(caption, 'asset.metadata.locale') ||
+                               'EN-US'
+            return `(${localeCode})`
         },
     },
 }

package/components/utils/ContentViewer.vue

@@ -2,7 +2,8 @@
     <component
         :is="convertedContent"
         v-show="value"
-        :class="textViewer ? 'text-viewer' : ''"
+        :class="contentClasses"
+        :dir="textDirection"
     ></component>
 </template>
 
@@ -28,7 +29,28 @@ export default {
         ...mapGetters({
             course: 'course/get',
             glossaryTerms: 'glossary/getTerms',
+            isRtl: 'course/isRtl',
+            courseTextDirection: 'course/textDirection',
         }),
+        /**
+         * Get the text direction based on course locale
+         * @returns {string} 'rtl' or 'ltr'
+         */
+        textDirection() {
+            return this.courseTextDirection || 'ltr'
+        },
+        /**
+         * Generate CSS classes for the content container
+         * Includes RTL-specific classes when course is RTL
+         * @returns {Object} Object of CSS class names
+         */
+        contentClasses() {
+            return {
+                'text-viewer': this.textViewer,
+                'rtl-content': this.isRtl,
+                'ltr-content': !this.isRtl,
+            }
+        },
         convertedContent() {
             let content = ''
             if (this.value) {
@@ -96,4 +118,161 @@ caption {
     color: var(--v-primary-base);
     text-align: left;
 }
+
+/**
+ * RTL (Right-to-Left) Language Support Styles
+ * Applied when content is in RTL languages (Arabic, Hebrew, Persian, Urdu)
+ *
+ * Uses unicode-bidi: isolate to create a directional isolation boundary.
+ * This ensures RTL content displays correctly even when system UI is LTR.
+ */
+.rtl-content {
+    /* Base RTL text properties */
+    direction: rtl;
+    text-align: right;
+    unicode-bidi: isolate;
+
+    /* Paragraph and text alignment */
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    li,
+    td,
+    th,
+    label,
+    span,
+    div {
+        text-align: right;
+    }
+
+    /* Lists - reverse bullet/number position */
+    ul,
+    ol {
+        padding-right: 40px;
+        padding-left: 0;
+    }
+
+    li {
+        text-align: right;
+    }
+
+    /* Table alignment */
+    table {
+        direction: rtl;
+    }
+
+    th,
+    td {
+        text-align: right;
+    }
+
+    /* Caption alignment for RTL */
+    caption {
+        text-align: right;
+    }
+
+    /* Blockquote RTL styling */
+    blockquote {
+        border-right: 4px solid var(--v-primary-base);
+        border-left: none;
+        padding-right: 16px;
+        padding-left: 0;
+        margin-right: 0;
+        margin-left: 0;
+    }
+
+    /* Handle mixed LTR content within RTL */
+    /* Use explicit dir="ltr" on elements that need left-to-right */
+    [dir='ltr'] {
+        direction: ltr;
+        text-align: left;
+    }
+
+    /* Code blocks should remain LTR */
+    pre,
+    code {
+        direction: ltr;
+        text-align: left;
+    }
+
+    /* Images - keep centered or as specified */
+    img {
+        /* Images are typically direction-neutral */
+    }
+
+    /* Form elements */
+    input,
+    textarea,
+    select {
+        direction: rtl;
+        text-align: right;
+    }
+}
+
+/**
+ * LTR (Left-to-Right) Language Support Styles
+ * Applied when content is in LTR languages (English, Spanish, French, etc.)
+ *
+ * Uses unicode-bidi: isolate to create a directional isolation boundary.
+ * This ensures LTR content displays correctly even when system UI is RTL.
+ */
+.ltr-content {
+    direction: ltr;
+    text-align: left;
+    unicode-bidi: isolate;
+
+    /* Paragraph and text alignment */
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    li,
+    td,
+    th,
+    label,
+    span,
+    div {
+        text-align: left;
+    }
+
+    /* Lists - standard bullet/number position */
+    ul,
+    ol {
+        padding-left: 40px;
+        padding-right: 0;
+    }
+
+    caption {
+        text-align: left;
+    }
+
+    /* Handle mixed RTL content within LTR */
+    [dir='rtl'] {
+        direction: rtl;
+        text-align: right;
+    }
+}
+
+/**
+ * RTL-aware responsive styles
+ */
+@media (max-width: 600px) {
+    .rtl-content {
+        /* Maintain RTL on mobile */
+        text-align: right;
+
+        ul,
+        ol {
+            padding-right: 20px;
+            padding-left: 0;
+        }
+    }
+}
 </style>

package/components/utils/TinyMCEWrapper.vue

@@ -156,6 +156,7 @@ export default {
         showGlossary: { type: Boolean, required: false, default: false },
         render: { type: Boolean, required: false, default: false },
         hideTextEditor: { type: Boolean, required: false, default: false },
+        defaultAlignment: { type: String, required: false, default: null },
     },
     data() {
         return {
@@ -165,7 +166,13 @@ export default {
             paused: false,
             isRevising: false,
             rephraseToneIndex: 0,
-            toneSequence: ['neutral', 'conversational', 'formal', 'succinct', 'encouraging'],
+            toneSequence: [
+                'neutral',
+                'conversational',
+                'formal',
+                'succinct',
+                'encouraging',
+            ],
         }
     },
 
@@ -356,6 +363,15 @@ export default {
                         value: 'windward-table-subject-report',
                     },
                 ],
+                init_instance_callback: (editor) => {
+                    if (this.defaultAlignment) {
+                        editor.execCommand(
+                            'mceToggleFormat',
+                            false,
+                            this.defaultAlignment
+                        )
+                    }
+                },
                 setup: () => {
                     // Here we can add plugin
                     getTinymce().PluginManager.add(
@@ -579,9 +595,10 @@ export default {
                 return null
             }
 
-            const tone = this.toneSequence[
-                this.rephraseToneIndex % this.toneSequence.length
-            ]
+            const tone =
+                this.toneSequence[
+                    this.rephraseToneIndex % this.toneSequence.length
+                ]
             this.rephraseToneIndex =
                 (this.rephraseToneIndex + 1) % this.toneSequence.length
 
@@ -748,12 +765,12 @@ export default {
                         }
 
                         // Wrap response with temporary markers so we can reselect inserted content
-                        const startId = `ww-revise-start-${this.seed}-${Date.now()}-${Math.random()
-                            .toString(36)
-                            .slice(2)}`
-                        const endId = `ww-revise-end-${this.seed}-${Date.now()}-${Math.random()
-                            .toString(36)
-                            .slice(2)}`
+                        const startId = `ww-revise-start-${
+                            this.seed
+                        }-${Date.now()}-${Math.random().toString(36).slice(2)}`
+                        const endId = `ww-revise-end-${
+                            this.seed
+                        }-${Date.now()}-${Math.random().toString(36).slice(2)}`
                         const wrappedHtml =
                             `<span id="${startId}" data-ww-revise="s"></span>` +
                             responseData.html +
@@ -769,7 +786,10 @@ export default {
                             if (startEl && endEl) {
                                 const selectRange = editor.dom.createRng()
                                 // Select everything between markers
-                                if (selectRange.setStartAfter && selectRange.setEndBefore) {
+                                if (
+                                    selectRange.setStartAfter &&
+                                    selectRange.setEndBefore
+                                ) {
                                     selectRange.setStartAfter(startEl)
                                     selectRange.setEndBefore(endEl)
                                 } else {
@@ -787,15 +807,19 @@ export default {
                                     }
                                     const startIndex = childIndex(startEl) + 1
                                     const endIndex = childIndex(endEl)
-                                    selectRange.setStart(startParent, startIndex)
+                                    selectRange.setStart(
+                                        startParent,
+                                        startIndex
+                                    )
                                     selectRange.setEnd(endParent, endIndex)
                                 }
                                 editor.selection.setRng(selectRange)
 
                                 // Remove markers after selection is set
-                                if (startEl.parentNode) startEl.parentNode.removeChild(startEl)
-                                if (endEl.parentNode) endEl.parentNode.removeChild(endEl)
-
+                                if (startEl.parentNode)
+                                    startEl.parentNode.removeChild(startEl)
+                                if (endEl.parentNode)
+                                    endEl.parentNode.removeChild(endEl)
                             }
                         } catch (_e) {
                             // Ignore selection restoration errors

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

@@ -2,4 +2,22 @@ export default {
     initial_setup: 'Add question text to get started.',
     your_response: 'Your Response',
     sample_response: 'Suggested/Sample Response',
+    ai_feedback: 'AI Feedback',
+    ai_feedback_generating: 'Generating feedback…',
+    ai_feedback_retry: 'Retry',
+    ai_feedback_sources: 'Suggested pages to review',
+    ai_feedback_not_available: 'No AI feedback available yet.',
+    ai_feedback_error:
+        'We could not generate AI feedback right now. Please try again.',
+    ai_feedback_timeout:
+        'AI feedback is taking longer than expected. Please try again.',
+    untitled_page: 'Untitled page',
+    understanding_level: 'Understanding level',
+    understanding_levels: {
+        strong: 'Strong Understanding',
+        clear: 'Clear Understanding',
+        developing: 'Developing Understanding',
+        emerging: 'Emerging Understanding',
+        limited: 'Limited Understanding',
+    },
 }

package/i18n/en-US/components/settings/open_response.ts

@@ -1,8 +1,13 @@
 export default {
     question: 'Question',
     sample_response: 'Suggested/Sample Response',
+    ai_mode_for_student: 'AI mode for student',
     starting_text: 'Starting Text',
     title: 'Open Response',
     instructions:
         'Type your answer in the text box and click "Submit" to save your response.',
+    validation: {
+        sample_response_required_ai_mode:
+            'Suggested/Sample Response is required when AI mode for student is enabled.',
+    },
 }

package/i18n/es-ES/components/content/blocks/open_response.ts

@@ -2,4 +2,22 @@ export default {
     initial_setup: 'Agrega el texto de la pregunta para comenzar.',
     your_response: 'Tu respuesta',
     sample_response: 'Respuesta sugerida/de muestra',
+    ai_feedback: 'Retroalimentación de IA',
+    ai_feedback_generating: 'Generando retroalimentación…',
+    ai_feedback_retry: 'Reintentar',
+    ai_feedback_sources: 'Páginas sugeridas para revisar',
+    ai_feedback_not_available: 'Aún no hay retroalimentación de IA disponible.',
+    ai_feedback_error:
+        'No pudimos generar la retroalimentación de IA en este momento. Por favor, vuelva a intentarlo.',
+    ai_feedback_timeout:
+        'La retroalimentación de IA está tardando más de lo esperado. Por favor, vuelva a intentarlo.',
+    untitled_page: 'Página sin título',
+    understanding_level: 'Nivel de comprensión',
+    understanding_levels: {
+        strong: 'Comprensión sólida',
+        clear: 'Comprensión clara',
+        developing: 'Comprensión en desarrollo',
+        emerging: 'Comprensión emergente',
+        limited: 'Comprensión limitada',
+    },
 }

package/i18n/es-ES/components/settings/open_response.ts

@@ -1,8 +1,13 @@
 export default {
     question: 'Pregunta',
     sample_response: 'Respuesta sugerida/de muestra',
+    ai_mode_for_student: 'Modo de IA para el estudiante',
     starting_text: 'Texto inicial',
     title: 'Respuesta abierta',
     instructions:
         'Escriba su respuesta en el cuadro de texto y haga clic en "Enviar" para guardar su respuesta.',
+    validation: {
+        sample_response_required_ai_mode:
+            'La respuesta sugerida/de muestra es obligatoria cuando el modo de IA para el estudiante está habilitado.',
+    },
 }

package/i18n/sv-SE/components/content/blocks/open_response.ts

@@ -2,4 +2,22 @@ export default {
     initial_setup: 'Lägg till frågetext för att komma igång.',
     your_response: 'Ditt svar',
     sample_response: 'Föreslagen/provsvar',
+    ai_feedback: 'AI-feedback',
+    ai_feedback_generating: 'Genererar feedback…',
+    ai_feedback_retry: 'Försök igen',
+    ai_feedback_sources: 'Föreslagna sidor att granska',
+    ai_feedback_not_available: 'Ingen AI-feedback tillgänglig ännu.',
+    ai_feedback_error:
+        'Vi kunde inte generera AI-feedback just nu. Försök igen.',
+    ai_feedback_timeout:
+        'AI-feedback tar längre tid än förväntat. Försök igen.',
+    untitled_page: 'Sida utan titel',
+    understanding_level: 'Förståelsenivå',
+    understanding_levels: {
+        strong: 'Stark förståelse',
+        clear: 'Tydlig förståelse',
+        developing: 'Förståelse under utveckling',
+        emerging: 'Begynnande förståelse',
+        limited: 'Begränsad förståelse',
+    },
 }

package/i18n/sv-SE/components/settings/open_response.ts

@@ -1,8 +1,13 @@
 export default {
     question: 'Fråga',
     sample_response: 'Föreslagen/provsvar',
+    ai_mode_for_student: 'AI-läge för studenten',
     starting_text: 'Starttext',
     title: 'Öppet svar',
     instructions:
         'Skriv ditt svar i textrutan och klicka på "Skicka" för att spara ditt svar.',
+    validation: {
+        sample_response_required_ai_mode:
+            'Föreslagen/provsvar krävs när AI-läge för studenten är aktiverat.',
+    },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.27.0",
+    "version": "0.29.0",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {
@@ -21,7 +21,7 @@
     "license": "MIT",
     "homepage": "https://bitbucket.org/mindedge/windward-ui-plugin-core#readme",
     "dependencies": {
-        "@mindedge/vuetify-player": "^0.5.1",
+        "@mindedge/vuetify-player": "^0.5.2",
         "@tinymce/tinymce-vue": "^3.2.8",
         "accessibility-scanner": "^0.0.1",
         "eslint": "^8.11.0",

package/test/Components/Settings/ClickableIconsSettings.spec.js

@@ -28,7 +28,7 @@ describe('ClickableIconsSettings', () => {
         wrapper.vm.onAddElement()
         expect(wrapper.vm.$data.block.metadata.config.items).toEqual([
             {
-                icon: '',
+                icon: 'mdi-star',
                 fileConfig: {},
                 iconImage: false,
                 title: '',