add cmsEditorBase url param

To make this work I had to relax the origin checks in cms-editor. This seems safe to do, this editor is basically made to be embedded on any page in an iframe.

I also added a configuration for the serve package. By default it redirects *.html to just *. And when it does this it loses the url parameters. This breaks the embedding of cms-editor.html used by the iframe-control. Testing with serve is useful to make sure the admin.html file is working properly without having to deploy it.

Author: scytacki

cms/src/iframe-control.tsx

@@ -9,16 +9,21 @@ import { defaultCurriculumBranch } from "./cms-constants";
 import "./iframe-control.scss";
 
 (window as any).DISABLE_FIREBASE_SYNC = true;
+
+const cmsEditorBase = urlParams.cmsEditorBase ?? ".";
+// the URL is relative to the current url of the CMS
+// If the cmsEditorBase is an absolute url then the current url will be ignored
+const cmsEditorBaseURL = new URL(cmsEditorBase, window.location.href);
+const validOrigin = cmsEditorBaseURL.origin;
+
 interface IState {
   initialValue?: string;
-  validOrigin: string;
 }
 export class IframeControl extends React.Component<CmsWidgetControlProps, IState>  {
   constructor(props: CmsWidgetControlProps) {
     super(props);
     this.state = {
       initialValue: this.getValue(),
-      validOrigin: `${window.location.protocol}//${window.location.host}`
     };
   }
 
@@ -36,7 +41,7 @@ export class IframeControl extends React.Component<CmsWidgetControlProps, IState
   };
 
   sendInitialValueToEditor() {
-    const { initialValue, validOrigin } = this.state;
+    const { initialValue } = this.state;
     const iframedEditor = document.getElementById("editor") as HTMLIFrameElement;
     if (iframedEditor.contentWindow) {
       iframedEditor.contentWindow.postMessage(
@@ -48,7 +53,6 @@ export class IframeControl extends React.Component<CmsWidgetControlProps, IState
   }
 
   isValidMessageEvent = (event: MessageEvent) => {
-    const { validOrigin } = this.state;
     return event.data.type === "updateContent" &&
            event.data.content &&
            event.origin === validOrigin;
@@ -62,7 +66,7 @@ export class IframeControl extends React.Component<CmsWidgetControlProps, IState
 
   render() {
     const curriculumBranch = urlParams.curriculumBranch ?? defaultCurriculumBranch;
-    const iframeBaseUrl = `./cms-editor.html?curriculumBranch=${curriculumBranch}`;
+    const iframeBaseUrl = `${cmsEditorBase}/cms-editor.html?curriculumBranch=${curriculumBranch}`;
     const iframeUrl = urlParams.unit
       ? `${iframeBaseUrl}&unit=${urlParams.unit}`
       : iframeBaseUrl;

docs/cms.md

@@ -1,6 +1,9 @@
-CLUE includes a CMS which can be accessed at `/admin.html`. It uses [Decap CMS](https://decapcms.org/). It is configured to edit the content in the `clue-curriculum` repository. It can be configured with the following URL params:
+CLUE includes a CMS which can be accessed at `/admin.html` in a production build. It uses [Decap CMS](https://decapcms.org/). It is configured to edit the content in the `clue-curriculum` repository. It is best to always pass the CMS a `unit` url parameter. Otherwise it will download pretty much all of the files in `clue-curriculum`. With a `unit` parameter it will only download the files for that unit.
+
+# URL Parameters
 - **`curriculumBranch`** By default the CMS edits the `author` branch. You can change the branch by passing a different branch name to this parameter. The CMS will not create this branch for you. You'll need to create it yourself.
 - **`unit`** By default the CMS displays all of the units at the same time. It is better to work with a single unit at a time by using the `unit` param. It should be passed the unit code. This limits what is displayed in the CMS and it also configures the media library to show the images from that unit.
+- **`cmsEditorBase`** By default the CMS will use an iframe pointed at `./cms-editor.html` to edit the CLUE documents. You can use this param to replace `.` with something else. This is useful for local testing (see below)
 - **`localCMSBackend`** By default the CMS works with the `github` backend. This means even when doing local CLUE development the CMS will update the `clue-curriculum` repository directly. If you add the `localCMSBackend` parameter the CMS will attempt to work with a local git proxy running at localhost:8081. You can start this proxy with:
 
   `cd ../clue-curriculum; npx netlify-cms-proxy-server`
@@ -44,9 +47,16 @@ This document editor is located in `/src/cms/`
 ## Local development
 To work on the CMS locally you'll need to start both CLUE and the CMS:
 - start CLUE by running `npm run start` in the top level folder
-- start the CMS by running `npm run start` in the `/cms` folder
+- in a new terminal, open the `/cms` folder
+- make sure its dependencies are installed: `npm i`
+- start the CMS by running `npm run start`
+- open the CMS with `http://localhost:[cms_port]/?cmsEditorBase=http://localhost:[clue_port]&unit=[clue_unit_code]&curriculumBranch=[your own branch]`
+
+Typically CLUE will be running on portal 8080 and the CMS will be running on 8081. In this case the url above would be `http://localhost:8081/?cmsEditorBase=http://localhost:8080&unit=[clue_unit_code]&curriculumBranch=[your own branch]`
+
+With this approach you'll be editing the content in the `clue-curriculum` repository directly. By default this will use the `author` branch in the `clue-curriculum` repository. So you aren't making changes to the same branch as other people, you should make your own branch in that repository and pass it to the `curriculumBranch` parameter. You have to make this branch using your own git tools, the CMS cannot create branches itself.
 
-TODO: Then you'll need to configure the CMS so it can find your the local `cms-editor.html` from the running CLUE. This can be done using a parameter to the CMS url. Without this parameter it will try to look in `./cms-editor.html` which will not work.
+If you want to have more local access to the curriculum you are editing, and you don't want to be updating the `clue-curriculum` repository, you can use the `localCMSBackend` parameter. See above for details on how to use this. Note the proxy needs to be on its own port. If it can't start on 8081 (because the cms is running there) then you'll need to configure it. See the "Configure the Decap CMS proxy server port number" section of this page: https://decapcms.org/docs/working-with-a-local-git-repository
 
 ## Remote build
 In the CI (github actions), the toplevel `npm run build` is used. This will build both CLUE and the CMS. And then it will copy the files from `/cms/dist` to `/dist/cms`. Additional it copyes the file `/cms/dist/admin.html` to `/dist/admin.html`. This admin.html file refers to its resources in the cms folder like `cms/admin.js` and `cms/admin.css`. This file is called `admin.html` because that was its original name, and now various authors have direct links to it. So we don't want to change that name.

package.json

@@ -84,7 +84,7 @@
     "migrate": "node ./migrations/migrate",
     "migrate:debug": "node --inspect-brk ./migrations/migrate",
     "postinstall": "patch-package",
-    "serve": "npx serve -l 8080 dist",
+    "serve": "npx serve -c ../serve.json -l 8080 dist",
     "serve:top-test": "npx http-server top-test",
     "start": "webpack-dev-server --hot",
     "start:secure": "webpack-dev-server --https --hot --cert ~/.localhost-ssl/localhost.pem --key ~/.localhost-ssl/localhost.key",

serve.json

@@ -0,0 +1,3 @@
+{
+  "cleanUrls": false
+}

src/cms/cms-editor.tsx

@@ -5,10 +5,9 @@ import { DocumentEditor } from "./document-editor";
 import { DocumentModelType } from "../models/document/document";
 
 let initialValue = undefined as DocumentModelType | undefined;
-const validOrigin = `${window.location.protocol}//${window.location.host}`;
 
 (window as any).addEventListener("message", (event: MessageEvent) => {
-  if (event.origin === validOrigin && event.data.initialValue) {
+  if (event.data.initialValue) {
     initialValue = JSON.parse(event.data.initialValue);
     if (initialValue) {
       renderEditor();
@@ -20,7 +19,7 @@ const validOrigin = `${window.location.protocol}//${window.location.host}`;
 
 const handleUpdateContent = (json: Record<string, any>) => {
   const stringifiedJson = JSON.stringify(json);
-  window.parent.postMessage({ type: "updateContent", content: stringifiedJson }, validOrigin);
+  window.parent.postMessage({ type: "updateContent", content: stringifiedJson }, "*");
 };
 
 const renderEditor = () => {

src/cms/document-editor.tsx

@@ -50,6 +50,9 @@ export class DocumentEditor extends React.Component<IProps, IState>  {
 
         // Update the widget's value whenever a change is made to the document's content
         this.disposer = onSnapshot(document, snapshot => {
+          // FIXME: If the document has tiles at the end of it which aren't setup by the unit json,
+          // then exportAsJson creates an invalid JSON file. It leaves a trailing comma after the
+          // last known tile.
           const json = document.content?.exportAsJson({ includeTileIds: true });
           if (json) {
             const parsedJson = JSON.parse(json);

src/utilities/url-params.ts

@@ -90,6 +90,8 @@ export interface QueryParams {
   functions?: string; // "emulator" or host:port url
   // do not use persistentUI in some cy tests that rely on demo
   noPersistentUI?: boolean;
+  // mouse sensor can be enabled for cypress drag and drop tests for dnd-kit
+  mouseSensor?: boolean;
 
   //
   // CMS options (admin.html)
@@ -99,8 +101,9 @@ export interface QueryParams {
   curriculumBranch?: string;
   // work with a local checkout of the curriculum instead of github
   localCMSBackend?: boolean;
-  // mouse sensor can be enabled for cypress drag and drop tests for dnd-kit
-  mouseSensor?: boolean;
+  // change the location of the cms-editor.html used by iframe widget to edit
+  // CLUE documents.
+  cmsEditorBase?: string;
 
   //
   // Standalone document editor options (doc-editor.html)

webpack.config.js

@@ -37,7 +37,6 @@ module.exports = (env, argv) => {
     // on the devServer start up time
     entry: {
       index: './src/index.tsx',
-      admin: './cms/src/admin.tsx',
       'cms-editor': './src/cms/cms-editor.tsx',
       'doc-editor': './src/doc-editor.tsx'
     },
@@ -237,13 +236,6 @@ module.exports = (env, argv) => {
         filename: 'index.html',
         publicPath: '.',
       }),
-      new HtmlWebpackPlugin({
-        ...baseHtmlPluginConfig,
-        chunks: ['admin'],
-        filename: 'admin.html',
-        publicPath: '.',
-        template: 'cms/src/admin.html'
-      }),
       new HtmlWebpackPlugin({
         ...baseHtmlPluginConfig,
         chunks: ['cms-editor'],