Implement code and pre blocks support on web

parser/index.ts

@@ -170,7 +170,7 @@ function parseTreeToTextAndRanges(tree: StackItem): [string, MarkdownRange[]] {
       } else if (node.tag === '<br />') {
         text += '\n';
       } else if (node.tag.startsWith('<pre')) {
-        appendSyntax('```');
+        appendSyntax(`\`\`\`${unescapeText(node.tag.match(/new-line-char="([^"]*)"/)![1]!)}`);
         const content = node.children.join('').replaceAll('&#32;', ' ');
         addChildrenWithStyle(content, 'pre');
         appendSyntax('```');

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,8 +21,9 @@ 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 {parseToReactDOMStyle, processMarkdownStyle} from './web/utils/webStyleUtils';
+import {parseToReactDOMStyle, configureCustomWebStylesheet, handleCustomStyles, idGenerator, processMarkdownStyle} from './web/utils/webStyleUtils';
 import {forceRefreshAllImages} from './web/inputElements/inlineImage';
+import type {PartialMarkdownStyle} from './styleUtils';
 import type {InlineImagesInputProps} from './commonTypes';
 
 require('../parser/react-native-live-markdown-parser.js');
@@ -60,6 +61,7 @@ let focusTimeout: NodeJS.Timeout | null = null;
 type MarkdownTextInputElement = HTMLDivElement &
   HTMLInputElement & {
     tree: TreeNode;
+    uniqueId: string;
     selection: Selection;
   };
 
@@ -112,7 +114,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
     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>();
     const dimensions = useRef<Dimensions | null>(null);
     const pasteContent = useRef<string | null>(null);
@@ -684,6 +686,11 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
       if (autoFocus) {
         divRef.current.focus();
       }
+
+      configureCustomWebStylesheet();
+      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
     }, []);
 

src/MarkdownTextInputDecoratorViewNativeComponent.ts

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

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

@@ -18,7 +18,7 @@
   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;
 }
 
@@ -29,6 +29,30 @@
   content: attr(placeholder);
 }
 
