127 lines
3.8 KiB
JavaScript
127 lines
3.8 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
export const EditorFormattingHelp = ({ openModal }) => (
|
|
<div
|
|
data-testid="format-help"
|
|
className="crayons-article-form__help crayons-article-form__help--body"
|
|
>
|
|
<h4 className="mb-2 fs-l">Editor Basics</h4>
|
|
<ul className="list-disc pl-6 color-base-70">
|
|
<li>
|
|
Use{' '}
|
|
<a href="#markdown" onClick={() => openModal('markdownShowing')}>
|
|
Markdown
|
|
</a>{' '}
|
|
to write and format posts.
|
|
<details className="fs-s my-1">
|
|
<summary class="cursor-pointer">Commonly used syntax</summary>
|
|
<table className="crayons-card crayons-card--secondary crayons-table crayons-table--compact w-100 mt-2 mb-4 lh-tight">
|
|
<tbody>
|
|
<tr>
|
|
<td className="ff-monospace">
|
|
# Header
|
|
<br />
|
|
...
|
|
<br />
|
|
###### Header
|
|
</td>
|
|
<td>
|
|
H1 Header
|
|
<br />
|
|
...
|
|
<br />
|
|
H6 Header
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">*italics* or _italics_</td>
|
|
<td>
|
|
<em>italics</em>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">**bold**</td>
|
|
<td>
|
|
<strong>bold</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">[Link](https://...)</td>
|
|
<td>
|
|
<a href="https://forem.com">Link</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">
|
|
* item 1<br />* item 2
|
|
</td>
|
|
<td>
|
|
<ul class="list-disc ml-5">
|
|
<li>item 1</li>
|
|
<li>item 2</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">
|
|
1. item 1<br />
|
|
2. item 2
|
|
</td>
|
|
<td>
|
|
<ul class="list-decimal ml-5">
|
|
<li>item 1</li>
|
|
<li>item 2</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">> quoted text</td>
|
|
<td>
|
|
<span className="pl-2 border-0 border-solid border-l-2 border-base-50">
|
|
quoted text
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">`inline code`</td>
|
|
<td>
|
|
<code>inline code</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="ff-monospace">
|
|
<span class="fs-xs">```</span>
|
|
<br />
|
|
code block
|
|
<br />
|
|
<span class="fs-xs">```</span>
|
|
</td>
|
|
<td>
|
|
<div class="highlight p-2 overflow-hidden">
|
|
<code>code block</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</details>
|
|
</li>
|
|
<li>
|
|
You can use{' '}
|
|
<a href="#liquid" onClick={() => openModal('liquidShowing')}>
|
|
Liquid tags
|
|
</a>{' '}
|
|
to add rich content such as Tweets, YouTube videos, etc.
|
|
</li>
|
|
<li>
|
|
In addition to images for the post's content, you can also drag and drop
|
|
a cover image
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
EditorFormattingHelp.propTypes = {
|
|
openModal: PropTypes.func.isRequired,
|
|
};
|