Merge pull request #4272 from coralproject/develop

v8.3.0
coralproject · Jun 21, 2023 · da121c3 · da121c3
2 parents 5b87ba5 + 765fd53
commit da121c3
Show file tree

Hide file tree

Showing 344 changed files with 2,473 additions and 32,196 deletions.
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -94,6 +94,8 @@ jobs:
         run: npm run test:client:other -- --ci --runInBand --reporters=default --reporters=jest-junit
       -
         name: Build
+        env:
+          NODE_OPTIONS: "--max-old-space-size=8192"
         run: npm run build
       -
         name: Verify Bundle Size

diff --git a/.github/workflows/build-test-deploy.yml b/.github/workflows/build-test-deploy.yml
@@ -101,6 +101,8 @@ jobs:
         run: npm run test:client:other -- --ci --runInBand --reporters=default --reporters=jest-junit
       -
         name: Build
+        env:
+          NODE_OPTIONS: "--max-old-space-size=8192"
         run: npm run build
       -
         name: Verify Bundle Size

diff --git a/CLIENT_EVENTS.md b/CLIENT_EVENTS.md
@@ -94,6 +94,7 @@ createComment.error
 - <a href="#createCommentReaction">createCommentReaction</a>
 - <a href="#createCommentReply">createCommentReply</a>
 - <a href="#editComment">editComment</a>
+- <a href="#embedInteraction">embedInteraction</a>
 - <a href="#featureComment">featureComment</a>
 - <a href="#gotoModeration">gotoModeration</a>
 - <a href="#ignoreUser">ignoreUser</a>
@@ -293,6 +294,12 @@ createComment.error
       };
   }
   ```
+- <a id="embedInteraction">**embedInteraction**</a>: This event is emitted when the viewer clicks on a link in the single comment embed that goes to the comment's permalink page.
+  ```ts
+  {
+      interaction: string;
+  }
+  ```
 - <a id="featureComment">**featureComment.success**, **featureComment.error**</a>: This event is emitted when the viewer features a comment.
   ```ts
   {

diff --git a/docs/docs/comment-embed.md b/docs/docs/comment-embed.md
@@ -0,0 +1,98 @@
+---
+title: Comment Embed
+---
+
+Add the `commentEmbed.js` script to your `html` tree. On a page that includes the _Stream Embed_ this is done for you automatically, however for best performance we recommend to include it into the `<head>` tag.
+
+```html
+<script
+  class="coral-script"
+  src="//{{ CORAL_DOMAIN_NAME }}/assets/js/commentEmbed.js"
+  defer
+></script>
+```
+
+> **NOTE:** Replace the value of `{{ CORAL_DOMAIN_NAME }}` with the location of your running instance of Coral.
+
+### Embed code
+
+To get the embed code for a comment, go to the comment in the stream and click to open the moderation options dropdown. Click `Embed code`, and this will copy the code to your clipboard. Paste the embed code where you want to embed the comment. It will look something like this:
+
+```html
+<div
+  class="coral-comment-embed"
+  style="background-color: #f4f7f7; padding: 8px;"
+  data-commentID="COMMENT_ID"
+  data-allowReplies="true"
+  data-reactionLabel="Respect"
+>
+  <div style="margin-bottom: 8px;">username</div>
+  <div><div>This is a comment.</div></div>
+</div>
+```
+
+After successful injection, it includes a shadow dom with the full comment embed inside of it.
+
+### Custom styles
+
+Any custom CSS and CSS Font Faces stylesheets that are configured in the `Advanced` admin configuration section will be used to style the comment embed.
+
+The comment embed uses the same [CSS classes](https://github.com/coralproject/talk/blob/develop/src/core/client/stream/classes.ts) that are available to style any comment in the stream. The comment embed also includes a `coral-comment-embed-container` class that can be used to style it specifically.
+
+### Advanced configuration
+
+You can configure your comment embed using `data-*` attributes as needed. The available `data-*` attributes are:
+
+- data-allowReplies
+
+When set to `"true"`, a reply button will appear with the embedded comment to encourage additional discussion on that specific comment or story. When set to `"false"`, reply buttons will not appear. When `data-allowReplies` is not present, it will default to what is configured under the `Advanced` admin configuration section for `Embedded comment replies`.
+
+- data-reactionLabel
+
+If you would like to provide a custom reaction label to use for the comment's reaction button.
+
+### Using Oembed
+
+You can also use our Oembed API endpoint to embed comments. To do so, call the endpoint `/api/services/oembed`.
+
+The Oembed endpoint accepts 4 query parameters:
+
+- url - required
+
+This should be the url for the comment's permalink. This is the url that is copied when you click `Share` on a comment in the stream.
+
+- allowReplies - optional
+
+When set to true, a reply button will appear with the embedded comment to encourage additional discussion on that specific comment or story. When set to false, reply buttons will not appear.
+
+- format - optional
+
+Only JSON format is currently supported.
+
+- reactionLabel - optional
+
+If you would like to provide a custom reaction label to use for the comment's reaction button.
+
+The Oembed endpoint returns:
+
+- html
+
+The full comment embed html including any default or custom CSS.
+
+- simpleCommentEmbedHtml
+
+The simple comment embed html includes the comment's text, comment author's username, and the CSS class that the `commentEmbed.js` script uses to inject the full comment embed within a shadow dom on your page.
+
+- embeddedMediaIframeScript
+
+If you are embedding a comment that includes embedded media (Twitter, Youtube, external media image), you will need to add a script to set the correct height for the embed. A message is already being posted via `postMessage` from the embedded media iframe in the Coral comment. An example of how this might be added can be found in `https://github.com/coralproject/talk/tree/develop/src/core/client/oembed/commentEmbed.html`. To support the embedded media height with this iframe script, you will need to attach the comment embed via shadow dom to an element with the id of `coral-comment-embed-shadowRoot-COMMENT_ID`.
+
+You will not need to add this script if you are using the Oembed API to add the `simpleCommentEmbedHtml` to your page to work with `commentEmbed.js` injection. The injection script will add the needed iframe script in this case.
+
+- width
+
+Recommended width for the embed.
+
+- height
+
+Recommended height for the embed.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coralproject/talk",
-  "version": "8.2.4",
+  "version": "8.3.0",
   "author": "The Coral Project",
   "homepage": "https://coralproject.net/",
   "sideEffects": [

diff --git a/src/core/build/createWebpackConfig.ts b/src/core/build/createWebpackConfig.ts
@@ -796,5 +796,44 @@ export default function createWebpackConfig(
         }),
       ]),
     },
