react-native-simple-rich-text-editor 0.1.0-beta.0

package/src/internal/rendering/components/Italic.tsx

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import { Text, StyleSheet } from 'react-native';
+
+export const Italic = ({ children }: PropsWithChildren) => {
+  return <Text style={styles.italic}>{children}</Text>;
+};
+
+const styles = StyleSheet.create({
+  italic: {
+    fontStyle: 'italic',
+  },
+});

package/src/internal/rendering/components/Render.tsx

@@ -0,0 +1,105 @@
+import { Text } from 'react-native';
+import {
+  ZWS,
+  MARKER_STRING_LENGTH,
+  BULLET_POINT_STRING_REPRESENTATION,
+} from '../../text-formats/unicode-markers-format/constants.ts';
+import { Headline } from './Headline.tsx';
+import { Bold } from './Bold.tsx';
+import { Markers } from '../../text-formats/unicode-markers-format/markers.ts';
+import { Fragment } from 'react/jsx-runtime';
+import { Italic } from './Italic.tsx';
+import { BulletPoint } from './BulletPoint.tsx';
+import { intersperse } from '../utils.ts';
+
+export const Render = ({ encodedText }: { encodedText: string }) => {
+  const lines = splitPreservingSeparator(
+    encodedText.replaceAll(BULLET_POINT_STRING_REPRESENTATION, ''),
+    ZWS
+  ); // each BulletPoint.tsx instance adds a BULLET_POINT_STRING_REPRESENTATION, we need to remove them to avoid adding extra chars on each render
+
+  return lines.map((line, i) => {
+    const marker = line.substring(0, MARKER_STRING_LENGTH);
+    switch (marker) {
+      case Markers.H1:
+      case Markers.H2:
+      case Markers.H3:
+        const [headline, ...restOfLineWithoutMarkers] =
+          splitPreservingSeparator(line, '\n');
+        return (
+          <Fragment key={i + line}>
+            <Headline level={marker}>{headline}</Headline>
+            {restOfLineWithoutMarkers.join('')}
+          </Fragment>
+        );
+      case Markers.UL:
+        // NOTE: no other markers are allowed in a bullet point list for now..
+        // if there are other markers they will lead to a break out of the the list -> will make the list terminate early
+        const [bulletPoints, ...paragraphs] = splitPreservingSeparator(
+          line,
+          '\n\n'
+        );
+
+        return (
+          <Fragment key={i + line}>
+            {intersperse(
+              // adds newlines after split() operation
+              (bulletPoints ?? '')
+                .split('\n') // erases newlines
+                .map((bulletPointLine, j) => (
+                  <BulletPoint key={j + bulletPointLine}>
+                    {bulletPointLine}
+                  </BulletPoint>
+                )),
+              '\n'
+            )}
+            {paragraphs.map((p) => (
+              <Text key={p}>{p}</Text>
+            ))}
+          </Fragment>
+        );
+      case Markers.BOLD_START:
+        // NOTE: We could check if lines[i+1] starts with a BOLD_END marker
+        // but for now I opt for this simpler solution.
+        // Because of the above: There must not be any other markers between Markers.BOLD_START and Markers.BOLD_END!
+        return <Bold key={i + line}>{line}</Bold>;
+      case Markers.BOLD_END:
+        break;
+      case Markers.ITALIC_START:
+        return <Italic key={i + line}>{line}</Italic>;
+      case Markers.ITALIC_END:
+        break;
+      default:
+        // remove any broken markers
+        // markers can be broken by erasing text via backspace key in the editor
+        // first line always has no marker at the start
+        if (i !== 0) {
+          // detect broken marker
+          if (line.length < MARKER_STRING_LENGTH) {
+            return '';
+          }
+        }
+        break;
+    }
+
+    return <Text key={i + line}>{line}</Text>;
+  });
+};
+
+/**
+ * Splits a string by the specified separator but preserves the separator
+ * in the resulting array.
+ *
+ * @param str - The string to split
+ * @param separator - The separator to split by (string or RegExp)
+ * @returns An array of strings split by the separator with special handling
+ */
+function splitPreservingSeparator(str: string, separator: string): string[] {
+  return str.split(separator).map((s, i) => {
+    if (i === 0) {
+      return s;
+    } else {
+      return separator + s;
+    }
+  });
+}

package/src/internal/rendering/utils.ts

