@windward/integrations 0.20.0 → 0.23.0

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

@@ -19,7 +19,7 @@
             </template>
 
             <v-list-item
-                v-for="action in actions"
+                v-for="action in availableActions"
                 :key="action.tag"
                 :disabled="isTransforming"
                 @click="performBlockTransform($event, action.tag)"
@@ -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
@@ -65,32 +68,13 @@ export default {
         return {
             showMenu: false,
             isTransforming: false,
-            actions: [
-                {
-                    tag: 'plugin-core-accordion',
-                    label: this.$t(
-                        'windward.core.shared.content_blocks.title.accordion'
-                    ),
-                },
-                {
-                    tag: 'plugin-core-tab',
-                    label: this.$t(
-                        'windward.core.shared.content_blocks.title.tab'
-                    ),
-                },
-                {
-                    tag: 'plugin-core-clickable-icons',
-                    label: this.$t(
-                        'windward.core.shared.content_blocks.title.clickable_icons'
-                    ),
-                },
-            ],
         }
     },
     computed: {
         ...mapGetters({
             organization: 'organization/get',
             course: 'course/get',
+            activeContentBlock: 'contentBlock/get',
         }),
         vModel: {
             get() {
@@ -100,59 +84,812 @@ export default {
                 this.$emit('input', value)
             },
         },
-        canTransformBlock() {
-            if (!this.value || this.value.tag !== 'content-blocks-text') {
-                return false
+        sourceBlock() {
+            if (!this.value) {
+                return null
             }
 
-            const body = _.get(this.value, 'body', '')
-            if (!body || typeof body !== 'string') {
-                return false
+            const active = this.activeContentBlock
+            if (
+                active &&
+                typeof active === 'object' &&
+                _.get(active, 'id', null) &&
+                _.get(active, 'id', null) === _.get(this.value, 'id', null)
+            ) {
+                return active
             }
 
-            let paragraphCount = 0
-            try {
-                const doc = new DOMParser().parseFromString(body, 'text/html')
-                const paragraphs = Array.from(doc.querySelectorAll('p, li'))
-                paragraphCount = paragraphs.filter((el) =>
-                    (el.textContent || '').trim()
-                ).length
-            } catch (_e) {
-                // Fallback: simple split on double line breaks
-                const normalized = body
-                    .replace(/<[^>]+>/g, '\n')
-                    .split(/\n+/)
-                    .map((p) => p.trim())
-                    .filter((p) => p.length > 0)
-                paragraphCount = normalized.length
+            return this.value
+        },
+        sourceKind() {
+            return this.getBlockKindFromTag(_.get(this.sourceBlock, 'tag', ''))
+        },
+        textSentenceCount() {
+            if (this.sourceKind !== 'text') {
+                return 0
+            }
+            return this.countTextSentences(
+                _.get(this.sourceBlock, 'body', ''),
+                this.$i18n?.locale
+            )
+        },
+        structuredItemCount() {
+            if (
+                !['accordion', 'tab', 'clickable_icons'].includes(
+                    this.sourceKind
+                )
+            ) {
+                return 0
+            }
+            return this.countStructuredItems(this.sourceBlock)
+        },
+        availableActions() {
+            if (!this.sourceBlock) {
+                return []
             }
 
-            return paragraphCount >= 2
+            if (this.sourceKind === 'text') {
+                if (
+                    this.textSentenceCount <
+                    MIN_SENTENCE_COUNT_FOR_TEXT_TRANSFORM
+                ) {
+                    return []
+                }
+                return [
+                    {
+                        tag: 'plugin-core-accordion',
+                        label: this.$t(
+                            'windward.core.shared.content_blocks.title.accordion'
+                        ),
+                    },
+                    {
+                        tag: 'plugin-core-tab',
+                        label: this.$t(
+                            'windward.core.shared.content_blocks.title.tab'
+                        ),
+                    },
+                    {
+                        tag: 'plugin-core-clickable-icons',
+                        label: this.$t(
+                            'windward.core.shared.content_blocks.title.clickable_icons'
+                        ),
+                    },
+                ]
+            }
+
+            if (this.sourceKind === 'accordion') {
+                const actions = [
+                    {
+                        tag: 'content-blocks-text',
+                        label: this.$t(
+                            'components.content.blocks.text.block_title'
+                        ),
+                    },
+                ]
+                if (this.structuredItemCount >= 2) {
+                    actions.push(
+                        {
+                            tag: 'plugin-core-tab',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.tab'
+                            ),
+                        },
+                        {
+                            tag: 'plugin-core-clickable-icons',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.clickable_icons'
+                            ),
+                        }
+                    )
+                }
+                return actions
+            }
+
+            if (this.sourceKind === 'tab') {
+                const actions = [
+                    {
+                        tag: 'content-blocks-text',
+                        label: this.$t(
+                            'components.content.blocks.text.block_title'
+                        ),
+                    },
+                ]
+                if (this.structuredItemCount >= 2) {
+                    actions.push(
+                        {
+                            tag: 'plugin-core-accordion',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.accordion'
+                            ),
+                        },
+                        {
+                            tag: 'plugin-core-clickable-icons',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.clickable_icons'
+                            ),
+                        }
+                    )
+                }
+                return actions
+            }
+
+            if (this.sourceKind === 'clickable_icons') {
+                const actions = [
+                    {
+                        tag: 'content-blocks-text',
+                        label: this.$t(
+                            'components.content.blocks.text.block_title'
+                        ),
+                    },
+                ]
+                if (this.structuredItemCount >= 2) {
+                    actions.push(
+                        {
+                            tag: 'plugin-core-accordion',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.accordion'
+                            ),
+                        },
+                        {
+                            tag: 'plugin-core-tab',
+                            label: this.$t(
+                                'windward.core.shared.content_blocks.title.tab'
+                            ),
+                        }
+                    )
+                }
+                return actions
+            }
+
+            return []
+        },
+        canTransformBlock() {
+            return this.availableActions.length > 0
         },
     },
     methods: {
         onClickShowTransforms(e) {
             e.stopPropagation()
         },
-        buildTransformedBlock(sourceBlock, data, targetType) {
-            const baseOrder = _.get(sourceBlock, 'order', 0)
+        getBlockKindFromTag(tag) {
+            if (!tag || typeof tag !== 'string') {
+                return 'unknown'
+            }
+
+            if (tag === 'content-blocks-text') {
+                return 'text'
+            }
+
+            const normalized = tag.replace(/^plugin-/, '')
+            if (normalized === 'core-accordion') {
+                return 'accordion'
+            }
+            if (normalized === 'core-tab') {
+                return 'tab'
+            }
+            if (normalized === 'core-clickable-icons') {
+                return 'clickable_icons'
+            }
+
+            return 'unknown'
+        },
+        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 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) {
+                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
+        },
+        escapeHtml(text) {
+            return String(text == null ? '' : text)
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#39;')
+        },
+        normalizeAssetReference(asset) {
+            if (!asset) {
+                return null
+            }
+
+            if (typeof asset === 'string') {
+                return { file_asset_id: asset }
+            }
+
+            if (typeof asset === 'object') {
+                return asset
+            }
+
+            return null
+        },
+        normalizeImageConfig(rawConfig) {
+            if (!rawConfig || typeof rawConfig !== 'object') {
+                return null
+            }
+
+            const config = _.cloneDeep(rawConfig)
+            if (typeof config.asset === 'string') {
+                config.asset = this.normalizeAssetReference(config.asset)
+            } else if (config.asset && typeof config.asset === 'object') {
+                config.asset = this.normalizeAssetReference(config.asset)
+            }
+
+            return config
+        },
+        hasAssetInImageConfig(imageConfig) {
+            return !!_.get(imageConfig, 'asset.file_asset_id', null)
+        },
+        buildNewBlockBase(sourceBlock) {
+            const baseOrderRaw = _.get(sourceBlock, 'order', 0)
+            const baseOrder = Number(baseOrderRaw)
+            const normalizedOrder = Number.isFinite(baseOrder)
+                ? Math.trunc(baseOrder)
+                : 0
+
             const newBlock = {
                 id: _.uniqueId('create_content_block_'),
                 content_id: null,
                 tag: '',
                 body: '',
                 status: 'draft',
-                order: baseOrder + 0.5,
+                order: normalizedOrder,
                 type: {
                     save_state: false,
                     trackable: false,
                     completable: false,
                 },
+                assets: _.cloneDeep(_.get(sourceBlock, 'assets', [])),
                 metadata: {
                     config: {},
                 },
             }
 
+            const display = _.cloneDeep(
+                _.get(sourceBlock, 'metadata.display', null)
+            )
+            if (display) {
+                newBlock.metadata.display = display
+            }
+
+            return newBlock
+        },
+        extractStructuredBlockData(sourceBlock) {
+            const kind = this.getBlockKindFromTag(_.get(sourceBlock, 'tag', ''))
+            const config = _.get(sourceBlock, 'metadata.config', {}) || {}
+
+            const title = typeof config.title === 'string' ? config.title : ''
+            const instructions =
+                typeof config.instructions === 'string'
+                    ? config.instructions
+                    : ''
+            const displayTitle = _.isBoolean(config.display_title)
+                ? config.display_title
+                : true
+
+            const rawItems = Array.isArray(config.items) ? config.items : []
+            const items = rawItems.map((rawItem) => {
+                if (!rawItem || typeof rawItem !== 'object') {
+                    return { title: '', bodyHtml: '', imageConfig: null }
+                }
+
+                if (kind === 'accordion') {
+                    return {
+                        title:
+                            typeof rawItem.header === 'string'
+                                ? rawItem.header
+                                : '',
+                        bodyHtml:
+                            typeof rawItem.content === 'string'
+                                ? rawItem.content
+                                : '',
+                        imageConfig: this.normalizeImageConfig(
+                            rawItem.fileConfig
+                        ),
+                    }
+                }
+
+                if (kind === 'tab') {
+                    return {
+                        title:
+                            typeof rawItem.tabHeader === 'string'
+                                ? rawItem.tabHeader
+                                : '',
+                        bodyHtml:
+                            typeof rawItem.content === 'string'
+                                ? rawItem.content
+                                : '',
+                        imageConfig: this.normalizeImageConfig(
+                            rawItem.imageAsset
+                        ),
+                    }
+                }
+
+                if (kind === 'clickable_icons') {
+                    const fileConfig = this.normalizeImageConfig(
+                        rawItem.fileConfig
+                    )
+                    const iconImage = rawItem.iconImage === true
+
+                    return {
+                        title:
+                            typeof rawItem.title === 'string'
+                                ? rawItem.title
+                                : '',
+                        bodyHtml:
+                            typeof rawItem.body === 'string'
+                                ? rawItem.body
+                                : '',
+                        imageConfig:
+                            iconImage || this.hasAssetInImageConfig(fileConfig)
+                                ? fileConfig
+                                : null,
+                    }
+                }
+
+                return { title: '', bodyHtml: '', imageConfig: null }
+            })
+
+            return {
+                kind,
+                title,
+                instructions,
+                displayTitle,
+                items,
+            }
+        },
+        buildTextBlockFromStructured(sourceBlock) {
+            const structured = this.extractStructuredBlockData(sourceBlock)
+            const parts = []
+
+            if (structured.displayTitle && structured.title) {
+                parts.push(`<h2>${this.escapeHtml(structured.title)}</h2>`)
+            }
+            if (structured.instructions) {
+                parts.push(`<p>${this.escapeHtml(structured.instructions)}</p>`)
+            }
+
+            structured.items.forEach((item) => {
+                const itemTitle =
+                    typeof item.title === 'string' ? item.title : ''
+                const bodyHtml =
+                    typeof item.bodyHtml === 'string' ? item.bodyHtml : ''
+
+                if (itemTitle) {
+                    parts.push(`<h3>${this.escapeHtml(itemTitle)}</h3>`)
+                }
+                if (bodyHtml) {
+                    parts.push(bodyHtml)
+                }
+            })
+
+            const newBlock = this.buildNewBlockBase(sourceBlock)
+            newBlock.tag = 'content-blocks-text'
+            newBlock.body = parts.join('')
+            newBlock.metadata.config = { expand: false }
+            return newBlock
+        },
+        buildStructuredBlockFromStructured(sourceBlock, targetType) {
+            const structured = this.extractStructuredBlockData(sourceBlock)
+            const newBlock = this.buildNewBlockBase(sourceBlock)
+
+            if (targetType === 'plugin-core-accordion') {
+                newBlock.tag = 'plugin-core-accordion'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.accordion'
+                )
+                newBlock.metadata.config = {
+                    title: structured.title,
+                    display_title: structured.displayTitle,
+                    instructions: structured.instructions,
+                    items: structured.items.map((item) => ({
+                        header: item.title || '',
+                        expand: false,
+                        content: item.bodyHtml || '',
+                        fileConfig: item.imageConfig || {
+                            display: {
+                                width: 100,
+                                margin: '',
+                                padding: '',
+                            },
+                            hideBackground: true,
+                        },
+                    })),
+                }
+                return newBlock
+            }
+
+            if (targetType === 'plugin-core-tab') {
+                newBlock.tag = 'plugin-core-tab'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.tab'
+                )
+                newBlock.metadata.config = {
+                    title: structured.title,
+                    display_title: structured.displayTitle,
+                    instructions: structured.instructions,
+                    currentTab: 0,
+                    items: structured.items.map((item) => ({
+                        tabHeader: item.title || '',
+                        expand: false,
+                        content: item.bodyHtml || '',
+                        imageAsset: item.imageConfig || {
+                            display: {
+                                width: 100,
+                                margin: '',
+                                padding: '',
+                            },
+                            hideBackground: true,
+                        },
+                    })),
+                }
+                return newBlock
+            }
+
+            if (targetType === 'plugin-core-clickable-icons') {
+                newBlock.tag = 'plugin-core-clickable-icons'
+                newBlock.body = this.$t(
+                    'windward.core.shared.content_blocks.title.clickable_icons'
+                )
+                newBlock.metadata.config = {
+                    title: structured.title,
+                    display_title: structured.displayTitle,
+                    instructions: structured.instructions,
+                    description: this.$t(
+                        'windward.core.components.settings.clickable_icon.information'
+                    ),
+                    display: {
+                        show_title: false,
+                        show_background: false,
+                        round_icon: false,
+                        italic_icon: false,
+                        large_icon: false,
+                        autocolor: true,
+                    },
+                    items: structured.items.map((item) => {
+                        const imageConfig = item.imageConfig
+                        const hasAsset = this.hasAssetInImageConfig(imageConfig)
+
+                        return {
+                            icon: '',
+                            fileConfig: hasAsset ? imageConfig : {},
+                            iconImage: hasAsset,
+                            title: item.title || '',
+                            body: item.bodyHtml || '',
+                            color: {
+                                class: '',
+                            },
+                            active: false,
+                        }
+                    }),
+                }
+                return newBlock
+            }
+
+            throw new Error(`Unsupported targetType: ${targetType}`)
+        },
+        buildTransformedBlock(sourceBlock, data, targetType) {
+            const newBlock = this.buildNewBlockBase(sourceBlock)
+
             const blockTitle = data.block_title || ''
             const items = Array.isArray(data.items) ? data.items : []
 
@@ -219,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 || '',
@@ -242,30 +979,18 @@ export default {
 
             return newBlock
         },
-        async performBlockTransform(e, targetType) {
-            e.stopPropagation()
-
-            const html = _.get(this.value, 'body', '')
-            if (!html || typeof html !== 'string') {
-                return
-            }
+        async generateMultiItemBlockFromText(targetType) {
+            const sourceBlock = this.sourceBlock
+            const html = _.get(sourceBlock, 'body', '')
+            const locale = this.$i18n?.locale
 
-            if (this.isTransforming) {
-                return
-            }
+            const preparedHtml = this.prepareHtmlForBlockTransform(html, locale)
 
             const organizationId = _.get(this.organization, 'id', null)
             const courseId = _.get(this.course, 'id', null)
 
             if (!organizationId || !courseId) {
-                if (this.$toast) {
-                    this.$toast.error(
-                        this.$t(
-                            'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_error'
-                        )
-                    )
-                }
-                return
+                throw new Error('missing_context')
             }
 
             const request = new Course()
@@ -277,55 +1002,76 @@ export default {
 
             const resourcePath = request._customResource
             if (!resourcePath) {
-                if (this.$toast) {
-                    this.$toast.error(
-                        this.$t(
-                            'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_error'
-                        )
-                    )
-                }
-                return
+                throw new Error('missing_resource')
             }
 
             const payload = {
-                html,
+                html: preparedHtml,
                 target_tag: targetType,
-                language: this.$i18n.locale,
+                language: locale,
+            }
+
+            const requestConfig = request._reqConfig(
+                {
+                    method: 'POST',
+                    url: `${request.baseURL()}/${resourcePath}`,
+                    data: payload,
+                },
+                { forceMethod: true }
+            )
+
+            const response = await request.request(requestConfig)
+            const data = response?.data || response
+
+            if (!data || !Array.isArray(data.items) || data.items.length < 2) {
+                throw new Error('invalid_response')
+            }
+
+            return this.buildTransformedBlock(sourceBlock, data, targetType)
+        },
+        async performBlockTransform(e, targetType) {
+            e.stopPropagation()
+
+            if (this.isTransforming) {
+                return
+            }
+
+            const sourceBlock = this.sourceBlock
+
+            if (!sourceBlock || !sourceBlock.tag) {
+                return
             }
 
             this.isTransforming = true
 
             try {
-                const requestConfig = request._reqConfig(
-                    {
-                        method: 'POST',
-                        url: `${request.baseURL()}/${resourcePath}`,
-                        data: payload,
-                    },
-                    { forceMethod: true }
-                )
-
-                const response = await request.request(requestConfig)
-                const data = response?.data || response
+                let newBlock = null
 
-                if (
-                    !data ||
-                    !Array.isArray(data.items) ||
-                    data.items.length === 0
-                ) {
-                    throw new Error('invalid_response')
+                if (this.sourceKind === 'text') {
+                    if (targetType === 'content-blocks-text') {
+                        return
+                    }
+                    newBlock = await this.generateMultiItemBlockFromText(
+                        targetType
+                    )
+                } else if (targetType === 'content-blocks-text') {
+                    newBlock = this.buildTextBlockFromStructured(sourceBlock)
+                } else {
+                    if (this.countStructuredItems(sourceBlock) < 2) {
+                        throw new Error('insufficient_items')
+                    }
+                    newBlock = this.buildStructuredBlockFromStructured(
+                        sourceBlock,
+                        targetType
+                    )
                 }
 
-                const newBlock = this.buildTransformedBlock(
-                    this.value,
-                    data,
-                    targetType
-                )
+                if (!newBlock) {
+                    throw new Error('invalid_new_block')
+                }
 
-                // Let the host content page own block insertion via the global event
                 this.$eb.$emit('create:content-block', newBlock)
 
-                // Immediately focus the new block for the user
                 const activeBlock = _.cloneDeep(newBlock)
                 this.$ContentService.setContentBlock(activeBlock)
                 this.$eb.$emit('block:focus', activeBlock)
@@ -333,12 +1079,36 @@ export default {
                 // Surface errors instead of failing silently
                 // eslint-disable-next-line no-console
                 console.error('Block transform failed', e)
+
+                const reason = _.get(
+                    e,
+                    'response.data.error.details.reason',
+                    ''
+                )
+
                 if (this.$toast) {
-                    this.$toast.error(
-                        this.$t(
-                            'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_error'
+                    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'
+                            )
                         )
-                    )
+                    } else if (String(e?.message) === 'insufficient_items') {
+                        this.$toast.error(
+                            this.$t(
+                                'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_insufficient_items'
+                            )
+                        )
+                    } else {
+                        this.$toast.error(
+                            this.$t(
+                                'windward.integrations.components.content.blocks.action_panel.transform_block.change_block_type_error'
+                            )
+                        )
+                    }
                 }
             } finally {
                 this.isTransforming = false