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

package/lib/typescript/module/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAoBtD,QAAA,MAAM,cAAc,GAAI,uBAGrB;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC9C,4CAwFA,CAAC;AAgCF,eAAe,cAAc,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/lib/typescript/module/src/internal/rendering/components/Bold.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const Bold: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Bold.d.ts.map

package/lib/typescript/module/src/internal/rendering/components/Bold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bold.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/rendering/components/Bold.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,eAAO,MAAM,IAAI,GAAI,cAAc,iBAAiB,4CAEnD,CAAC"}

package/lib/typescript/module/src/internal/rendering/components/BulletPoint.d.ts

@@ -0,0 +1,3 @@
+import { type PropsWithChildren } from 'react';
+export declare const BulletPoint: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BulletPoint.d.ts.map

package/lib/typescript/module/src/internal/rendering/components/BulletPoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BulletPoint.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/rendering/components/BulletPoint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAIzD,eAAO,MAAM,WAAW,GAAI,cAAc,iBAAiB,4CAO1D,CAAC"}

package/lib/typescript/module/src/internal/rendering/components/Headline.d.ts

@@ -0,0 +1,24 @@
+import { type PropsWithChildren } from 'react';
+import { Markers } from '../../text-formats/unicode-markers-format/markers.ts';
+export declare const Headline: ({ level, children, }: PropsWithChildren<{
+    level: keyof typeof styles;
+}>) => import("react/jsx-runtime").JSX.Element;
+declare const styles: {
+    [Markers.H1]: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    [Markers.H2]: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+    [Markers.H3]: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginVertical: number;
+    };
+};
+export {};
+//# sourceMappingURL=Headline.d.ts.map

package/lib/typescript/module/src/internal/rendering/components/Headline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Headline.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/rendering/components/Headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sDAAsD,CAAC;AAE/E,eAAO,MAAM,QAAQ,GAAI,sBAGtB,iBAAiB,CAAC;IACnB,KAAK,EAAE,MAAM,OAAO,MAAM,CAAC;CAC5B,CAAC,4CAID,CAAC;AAEF,QAAA,MAAM,MAAM;IACV,CAAC,OAAO,CAAC,EAAE,CAAC;;;;MAIX;IACD,CAAC,OAAO,CAAC,EAAE,CAAC;;;;MAIX;IACD,CAAC,OAAO,CAAC,EAAE,CAAC;;;;MAIX;CACD,CAAC"}

package/lib/typescript/module/src/internal/rendering/components/Italic.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const Italic: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Italic.d.ts.map

package/lib/typescript/module/src/internal/rendering/components/Italic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Italic.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/rendering/components/Italic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,eAAO,MAAM,MAAM,GAAI,cAAc,iBAAiB,4CAErD,CAAC"}

package/lib/typescript/module/src/internal/rendering/components/Render.d.ts

@@ -0,0 +1,4 @@
+export declare const Render: ({ encodedText }: {
+    encodedText: string;
+}) => (import("react/jsx-runtime").JSX.Element | "")[];
+//# sourceMappingURL=Render.d.ts.map

package/lib/typescript/module/src/internal/rendering/components/Render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/rendering/components/Render.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,MAAM,GAAI,iBAAiB;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,qDAwE9D,CAAC"}

package/lib/typescript/module/src/internal/rendering/utils.d.ts

@@ -0,0 +1,3 @@
+declare function intersperse<T>(arr: T[], separator: T | string): (T | string)[];
+export { intersperse };
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/module/src/internal/rendering/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/rendering/utils.ts"],"names":[],"mappings":"AACA,iBAAS,WAAW,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,CAWvE;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/lib/typescript/module/src/internal/text-formats/conversions.d.ts

@@ -0,0 +1,9 @@
+type MarkdownString = string;
+/**
+ * convertInternalFormatToMarkdown converts text from the internal format to Markdown
+ * @param internalText rich text in the internal format
+ * @returns markdown formatted text
+ */
+declare const convertInternalFormatToMarkdown: (internalText: string) => MarkdownString;
+export { convertInternalFormatToMarkdown };
+//# sourceMappingURL=conversions.d.ts.map

package/lib/typescript/module/src/internal/text-formats/conversions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversions.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/text-formats/conversions.ts"],"names":[],"mappings":"AAcA,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B;;;;GAIG;AACH,QAAA,MAAM,+BAA+B,GACnC,cAAc,MAAM,KACnB,cAsBF,CAAC;AAgBF,OAAO,EAAE,+BAA+B,EAAE,CAAC"}

