copy embed code (#16)

* copy embed code

* fix lint

* add a TODO

* get license name

client/app.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {registerExtensions} from 'newsroom-core/assets/index';
+import {CopyEmbedCodeBanner} from './copy-embed-code-banner';
+
+registerExtensions({
+    prepareWirePreview: (previewHtmlElement, article) => {
+        for (const embedBlockHtmlElement of previewHtmlElement.querySelectorAll('.embed-block')) {
+            const embeddedArticleId = embedBlockHtmlElement.getAttribute('data-association-key');
+
+            if (embeddedArticleId == null) {
+                continue;
+            }
+
+            const embeddedArticle = article.associations?.[embeddedArticleId];
+
+            if (embeddedArticle == null) {
+                continue;
+            }
+
+            const licenseName = (embeddedArticle.subject ?? []).find(({scheme}) => scheme === 'licence_type')?.name;
+
+            if (licenseName == null) {
+                continue;
+            }
+
+            const div = document.createElement('div');
+
+            div.style.textAlign = 'center';
+
+            ReactDOM.render(
+                <CopyEmbedCodeBanner
+                    license={licenseName}
+                    onCopy={() => {
+                        navigator.clipboard.writeText(embedBlockHtmlElement.innerHTML);
+                    }}
+                />,
+                div,
+            );
+
+            const parent = embedBlockHtmlElement.parentElement;
+
+            if (parent != null) {
+                parent.insertBefore(div, embedBlockHtmlElement.nextSibling);
+            }
+
+        }
+
+        return previewHtmlElement;
+
+    }
+});

client/copy-embed-code-banner.tsx

@@ -0,0 +1,60 @@
+import React, {useState} from 'react';
+import {exposed} from 'newsroom-core/assets/index';
+
+const bannerStyle: React.CSSProperties = {
+    display: 'flex',
+    gap: 16,
+    alignItems: 'center',
+    background: 'var(--color-background--muted)',
+    padding: 'var(--space--1-5)',
+    border: '1px solid var(--color-line--light)',
+    borderRadius: 'var(--border-radius--m)',
+    color: 'var(--color-text--muted)',
+    marginTop: 16,
+};
+
+const textStyle: React.CSSProperties = {
+    margin: 0,
+    textAlign: 'justify',
+    lineHeight: 1.2,
+    fontSize: 'var(--text-size--medium)',
+}
+
+const {Button} = exposed.ui;
+const {gettext} = exposed.locale;
+
+interface IProps {
+    onCopy(): void;
+    license: string;
+}
+
+export function CopyEmbedCodeBanner(props: IProps) {
+    const initialLabel = gettext('copy');
+    const [label, setLabel] = useState(initialLabel);
+
+    return (
+        <div style={bannerStyle}>
+            <div>
+                <img src="/theme/360-Logo.png" style={{width: '100%', maxHeight: 32}} />
+            </div>
+
+            <p style={textStyle}>
+                {gettext('Copy this into your own story. Available under {{x}} license.', {x: props.license})}
+            </p>
+
+            <Button
+                text={label}
+                size="small"
+                onClick={() => {
+                    props.onCopy();
+
+                    setLabel(gettext('Copied!'));
+
+                    setTimeout(() => {
+                        setLabel(initialLabel);
+                    }, 1000);
+                }}
+            />
+        </div>
+    );
+}

client/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "newsroom-core/tsconfig",
+  "include": [
+    "."
+  ],
+}

server/settings.py

@@ -93,4 +93,3 @@
 ]
 
 PUBLIC_DASHBOARD = True
-