FEATURE: Allow editing focus keyword in app

Resources/Private/Fusion/Components/SnippetEditor.fusion

@@ -13,6 +13,9 @@ prototype(Shel.Neos.YoastSeo:Component.SnippetEditor) < prototype(Neos.Neos:Cont
             <div class="snippet-editor__uri-path-segment">
                 <Neos.Neos:Editable property="uriPathSegment"/>
             </div>
+            <div class="snippet-editor__focus-keyword">
+                <Neos.Neos:Editable property="focusKeyword"/>
+            </div>
         </div>
     `
 }

Resources/Private/Scripts/YoastInfoView/src/YoastInfoView.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import Jed from "jed";
 import {$transform, $get} from 'plow-js';
+import debounce from 'lodash.debounce';
 
 import {Icon, IconButton} from '@neos-project/react-ui-components';
 import {neos} from '@neos-project/neos-ui-decorators';
@@ -101,7 +102,9 @@ export default class YoastInfoView extends PureComponent {
             this.fetchContent();
         }
 
+        this.onDocumentUpdated = debounce(this.onDocumentUpdated.bind(this), 500);
         this.props.serverFeedbackHandlers.set('Neos.Neos.Ui:ReloadDocument/DocumentUpdated', this.onDocumentUpdated, 'after Neos.Neos.Ui:ReloadDocument/Main');
+        this.props.serverFeedbackHandlers.set('Neos.Neos.Ui:UpdateNodeInfo/YoastSeo', this.onDocumentUpdated, 'after Neos.Neos.Ui:UpdateNodeInfo/Main');
     }
 
     onDocumentUpdated = () => {

Resources/Private/Scripts/YoastInfoView/src/components/ContentAnalysisWrapper.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import ContentAnalysis from "yoast-components/composites/Plugin/ContentAnalysis/components/ContentAnalysis";
 import YoastModal from "yoast-components/composites/Plugin/Shared/components/YoastModal";
 import {Collapsible} from "yoast-components/composites/Plugin/Shared/components/Collapsible";
+import KeywordInput from "yoast-components/composites/Plugin/Shared/components/KeywordInput";
 import colors from "yoast-components/style-guide/colors";
 import {__} from "@wordpress/i18n";
 
@@ -18,6 +19,7 @@ const modalStyles = {
 
 const StyledContentAnalysisWrapper = styled.div`
     margin: .2rem 1rem;
+    font-size: 13px;
 `;
 
 class ContentAnalysisWrapper extends PureComponent {
@@ -27,6 +29,8 @@ class ContentAnalysisWrapper extends PureComponent {
         allResults: PropTypes.object.isRequired,
         seoResults: PropTypes.object.isRequired,
         readabilityResults: PropTypes.object.isRequired,
+        onChange: PropTypes.func.isRequired,
+        focusKeyword: PropTypes.string,
     };
 
     constructor(props) {
@@ -88,6 +92,14 @@ class ContentAnalysisWrapper extends PureComponent {
                     headingProps={{level: 2, fontSize: '18px'}}
                 >
                     <StyledContentAnalysisWrapper>
+                        <KeywordInput
+                            id="focus-keyphrase"
+                            keyword={this.props.focusKeyword}
+                            onChange={(value) => this.props.onChange('focusKeyword', value)}
+                            onRemoveKeyword={() => this.props.onChange('focusKeyword', '')}
+                            label={__('Focus keyphrase', 'yoast-components')}
+                            ariaLabel={__('Focus keyphrase', 'yoast-components')}/>
+
                         <ContentAnalysis
                             {...this.props.seoResults}
                             onMarkButtonClick={(id, marker) => {

Resources/Private/Scripts/YoastInfoView/src/components/NeosYoastApp.js

@@ -65,6 +65,7 @@ export default class NeosYoastApp extends PureComponent {
                 description: this.props.description || '',
                 slug: this.props.uriPathSegment,
                 url: this.props.pageUrl,
+                focusKeyword: this.props.focusKeyword,
             },
             page: {
                 titleTemplate: '{title}',
@@ -192,7 +193,7 @@ export default class NeosYoastApp extends PureComponent {
             const paper = new Paper(
                 this.state.page.content,
                 {
-                    keyword: this.props.focusKeyword || '',
+                    keyword: this.state.editorData.focusKeyword || '',
                     description: this.state.page.description || '',
                     title: this.state.page.title,
                     titleWidth: measureTextWidth(this.state.page.title),
@@ -324,20 +325,27 @@ export default class NeosYoastApp extends PureComponent {
             hasPaperStyle: false,
             onChange: this.onSnippetEditorChange,
             mapEditorDataToPreview: this.mapEditorDataToPreview,
+            mode: this.state.mode,
+        };
+
+        const analysisProps = {
+            modalContainer: this.props.modalContainer,
+            allResults: this.state.allResults,
+            readabilityResults: this.state.readabilityResults,
+            seoResults: this.state.seoResults,
+            isAnalyzing: this.state.isAnalyzing,
+            onChange: this.onSnippetEditorChange,
+            focusKeyword: this.state.editorData.focusKeyword,
         };
 
         return (
             <ThemeProvider theme={{isRtl: false}}>
                 <div>
                     <Loader className=""/>
                     <div className="yoast-seo__snippet-editor-wrapper">
-                        <SnippetEditor {...editorProps} mode={this.state.mode}/>
+                        <SnippetEditor {...editorProps}/>
                     </div>
-                    <ContentAnalysisWrapper modalContainer={this.props.modalContainer}
-                                            allResults={this.state.allResults}
-                                            readabilityResults={this.state.readabilityResults}
-                                            seoResults={this.state.seoResults}
-                                            isAnalyzing={this.state.isAnalyzing}/>
+                    <ContentAnalysisWrapper {...analysisProps}/>
                 </div>
             </ThemeProvider>
         )

Resources/Private/Scripts/app.js

@@ -16,6 +16,8 @@ import fetch from './YoastInfoView/src/helper/fetch';
     const titleOverrideField = snippetEditorContainer.querySelector('.snippet-editor__title-override');
     const descriptionField = snippetEditorContainer.querySelector('.snippet-editor__description');
     const uriPathSegmentField = snippetEditorContainer.querySelector('.snippet-editor__uri-path-segment');
+    const focusKeywordField = snippetEditorContainer.querySelector('.snippet-editor__focus-keyword');
+
     let translations = {
         domain: "js-text-analysis",
         locale_data: {
@@ -28,6 +30,7 @@ import fetch from './YoastInfoView/src/helper/fetch';
     const editorFieldMapping = {
         title: titleField,
         titleOverride: titleOverrideField,
+        focusKeyword: focusKeywordField,
         description: descriptionField,
         slug: uriPathSegmentField,
     };

Resources/Private/Styles/Main.scss

@@ -45,6 +45,10 @@ body {
   }
 
   &__content-analysis-wrapper {
+    h2 {
+      font-size: 16px;
+    }
+
     a {
       text-decoration: none;