@shoutem/ui 6.2.0 → 6.3.1-rc.0

package/html/components/AttachmentRenderer.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { resolveDimensions } from '../services/Dimensions';
+import Image from './Image';
+
+const AttachmentRenderer = ({ id, type, style, attachments }) => {
+  if (!attachments) {
+    return null;
+  }
+
+  if (type === 'image') {
+    const image = _.find(attachments, { id });
+
+    if (image && image.src) {
+      const source = { uri: image.src };
+      const imageSize = { width: image.width, height: image.height };
+      const { height, width } = resolveDimensions(imageSize, style);
+      const resolvedStyle = { alignSelf: 'center', height, width };
+
+      return <Image source={source} key={id} style={resolvedStyle} />;
+    }
+  }
+
+  return null;
+};
+
+AttachmentRenderer.propTypes = {
+  attachments: PropTypes.oneOf([PropTypes.array, PropTypes.object]),
+  id: PropTypes.any,
+  style: PropTypes.any,
+  type: PropTypes.any,
+};
+
+AttachmentRenderer.defaultProps = {
+  id: undefined,
+  type: undefined,
+  attachments: undefined,
+  style: undefined,
+};
+
+export default AttachmentRenderer;

package/html/components/IframeRenderer.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Vimeo } from 'react-native-vimeo-iframe';
+import YoutubePlayer from 'react-native-youtube-iframe';
+import iframe from '@native-html/iframe-plugin';
+import PropTypes from 'prop-types';
+import { Text } from '../../components/Text';
+import { View } from '../../components/View';
+import isValidVideoFormat from '../services/isValidVideoFormat';
+
+const IframeRenderer = props => {
+  const { tnode, shoutemStyle, unsupportedVideoFormatMessage } = props;
+  const url = tnode?.domNode?.attribs?.src;
+
+  if (url && !isValidVideoFormat(url)) {
+    const message =
+      unsupportedVideoFormatMessage || 'Unsupported video format.';
+
+    return (
+      <View
+        style={shoutemStyle.fallback}
+        styleName="vertical h-center v-center"
+      >
+        <Text>{message}</Text>
+      </View>
+    );
+  }
+
+  if (url && (url.includes('youtube') || url.includes('youtu.be'))) {
+    const youtubeIdRegEx = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    const regExMatch = url.match(youtubeIdRegEx);
+    const youtubeId =
+      regExMatch && regExMatch[7].length === 11 ? regExMatch[7] : false;
+
+    return (
+      <YoutubePlayer
+        webViewProps={{
+          renderToHardwareTextureAndroid: true,
+        }}
+        height={shoutemStyle.video.height}
+        videoId={youtubeId}
+      />
+    );
+  }
+
+  if (url && url.includes('vimeo')) {
+    const vimeoIdRegEx = /(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i;
+    const regExMatches = url.match(vimeoIdRegEx);
+    const vimeoId = regExMatches[1];
+
+    return (
+      <Vimeo
+        videoId={vimeoId}
+        style={{ height: shoutemStyle.vimeoVideo.height }}
+      />
+    );
+  }
+
+  return iframe(props);
+};
+
+IframeRenderer.propTypes = {
+  tnode: PropTypes.shape({
+    children: PropTypes.any,
+  }).isRequired,
+  shoutemStyle: PropTypes.any,
+  unsupportedVideoFormatMessage: PropTypes.string,
+};
+
+IframeRenderer.defaultProps = {
+  shoutemStyle: undefined,
+  unsupportedVideoFormatMessage: undefined,
+};
+
+export default IframeRenderer;

package/html/components/SimpleHtml.js

@@ -1,57 +1,23 @@
 import React, { PureComponent } from 'react';
-import { Dimensions, Linking } from 'react-native';
-import Html from 'react-native-render-html';
-import { iframe } from 'react-native-render-html/src/HTMLRenderers';
-import {
-  cssObjectToString,
-  cssStringToObject,
-} from 'react-native-render-html/src/HTMLStyles';
-import {
-  alterNode as tableAlterNode,
+import { Linking } from 'react-native';
+import Html, { defaultSystemFonts } from 'react-native-render-html';
+import WebView from 'react-native-webview';
+import { iframeModel } from '@native-html/iframe-plugin';
+import table, {
   cssRulesFromSpecs,
   defaultTableStylesSpecs,
   IGNORED_TAGS,
-  makeTableRenderer,
-} from 'react-native-render-html-table-bridge';
-import WebView from 'react-native-webview';
-import YoutubePlayer from 'react-native-youtube-iframe';
+  tableModel,
+} from '@native-html/table-plugin';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { Text } from '../../components/Text';
 import { View } from '../../components/View';
-import getEmptyObjectKeys from '../services/getEmptyObjectKeys';
-import isValidVideoFormat from '../services/isValidVideoFormat';
-import Image from './Image';
-
-function resolveMaxWidth(style) {
-  // parentContainerPadding - padding between screen & SimpleHtml. Parent container
-  // can have it's own padding. If it does, we have to include it in calculation,
-  // otherwise maxWidth will be more than max & images will go over the edge
-  const parentContainerPadding = style.outerPadding || 0;
-  const paddingValue =
-    style.container.paddingLeft ||
-    0 + style.container.paddingRight ||
-    0 + parentContainerPadding;
-
-  return Dimensions.get('window').width - paddingValue;
-}
-
-function resolveDimensions(objectToResize, style) {
-  const { width, height } = objectToResize;
-
-  if (!width || !height) {
-    return { width, height };
-  }
-
-  const maxWidth = resolveMaxWidth(style);
-  const objectToResizeRatio = height / width;
-  const resolvedWidth = width > maxWidth ? maxWidth : width;
-  const resolvedHeight = Math.round(resolvedWidth * objectToResizeRatio);
-
-  return { width: resolvedWidth, height: resolvedHeight };
-}
+import { resolveMaxWidth } from '../services/Dimensions';
+import { onElement } from '../services/DomVisitors';
+import AttachmentRenderer from './AttachmentRenderer';
+import IframeRenderer from './IframeRenderer';
 
 class SimpleHtml extends PureComponent {
   constructor(props) {
@@ -60,7 +26,7 @@ class SimpleHtml extends PureComponent {
     autoBindReact(this);
   }
 
-  onLinkPress(evt, href) {
+  onLinkPress(_evt, href) {
     const { customHandleLinkPress } = this.props;
 
     return customHandleLinkPress
@@ -68,190 +34,16 @@ class SimpleHtml extends PureComponent {
       : Linking.openURL(href);
   }
 
-  /**
-   * Removes empty (therefore invalid) style attribute properties
-   * Scales down objects with specified width and height if too large
-   * Removes padding and height from suneditor for 'figure' tag that it nests
-   * video iframe tags in when video format is unsupported
-   */
-  alterNode(node) {
-    const { customAlterNode, style } = this.props;
-
-    const styleAttrib = _.get(node, 'attribs.style', '').trim();
-
-    if (customAlterNode && _.isFunction(customAlterNode)) {
-      const resolvedNode = customAlterNode(
-        node,
-        cssObjectToString,
-        cssStringToObject,
-      );
-
-      if (resolvedNode) {
-        return resolvedNode;
-      }
-    }
-
-    if (node.name === 'table') {
-      return tableAlterNode(node);
-    }
-
-    if (node.name === 'figure') {
-      const firstChild = _.head(node.children);
-
-      if (firstChild.name === 'iframe') {
-        const nodeStyle = cssStringToObject(styleAttrib);
-        const source = _.get(firstChild, 'attribs.src', '');
-
-        const resolvedNodeStyle = isValidVideoFormat(source)
-          ? _.omit(nodeStyle, ['height', 'padding-bottom'])
-          : nodeStyle;
-
-        node.attribs.style = cssObjectToString(resolvedNodeStyle);
-
-        return node;
-      }
-    }
-
-    const nodeWidth = node.attribs?.width;
-
-    if (!styleAttrib && !nodeWidth) {
-      return false;
-    }
-
-    const nodeHeight = node.attribus?.height;
-    const nodeDimensions = { width: nodeWidth, height: nodeHeight };
-    const { width, height } = resolveDimensions(nodeDimensions, style);
-
-    const nodeStyle = cssStringToObject(styleAttrib);
-    const invalidKeys = getEmptyObjectKeys(nodeStyle);
-
-    if (invalidKeys.length || nodeWidth) {
-      const styleFiltered = _.omit(style, invalidKeys);
-      node.attribs.style = cssObjectToString(styleFiltered);
-      node.attribs.width = width;
-      node.attribs.height = height;
-
-      return node;
-    }
-
-    return false;
-  }
-
-  /**
-   * Removes child break node in case when it's positioned at the end
-   * of parent div node and div has content in it.
-   * Example:
-   * <div>first line<br></div>
-   * <div>second line<br></div>
-   *
-   * If br is left as is, <Html> will show empty line under div, not just
-   * break into new line
-   */
-  alterChildren(node) {
-    const { children, name } = node;
-
-    if ((name === 'div' || name === 'p') && children && children.length > 1) {
-      const brNodes = _.filter(children, { name: 'br' });
-      const lastBrNode = _.last(brNodes);
-
-      if (lastBrNode && lastBrNode.next === null) {
-        const lastBrNodeIndex = _.indexOf(children, lastBrNode);
-        return children.splice(0, lastBrNodeIndex);
-      }
-    }
-
-    return children;
-  }
-
-  renderUnorderedListPrefix() {
-    const { style } = this.props;
-
-    return <Text style={style.prefix}>• </Text>;
-  }
-
-  renderOrderedListPrefix(
-    htmlAttribs,
-    children,
-    convertedCSSStyles,
-    passProps,
-  ) {
-    const { style } = this.props;
-
-    return <Text style={style.prefix}>{passProps.index + 1}. </Text>;
-  }
-
-  /**
-   * Custom rendered method for handling <attachment> tags
-   * Currently only supports rendering image attachments.
-   */
-  renderAttachments({ id, type }) {
-    const { attachments, style } = this.props;
-
-    if (!attachments) {
-      return null;
-    }
-
-    if (type === 'image') {
-      const image = _.find(attachments, { id });
-
-      if (image && image.src) {
-        const source = { uri: image.src };
-        const imageSize = { width: image.width, height: image.height };
-        const { height, width } = resolveDimensions(imageSize, style);
-        const resolvedStyle = { alignSelf: 'center', height, width };
-
-        return <Image source={source} key={id} style={resolvedStyle} />;
-      }
-    }
-
-    return null;
-  }
-
-  renderIframe(htmlAttribs, children, convertedCSSStyles, passProps) {
-    const { style } = this.props;
-
-    const url = htmlAttribs?.src;
-
-    if (url && !isValidVideoFormat(url)) {
-      const { unsupportedVideoFormatMessage } = this.props;
-
-      const message =
-        unsupportedVideoFormatMessage || 'Unsupported video format.';
-
-      return (
-        <View
-          style={style.fallback}
-          styleName="vertical h-center v-center"
-          key={passProps.key}
-        >
-          <Text>{message}</Text>
-        </View>
-      );
-    }
-
-    if (url && (url.includes('youtube') || url.includes('youtu.be'))) {
-      const youtubeIdRegEx = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-      const regExMatch = url.match(youtubeIdRegEx);
-      const youtubeId =
-        regExMatch && regExMatch[7].length === 11 ? regExMatch[7] : false;
-
-      return (
-        <YoutubePlayer
-          webViewProps={{
-            renderToHardwareTextureAndroid: true,
-          }}
-          height={style.video.height}
-          key={passProps.key}
-          videoId={youtubeId}
-        />
-      );
-    }
-
-    return iframe(htmlAttribs, children, convertedCSSStyles, passProps);
-  }
-
   render() {
-    const { style, body, customTagStyles, ...otherProps } = this.props;
+    const {
+      style,
+      body,
+      customTagStyles,
+      unsupportedVideoFormatMessage,
+      attachments,
+      domVisitors,
+      ...otherProps
+    } = this.props;
 
     const maxWidth = resolveMaxWidth(style);
 
@@ -260,11 +52,6 @@ class SimpleHtml extends PureComponent {
       ...customTagStyles,
     };
 
-    const listPrefixRenderers = {
-      ul: this.renderUnorderedListPrefix,
-      ol: this.renderOrderedListPrefix,
-    };
-
     const tableStyle = _.get(style, 'table', {});
     const tableCssStyle = _.get(style, 'tableCss', '');
     const cssStyle = cssRulesFromSpecs({
@@ -274,24 +61,50 @@ class SimpleHtml extends PureComponent {
     const cssRules = `${cssStyle}${tableCssStyle}`;
 
     const customRenderers = {
-      iframe: this.renderIframe,
-      table: makeTableRenderer({ WebViewComponent: WebView, cssRules }),
-      attachment: this.renderAttachments,
+      iframe: props => (
+        <IframeRenderer
+          {...props}
+          shoutemStyle={style}
+          unsupportedVideoFormatMessage={unsupportedVideoFormatMessage}
+        />
+      ),
+      table,
+      attachment: props => (
+        <AttachmentRenderer
+          {...props}
+          attachments={attachments}
+          style={style}
+        />
+      ),
     };
 
     const htmlProps = {
-      html: body,
-      imagesMaxWidth: maxWidth,
-      staticContentMaxWidth: maxWidth,
-      tagsStyles: tagStyles,
-      baseFontStyle: style.baseFont,
-      ignoredStyles: ['font-family', 'letter-spacing', 'transform'],
-      onLinkPress: this.onLinkPress,
-      alterNode: this.alterNode,
-      alterChildren: this.alterChildren,
-      listsPrefixesRenderers: listPrefixRenderers,
+      source: { html: body },
+      computeEmbeddedMaxWidth: () => maxWidth,
+      contentWidth: maxWidth,
+      tagsStyles: _.omitBy(tagStyles, tagStyle => !tagStyle),
+      systemFonts: [...defaultSystemFonts, style.baseFont.fontFamily],
+      baseStyle: style.baseFont,
+      ignoredStyles: ['fontFamily', 'letterSpacing', 'transform'],
       renderers: customRenderers,
+      renderersProps: {
+        table: {
+          cssRules,
+        },
+        a: { onPress: this.onLinkPress },
+        iframe: {
+          webViewProps: {
+            renderToHardwareTextureAndroid: true,
+          },
+        },
+      },
+      customHTMLElementModels: {
+        table: tableModel,
+        iframe: iframeModel,
+      },
+      WebView,
       ignoredTags: IGNORED_TAGS,
+      domVisitors: { onElement },
     };
 
     return (
@@ -309,6 +122,7 @@ SimpleHtml.propTypes = {
   customAlterNode: PropTypes.func,
   customHandleLinkPress: PropTypes.func,
   customTagStyles: PropTypes.object,
+  domVisitors: PropTypes.object,
   unsupportedVideoFormatMessage: PropTypes.string,
 };
 
@@ -319,6 +133,7 @@ SimpleHtml.defaultProps = {
   customHandleLinkPress: undefined,
   customTagStyles: undefined,
   unsupportedVideoFormatMessage: undefined,
+  domVisitors: { onElement },
 };
 
 export default connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml);

package/html/services/Dimensions.js

@@ -0,0 +1,29 @@
+import { Dimensions } from 'react-native';
+
+export function resolveMaxWidth(style) {
+  // parentContainerPadding - padding between screen & SimpleHtml. Parent container
+  // can have it's own padding. If it does, we have to include it in calculation,
+  // otherwise maxWidth will be more than max & images will go over the edge
+  const parentContainerPadding = style.outerPadding || 0;
+  const paddingValue =
+    style.container.paddingLeft ||
+    0 + style.container.paddingRight ||
+    0 + parentContainerPadding;
+
+  return Dimensions.get('window').width - paddingValue;
+}
+
+export function resolveDimensions(objectToResize, style) {
+  const { width, height } = objectToResize;
+
+  if (!width || !height) {
+    return { width, height };
+  }
+
+  const maxWidth = resolveMaxWidth(style);
+  const objectToResizeRatio = height / width;
+  const resolvedWidth = width > maxWidth ? maxWidth : width;
+  const resolvedHeight = Math.round(resolvedWidth * objectToResizeRatio);
+
+  return { width: resolvedWidth, height: resolvedHeight };
+}

package/html/services/DomVisitors.js

@@ -0,0 +1,34 @@
+import _ from 'lodash';
+
+// Shoutem RTE component wraps any video attachment (hosted inside iframe) with <figure>
+// element. That element contains style that breaks the SimpleHtml UI - enormous blank
+// space below attachment.
+// This function removes height and padding-bottom styles from figure to fix this UI issue.
+export const removeShoutemRteVideoAttachmentWrapper = element => {
+  if (
+    element.name === 'figure' &&
+    element.children.length > 0 &&
+    // <figure> can have multiple generated children too - type:text. Probably caused by empty space between
+    // figure and iframe elements in generated HTML.
+    _.some(element.children, ({ name }) => name === 'iframe')
+  ) {
+    // Remove height and padding-bottom styles because they break the UI
+    element.attribs.style = element.attribs.style
+      ? element.attribs.style
+          .replace(/height:[^;]+;?/, '')
+          .replace(/padding-bottom:[^;]+;?/, '')
+      : '';
+  }
+
+  return element;
+};
+
+/**
+ * Collection of node (HTML element) alteration callbacks. Define any html element
+ * manipulations inside.
+ * @param {*} element - HTML element to check against and manipulate if necessary
+ * @returns Manipulated HTML element
+ */
+export const onElement = element => {
+  return removeShoutemRteVideoAttachmentWrapper(element);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.2.0",
+  "version": "6.3.1-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -16,6 +16,8 @@
     "@shoutem/animation": "~0.15.0",
     "@shoutem/eslint-config-react": "~1.0.6",
     "@shoutem/theme": "~0.13.0",
+    "@native-html/iframe-plugin": "2.6.1",
+    "@native-html/table-plugin": "5.3.1",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
@@ -33,8 +35,7 @@
     "react-native-lightbox-v2": "0.9.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-modal": "13.0.1",
-    "react-native-render-html": "4.2.5",
-    "react-native-render-html-table-bridge": "0.6.0",
+    "react-native-render-html": "6.3.4",
     "react-native-svg": "12.3.0",
     "react-native-svg-transformer": "1.0.0",
     "react-native-toast-message": "2.1.5",
@@ -66,7 +67,7 @@
     "path": "0.12.7",
     "prettier": "1.19.1",
     "react": "17.0.2",
-    "react-dom": "16.9.0",
+    "react-dom": "17.0.2",
     "react-native": "0.68.2",
     "react-test-renderer": "17.0.2"
   },

package/theme.js

@@ -2327,6 +2327,10 @@ export default () => {
         height: responsiveWidth(194),
         paddingBottom: resolveVariable('smallGutter'),
       },
+      // Just enough to display portrait mode Vimeo videos and all Vimeo player controls
+      vimeoVideo: {
+        height: responsiveHeight(220),
+      },
       fallback: {
         width: window.width,
         height: 40,