LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix: markdown preview now shows

Browse source
This commit is contained in:
Sean Yesmunt 2019-05-07 21:42:56 -04:00
parent b536700719
commit 1a7e673699
1 changed files with 19 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/ui/component/common/form-components/form-field.jsx
View file

@ -1,16 +1,14 @@
// @flow // @flow
import type { ElementRef } from 'react'; import type { ElementRef } from 'react';
import React, { Suspense } from 'react'; import React from 'react';
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import MarkdownPreview from 'component/common/markdown-preview';
import 'easymde/dist/easymde.min.css'; import 'easymde/dist/easymde.min.css';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { openEditorMenu, stopContextMenu } from 'util/context-menu'; import { openEditorMenu, stopContextMenu } from 'util/context-menu';
import SimpleMDE from 'react-simplemde-editor';
const SimpleMDE = React.lazy(() => // It would be nice to use the lazy markdown preview component but react-dom/server
import(/* webpackChunkName: "SimpleMDE" */ // doesn't support it yet. We use that for renderToString on our markdown text
'react-simplemde-editor') import MarkdownPreview from 'component/common/markdown-preview-internal';
);
type Props = { type Props = {
name: string, name: string,
@ -137,21 +135,20 @@ export class FormField extends React.PureComponent<Props> {
<div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}> <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
<fieldset-section> <fieldset-section>
<label htmlFor={name}>{label}</label> <label htmlFor={name}>{label}</label>
<Suspense fallback={<div />}> <SimpleMDE
<SimpleMDE {...inputProps}
{...inputProps} id={name}
id={name} type="textarea"
type="textarea" events={handleEvents}
events={handleEvents} options={{
options={{ spellChecker: false,
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'], hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
previewRender(plainText) { previewRender(plainText) {
const preview = <MarkdownPreview content={plainText} />; const preview = <MarkdownPreview content={plainText} />;
return ReactDOMServer.renderToString(preview); return ReactDOMServer.renderToString(preview);
}, },
}} }}
/> />
</Suspense>
</fieldset-section> </fieldset-section>
</div> </div>
); );