react-native-enriched-html 0.0.0 → 1.0.0

package/src/utils/EnrichedTextInputDefaultProps.ts

@@ -0,0 +1,16 @@
+import type { TextShortcut } from '../types';
+
+export const ENRICHED_TEXT_INPUT_DEFAULT_PROPS = {
+  mentionIndicators: ['@'],
+  editable: true,
+  htmlStyle: {},
+  autoCapitalize: 'sentences',
+  scrollEnabled: true,
+  androidExperimentalSynchronousEvents: false,
+  useHtmlNormalizer: false,
+  allowFontScaling: true,
+  textShortcuts: [
+    { trigger: '- ', style: 'unordered_list' },
+    { trigger: '1. ', style: 'ordered_list' },
+  ] as TextShortcut[],
+} as const;

package/src/utils/defaultHtmlStyle.ts

@@ -0,0 +1,83 @@
+import type { HtmlStyle, EnrichedTextHtmlStyle } from '../types';
+
+export const DEFAULT_HTML_STYLE: Required<HtmlStyle> = {
+  h1: {
+    fontSize: 32,
+    bold: false,
+  },
+  h2: {
+    fontSize: 24,
+    bold: false,
+  },
+  h3: {
+    fontSize: 20,
+    bold: false,
+  },
+  h4: {
+    fontSize: 16,
+    bold: false,
+  },
+  h5: {
+    fontSize: 14,
+    bold: false,
+  },
+  h6: {
+    fontSize: 12,
+    bold: false,
+  },
+  blockquote: {
+    borderColor: 'darkgray',
+    borderWidth: 4,
+    gapWidth: 16,
+    color: undefined,
+  },
+  codeblock: {
+    color: 'black',
+    borderRadius: 8,
+    backgroundColor: 'darkgray',
+  },
+  code: {
+    color: 'red',
+    backgroundColor: 'darkgray',
+  },
+  a: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+  mention: {
+    color: 'blue',
+    backgroundColor: 'yellow',
+    textDecorationLine: 'underline',
+  },
+  ol: {
+    gapWidth: 16,
+    marginLeft: 16,
+    markerFontWeight: undefined,
+    markerColor: undefined,
+  },
+  ul: {
+    bulletColor: 'black',
+    bulletSize: 8,
+    marginLeft: 16,
+    gapWidth: 16,
+  },
+  ulCheckbox: {
+    boxSize: 24,
+    gapWidth: 16,
+    marginLeft: 16,
+    boxColor: 'blue',
+  },
+};
+
+export const DEFAULT_ENRICHED_TEXT_STYLE: Required<EnrichedTextHtmlStyle> = {
+  ...DEFAULT_HTML_STYLE,
+  a: {
+    ...DEFAULT_HTML_STYLE.a,
+    pressColor: 'darkblue',
+  },
+  mention: {
+    ...DEFAULT_HTML_STYLE.mention,
+    pressColor: 'darkblue',
+    pressBackgroundColor: 'yellow',
+  },
+};

package/src/utils/expandMentionStylesForIndicators.ts

@@ -0,0 +1,19 @@
+import type { HtmlStyle, MentionStyleProperties } from '../types';
+import { DEFAULT_HTML_STYLE } from './defaultHtmlStyle';
+import { isMentionStyleRecord } from './isMentionStyleRecord';
+
+export function expandMentionStylesForIndicators(
+  mention: HtmlStyle['mention'] | undefined,
+  indicators: string[]
+): Record<string, MentionStyleProperties> {
+  const out: Record<string, MentionStyleProperties> = {};
+  for (const indicator of indicators) {
+    out[indicator] = {
+      ...DEFAULT_HTML_STYLE.mention,
+      ...(isMentionStyleRecord(mention)
+        ? (mention[indicator] ?? mention.default ?? {})
+        : mention),
+    };
+  }
+  return out;
+}

package/src/utils/isMentionStyleRecord.ts

@@ -0,0 +1,22 @@
+import type { HtmlStyle, MentionStyleProperties } from '../types';
+
+export function isMentionStyleRecord(
+  mentionStyle: HtmlStyle['mention']
+): mentionStyle is Record<string, MentionStyleProperties> {
+  if (
+    mentionStyle &&
+    typeof mentionStyle === 'object' &&
+    !Array.isArray(mentionStyle)
+  ) {
+    const keys = Object.keys(mentionStyle);
+    return (
+      keys.length > 0 &&
+      keys.every(
+        (key) =>
+          typeof (mentionStyle as Record<string, unknown>)[key] === 'object' &&
+          (mentionStyle as Record<string, unknown>)[key] !== null
+      )
+    );
+  }
+  return false;
+}

package/src/utils/normalizeHtmlStyle.ts