+    /* Webpack config for oembed */
+    {
+      ...baseConfig,
+      optimization: {
+        ...baseConfig.optimization,
+        // Ensure that we never split the main library into chunks.
+        splitChunks: {
+          chunks: "async",
+        },
+        // We can turn on sideEffects here as we don't use
+        // css here and don't run into: https://github.com/webpack/webpack/issues/7094
+        sideEffects: true,
+      },
+      entry: [paths.appOEmbedIndex],
+      output: {
+        ...baseConfig.output,
+        // Each config needs a unique jsonpFunction name to avoid collisions of chunks.
+        jsonpFunction: "coralCommentEmbedWebpackJsonp",
+        // don't hash the count, cache-busting must be completed by the requester
+        // as this lives in a static template on the embed site.
+        filename: "assets/js/commentEmbed.js",
+      },
+      plugins: filterPlugins([
+        ...baseConfig.plugins!,
+        ...ifWatch(
+          // Generates a `commentEmbed.html` file with the <script> injected.
+          new HtmlWebpackPlugin({
+            filename: "commentEmbed.html",
+            template: paths.appCommentEmbedHTML,
+            inject: "body",
+          })
+        ),
+        new WebpackAssetsManifest({
+          output: "oembed-asset-manifest.json",
+          entrypoints: true,
+          integrity: true,
+        }),
+      ]),
+    },
   ];
 }
diff --git a/src/core/build/paths.ts b/src/core/build/paths.ts
@@ -47,6 +47,9 @@ export default {
   appEmbedAMPHTML: resolveSrc("core/client/embed/amp.html"),
   appEmbedStoryAMPHTML: resolveSrc("core/client/embed/storyAMP.html"),
 
+  appOEmbedIndex: resolveSrc("core/client/oembed/index.ts"),
+  appCommentEmbedHTML: resolveSrc("core/client/oembed/commentEmbed.html"),
+
   appDistStatic: resolveApp("dist/static"),
   appPublic: resolveApp("public"),
   appPackageJson: resolveApp("package.json"),

diff --git a/src/core/client/admin/App/Main.spec.tsx b/src/core/client/admin/App/Main.spec.tsx
diff --git a/src/core/client/admin/App/Navigation/Navigation.spec.tsx b/src/core/client/admin/App/Navigation/Navigation.spec.tsx
diff --git a/src/core/client/admin/App/Navigation/NavigationLink.spec.tsx b/src/core/client/admin/App/Navigation/NavigationLink.spec.tsx
diff --git a/src/core/client/admin/App/Navigation/__snapshots__/Navigation.spec.tsx.snap b/src/core/client/admin/App/Navigation/__snapshots__/Navigation.spec.tsx.snap
diff --git a/src/core/client/admin/App/Navigation/__snapshots__/NavigationLink.spec.tsx.snap b/src/core/client/admin/App/Navigation/__snapshots__/NavigationLink.spec.tsx.snap
diff --git a/src/core/client/admin/App/UserMenu/UserMenu.spec.tsx b/src/core/client/admin/App/UserMenu/UserMenu.spec.tsx
diff --git a/src/core/client/admin/App/UserMenu/__snapshots__/UserMenu.spec.tsx.snap b/src/core/client/admin/App/UserMenu/__snapshots__/UserMenu.spec.tsx.snap