docbrown/app/javascript/article-form/components/Help/BasicEditor.jsx
Rafi 41cc771839
Refactoring help component (and fragmenting it too) (#10895)
* Refactoring Help component

* Fixing typo

* Adding missing prop types

* Removing setCommonProps

* Moving show to parent component

* Renaming Format component

* Converting help component to functional component

* Removing html from state

* Fixing modal toggle and eslint errors

* Adding arria hidden

* Using optional chaining

* Fixing variable names

* Renaming state variable

* Adding jsdoc

Co-authored-by: Nick Taylor <nick@dev.to>
2021-05-05 12:58:40 +07:00

35 lines
1.1 KiB
JavaScript

import { h } from 'preact';
import PropTypes from 'prop-types';
export const BasicEditor = ({ openModal }) => (
<div
data-testid="basic-editor-help"
className="crayons-card crayons-card--secondary p-4 mb-6"
>
You are currently using the basic markdown editor that uses{' '}
<a href="#frontmatter" onClick={() => openModal('frontmatterShowing')}>
Jekyll front matter
</a>
. You can also use the <em>rich+markdown</em> editor you can find in{' '}
<a href="/settings/customization">
UX settings
<svg
width="24"
height="24"
viewBox="0 0 24 24"
className="crayons-icon"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="c038a36b2512ed25db907e179ab45cfc"
aria-hidden
>
<path d="M10.667 8v1.333H7.333v7.334h7.334v-3.334H16v4a.666.666 0 01-.667.667H6.667A.666.666 0 016 17.333V8.667A.667.667 0 016.667 8h4zM18 6v5.333h-1.333V8.275l-5.196 5.196-.942-.942 5.194-5.196h-3.056V6H18z" />
</svg>
</a>
.
</div>
);
BasicEditor.propTypes = {
toggleModal: PropTypes.func.isRequired,
};