diff --git a/app/javascript/article-form/components/Help.jsx b/app/javascript/article-form/components/Help.jsx deleted file mode 100644 index 4b6bd23c5..000000000 --- a/app/javascript/article-form/components/Help.jsx +++ /dev/null @@ -1,311 +0,0 @@ -import { h, Component } from 'preact'; -import PropTypes from 'prop-types'; -import { Modal } from '@crayons'; - -export class Help extends Component { - constructor(props) { - super(props); - this.state = { - liquidHelpHTML: - document.getElementById('editor-liquid-help') && - document.getElementById('editor-liquid-help').innerHTML, - markdownHelpHTML: - document.getElementById('editor-markdown-help') && - document.getElementById('editor-markdown-help').innerHTML, - frontmatterHelpHTML: - document.getElementById('editor-frontmatter-help') && - document.getElementById('editor-frontmatter-help').innerHTML, - liquidShowing: false, - markdownShowing: false, - frontmatterShowing: false, - }; - } - - showModal = (sectionShowing, isOpen) => () => { - this.setState({ [sectionShowing]: isOpen }); - }; - - renderArticleFormTitleHelp = () => { - return ( -
-

Writing a Great Post Title

- -
- ); - }; - - renderTagInputHelp = () => { - return ( -
-

Tagging Guidelines

- -
- ); - }; - - renderBasicEditorHelp = () => { - return ( -
- You are currently using the basic markdown editor that uses{' '} - - Jekyll front matter - - . You can also use the rich+markdown editor you can find in{' '} - - UX settings - - - Open UX settings - - - - - . -
- ); - }; - - renderFormatHelp = () => { - return ( -
-

Editor Basics

- -
- ); - }; - - renderModal = (onClose, title, helpHtml) => { - return ( - -
- - ); - }; - - render() { - const { previewShowing, helpFor, helpPosition, version } = this.props; - - const { - liquidHelpHTML, - markdownHelpHTML, - frontmatterHelpHTML, - liquidShowing, - markdownShowing, - frontmatterShowing, - } = this.state; - - return ( -
- {!previewShowing && ( -
- {helpFor === 'article-form-title' && - this.renderArticleFormTitleHelp()} - {helpFor === 'tag-input' && this.renderTagInputHelp()} - {version === 'v1' && this.renderBasicEditorHelp()} - {(helpFor === 'article_body_markdown' || version === 'v1') && - this.renderFormatHelp()} -
- )} - - {liquidShowing && - this.renderModal( - this.showModal('liquidShowing', false), - '🌊 Liquid Tags', - liquidHelpHTML, - )} - - {markdownShowing && - this.renderModal( - this.showModal('markdownShowing', false), - '✍️ Markdown', - markdownHelpHTML, - )} - - {frontmatterShowing && - this.renderModal( - this.showModal('frontmatterShowing', false), - 'Jekyll Front Matter', - frontmatterHelpHTML, - )} -
- ); - } -} - -Help.propTypes = { - previewShowing: PropTypes.bool.isRequired, - helpFor: PropTypes.string.isRequired, - helpPosition: PropTypes.string.isRequired, - version: PropTypes.string.isRequired, -}; - -Help.displayName = 'Help'; diff --git a/app/javascript/article-form/components/Help/ArticleFormTitle.jsx b/app/javascript/article-form/components/Help/ArticleFormTitle.jsx new file mode 100644 index 000000000..bea0882b1 --- /dev/null +++ b/app/javascript/article-form/components/Help/ArticleFormTitle.jsx @@ -0,0 +1,20 @@ +import { h } from 'preact'; + +export const ArticleFormTitle = () => ( +
+

Writing a Great Post Title

+
    +
  • + Think of your post title as a super short (but compelling!) description + — like an overview of the actual post in one short sentence. +
    • +
  • + Use keywords where appropriate to help ensure people can find your post + by search. +
    • +
+
+); diff --git a/app/javascript/article-form/components/Help/BasicEditor.jsx b/app/javascript/article-form/components/Help/BasicEditor.jsx new file mode 100644 index 000000000..a25ece38e --- /dev/null +++ b/app/javascript/article-form/components/Help/BasicEditor.jsx @@ -0,0 +1,35 @@ +import { h } from 'preact'; +import PropTypes from 'prop-types'; + +export const BasicEditor = ({ openModal }) => ( +
+ You are currently using the basic markdown editor that uses{' '} + openModal('frontmatterShowing')}> + Jekyll front matter + + . You can also use the rich+markdown editor you can find in{' '} + + UX settings + + + + + . +
+); + +BasicEditor.propTypes = { + toggleModal: PropTypes.func.isRequired, +}; diff --git a/app/javascript/article-form/components/Help/EditorFormattingHelp.jsx b/app/javascript/article-form/components/Help/EditorFormattingHelp.jsx new file mode 100644 index 000000000..a47c63d8a --- /dev/null +++ b/app/javascript/article-form/components/Help/EditorFormattingHelp.jsx @@ -0,0 +1,127 @@ +import { h } from 'preact'; +import PropTypes from 'prop-types'; + +export const EditorFormattingHelp = ({ openModal }) => ( +
+

Editor Basics

+
    +
  • + Use{' '} + openModal('markdownShowing')}> + Markdown + {' '} + to write and format posts. +
    + Commonly used syntax + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + # Header +
    + ... +
    + ###### Header +     		+ H1 Header +
    + ... +
    + H6 Header +
    *italics* or _italics_ + italics +
    **bold** + bold +
    [Link](https://...) + Link +
    + * item 1
    * item 2 +     		+
      +
    • item 1
      • +
    • item 2
      • +
    +
    + 1. item 1
    + 2. item 2 +     		+
      +
    • item 1
      • +
    • item 2
      • +
    +
    > quoted text + + quoted text + +
    `inline code` + inline code +
    + ``` +
    + code block +
    + ``` +     		+
    + code block +
    +
    +
    +
    • +
  • + You can use{' '} + openModal('liquidShowing')}> + Liquid tags + {' '} + to add rich content such as Tweets, YouTube videos, etc. +
    • +
  • + In addition to images for the post's content, you can also drag and drop + a cover image +
    • +