@@ -0,0 +1,15 @@
+// add the separator after each element of arr, except for the last element
+function intersperse<T>(arr: T[], separator: T | string): (T | string)[] {
+  if (arr.length === 0) return [];
+
+  const output = new Array(arr.length * 2 - 1);
+  for (let i = 0, j = 0; i < arr.length; i++, j += 2) {
+    output[j] = arr[i];
+    if (j + 1 < output.length) {
+      output[j + 1] = separator;
+    }
+  }
+  return output;
+}
+
+export { intersperse };

package/src/internal/text-formats/conversions.ts

@@ -0,0 +1,62 @@
+import {
+  HEADLINE_LEVELS,
+  HEADLINE_MARKER_TYPE,
+  ZWS,
+  MARKER_BYTE_LENGTH,
+} from './unicode-markers-format/constants.ts';
+import { decode } from './unicode-markers-format/encode-decode.ts';
+
+const Markdown = {
+  H1: '# ',
+  H2: '## ',
+  H3: '### ',
+} as const;
+
+type MarkdownString = string;
+
+/**
+ * convertInternalFormatToMarkdown converts text from the internal format to Markdown
+ * @param internalText rich text in the internal format
+ * @returns markdown formatted text
+ */
+const convertInternalFormatToMarkdown = (
+  internalText: string
+): MarkdownString => {
+  // // 1. find all markers
+  // // 2. translate the markers into corresponding Markdown markers
+  // // 3. Replace internal markers with Markdown markers
+  let markdownText = '';
+
+  let i = 0;
+  while (i < internalText.length) {
+    const char = internalText[i];
+
+    if (char === ZWS) {
+      markdownText += decodedTokenToMarkdownToken(
+        decode(internalText.substring(i, i + MARKER_BYTE_LENGTH))
+      );
+      i += MARKER_BYTE_LENGTH;
+    } else {
+      markdownText += char;
+      i++;
+    }
+  }
+
+  return markdownText;
+};
+
+const decodedTokenToMarkdownToken = (
+  internalToken: number[]
+): MarkdownString => {
+  // the first byte declares the token type
+  switch (internalToken[0]) {
+    case HEADLINE_MARKER_TYPE:
+      return Markdown[
+        `H${internalToken[1] as (typeof HEADLINE_LEVELS)[keyof typeof HEADLINE_LEVELS]}`
+      ];
+    default:
+      return '';
+  }
+};
+
+export { convertInternalFormatToMarkdown };

package/src/internal/text-formats/unicode-markers-format/constants.ts

@@ -0,0 +1,64 @@
+/**
+ * Constants for rich text markers.
+ */
+const ZWS = '\u200B'; // Zero-width space used as the marker (both as prefix and base).
+const MARKER_BYTE_LENGTH = 6; // Define a fixed marker length enables easy decoding when iterating over a string of the internal text format
+const MARKER_STRING_LENGTH = MARKER_BYTE_LENGTH + 2; // like Markers.H1.length or Markers.BOLD.length
+const HEADLINE_MARKER_TYPE = 0x10; // Marker type for headline start.
+// PROBLEM: HEADLINE_LEVELS is used in two semantic ways. 1) for specifying the headline level in the encoded marker (see below) 2) and at the level interface (e.g. of Headline component) --> here we should use "H1" | "H2" | "H3" in an Enum or readonly object
+const HEADLINE_LEVELS = {
+  H1: 1,
+  H2: 2,
+  H3: 3,
+} as const;
+const HEADLINE_MARKERS: Record<keyof typeof HEADLINE_LEVELS, Uint8Array> = {
+  H1: createMarker([HEADLINE_MARKER_TYPE, HEADLINE_LEVELS.H1]),
+  H2: createMarker([HEADLINE_MARKER_TYPE, HEADLINE_LEVELS.H2]),
+  H3: createMarker([HEADLINE_MARKER_TYPE, HEADLINE_LEVELS.H3]),
+} as const;
+
+const BOLD_MARKER_TYPE = 0x20;
+const BOLD_MARKER_START = 1;
+const BOLD_MARKER_END = 2;
+
+const BOLD_MARKERS = {
+  START: createMarker([BOLD_MARKER_TYPE, BOLD_MARKER_START]),
+  END: createMarker([BOLD_MARKER_TYPE, BOLD_MARKER_END]),
+} as const;
+
+const ITALIC_MARKER_TYPE = 0x30;
+const ITALIC_MARKER_START = 3;
+const ITALIC_MARKER_END = 4;
+
+const ITALIC_MARKERS = {
+  START: createMarker([ITALIC_MARKER_TYPE, ITALIC_MARKER_START]),
+  END: createMarker([ITALIC_MARKER_TYPE, ITALIC_MARKER_END]),
+} as const;
+
+const BULLET_POINT_MARKER_TYPE = 0x40;
+const BULLET_POINT_UNORDERED = 1;
+const BULLET_POINT_UL_MARKER = createMarker([
+  BULLET_POINT_MARKER_TYPE,
+  BULLET_POINT_UNORDERED,
+]);
+const BULLET_POINT_STRING_REPRESENTATION = '• ';
+
+function createMarker(data: number[], length = MARKER_BYTE_LENGTH) {
+  const array = new Uint8Array(length);
+  array.set(data);
+  return array;
+}
+
+export {
+  ZWS,
+  MARKER_STRING_LENGTH,
+  MARKER_BYTE_LENGTH,
+  HEADLINE_MARKER_TYPE,
+  HEADLINE_LEVELS,
+  HEADLINE_MARKERS,
+  BOLD_MARKER_TYPE,
+  BOLD_MARKERS,
+  ITALIC_MARKERS,
+  BULLET_POINT_UL_MARKER,
+  BULLET_POINT_STRING_REPRESENTATION,
+};