@@ -0,0 +1,181 @@
+import { type ColorValue, processColor } from 'react-native';
+import type { HtmlStyleInternal } from '../spec/EnrichedTextInputNativeComponent';
+import type {
+  EnrichedTextHtmlStyle,
+  HtmlStyle,
+  MentionStyleProperties,
+} from '../types';
+import type { EnrichedTextHtmlStyleInternal } from '../spec/EnrichedTextNativeComponent';
+import {
+  DEFAULT_HTML_STYLE,
+  DEFAULT_ENRICHED_TEXT_STYLE,
+} from './defaultHtmlStyle';
+import { expandMentionStylesForIndicators } from './expandMentionStylesForIndicators';
+
+const MENTION_DEFAULT_KEY = '_default';
+
+const parseOlStyles = (style: HtmlStyle) => {
+  let markerFontWeight: string | undefined;
+  if (style.ol?.markerFontWeight) {
+    if (typeof style.ol?.markerFontWeight === 'number') {
+      markerFontWeight = String(style.ol?.markerFontWeight);
+    } else if (typeof style.ol?.markerFontWeight === 'string') {
+      markerFontWeight = style.ol?.markerFontWeight;
+    }
+  }
+
+  return {
+    ...style.ol,
+    markerFontWeight: markerFontWeight,
+  };
+};
+
+const convertToHtmlStyleInternal = (
+  style: HtmlStyle,
+  mentionIndicators: string[]
+): HtmlStyleInternal => {
+  const mentionStyles = expandMentionStylesForIndicators(
+    style.mention,
+    mentionIndicators
+  );
+
+  let markerFontWeight: string | undefined;
+  if (style.ol?.markerFontWeight) {
+    if (typeof style.ol?.markerFontWeight === 'number') {
+      markerFontWeight = String(style.ol?.markerFontWeight);
+    } else if (typeof style.ol?.markerFontWeight === 'string') {
+      markerFontWeight = style.ol?.markerFontWeight;
+    }
+  }
+
+  const olStyles = {
+    ...style.ol,
+    markerFontWeight: markerFontWeight,
+  };
+
+  return {
+    ...style,
+    mention: mentionStyles,
+    ol: olStyles,
+  };
+};
+
+const convertToEnrichedTextHtmlStyleInternal = (
+  style: EnrichedTextHtmlStyle
+): EnrichedTextHtmlStyleInternal => {
+  const mentionStyles: Record<string, MentionStyleProperties> = {};
+
+  const mention = style.mention;
+  if (mention && typeof mention === 'object' && !Array.isArray(mention)) {
+    for (const key of Object.keys(mention)) {
+      const value = (mention as Record<string, unknown>)[key];
+
+      if (typeof value === 'object' && value !== null) {
+        mentionStyles[key] = {
+          ...DEFAULT_ENRICHED_TEXT_STYLE.mention,
+          ...(value as MentionStyleProperties),
+        };
+      } else {
+        mentionStyles[MENTION_DEFAULT_KEY] = {
+          ...DEFAULT_ENRICHED_TEXT_STYLE.mention,
+          ...(mention as MentionStyleProperties),
+        };
+      }
+    }
+  }
+
+  if (mentionStyles[MENTION_DEFAULT_KEY] === undefined) {
+    mentionStyles[MENTION_DEFAULT_KEY] = {
+      ...DEFAULT_ENRICHED_TEXT_STYLE.mention,
+    };
+  }
+
+  return {
+    ...style,
+    mention: mentionStyles,
+    ol: parseOlStyles(style),
+  };
+};
+
+const assignDefaultValues = <T extends Record<string, any>>(
+  style: T,
+  base: Record<string, any>
+): HtmlStyleInternal => {
+  const merged: Record<string, any> = { ...base };
+
+  for (const key in style) {
+    if (key === 'mention') {
+      merged[key] = {
+        ...(style.mention as object),
+      };
+
+      continue;
+    }
+
+    merged[key] = {
+      ...(base[key] ?? {}),
+      ...(style[key as keyof typeof style] as object),
+    };
+  }
+
+  return merged as HtmlStyleInternal;
+};
+
+const parseStyle = (name: string, value: unknown) => {
+  if (name !== 'color' && !name.endsWith('Color')) {
+    return value;
+  }
+
+  return processColor(value as ColorValue);
+};
+
+const parseColors = (style: HtmlStyleInternal): HtmlStyleInternal => {
+  const finalStyle: Record<string, any> = {};
+
+  for (const [tagName, tagStyle] of Object.entries(style)) {
+    const tagStyles: Record<string, any> = {};
+
+    if (tagName === 'mention') {
+      for (const [indicator, mentionStyle] of Object.entries(tagStyle)) {
+        tagStyles[indicator] = {};
+
+        for (const [styleName, styleValue] of Object.entries(
+          mentionStyle as MentionStyleProperties
+        )) {
+          tagStyles[indicator][styleName] = parseStyle(styleName, styleValue);
+        }
+      }
+
+      finalStyle[tagName] = tagStyles;
+      continue;
+    }
+
+    for (const [styleName, styleValue] of Object.entries(tagStyle)) {
+      tagStyles[styleName] = parseStyle(styleName, styleValue);
+    }
+
+    finalStyle[tagName] = tagStyles;
+  }
+
+  return finalStyle;
+};
+
+export const normalizeHtmlStyle = (
+  style: HtmlStyle,
+  mentionIndicators: string[]
+): HtmlStyleInternal => {
+  const converted = convertToHtmlStyleInternal(style, mentionIndicators);
+  const withDefaults = assignDefaultValues(converted, DEFAULT_HTML_STYLE);
+  return parseColors(withDefaults);
+};
+
+export const normalizeEnrichedTextHtmlStyle = (
+  style: EnrichedTextHtmlStyle
+): EnrichedTextHtmlStyleInternal => {
+  const converted = convertToEnrichedTextHtmlStyleInternal(style);
+  const withDefaults = assignDefaultValues(
+    converted,
+    DEFAULT_ENRICHED_TEXT_STYLE
+  );
+  return parseColors(withDefaults);
+};

