enh(NcRichText): make checkbox interactive

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/NcRichText/NcRichText.vue

@@ -84,12 +84,17 @@ textarea {
 This component can support [Github Flavored Markdown](https://github.github.com/gfm/).
 It adds such elements, as tables, task lists, strikethrough, and supports autolinks by default
 
+It is also possible to make a rendered content interactive and listen for events
+
 ```vue
 <template>
 	<div>
 		<textarea v-model="text" />
 
-		<NcRichText :text="text" :use-extended-markdown="true"/>
+		<NcRichText :text="text"
+			:use-extended-markdown="true"
+			:interactive="true"
+			@interacted="handleInteraction"/>
 	</div>
 </template>
 <script>
@@ -109,6 +114,16 @@ Table row | value A | value B
 `,
 			}
 		},
+		methods: {
+			handleInteraction(event) {
+				const uncheckedItem = '- [ ] ' + event.label + '\n'
+				const checkedItem = '- [x] ' + event.label + '\n'
+
+				this.text = event.value
+					? this.text.replace(uncheckedItem, checkedItem)
+					: this.text.replace(checkedItem, uncheckedItem)
+			},
+		},
 	}
 </script>
 <style lang="scss">
@@ -278,6 +293,7 @@ import NcReferenceList from './NcReferenceList.vue'
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
 import { remarkAutolink } from './autolink.js'
 import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
+import GenRandomId from '../../utils/GenRandomId.js'
 
 import { unified } from 'unified'
 import remarkParse from 'remark-parse'
@@ -346,11 +362,17 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/** Provide event from rendered markdown inputs */
+		interactive: {
+			type: Boolean,
+			default: false,
+		},
 		autolink: {
 			type: Boolean,
 			default: true,
 		},
 	},
+	emits: ['interacted'],
 	methods: {
 		renderPlaintext() {
 			const placeholders = this.text.split(/(\{[a-z\-_.0-9]+\})/ig).map((entry) => {
@@ -446,12 +468,18 @@ export default {
 			if (!String(type).startsWith('#')) {
 				if (this.useExtendedMarkdown) {
 					if (String(type) === 'li' && Array.isArray(children)
-						&& String(children[0].type) === 'input'
-						&& children[0].props?.type === 'checkbox') {
+						&& String(children?.[0]?.type) === 'input'
+						&& children?.[0]?.props?.type === 'checkbox') {
 						const [inputNode, , label] = children
 						const id = 'markdown-input-' + GenRandomId(5)
 						const inputComponent = h(NcCheckboxRadioSwitch, {
 							...inputNode.props,
+							id,
+							disabled: !this.interactive,
+							modelValue: inputNode.props.checked,
+							'onUpdate:model-value': (value) => {
+								this.$emit('interacted', { id, label, value })
+							},
 						}, label)
 						return h(type, props, inputComponent)
 					}

tests/unit/components/NcRichText/NcRichText.spec.js

@@ -190,4 +190,24 @@ describe('Foo', () => {
 		})
 		expect(wrapper.text()).toEqual('**Testwith** a ~~link~~ *to* [Link](https://example:1337) - go visit it')
 	})
+
+	it('formats interactive checkbox with extended markdown', async() => {
+		const wrapper = mount(NcRichText, {
+			props: {
+				text: '- [ ] task item',
+				useExtendedMarkdown: true,
+				interactive: true,
+			}
+		})
+		expect(wrapper.text()).toEqual('task item')
+		const checkbox = wrapper.findComponent({name: 'NcCheckboxRadioSwitch'})
+		expect(checkbox.exists()).toBeTruthy()
+		await checkbox.vm.$emit('update:model-value', true)
+		expect(wrapper.emitted().interacted).toBeTruthy()
+		expect(wrapper.emitted().interacted[0][0]).toMatchObject({
+			id: expect.anything(),
+			label: 'task item',
+			value: true,
+		})
+	})
 })