From 1b9476b9bb14727c5307005922caab8990fad9e7 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 7 Jan 2025 14:00:56 +0100 Subject: [PATCH 1/3] fix: mention background alignment --- src/web/MarkdownTextInput.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css index 0b73db96c..10953b5bb 100644 --- a/src/web/MarkdownTextInput.css +++ b/src/web/MarkdownTextInput.css @@ -18,10 +18,16 @@ display: none; } -.react-native-live-markdown-input-singleline span[data-type="text"] { +.react-native-live-markdown-input-singleline span[data-type='text'] { vertical-align: middle; } +.react-native-live-markdown-input-singleline span[data-type='mention-user'] > span, +.react-native-live-markdown-input-singleline span[data-type='mention-here'] > span, +.react-native-live-markdown-input-singleline span[data-type='mention-report'] > span { + background: inherit; +} + .react-native-live-markdown-input-singleline:empty::before, .react-native-live-markdown-input-multiline:empty::before { pointer-events: none; From b5e474648bf3f59aa8b43b91307636e442338ec1 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 15 Jan 2025 16:10:24 +0100 Subject: [PATCH 2/3] fix: singleline cursor overlapping letters & mention background shift --- src/web/MarkdownTextInput.css | 6 ++---- src/web/utils/blockUtils.ts | 9 ++++++++- src/web/utils/parserUtils.ts | 12 +++++++++--- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css index 10953b5bb..a7ad1fdd1 100644 --- a/src/web/MarkdownTextInput.css +++ b/src/web/MarkdownTextInput.css @@ -22,10 +22,8 @@ vertical-align: middle; } -.react-native-live-markdown-input-singleline span[data-type='mention-user'] > span, -.react-native-live-markdown-input-singleline span[data-type='mention-here'] > span, -.react-native-live-markdown-input-singleline span[data-type='mention-report'] > span { - background: inherit; +.react-native-live-markdown-input-singleline > p:last-child span:last-child { + padding-right: 1px; } .react-native-live-markdown-input-singleline:empty::before, diff --git a/src/web/utils/blockUtils.ts b/src/web/utils/blockUtils.ts index e9837569b..580b50b05 100644 --- a/src/web/utils/blockUtils.ts +++ b/src/web/utils/blockUtils.ts @@ -4,8 +4,9 @@ import type {PartialMarkdownStyle} from '../../styleUtils'; import {addInlineImagePreview} from '../inputElements/inlineImage'; import type {NodeType, TreeNode} from './treeUtils'; -function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle) { +function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle, isMultiline = true) { const node = targetElement; + switch (type) { case 'line': Object.assign(node.style, { @@ -74,6 +75,12 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty position: 'relative', }); break; + case 'text': + if (!isMultiline) { + Object.assign(node.style, {backgroundColor: targetElement.parentElement?.style.backgroundColor}); + Object.assign(targetElement.parentElement?.style ?? {}, {backgroundColor: 'transparent'}); + } + break; default: break; } diff --git a/src/web/utils/parserUtils.ts b/src/web/utils/parserUtils.ts index 694b6601c..869abb9c6 100644 --- a/src/web/utils/parserUtils.ts +++ b/src/web/utils/parserUtils.ts @@ -87,7 +87,7 @@ function addBrElement(node: TreeNode) { return spanNode; } -function addTextToElement(node: TreeNode, text: string) { +function addTextToElement(node: TreeNode, text: string, isMultiline = true) { const lines = text.split('\n'); lines.forEach((line, index) => { if (line !== '') { @@ -96,6 +96,12 @@ function addTextToElement(node: TreeNode, text: string) { span.setAttribute('data-type', 'text'); span.appendChild(document.createTextNode(line)); appendNode(span, node, 'text', line.length); + + const parentType = span.parentElement?.dataset.type; + if (!isMultiline && parentType && ['pre', 'code', 'mention-here', 'mention-user', 'mention-report'].includes(parentType)) { + // this is a fix to background colors being shifted downwards in a singleline input + addStyleToBlock(span, 'text', {}, false); + } } if (index < lines.length - 1 || (index === 0 && line === '')) { @@ -208,7 +214,7 @@ function parseRangesToHTMLNodes( span.setAttribute('data-type', range.type); if (!disableInlineStyles) { - addStyleToBlock(span, range.type, markdownStyle); + addStyleToBlock(span, range.type, markdownStyle, isMultiline); } const spanNode = appendNode(span, currentParentNode, range.type, range.length); @@ -223,7 +229,7 @@ function parseRangesToHTMLNodes( lastRangeEndIndex = range.start; } else { // adding markdown tag - addTextToElement(spanNode, text.substring(range.start, endOfCurrentRange)); + addTextToElement(spanNode, text.substring(range.start, endOfCurrentRange), isMultiline); currentParentNode.element.value = (currentParentNode.element.value || '') + (spanNode.element.value || ''); lastRangeEndIndex = endOfCurrentRange; // tag unnesting and adding text after the tag From 746f5bb1e99039fede7105346399d75bf8fb9411 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Mon, 20 Jan 2025 10:38:33 +0100 Subject: [PATCH 3/3] fix: text moving vertically on ranges change in singleline input --- src/web/MarkdownTextInput.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/web/MarkdownTextInput.css b/src/web/MarkdownTextInput.css index a7ad1fdd1..eb266f790 100644 --- a/src/web/MarkdownTextInput.css +++ b/src/web/MarkdownTextInput.css @@ -22,8 +22,8 @@ vertical-align: middle; } -.react-native-live-markdown-input-singleline > p:last-child span:last-child { - padding-right: 1px; +.react-native-live-markdown-input-singleline > p:last-child { + padding-right: 1px !important; } .react-native-live-markdown-input-singleline:empty::before,