@digidem/wcmc-mapeo-mobile-intro/lib/module/Markdown.js

Intro screens for Mapeo Mobile for the WCMC ICCA registration app

/* Copyright (C) 2018-2019 The Manyverse Authors.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { createElement } from 'react';
import { View, Text, StyleSheet, Platform, Linking } from 'react-native';

const remark = require('remark');

const ReactMarkdown = require('react-markdown');

const normalizeForReactNative = require('mdast-normalize-react-native');

const $ = createElement;
const textProps = {
  selectable: true,
  textBreakStrategy: 'simple'
}; // Fix for remark

process.cwd = () => '/';

const BASE_TEXT_SIZE = 15;
const LIST_INDENT = 16;
const styles = StyleSheet.create({
  paragraph: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    marginVertical: 7
  },
  paragraphText: {
    flexWrap: 'wrap',
    overflow: 'visible',
    color: '#212529'
  },
  text: {
    fontSize: BASE_TEXT_SIZE,
    lineHeight: BASE_TEXT_SIZE * 1.4
  },
  listItemText: {
    color: '#212529',
    flex: 1
  },
  heading1: {
    fontWeight: 'bold',
    marginVertical: 10,
    fontSize: BASE_TEXT_SIZE * 1.125 * 1.125,
    color: '#212529'
  },
  heading2: {
    fontWeight: 'bold',
    marginVertical: 10,
    fontSize: BASE_TEXT_SIZE * 1.125,
    color: '#212529'
  },
  heading3: {
    fontWeight: 'bold',
    marginVertical: 7,
    fontSize: BASE_TEXT_SIZE,
    color: '#212529'
  },
  heading4: {
    fontWeight: 'bold',
    fontSize: BASE_TEXT_SIZE * 1.125,
    color: '#212529'
  },
  heading5: {
    fontWeight: 'bold',
    fontSize: BASE_TEXT_SIZE * 1.125 * 1.125,
    color: '#212529'
  },
  heading6: {
    fontWeight: 'bold',
    fontSize: BASE_TEXT_SIZE * 1.125 * 1.125 * 1.125,
    color: '#212529'
  },
  em: {
    fontStyle: 'italic'
  },
  strong: {
    fontWeight: 'bold'
  },
  link: {
    textDecorationLine: 'underline'
  },
  inlineCode: {
    backgroundColor: '#f1f3f5',
    color: '#495057',
    paddingLeft: 4,
    paddingRight: 4,
    borderRadius: 2,
    fontFamily: Platform.select({
      ios: 'Courier New',
      default: 'monospace'
    })
  },
  strikethrough: {
    textDecorationLine: 'line-through'
  },
  blockquote: {
    backgroundColor: '#f1f3f5',
    borderLeftWidth: 3,
    borderLeftColor: '#adb5bd',
    paddingLeft: 7,
    paddingRight: 1
  },
  codeBlock: {
    backgroundColor: '#f1f3f5',
    marginVertical: 2,
    paddingVertical: 3,
    paddingHorizontal: 5,
    borderRadius: 2
  },
  codeText: {
    color: '#495057',
    fontSize: BASE_TEXT_SIZE / 1.125,
    fontWeight: 'normal',
    fontFamily: Platform.select({
      ios: 'Courier New',
      default: 'monospace'
    })
  },
  horizontalLine: {
    backgroundColor: '#dee2e6',
    height: 2,
    marginTop: 7,
    marginBottom: 7
  },
  orderedBullet: {
    fontWeight: 'normal',
    width: BASE_TEXT_SIZE * 1.5
  }
});
const renderers = {
  root: props => $(View, null, props.children),
  paragraph: props => $(View, {
    style: styles.paragraph
  }, $(Text, { ...textProps,
    style: styles.paragraphText
  }, props.children)),
  text: props => $(Text, { ...textProps,
    style: styles.text
  }, props.children.split('\n').join(' ')),
  heading: props => $(Text, { ...textProps,
    style: styles['heading' + props.level]
  }, props.children),
  emphasis: props => $(Text, { ...textProps,
    style: styles.em
  }, props.children),
  strong: props => $(Text, { ...textProps,
    style: styles.strong
  }, props.children),
  link: props => {
    return $(Text, { ...textProps,
      style: styles.link,
      onPress: () => Linking.openURL(props.href)
    }, props.children);
  },
  inlineCode: props => $(Text, { ...textProps,
    style: styles.inlineCode
  }, props.children),
  delete: props => $(Text, { ...textProps,
    style: styles.strikethrough
  }, props.children),
  blockquote: props => $(View, {
    style: styles.blockquote
  }, props.children),
  code: props => $(View, {
    style: styles.codeBlock
  }, $(Text, { ...textProps,
    style: styles.codeText
  }, props.value)),
  thematicBreak: () => $(View, {
    style: styles.horizontalLine
  }),
  list: props => $(View, {
    style: {
      paddingLeft: LIST_INDENT * props.depth + 5
    }
  }, props.children),
  listItem: props => {
    return $(View, {
      style: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        marginBottom: 5
      }
    }, [props.ordered ? $(Text, {
      style: [styles.text, styles.orderedBullet],
      key: 0
    }, `${props.index + 1}.`) : $(Text, null, '\u2022 '), $(Text, { ...textProps,
      style: styles.listItemText,
      key: 1
    }, props.children)]);
  }
};

function Markdown(markdownText) {
  return $(ReactMarkdown, {
    source: remark().processSync(markdownText).contents,
    astPlugins: [normalizeForReactNative()],
    allowedTypes: Object.keys(renderers),
    renderers
  });
}

export default Markdown;
//# sourceMappingURL=Markdown.js.map