add unified config module
This commit is contained in:
parent
09e631ded7
commit
e0ca24c6d3
@ -9,8 +9,8 @@ import ListControl from './Widgets/ListControl';
|
|||||||
import ListPreview from './Widgets/ListPreview';
|
import ListPreview from './Widgets/ListPreview';
|
||||||
import TextControl from './Widgets/TextControl';
|
import TextControl from './Widgets/TextControl';
|
||||||
import TextPreview from './Widgets/TextPreview';
|
import TextPreview from './Widgets/TextPreview';
|
||||||
import MarkdownControl from './Widgets/MarkdownControl';
|
import MarkdownControl from './Widgets/Markdown/MarkdownControl';
|
||||||
import MarkdownPreview from './Widgets/MarkdownPreview';
|
import MarkdownPreview from './Widgets/Markdown/MarkdownPreview';
|
||||||
import ImageControl from './Widgets/ImageControl';
|
import ImageControl from './Widgets/ImageControl';
|
||||||
import ImagePreview from './Widgets/ImagePreview';
|
import ImagePreview from './Widgets/ImagePreview';
|
||||||
import FileControl from './Widgets/FileControl';
|
import FileControl from './Widgets/FileControl';
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
@import "../../../UI/theme";
|
@import "../../../../UI/theme";
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
position: relative;
|
position: relative;
|
@ -10,10 +10,16 @@ import rehypeSanitize from 'rehype-sanitize';
|
|||||||
import rehypeReparse from 'rehype-raw';
|
import rehypeReparse from 'rehype-raw';
|
||||||
import CaretPosition from 'textarea-caret-position';
|
import CaretPosition from 'textarea-caret-position';
|
||||||
import TextareaAutosize from 'react-textarea-autosize';
|
import TextareaAutosize from 'react-textarea-autosize';
|
||||||
import registry from '../../../../lib/registry';
|
import registry from '../../../../../lib/registry';
|
||||||
import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
|
import {
|
||||||
|
remarkParseConfig,
|
||||||
|
remarkStringifyConfig,
|
||||||
|
rehypeParseConfig,
|
||||||
|
rehypeStringifyConfig,
|
||||||
|
} from '../../unifiedConfig';
|
||||||
|
import { createAssetProxy } from '../../../../../valueObjects/AssetProxy';
|
||||||
import Toolbar from '../Toolbar/Toolbar';
|
import Toolbar from '../Toolbar/Toolbar';
|
||||||
import { Sticky } from '../../../UI/Sticky/Sticky';
|
import { Sticky } from '../../../../UI/Sticky/Sticky';
|
||||||
import styles from './index.css';
|
import styles from './index.css';
|
||||||
|
|
||||||
const HAS_LINE_BREAK = /\n/m;
|
const HAS_LINE_BREAK = /\n/m;
|
||||||
@ -30,11 +36,11 @@ function processUrl(url) {
|
|||||||
|
|
||||||
function cleanupPaste(paste) {
|
function cleanupPaste(paste) {
|
||||||
return unified()
|
return unified()
|
||||||
.use(htmlToRehype, { fragment: true })
|
.use(htmlToRehype, rehypeParseConfig)
|
||||||
.use(rehypeSanitize)
|
.use(rehypeSanitize)
|
||||||
.use(rehypeReparse)
|
.use(rehypeReparse)
|
||||||
.use(rehypeToRemark)
|
.use(rehypeToRemark)
|
||||||
.use(remarkToMarkdown)
|
.use(remarkToMarkdown, remarkStringifyConfig)
|
||||||
.process(paste);
|
.process(paste);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,9 +97,9 @@ export default class RawEditor extends React.Component {
|
|||||||
this.updateHeight();
|
this.updateHeight();
|
||||||
this.element.addEventListener('paste', this.handlePaste, false);
|
this.element.addEventListener('paste', this.handlePaste, false);
|
||||||
const markdown = unified()
|
const markdown = unified()
|
||||||
.use(htmlToRehype)
|
.use(htmlToRehype, rehypeParseConfig)
|
||||||
.use(rehypeToRemark)
|
.use(rehypeToRemark)
|
||||||
.use(remarkToMarkdown)
|
.use(remarkToMarkdown, remarkStringifyConfig)
|
||||||
.processSync(this.state.value)
|
.processSync(this.state.value)
|
||||||
.contents;
|
.contents;
|
||||||
this.setState({ value: markdown });
|
this.setState({ value: markdown });
|
||||||
@ -250,9 +256,9 @@ export default class RawEditor extends React.Component {
|
|||||||
|
|
||||||
handleChange = (e) => {
|
handleChange = (e) => {
|
||||||
const html = unified()
|
const html = unified()
|
||||||
.use(markdownToRemark)
|
.use(markdownToRemark, remarkParseConfig)
|
||||||
.use(remarkToRehype)
|
.use(remarkToRehype)
|
||||||
.use(rehypeToHtml)
|
.use(rehypeToHtml, rehypeStringifyConfig)
|
||||||
.processSync(e.target.value)
|
.processSync(e.target.value)
|
||||||
.contents;
|
.contents;
|
||||||
this.props.onChange(html);
|
this.props.onChange(html);
|
@ -1,4 +1,4 @@
|
|||||||
@import "../../../UI/theme";
|
@import "../../../../UI/theme";
|
||||||
|
|
||||||
.Toolbar {
|
.Toolbar {
|
||||||
composes: clearfix;
|
composes: clearfix;
|
@ -5,7 +5,7 @@ import Switch from 'react-toolbox/lib/switch';
|
|||||||
import ToolbarButton from './ToolbarButton';
|
import ToolbarButton from './ToolbarButton';
|
||||||
import ToolbarComponentsMenu from './ToolbarComponentsMenu';
|
import ToolbarComponentsMenu from './ToolbarComponentsMenu';
|
||||||
import ToolbarPluginForm from './ToolbarPluginForm';
|
import ToolbarPluginForm from './ToolbarPluginForm';
|
||||||
import { Icon } from '../../../UI';
|
import { Icon } from '../../../../UI';
|
||||||
import styles from './Toolbar.css';
|
import styles from './Toolbar.css';
|
||||||
|
|
||||||
export default class Toolbar extends React.Component {
|
export default class Toolbar extends React.Component {
|
@ -1,4 +1,4 @@
|
|||||||
@import "../../../UI/theme";
|
@import "../../../../UI/theme";
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
@ -1,6 +1,6 @@
|
|||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { Icon } from '../../../UI';
|
import { Icon } from '../../../../UI';
|
||||||
import styles from './ToolbarButton.css';
|
import styles from './ToolbarButton.css';
|
||||||
|
|
||||||
const ToolbarButton = ({ label, icon, action, active }) => (
|
const ToolbarButton = ({ label, icon, action, active }) => (
|
@ -1,4 +1,4 @@
|
|||||||
@import "../../../UI/theme";
|
@import "../../../../UI/theme";
|
||||||
|
|
||||||
.pluginForm {
|
.pluginForm {
|
||||||
position: absolute;
|
position: absolute;
|
@ -0,0 +1,7 @@
|
|||||||
|
.control {
|
||||||
|
composes: control from "../../../../ControlPanel/ControlPane.css"
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
composes: label from "../../../../ControlPanel/ControlPane.css";
|
||||||
|
}
|
@ -1,5 +1,5 @@
|
|||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import { resolveWidget } from '../../../Widgets';
|
import { resolveWidget } from '../../../../Widgets';
|
||||||
import styles from './ToolbarPluginFormControl.css';
|
import styles from './ToolbarPluginFormControl.css';
|
||||||
|
|
||||||
const ToolbarPluginFormControl = ({
|
const ToolbarPluginFormControl = ({
|
@ -1,4 +1,4 @@
|
|||||||
@import "../../../UI/theme";
|
@import "../../../../UI/theme";
|
||||||
|
|
||||||
.editorControlBar {
|
.editorControlBar {
|
||||||
z-index: 1;
|
z-index: 1;
|
@ -8,12 +8,18 @@ import rehypeToHtml from 'rehype-stringify';
|
|||||||
import remarkToMarkdown from 'remark-stringify';
|
import remarkToMarkdown from 'remark-stringify';
|
||||||
import htmlToRehype from 'rehype-parse';
|
import htmlToRehype from 'rehype-parse';
|
||||||
import rehypeToRemark from 'rehype-remark';
|
import rehypeToRemark from 'rehype-remark';
|
||||||
import registry from '../../../../lib/registry';
|
import registry from '../../../../../lib/registry';
|
||||||
import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
|
import { createAssetProxy } from '../../../../../valueObjects/AssetProxy';
|
||||||
|
import {
|
||||||
|
remarkParseConfig,
|
||||||
|
remarkStringifyConfig,
|
||||||
|
rehypeParseConfig,
|
||||||
|
rehypeStringifyConfig,
|
||||||
|
} from '../../unifiedConfig';
|
||||||
import { buildKeymap } from './keymap';
|
import { buildKeymap } from './keymap';
|
||||||
import createMarkdownParser from './parser';
|
import createMarkdownParser from './parser';
|
||||||
import Toolbar from '../Toolbar/Toolbar';
|
import Toolbar from '../Toolbar/Toolbar';
|
||||||
import { Sticky } from '../../../UI/Sticky/Sticky';
|
import { Sticky } from '../../../../UI/Sticky/Sticky';
|
||||||
import styles from './index.css';
|
import styles from './index.css';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -24,16 +30,16 @@ import styles from './index.css';
|
|||||||
*/
|
*/
|
||||||
registry.registerWidgetValueSerializer('markdown', {
|
registry.registerWidgetValueSerializer('markdown', {
|
||||||
serialize: value => unified()
|
serialize: value => unified()
|
||||||
.use(htmlToRehype)
|
.use(htmlToRehype, rehypeParseConfig)
|
||||||
.use(htmlToRehype)
|
.use(htmlToRehype)
|
||||||
.use(rehypeToRemark)
|
.use(rehypeToRemark)
|
||||||
.use(remarkToMarkdown)
|
.use(remarkToMarkdown, remarkStringifyConfig)
|
||||||
.processSync(value)
|
.processSync(value)
|
||||||
.contents,
|
.contents,
|
||||||
deserialize: value => unified()
|
deserialize: value => unified()
|
||||||
.use(markdownToRemark)
|
.use(markdownToRemark, remarkParseConfig)
|
||||||
.use(remarkToRehype)
|
.use(remarkToRehype)
|
||||||
.use(rehypeToHtml)
|
.use(rehypeToHtml, rehypeStringifyConfig)
|
||||||
.processSync(value)
|
.processSync(value)
|
||||||
.contents
|
.contents
|
||||||
});
|
});
|
@ -1,8 +1,8 @@
|
|||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import registry from '../../../lib/registry';
|
import registry from '../../../../lib/registry';
|
||||||
import RawEditor from './RawEditor';
|
import RawEditor from './RawEditor';
|
||||||
import VisualEditor from './VisualEditor';
|
import VisualEditor from './VisualEditor';
|
||||||
import { StickyContainer } from '../../UI/Sticky/Sticky';
|
import { StickyContainer } from '../../../UI/Sticky/Sticky';
|
||||||
|
|
||||||
const MODE_STORAGE_KEY = 'cms.md-mode';
|
const MODE_STORAGE_KEY = 'cms.md-mode';
|
||||||
|
|
@ -5,7 +5,7 @@ import isString from 'lodash/isString';
|
|||||||
import isEmpty from 'lodash/isEmpty';
|
import isEmpty from 'lodash/isEmpty';
|
||||||
import unified from 'unified';
|
import unified from 'unified';
|
||||||
import htmlToRehype from 'rehype-parse';
|
import htmlToRehype from 'rehype-parse';
|
||||||
import registry from "../../../lib/registry";
|
import registry from "../../../../lib/registry";
|
||||||
|
|
||||||
const cmsPluginRehype = ({ getAsset }) => {
|
const cmsPluginRehype = ({ getAsset }) => {
|
||||||
|
|
@ -5,7 +5,7 @@ import remarkToRehype from 'remark-rehype';
|
|||||||
import htmlToRehype from 'rehype-parse';
|
import htmlToRehype from 'rehype-parse';
|
||||||
import rehypeToReact from 'rehype-react';
|
import rehypeToReact from 'rehype-react';
|
||||||
import cmsPluginToRehype from './cmsPluginRehype';
|
import cmsPluginToRehype from './cmsPluginRehype';
|
||||||
import previewStyle from '../defaultPreviewStyle';
|
import previewStyle from '../../defaultPreviewStyle';
|
||||||
|
|
||||||
const MarkdownPreview = ({ value, getAsset }) => {
|
const MarkdownPreview = ({ value, getAsset }) => {
|
||||||
return value === null ? null : <div style={previewStyle} dangerouslySetInnerHTML={{__html: value}}></div>;
|
return value === null ? null : <div style={previewStyle} dangerouslySetInnerHTML={{__html: value}}></div>;
|
4
src/components/Widgets/Markdown/unifiedConfig.js
Normal file
4
src/components/Widgets/Markdown/unifiedConfig.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export const remarkParseConfig = { pedantic: true, footnotes: true, fences: true };
|
||||||
|
export const remarkStringifyConfig = { pedantic: true, fences: true };
|
||||||
|
export const rehypeParseConfig = { fragment: true };
|
||||||
|
export const rehypeStringifyConfig = {};
|
@ -1,7 +0,0 @@
|
|||||||
.control {
|
|
||||||
composes: control from "../../../ControlPanel/ControlPane.css"
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
composes: label from "../../../ControlPanel/ControlPane.css";
|
|
||||||
}
|
|
@ -1,5 +1,5 @@
|
|||||||
import { Map } from 'immutable';
|
import { Map } from 'immutable';
|
||||||
import { newEditorPlugin } from '../components/Widgets/MarkdownControl/plugins';
|
import { newEditorPlugin } from '../components/Widgets/Markdown/MarkdownControl/plugins';
|
||||||
|
|
||||||
const _registry = {
|
const _registry = {
|
||||||
templates: {},
|
templates: {},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user