From 2d4849c2164048d05ee50fd76a77ed377a13e686 Mon Sep 17 00:00:00 2001
From: Konstantin Markov <maga.ot.oz@protonmail.com>
Date: Thu, 28 Mar 2024 08:00:51 +0200
Subject: [PATCH] Related items implementation (#1931)

* Add frontend support for related_items field

* Implement related_items archive search modal

* Code cleanup, fix modal

* Temporary changes so related_items appears

* Remove implementation from planing, move to superdesk-belga

* Use UIF helper classes, move components from belga repo

* 1. Reimplement layout, so preview panel stretches properly and we follow design guidelines, and component reusability
2. Use `getSortedFieldsFiltered` to improve performance by not iterating 2 more times on the same object

* Remove dead code, properly get available languages for filter, move ContentDivider so it appears in the UI

* Adjust styles

* Move client-core import to SuperdeskAPI
Also:
* Fix search language for Belga archive
* Use appConfig.planning.event_related_item_search_provider_name instead of hard coded url for search_provider
* Remove all fields from related_items that aren't in the db schema
* Add search_provider ID to article when adding it to list of articles to add

---------

Co-authored-by: Mark Pittaway <mark.pittaway@gmail.com>
---
 .../EditorFieldEventRelatedItems.tsx          | 113 ++++++
 .../EventsRelatedArticlesModal.tsx            | 327 ++++++++++++++++++
 .../EventRelatedArticles/PreviewArticle.tsx   | 134 +++++++
 .../RelatedArticlesListComponent.tsx          | 213 ++++++++++++
 .../editor/EventRelatedArticles/utils.ts      | 187 ++++++++++
 client/components/fields/resources/events.ts  |  13 +
 .../fields/resources/registerEditorFields.tsx |   2 +-
 client/extension_bridge.ts                    |  16 +-
 client/interfaces.ts                          |  20 +-
 client/planning-extension/src/extension.ts    |   3 +
 .../src/extension_bridge.ts                   |  13 +-
 client/validators/index.ts                    |   1 +
 package-lock.json                             | 272 +++++++++------
 server/planning/events/events_schema.py       |   3 +-
 server/planning/types/__init__.py             |   1 +
 15 files changed, 1202 insertions(+), 116 deletions(-)
 create mode 100644 client/components/fields/editor/EventRelatedArticles/EditorFieldEventRelatedItems.tsx
 create mode 100644 client/components/fields/editor/EventRelatedArticles/EventsRelatedArticlesModal.tsx
 create mode 100644 client/components/fields/editor/EventRelatedArticles/PreviewArticle.tsx
 create mode 100644 client/components/fields/editor/EventRelatedArticles/RelatedArticlesListComponent.tsx
 create mode 100644 client/components/fields/editor/EventRelatedArticles/utils.ts

diff --git a/client/components/fields/editor/EventRelatedArticles/EditorFieldEventRelatedItems.tsx b/client/components/fields/editor/EventRelatedArticles/EditorFieldEventRelatedItems.tsx
new file mode 100644
index 000000000..c2df97f64
--- /dev/null
+++ b/client/components/fields/editor/EventRelatedArticles/EditorFieldEventRelatedItems.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+
+import {IArticle} from 'superdesk-api';
+import {IEditorFieldProps, IEventItem, IProfileSchemaTypeList} from 'interfaces';
+import {superdeskApi} from '../../../../superdeskApi';
+
+import {cleanArticlesFields} from './utils';
+
+import {ButtonGroup, Button, Spacer} from 'superdesk-ui-framework/react';
+import {showModal} from '@superdesk/common';
+import {EventsRelatedArticlesModal} from './EventsRelatedArticlesModal';
+import {RelatedArticlesListComponent} from './RelatedArticlesListComponent';
+import {Row} from '../../../UI/Form';
+
+import '../EventRelatedPlannings/style.scss';
+
+interface IProps extends IEditorFieldProps {
+    item: IEventItem;
+    schema?: IProfileSchemaTypeList;
+}
+
+interface IState {
+    selectedRelatedArticles: Array<Partial<IArticle>>;
+}
+
+export class EditorFieldEventRelatedItems extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            selectedRelatedArticles: this.props.item.related_items as Array<Partial<IArticle>>,
+        };
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps>): void {
+        const relatedItemsUpdated = this.props.item.related_items as Array<Partial<IArticle>>;
+
+        if (JSON.stringify(relatedItemsUpdated) !== JSON.stringify(prevProps.item.related_items)) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({
+                selectedRelatedArticles: relatedItemsUpdated,
+            });
+        }
+    }
+
+    render() {
+        const disabled = this.props.disabled || this.props.schema?.read_only;
+        const {gettext} = superdeskApi.localization;
+
+        return (
+            <div className="related-plannings">
+                <Row flex={true} noPadding={true}>
+                    <label className="InputArray__label side-panel__heading side-panel__heading--big">
+                        {gettext('Related Articles')}
+                    </label>
+                    {disabled ? null : (
+                        <ButtonGroup align="end">
+                            <Button
+                                type="primary"
+                                icon="plus-large"
+                                text="plus-large"
+                                shape="round"
+                                size="small"
+                                iconOnly={true}
+                                onClick={() =>
+                                    showModal(({closeModal}) => (
+                                        <EventsRelatedArticlesModal
+                                            onChange={(value) => {
+                                                this.props.onChange(this.props.field, cleanArticlesFields(value));
+                                            }}
+                                            selectedArticles={this.state.selectedRelatedArticles}
+                                            closeModal={() => {
+                                                closeModal();
+                                            }}
+                                        />
+                                    ))
+                                }
+                            />
+                        </ButtonGroup>
+                    )}
+                </Row>
+                {(this.props.item.related_items?.length ?? 0) < 1 ? (
+                    <Row>
+                        <div style={{width: '100%'}} className="info-box--dashed">
+                            <label>{gettext('No related articles yet')}</label>
+                        </div>
+                    </Row>
+                ) : (
+                    <Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
+                        {
+                            (this.state.selectedRelatedArticles ?? []).map((relItem) => (
+                                <RelatedArticlesListComponent
+                                    key={relItem.guid}
+                                    editorPreview
+                                    removeArticle={(articleId) => {
+                                        this.props.onChange(
+                                            this.props.field,
+                                            cleanArticlesFields(
+                                                [...(this.state.selectedRelatedArticles ?? [])]
+                                                    .filter(({guid}) => guid !== articleId)
+                                            )
+                                        );
+                                    }}
+                                    article={relItem}
+                                />
+                            ))
+                        }
+                    </Spacer>
+                )}
+            </div>
+        );
+    }
+}
diff --git a/client/components/fields/editor/EventRelatedArticles/EventsRelatedArticlesModal.tsx b/client/components/fields/editor/EventRelatedArticles/EventsRelatedArticlesModal.tsx
new file mode 100644
index 000000000..2f1fc86c7
--- /dev/null
+++ b/client/components/fields/editor/EventRelatedArticles/EventsRelatedArticlesModal.tsx
@@ -0,0 +1,327 @@
+import React from 'react';
+
+import {IArticle, IRestApiResponse, ISuperdeskQuery} from 'superdesk-api';
+import {IPlanningConfig} from '../../../../interfaces';
+import {superdeskApi} from '../../../../superdeskApi';
+import {appConfig as config} from 'appConfig';
+
+import {cleanArticlesFields} from './utils';
+
+import {
+    SearchBar,
+    Modal,
+    Dropdown,
+    Spacer,
+    Button,
+    WithPagination,
+    Loader,
+    Panel,
+    PanelHeader,
+    PanelContent,
+    PanelContentBlock,
+    LayoutContainer,
+    HeaderPanel,
+    MainPanel,
+    RightPanel,
+    SubNav,
+} from 'superdesk-ui-framework/react';
+import {RelatedArticlesListComponent} from './RelatedArticlesListComponent';
+import {PreviewArticle} from './PreviewArticle';
+
+import '../../../../components/Archive/ArchivePreview/style.scss';
+
+const appConfig = config as IPlanningConfig;
+
+interface IProps {
+    closeModal: () => void;
+    selectedArticles?: Array<Partial<IArticle>>;
+    onChange: (value: Array<Partial<IArticle>>) => void;
+}
+
+interface IState {
+    articles: Array<Partial<IArticle>>;
+    searchQuery: string;
+    loading: boolean;
+    currentlySelectedArticles?: Array<Partial<IArticle>>;
+    activeLanguage: {code: string; label: string;};
+    previewItem: Partial<IArticle> | null;
+    repo: string | null;
+    languages: Array<{label: string, code: string}>;
+}
+
+
+export class EventsRelatedArticlesModal extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            articles: [],
+            searchQuery: '',
+            loading: true,
+            currentlySelectedArticles: this.props.selectedArticles,
+            activeLanguage: {label: 'All languages', code: ''},
+            previewItem: null,
+            repo: null,
+            languages: [],
+        };
+    }
+
+    componentDidMount() {
+        const {httpRequestJsonLocal} = superdeskApi;
+        const {getLanguageVocabulary} = superdeskApi.entities.vocabulary;
+        const searchProviderName = appConfig.planning.event_related_item_search_provider_name;
+
+        if (searchProviderName != null) {
+            httpRequestJsonLocal<IRestApiResponse<any>>({
+                method: 'GET',
+                path: '/search_providers',
+                urlParams: {
+                    manage: 1,
+                }
+            }).then((result) => {
+                const repoId = result._items.find((provider) => (
+                    provider.search_provider === searchProviderName
+                ))?._id;
+
+                this.setState({
+                    repo: repoId,
+                    languages: [
+                        ...getLanguageVocabulary().items.map(({name, qcode}) => ({label: name, code: qcode})),
+                        {
+                            label: 'All languages',
+                            code: ''
+                        }
+                    ]
+                });
+            });
+        }
+    }
+
+    componentDidUpdate(_prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
+        if (prevState.activeLanguage.code !== this.state.activeLanguage.code
+            || prevState.searchQuery !== this.state.searchQuery
+            || prevState.repo !== this.state.repo
+        ) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({
+                loading: true,
+            });
+        }
+    }
+
+    render(): React.ReactNode {
+        const {closeModal} = this.props;
+        const {gettext} = superdeskApi.localization;
+        const {getProjectedFieldsArticle} = superdeskApi.entities.article;
+        const {httpRequestJsonLocal} = superdeskApi;
+        const {superdeskToElasticQuery} = superdeskApi.helpers;
+
+        return (
+            <Modal
+                headerTemplate={gettext('Search Related Articles')}
+                visible
+                contentPadding="none"
+                contentBg="medium"
+                size="x-large"
+                onHide={closeModal}
+                footerTemplate={(
+                    <Spacer h gap="8" noWrap alignItems="end" justifyContent="end">
+                        <Button
+                            onClick={() => {
+                                closeModal();
+                            }}
+                            text={gettext('Cancel')}
+                            style="filled"
+                        />
+                        <Button
+                            onClick={() => {
+                                this.props.onChange(cleanArticlesFields(this.state.currentlySelectedArticles ?? []));
+                                closeModal();
+                            }}
+                            disabled={JSON.stringify(this.props.selectedArticles)
+                                === JSON.stringify(this.state.currentlySelectedArticles)}
+                            text={gettext('Apply')}
+                            style="filled"
+                            type="primary"
+                        />
+                    </Spacer>
+                )}
+            >
+                <LayoutContainer>
+                    <HeaderPanel>
+                        <SubNav className="px-2">
+                            <SearchBar
+                                value={this.state.searchQuery}
+                                onSubmit={(value: string) => {
+                                    this.setState({
+                                        searchQuery: value,
+                                    });
+                                }}
+                                placeholder={gettext('Search...')}
+                                boxed
+                            >
+                                <Dropdown
+                                    maxHeight={300}
+                                    append
+                                    zIndex={2001}
+                                    items={[
+                                        {
+                                            type: 'group',
+                                            items: this.state.languages.map((language) => ({
+                                                label: language.label,
+                                                onSelect: () => {
+                                                    this.setState({
+                                                        activeLanguage: language
+                                                    });
+                                                }
+                                            }))
+                                        },
+                                    ]}
+                                >
+                                    {this.state.activeLanguage.label}
+                                </Dropdown>
+                            </SearchBar>
+                        </SubNav>
+                    </HeaderPanel>
+                    <MainPanel>
+                        <WithPagination
+                            key={this.state.activeLanguage.code + this.state.searchQuery + this.state.repo}
+                            pageSize={20}
+                            getItems={(pageNo, pageSize, signal) => {
+                                if (this.state.repo == null) {
+                                    return Promise.resolve({items: [], itemCount: 0});
+                                }
+
+                                const query: ISuperdeskQuery = {
+                                    filter: {},
+                                    page: pageNo,
+                                    max_results: pageSize,
+                                    sort: [{versioncreated: 'desc'}],
+                                };
+                                const urlParams: {[key: string]: any} = {
+                                    aggregations: 0,
+                                    es_highlight: 1,
+                                    repo: this.state.repo,
+                                    projections: JSON.stringify(getProjectedFieldsArticle()),
+                                };
+
+                                if (this.state.activeLanguage.code !== '') {
+                                    query.filter.language = {$eq: this.state.activeLanguage.code};
+                                    urlParams.params = {languages: this.state.activeLanguage.code};
+                                }
+
+                                if (this.state.searchQuery !== '') {
+                                    query.fullTextSearch = this.state.searchQuery.toLowerCase();
+                                }
+
+                                return httpRequestJsonLocal<IRestApiResponse<Partial<IArticle>>>({
+                                    method: 'GET',
+                                    path: '/search_providers_proxy',
+                                    urlParams: {
+                                        ...urlParams,
+                                        ...superdeskToElasticQuery(query),
+                                    },
+                                    abortSignal: signal,
+                                })
+                                    .then((res) => {
+                                        this.setState({
+                                            loading: false,
+                                        });
+
+                                        return {items: res._items, itemCount: res._meta.total};
+                                    });
+                            }}
+                        >
+                            {
+                                (items: Array<Partial<IArticle>>) => (
+                                    <div className="sd-padding-y--1-5">
+                                        <Spacer
+                                            v
+                                            gap="4"
+                                            justifyContent="center"
+                                            alignItems="center"
+                                            noWrap
+                                        >
+                                            {items.map((articleFromArchive) => (
+                                                <RelatedArticlesListComponent
+                                                    key={articleFromArchive.guid}
+                                                    article={articleFromArchive}
+                                                    setPreview={(itemToPreview) => {
+                                                        this.setState({
+                                                            previewItem: itemToPreview,
+                                                        });
+                                                    }}
+                                                    removeArticle={(articleId: string) => {
+                                                        const filteredArray =
+                                                [...(this.state.currentlySelectedArticles ?? [])]
+                                                    .filter(({guid}) => guid !== articleId);
+
+                                                        this.setState({
+                                                            currentlySelectedArticles: filteredArray
+                                                        });
+                                                    }}
+                                                    prevSelected={(this.props.selectedArticles ?? [])
+                                                        .find((x) => x.guid === articleFromArchive.guid) != null
+                                                    }
+                                                    addArticle={(article: Partial<IArticle>) => {
+                                                        this.setState({
+                                                            currentlySelectedArticles: [
+                                                                ...(this.state.currentlySelectedArticles ?? []),
+                                                                {
+                                                                    ...article,
+                                                                    search_provider: this.state.repo,
+                                                                },
+                                                            ]
+                                                        });
+                                                    }}
+                                                    openInPreview={
+                                                this.state.previewItem?.guid === articleFromArchive.guid
+                                                    }
+                                                />
+                                            ))}
+                                        </Spacer>
+                                    </div>
+                                )
+                            }
+                        </WithPagination>
+                        {this.state.loading && (
+                            <div
+                                style={{
+                                    justifySelf: 'center',
+                                    alignSelf: 'center',
+                                    display: 'flex',
+                                    width: '100%',
+                                    height: '100%',
+                                }}
+                            >
+                                <Loader overlay />
+                            </div>
+                        )}
+                    </MainPanel>
+                    <RightPanel open={this.state.previewItem != null}>
+                        <Panel
+                            open={this.state.previewItem != null}
+                            side="right"
+                            size="medium"
+                            className="sd-panel-bg--000"
+                        >
+                            <PanelHeader
+                                title={gettext('Article preview')}
+                                onClose={() => {
+                                    this.setState({
+                                        previewItem: null,
+                                    });
+                                }}
+                            />
+                            <PanelContent empty={this.state.previewItem == null} >
+                                <PanelContentBlock>
+                                    {this.state.previewItem && (<PreviewArticle item={this.state.previewItem} />)}
+                                </PanelContentBlock>
+                            </PanelContent>
+                        </Panel>
+                    </RightPanel>
+                </LayoutContainer>
+            </Modal>
+        );
+    }
+}
diff --git a/client/components/fields/editor/EventRelatedArticles/PreviewArticle.tsx b/client/components/fields/editor/EventRelatedArticles/PreviewArticle.tsx
new file mode 100644
index 000000000..fce2cc88a
--- /dev/null
+++ b/client/components/fields/editor/EventRelatedArticles/PreviewArticle.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+
+import {IArticle, IVocabulary} from 'superdesk-api';
+import {superdeskApi} from '../../../../superdeskApi';
+import {appConfig} from 'appConfig';
+
+import {ContentDivider, Heading} from 'superdesk-ui-framework/react';
+import {fakeEditor} from './utils';
+
+interface IProps {
+    item: Partial<IArticle>;
+}
+
+interface IState {
+    customFieldVocabularies: Array<IVocabulary>;
+    loading: boolean;
+}
+
+export class PreviewArticle extends React.PureComponent<IProps, IState> {
+    getLabel: (fieldId: string) => string;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            customFieldVocabularies: [],
+            loading: true,
+        };
+
+        this.getLabel = (fieldId: string) => fieldId;
+    }
+
+    componentDidMount(): void {
+        const {getLabelNameResolver} = superdeskApi.entities.article;
+        const {getCustomFieldVocabularies} = superdeskApi.entities.vocabulary;
+
+        getLabelNameResolver().then((getLabel: (fieldId: string) => string) => {
+            const customFieldVocabularies = getCustomFieldVocabularies();
+
+            this.getLabel = getLabel;
+
+            this.setState({
+                customFieldVocabularies: customFieldVocabularies,
+                loading: false,
+            });
+        });
+    }
+
+    render() {
+        const {gettext, formatDate} = superdeskApi.localization;
+        const {PreviewFieldType} = superdeskApi.components.authoring;
+        const {getSortedFields, getSortedFieldsFiltered} = superdeskApi.entities.article;
+
+        const {allFields, extractedFields} = getSortedFieldsFiltered(
+            'content',
+            fakeEditor,
+            this.props.item,
+            false,
+            this.state.customFieldVocabularies,
+            ['body_html', 'headline']
+        );
+        const headlineField = extractedFields['headline'];
+        const bodyField = extractedFields['body_html'];
+
+        return (
+            <div style={{width: '100%'}} className="preview-content">
+                <div>
+                    <div style={{flexGrow: 1}} className="css-table">
+                        <div className="tr">
+                            <div className="td sd-padding-b--0-5">
+                                <span className="form-label">{gettext('Last modified')}</span>
+                            </div>
+
+                            <div className="td sd-padding-b--0-5 sd-padding-l--4">
+                                {formatDate(new Date(this.props.item.versioncreated))}
+                            </div>
+                        </div>
+                        {
+                            getSortedFields(
+                                'header',
+                                fakeEditor,
+                                this.props.item,
+                                false,
+                                this.state.customFieldVocabularies,
+                            )
+                                .map((field) => (
+                                    <div key={field.id} className="tr">
+                                        <div className="td sd-padding-b--0-5">
+                                            <span className="form-label">{this.getLabel(field.id)}</span>
+                                        </div>
+
+                                        <div className="td sd-padding-b--0-5 sd-padding-l--4">
+                                            <PreviewFieldType field={field} language={this.props.item.language} />
+                                        </div>
+                                    </div>
+                                ))
+                        }
+                    </div>
+                    <ContentDivider />
+                    {
+                        headlineField?.id && (
+                            <Heading className="pb-2" type="h1">
+                                {headlineField.value}
+                            </Heading>
+                        )
+                    }
+                    {
+                        bodyField?.id && (
+                            <div className="sd-margin-t--0-5" key={bodyField.id}>
+                                <div
+                                    className="sd-text sd-font-size--medium"
+                                    dangerouslySetInnerHTML={{__html: bodyField.value as string}}
+                                />
+                            </div>
+                        )
+                    }
+                    {allFields.map((field) => (
+                        <div key={field.id}>
+                            {appConfig?.authoring?.preview?.hideContentLabels === true ? <br /> : (
+                                <Heading type="h3">
+                                    {this.getLabel(field.id)}
+                                </Heading>
+                            )}
+                            <div>
+                                <PreviewFieldType field={field} language={this.props.item.language} />
+                            </div>
+                        </div>
+                    ))}
+                    <br />
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/client/components/fields/editor/EventRelatedArticles/RelatedArticlesListComponent.tsx b/client/components/fields/editor/EventRelatedArticles/RelatedArticlesListComponent.tsx
new file mode 100644
index 000000000..6cf46c3c9
--- /dev/null
+++ b/client/components/fields/editor/EventRelatedArticles/RelatedArticlesListComponent.tsx
@@ -0,0 +1,213 @@
+import React from 'react';
+
+import {IArticle} from 'superdesk-api';
+import {superdeskApi} from '../../../../superdeskApi';
+
+import {ContentListItem, IconButton, Label, Spacer} from 'superdesk-ui-framework/react';
+
+interface IProps {
+    article: Partial<IArticle>;
+    prevSelected?: boolean;
+    addArticle?: (article: Partial<IArticle>) => void;
+    removeArticle: (id: string) => void;
+    setPreview?: (itemToPreview: Partial<IArticle>) => void;
+
+    // True if this component is rendered inside the editor field view
+    editorPreview?: boolean;
+
+    // True if the current article passed from props is in preview
+    openInPreview?: boolean;
+}
+
+interface IState {
+    hovered: boolean;
+    selected: boolean;
+}
+
+export class RelatedArticlesListComponent extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            hovered: false,
+            selected: this.props.prevSelected ?? false,
+        };
+    }
+
+    render() {
+        const {gettext} = superdeskApi.localization;
+        const {
+            article,
+            editorPreview,
+            removeArticle,
+            setPreview,
+            addArticle
+        } = this.props;
+        const {selected, hovered} = this.state;
+
+        return (
+            <div
+                style={{
+                    width: '100%'
+                }}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    setPreview?.(article);
+                }}
+                onMouseLeave={(e) => {
+                    this.setState({
+                        hovered: false,
+                    });
+
+                    e.stopPropagation();
+                    e.preventDefault();
+                }}
+                onMouseOver={(e) => {
+                    this.setState({
+                        hovered: true,
+                    });
+
+                    e.stopPropagation();
+                    e.preventDefault();
+                }}
+            >
+                <ContentListItem
+                    locked={false}
+                    itemColum={[
+                        {
+                            itemRow: [{
+                                content: (
+                                    <div
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+
+                                            if (!editorPreview) {
+                                                this.setState({
+                                                    selected: !this.state.selected
+                                                });
+                                                selected
+                                                    ? removeArticle(article.guid as string)
+                                                    : addArticle?.(article);
+                                            }
+                                        }}
+                                    >
+                                        <span
+                                            className="a11y-only"
+                                        >
+                                            {gettext('Article Type: {{articleType}}', {articleType: article.type})}
+                                        </span>
+                                        {
+                                            editorPreview && (
+                                                <IconButton
+                                                    ariaValue={gettext('Article Type: text')}
+                                                    icon="text"
+                                                    onClick={() => {
+                                                        //
+                                                    }}
+                                                />
+                                            )
+                                        }
+                                        {
+                                            !editorPreview && ((hovered && !selected) || selected ? (
+                                                <div className="icn-btn">
+                                                    <span
+                                                        className={`sd-checkbox ${selected ? 'checked' : 'unchecked'}`}
+                                                    />
+                                                </div>
+                                            ) : (
+                                                <IconButton
+                                                    ariaValue={gettext('Article Type: text')}
+                                                    icon="text"
+                                                    onClick={() => {
+                                                        //
+                                                    }}
+                                                />
+                                            ))
+                                        }
+                                    </div>
+                                ),
+                            }],
+                            border: true,
+                        },
+                        {
+                            itemRow: [
+                                {
+                                    content: (
+                                        <div
+                                            style={{
+                                                fontSize: 14,
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                            }}
+                                        >
+                                            <span>
+                                                {article.headline}
+                                            </span>
+                                        </div>
+                                    ),
+                                },
+                                {
+                                    content: (
+                                        <Spacer
+                                            h
+                                            gap="4"
+                                            justifyContent="start"
+                                            noWrap
+                                        >
+                                            <Label
+                                                text={article.language}
+                                                style="filled"
+                                                size="small"
+                                                type="primary"
+                                            />
+                                            <Label
+                                                text={article.type as string}
+                                                style="translucent"
+                                                size="small"
+                                                type="default"
+                                            />
+                                            <Label
+                                                text={article.state as string}
+                                                style="filled"
+                                                size="small"
+                                                type="sd-green"
+                                            />
+                                        </Spacer>
+                                    ),
+                                },
+                            ],
+                            fullwidth: true,
+                        },
+                        {
+                            itemRow: [{
+                                content: (
+                                    <span>{new Date(article.versioncreated).toDateString()}</span>
+                                ),
+                            }],
+                        }
+                    ]}
+                    loading={false}
+                    activated={false}
+                    action={this.props.editorPreview && (
+                        <IconButton
+                            ariaValue={gettext('Remove')}
+                            icon="trash"
+                            onClick={() => {
+                                removeArticle(article.guid as string);
+                            }}
+                        />
+                    )}
+                    selected={this.props.openInPreview}
+                    archived={false}
+                    onClick={() => {
+                        this.props.setPreview?.(this.props.article);
+                    }}
+                />
+            </div>
+        );
+    }
+}
diff --git a/client/components/fields/editor/EventRelatedArticles/utils.ts b/client/components/fields/editor/EventRelatedArticles/utils.ts
new file mode 100644
index 000000000..bc4d423c5
--- /dev/null
+++ b/client/components/fields/editor/EventRelatedArticles/utils.ts
@@ -0,0 +1,187 @@
+import {IArticle} from 'superdesk-api';
+
+export const fakeEditor: any = {
+    slugline: {
+        order: 0,
+        sdWidth: 'full',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    keywords: null,
+    language: null,
+    usageterms: null,
+    genre: {
+        order: 1,
+        sdWidth: 'half',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    anpa_take_key: null,
+    place: {
+        order: 2,
+        sdWidth: 'half',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    priority: {
+        order: 3,
+        sdWidth: 'quarter',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    urgency: {
+        order: 4,
+        sdWidth: 'quarter',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    anpa_category: {
+        order: 5,
+        sdWidth: 'full',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    subject: {
+        order: 6,
+        sdWidth: 'full',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    company_codes: null,
+    ednote: {
+        order: 7,
+        sdWidth: 'full',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    authors: {
+        order: 8,
+        sdWidth: 'full',
+        enabled: true,
+        section: 'header',
+        required: false
+    },
+    headline: {
+        order: 9,
+        sdWidth: 'full',
+        formatOptions: [],
+        enabled: true,
+        section: 'content',
+        required: true
+    },
+    sms: null,
+    abstract: {
+        order: 10,
+        formatOptions: [
+            'bold',
+            'italic',
+            'underline',
+            'link'
+        ],
+        editor3: true,
+        enabled: true,
+        sdWidth: 'full',
+        section: 'content',
+        required: false
+    },
+    byline: {
+        order: 11,
+        enabled: true,
+        sdWidth: 'full',
+        section: 'content',
+        required: false
+    },
+    dateline: {
+        order: 12,
+        enabled: true,
+        sdWidth: 'full',
+        section: 'content',
+        required: false
+    },
+    body_html: {
+        order: 13,
+        formatOptions: [
+            'h2',
+            'bold',
+            'italic',
+            'underline',
+            'quote',
+            'link',
+            'embed',
+            'media'
+        ],
+        cleanPastedHTML: false,
+        editor3: true,
+        enabled: true,
+        sdWidth: 'full',
+        section: 'content',
+        required: false
+    },
+    footer: null,
+    body_footer: null,
+    sign_off: {
+        order: 14,
+        enabled: true,
+        sdWidth: 'full',
+        section: 'header',
+        required: false
+    },
+    feature_media: {
+        enabled: true,
+        sdWidth: 'full',
+        section: 'content',
+        required: false,
+        order: 15
+    },
+    media_description: {
+        enabled: true,
+        sdWidth: 'full',
+        section: 'content',
+        required: false,
+        order: 16
+    },
+    attachments: null,
+    rundown_item_types: null,
+    camera: null,
+    rundown_subitem_types: null,
+    rundown_item_status: null,
+    topics: null
+};
+
+export function cleanArticlesFields(articles: Array<Partial<IArticle>>) {
+    const fieldsToKeep: Array<keyof IArticle> = [
+        'guid',
+        'type',
+        'state',
+        'version',
+        'headline',
+        'slugline',
+        'versioncreated',
+        'source',
+        'pubstatus',
+        'language',
+        'word_count',
+        'search_provider',
+    ];
+
+    for (let i = 0; i < articles.length; i++) {
+        let field: keyof IArticle;
+
+        for (field in articles[i]) {
+            if (!fieldsToKeep.includes(field)) {
+                delete articles[i][field];
+            }
+        }
+    }
+
+    return articles;
+}
+
diff --git a/client/components/fields/resources/events.ts b/client/components/fields/resources/events.ts
index 0f291e80f..8fe5b5e15 100644
--- a/client/components/fields/resources/events.ts
+++ b/client/components/fields/resources/events.ts
@@ -5,6 +5,7 @@ import {superdeskApi} from '../../../superdeskApi';
 import {EditorFieldMultilingualText} from '../editor/base/multilingualText';
 import {EditorFieldDateTime} from '../editor/base/dateTime';
 import {EditorFieldEventLinks} from '../editor/EventLinks';
+import {EditorFieldEventRelatedItems} from '../editor/EventRelatedArticles/EditorFieldEventRelatedItems';
 
 registerEditorField(
     'definition_long',
@@ -94,3 +95,15 @@ registerEditorField(
     null,
     false,
 );
+
+registerEditorField(
+    'related_items',
+    EditorFieldEventRelatedItems,
+    () => ({
+        label: superdeskApi.localization.gettext('Related Articles'),
+        field: 'related_items',
+        singleValue: true,
+    }),
+    null,
+    false,
+);
diff --git a/client/components/fields/resources/registerEditorFields.tsx b/client/components/fields/resources/registerEditorFields.tsx
index b7b455c7e..ce66ea9d9 100644
--- a/client/components/fields/resources/registerEditorFields.tsx
+++ b/client/components/fields/resources/registerEditorFields.tsx
@@ -49,7 +49,7 @@ export function registerEditorField<ComponentProps extends IEditorFieldProps, St
     props?: (currentProps: ComponentProps & StateProps) => Partial<ComponentProps & StateProps>,
     mapStateToProps?: (state: IPlanningAppState) => Partial<ComponentProps & StateProps>,
     forwardRef?: boolean
-) {
+): void {
     FIELD_TO_EDITOR_COMPONENT[field] = editorHoc({
         Component,
         props,
diff --git a/client/extension_bridge.ts b/client/extension_bridge.ts
index 9448dcfde..ca938d98d 100644
--- a/client/extension_bridge.ts
+++ b/client/extension_bridge.ts
@@ -1,4 +1,3 @@
-import {IAssignmentItem} from 'interfaces';
 import React from 'react';
 
 import {IVocabularyItem} from 'superdesk-api';
@@ -12,6 +11,9 @@ import {EditorFieldVocabulary, IEditorFieldVocabularyProps} from './components/f
 import {getVocabularyItemFieldTranslated} from './utils/vocabularies';
 import {getUserInterfaceLanguageFromCV} from './utils/users';
 
+import {registerEditorField} from './components/fields/resources/registerEditorFields';
+import {IAssignmentItem, IEditorFieldProps, IPlanningAppState} from 'interfaces';
+
 // KEEP IN SYNC WITH client/planning-extension/src/extension_bridge.ts
 interface IExtensionBridge {
     assignments: {
@@ -45,6 +47,15 @@ interface IExtensionBridge {
             EditorFieldVocabulary: React.ComponentType<IEditorFieldVocabularyProps>;
         };
     };
+    fields: {
+        registerEditorField<ComponentProps extends IEditorFieldProps, StateProps extends {}>(
+            field: string,
+            Component: React.ComponentClass<ComponentProps>,
+            props?: (currentProps: ComponentProps & StateProps) => Partial<ComponentProps & StateProps>,
+            mapStateToProps?: (state: IPlanningAppState) => Partial<ComponentProps & StateProps>,
+            forwardRef?: boolean
+        ): void;
+    };
 }
 
 /**
@@ -73,4 +84,7 @@ export const extensionBridge: IExtensionBridge = {
             EditorFieldVocabulary,
         },
     },
+    fields: {
+        registerEditorField,
+    }
 };
diff --git a/client/interfaces.ts b/client/interfaces.ts
index 5b71212dc..a8b45e6f8 100644
--- a/client/interfaces.ts
+++ b/client/interfaces.ts
@@ -294,6 +294,7 @@ export interface IPlanningConfig extends ISuperdeskGlobalConfig {
         allowed_coverage_link_types?: Array<string>;
         autosave_timeout?: number;
         default_create_planning_series_with_event_series?: boolean;
+        event_related_item_search_provider_name?: string;
     };
 }
 
@@ -431,16 +432,17 @@ export interface IEmbeddedPlanningItem {
 
 export interface IRelatedItem {
     guid: string;
-    type: string;
-    state: string;
-    version: string;
-    headline: string;
-    slugline: string;
-    versioncreated: string;
-    source: string;
     search_provider: string;
-    pubstatus: string;
-    language: string;
+    type?: string;
+    state?: string;
+    version?: string;
+    headline?: string;
+    slugline?: string;
+    versioncreated?: string;
+    source?: string;
+    pubstatus?: string;
+    language?: string;
+    word_count?: number;
 }
 
 export interface IEventItem extends IBaseRestApiResponse {
diff --git a/client/planning-extension/src/extension.ts b/client/planning-extension/src/extension.ts
index 6bf4d80ed..48e9632d4 100644
--- a/client/planning-extension/src/extension.ts
+++ b/client/planning-extension/src/extension.ts
@@ -13,6 +13,7 @@ import {AssignmentsList} from './assignments-overview';
 import {IPlanningExtensionConfigurationOptions} from './extension_configuration_options';
 import {AutopostIngestRuleEditor} from './ingest_rule_autopost/AutopostIngestRuleEditor';
 import {AutopostIngestRulePreview} from './ingest_rule_autopost/AutopostIngestRulePreview';
+import {extensionBridge} from './extension_bridge';
 
 function onSpike(superdesk: ISuperdesk, item: IArticle) {
     const {gettext} = superdesk.localization;
@@ -135,4 +136,6 @@ const extension: IExtension = {
     },
 };
 
+export const registerEditorField = extensionBridge.fields.registerEditorField;
+
 export default extension;
diff --git a/client/planning-extension/src/extension_bridge.ts b/client/planning-extension/src/extension_bridge.ts
index 9bf24d161..16fdc8fdd 100644
--- a/client/planning-extension/src/extension_bridge.ts
+++ b/client/planning-extension/src/extension_bridge.ts
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import {IVocabularyItem} from 'superdesk-api';
-import {IAssignmentItem, IEditorFieldProps} from '../../interfaces';
+import {IAssignmentItem, IEditorFieldProps, IPlanningAppState} from '../../interfaces';
 
-// KEEP IN SYNC WITH client/extension_bridge.ts
 interface IEditorFieldVocabularyProps extends IEditorFieldProps {
     options: Array<any>;
     valueKey?: string;
@@ -13,6 +12,7 @@ interface IEditorFieldVocabularyProps extends IEditorFieldProps {
     valueAsString?: boolean;
 }
 
+// KEEP IN SYNC WITH client/extension_bridge.ts
 interface IExtensionBridge {
     assignments: {
         utils: {
@@ -44,6 +44,15 @@ interface IExtensionBridge {
             EditorFieldVocabulary: React.ComponentType<IEditorFieldVocabularyProps>;
         };
     };
+    fields: {
+        registerEditorField<ComponentProps extends IEditorFieldProps, StateProps extends {}>(
+            field: string,
+            Component: React.ComponentClass<ComponentProps>,
+            props?: (currentProps: ComponentProps & StateProps) => Partial<ComponentProps & StateProps>,
+            mapStateToProps?: (state: IPlanningAppState) => Partial<ComponentProps & StateProps>,
+            forwardRef?: boolean
+        ): void;
+    };
 }
 
 export const extensionBridge = (window as unknown as any)['extension_bridge'] as IExtensionBridge;
diff --git a/client/validators/index.ts b/client/validators/index.ts
index 93e77b3ac..0d77b7797 100644
--- a/client/validators/index.ts
+++ b/client/validators/index.ts
@@ -143,6 +143,7 @@ export const validators = {
         registration_details: [formProfile],
         accreditation_infotype: [formProfile],
         accreditation_deadline: [formProfile],
+        related_items: [formProfile],
         recurring_rules: [eventValidators.validateRecurringRules],
         place: [formProfile],
         reference: [formProfile],
diff --git a/package-lock.json b/package-lock.json
index e3acc2fde..65ced7982 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,13 +5,13 @@
   "requires": true,
   "dependencies": {
     "@babel/code-frame": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "dev": true,
       "requires": {
-        "@babel/highlight": "^7.23.4",
-        "chalk": "^2.4.2"
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
       }
     },
     "@babel/helper-validator-identifier": {
@@ -21,26 +21,27 @@
       "dev": true
     },
     "@babel/highlight": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+      "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
       "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0"
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       }
     },
     "@babel/parser": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
-      "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
       "dev": true
     },
     "@babel/runtime": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
-      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
       "requires": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -332,18 +333,18 @@
       "dev": true
     },
     "@types/node": {
-      "version": "20.11.28",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.28.tgz",
-      "integrity": "sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==",
+      "version": "20.11.30",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
+      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
       "dev": true,
       "requires": {
         "undici-types": "~5.26.4"
       }
     },
     "@types/prop-types": {
-      "version": "15.7.11",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
       "dev": true
     },
     "@types/react": {
@@ -1636,15 +1637,16 @@
       "dev": true
     },
     "array-includes": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
-      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
         "is-string": "^1.0.7"
       }
     },
@@ -1672,28 +1674,30 @@
       "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ=="
     },
     "array.prototype.filter": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.3.tgz",
-      "integrity": "sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.4.tgz",
+      "integrity": "sha512-r+mCJ7zXgXElgR4IRC+fkvNCeoaavWBs6EdCso5Tbcf+iEMKzBU/His60lt34WEZ9vlb8wDkZvQGcVI5GwkfoQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
         "es-array-method-boxes-properly": "^1.0.0",
+        "es-object-atoms": "^1.0.0",
         "is-string": "^1.0.7"
       }
     },
     "array.prototype.find": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.2.tgz",
-      "integrity": "sha512-DRumkfW97iZGOfn+lIXbkVrXL04sfYKX+EfOodo8XboR5sxPDVvOjZTF/rysusa9lmhmSOeD6Vp6RKQP+eP4Tg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.3.tgz",
+      "integrity": "sha512-fO/ORdOELvjbbeIfZfzrXFMhYHGofRGqd+am9zm3tZ4GlJINj/pA2eITyfd65Vg6+ZbHd/Cys7stpoRSWtQFdA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
       }
     },
     "array.prototype.flat": {
@@ -2631,9 +2635,9 @@
       }
     },
     "caniuse-db": {
-      "version": "1.0.30001597",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001597.tgz",
-      "integrity": "sha512-iSDUKRsVRcVXFoBeWycN60ax+zYFe72ZswOMJESEOmn78WDfEVyykoP9RgAWBNVnyfCUoCfKYFaQAKXqqR9hnA==",
+      "version": "1.0.30001600",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001600.tgz",
+      "integrity": "sha512-BS+RAD1DggiDlE2KaBUWKsMDuVmmh3hCM5LI0OW25mGlPttGLeOjDUa1DmZvJVFCXvtshY4BTyFgv31eFTLg8g==",
       "dev": true
     },
     "caseless": {
@@ -3745,6 +3749,39 @@
       "dev": true,
       "optional": true
     },
+    "data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
+    "data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
+    "data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      }
+    },
     "date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -4338,9 +4375,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.707",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.707.tgz",
-      "integrity": "sha512-qRq74Mo7ChePOU6GHdfAJ0NREXU8vQTlVlfWz3wNygFay6xrd/fY2J7oGHwrhFeU30OVctGLdTh/FcnokTWpng==",
+      "version": "1.4.719",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.719.tgz",
+      "integrity": "sha512-FbWy2Q2YgdFzkFUW/W5jBjE9dj+804+98E4Pup78JBPnbdb3pv6IneY2JCPKdeKLh3AOKHQeYf+KwLr7mxGh6Q==",
       "dev": true
     },
     "elliptic": {
@@ -4624,17 +4661,21 @@
       }
     },
     "es-abstract": {
-      "version": "1.22.5",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz",
-      "integrity": "sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.2.tgz",
+      "integrity": "sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==",
       "dev": true,
       "requires": {
         "array-buffer-byte-length": "^1.0.1",
         "arraybuffer.prototype.slice": "^1.0.3",
         "available-typed-arrays": "^1.0.7",
         "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
         "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
@@ -4645,10 +4686,11 @@
         "has-property-descriptors": "^1.0.2",
         "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "hasown": "^2.0.1",
+        "hasown": "^2.0.2",
         "internal-slot": "^1.0.7",
         "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.1",
         "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.3",
@@ -4659,17 +4701,17 @@
         "object-keys": "^1.1.1",
         "object.assign": "^4.1.5",
         "regexp.prototype.flags": "^1.5.2",
-        "safe-array-concat": "^1.1.0",
+        "safe-array-concat": "^1.1.2",
         "safe-regex-test": "^1.0.3",
-        "string.prototype.trim": "^1.2.8",
-        "string.prototype.trimend": "^1.0.7",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
         "string.prototype.trimstart": "^1.0.7",
         "typed-array-buffer": "^1.0.2",
         "typed-array-byte-length": "^1.0.1",
         "typed-array-byte-offset": "^1.0.2",
         "typed-array-length": "^1.0.5",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.14"
+        "which-typed-array": "^1.1.15"
       }
     },
     "es-array-method-boxes-properly": {
@@ -4718,6 +4760,15 @@
         }
       }
     },
+    "es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0"
+      }
+    },
     "es-set-tostringtag": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
@@ -5328,9 +5379,9 @@
       }
     },
     "express": {
-      "version": "4.18.3",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.3.tgz",
-      "integrity": "sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
@@ -5338,7 +5389,7 @@
         "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -5373,9 +5424,9 @@
           "dev": true
         },
         "cookie": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-          "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+          "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
           "dev": true
         },
         "etag": {
@@ -8759,6 +8810,15 @@
         "hasown": "^2.0.0"
       }
     },
+    "is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "requires": {
+        "is-typed-array": "^1.1.13"
+      }
+    },
     "is-date-object": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
@@ -11579,25 +11639,26 @@
       }
     },
     "object.entries": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz",
-      "integrity": "sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "object.fromentries": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
-      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "object.map": {
@@ -11640,14 +11701,14 @@
       }
     },
     "object.values": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
-      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "obuf": {
@@ -12252,6 +12313,12 @@
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
       "dev": true
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
@@ -15386,36 +15453,37 @@
       }
     },
     "string.prototype.trim": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
-      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "string.prototype.trimend": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
-      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "string.prototype.trimstart": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
-      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "string_decoder": {
@@ -15935,7 +16003,7 @@
       }
     },
     "superdesk-core": {
-      "version": "github:superdesk/superdesk-client-core#bc53ffd6a804478ddd147daeebd8d92fc61c29a9",
+      "version": "github:superdesk/superdesk-client-core#e89f22593dcf970e49be4292b36511b230976262",
       "from": "github:superdesk/superdesk-client-core#develop",
       "dev": true,
       "requires": {
@@ -16640,9 +16708,9 @@
       }
     },
     "typed-array-length": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.5.tgz",
-      "integrity": "sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.7",
diff --git a/server/planning/events/events_schema.py b/server/planning/events/events_schema.py
index 68124e61e..047fcd811 100644
--- a/server/planning/events/events_schema.py
+++ b/server/planning/events/events_schema.py
@@ -387,7 +387,7 @@
                 "guid": {"type": "string", "required": True},
                 "type": {"type": "string"},
                 "state": {"type": "string"},
-                "version": {"type": "string"},
+                "version": metadata_schema["version"],
                 "headline": {"type": "string"},
                 "slugline": {"type": "string"},
                 "versioncreated": metadata_schema["versioncreated"],
@@ -395,6 +395,7 @@
                 "search_provider": {"type": "string"},
                 "pubstatus": {"type": "string"},
                 "language": {"type": "string"},
+                "word_count": metadata_schema["word_count"],
             },
         },
         "mapping": {
diff --git a/server/planning/types/__init__.py b/server/planning/types/__init__.py
index fb12b2e38..627d16e76 100644
--- a/server/planning/types/__init__.py
+++ b/server/planning/types/__init__.py
@@ -64,3 +64,4 @@ class EventRelatedItem(TypedDict, total=False):
     search_provider: str
     pubstatus: str
     language: str
+    word_count: int