Keywords custom field

package.json

@@ -122,7 +122,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.0.2",
+    "superdesk-ui-framework": "^3.0.5",
     "ts-loader": "3.5.0",
     "tslint": "5.11.0",
     "typescript": "4.5.2",

scripts/apps/authoring-react/authoring-integration-wrapper.tsx

@@ -39,7 +39,6 @@ import {IArticleActionInteractive} from 'core/interactive-article-actions-panel/
 import {ARTICLE_RELATED_RESOURCE_NAMES} from 'core/constants';
 import {showModal} from '@superdesk/common';
 import {ExportModal} from './toolbar/export-modal';
-import {TemplateModal} from './toolbar/template-modal';
 import {TranslateModal} from './toolbar/translate-modal';
 import {HighlightsModal} from './toolbar/highlights-modal';
 import {CompareArticleVersionsModal} from './toolbar/compare-article-versions';
@@ -332,10 +331,20 @@ export class AuthoringIntegrationWrapper extends React.PureComponent<IPropsWrapp
                     onClick: () => {
                         toggleSideWidget(widget.label);
                     },
+                    id: widget._id,
                 }));
 
             return (
                 <Nav.SideBarTabs
+                    activeTab={this.state.sideWidget.name}
+                    onActiveTabChange={(val) => {
+                        this.setState({
+                            sideWidget: {
+                                name: val,
+                                pinned: this.state.sideWidget?.pinned ?? false,
+                            },
+                        });
+                    }}
                     items={sidebarTabs}
                 />
             );

scripts/apps/authoring-react/field-adapters/index.tsx

@@ -47,6 +47,7 @@ import {ContentState, convertToRaw, RawDraftContentState} from 'draft-js';
 import {computeEditor3Output} from './utilities/compute-editor3-output';
 import {package_items} from './package_items';
 import {LINKED_ITEMS_FIELD_TYPE} from '../fields/linked-items';
+import {getKeywordsAdapter} from './keywords';
 import {dateline} from './dateline';
 import {description_text} from './description_text';
 
@@ -72,6 +73,7 @@ export function getBaseFieldsAdapter(): IFieldsAdapter<IArticle> {
         urgency: urgency,
         usageterms: usageterms,
         groups: package_items,
+        keywords: getKeywordsAdapter(),
         dateline: dateline,
         description_text: description_text,
     };

scripts/apps/authoring-react/field-adapters/keywords.ts

