@windward/integrations 0.21.0 → 0.23.0

package/components/Content/Blocks/ActionPanel/TransformBlock.vue

@@ -38,6 +38,9 @@ import { mapGetters } from 'vuex'
 import Organization from '~/models/Organization'
 import Course from '~/models/Course'
 
+const MIN_SENTENCE_COUNT_FOR_TEXT_TRANSFORM = 4
+const SENTENCES_PER_PARAGRAPH = 2
+
 export default {
     props: {
         // The block associated with this action panel
@@ -71,6 +74,7 @@ export default {
         ...mapGetters({
             organization: 'organization/get',
             course: 'course/get',
+            activeContentBlock: 'contentBlock/get',
         }),
         vModel: {
             get() {
@@ -80,28 +84,55 @@ export default {
                 this.$emit('input', value)
             },
         },
+        sourceBlock() {
+            if (!this.value) {
+                return null
+            }
+
+            const active = this.activeContentBlock
+            if (
+                active &&
+                typeof active === 'object' &&
+                _.get(active, 'id', null) &&
+                _.get(active, 'id', null) === _.get(this.value, 'id', null)
+            ) {
+                return active
+            }
+
+            return this.value
+        },
         sourceKind() {
-            return this.getBlockKindFromTag(_.get(this.value, 'tag', ''))
+            return this.getBlockKindFromTag(_.get(this.sourceBlock, 'tag', ''))
         },
-        textParagraphCount() {
+        textSentenceCount() {
             if (this.sourceKind !== 'text') {
                 return 0
             }
-            return this.countTextParagraphs(_.get(this.value, 'body', ''))
+            return this.countTextSentences(
+                _.get(this.sourceBlock, 'body', ''),
+                this.$i18n?.locale
+            )
         },
         structuredItemCount() {
-            if (!['accordion', 'tab', 'clickable_icons'].includes(this.sourceKind)) {
+            if (
+                !['accordion', 'tab', 'clickable_icons'].includes(
+                    this.sourceKind
+                )
+            ) {
                 return 0
             }
-            return this.countStructuredItems(this.value)
+            return this.countStructuredItems(this.sourceBlock)
         },
         availableActions() {
-            if (!this.value) {
+            if (!this.sourceBlock) {
                 return []
             }
 
             if (this.sourceKind === 'text') {
-                if (this.textParagraphCount < 2) {
+                if (
+                    this.textSentenceCount <
+                    MIN_SENTENCE_COUNT_FOR_TEXT_TRANSFORM
+                ) {
                     return []
                 }
                 return [
@@ -127,9 +158,6 @@ export default {
             }
 
             if (this.sourceKind === 'accordion') {
-                if (this.structuredItemCount < 2) {
-                    return []
-                }
                 const actions = [
                     {
                         tag: 'content-blocks-text',
@@ -158,9 +186,6 @@ export default {
             }
 
             if (this.sourceKind === 'tab') {
-                if (this.structuredItemCount < 2) {
-                    return []
-                }
                 const actions = [
                     {
                         tag: 'content-blocks-text',
@@ -189,9 +214,6 @@ export default {
             }
 
             if (this.sourceKind === 'clickable_icons') {
-                if (this.structuredItemCount < 2) {
-                    return []
-                }
                 const actions = [
                     {
                         tag: 'content-blocks-text',
@@ -251,26 +273,328 @@ export default {
 
             return 'unknown'
         },
-        countTextParagraphs(html) {
+        extractTextFromHtml(html) {
+            if (!html || typeof html !== 'string') {
+                return ''
+            }
+
+            if (typeof DOMParser === 'undefined') {
+                return html.replace(/<[^>]+>/g, ' ')
+            }
+
+            try {
+                const doc = new DOMParser().parseFromString(html, 'text/html')
+                return (doc?.body?.textContent || '').trim()
+            } catch (_e) {
+                return html.replace(/<[^>]+>/g, ' ')
+            }
+        },
+        segmentSentences(text, locale) {
+            const input = typeof text === 'string' ? text : ''
+            if (!input.trim()) {
+                return []
+            }
+
+            try {
+                if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+                    const segmenter = new Intl.Segmenter(locale || undefined, {
+                        granularity: 'sentence',
+                    })
+                    const rawSegments = Array.from(segmenter.segment(input))
+
+                    return rawSegments
+                        .map((seg, idx) => {
+                            const start = Number(seg.index || 0)
+                            const end =
+                                idx + 1 < rawSegments.length
+                                    ? Number(rawSegments[idx + 1].index || 0)
+                                    : input.length
+                            return {
+                                start,
+                                end,
+                                text: input.slice(start, end),
+                            }
+                        })
+                        .filter((seg) => seg.text.trim().length > 0)
+                }
+            } catch (_e) {
+                // Ignore and fall back to regex
+            }
+
+            // Fallback sentence splitter (best-effort)
+            const re = /[^.!?]+[.!?]+(?:\s+|$)|[^.!?]+$/g
+            const segments = []
+            let match = null
+            while ((match = re.exec(input)) !== null) {
+                const value = match[0] || ''
+                if (!value.trim()) {
+                    continue
+                }
+                segments.push({
+                    start: match.index,
+                    end: match.index + value.length,
+                    text: value,
+                })
+            }
+            return segments
+        },
+        countTextSentences(html, locale) {
+            const text = this.extractTextFromHtml(html)
+            return this.segmentSentences(text, locale).length
+        },
+        countTopLevelParagraphs(html) {
             if (!html || typeof html !== 'string') {
                 return 0
             }
 
+            if (typeof DOMParser === 'undefined') {
+                return 0
+            }
+
             try {
                 const doc = new DOMParser().parseFromString(html, 'text/html')
-                const paragraphs = Array.from(doc.querySelectorAll('p, li'))
-                return paragraphs.filter((el) => (el.textContent || '').trim())
-                    .length
+                const body = doc?.body
+                if (!body) {
+                    return 0
+                }
+
+                const paragraphs = Array.from(body.children).filter((el) => {
+                    const tag = (el.tagName || '').toLowerCase()
+                    if (tag !== 'p' && tag !== 'li') {
+                        return false
+                    }
+                    return (el.textContent || '').trim().length > 0
+                })
+
+                return paragraphs.length
             } catch (_e) {
-                // Fallback: simple split on line breaks after stripping tags
-                const normalized = html
-                    .replace(/<[^>]+>/g, '\n')
-                    .split(/\n+/)
-                    .map((p) => p.trim())
-                    .filter((p) => p.length > 0)
-                return normalized.length
+                return 0
             }
         },
+        resolveTextOffset(textNodes, targetOffset) {
+            let offset = Math.max(0, Math.trunc(Number(targetOffset) || 0))
+
+            for (const node of textNodes) {
+                const len = (node.nodeValue || '').length
+                if (offset <= len) {
+                    return { node, offset }
+                }
+                offset -= len
+            }
+
+            const last = textNodes[textNodes.length - 1]
+            return { node: last, offset: (last?.nodeValue || '').length }
+        },
+        splitHtmlIntoParagraphs(html, locale) {
+            if (!html || typeof html !== 'string') {
+                return null
+            }
+
+            if (typeof DOMParser === 'undefined') {
+                return null
+            }
+
+            const doc = new DOMParser().parseFromString(html, 'text/html')
+            const body = doc?.body
+            if (!body) {
+                return null
+            }
+
+            const hasMeaningfulTextOutsideElements = Array.from(
+                body.childNodes
+            ).some(
+                (node) =>
+                    node.nodeType === Node.TEXT_NODE &&
+                    (node.textContent || '').trim()
+            )
+            const elementChildren = Array.from(body.children)
+
+            let container = null
+            if (
+                elementChildren.length === 1 &&
+                !hasMeaningfulTextOutsideElements
+            ) {
+                container = elementChildren[0]
+            } else if (
+                elementChildren.length === 0 &&
+                (body.textContent || '').trim()
+            ) {
+                container = body
+            } else {
+                return null
+            }
+
+            const containerTag =
+                container === body
+                    ? 'body'
+                    : (container.tagName || '').toLowerCase()
+            const disallowedContainers = new Set([
+                'ul',
+                'ol',
+                'table',
+                'tbody',
+                'thead',
+                'tr',
+                'td',
+                'th',
+            ])
+            if (disallowedContainers.has(containerTag)) {
+                return null
+            }
+
+            // Avoid creating nested paragraphs by splitting inside containers that already have paragraphs
+            if (container !== body && containerTag !== 'p') {
+                if (
+                    typeof container.querySelector === 'function' &&
+                    container.querySelector('p')
+                ) {
+                    return null
+                }
+            }
+
+            const text = container.textContent || ''
+            const sentences = this.segmentSentences(text, locale)
+            if (sentences.length < MIN_SENTENCE_COUNT_FOR_TEXT_TRANSFORM) {
+                return null
+            }
+
+            const ranges = []
+            for (
+                let i = 0;
+                i < sentences.length;
+                i += SENTENCES_PER_PARAGRAPH
+            ) {
+                const start = sentences[i].start
+                const end =
+                    sentences[
+                        Math.min(
+                            i + SENTENCES_PER_PARAGRAPH - 1,
+                            sentences.length - 1
+                        )
+                    ].end
+                ranges.push({ start, end })
+            }
+
+            const walker = doc.createTreeWalker(container, NodeFilter.SHOW_TEXT)
+            const textNodes = []
+            let current = walker.nextNode()
+            while (current) {
+                if ((current.nodeValue || '').length > 0) {
+                    textNodes.push(current)
+                }
+                current = walker.nextNode()
+            }
+            if (textNodes.length === 0) {
+                return null
+            }
+
+            const paragraphs = []
+            for (const { start, end } of ranges) {
+                const startPos = this.resolveTextOffset(textNodes, start)
+                const endPos = this.resolveTextOffset(textNodes, end)
+                if (!startPos?.node || !endPos?.node) {
+                    continue
+                }
+
+                const range = doc.createRange()
+                range.setStart(startPos.node, startPos.offset)
+                range.setEnd(endPos.node, endPos.offset)
+
+                const fragment = range.cloneContents()
+                const p = doc.createElement('p')
+                p.appendChild(fragment)
+
+                if ((p.textContent || '').trim().length > 0) {
+                    paragraphs.push(p)
+                }
+            }
+
+            if (paragraphs.length < 2) {
+                return null
+            }
+
+            body.innerHTML = ''
+            paragraphs.forEach((p) => body.appendChild(p))
+            return body.innerHTML
+        },
+        prepareHtmlForBlockTransform(html, locale) {
+            if (!html || typeof html !== 'string') {
+                throw new Error('invalid_html')
+            }
+
+            const sentenceCount = this.countTextSentences(html, locale)
+            if (sentenceCount < MIN_SENTENCE_COUNT_FOR_TEXT_TRANSFORM) {
+                throw new Error('insufficient_content')
+            }
+
+            // If the microservice will see enough top-level paragraphs, don't touch it.
+            if (this.countTopLevelParagraphs(html) >= 2) {
+                return html
+            }
+
+            // Unwrap a single container (common when editors wrap content)
+            if (typeof DOMParser !== 'undefined') {
+                try {
+                    let currentHtml = html
+                    for (let i = 0; i < 2; i++) {
+                        if (this.countTopLevelParagraphs(currentHtml) >= 2) {
+                            return currentHtml
+                        }
+
+                        const doc = new DOMParser().parseFromString(
+                            currentHtml,
+                            'text/html'
+                        )
+                        const body = doc?.body
+                        if (!body) {
+                            break
+                        }
+
+                        const hasMeaningfulTextOutsideElements = Array.from(
+                            body.childNodes
+                        ).some(
+                            (node) =>
+                                node.nodeType === Node.TEXT_NODE &&
+                                (node.textContent || '').trim()
+                        )
+                        const elementChildren = Array.from(body.children)
+
+                        if (
+                            elementChildren.length === 1 &&
+                            !hasMeaningfulTextOutsideElements
+                        ) {
+                            const container = elementChildren[0]
+                            const tag = (container.tagName || '').toLowerCase()
+                            if (
+                                tag === 'div' ||
+                                tag === 'section' ||
+                                tag === 'article'
+                            ) {
+                                currentHtml = container.innerHTML || ''
+                                continue
+                            }
+                        }
+
+                        break
+                    }
+
+                    const splitHtml = this.splitHtmlIntoParagraphs(
+                        currentHtml,
+                        locale
+                    )
+                    if (
+                        splitHtml &&
+                        this.countTopLevelParagraphs(splitHtml) >= 2
+                    ) {
+                        return splitHtml
+                    }
+                } catch (_e) {
+                    // Ignore and fall through to error
+                }
+            }
+
+            throw new Error('insufficient_content')
+        },
         countStructuredItems(block) {
             const items = _.get(block, 'metadata.config.items', [])
             return Array.isArray(items) ? items.length : 0
@@ -321,6 +645,7 @@ export default {
             const normalizedOrder = Number.isFinite(baseOrder)
                 ? Math.trunc(baseOrder)
                 : 0
+
             const newBlock = {
                 id: _.uniqueId('create_content_block_'),
                 content_id: null,
@@ -354,7 +679,9 @@ export default {
 
             const title = typeof config.title === 'string' ? config.title : ''
             const instructions =
-                typeof config.instructions === 'string' ? config.instructions : ''
+                typeof config.instructions === 'string'
+                    ? config.instructions
+                    : ''
             const displayTitle = _.isBoolean(config.display_title)
                 ? config.display_title
                 : true
@@ -375,7 +702,9 @@ export default {
                             typeof rawItem.content === 'string'
                                 ? rawItem.content
                                 : '',
-                        imageConfig: this.normalizeImageConfig(rawItem.fileConfig),
+                        imageConfig: this.normalizeImageConfig(
+                            rawItem.fileConfig
+                        ),
                     }
                 }
 
@@ -389,19 +718,27 @@ export default {
                             typeof rawItem.content === 'string'
                                 ? rawItem.content
                                 : '',
-                        imageConfig: this.normalizeImageConfig(rawItem.imageAsset),
+                        imageConfig: this.normalizeImageConfig(
+                            rawItem.imageAsset
+                        ),
                     }
                 }
 
                 if (kind === 'clickable_icons') {
-                    const fileConfig = this.normalizeImageConfig(rawItem.fileConfig)
+                    const fileConfig = this.normalizeImageConfig(
+                        rawItem.fileConfig
+                    )
                     const iconImage = rawItem.iconImage === true
 
                     return {
                         title:
-                            typeof rawItem.title === 'string' ? rawItem.title : '',
+                            typeof rawItem.title === 'string'
+                                ? rawItem.title
+                                : '',
                         bodyHtml:
-                            typeof rawItem.body === 'string' ? rawItem.body : '',
+                            typeof rawItem.body === 'string'
+                                ? rawItem.body
+                                : '',
                         imageConfig:
                             iconImage || this.hasAssetInImageConfig(fileConfig)
                                 ? fileConfig
@@ -432,7 +769,8 @@ export default {
             }
 
             structured.items.forEach((item) => {
-                const itemTitle = typeof item.title === 'string' ? item.title : ''
+                const itemTitle =
+                    typeof item.title === 'string' ? item.title : ''
                 const bodyHtml =
                     typeof item.bodyHtml === 'string' ? item.bodyHtml : ''
 
@@ -618,15 +956,15 @@ export default {
                         'windward.core.components.settings.clickable_icon.information'
                     ),
                     display: {
-                        show_title: false,
-                        show_background: false,
+                        show_title: true,
+                        show_background: true,
                         round_icon: false,
                         italic_icon: false,
                         large_icon: false,
                         autocolor: true,
                     },
                     items: items.map((item) => ({
-                        icon: '',
+                        icon: 'mdi-star',
                         fileConfig: {},
                         iconImage: false,
                         title: item.title || '',
@@ -642,14 +980,11 @@ export default {
             return newBlock
         },
         async generateMultiItemBlockFromText(targetType) {
-            const html = _.get(this.value, 'body', '')
-            if (!html || typeof html !== 'string') {
-                throw new Error('invalid_html')
-            }
+            const sourceBlock = this.sourceBlock
+            const html = _.get(sourceBlock, 'body', '')
+            const locale = this.$i18n?.locale
 
-            if (this.countTextParagraphs(html) < 2) {
-                throw new Error('insufficient_paragraphs')
-            }
+            const preparedHtml = this.prepareHtmlForBlockTransform(html, locale)
 
             const organizationId = _.get(this.organization, 'id', null)
             const courseId = _.get(this.course, 'id', null)
@@ -671,9 +1006,9 @@ export default {
             }
 
             const payload = {
-                html,
+                html: preparedHtml,
                 target_tag: targetType,
-                language: this.$i18n.locale,
+                language: locale,
             }
 
             const requestConfig = request._reqConfig(
@@ -692,7 +1027,7 @@ export default {
                 throw new Error('invalid_response')
             }
 
-            return this.buildTransformedBlock(this.value, data, targetType)
+            return this.buildTransformedBlock(sourceBlock, data, targetType)
         },
         async performBlockTransform(e, targetType) {
             e.stopPropagation()
@@ -701,7 +1036,9 @@ export default {
                 return
             }
 
-            if (!this.value || !this.value.tag) {
+            const sourceBlock = this.sourceBlock
+
+            if (!sourceBlock || !sourceBlock.tag) {
                 return
             }
 
@@ -717,19 +1054,16 @@ export default {
                     newBlock = await this.generateMultiItemBlockFromText(
                         targetType
                     )
+                } else if (targetType === 'content-blocks-text') {
+                    newBlock = this.buildTextBlockFromStructured(sourceBlock)
                 } else {
-                    if (this.countStructuredItems(this.value) < 2) {
+                    if (this.countStructuredItems(sourceBlock) < 2) {
                         throw new Error('insufficient_items')
                     }
-
-                    if (targetType === 'content-blocks-text') {
-                        newBlock = this.buildTextBlockFromStructured(this.value)
-                    } else {
-                        newBlock = this.buildStructuredBlockFromStructured(
-                            this.value,
-                            targetType
-                        )
-                    }
+                    newBlock = this.buildStructuredBlockFromStructured(
+                        sourceBlock,
+                        targetType
+                    )
                 }
 
                 if (!newBlock) {
@@ -746,8 +1080,17 @@ export default {
                 // eslint-disable-next-line no-console
                 console.error('Block transform failed', e)
 
+                const reason = _.get(
+                    e,
+                    'response.data.error.details.reason',
+                    ''
+                )
+
                 if (this.$toast) {
-                    if (String(e?.message) === 'insufficient_paragraphs') {
+                    if (
+                        String(e?.message) === 'insufficient_content' ||
+                        reason === 'NOT_ENOUGH_PARAGRAPHS'
+                    ) {
                         this.$toast.error(
                             this.$t(
                                 'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_insufficient_paragraphs'

package/components/Content/Blocks/ExternalIntegration/LtiConsumer.vue

@@ -85,6 +85,15 @@
                     :value="value"
                 />
             </v-form>
+            <v-alert v-if="launchError" type="error">
+                <p>
+                    {{
+                        $t(
+                            'windward.integrations.components.content.blocks.external_integration.lti_consumer.unknown_error'
+                        )
+                    }}
+                </p>
+            </v-alert>
             <iframe
                 v-if="
                     block.metadata.config.launch_type === 'inline' &&
@@ -112,14 +121,22 @@
                 </template>
                 <template #form="{ on, attrs }">
                     <iframe
-                        v-if="launched"
+                        v-if="!launchError && launched"
                         v-bind="attrs"
                         :name="frameId"
                         class="launch-frame"
                         v-on="on"
                     ></iframe>
-
                     <div v-else></div>
+                    <v-alert v-if="launchError" type="error">
+                        <p>
+                            {{
+                                $t(
+                                    'windward.integrations.components.content.blocks.external_integration.lti_consumer.unknown_error'
+                                )
+                            }}
+                        </p>
+                    </v-alert>
                 </template>
             </DialogBox>
         </div>
@@ -184,6 +201,7 @@ export default {
             launched: false,
             launchTimeout: {},
             openModal: false,
+            launchError: false,
         }
     },
     async fetch() {
@@ -288,6 +306,7 @@ export default {
             }
         },
         async onLaunch() {
+            this.launchError = false
             try {
                 // Clear the launch data in-case we're in inline mode
                 // If the iframe isn't destroyed subsequent launches will be new windows instead of the target iframe
@@ -330,6 +349,7 @@ export default {
                     )
                 }
             } catch (e) {
+                this.launchError = true
                 // eslint-disable-next-line no-console
                 console.error('LTI Link Launch Fail', e)
             }