package/lib/typescript/module/src/internal/text-formats/markdown-format.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=markdown-format.d.ts.map

package/lib/typescript/module/src/internal/text-formats/markdown-format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-format.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/text-formats/markdown-format.ts"],"names":[],"mappings":""}

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/constants.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Constants for rich text markers.
+ */
+declare const ZWS = "\u200B";
+declare const MARKER_BYTE_LENGTH = 6;
+declare const MARKER_STRING_LENGTH: number;
+declare const HEADLINE_MARKER_TYPE = 16;
+declare const HEADLINE_LEVELS: {
+    readonly H1: 1;
+    readonly H2: 2;
+    readonly H3: 3;
+};
+declare const HEADLINE_MARKERS: Record<keyof typeof HEADLINE_LEVELS, Uint8Array>;
+declare const BOLD_MARKER_TYPE = 32;
+declare const BOLD_MARKERS: {
+    readonly START: Uint8Array<ArrayBuffer>;
+    readonly END: Uint8Array<ArrayBuffer>;
+};
+declare const ITALIC_MARKERS: {
+    readonly START: Uint8Array<ArrayBuffer>;
+    readonly END: Uint8Array<ArrayBuffer>;
+};
+declare const BULLET_POINT_UL_MARKER: Uint8Array<ArrayBuffer>;
+declare const BULLET_POINT_STRING_REPRESENTATION = "\u2022 ";
+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, };
+//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/text-formats/unicode-markers-format/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,QAAA,MAAM,GAAG,WAAW,CAAC;AACrB,QAAA,MAAM,kBAAkB,IAAI,CAAC;AAC7B,QAAA,MAAM,oBAAoB,QAAyB,CAAC;AACpD,QAAA,MAAM,oBAAoB,KAAO,CAAC;AAElC,QAAA,MAAM,eAAe;;;;CAIX,CAAC;AACX,QAAA,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,OAAO,eAAe,EAAE,UAAU,CAI7D,CAAC;AAEX,QAAA,MAAM,gBAAgB,KAAO,CAAC;AAI9B,QAAA,MAAM,YAAY;;;CAGR,CAAC;AAMX,QAAA,MAAM,cAAc;;;CAGV,CAAC;AAIX,QAAA,MAAM,sBAAsB,yBAG1B,CAAC;AACH,QAAA,MAAM,kCAAkC,YAAO,CAAC;AAQhD,OAAO,EACL,GAAG,EACH,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,sBAAsB,EACtB,kCAAkC,GACnC,CAAC"}

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/encode-decode.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+declare function encode(base: string, bytes: Uint8Array): string;
+/**
+ * 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
+ */
+declare function decode(variationSelectors: string): number[];
+export { encode, decode };
+//# sourceMappingURL=encode-decode.d.ts.map

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/encode-decode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"encode-decode.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/text-formats/unicode-markers-format/encode-decode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,iBAAS,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,CAMvD;AAED;;;;GAIG;AACH,iBAAS,MAAM,CAAC,kBAAkB,EAAE,MAAM,GAAG,MAAM,EAAE,CAepD;AAyBD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC"}

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/markers.d.ts

@@ -0,0 +1,11 @@
+export declare const Markers: {
+    readonly H1: string;
+    readonly H2: string;
+    readonly H3: string;
+    readonly BOLD_START: string;
+    readonly BOLD_END: string;
+    readonly ITALIC_START: string;
+    readonly ITALIC_END: string;
+    readonly UL: string;
+};
+//# sourceMappingURL=markers.d.ts.map

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/markers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markers.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/text-formats/unicode-markers-format/markers.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC"}

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/text-manipulation.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ */
+declare const addBulletPointMarker: (text: string, selection: {
+    start: number;
+    end: number;
+}) => string;
+/**
+ * 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.
+ */
+declare const addHeadlineMarker: (marker: string, // marker already contains the headline level encoded
+text: string, selection: {
+    start: number;
+    end: number;
+}) => string;
+declare const addFontStyleEndMarker: (text: string, selection: {
+    start: number;
+    end: number;
+}, style: "bold" | "italic") => {
+    text: string;
+    selection: {
+        start: number;
+        end: number;
+    };
+};
+declare const addFontStyleMarkers: (text: string, selection: {
+    start: number;
+    end: number;
+}, style: "bold" | "italic") => {
+    text: string;
+    selection: {
+        start: number;
+        end: number;
+    };
+};
+declare function splitBySelection(text: string, selection: {
+    start: number;
+    end: number;
+}): {
+    before: string;
+    selected: string;
+    after: string;
+};
+export { addBulletPointMarker, addHeadlineMarker, addFontStyleMarkers, addFontStyleEndMarker, splitBySelection, };
+//# sourceMappingURL=text-manipulation.d.ts.map