@@ -0,0 +1,65 @@
+import {
+    IArticle,
+    IAuthoringFieldV2,
+    IFieldAdapter,
+    IDropdownConfigVocabulary,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {sdApi} from 'api';
+import {TAG_INPUT_FIELD_ID} from '../fields/tag-input';
+
+export function getKeywordsAdapter(): IFieldAdapter<IArticle> {
+    const hasKeywordCV = sdApi.vocabularies.getAll().has('keywords');
+
+    if (hasKeywordCV) {
+        return {
+            getFieldV2: () => {
+                const fieldConfig: IDropdownConfigVocabulary = {
+                    source: 'vocabulary',
+                    vocabularyId: 'keywords',
+                    multiple: true,
+                };
+
+                const fieldV2: IAuthoringFieldV2 = {
+                    id: 'keywords',
+                    name: gettext('Keywords'),
+                    fieldType: 'dropdown',
+                    fieldConfig,
+                };
+
+                return fieldV2;
+            },
+            retrieveStoredValue: (article) => {
+                return article.keywords ?? [];
+            },
+            storeValue: (val: Array<string>, article) => {
+                return {
+                    ...article,
+                    keywords: val,
+                };
+            },
+        };
+    } else {
+        return {
+            getFieldV2: () => {
+                const fieldV2: IAuthoringFieldV2 = {
+                    id: 'keywords',
+                    name: gettext('Keywords'),
+                    fieldType: TAG_INPUT_FIELD_ID,
+                    fieldConfig: {},
+                };
+
+                return fieldV2;
+            },
+            retrieveStoredValue: (article) => {
+                return article.keywords;
+            },
+            storeValue: (val: Array<string>, article) => {
+                return {
+                    ...article,
+                    keywords: val,
+                };
+            },
+        };
+    }
+}

scripts/apps/authoring-react/fields/register-fields.ts

@@ -14,6 +14,7 @@ import {getAttachmentsField} from './attachments';
 import {getTimeField} from './time';
 import {geDurationField} from './duration';
 import {getArticlesInPackageField} from './package-items';
+import {getTagInputField} from './tag-input';
 import {getDatelineField} from './dateline';
 
 export function registerAuthoringReactFields() {
@@ -50,6 +51,7 @@ export function registerAuthoringReactFields() {
                 getLinkedItemsField(),
                 getAttachmentsField(),
                 getArticlesInPackageField(),
+                getTagInputField(),
                 getDatelineField(),
             ],
         },

scripts/apps/authoring-react/fields/tag-input/difference.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {IDifferenceComponentProps, ITagInputFieldConfig, ITagInputValueOperational} from 'superdesk-api';
+import {DifferenceGeneric} from '../difference-generic';
+
+type IProps = IDifferenceComponentProps<ITagInputValueOperational, ITagInputFieldConfig>;
+
+export class Difference extends React.PureComponent<IProps> {
+    render() {
+        const {value1, value2} = this.props;
+
+        return (
+            <DifferenceGeneric
+                items1={value1 == null ? [] : value1}
+                items2={value2 == null ? [] : value2}
+                getId={(item) => JSON.stringify(item)}
+                template={({item}) => <span>{item}</span>}
+            />
+        );
+    }
+}

scripts/apps/authoring-react/fields/tag-input/editor.tsx

@@ -0,0 +1,27 @@
+import {gettext} from 'core/utils';
+import React from 'react';
+import {
+    IEditorComponentProps,
+    ITagInputFieldConfig,
+    ITagInputUserPreferences,
+    ITagInputValueOperational,
+} from 'superdesk-api';
+import {TagInput} from 'superdesk-ui-framework/react';
+
+type IProps = IEditorComponentProps<ITagInputValueOperational, ITagInputFieldConfig, ITagInputUserPreferences>;
+
+export class Editor extends React.PureComponent<IProps> {
+    render() {
+        const Container = this.props.container;
+
+        return (
+            <Container>
+                <TagInput
+                    placeholder={gettext('Input tags here')}
+                    onChange={this.props.onChange}
+                    value={this.props.value}
+                />
+            </Container>
+        );
+    }
+}

scripts/apps/authoring-react/fields/tag-input/index.tsx

@@ -0,0 +1,35 @@
+import {
+    ICustomFieldType,
+    ITagInputValueOperational,
+    ITagInputValueStorage,
+    ITagInputUserPreferences,
+    ITagInputFieldConfig,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {Editor} from './editor';
+import {Preview} from './preview';
+import {Difference} from './difference';
+
+export const TAG_INPUT_FIELD_ID = 'tag-input';
+
+type TagInputFieldType = ICustomFieldType<
+    ITagInputValueOperational,
+    ITagInputValueStorage,
+    ITagInputFieldConfig,
+    ITagInputUserPreferences
+>;
+
+export function getTagInputField(): TagInputFieldType {
+    const field: TagInputFieldType = {
+        id: TAG_INPUT_FIELD_ID,
+        label: gettext('Tag-input (authoring-react)'),
+        editorComponent: Editor,
+        previewComponent: Preview,
+        differenceComponent: Difference,
+        hasValue: (valueOperational) => (valueOperational?.length ?? 0) > 0,
+        getEmptyValue: () => null,
+        configComponent: () => null,
+    };
+
+    return field;
+}

scripts/apps/authoring-react/fields/tag-input/preview.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {ITagInputFieldConfig, ITagInputValueOperational, IPreviewComponentProps} from 'superdesk-api';
+import {TagInput} from 'superdesk-ui-framework/react';
+
+type IProps = IPreviewComponentProps<ITagInputValueOperational, ITagInputFieldConfig>;
+
+export class Preview extends React.PureComponent<IProps> {
+    render() {
+        if (this.props.value == null) {
+            return null;
+        }
+
+        return (
+            <TagInput
+                disabled
+                value={this.props.value}
+                onChange={() => null}
+                placeholder=""
+            />
+        );
+    }
+}

scripts/core/superdesk-api.d.ts

@@ -46,10 +46,7 @@ declare module 'superdesk-api' {
     }
 
     export interface IFieldAdapter<T> {
-        getFieldV2: (
-            fieldEditor,
-            fieldSchema,
-        ) => IAuthoringFieldV2;
+        getFieldV2: (fieldEditor, fieldSchema) => IAuthoringFieldV2;
 
         /**
          * Allows to customize where values are stored.
@@ -277,6 +274,13 @@ declare module 'superdesk-api' {
     };
     export type ITimeUserPreferences = never;
 
+    // AUTHORING-REACT FIELD TYPES - tag input
+
+    export type ITagInputValueOperational = Array<string>;
+    export type ITagInputValueStorage = ITagInputValueOperational;
+    export interface ITagInputFieldConfig extends ICommonFieldConfig {};
+    export type ITagInputUserPreferences = never;
+
     // AUTHORING-REACT FIELD TYPES - duration
 
     export type IDurationValueOperational = number; // number of seconds