Implement code and pre blocks support on web #456

BartoszGrajdek · 2024-08-21T06:20:37Z

Details

Related Issues

GH_LINK

Manual Tests

Change codeFance rule in /node_modules/expensify-common/dist/ExpensiMark.js to code below

             {
                name: 'codeFence',
                // &#x60; is a backtick symbol we are matching on three of them before then after a new line character
                regex: /(?<![^^\r\n])(&#x60;&#x60;&#x60;(\r\n|\n))((?:\s*?(?!(?:\r\n|\n)?&#x60;&#x60;&#x60;(?!&#x60;))[\S])+\s*?(?:\r\n|\n))(&#x60;&#x60;&#x60;)/g,
                // We're using a function here to perform an additional replace on the content
                // inside the backticks because Android is not able to use <pre> tags and does
                // not respect whitespace characters at all like HTML does. We do not want to mess
                // with the new lines here since they need to be converted into <br>. And we don't
                // want to do this anywhere else since that would break HTML.
                // &nbsp; will create styling issues so use &#32;
                replacement: (_extras, _match, _g1, _g2, textWithinFences) => {
                    const group = textWithinFences.replace(/(?:(?![\n\r])\s)/g, '&#32;');
                    return `<pre>${group}</pre>`;
                },
                rawInputReplacement: (_extras, _match, _g1, newLineCharacter, textWithinFences) => {
                    const group = textWithinFences.replace(/(?:(?![\n\r])\s)/g, '&#32;').replace(/<emoji>|<\/emoji>/g, '');
                    return `<pre>${newLineCharacter}${group}</pre>`;
                },
            },

Linked PRs

…g syntax

Skalakid · 2025-06-05T08:49:57Z

The E2E test is failing because expensify-common changes are missing in the GitHub actions. Will create PR with required changes and then patch the library in Live Markdown

jmusial · 2025-06-16T15:55:26Z

src/web/utils/inputUtils.ts

+  return BrowserUtils.isFirefox && node && (node.lastChild as HTMLElement)?.getAttribute('data-type') === 'codeblock' && node.lastChild?.lastChild?.lastChild?.lastChild?.nodeName === 'BR';
+}
+
+// Parses the HTML structure of a MarkdownTextInputElement to a plain text string. Used for getting the correct value of the input element.


Can we use

/** * Parses the HTML structure of a MarkdownTextInputElement to a plain text string. Used for getting the correct value of the input element. */

when adding function descriptions instead of regular comments ? It adds descriptions when you're looking at usages

jmusial · 2025-06-16T16:00:30Z

src/web/utils/inputUtils.ts


