Merge pull request #188 from 10play/web-bugs

fix: web related bugs

example/ios/Podfile.lock

@@ -1124,7 +1124,7 @@ PODS:
   - RNSVG (14.1.0):
     - React-Core
   - SocketRocket (0.6.1)
-  - tentap (0.5.15):
+  - tentap (0.5.18):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1400,7 +1400,7 @@ SPEC CHECKSUMS:
   RNScreens: 17e2f657f1b09a71ec3c821368a04acbb7ebcb46
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  tentap: b5b76471ae0e1ad1f05ffd5bacabf4622c07a667
+  tentap: d6ae21cc56aeab1779585a397a4ba2936bfe6244
   Yoga: 9e6a04eacbd94f97d94577017e9f23b3ab41cf6c
 
 PODFILE CHECKSUM: 59f02bbde682eb22b765a58d4a0ce59d95964282

src/RichText/RichText.tsx

@@ -49,6 +49,8 @@ export const RichText = ({ editor, ...props }: RichTextProps) => {
 
   const onWebviewMessage = (event: WebViewMessageEvent) => {
     const { data } = event.nativeEvent;
+    // on expo-web we sometimes get react-dev messages that come in as objects - so we ignore these
+    if (typeof data !== 'string') return;
     // Parse the message sent from the editor
     const { type, payload } = JSON.parse(data) as EditorMessage;
     if (type === CoreEditorActionType.DocumentHeight) {

src/RichText/Toolbar/Toolbar.tsx

@@ -1,11 +1,4 @@
-import {
-  FlatList,
-  Image,
-  TouchableOpacity,
-  StyleSheet,
-  Platform,
-  View,
-} from 'react-native';
+import { FlatList, StyleSheet, Platform } from 'react-native';
 import { useBridgeState } from '../useBridgeState';
 import React from 'react';
 import {
@@ -16,6 +9,8 @@ import {
 import { EditLinkBar } from './EditLinkBar';
 import { useKeyboard } from '../../utils';
 import type { EditorBridge } from '../../types';
+import { ToolbarItemComp } from './ToolbarItemComp';
+import { WebToolbar } from './WebToolbar';
 
 interface ToolbarProps {
   editor: EditorBridge;
@@ -55,47 +50,27 @@ export function Toolbar({
   switch (toolbarContext) {
     case ToolbarContext.Main:
     case ToolbarContext.Heading:
+      if (Platform.OS === 'web') {
+        return (
+          <WebToolbar
+            items={
+              toolbarContext === ToolbarContext.Main ? items : HEADING_ITEMS
+            }
+            args={args}
+            editor={editor}
+            hidden={hidden}
+          />
+        );
+      }
       return (
         <FlatList
           data={toolbarContext === ToolbarContext.Main ? items : HEADING_ITEMS}
           style={[
             editor.theme.toolbar.toolbarBody,
             hideToolbar ? editor.theme.toolbar.hidden : undefined,
           ]}
-          renderItem={({ item: { onPress, disabled, active, image } }) => {
-            return (
-              <TouchableOpacity
-                onPress={onPress(args)}
-                disabled={disabled(args)}
-                style={[editor.theme.toolbar.toolbarButton]}
-              >
-                <View
-                  style={[
-                    editor.theme.toolbar.iconWrapper,
-                    active(args)
-                      ? editor.theme.toolbar.iconWrapperActive
-                      : undefined,
-                    disabled(args)
-                      ? editor.theme.toolbar.iconWrapperDisabled
-                      : undefined,
-                  ]}
-                >
-                  <Image
-                    source={image(args)}
-                    style={[
-                      editor.theme.toolbar.icon,
-                      active(args)
-                        ? editor.theme.toolbar.iconActive
-                        : undefined,
-                      disabled(args)
-                        ? editor.theme.toolbar.iconDisabled
-                        : undefined,
-                    ]}
-                    resizeMode="contain"
-                  />
-                </View>
-              </TouchableOpacity>
-            );
+          renderItem={({ item }) => {
+            return <ToolbarItemComp {...item} args={args} editor={editor} />;
           }}
           horizontal
         />

src/RichText/Toolbar/ToolbarItemComp.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import type { ToolbarItem } from './actions';
+import type { EditorBridge } from '../../types';
+
+export const ToolbarItemComp = ({
+  onPress,
+  disabled,
+  active,
+  image,
+  editor,
+  args,
+}: ToolbarItem & {
+  editor: EditorBridge;
+  args: Parameters<ToolbarItem['onPress']>[0];
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress(args)}
+      disabled={disabled(args)}
+      style={[editor.theme.toolbar.toolbarButton]}
+    >
+      <View
+        style={[
+          editor.theme.toolbar.iconWrapper,
+          active(args) ? editor.theme.toolbar.iconWrapperActive : undefined,
+          disabled(args) ? editor.theme.toolbar.iconWrapperDisabled : undefined,
+        ]}
+      >
+        <Image
+          source={image(args)}
+          style={[
+            editor.theme.toolbar.icon,
+            active(args) ? editor.theme.toolbar.iconActive : undefined,
+            disabled(args) ? editor.theme.toolbar.iconDisabled : undefined,
+          ]}
+          resizeMode="contain"
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};

src/RichText/Toolbar/WebToolbar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { EditorBridge } from '../../types';
+import type { ToolbarItem } from './actions';
+import { ToolbarItemComp } from './ToolbarItemComp';
+
+interface WebToolbarProps {
+  editor: EditorBridge;
+  args: Parameters<ToolbarItem['onPress']>[0];
+  items: ToolbarItem[];
+  hidden?: boolean;
+}
+export const WebToolbar = ({
+  args,
+  editor,
+  hidden,
+  items,
+}: WebToolbarProps) => {
+  if (hidden) return null;
+
+  return (
+    <View style={{ flexDirection: 'row' }}>
+      {items?.map((item, i) => (
+        <ToolbarItemComp {...item} args={args} editor={editor} key={i} />
+      ))}
+    </View>
+  );
+};