Merge pull request #5455 from nextcloud-libraries/fix/noid/checkbox-l…

…abel

fix(NcRichText): include all label items

src/components/NcRichText/NcRichText.vue

@@ -115,13 +115,29 @@ 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)
+			handleInteraction(id) {
+				const parentId = id.split('-markdown-input-')[0]
+				const index = Array.from(document.querySelectorAll(`span[id^="${parentId}-markdown-input-"]`)).findIndex((el) => el.id.includes(id))
+				if (index === -1 ) {
+					return
+				}
+				let checkBoxIndex = 0
+				lines = this.text.split('\n')
+				for (let i = 0; i < lines.length; i++) {
+					if (lines[i].includes('[ ]') || lines[i].includes('[x]')) {
+						if (checkBoxIndex === index) {
+							const isChecked = lines[i].includes('[x]')
+							if (isChecked) {
+								lines[i] = lines[i].replace('[x]', '[ ]')
+							} else {
+								lines[i] = lines[i].replace('[ ]', '[x]')
+							}
+							break
+						}
+						checkBoxIndex++
+					}
+				}
+				this.text = lines.join('\n')
 			},
 		},
 	}
@@ -150,11 +166,13 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 
 		<NcCheckboxRadioSwitch :checked.sync="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch :checked.sync="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked.sync="useExtendedMarkdown" type="checkbox">Use extended Markdown</NcCheckboxRadioSwitch>
 
 		<NcRichText :text="text"
 			:autolink="autolink"
 			:arguments="userMentions"
-			:use-markdown="useMarkdown" />
+			:use-markdown="useMarkdown"
+			:use-extended-markdown="useExtendedMarkdown" />
 	</div>
 </template>
 <script>
@@ -164,6 +182,7 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 				message: '',
 				autolink: true,
 				useMarkdown: true,
+				useExtendedMarkdown: true,
 				userData: {
 					Test01: {
 						icon: 'icon-user',
@@ -377,6 +396,13 @@ export default {
 		},
 	},
 	emits: ['interact:todo'],
+
+	data() {
+		return {
+			parentId: GenRandomId(5),
+		}
+	},
+
 	methods: {
 		renderPlaintext(h) {
 			const context = this
@@ -449,24 +475,33 @@ export default {
 
 						if (!tag.startsWith('#')) {
 							if (this.useExtendedMarkdown) {
+								let nestedNode = null
 								if (tag === 'li' && Array.isArray(children)
 									&& children[0].tag === 'input'
 									&& children[0].data.attrs.type === 'checkbox') {
-									const [inputNode, , label] = children
-									const id = 'markdown-input-' + GenRandomId(5)
+									const [inputNode, ...labelParts] = children
+
+									const nestedNodeIndex = labelParts.findIndex((child) => ['ul', 'ol', 'li', 'blockquote', 'pre'].includes(child.tag))
+									if (nestedNodeIndex !== -1) {
+										nestedNode = labelParts[nestedNodeIndex]
+										labelParts.splice(nestedNodeIndex)
+									}
+
+									const id = this.parentId + '-markdown-input-' + GenRandomId(5)
 									const inputComponent = h(NcCheckboxRadioSwitch, {
 										attrs: {
 											...inputNode.data.attrs,
 											id,
 											disabled: !this.interactive,
 										},
 										on: {
-											'update:checked': (value) => {
-												this.$emit('interact:todo', { id, label, value })
+											'update:checked': () => {
+												this.$emit('interact:todo', id)
 											},
 										},
-									}, [label])
-									return h(tag, attrs, [inputComponent])
+									}, labelParts)
+
+									return h(tag, attrs, [inputComponent, nestedNode])
 								}
 							}
 
@@ -547,4 +582,8 @@ export default {
 a:not(.rich-text--component) {
 	text-decoration: underline;
 }
+
+:deep(.checkbox-content__text) {
+	gap: 4px;
+}
 </style>

src/components/NcRichText/richtext.scss

@@ -2,6 +2,16 @@
  * Styles are extracted to extract scss to dist folder, too.
  */
 
+li.task-list-item > ul,
+li.task-list-item > ol,
+li.task-list-item > li,
+li.task-list-item > blockquote,
+li.task-list-item > pre {
+	margin-inline-start: 15px;
+	margin-block-end: 0;
+ }
+
+
 .rich-text--wrapper {
 	word-break: break-word;
 	line-height: 1.5;

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

@@ -201,10 +201,5 @@ describe('Foo', () => {
 		expect(checkbox.exists()).toBeTruthy()
 		await checkbox.vm.$emit('update:checked', true)
 		expect(wrapper.emitted()['interact:todo']).toBeTruthy()
-		expect(wrapper.emitted()['interact:todo'][0][0]).toMatchObject({
-			id: expect.anything(),
-			label: 'task item',
-			value: true,
-		})
 	})
 })