+// On Firefox, when breaking one codeblock, its syntax and the <br> after it can be merged into the closing syntax of the previous codeblock.
+function didTwoCodeblocksMerged(node: ChildNode | null) {
+  return BrowserUtils.isFirefox && node && (node.lastChild as HTMLElement)?.getAttribute('data-type') === 'codeblock' && node.lastChild?.lastChild?.lastChild?.lastChild?.nodeName === 'BR';


Can this not be a one liner ? It's a bit hard to read and node.lastChild?.lastChild?.lastChild?.lastChild?.nodeName looks like magic :) I'd love to have it at least as a named variable for additional context

jmusial · 2025-06-16T16:01:51Z

src/web/utils/inputUtils.ts


+// On Firefox, when breaking one codeblock, its syntax and the <br> after it can be merged into the closing syntax of the previous codeblock.
+function didTwoCodeblocksMerged(node: ChildNode | null) {


didTwoCodeblocksMerge or areTwoCodeblocksMerged

jmusial · 2025-06-16T16:11:14Z

src/web/utils/inputUtils.ts

@@ -81,11 +88,41 @@ function parseInnerHTMLToText(target: MarkdownTextInputElement, cursorPosition:
    }

    if (node.nodeType === Node.TEXT_NODE) {
+      let hasAddedNewline = false;


the newline logic is confusing when adding codeblock after a codeblock or splitting one.
The input appears as in the new line, but it parses into the new codeblock only after manually pressing enter at the line break.

Screen.Recording.2025-06-16.at.18.08.56.mov

One of the main goals of the Live Markdown Input is to preview how the message from Expensify will look after sending. In all scenarios, the code block syntax moves the content around it into separate lines (display: block). I agree that it can be a bit confusing, but we do the same thing for inline images

Maybe to make it more intuitive, we should require a whitespace after the codeblock closing syntax to be able to add another markdown after it. What do you think about it?

Feels different with demo image bc the image is adding w/o additional character between blocks. I think this is the expected behaviour here as well.

Screen.Recording.2025-06-18.at.10.57.05.mov

jmusial · 2025-06-16T16:19:16Z

src/web/utils/cursorUtils.ts

-  const currentLine = target.tree.childNodes[orderIndex]?.element;
-  const scrollTargetElement = currentLine || node.element;
+
+  if (!isChildOfMultilineMarkdownElement(node.element)) {


Found this multiline problem while testing, but it works same on main. IMO can be fixed as a followup.

Screen.Recording.2025-06-16.at.18.17.11.mov

Okay, will fix that in follow up PR :D

src/parseExpensiMark.ts

jmusial · 2025-06-16T17:04:39Z

src/parseExpensiMark.ts

-        addChildrenWithStyle(content, 'pre');
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const [_, lb, content] = node.children.join('').match(/^(\r?\n)([\s\S]*)$/) as RegExpMatchArray;
+        ranges.push({type: 'codeblock', start: text.length, length: (content?.length ?? 0) + 7});


can you add a comment explaining why + 7 or put it in named const ?

src/__tests__/webParser.test.tsx

WebExample/__tests__/codeblock.spec.ts

Skalakid added 30 commits June 25, 2024 09:40

Add refactor changes

f853061

Fix parserUtils

c4108c1

Add tree building when creating markdown HTML structure

38693c4

Refactor function and type names

6a1eaf1

Fix TS errors

75d6afd

Update parser structure

db68b78

Move BrowserUtils into an object

31711ab

Move utils to separate folder

cab8ca7

Add block utils

2f829cc

Move functions from above the web component to utils

b9b2984

Fix unit tests

3fbc456

Fix cursor positioning bugs

d74e0e4

Remove scrollCursorIntoView function

220395b

Rename variable names

4d95382

Replace textContent with ref value

907c73b

Merge branch 'main' into @Skalakid/web-parser-refactor

1017ebc

Merge branch 'main' into @Skalakid/web-parser-refactor

1f1fefd

Fix crashes and cursor positioning in E/App

ff41dd7

Fix copying and pasting text with markdown

d1d8a49

Fix pasting text starting with newlines

153ead8

Fix errors when replacing text

ea6aad8

Fix HTML injestions and pasted text parsing

87953bb

Fix paste text trimming condiftion

3d30621

Fix cutting text

471f53a

Change handlePaste logic to fix newlines in pasted text

92a224c

Fix cursor positioning when undoing/redoing previously pasted text

c14add4

Fix text coloring

e9d8ec3

Add review changes

e24d259

Move updateTextColor function

092775d

Fix cursor positioning when changing text and styles at the same time

a0c1dfa

Skalakid added 19 commits May 30, 2025 09:35

Fix newline generation after clearing the input

7512207

Fix breaking codeblock when removing first newline

c3af8d3

Fix breaking codeblock when removing last newline

ac0bee5

Move codeblock element styles to css file

0d1b6d5

Fix breaking codeblock structure when deleting text before the closin…

5b6bab9

…g syntax

Fix breaking codeblock when removing first newline

44b59a7

Update test names

c59982b

Add newline removal tests

35785eb

Fix codeblock tests structure

e343025

Add content modification tests

53050a4

Update code comments

8cdb8c3

Fix removing newline at the end of codeblock on all platforms

db4ab11

Fix problems with multiple codeblock merging together

5d2c50d

Add codeblock styling checks

34dbda2

Add testCodeblock function to playwright tests

382ba4b

Merge branch 'main' into @BartoszGrajdek/web-parser-refactor-code-blocks

733115c

Add codeblock markdown count check

1ff2515

Add newlines

3aba838

Clean up code

67b97b5

Skalakid added 7 commits June 6, 2025 11:17

Refactor codeblock styles

7180aad

Clean up code after refactor

6671add

Remove newlines

f2ed1c3

Update tests

ddd456b

Fix codeblock style test

6201427

Clean up web component changes

f3a0a12

Merge simillar styles

02bde24

jmusial reviewed Jun 16, 2025

View reviewed changes

Add review changes

c022083

jmusial mentioned this pull request Jun 18, 2025

Fix parsing error in codeblock with characters in the same line #703

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Implement code and pre blocks support on web #456

Implement code and pre blocks support on web #456

Uh oh!

BartoszGrajdek commented Aug 21, 2024 •

edited

Loading

Uh oh!

Skalakid commented Jun 5, 2025

Uh oh!

jmusial Jun 16, 2025

Uh oh!

jmusial Jun 16, 2025

Uh oh!

jmusial Jun 16, 2025

Uh oh!

jmusial Jun 16, 2025

Uh oh!

Skalakid Jun 17, 2025

Uh oh!

Skalakid Jun 17, 2025

Uh oh!

jmusial Jun 18, 2025

Uh oh!

jmusial Jun 16, 2025

Uh oh!

Skalakid Jun 18, 2025

Uh oh!

Uh oh!

Uh oh!

jmusial Jun 16, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!


		// On Firefox, when breaking one codeblock, its syntax and the <br> after it can be merged into the closing syntax of the previous codeblock.
		function didTwoCodeblocksMerged(node: ChildNode \| null) {

Implement code and pre blocks support on web #456

Are you sure you want to change the base?

Implement code and pre blocks support on web #456

Uh oh!

Conversation

BartoszGrajdek commented Aug 21, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Related Issues

Manual Tests

Linked PRs

Uh oh!

Skalakid commented Jun 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

BartoszGrajdek commented Aug 21, 2024 •

edited

Loading