Merge branch 'master' into toc
This commit is contained in:
Tom Moor
GitHub
@@ -24,7 +24,7 @@ type Props = {
|
||||
onCancel: Function,
|
||||
onImageUploadStart: Function,
|
||||
onImageUploadStop: Function,
|
||||
emoji: string,
|
||||
emoji?: string,
|
||||
readOnly: boolean,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
// @flow
|
||||
import styled from 'styled-components';
|
||||
|
||||
const HtmlContent = styled.div`
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
:global {
|
||||
.anchor {
|
||||
visibility: hidden;
|
||||
color: ;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:global {
|
||||
.anchor {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
border-left: 2px solid $lightGray;
|
||||
padding-left: 0.8em;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead, tbody {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
border-bottom: 2px solid $lightGray;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid $lightGray;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #fff;
|
||||
|
||||
// &:nth-child(2n) {
|
||||
// background-color: #f8f8f8;
|
||||
// }
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
border: 1px 0 solid $lightGray;
|
||||
padding: 5px 20px 5px 0;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default HtmlContent;
|
||||
@@ -1,3 +0,0 @@
|
||||
// @flow
|
||||
import HtmlContent from './HtmlContent';
|
||||
export default HtmlContent;
|
||||
@@ -16,7 +16,7 @@ const activeStyle = {
|
||||
const StyleableDiv = props => <div {...props} />;
|
||||
|
||||
const styleComponent = component => styled(component)`
|
||||
display: block;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -42,7 +42,7 @@ function SidebarLink(props: Object) {
|
||||
<Flex>
|
||||
<Component exact activeStyle={activeStyle} {...props}>
|
||||
{props.hasChildren && <StyledChevron expanded={props.expanded} />}
|
||||
{props.children}
|
||||
<Content>{props.children}</Content>
|
||||
</Component>
|
||||
</Flex>
|
||||
);
|
||||
@@ -62,4 +62,8 @@ const StyledChevron = styled(ChevronIcon)`
|
||||
}
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export default SidebarLink;
|
||||
|
||||
@@ -73,6 +73,15 @@ const Auth = ({ children }: AuthProps) => {
|
||||
}),
|
||||
};
|
||||
|
||||
if (window.Bugsnag) {
|
||||
Bugsnag.user = {
|
||||
id: user.id,
|
||||
name: user.name,
|
||||
teamId: team.id,
|
||||
team: team.name,
|
||||
};
|
||||
}
|
||||
|
||||
authenticatedStores.collections.fetchAll();
|
||||
}
|
||||
|
||||
|
||||
@@ -2,30 +2,31 @@
|
||||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import CenteredContent from 'components/CenteredContent';
|
||||
import HtmlContent from 'components/HtmlContent';
|
||||
import Editor from 'components/Editor';
|
||||
import PageTitle from 'components/PageTitle';
|
||||
|
||||
import { convertToMarkdown } from 'utils/markdown';
|
||||
|
||||
type Props = {
|
||||
title: string,
|
||||
content: string,
|
||||
};
|
||||
|
||||
@observer class Flatpage extends React.Component {
|
||||
props: Props;
|
||||
const Flatpage = observer((props: Props) => {
|
||||
const { title, content } = props;
|
||||
|
||||
render() {
|
||||
const { title, content } = this.props;
|
||||
const htmlContent = convertToMarkdown(content);
|
||||
|
||||
return (
|
||||
<CenteredContent>
|
||||
<PageTitle title={title} />
|
||||
<HtmlContent dangerouslySetInnerHTML={{ __html: htmlContent }} />
|
||||
</CenteredContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<CenteredContent>
|
||||
<PageTitle title={title} />
|
||||
<Editor
|
||||
text={content}
|
||||
onChange={() => {}}
|
||||
onSave={() => {}}
|
||||
onCancel={() => {}}
|
||||
onImageUploadStart={() => {}}
|
||||
onImageUploadStop={() => {}}
|
||||
readOnly
|
||||
/>
|
||||
</CenteredContent>
|
||||
);
|
||||
});
|
||||
|
||||
export default Flatpage;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,16 +0,0 @@
|
||||
// @flow
|
||||
import emojiMapping from './emoji-mapping.json';
|
||||
|
||||
const EMOJI_REGEX = /:([A-Za-z0-9_\-+]+?):/gm;
|
||||
|
||||
const emojify = (text: string = '') => {
|
||||
let emojifiedText = text;
|
||||
|
||||
emojifiedText = text.replace(EMOJI_REGEX, (match, p1, offset, string) => {
|
||||
return emojiMapping[p1] || match;
|
||||
});
|
||||
|
||||
return emojifiedText;
|
||||
};
|
||||
|
||||
export default emojify;
|
||||
@@ -1,53 +0,0 @@
|
||||
// @flow
|
||||
import slug from 'slug';
|
||||
import marked from 'marked';
|
||||
import sanitizedRenderer from 'marked-sanitized';
|
||||
import highlight from 'highlight.js';
|
||||
import _ from 'lodash';
|
||||
import emojify from './emojify';
|
||||
import toc from './toc';
|
||||
|
||||
// $FlowIssue invalid flow-typed
|
||||
slug.defaults.mode = 'rfc3986';
|
||||
|
||||
const Renderer = sanitizedRenderer(marked.Renderer);
|
||||
const renderer = new Renderer();
|
||||
renderer.code = (code, language) => {
|
||||
const validLang = !!(language && highlight.getLanguage(language));
|
||||
const highlighted = validLang
|
||||
? highlight.highlight(language, code).value
|
||||
: _.escape(code);
|
||||
return `<pre><code class="hljs ${_.escape(language)}">${highlighted}</code></pre>`;
|
||||
};
|
||||
renderer.heading = (text, level) => {
|
||||
const headingSlug = _.escape(slug(text));
|
||||
return `
|
||||
<h${level}>
|
||||
${text}
|
||||
<a name="${headingSlug}" class="anchor" href="#${headingSlug}">#</a>
|
||||
</h${level}>
|
||||
`;
|
||||
};
|
||||
|
||||
const convertToMarkdown = (text: string) => {
|
||||
// Add TOC
|
||||
text = toc.insert(text || '', {
|
||||
slugify: heading => {
|
||||
// FIXME: E.g. `&` gets messed up
|
||||
const headingSlug = _.escape(slug(heading));
|
||||
return headingSlug;
|
||||
},
|
||||
});
|
||||
|
||||
return marked.parse(emojify(text), {
|
||||
renderer,
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: false,
|
||||
pedantic: false,
|
||||
smartLists: true,
|
||||
smartypants: true,
|
||||
});
|
||||
};
|
||||
|
||||
export { convertToMarkdown };
|
||||
@@ -1,148 +0,0 @@
|
||||
// @flow
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* marked-toc <https://github.com/jonschlinkert/marked-toc>
|
||||
*
|
||||
* Copyright (c) 2014 Jon Schlinkert, contributors.
|
||||
* Licensed under the MIT license.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var marked = require('marked');
|
||||
var _ = require('lodash');
|
||||
var utils = require('./utils');
|
||||
|
||||
/**
|
||||
* Expose `toc`
|
||||
*/
|
||||
|
||||
module.exports = toc;
|
||||
|
||||
/**
|
||||
* Default template to use for generating
|
||||
* a table of contents.
|
||||
*/
|
||||
|
||||
var defaultTemplate =
|
||||
'<%= depth %><%= bullet %>[<%= heading %>](#<%= url %>)\n';
|
||||
|
||||
/**
|
||||
* Create the table of contents object that
|
||||
* will be used as context for the template.
|
||||
*
|
||||
* @param {String} `str`
|
||||
* @param {Object} `options`
|
||||
* @return {Object}
|
||||
*/
|
||||
|
||||
function generate(str, options) {
|
||||
var opts = _.extend(
|
||||
{
|
||||
firsth1: false,
|
||||
blacklist: true,
|
||||
omit: [],
|
||||
maxDepth: 3,
|
||||
slugify: function(text) {
|
||||
return text; // Override this!
|
||||
},
|
||||
},
|
||||
options
|
||||
);
|
||||
|
||||
var toc = '';
|
||||
// $FlowIssue invalid flow-typed
|
||||
var tokens = marked.lexer(str);
|
||||
var tocArray = [];
|
||||
|
||||
// Remove the very first h1, true by default
|
||||
if (opts.firsth1 === false) {
|
||||
tokens.shift();
|
||||
}
|
||||
|
||||
// Do any h1's still exist?
|
||||
var h1 = _.some(tokens, { depth: 1 });
|
||||
|
||||
tokens
|
||||
.filter(function(token) {
|
||||
// Filter out everything but headings
|
||||
if (token.type !== 'heading' || token.type === 'code') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Since we removed the first h1, we'll check to see if other h1's
|
||||
// exist. If none exist, then we unindent the rest of the TOC
|
||||
if (!h1) {
|
||||
token.depth = token.depth - 1;
|
||||
}
|
||||
|
||||
// Store original text and create an id for linking
|
||||
token.heading = opts.strip ? utils.strip(token.text, opts) : token.text;
|
||||
|
||||
// Create a "slugified" id for linking
|
||||
token.id = opts.slugify(token.text);
|
||||
|
||||
// Omit headings with these strings
|
||||
var omissions = ['Table of Contents', 'TOC', 'TABLE OF CONTENTS'];
|
||||
var omit = _.union([], opts.omit, omissions);
|
||||
|
||||
if (utils.isMatch(omit, token.heading)) {
|
||||
return;
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
.forEach(function(h) {
|
||||
if (h.depth > opts.maxDepth) {
|
||||
return;
|
||||
}
|
||||
|
||||
var bullet = Array.isArray(opts.bullet)
|
||||
? opts.bullet[(h.depth - 1) % opts.bullet.length]
|
||||
: opts.bullet;
|
||||
|
||||
var data = _.extend({}, opts.data, {
|
||||
depth: new Array((h.depth - 1) * 2 + 1).join(' '),
|
||||
bullet: bullet ? bullet : '* ',
|
||||
heading: h.heading,
|
||||
url: h.id,
|
||||
});
|
||||
|
||||
tocArray.push(data);
|
||||
toc += _.template(opts.template || defaultTemplate)(data);
|
||||
});
|
||||
|
||||
return {
|
||||
data: tocArray,
|
||||
toc: opts.strip ? utils.strip(toc, opts) : toc,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* toc
|
||||
*/
|
||||
|
||||
function toc(str: string, options: Object) {
|
||||
return generate(str, options).toc;
|
||||
}
|
||||
|
||||
toc.raw = function(str, options) {
|
||||
return generate(str, options);
|
||||
};
|
||||
|
||||
toc.insert = function(content, options) {
|
||||
var start = '<!-- toc -->';
|
||||
var stop = '<!-- tocstop -->';
|
||||
var re = /<!-- toc -->([\s\S]+?)<!-- tocstop -->/;
|
||||
|
||||
// remove the existing TOC
|
||||
content = content.replace(re, start);
|
||||
|
||||
// generate new TOC
|
||||
var newtoc =
|
||||
'\n\n' + start + '\n\n' + toc(content, options) + '\n' + stop + '\n';
|
||||
|
||||
// If front-matter existed, put it back
|
||||
return content.replace(start, newtoc);
|
||||
};
|
||||
@@ -1,83 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/*!
|
||||
* marked-toc <https://github.com/jonschlinkert/marked-toc>
|
||||
*
|
||||
* Copyright (c) 2014 Jon Schlinkert, contributors.
|
||||
* Licensed under the MIT license.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var _ = require('lodash');
|
||||
var utils = (module.exports = {});
|
||||
|
||||
utils.arrayify = function(arr) {
|
||||
return !Array.isArray(arr) ? [arr] : arr;
|
||||
};
|
||||
|
||||
utils.escapeRegex = function(re) {
|
||||
return re.replace(/(\[|\]|\(|\)|\/|\.|\^|\$|\*|\+|\?)/g, '\\$1');
|
||||
};
|
||||
|
||||
utils.isDest = function(dest) {
|
||||
return !dest || dest === 'undefined' || typeof dest === 'object';
|
||||
};
|
||||
|
||||
utils.isMatch = function(keys, str) {
|
||||
keys = utils.arrayify(keys);
|
||||
keys = keys.length > 0 ? keys.join('|') : '.*';
|
||||
|
||||
// Escape certain characters, like '[', '('
|
||||
var k = utils.escapeRegex(String(keys));
|
||||
|
||||
// Build up the regex to use for replacement patterns
|
||||
var re = new RegExp('(?:' + k + ')', 'g');
|
||||
if (String(str).match(re)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
utils.sanitize = function(src) {
|
||||
src = src.replace(/(\s*\[!|(?:\[.+ →\]\()).+/g, '');
|
||||
src = src.replace(/\s*\*\s*\[\].+/g, '');
|
||||
return src;
|
||||
};
|
||||
|
||||
utils.slugify = function(str) {
|
||||
str = str.replace(/\/\//g, '-');
|
||||
str = str.replace(/\//g, '-');
|
||||
str = str.replace(/\./g, '-');
|
||||
str = _.str.slugify(str);
|
||||
str = str.replace(/^-/, '');
|
||||
str = str.replace(/-$/, '');
|
||||
return str;
|
||||
};
|
||||
|
||||
/**
|
||||
* Strip certain words from headings. These can be
|
||||
* overridden. Might seem strange but it makes
|
||||
* sense in context.
|
||||
*/
|
||||
|
||||
var omit = [
|
||||
'grunt',
|
||||
'helper',
|
||||
'handlebars-helper',
|
||||
'mixin',
|
||||
'filter',
|
||||
'assemble-contrib',
|
||||
'assemble',
|
||||
];
|
||||
|
||||
utils.strip = function(name, options) {
|
||||
var opts = _.extend({}, options);
|
||||
if (opts.omit === false) {
|
||||
omit = [];
|
||||
}
|
||||
var exclusions = _.union(omit, utils.arrayify(opts.strip || []));
|
||||
var re = new RegExp('^(?:' + exclusions.join('|') + ')[-_]?', 'g');
|
||||
return name.replace(re, '');
|
||||
};
|
||||
Reference in New Issue
Block a user