package/src/internal/text-formats/unicode-markers-format/encode-decode.ts

@@ -0,0 +1,60 @@
+/**
+ * The encode function leverages a concept from the Unicode spec - Variant Selectors - which enables arbitrary bytes to be appended invisibly to a unicode char.
+ * @param base string, usually a single char, to which bytes are appended. These bytes remain invisible when base is rendered
+ * @param bytes to added to the base string/char.
+ * @returns string
+ */
+function encode(base: string, bytes: Uint8Array): string {
+  let result = base;
+  for (const byte of bytes) {
+    result += byteToVariationSelector(byte);
+  }
+  return result;
+}
+
+/**
+ * The decode function extracts data hidden inside a string masquerading as variation selectors.
+ * @param variationSelectors string that may contain bytes hidden as variation selectors
+ * @returns a list of numbers/bytes
+ */
+function decode(variationSelectors: string): number[] {
+  const result: number[] = [];
+  let started = false;
+
+  for (const char of variationSelectors) {
+    const byte = variationSelectorToByte(char);
+    if (byte !== null) {
+      result.push(byte);
+      started = true;
+    } else if (started) {
+      break;
+    }
+  }
+
+  return result;
+}
+
+// Utility function to transform a byte into a variation selector, for appending it to a unicode char.
+function byteToVariationSelector(byte: number): string {
+  if (byte < 16) {
+    return String.fromCodePoint(0xfe00 + byte);
+  } else {
+    return String.fromCodePoint(0xe0100 + (byte - 16));
+  }
+}
+
+// Utility function to extract hidden data from a unicode char's variation selectors.
+function variationSelectorToByte(variationSelector: string): number | null {
+  const codePoint = variationSelector.codePointAt(0);
+  if (codePoint === undefined) return null;
+  if (codePoint >= 0xfe00 && codePoint <= 0xfe0f) {
+    return codePoint - 0xfe00;
+  } else if (codePoint >= 0xe0100 && codePoint <= 0xe01ef) {
+    return codePoint - 0xe0100 + 16;
+  } else {
+    return null;
+  }
+}
+
+// Source of encode, decode and variation selector utilities is https://paulbutler.org/2025/smuggling-arbitrary-data-through-an-emoji/ originally written in Rust
+export { encode, decode };

package/src/internal/text-formats/unicode-markers-format/markers.ts

@@ -0,0 +1,19 @@
+import { encode } from './encode-decode.ts';
+import {
+  ZWS,
+  HEADLINE_MARKERS,
+  BOLD_MARKERS,
+  ITALIC_MARKERS,
+  BULLET_POINT_UL_MARKER,
+} from './constants.ts';
+
+export const Markers = {
+  H1: encode(ZWS, HEADLINE_MARKERS.H1),
+  H2: encode(ZWS, HEADLINE_MARKERS.H2),
+  H3: encode(ZWS, HEADLINE_MARKERS.H3),
+  BOLD_START: encode(ZWS, BOLD_MARKERS.START),
+  BOLD_END: encode(ZWS, BOLD_MARKERS.END),
+  ITALIC_START: encode(ZWS, ITALIC_MARKERS.START),
+  ITALIC_END: encode(ZWS, ITALIC_MARKERS.END),
+  UL: encode(ZWS, BULLET_POINT_UL_MARKER),
+} as const;