package/src/utils/nullthrows.ts

@@ -0,0 +1,7 @@
+export const nullthrows = <T>(value: T | null | undefined): T => {
+  if (value == null) {
+    throw new Error('Unexpected null or undefined value');
+  }
+
+  return value;
+};

package/src/utils/regexParser.ts

@@ -0,0 +1,56 @@
+import type { LinkNativeRegex } from '../spec/EnrichedTextInputNativeComponent';
+
+const DISABLED_REGEX: LinkNativeRegex = {
+  pattern: '',
+  caseInsensitive: false,
+  dotAll: false,
+  isDisabled: true,
+  isDefault: false,
+};
+
+const DEFAULT_REGEX: LinkNativeRegex = {
+  pattern: '',
+  caseInsensitive: false,
+  dotAll: false,
+  isDisabled: false,
+  isDefault: true,
+};
+
+export const toNativeRegexConfig = (
+  regex: RegExp | undefined | null
+): LinkNativeRegex => {
+  if (regex === null) {
+    return DISABLED_REGEX;
+  }
+
+  if (regex === undefined) {
+    return DEFAULT_REGEX;
+  }
+
+  const source = regex.source;
+
+  // iOS fails on variable-width lookbehinds like (?<=a+)
+  const hasLookbehind = source.includes('(?<=') || source.includes('(?<!');
+
+  if (hasLookbehind) {
+    // Basic detection for quantifiers inside a group
+    const lookbehindContent = source.match(/\(\?<[=!](.*?)\)/)?.[1] || '';
+    if (/[*+{]/.test(lookbehindContent)) {
+      if (__DEV__) {
+        console.error(
+          'Variable-width lookbehinds are not supported. Using default link regex.'
+        );
+      }
+
+      return DEFAULT_REGEX;
+    }
+  }
+
+  return {
+    pattern: source,
+    caseInsensitive: regex.ignoreCase,
+    dotAll: regex.dotAll,
+    isDisabled: false,
+    isDefault: false,
+  };
+};

package/src/web/EnrichedTextInput.css

@@ -0,0 +1,201 @@
+.tiptap.ProseMirror p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tiptap.ProseMirror-focused {
+  outline: none;
+}
+
+.eti-editor p.is-editor-empty:first-child::before {
+  color: var(--eti-placeholder-text-color, #adb5bd);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.eti-editor ::selection {
+  background-color: var(--eti-selection-color, Highlight);
+}
+
+.eti-editor code {
+  font-family: monospace;
+  background-color: var(--eti-code-bg-color);
+  color: var(--eti-code-color);
+  display: inline;
+  padding: 0;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+.eti-editor h1 { font-size: var(--eti-h1-font-size); font-weight: var(--eti-h1-font-weight); margin: 0; line-height: normal; }
+.eti-editor h2 { font-size: var(--eti-h2-font-size); font-weight: var(--eti-h2-font-weight); margin: 0; line-height: normal; }
+.eti-editor h3 { font-size: var(--eti-h3-font-size); font-weight: var(--eti-h3-font-weight); margin: 0; line-height: normal; }
+.eti-editor h4 { font-size: var(--eti-h4-font-size); font-weight: var(--eti-h4-font-weight); margin: 0; line-height: normal; }
+.eti-editor h5 { font-size: var(--eti-h5-font-size); font-weight: var(--eti-h5-font-weight); margin: 0; line-height: normal; }
+.eti-editor h6 { font-size: var(--eti-h6-font-size); font-weight: var(--eti-h6-font-weight); margin: 0; line-height: normal; }
+
+.eti-editor blockquote {
+  border-left: var(--eti-blockquote-border-width) solid var(--eti-blockquote-border-color);
+  padding-left: var(--eti-blockquote-gap-width);
+  margin: 0;
+  color: var(--eti-blockquote-color);
+}
+
+.eti-editor blockquote p {
+  margin: 0;
+}
+
+.eti-editor codeblock {
+  display: block;
+  font-family: monospace;
+  background-color: var(--eti-codeblock-bg-color);
+  color: var(--eti-codeblock-color);
+  border-radius: var(--eti-codeblock-border-radius);
+}
+
+.eti-editor codeblock p {
+  margin: 0;
+}
+
+.eti-editor a {
+  color: var(--eti-link-color);
+  text-decoration-line: var(--eti-link-text-decoration-line);
+}
+
+.eti-editor ul:not([data-type]) {
+  margin: 0;
+  list-style: none;
+  padding-left: calc(
+    var(--eti-ul-margin-left, 16px) + var(--eti-ul-gap-width, 16px)
+  );
+}
+
+.eti-editor ul:not([data-type]) > li {
+  position: relative;
+}
+
+.eti-editor ul:not([data-type]) > li::before {
+  content: '';
+  position: absolute;
+  left: calc(
+    -1 * var(--eti-ul-gap-width, 16px) - var(--eti-ul-bullet-size, 8px)
+  );
+  bottom: 0.4em; 
+  @supports (bottom: 0.5lh) {
+    bottom: 0.5lh;
+  }
+
+  transform: translateY(50%);
+  width: var(--eti-ul-bullet-size, 8px);
+  height: var(--eti-ul-bullet-size, 8px);
+  border-radius: 50%;
+  background-color: var(--eti-ul-bullet-color, currentColor);
+  pointer-events: none;
+}
+
+.eti-editor ol {
+  margin: 0;
+  list-style: none;
+  padding-left: calc(
+    var(--eti-ol-margin-left, 16px) + var(--eti-ol-gap-width, 16px)
+  );
+  counter-reset: eti-ol;
+}
+
+.eti-editor ol > li {
+  position: relative;
+  counter-increment: eti-ol;
+}
+
+.eti-editor ol > li::before {
+  content: counter(eti-ol) '.';
+  position: absolute;
+  left: calc(-1 * var(--eti-ol-gap-width, 16px));
+  bottom: 0;
+  transform: translateX(-50%);
+  color: var(--eti-ol-marker-color, currentColor);
+  font-weight: var(--eti-ol-marker-font-weight, inherit);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.eti-editor li {
+  margin: 0;
+}
+
+.eti-editor li p {
+  margin: 0;
+}
+
+.eti-editor .eti-inline-image {
+  vertical-align: text-bottom;
+  line-height: 0;
+  display: inline-block;
+}
+
+.eti-editor .eti-inline-image-img {
+  object-fit: contain;
+}
+
+.eti-editor .eti-inline-image--placeholder {
+  display: inline-block;
+  overflow: hidden;
+  color: inherit;
+}
+
+.eti-editor .eti-inline-image-broken-glyph {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+
+.eti-editor
+  .react-renderer.node-image.ProseMirror-selectednode
+  .eti-inline-image {
+    box-shadow: inset 0 0 0 999px Highlight;
+}
+
+
+
+.eti-editor ul[data-type="checkboxList"] {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  padding-left: calc(
+    var(--eti-checkbox-margin-left, 16px) + var(--eti-checkbox-gap-width, 16px)
+  );
+}
+
+.eti-editor ul[data-type="checkboxList"] > li {
+  position: relative;
+  list-style: none;
+}
+
+.eti-editor ul[data-type="checkboxList"] > li > label {
+  position: absolute;
+  left: calc(
+    -1 * var(--eti-checkbox-gap-width, 16px) - var(--eti-checkbox-box-size, 24px)
+  );
+  transform: translateY(50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  bottom: 0.4em; 
+  @supports (bottom: 0.5lh) {
+    bottom: 0.5lh;
+  }
+}
+
+.eti-editor ul[data-type="checkboxList"] > li > label input[type='checkbox'] {
+  width: var(--eti-checkbox-box-size, 24px);
+  height: var(--eti-checkbox-box-size, 24px);
+  margin: 0;
+  flex-shrink: 0;
+  accent-color: var(--eti-checkbox-box-color, #0000ff);
+}