+*[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;
+}
+
+*[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']) {
+  display: grid;
+}
+
+*[data-type='line'] *[data-type='syntax']:has(+ *[data-type='pre']) > *:last-child {
+  display: none;
+}
+
+*[data-type='line'] *[data-type='pre'] + *[data-type='syntax'] {
+  display: grid;
+}
+
 @keyframes react-native-live-markdown-spin {
   0% {
     transform: rotate(0deg);

src/web/utils/blockUtils.ts

@@ -1,11 +1,18 @@
+import type {InlineImagesInputProps} from '../../commonTypes';
 import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
-import type {InlineImagesInputProps, MarkdownRange} from '../../commonTypes';
+import {parseStringWithUnitToNumber} from '../../styleUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {addInlineImagePreview} from '../inputElements/inlineImage';
+import type {MarkdownRange} from './parserUtils';
 import type {NodeType, TreeNode} from './treeUtils';
 
 function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownStyle: PartialMarkdownStyle) {
   const node = targetElement;
+
+  const defaultPrePadding = markdownStyle.pre?.padding ?? 2;
+  const preHorizontalPadding = parseStringWithUnitToNumber(markdownStyle.pre?.paddingHorizontal ?? defaultPrePadding).toString();
+  const preVerticalPadding = parseStringWithUnitToNumber(markdownStyle.pre?.paddingVertical ?? defaultPrePadding).toString();
+
   switch (type) {
     case 'line':
       Object.assign(node.style, {
@@ -44,10 +51,21 @@ function addStyleToBlock(targetElement: HTMLElement, type: NodeType, markdownSty
       });
       break;
     case 'code':
-      Object.assign(node.style, markdownStyle.code);
+      Object.assign(node.style, {...markdownStyle.code, lineHeight: 1.5});
       break;
     case 'pre':
-      Object.assign(node.style, markdownStyle.pre);
+      Object.assign(node.style, {
+        ...markdownStyle.pre,
+        backgroundColor: 'transparent',
+        padding: 0,
+      });
+      Object.assign((node.parentNode as HTMLElement).style, {
+        padding: `${preVerticalPadding}px ${preHorizontalPadding}px`,
+        position: 'relative',
+        width: 'fit-content',
+        maxWidth: '100%',
+        boxSizing: 'border-box',
+      });
       break;
 
     case 'blockquote':
@@ -110,4 +128,12 @@ function extendBlockStructure(
   return targetNode;
 }
 
-export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, getFirstBlockMarkdownRange};
+function getTopParentTreeNode(node: TreeNode) {
+  let currentParentNode = node.parentNode;
+  while (currentParentNode && ['text', 'br', 'line', 'syntax'].includes(currentParentNode.parentNode?.type || '')) {
+    currentParentNode = currentParentNode?.parentNode || null;
+  }
+  return currentParentNode;
+}
+
+export {addStyleToBlock, extendBlockStructure, isBlockMarkdownType, getFirstBlockMarkdownRange, getTopParentTreeNode};

src/web/utils/cursorUtils.ts

@@ -1,4 +1,5 @@
 import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import {getTopParentTreeNode} from './blockUtils';
 import {findHTMLElementInTree, getTreeNodeByIndex} from './treeUtils';
 import type {TreeNode} from './treeUtils';
 
@@ -17,8 +18,15 @@ function setCursorPosition(target: MarkdownTextInputElement, startIndex: number,
   const range = document.createRange();
   range.selectNodeContents(target);
 
-  const startTreeNode = getTreeNodeByIndex(target.tree, start);
-  const endTreeNode = end && startTreeNode && (end < startTreeNode.start || end >= startTreeNode.start + startTreeNode.length) ? getTreeNodeByIndex(target.tree, end) : startTreeNode;
+  let startTreeNode = getTreeNodeByIndex(target.tree, start);
+  let endTreeNode = end && startTreeNode && (end < startTreeNode.start || end >= startTreeNode.start + startTreeNode.length) ? getTreeNodeByIndex(target.tree, end) : startTreeNode;
+
+  const parentLine = startTreeNode?.type === 'br' && getTopParentTreeNode(startTreeNode);
+  if (parentLine && parentLine?.childNodes?.some((e) => e.type === 'pre')) {
+    startTreeNode = getTreeNodeByIndex(target.tree, start - 1);
+    endTreeNode = startTreeNode;
+  }
+
   if (!startTreeNode || !endTreeNode) {
     console.error('Invalid start or end tree node');
     return;

src/web/utils/inputUtils.ts

@@ -1,5 +1,5 @@
 import type {CSSProperties} from 'react';
-import type {MarkdownTextInputElement} from '../../MarkdownTextInput.web';
+import type {HTMLMarkdownElement, MarkdownTextInputElement} from '../../MarkdownTextInput.web';
 
 const ZERO_WIDTH_SPACE = '\u200B';
 
@@ -37,7 +37,7 @@ function normalizeValue(value: string) {
 }
 
 // Parses the HTML structure of a MarkdownTextInputElement to a plain text string. Used for getting the correct value of the input element.
-function parseInnerHTMLToText(target: MarkdownTextInputElement, inputType: string, cursorPosition: number): string {
+function parseInnerHTMLToText(target: MarkdownTextInputElement | HTMLMarkdownElement, inputType: string, cursorPosition: number): string {
   // Returns the parent of a given node that is higher in the hierarchy and is of a different type than 'text', 'br' or 'line'
   function getTopParentNode(node: ChildNode) {
     let currentParentNode = node.parentNode;

src/web/utils/parserUtils.ts

@@ -3,8 +3,9 @@ import {addNodeToTree, createRootTreeNode, updateTreeElementRefs} from './treeUt
 import type {NodeType, TreeNode} from './treeUtils';
 import type {PartialMarkdownStyle} from '../../styleUtils';
 import {getCurrentCursorPosition, moveCursorToEnd, setCursorPosition} from './cursorUtils';
+import {handleCustomStyles} from './webStyleUtils';
 import {addStyleToBlock, extendBlockStructure, getFirstBlockMarkdownRange, isBlockMarkdownType} from './blockUtils';
-import type {InlineImagesInputProps, MarkdownRange} from '../../commonTypes';
+import type {InlineImagesInputProps, MarkdownRange, MarkdownType} from '../../commonTypes';
 import {getAnimationCurrentTimes, updateAnimationsTime} from './animationUtils';
 
 type Paragraph = {
@@ -217,13 +218,12 @@ function parseRangesToHTMLNodes(
       // create markdown span element
       const span = document.createElement('span') as HTMLMarkdownElement;
       span.setAttribute('data-type', range.type);
+      const spanNode = appendNode(span, currentParentNode, range.type, range.length);
 
       if (!disableInlineStyles) {
         addStyleToBlock(span, range.type, markdownStyle);
       }
 
-      const spanNode = appendNode(span, currentParentNode, range.type, range.length);
-
       if (isMultiline && !disableInlineStyles && currentInput) {
         currentParentNode = extendBlockStructure(currentInput, currentParentNode, range, lineMarkdownRanges, text, markdownStyle, inlineImagesProps);
       }
@@ -301,7 +301,7 @@ function updateInputStructure(
   if (text) {
     const {dom, tree} = parseRangesToHTMLNodes(text, markdownRanges, isMultiline, markdownStyle, false, targetElement, inlineImagesProps);
 
-    if (shouldForceDOMUpdate || targetElement.innerHTML !== dom.innerHTML) {
+    if (shouldForceDOMUpdate || targetElement.innerHTML.replaceAll(/ data-content="([^"]*)"/g, '') !== dom.innerHTML) {
       const animationTimes = getAnimationCurrentTimes(targetElement);
       targetElement.innerHTML = '';
       targetElement.innerText = '';
@@ -317,7 +317,10 @@ function updateInputStructure(
     targetElement.tree = createRootTreeNode(targetElement);
   }
 
+  handleCustomStyles(target, markdownStyle);
   return {text, cursorPosition: cursorPosition || 0};
 }
 
 export {updateInputStructure, parseRangesToHTMLNodes};
+
+export type {MarkdownRange, MarkdownType};

src/web/utils/treeUtils.ts

@@ -1,5 +1,6 @@
 import type {HTMLMarkdownElement} from '../../MarkdownTextInput.web';
 import type {MarkdownRange, MarkdownType} from '../../commonTypes';
+import {parseInnerHTMLToText} from './inputUtils';
 
 type NodeType = MarkdownType | 'line' | 'text' | 'br' | 'block' | 'root';
 
@@ -74,6 +75,10 @@ function updateTreeElementRefs(treeRoot: TreeNode, element: HTMLMarkdownElement)
     if (currentElement) {
       node.element = currentElement;
     }
+
+    if (currentElement?.dataset.type === 'pre') {
+      currentElement.setAttribute('data-content', parseInnerHTMLToText(currentElement, '', 0));
+    }
   }
 
   return treeRoot;