+
+); + +EditorFormattingHelp.propTypes = { + toggleModal: PropTypes.func.isRequired, +}; diff --git a/app/javascript/article-form/components/Help/TagInput.jsx b/app/javascript/article-form/components/Help/TagInput.jsx new file mode 100644 index 000000000..c36102879 --- /dev/null +++ b/app/javascript/article-form/components/Help/TagInput.jsx @@ -0,0 +1,25 @@ +import { h } from 'preact'; + +export const TagInput = () => ( +
+

Tagging Guidelines

+
    +
  • Tags help people find your post.
    • +
  • + Think of tags as the topics or categories that best describe your post. +
    • +
  • + Add up to four comma-separated tags per post. Combine tags to reach the + appropriate subcommunities. +
    • +
  • Use existing tags whenever possible.
    • +
  • + Some tags, such as “help” or “healthydebate”, have special posting + guidelines. +
    • +
+
+); diff --git a/app/javascript/article-form/components/Help/index.jsx b/app/javascript/article-form/components/Help/index.jsx new file mode 100644 index 000000000..2cf8eec8a --- /dev/null +++ b/app/javascript/article-form/components/Help/index.jsx @@ -0,0 +1,106 @@ +import { h } from 'preact'; +import { useState } from 'preact/hooks'; +import PropTypes from 'prop-types'; +import { ArticleFormTitle } from './ArticleFormTitle'; +import { TagInput } from './TagInput'; +import { BasicEditor } from './BasicEditor'; +import { EditorFormattingHelp } from './EditorFormattingHelp'; +import { Modal } from '@crayons'; + +const renderModal = (onClose, title, selector) => { + const helpHtml = document.getElementById(selector)?.innerHTML; + + return ( + +
+ + ); +}; + +/** + * Renders help component for given section + * + * @param {boolean} props.previewShowing Boolean to decide if to show the preview + * @param {string} props.helpFor Section for which help is shown + * @param {string} props.helpPosition Offset from the top of the help component + * @param {string} props.version Version of the editor used for article + * + * @returns Help component for the given section + */ +export const Help = ({ previewShowing, helpFor, helpPosition, version }) => { + const [helpSectionVisibility, setHelpSectionVisibility] = useState({ + liquidShowing: false, + markdownShowing: false, + frontmatterShowing: false, + }); + + const openModal = (helpSection) => { + setHelpSectionVisibility({ + [helpSection]: true, + }); + }; + + const closeModal = (helpSection) => { + setHelpSectionVisibility({ + [helpSection]: false, + }); + }; + + const { + liquidShowing, + markdownShowing, + frontmatterShowing, + } = helpSectionVisibility; + + return ( +
+ {!previewShowing && ( +
+ {helpFor === 'article-form-title' && } + {helpFor === 'tag-input' && } + + {version === 'v1' && } + + {(helpFor === 'article_body_markdown' || version === 'v1') && ( + + )} +
+ )} + {liquidShowing && + renderModal( + () => closeModal('liquidShowing'), + '🌊 Liquid Tags', + 'editor-liquid-help', + )} + + {markdownShowing && + renderModal( + () => closeModal('markdownShowing'), + '✍️ Markdown', + 'editor-markdown-help', + )} + {frontmatterShowing && + renderModal( + () => closeModal('frontmatterShowing'), + 'Jekyll Front Matter', + 'editor-frontmatter-help', + )} +
+ ); +}; + +Help.propTypes = { + previewShowing: PropTypes.bool.isRequired, + helpFor: PropTypes.string.isRequired, + helpPosition: PropTypes.string.isRequired, + version: PropTypes.string.isRequired, +}; + +Help.displayName = 'Help';