Merge branch 'main' into @kacperzolkiewski/feat-on-image-press

Author: hejsztynx

README.md

@@ -21,22 +21,22 @@
 
 ## Installation
 
-Check out the detailed [installation instructions](https://enriched.swmansion.com/html/).
+Check out the detailed [installation instructions](https://docs.swmansion.com/react-native-enriched-html/#installation).
 
 ## Compatibility
 
 At the moment, the library offers stable support for iOS, Android and Web.
 
-The full list of compatible React Native versions is available [here](https://enriched.swmansion.com/html/).
+The full list of compatible React Native versions is available [here](https://docs.swmansion.com/react-native-enriched-html/misc/compatibility/#supported-react-native-versions).
 
 ## Documentation
 
-To find more about `react-native-enriched-html` including usage guides, API references, known limitations or our contributing guide, visit the official [documentation](https://enriched.swmansion.com/html/).
+To find more about `react-native-enriched-html` including usage guides, API references, known limitations or our contributing guide, visit the official [documentation](https://docs.swmansion.com/react-native-enriched-html/).
 
 ## Examples
 
 The source code for the example mobile and web apps is under the [`apps`](https://github.com/software-mansion/react-native-enriched-html/tree/main/apps) directory.
-You can also see the live preview of the library's capabilities by visiting the [official documentation](https://enriched.swmansion.com/html/) filled with interactive examples.
+You can also see the live preview of the library's capabilities by visiting the [official documentation](https://docs.swmansion.com/react-native-enriched-html/) filled with interactive examples.
 
 ## License
 

apps/example/ios/Podfile.lock

@@ -1845,7 +1845,7 @@ PODS:
     - React-utils (= 0.86.0)
     - ReactNativeDependencies
   - ReactNativeDependencies (0.86.0)
-  - ReactNativeEnrichedHtml (1.1.0):
+  - ReactNativeEnrichedHtml (1.1.1):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -2182,7 +2182,7 @@ SPEC CHECKSUMS:
   ReactCodegen: ee39bbc365b4791c9b5183b52c533ebf586e1d8d
   ReactCommon: 4d01bfb533b93a2103329dfefc74db6a9e272888
   ReactNativeDependencies: fa0a54b3f5319ae0e3b9aff32bfee7a424b88e66
-  ReactNativeEnrichedHtml: 2905798b4a734822d13c6b46f49ad69834358923
+  ReactNativeEnrichedHtml: c91b96b287fc5f413f1e2f066c9dba8dec5e9acf
   Yoga: fe50ab299e578f397fef753cf309c6703a4db29b
 
 PODFILE CHECKSUM: 88c10840d02e9884b2dc3f457d5120f83ac3803b

docs/src/examples/EmojiEditor.tsx

@@ -32,9 +32,9 @@ export default function App() {
 
   const suggestions = useMemo(() => {
     if (!open) return [];
-    // A trailing ":" (as in ":smile:") is part of the query - drop it.
-    const q = query.replace(/:$/, '').toLowerCase();
-    return EMOJIS.filter(emoji => emoji.shortcode.startsWith(q));
+    return EMOJIS.filter(emoji =>
+      emoji.shortcode.startsWith(query.toLowerCase())
+    );
   }, [open, query]);
 
   const openPicker = () => {
@@ -50,6 +50,16 @@ export default function App() {
   const updateQuery = ({ text }: OnChangeMentionEvent) => {
     setOpen(true);
     setQuery(text);
+
+    if (text.endsWith(':')) {
+      const strippedQuery = text.slice(0, text.length - 1).toLowerCase();
+      const autoChosenEmoji = EMOJIS.find(
+        emoji => emoji.shortcode === strippedQuery
+      );
+      if (autoChosenEmoji) {
+        pick(autoChosenEmoji);
+      }
+    }
   };
 
   const pick = (emoji: Emoji) => {
@@ -61,7 +71,7 @@ export default function App() {
   };
 
   return (
-    <View style={styles.container}>
+    <View>
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
@@ -102,16 +112,20 @@ const htmlStyle: HtmlStyle = {
 };
 
 const styles = StyleSheet.create({
-  container: { gap: 8 },
   input: {
     fontSize: 18,
     color: '#232736',
     padding: 12,
+    marginBottom: 186,
     borderRadius: 12,
     minHeight: 96,
     backgroundColor: '#eef0ff',
   },
   picker: {
+    position: 'absolute',
+    top: '100%',
+    marginTop: -170,
+    width: '100%',
     borderWidth: 1,
     borderColor: '#dfe3f5',
     borderRadius: 12,

docs/src/examples/MentionOnlyEditor.tsx

@@ -70,7 +70,7 @@ export default function App() {
   };
 
   return (
-    <View style={styles.container}>
+    <View>
       <EnrichedTextInput
         ref={ref}
         style={styles.input}
@@ -118,16 +118,20 @@ const htmlStyle: HtmlStyle = {
 };
 
 const styles = StyleSheet.create({
-  container: { gap: 8 },
   input: {
     fontSize: 18,
     color: '#232736',
     padding: 12,
+    marginBottom: 192,
     borderRadius: 12,
     minHeight: 96,
     backgroundColor: '#eef0ff',
   },
   picker: {
+    position: 'absolute',
+    top: '100%',
+    marginTop: -176,
+    width: '100%',
     borderWidth: 1,
     borderColor: '#dfe3f5',
     borderRadius: 12,

docs/src/examples/TextAlignmentEditor.tsx

@@ -20,7 +20,10 @@ export default function App() {
       <Pressable
         key={alignment}
         style={[styles.button, isActive && styles.buttonActive]}
-        onPress={() => ref.current?.setTextAlignment(alignment)}>
+        onPress={() => {
+          const alignmentToSet = isActive ? 'auto' : alignment;
+          ref.current?.setTextAlignment(alignmentToSet);
+        }}>
         <Text style={[styles.text, isActive && styles.textActive]}>
           {alignment}
         </Text>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-enriched-html",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "HTML-based Rich Text solution for React Native",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",

src/web/EnrichedText.tsx

@@ -17,13 +17,13 @@ import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
 import { sanitizeHtml } from './sanitization/htmlSanitizer';
 import { prepareHtmlForWeb } from './normalization/prepareHtmlForWeb';
 import { INLINE_IMAGE_CSS_VARIABLES } from './styleConversion/inlineImageCSSVariables';
-import { useImageErrorFallback } from './useImageErrorFallback';
-import { usePressInteractions } from './usePressInteractions';
+import { useImageErrorFallback } from './htmlExtensions/useImageErrorFallback';
+import { usePressInteractions } from './htmlExtensions/usePressInteractions';
 import { useEllipsizeMode } from './ellipsizeMode/useEllipsizeMode';
-import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
-import { useStableRef } from './useStableRef';
-import { assertBrowserEnvironment } from './assertBrowserEnvironment';
-import { useOrderedListMarkerWidth } from './useOrderedListMarkerWidth';
+import { adaptWebToNativeEvent } from './nativeMappers/adaptWebToNativeEvent';
+import { useStableRef } from './utils/useStableRef';
+import { assertBrowserEnvironment } from './utils/assertBrowserEnvironment';
+import { useOrderedListMarkerWidth } from './htmlExtensions/useOrderedListMarkerWidth';
 
 export const EnrichedText = memo(
   ({

src/web/EnrichedTextInput.tsx

@@ -12,12 +12,12 @@ import type {
   EnrichedTextInputInstance,
   EnrichedTextInputProps,
 } from '../types';
-import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
+import { adaptWebToNativeEvent } from './nativeMappers/adaptWebToNativeEvent';
 import {
   tiptapPosToNativePos,
   nativePosToTiptapPos,
   nativeLeafText,
-} from './positionMapping';
+} from './nativeMappers/positionMapping';
 import {
   useEditor,
   EditorContent,
@@ -29,11 +29,11 @@ import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import History from '@tiptap/extension-history';
 import { Placeholder } from '@tiptap/extensions/placeholder';
-import { useOnChangeHtml } from './useOnChangeHtml';
-import { useOnChangeText } from './useOnChangeText';
-import { useOnChangeState } from './useOnChangeState';
-import { useOnLinkDetected } from './useOnLinkDetected';
-import type { LinkEmitterState } from './emitLinkDetected';
+import { useOnChangeHtml } from './tiptapWatchers/useOnChangeHtml';
+import { useOnChangeText } from './tiptapWatchers/useOnChangeText';
+import { useOnChangeState } from './tiptapWatchers/useOnChangeState';
+import { useOnLinkDetected } from './tiptapWatchers/useOnLinkDetected';
+import type { LinkEmitterState } from './tiptapWatchers/emitLinkDetected';
 import {
   prepareHtmlForTiptap,
   normalizeHtmlFromTiptap,
@@ -68,7 +68,7 @@ import { StrictMarksPlugin } from './pmPlugins/StrictMarksPlugin';
 import { MergeAdjacentSameKindBlocksPlugin } from './pmPlugins/MergeAdjacentSameKindBlocksPlugin';
 import { OrderedListMarkerWidthPlugin } from './pmPlugins/OrderedListMarkerWidthPlugin';
 import { StripMarksInCodeBlockPlugin } from './pmPlugins/StripMarksInCodeBlockPlugin';
-import { handleClipboardPasteImages } from './pasteImages';
+import { handleClipboardPasteImages } from './utils/pasteImages';
 import {
   MentionPlugin,
   setMention,
@@ -78,15 +78,15 @@ import {
 import { StripMarksOnImagePlugin } from './pmPlugins/StripMarksOnImagePlugin';
 import { ShortcutPlugin } from './pmPlugins/ShortcutPlugin';
 import { TextShortcutsPlugin } from './pmPlugins/TextShortcutsPlugin';
-import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
+import { returnKeyTypeToEnterKeyHint } from './nativeMappers/returnKeyTypeToEnterKeyHint';
 import { ENRICHED_TEXT_INPUT_CLASSNAME } from './constants/classNames';
 import { AutolinkPlugin } from './pmPlugins/AutolinkPlugin';
-import { useStableRef } from './useStableRef';
+import { useStableRef } from './utils/useStableRef';
 import {
   checkMentionAttributes,
   sanitizeMentionAttributes,
 } from './sanitization/htmlSanitizer';
-import { assertBrowserEnvironment } from './assertBrowserEnvironment';
+import { assertBrowserEnvironment } from './utils/assertBrowserEnvironment';
 
 function runFocused(
   editor: Editor,

src/web/__tests__/assertBrowserEnvironment.dom.test.ts

@@ -1,4 +1,4 @@
-import { assertBrowserEnvironment } from '../assertBrowserEnvironment';
+import { assertBrowserEnvironment } from '../utils/assertBrowserEnvironment';
 
 describe('assertBrowserEnvironment', () => {
   // jsdom provides a full DOM, so the browser APIs are present by default.

src/web/__tests__/assertBrowserEnvironment.ssr.test.ts

@@ -2,7 +2,7 @@
  * @jest-environment node
  */
 // Because of the docblock above, jsdom test environment does not exist here
-import { assertBrowserEnvironment } from '../assertBrowserEnvironment';
+import { assertBrowserEnvironment } from '../utils/assertBrowserEnvironment';
 
 describe('assertBrowserEnvironment', () => {
   test('throws when DOM is missing', () => {