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:
@ -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();
|
||||
};
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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 }} />;
|
||||
}
|
||||
}
|
||||
|
@ -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, {
|
||||
|
@ -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);
|
||||
|
Reference in New Issue
Block a user