From 39e1d32c669545ccc30e0d424323c6a01317c4be Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 5 Apr 2020 12:56:41 +0300
Subject: refactor: move some logic to InlineSyntax.tsx

---
 src/lib/Markdown/Paragraph.tsx | 100 ++---------------------------------------
 1 file changed, 4 insertions(+), 96 deletions(-)

(limited to 'src/lib/Markdown/Paragraph.tsx')

diff --git a/src/lib/Markdown/Paragraph.tsx b/src/lib/Markdown/Paragraph.tsx
index 19f8382..f46199e 100644
--- a/src/lib/Markdown/Paragraph.tsx
+++ b/src/lib/Markdown/Paragraph.tsx
@@ -1,101 +1,9 @@
 import React from 'react';
-import { Link } from '@material-ui/core';
-import axios from 'axios';
+import { InlineParserPropTypes } from './types';
+import InlineSyntax, { splitter } from './InlineSyntax';
 
-interface PropTypes {
-  data: string;
-}
-
-interface Emoji {
-  name: string;
-  char: string;
-}
-
-type InlineRuleName = 'bold' | 'italic' | 'code' | 'strikeThrough' | 'emoji';
-
-interface InlineRuleProperties {
-  enclosure: string;
-  style: React.CSSProperties;
-  pattern?: RegExp;
-}
-
-const inlineRules: Record<InlineRuleName, InlineRuleProperties>= {
-  // Order matters - lowest property has highest priority
-  strikeThrough: {
-    enclosure: '~~',
-    style: { textDecoration: 'line-through' },
-  },
-  code: {
-    enclosure: '`',
-    style: { background: '#444444', padding: '4px' },
-  },
-  italic: {
-    enclosure: '\\*',
-    style: { fontStyle: 'italic' },
-  },
-  bold: {
-    enclosure: '\\*\\*',
-    style: { fontWeight: 'bold' },
-  },
-  emoji: {
-    enclosure: ':',
-    style: {},
-  }
-};
-
-const inlineRuleNames = Object.keys(inlineRules) as InlineRuleName[];
-
-const captureInline = (enclosure: string): RegExp => {
-  return new RegExp(enclosure + '([^' + enclosure + ']+)' + enclosure);
-}
-const captureInlineSplit = (enclosure: string): string => {
-  return '(' + enclosure + '[^' + enclosure + ']+' + enclosure + ')';
-}
-const concealRegex = /!?\[(.+?)\]\((.+?)\)/;
-const concealRegexSplit = /(!?\[.+?\]\(.+?\))/g;
-const rawLinkRegex = /((?:(?:[A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)(?:(?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/;
-
-const ruleSplitPatterns: string[] = [concealRegexSplit.source, rawLinkRegex.source];
-inlineRuleNames.forEach(name => {
-  const enclosure = inlineRules[name].enclosure;
-  inlineRules[name].pattern = captureInline(enclosure);
-  ruleSplitPatterns.push(captureInlineSplit(enclosure));
-});
-
-const splitter = new RegExp(ruleSplitPatterns.join('|'));
-
-const emojiList: Emoji[] = [];
-axios.get('https://unpkg.com/emojilib@2.4.0/emojis.json').then(response => {
-  Object.keys(response.data).forEach(name => emojiList.push({ name, char: response.data[name].char }));
-});
-
-const SyntaxSpan: React.FC<PropTypes> = ({ data }) => {
-  if (!data) return null;
-
-  const conceal = concealRegex.exec(data);
-  if (conceal) {
-    if (data[0] === '!') return <img src={conceal[2]} alt={conceal[1]} style={{ maxWidth: '100%', maxHeight: '100%' }} />;
-    return <Link href={conceal[2]}>{conceal[1]}</Link>;
-  }
-
-  if (data.match(rawLinkRegex)) return <Link href={data}>{data}</Link>;
-
-  let span = <>{data}</>;
-  inlineRuleNames.forEach(name => {
-    const rule = inlineRules[name];
-    const match = data.match(rule.pattern || '');
-    if (match) {
-      if (name === 'emoji') {
-        const emoji = emojiList.find(emoji => emoji.name === match[1]);
-        span = <span>{emoji ? emoji.char : ''}</span>;
-      } else span = <span style={rule.style}>{match[1]}</span>;
-    }
-  });
-  return span;
-}
-
-const Paragraph: React.FC<PropTypes> = ({ data }) => {
-  const result = data.split(splitter).map(span => <SyntaxSpan data={span} />);
+const Paragraph: React.FC<InlineParserPropTypes> = ({ line }) => {
+  const result = line.split(splitter).map(span => <InlineSyntax line={span} />);
   return <p> {result} </p>;
 }
 
-- 
cgit v1.2.3