Merge pull request #4198 from weseek/feat/6986-on-off-textlint

GW-6986 [front] ユーザーがON/Offを切り替える用のUIを表示させる(見た目のみ)

packages/app/src/components/PageEditor/OptionsSelector.jsx

@@ -207,6 +207,7 @@ class OptionsSelector extends React.Component {
             {this.renderActiveLineMenuItem()}
             {this.renderRealtimeMathJaxMenuItem()}
             {this.renderMarkdownTableAutoFormattingMenuItem()}
+            {this.renderIsTextlintEnabledMenuItem()}
             {/* <DropdownItem divider /> */}
           </DropdownMenu>
 
@@ -286,6 +287,28 @@ class OptionsSelector extends React.Component {
     );
   }
 
+  renderIsTextlintEnabledMenuItem() {
+    // TODO: GW-6988 connect to back end
+    const isActive = true;
+    const iconClasses = ['text-info'];
+    if (isActive) {
+      iconClasses.push('ti-check');
+    }
+    const iconClassName = iconClasses.join(' ');
+
+    return (
+      // TODO: GW-6988 connect to back end
+      // eslint-disable-next-line no-console
+      <DropdownItem toggle={false} onClick={console.log('Lint button pressed')}>
+        <div className="d-flex justify-content-between">
+          <span className="icon-container"></span>
+          <span className="menuitem-label">Textlint</span>
+          <span className="icon-container"><i className={iconClassName}></i></span>
+        </div>
+      </DropdownItem>
+    );
+  }
+
   renderIndentSizeSelector() {
     const { appContainer, editorContainer } = this.props;
     const menuItems = this.typicalIndentSizes.map((indent) => {