fix: change getAsset to not return a promise (#3232)

* fix: change getAsset to not return a promise

* fix: update markdown widget per getAsset changes

* test: fix editor component image test

* docs: update getAsset docs
This commit is contained in:
Erez Rokah
2020-02-13 02:12:36 +02:00
committed by GitHub
parent 2457c29baf
commit ab685e8594
30 changed files with 317 additions and 355 deletions

View File

@ -50,18 +50,17 @@ export default class RawEditor extends React.Component {
}
}
handleCopy = async (event, editor) => {
event.persist();
handleCopy = (event, editor) => {
const { getAsset, resolveWidget } = this.props;
const markdown = Plain.serialize(Value.create({ document: editor.value.fragment }));
const html = await markdownToHtml(markdown, { getAsset, resolveWidget });
const html = markdownToHtml(markdown, { getAsset, resolveWidget });
setEventTransfer(event, 'text', markdown);
setEventTransfer(event, 'html', html);
event.preventDefault();
};
handleCut = async (event, editor, next) => {
await this.handleCopy(event, editor, next);
handleCut = (event, editor, next) => {
this.handleCopy(event, editor, next);
editor.delete();
};

View File

@ -5,10 +5,9 @@ import isHotkey from 'is-hotkey';
import { slateToMarkdown, markdownToSlate, htmlToSlate, markdownToHtml } from '../../serializers';
const CopyPasteVisual = ({ getAsset, resolveWidget }) => {
const handleCopy = async (event, editor) => {
event.persist();
const handleCopy = (event, editor) => {
const markdown = slateToMarkdown(editor.value.fragment.toJS());
const html = await markdownToHtml(markdown, { getAsset, resolveWidget });
const html = markdownToHtml(markdown, { getAsset, resolveWidget });
setEventTransfer(event, 'text', markdown);
setEventTransfer(event, 'html', html);
setEventTransfer(event, 'fragment', base64.serializeNode(editor.value.fragment));
@ -32,8 +31,8 @@ const CopyPasteVisual = ({ getAsset, resolveWidget }) => {
const doc = Document.fromJSON(ast);
return editor.insertFragment(doc);
},
async onCopy(event, editor, next) {
await handleCopy(event, editor, next);
onCopy(event, editor, next) {
handleCopy(event, editor, next);
},
onCut(event, editor, next) {
handleCopy(event, editor, next);

View File

@ -10,43 +10,14 @@ class MarkdownPreview extends React.Component {
value: PropTypes.string,
};
subscribed = true;
state = {
html: null,
};
async _renderHtml() {
const { value, getAsset, resolveWidget } = this.props;
if (value) {
const html = await markdownToHtml(value, { getAsset, resolveWidget });
if (this.subscribed) {
this.setState({ html });
}
}
}
componentDidMount() {
this._renderHtml();
}
componentDidUpdate(prevProps) {
if (prevProps.value !== this.props.value || prevProps.getAsset !== this.props.getAsset) {
this._renderHtml();
}
}
componentWillUnmount() {
this.subscribed = false;
}
render() {
const { html } = this.state;
if (html === null) {
const { value, getAsset, resolveWidget } = this.props;
if (value === null) {
return null;
}
const html = markdownToHtml(value, { getAsset, resolveWidget });
return <WidgetPreviewContainer dangerouslySetInnerHTML={{ __html: html }} />;
}
}

View File

@ -148,13 +148,13 @@ export const remarkToMarkdown = obj => {
/**
* Convert Markdown to HTML.
*/
export const markdownToHtml = async (markdown, { getAsset, resolveWidget } = {}) => {
export const markdownToHtml = (markdown, { getAsset, resolveWidget } = {}) => {
const mdast = markdownToRemark(markdown);
const hast = await unified()
const hast = unified()
.use(remarkToRehypeShortcodes, { plugins: getEditorComponents(), getAsset, resolveWidget })
.use(remarkToRehype, { allowDangerousHTML: true })
.run(mdast);
.runSync(mdast);
const html = unified()
.use(rehypeToHtml, {

View File

@ -12,15 +12,15 @@ import u from 'unist-builder';
export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWidget }) {
return transform;
async function transform(root) {
const transformedChildren = await Promise.all(map(root.children, processShortcodes));
function transform(root) {
const transformedChildren = map(root.children, processShortcodes);
return { ...root, children: transformedChildren };
}
/**
* Mapping function to transform nodes that contain shortcodes.
*/
async function processShortcodes(node) {
function processShortcodes(node) {
/**
* If the node doesn't contain shortcode data, return the original node.
*/
@ -38,7 +38,7 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
* an HTML string or a React component. If a React component is returned,
* render it to an HTML string.
*/
const value = await getPreview(plugin, shortcodeData);
const value = getPreview(plugin, shortcodeData);
const valueHtml = typeof value === 'string' ? value : renderToString(value);
/**
@ -52,7 +52,7 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
/**
* Retrieve the shortcode preview component.
*/
async function getPreview(plugin, shortcodeData) {
function getPreview(plugin, shortcodeData) {
const { toPreview, widget, fields } = plugin;
if (toPreview) {
return toPreview(shortcodeData, getAsset, fields);