switch name of cms-editor.html to iframe.html

This general iframe version of CLUE is used for snapshots and for the CMS. It could also be used for embedding CLUE inside of the Activity Player.

Also:
- Remove unused cms params located in url-params
- add "allow serial" to iframe to remove console warning

Author: scytacki

Diff for: README.md

@@ -110,7 +110,7 @@ To enable per component debugging set the "debug" localstorage key with one or m
 
 - `bookmarks` this will show a tiny text status above the bookmark indicating which users have bookmarked this document. It will also print information about the document bookmarks each time a bookmark is toggled.
 - `canvas` this will show the document key over the canvas, useful for looking up documents in Firebase
-- `cms` this will print info to the console as changes are made to authored content via the CMS
+- `iframe` this will print info to the console as document changes are sent from the iframe'd CLUE to the parent frame. This iframe'd CLUE is used by the CMS.
 - `docList` - this will print a table of information about a list of documents
 - `document` this will add the active document as `window.currentDocument`, you can use MST's hidden toJSON() like `currentDocument.toJSON()` to views its content.
 - `drop` console log the dataTransfer object from drop events on the document.

Diff for: cms/src/cms-url-params.ts

@@ -17,9 +17,9 @@ export interface QueryParams {
   curriculumBranch?: string;
   // work with a local checkout of the curriculum instead of github
   localCMSBackend?: boolean;
-  // change the location of the cms-editor.html used by iframe widget to edit
+  // change the location of the iframe.html used by the iframe widget to edit
   // CLUE documents.
-  cmsEditorBase?: string;
+  iframeBase?: string;
 }
 
 export const processUrlParams = (): QueryParams => {

Diff for: cms/src/iframe-control.tsx

@@ -3,18 +3,18 @@ import { Map } from "immutable";
 import { CmsWidgetControlProps } from "decap-cms-core";
 
 import { urlParams } from "./cms-url-params";
-import { DEBUG_CMS } from "../../src/lib/debug";
+import { DEBUG_IFRAME } from "../../src/lib/debug";
 import { defaultCurriculumBranch } from "./cms-constants";
 
 import "./iframe-control.scss";
 
 (window as any).DISABLE_FIREBASE_SYNC = true;
 
-const cmsEditorBase = urlParams.cmsEditorBase ?? ".";
+const iframeBase = urlParams.iframeBase ?? ".";
 // 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;
+// If the iframeBase is an absolute url then the current url will be ignored
+const iframeBaseURL = new URL(iframeBase, window.location.href);
+const validOrigin = iframeBaseURL.origin;
 
 interface IState {
   initialValue?: string;
@@ -28,7 +28,7 @@ export class IframeControl extends React.Component<CmsWidgetControlProps, IState
   }
 
   componentDidMount = () => {
-    if (DEBUG_CMS) {
+    if (DEBUG_IFRAME) {
       // eslint-disable-next-line no-console
       console.log("DEBUG: CMS ClueControl initial content value is: ", this.state.initialValue);
     }
@@ -66,13 +66,13 @@ export class IframeControl extends React.Component<CmsWidgetControlProps, IState
 
   render() {
     const curriculumBranch = urlParams.curriculumBranch ?? defaultCurriculumBranch;
-    const iframeBaseUrl = `${cmsEditorBase}/cms-editor.html?curriculumBranch=${curriculumBranch}`;
+    const iframeBaseUrl = `${iframeBase}/iframe.html?curriculumBranch=${curriculumBranch}`;
     const iframeUrl = urlParams.unit
       ? `${iframeBaseUrl}&unit=${urlParams.unit}`
       : iframeBaseUrl;
     return (
       <div className="iframe-control custom-widget">
-        <iframe id="editor" src={iframeUrl} allow="clipboard-read; clipboard-write"
+        <iframe id="editor" src={iframeUrl} allow="clipboard-read; clipboard-write; serial"
           onLoad={this.sendInitialValueToEditor.bind(this)}>
         </iframe>
       </div>

Diff for: docs/cms.md

@@ -6,7 +6,7 @@ CLUE includes a CMS which can be accessed at `/admin.html` in a production build
 
 - **`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)
+- **`iframeBase`** By default the CMS will use an iframe pointed at `./iframe.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`
@@ -57,18 +57,18 @@ This document editor is located in `/src/cms/`
 
 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 CLUE by running `npm start` in the top level folder
 - if running the local Git proxy, start it next so it gets port 8081
 - 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]`
+- start the CMS by running `npm start`
+- open the CMS with `http://localhost:[cms_port]/?iframeBase=http://localhost:[clue_port]&unit=[clue_unit_code]&curriculumBranch=[your own branch]`
     (add `&localCMSBackend` if using it). Make sure there are no extra "#" or "/" characters in the URL.
 
 Typically CLUE will be running on portal 8080 and the CMS will be running on 8081, or CLUE on 8080, Git proxy on 8081, and CMS on 8082. In this case the url above would be:
 
-- No proxy: `http://localhost:8081/?cmsEditorBase=http://localhost:8080&unit=[clue_unit_code]&curriculumBranch=[your own branch]`
-- With proxy: `http://localhost:8082/?cmsEditorBase=http://localhost:8080&localCMSBackend&unit=[clue_unit_code]`
+- No proxy: `http://localhost:8081/?iframeBase=http://localhost:8080&unit=[clue_unit_code]&curriculumBranch=[your own branch]`
+- With proxy: `http://localhost:8082/?iframeBase=http://localhost:8080&localCMSBackend&unit=[clue_unit_code]`
 
 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.
 

Diff for: scripts/shutterbug.ts

@@ -1,11 +1,19 @@
+// Example executions:
+//
+// Generate image and print out the url of the image:
+// npx tsx shutterbug.ts /Users/scytacki/Development/ai/dataset1720819925834-mods/documents/document-NePawLNjq3wEjk58TiW.txt
+//
+// Generate shutterbug.html for checking page locally:
+// npx tsx shutterbug.ts /Users/scytacki/Development/ai/dataset1720819925834-mods/documents/document-NePawLNjq3wEjk58TiW.txt html
+
 import fs from "fs";
 
 function generateHtml(clueDocument: any) {
   return `
     <script>const initialValue=${JSON.stringify(clueDocument)}</script>
     <iframe id='clue-frame' width='100%' height='1500px' style='border:0px'
       allow='serial'
-      src='https://collaborative-learning.concord.org/branch/shutterbug-support/cms-editor.html'
+      src='https://collaborative-learning.concord.org/branch/shutterbug-support/iframe.html'
     ></iframe>
     <script>
       const clueFrame = document.getElementById('clue-frame')
@@ -38,6 +46,7 @@ export async function postToShutterbug(body: any) {
 }
 
 const fileName = process.argv[2];
+const outputHtml = process.argv[3];
 
 const documentString = fs.readFileSync(fileName, "utf8");
 const docObject = JSON.parse(documentString);
@@ -46,12 +55,13 @@ const html = generateHtml(docObject);
 // uncomment this line if you want to generate a local html file
 // this file can be opened in a web browser to see roughly what
 // shutterbug is seeing.
-// fs.writeFileSync("shutterbug.html", html);
+if (outputHtml) {
+  fs.writeFileSync("shutterbug.html", html);
+} else {
+  postToShutterbug({content: html, height: 1500});
+}
+//
 
 // Note: you can also change the `.png` to `.html` on the end of the URL returned by shutterbug.
 // This will give you the actual html that shutterbug sent to its internal browser
 
-postToShutterbug({content: html, height: 1500});
-
-// Example execution
-// npx tsx shutterbug.ts /Users/scytacki/Development/ai/dataset1720819925834-mods/documents/document-NePawLNjq3wEjk58TiW.txt

Diff for: src/cms/cms-document-editor.tsx renamed to src/iframe/iframe-document-editor.tsx

@@ -5,7 +5,7 @@ import { Map } from "immutable";
 import { defaultDocumentModelParts } from "../components/doc-editor/doc-editor-app-defaults";
 import { AppProvider, initializeApp } from "../initialize-app";
 import { createDocumentModelWithEnv, DocumentModelType } from "../models/document/document";
-import { DEBUG_CMS } from "../lib/debug";
+import { DEBUG_IFRAME } from "../lib/debug";
 import { EditableDocumentContent } from "../components/document/editable-document-content";
 import { DocumentAnnotationToolbar } from "../components/document/document-annotation-toolbar";
 
@@ -24,7 +24,7 @@ interface IState {
 
 const stores = initializeApp(true);
 
-export class CmsDocumentEditor extends React.Component<IProps, IState>  {
+export class IframeDocumentEditor extends React.Component<IProps, IState>  {
   disposer: IDisposer;
   constructor(props: any) {
     super(props);
@@ -75,9 +75,9 @@ export class CmsDocumentEditor extends React.Component<IProps, IState>  {
             // is a immutable object and sometimes it is a plain JS object.
             const immutableValue = Map(parsedJson);
             this.props.handleUpdateContent(immutableValue);
-            if (DEBUG_CMS) {
+            if (DEBUG_IFRAME) {
               // eslint-disable-next-line no-console
-              console.log("DEBUG: CMS ClueControl onChange called with new content value: ", parsedJson);
+              console.log("DEBUG: Iframe'd CLUE sending updateContent message with:", parsedJson);
             }
           }
         }

Diff for: src/cms/cms-editor.html renamed to src/iframe/iframe.html

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { CmsDocumentEditor } from "./cms-document-editor";
+import { IframeDocumentEditor } from "./iframe-document-editor";
 import { DocumentModelType } from "../models/document/document";
 
 let initialValue = undefined as DocumentModelType | undefined;
@@ -25,7 +25,7 @@ const handleUpdateContent = (json: Record<string, any>) => {
 const renderEditor = () => {
   ReactDOM.render(
     <div id="app">
-      <CmsDocumentEditor initialValue={initialValue} handleUpdateContent={handleUpdateContent} />
+      <IframeDocumentEditor initialValue={initialValue} handleUpdateContent={handleUpdateContent} />
     </div>,
     document.getElementById("app")
   );

Diff for: src/cms/cms-editor.tsx renamed to src/iframe/iframe.tsx

@@ -29,7 +29,7 @@ export function debugLog(enabled: boolean, message: any, ...params: any[]) {
 
 export const DEBUG_BOOKMARKS = debugContains("bookmarks");
 export const DEBUG_CANVAS = debugContains("canvas");
-export const DEBUG_CMS = debugContains("cms");
+export const DEBUG_IFRAME = debugContains("iframe");
 export const DEBUG_DATAFLOW = debugContains("dataflow");
 export const DEBUG_DOC_LIST = debugContains("docList");
 export const DEBUG_DOCUMENT = debugContains("document");

Diff for: src/lib/debug.ts

@@ -90,18 +90,6 @@ export interface QueryParams {
   // mouse sensor can be enabled for cypress drag and drop tests for dnd-kit
   mouseSensor?: boolean;
 
-  //
-  // CMS options (admin.html)
-  //
-
-  // change the branch used in clue-curriculum repository default is author
-  curriculumBranch?: string;
-  // work with a local checkout of the curriculum instead of github
-  localCMSBackend?: 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)
   //
@@ -124,7 +112,7 @@ type BooleanParamNames = Exclude<
 undefined>;
 
 const booleanParams: BooleanParamNames[] =
-  [ "demo", "mouseSensor", "localCMSBackend", "noPersistentUI", "readOnly", "noStorage", "unwrapped" ];
+  [ "demo", "mouseSensor", "noPersistentUI", "readOnly", "noStorage", "unwrapped" ];
 
 const processBooleanValue = (value: string | (string | null)[] | null | undefined) => {
   if (value === undefined || value === "false") {

Diff for: src/utilities/url-params.ts

@@ -61,7 +61,7 @@ module.exports = (env, argv) => {
     // on the devServer start up time
     entry: {
       index: './src/index.tsx',
-      'cms-editor': './src/cms/cms-editor.tsx',
+      iframe: './src/iframe/iframe.tsx',
       'doc-editor': './src/doc-editor.tsx'
     },
     mode: devMode ? 'development' : 'production',
@@ -264,10 +264,11 @@ module.exports = (env, argv) => {
       }),
       new HtmlWebpackPlugin({
         ...baseHtmlPluginConfig,
-        chunks: ['cms-editor'],
-        filename: 'cms-editor.html',
+        chunks: ['iframe'],
+        filename: 'iframe.html',
         publicPath: '.',
-        template: 'src/cms/cms-editor.html'
+        // Seems like we could just use the standard index.html here (it adds loading stuff but that should be harmless)
+        template: 'src/iframe/iframe.html'
       }),
       new CopyWebpackPlugin({
         patterns: [