package/lib/typescript/module/src/internal/text-formats/unicode-markers-format/text-manipulation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-manipulation.d.ts","sourceRoot":"","sources":["../../../../../../../src/internal/text-formats/unicode-markers-format/text-manipulation.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,QAAA,MAAM,oBAAoB,GACxB,MAAM,MAAM,EACZ,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,WAkB1C,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,iBAAiB,GACrB,QAAQ,MAAM,EAAE,qDAAqD;AACrE,MAAM,MAAM,EACZ,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,WAqB1C,CAAC;AAaF,QAAA,MAAM,qBAAqB,GACzB,MAAM,MAAM,EACZ,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EACzC,OAAO,MAAM,GAAG,QAAQ;;;eADJ,MAAM;aAAO,MAAM;;CAQxC,CAAC;AAEF,QAAA,MAAM,mBAAmB,GACvB,MAAM,MAAM,EACZ,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EACzC,OAAO,MAAM,GAAG,QAAQ;;;eADJ,MAAM;aAAO,MAAM;;CA2BxC,CAAC;AAEF,iBAAS,gBAAgB,CACvB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAMrD;AAED,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,GACjB,CAAC"}

package/package.json

@@ -0,0 +1,194 @@
+{
+  "name": "react-native-simple-rich-text-editor",
+  "version": "0.1.0-beta.0",
+  "description": "A lean Rich Text Editor for React Native built upon TextInput outputting Markdown",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "types": "./lib/typescript/module/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-simple-rich-text-editor-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"**/*.{ts,tsx}\" --fix",
+    "format": "prettier \"**/*.{ts,tsx,json}\" --write",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/christiankozalla/react-native-simple-rich-text-editor.git"
+  },
+  "author": "Christian Kozalla <christian.kozalla@gmail.com> (https://christiankozalla.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/christiankozalla/react-native-simple-rich-text-editor/issues"
+  },
+  "homepage": "https://github.com/christiankozalla/react-native-simple-rich-text-editor#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@release-it/conventional-changelog": "^9.0.4",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "commitlint": "^17.0.2",
+    "conventional-changelog-angular": "^8.0.0",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "18.3.1",
+    "react-native": "0.76.7",
+    "react-native-builder-bob": "^0.37.0",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "testMatch": [
+      "**/__tests__/**/*.test.ts"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": false
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json",
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.48.3"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,178 @@
+/**
+ * React Native Simple Rich Text Editor
+ *
+ * Documentation of the public API:
+ * - SimpleRichTextEditor Component
+ * -> let user specifiy when to emit (e.g. on keyboard dismiss)
+ * -> let user pass custom H1, H2, Bold, Italic, List buttons
+ *
+ * Internals:
+ * - RichTextEditor is a controlled component. The user provides `state` and `setState` to receive markdown output.
+ * - Only a subset of markdown will be supported. Unsupported markdown like images will be rendered as plain markdown text.
+ * - Receive text prop -> convert markdown to internal representation -> render
+ * - onEmitText: convert internal representation to markdown -> setState(markdown)
+ *
+ * Usage Example:
+ *
+ * ```typescript
+ * import RichTextEditor from "react-native-simple-rich-text-editor";
+ * import { useState } from "react";
+ *
+ *
+ * const Screen = () => {
+ *  const [markdownText, setMarkdownText] = useState("# Hello World\nA paragraph."); // or with backticks ``
+ *
+ *  return (
+ *    <RichTextEditor text={markdownText} onEmitText={setMarkdownText} style={styles.editor} />
+ *  );
+ * };
+ * ```
+ */
+import type { Dispatch, SetStateAction } from 'react';
+import { useState } from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+  Text,
+  type NativeSyntheticEvent,
+  type TextInputSelectionChangeEventData,
+} from 'react-native';
+import { Render } from './internal/rendering/components/Render.tsx';
+import {
+  addFontStyleMarkers,
+  addFontStyleEndMarker,
+  addHeadlineMarker,
+  addBulletPointMarker,
+} from './internal/text-formats/unicode-markers-format/text-manipulation.ts';
+import { Markers } from './internal/text-formats/unicode-markers-format/markers.ts';
+
+const RichTextEditor = ({
+  text,
+  onEmitText,
+}: {
+  text: string;
+  onEmitText: Dispatch<SetStateAction<string>>;
+}) => {
+  // Track the current selection (cursor position) in the TextInput.
+  const [selection, setSelection] = useState<{ start: number; end: number }>({
+    start: 0,
+    end: 0,
+  });
+  const [needsBoldEndMarker, setNeedsBoldEndMarker] = useState(false); // we must count the BOLD_START and BOLD_END markers in text prop => inital state
+  const [needsItalicEndMarker, setNeedsItalicEndMarker] = useState(false);
+
+  const handleFontStyleMarkerInsertion = (style: 'bold' | 'italic') => () => {
+    const isBold = style === 'bold';
+    if (isBold ? needsBoldEndMarker : needsItalicEndMarker) {
+      const { text: newText } = addFontStyleEndMarker(text, selection, style);
+      isBold ? setNeedsBoldEndMarker(false) : setNeedsItalicEndMarker(false);
+      onEmitText(newText);
+    } else {
+      const { text: newText } = addFontStyleMarkers(text, selection, style);
+      // this is a reaction to an implementation detail of addBoldMarkers - TODO: solve it cleanly
+      if (selection.start - selection.end === 0)
+        isBold ? setNeedsBoldEndMarker(true) : setNeedsItalicEndMarker(true);
+      onEmitText(newText);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() =>
+            onEmitText(addHeadlineMarker(Markers.H1, text, selection))
+          }
+        >
+          <Text style={styles.buttonText}>H1</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() =>
+            onEmitText(addHeadlineMarker(Markers.H2, text, selection))
+          }
+        >
+          <Text style={styles.buttonText}>H2</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() =>
+            onEmitText(addHeadlineMarker(Markers.H3, text, selection))
+          }
+        >
+          <Text style={styles.buttonText}>H3</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => onEmitText(addBulletPointMarker(text, selection))}
+        >
+          <Text style={styles.buttonText}>List</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.button, styles.fixedWidth]}
+          onPress={handleFontStyleMarkerInsertion('bold')}
+        >
+          <Text style={styles.buttonText}>
+            {needsBoldEndMarker ? 'Bold ✖' : 'Bold'}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.button, styles.fixedWidth]}
+          onPress={handleFontStyleMarkerInsertion('italic')}
+        >
+          <Text style={styles.buttonText}>
+            {needsItalicEndMarker ? 'Italic ✖' : 'Italic'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <TextInput
+        multiline
+        autoFocus
+        autoCorrect={false}
+        style={styles.input}
+        onSelectionChange={(
+          e: NativeSyntheticEvent<TextInputSelectionChangeEventData>
+        ) => setSelection(e.nativeEvent.selection)}
+        onChangeText={onEmitText}
+      >
+        <Render encodedText={text} />
+      </TextInput>
+    </View>
+  );
+};
+
+const electricBlueHex = '#009DDC';
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  row: {
+    margin: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'nowrap',
+  },
+  input: { flex: 1, textAlignVertical: 'top' },
+  button: {
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: electricBlueHex,
+    backgroundColor: 'white',
+    flexShrink: 1,
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: electricBlueHex,
+  },
+  fixedWidth: {
+    width: 70,
+  },
+});
+
+export default RichTextEditor;
+export { RichTextEditor };

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

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

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

