implement extension point for copy embed (#880)

* implement an extension point to modify wire preview content

* fix lint

* add documentation on registering extensions

* make extensions work without having to modify webpack.config.js from root repo

* include newsroom_custom_js only if it is defined

* allow app.tsx; expose gettext and button

* add article argument to prepareWirePreview

* import app internally

* fix test

* refactor body html

* fix docs

---------

Co-authored-by: Tomas Kikutis <[email protected]>

DEVELOPMENT.md

@@ -102,3 +102,13 @@ It will run database migrations when needed.
 * Start **only redis** service via docker `docker-compose up redis`
 * Run the following command in a terminal `ssh -L 9200:data-sd:9201 -L 27017:data-sd:27017 host7.sourcefabric.org` - it will connect to the test server and forward ports of mongo db and elastic search services
 * start client and server using standard procedures (non-docker)
+
+
+## Extensions API
+
+Prerequisites:
+
+* ensure `client/app.ts` file is present in the root repository. If it's not present, create an empty file.
+* ensure `client/tsconfig.json` is present in the root repository. If it's not present, copy it from `newsroom-app`.
+
+To enable extensions open `client/app.ts`, import and call `registerExtensions` function from `newsroom-core`.

app.ts

@@ -0,0 +1 @@
+// dummy app fallback

assets/am-news/components/AmNewsApp.tsx

@@ -190,6 +190,7 @@ class AmNewsApp extends SearchBase<any> {
                         <div className={`wire-column__preview ${this.props.itemToPreview ? 'wire-column__preview--open' : ''}`}>
                             {this.props.itemToPreview &&
                                 <WirePreview
+                                    key={this.props.itemToPreview._id}
                                     item={this.props.itemToPreview}
                                     user={this.props.user}
                                     actions={this.filterActions(this.props.itemToPreview)}

assets/home/components/HomeApp.tsx

@@ -252,6 +252,7 @@ class HomeApp extends React.Component<IProps, {
             <div key='preview_test' className={`wire-column__preview ${this.props.itemToOpen ? 'wire-column__preview--open' : ''}`}>
                 {this.props.itemToOpen && (
                     <WirePreview
+                        key={this.props.itemToOpen._id}
                         item={this.props.itemToOpen}
                         user={this.props.user}
                         actions={this.filterActions(this.props.itemToOpen, this.props.previewConfig)}

assets/index.ts

@@ -1,6 +1,38 @@
-import {isTouchDevice} from 'utils';
+import {gettext, isTouchDevice} from 'utils';
 import 'primereact/resources/primereact.min.css';
+import {Button} from './ui/components/Button';
+import {IArticle} from 'interfaces';
 
 if (isTouchDevice()) {
     document.documentElement.classList.add('no-touch');
 }
+
+interface IExtensions {
+    prepareWirePreview?(content: HTMLElement, item: IArticle): HTMLElement;
+}
+
+export const extensions: IExtensions = {};
+
+export function registerExtensions(extensionsToRegister: IExtensions) {
+    Object.assign(extensions, extensionsToRegister);
+}
+
+interface IExposedForExtensions {
+    ui: {
+        Button: typeof Button,
+    };
+    locale: {
+        gettext: typeof gettext,
+    };
+}
+
+export const exposed: IExposedForExtensions = {
+    ui: {
+        Button,
+    },
+    locale: {
+        gettext,
+    },
+};
+
+import 'app';

assets/interfaces/content.ts

@@ -33,4 +33,6 @@ export interface IArticle extends IResourceItem {
     extra_items?: {[type: string]: {type: string, items: Array<any>}};
     deleted?: boolean; // Used only in the front-end, populated by wire/reducer
     bookmarks?: Array<string>;
+    body_html?: string;
+    subject?: Array<{name: string, scheme: string, code: string}>;
 }