Implement code and pre blocks support on web

WebExample/__tests__/styles.spec.ts

@@ -32,11 +32,20 @@ test.describe('markdown content styling', () => {
   });
 
   test('inline code', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'inline code', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
+    await testMarkdownContentStyle({
+      testContent: 'inline code',
+      style:
+        'font-family: monospace; font-size: 20px; color: black; background-color: lightgray; border-color: gray; border-width: 1px; border-radius: 4px; border-style: solid; padding: 0px; line-height: 1.5;',
+      page,
+    });
   });
 
   test('codeblock', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'codeblock', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
+    await testMarkdownContentStyle({
+      testContent: 'codeblock',
+      style: 'border-color: gray; border-radius: 4px; padding: 0px; font-family: monospace; font-size: 20px; color: black; background-color: transparent;',
+      page,
+    });
   });
 
   test('mention-here', async ({page}) => {

src/MarkdownTextInput.web.tsx

@@ -11,7 +11,7 @@ import type {
   TextInputContentSizeChangeEventData,
   GestureResponderEvent,
 } from 'react-native';
-import React, {useEffect, useRef, useCallback, useMemo, useLayoutEffect} from 'react';
+import React, {useEffect, useRef, useCallback, useMemo, useLayoutEffect, useState} from 'react';
 import type {CSSProperties, MutableRefObject, ReactEventHandler, FocusEventHandler, MouseEvent, KeyboardEvent, SyntheticEvent, ClipboardEventHandler, TouchEvent} from 'react';
 import {StyleSheet} from 'react-native';
 import {updateInputStructure} from './web/utils/parserUtils';
@@ -21,9 +21,11 @@ import {getCurrentCursorPosition, removeSelection, setCursorPosition} from './we
 import './web/MarkdownTextInput.css';
 import type {MarkdownStyle} from './MarkdownTextInputDecoratorViewNativeComponent';
 import {getElementHeight, getPlaceholderValue, isEventComposing, normalizeValue, parseInnerHTMLToText} from './web/utils/inputUtils';
-import {idGenerator, parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils';
+import {parseToReactDOMStyle, configureCustomWebStylesheet, idGenerator, processMarkdownStyle} from './web/utils/webStyleUtils';
 import {forceRefreshAllImages} from './web/inputElements/inlineImage';
+import type {PartialMarkdownStyle} from './styleUtils';
 import type {MarkdownRange, InlineImagesInputProps} from './commonTypes';
+import {handleCustomStyles} from './web/inputElements/codeblock';
 
 const useClientEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
@@ -70,6 +72,7 @@ type MarkdownTextInputElement = HTMLDivElement &
   HTMLInputElement & {
     tree: TreeNode;
     uniqueId: string;
+    styleSheet: CSSStyleSheet;
     selection: Selection;
     imageElements: HTMLImageElement[];
   };
@@ -132,7 +135,7 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
     const divRef = useRef<MarkdownTextInputElement | null>(null);
     const currentlyFocusedField = useRef<HTMLDivElement | null>(null);
     const contentSelection = useRef<Selection | null>(null);
-    const className = `react-native-live-markdown-input-${multiline ? 'multiline' : 'singleline'}`;
+    const [className, setClassName] = useState(`react-native-live-markdown-input-${multiline ? 'multiline' : 'singleline'}`);
     const history = useRef<InputHistory | null>(null);
     const dimensions = useRef<Dimensions | null>(null);
     const pasteContent = useRef<string | null>(null);
@@ -379,6 +382,14 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
           if (onChangeText) {
             onChangeText(parsedText);
           }
+          if (processedMarkdownStyle) {
+            const preBlocks = [...divRef.current.querySelectorAll('*[data-type="pre"]')];
+            while (preBlocks.length > 0) {
+              const preBlock = preBlocks.pop() as HTMLElement;
+              preBlock.setAttribute('data-content', parseInnerHTMLToText(preBlock, 0));
+            }
+            handleCustomStyles(divRef.current, processedMarkdownStyle);
+          }
           return;
         }
         let newInputUpdate: ParseTextResult;
@@ -729,15 +740,22 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
       [numberOfLines],
     );
 
-    useEffect(() => {
+    useClientEffect(() => {
       if (!divRef.current) {
         return;
       }
       // focus the input on mount if autoFocus is set
       if (autoFocus) {
         divRef.current.focus();
       }
+
+      const styleSheet = configureCustomWebStylesheet();
+      if (styleSheet) {
+        divRef.current.styleSheet = styleSheet;
+      }
       divRef.current.uniqueId = idGenerator.next().value as string;
+      setClassName(`${className} ${divRef.current.uniqueId}`);
+      handleCustomStyles(divRef.current, markdownStyle as PartialMarkdownStyle);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -761,9 +779,21 @@ const MarkdownTextInput = React.forwardRef<MarkdownTextInput, MarkdownTextInputP
         forceRefreshAllImages(divRef.current as MarkdownTextInputElement, processedMarkdownStyle);
       };
 
+      const handleStyles = () => {
+        if (!divRef.current) {
+          return;
+        }
+        handleCustomStyles(divRef.current, processedMarkdownStyle);
+      };
+
+      const resizeObserver = new ResizeObserver(handleStyles);
+      if (divRef.current) {
+        resizeObserver.observe(divRef.current);
+      }
       window.addEventListener('online', handleReconnect);
       return () => {
         window.removeEventListener('online', handleReconnect);
+        resizeObserver.disconnect();
       };
     }, [processedMarkdownStyle]);
 

src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -25,14 +25,27 @@ interface MarkdownStyle {
   code: {
     fontFamily: string;
     fontSize: Float;
+    h1NestedFontSize?: Float;
     color: ColorValue;
     backgroundColor: ColorValue;
+    borderColor: ColorValue;
+    borderWidth: Float;
+    borderRadius: Float;
+    borderStyle: string;
+    padding?: Float;
+    paddingVertical?: Float;
+    paddingHorizontal?: Float;
   };
   pre: {
     fontFamily: string;
     fontSize: Float;
     color: ColorValue;
     backgroundColor: ColorValue;
+    borderColor: string;
+    borderRadius: Float;
+    padding: Float;
+    paddingVertical?: Float;
+    paddingHorizontal?: Float;
   };
   mentionHere: {
     color: ColorValue;

src/__tests__/parseExpensiMark.test.ts

@@ -216,8 +216,8 @@ test('inline code', () => {
 
 test('codeblock', () => {
   expect('```\nHello world!\n```').toBeParsedAs([
-    {type: 'syntax', start: 0, length: 3},
-    {type: 'pre', start: 3, length: 14},
+    {type: 'syntax', start: 0, length: 4},
+    {type: 'pre', start: 4, length: 13},
     {type: 'syntax', start: 17, length: 3},
   ]);
 });

src/__tests__/webParser.test.tsx

@@ -3,6 +3,21 @@ import {expect} from '@jest/globals';
 import {parseRangesToHTMLNodes} from '../web/utils/parserUtils';
 import parseExpensiMark from '../parseExpensiMark';
 
+jest.mock('react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle', () => ({
+  __esModule: true,
+  default: jest.fn((style) => style),
+}));
+
+jest.mock('react-native-web/dist/exports/StyleSheet/preprocess', () => ({
+  __esModule: true,
+  default: jest.fn((style) => style),
+}));
+
+jest.mock('react-native-web/dist/modules/setValueForStyles/dangerousStyleValue', () => ({
+  __esModule: true,
+  default: jest.fn(() => null),
+}));
+
 declare module 'expect' {
   interface Matchers<R> {
     toBeParsedAsHTML(expectedHTML: string): R;
@@ -175,7 +190,7 @@ test('inline code', () => {
 
 test('codeblock', () => {
   expect('```\nHello world!\n```').toBeParsedAsHTML(
-    '<p data-type="line" data-id="0"><span data-type="syntax" data-id="0,0"><span data-type="text" data-id="0,0,0">```</span></span><span data-type="pre" data-id="0,1"><span data-type="br" data-id="0,1,0"><br data-id="0,1,0,0"></span><span data-type="text" data-id="0,1,1">Hello world!</span><span data-type="br" data-id="0,1,2"><br data-id="0,1,2,0"></span></span><span data-type="syntax" data-id="0,2"><span data-type="text" data-id="0,2,0">```</span></span></p>',
+    '<p data-type="line" data-id="0"><span data-type="syntax" data-id="0,0"><span data-type="text" data-id="0,0,0">```</span><span data-type="br" data-id="0,0,1"><br data-id="0,0,1,0"></span></span><span data-type="pre" data-id="0,1"><span data-type="text" data-id="0,1,0">Hello world!</span><span data-type="br" data-id="0,1,1"><br data-id="0,1,1,0"></span></span><span data-type="syntax" data-id="0,2"><span data-type="text" data-id="0,2,0">```</span></span></p>',
   );
 });
 

src/parseExpensiMark.ts

@@ -174,9 +174,10 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, MarkdownRange[]] {
       } else if (node.tag === '<br />') {
         text += '\n';
       } else if (node.tag.startsWith('<pre')) {
-        appendSyntax('```');
-        const content = node.children.join('');
-        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;
+        appendSyntax(`\`\`\`${lb}`);
+        addChildrenWithStyle(`${content}`, 'pre');
         appendSyntax('```');
       } else if (node.tag.startsWith('<a href="')) {
         const rawHref = node.tag.match(/href="([^"]*)"/)![1]!; // always present

src/styleUtils.ts

@@ -35,8 +35,16 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
       fontSize: 20,
       color: 'black',
       backgroundColor: 'lightgray',
+      borderColor: 'gray',
+      borderWidth: 1,
+      borderRadius: 4,
+      borderStyle: 'solid',
+      padding: 0,
     },
     pre: {
+      borderColor: 'gray',
+      borderRadius: 4,
+      padding: 2,
       fontFamily: FONT_FAMILY_MONOSPACE,
       fontSize: 20,
       color: 'black',
@@ -89,7 +97,10 @@ function mergeMarkdownStyleWithDefault(input: PartialMarkdownStyle | undefined):
   return output;
 }
 
-function parseStringWithUnitToNumber(value: string | null): number {
+function parseStringWithUnitToNumber(value: string | number | null): number {
+  if (typeof value === 'number') {
+    return value;
+  }
   return value ? parseInt(value.replace('px', ''), 10) : 0;
 }
 

src/web/MarkdownTextInput.css

@@ -33,6 +33,47 @@
   content: attr(placeholder);
 }
 
+.react-native-live-markdown-input-multiline *[data-type='pre']::before {
+  margin: 0;
+  display: block;
+  color: transparent;
+  border: 1px solid grey;
+  content: attr(data-content);
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  box-sizing: border-box;
+}
+
+.react-native-live-markdown-input-multiline *[data-type='pre'] {
+  line-height: 1.3;
+}
+
+.react-native-live-markdown-input-singleline *[data-type='code'] > *[data-type='emoji'],
+.react-native-live-markdown-input-multiline *[data-type='code'] > *[data-type='emoji'] {
+  font-size: inherit !important;
+  line-height: inherit !important;
+  vertical-align: unset !important;
+}
+
+.react-native-live-markdown-input-multiline *[data-type='line'] *[data-type='pre'] + *[data-type='syntax'] + *[data-type='text'] {
+  max-width: 100%;
+}
+
+.react-native-live-markdown-input-multiline *[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']) {
+  display: grid;
+  line-height: 1.3;
+}
+
+.react-native-live-markdown-input-multiline *[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']) > *:last-child {
+  display: none;
+}
+
+.react-native-live-markdown-input-multiline *[data-type='line'] *[data-type='pre'] + *[data-type='syntax'] {
+  display: grid;
+  line-height: 1.3;
+}
+
 @keyframes react-native-live-markdown-spin {
   0% {
     transform: rotate(0deg);