From eb37f81b8518fdce69612da76c7d8b8da811fa8a Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Fri, 5 Apr 2024 12:36:27 +0200 Subject: [PATCH 1/3] fix(NcRichText): include all label items Signed-off-by: DorraJaouad --- src/components/NcRichText/NcRichText.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue index 2abcbe6083..d42ba87c89 100644 --- a/src/components/NcRichText/NcRichText.vue +++ b/src/components/NcRichText/NcRichText.vue @@ -452,7 +452,7 @@ export default { if (tag === 'li' && Array.isArray(children) && children[0].tag === 'input' && children[0].data.attrs.type === 'checkbox') { - const [inputNode, , label] = children + const [inputNode, ...labelParts] = children const id = 'markdown-input-' + GenRandomId(5) const inputComponent = h(NcCheckboxRadioSwitch, { attrs: { @@ -462,10 +462,10 @@ export default { }, on: { 'update:checked': (value) => { - this.$emit('interact:todo', { id, label, value }) + this.$emit('interact:todo', { id, label: labelParts.join(''), value }) }, }, - }, [label]) + }, [labelParts]) return h(tag, attrs, [inputComponent]) } } @@ -547,4 +547,8 @@ export default { a:not(.rich-text--component) { text-decoration: underline; } + +:deep(.checkbox-content__text) { + gap: 4px; +} From 9c962362b168b89573c7390e7eb49d30761439fc Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Fri, 5 Apr 2024 18:16:03 +0200 Subject: [PATCH 2/3] fix(NcRichText): fix nested checklist rendering Signed-off-by: DorraJaouad --- src/components/NcRichText/NcRichText.vue | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue index d42ba87c89..ecf8ea1f1f 100644 --- a/src/components/NcRichText/NcRichText.vue +++ b/src/components/NcRichText/NcRichText.vue @@ -449,10 +449,19 @@ export default { if (!tag.startsWith('#')) { if (this.useExtendedMarkdown) { + let nestedList if (tag === 'li' && Array.isArray(children) && children[0].tag === 'input' && children[0].data.attrs.type === 'checkbox') { const [inputNode, ...labelParts] = children + + const nestedListIndex = labelParts.findIndex((child) => child.tag === 'ul' || child.tag === 'li') + if (nestedListIndex !== -1) { + nestedList = labelParts[nestedListIndex] + nestedList.data.attrs.style = 'margin-inline-start: 20px;' + labelParts.splice(nestedListIndex) + } + const id = 'markdown-input-' + GenRandomId(5) const inputComponent = h(NcCheckboxRadioSwitch, { attrs: { @@ -465,8 +474,10 @@ export default { this.$emit('interact:todo', { id, label: labelParts.join(''), value }) }, }, - }, [labelParts]) - return h(tag, attrs, [inputComponent]) + }, labelParts) + + return h(tag, attrs, [inputComponent, nestedListIndex ? [nestedList] : []]) + } } From 487330a4dc9a5c74962e877798148698b5b34ba4 Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Fri, 5 Apr 2024 21:56:13 +0200 Subject: [PATCH 3/3] fix(NcRichText): apply interactivity Signed-off-by: DorraJaouad --- src/components/NcRichText/NcRichText.vue | 62 +++++++++++++------ src/components/NcRichText/richtext.scss | 10 +++ .../components/NcRichText/NcRichText.spec.js | 5 -- 3 files changed, 53 insertions(+), 24 deletions(-) diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue index ecf8ea1f1f..8f4f06d0d7 100644 --- a/src/components/NcRichText/NcRichText.vue +++ b/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 Autolink Use Markdown + Use extended Markdown + :use-markdown="useMarkdown" + :use-extended-markdown="useExtendedMarkdown" />