feat: useHtmlNormalizer and selectable props

Author: hejsztynx

apps/example-web/src/App.tsx

@@ -337,6 +337,7 @@ function App() {
         <EnrichedText
           style={enrichedTextStyle}
           htmlStyle={WEB_DEFAULT_HTML_STYLE}
+          useHtmlNormalizer
         >
           {enrichedTextValue}
         </EnrichedText>

docs/TEXT_API_REFERENCE.md

@@ -40,9 +40,9 @@ A prop for customizing styles of HTML elements, including press colors for inter
 
 If `true`, external HTML (e.g. from Google Docs, Word, web pages) will be normalized before rendering. This converts arbitrary HTML into the canonical tag subset that the enriched parser understands.
 
-| Type   | Default Value | Platform     |
-| ------ | ------------- | ------------ |
-| `bool` | `false`       | iOS, Android |
+| Type   | Default Value | Platform          |
+| ------ | ------------- | ----------------- |
+| `bool` | `false`       | iOS, Android, Web |
 
 ### `ellipsizeMode`
 
@@ -72,9 +72,9 @@ Limits the number of displayed lines. Set to `0` for unlimited lines.
 
 If `true`, the text can be selected by the user (e.g. for copy/paste).
 
-| Type   | Default Value | Platform     |
-| ------ | ------------- | ------------ |
-| `bool` | `false`       | iOS, Android |
+| Type   | Default Value | Platform          |
+| ------ | ------------- | ----------------- |
+| `bool` | `false`       | iOS, Android, Web |
 
 ### `selectionColor`
 

src/web/EnrichedText.tsx

@@ -7,7 +7,7 @@ import {
   mergeWithDefaultEnrichedTextHtmlStyle,
 } from './styleConversion/htmlStyleToCSSVariables';
 import { ENRICHED_TEXT_CLASSNAME } from './constants/classNames';
-import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedThemingToCSSProperties';
+import { enrichedTextThemingToCSSProperties } from './styleConversion/enrichedThemingToCSSProperties';
 import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
 import { sanitizeHtml } from './sanitization/htmlSanitizer';
 import { prepareHtmlForWeb } from './normalization/prepareHtmlForWeb';
@@ -16,14 +16,21 @@ import { useImageErrorFallback } from './useImageErrorFallback';
 import { usePressInteractions } from './usePressInteractions';
 
 export const EnrichedText = memo(
-  ({ children, htmlStyle, style, selectionColor }: EnrichedTextProps) => {
+  ({
+    children,
+    htmlStyle,
+    style,
+    selectionColor,
+    selectable = false,
+    useHtmlNormalizer = false,
+  }: EnrichedTextProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
 
     const sanitizedHtml = useMemo(() => sanitizeHtml(children), [children]);
 
     const finalHtml = useMemo(
-      () => prepareHtmlForWeb(sanitizedHtml),
-      [sanitizedHtml]
+      () => prepareHtmlForWeb(sanitizedHtml, useHtmlNormalizer),
+      [sanitizedHtml, useHtmlNormalizer]
     );
 
     const resolvedHtmlStyle = useMemo(
@@ -45,8 +52,8 @@ export const EnrichedText = memo(
     );
 
     const themingStyle = useMemo(
-      () => enrichedInputThemingToCSSProperties({ selectionColor }),
-      [selectionColor]
+      () => enrichedTextThemingToCSSProperties({ selectionColor, selectable }),
+      [selectionColor, selectable]
     );
 
     const mentionRulesCSS = useMemo(

src/web/normalization/prepareHtmlForWeb.ts

@@ -1,4 +1,12 @@
-export function prepareHtmlForWeb(html: string) {
+import { normalizeHtml } from './htmlNormalizer';
+
+export function prepareHtmlForWeb(
+  html: string,
+  useHtmlNormalizer: boolean | undefined
+) {
+  if (useHtmlNormalizer) {
+    html = normalizeHtml(html);
+  }
   return checkboxHtmlToWeb(html);
 }
 

src/web/styleConversion/enrichedThemingToCSSProperties.ts

@@ -2,13 +2,22 @@ import type { CSSProperties } from 'react';
 import type { ColorValue } from 'react-native';
 import { toColor } from './toColor';
 
-type EnrichedInputThemingStyle = Partial<
-  Pick<CSSProperties, 'caretColor'> & {
+type EnrichedThemingStyle = Partial<
+  Pick<CSSProperties, 'caretColor' | 'userSelect'> & {
     '--et-placeholder-text-color': string;
     '--et-selection-color': string;
   }
 >;
 
+function applySelectionColor(
+  extra: EnrichedThemingStyle,
+  selectionColor: ColorValue | undefined
+): EnrichedThemingStyle {
+  const selectionCss = toColor(selectionColor);
+  if (selectionCss) extra['--et-selection-color'] = selectionCss;
+  return extra;
+}
+
 export interface EnrichedInputThemingColors {
   cursorColor?: ColorValue;
   placeholderTextColor?: ColorValue;
@@ -20,15 +29,28 @@ export function enrichedInputThemingToCSSProperties({
   placeholderTextColor,
   selectionColor,
 }: EnrichedInputThemingColors): CSSProperties {
-  const extra: EnrichedInputThemingStyle = {};
+  const extra: EnrichedThemingStyle = {};
   const caret = toColor(cursorColor);
   if (caret) extra.caretColor = caret;
 
   const placeholderCss = toColor(placeholderTextColor);
   if (placeholderCss) extra['--et-placeholder-text-color'] = placeholderCss;
 
-  const selectionCss = toColor(selectionColor);
-  if (selectionCss) extra['--et-selection-color'] = selectionCss;
+  return applySelectionColor(extra, selectionColor);
+}
 
-  return extra;
+export interface EnrichedTextThemingOptions {
+  selectionColor?: ColorValue;
+  selectable?: boolean;
+}
+
+export function enrichedTextThemingToCSSProperties({
+  selectionColor,
+  selectable,
+}: EnrichedTextThemingOptions): CSSProperties {
+  const extra: EnrichedThemingStyle = {};
+
+  if (selectable !== undefined) extra.userSelect = selectable ? 'text' : 'none';
+
+  return applySelectionColor(extra, selectionColor);
 }