@@ -0,0 +1,19 @@
+import { type PropsWithChildren, Fragment } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { BULLET_POINT_STRING_REPRESENTATION } from '../../text-formats/unicode-markers-format/constants';
+
+export const BulletPoint = ({ children }: PropsWithChildren) => {
+  return (
+    <Fragment>
+      <Text style={styles.bullet}>{BULLET_POINT_STRING_REPRESENTATION}</Text>
+      <Text>{children}</Text>
+    </Fragment>
+  );
+};
+
+const styles = StyleSheet.create({
+  bullet: {
+    marginRight: 8,
+    fontSize: 16,
+  },
+});

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

@@ -0,0 +1,32 @@
+import { type PropsWithChildren } from 'react';
+import { type TextStyle, Text, StyleSheet } from 'react-native';
+import { Markers } from '../../text-formats/unicode-markers-format/markers.ts';
+
+export const Headline = ({
+  level,
+  children,
+}: PropsWithChildren<{
+  level: keyof typeof styles;
+}>) => {
+  return (
+    <Text style={(styles[level] as TextStyle) ?? styles[3]}>{children}</Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  [Markers.H1]: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginVertical: 4,
+  },
+  [Markers.H2]: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginVertical: 4,
+  },
+  [Markers.H3]: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginVertical: 4,
+  },
+});