package/src/internal/text-formats/unicode-markers-format/text-manipulation.ts

@@ -0,0 +1,135 @@
+import { Markers } from './markers';
+
+/**
+ * Adds a bullet point marker to the text at the current cursor position.
+ * If the cursor is not at the beginning of a line, a newline is added before the marker.
+ * If the cursor is at the beginning of a line, the marker is added directly.
+ */
+const addBulletPointMarker = (
+  text: string,
+  selection: { start: number; end: number }
+) => {
+  if (!text) {
+    return Markers.UL;
+  }
+
+  // Split text at the current selection.
+  const { before, selected, after } = splitBySelection(text, selection);
+
+  // Ensure that the marker begins on a new line.
+  let prefix = '';
+  if (before.length > 0 && !before.endsWith('\n')) {
+    prefix = '\n';
+  }
+
+  // Append the marker
+  const insertion = prefix + Markers.UL;
+  return before + insertion + selected + after;
+};
+
+/**
+ * Inserts a headline start marker into the text at the current cursor position.
+ * The marker encodes two bytes:
+ *   - Byte 0: marker type (0x10 for headline)
+ *   - Byte 1: headline level (here: 1)
+ *
+ * The marker is inserted so that it starts on a new line.
+ */
+const addHeadlineMarker = (
+  marker: string, // marker already contains the headline level encoded
+  text: string,
+  selection: { start: number; end: number }
+) => {
+  if (!text) {
+    return marker;
+  }
+  // Split text at the current selection.
+  const { before, after } = splitBySelection(text, selection);
+
+  // Do not add multiple consecutive markers, ZWS is the basis of each marker
+  // if (before.endsWith(ZWS) || after.startsWith(ZWS)) {
+  //   return before + after;
+  // }
+
+  // Ensure that the marker begins on a new line.
+  let prefix = '';
+  if (!before.endsWith('\n')) {
+    prefix = '\n';
+  }
+  // Append the marker followed by a newline so that following text starts on a new line.
+  const insertion = prefix + marker;
+  return before + insertion + after;
+};
+
+const FontStyleMarkers: Record<
+  'bold' | 'italic',
+  { START: string; END: string }
+> = {
+  bold: {
+    START: Markers.BOLD_START,
+    END: Markers.BOLD_END,
+  },
+  italic: { START: Markers.ITALIC_START, END: Markers.ITALIC_END },
+};
+
+const addFontStyleEndMarker = (
+  text: string,
+  selection: { start: number; end: number },
+  style: 'bold' | 'italic'
+) => {
+  const { before, selected, after } = splitBySelection(text, selection);
+  return {
+    text: before + selected + FontStyleMarkers[style].END + after,
+    selection,
+  };
+};
+
+const addFontStyleMarkers = (
+  text: string,
+  selection: { start: number; end: number },
+  style: 'bold' | 'italic'
+) => {
+  const { before, selected, after } = splitBySelection(text, selection);
+
+  // effectively no selection
+  if (selection.end - selection.start === 0) {
+    let prefix = '';
+    if (!before.endsWith('\n') && !before.endsWith(' ')) {
+      prefix += ' ';
+    }
+
+    return {
+      text: before + prefix + FontStyleMarkers[style].START,
+      selection,
+    };
+  }
+
+  return {
+    text:
+      before +
+      FontStyleMarkers[style].START +
+      selected +
+      FontStyleMarkers[style].END +
+      after,
+    selection,
+  };
+};
+
+function splitBySelection(
+  text: string,
+  selection: { start: number; end: number }
+): { before: string; selected: string; after: string } {
+  return {
+    before: text.substring(0, selection.start),
+    selected: text.substring(selection.start, selection.end),
+    after: text.substring(selection.end),
+  };
+}
+
+export {
+  addBulletPointMarker,
+  addHeadlineMarker,
+  addFontStyleMarkers,
+  addFontStyleEndMarker,
+  splitBySelection,
+};