Implemented a rich text editor cell editor for source html. Made this…

… testable on Expedia and through a new site adapter for Blogger.

package.json

@@ -7,6 +7,7 @@
   "author": "Geoffrey Litt <glitt@mit.edu>",
   "license": "MIT",
   "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^16.0.0",
     "@fullcalendar/core": "^4.3.1",
     "@fullcalendar/daygrid": "^4.3.0",
     "@fullcalendar/interaction": "^4.3.0",

src/cell_editors/richTextEditor.css

@@ -0,0 +1,14 @@
+#open-apps-rich-text-editor-container {
+    background-color: white;
+    padding: 20px;
+    position: fixed;
+    height: 500px;
+    width: 700px;
+    bottom: 100px;
+    right: 50px;
+    z-index: 1000;
+}
+
+.cke_show_borders {
+    overflow: scroll;
+}

src/cell_editors/richTextEditor.js

@@ -0,0 +1,84 @@
+import Handsontable from 'handsontable';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+import './richTextEditor.css'
+
+let TEXTAREA_ID = "open-apps-rich-text-editor";
+
+function htmlToElement(html) {
+    var template = document.createElement('template');
+    html = html.trim();
+    template.innerHTML = html;
+    return template.content.firstChild;
+}
+
+class RichTextEditor extends Handsontable.editors.BaseEditor {
+    constructor(hotInstance) {
+        super(hotInstance);
+    }
+
+    init(){
+        this.text = this.originalValue;
+        this.initializeHTML();
+    }
+
+    getValue(){
+        return this.editor.getData();
+    }
+
+    setValue(newValue){
+        this.text = newValue;
+    }
+
+    open(){
+        let oldValue = document.getElementById(TEXTAREA_ID).value;
+
+        //Has to update the textarea for the rich text editor api to update as well
+        if(this.text !== oldValue){
+            this.destroyEditor();
+            document.getElementById(TEXTAREA_ID).value = this.text;
+            this.createEditor();
+        }
+
+        this.textEditorDiv.style.display = '';
+    }
+
+    initializeHTML(){
+        this.textEditorDiv = htmlToElement(`<div id="open-apps-rich-text-editor-container"><textarea id=${TEXTAREA_ID}>${this.text}</textarea></div>`);
+        document.body.appendChild(this.textEditorDiv);
+
+        this.createEditor();
+
+        this.textEditorDiv.style.display = "none";
+        this.textEditorDiv.addEventListener('mousedown', e => {
+            event.stopPropagation();
+        });
+    }
+
+    createEditor(){
+        this.richTextEditor = ClassicEditor.create( document.querySelector(`#${TEXTAREA_ID}`))
+            .then( newEditor => {
+                this.editor = newEditor;
+            })
+            .catch( error => {
+                console.error(error);
+            });
+    }
+
+    destroyEditor(){
+        this.editor.destroy()
+            .catch( error => {
+                console.log( error );
+            });
+    }
+
+    close(){
+        this.textEditorDiv.style.display = 'none';
+    }
+
+    focus(){
+        this.textEditorDiv.focus();
+    }
+}
+
+export {RichTextEditor};

src/core.ts

@@ -189,7 +189,7 @@ const createTable = (options: SiteAdapterOptions) => {
 
     tableData = rows.map(r => {
       return _.mapValues(r.dataValues, value => {
-        if (value instanceof HTMLInputElement) {
+        if (value instanceof HTMLInputElement || value instanceof HTMLTextAreaElement) {
           return value.value
         } else if (value instanceof HTMLElement) {
           return value.textContent
@@ -257,7 +257,7 @@ const createTable = (options: SiteAdapterOptions) => {
           let row = rows[rowIndex] // this won't work with re-sorting; change to ID
           let el = row.dataValues[prop]
 
-          if (el instanceof HTMLInputElement) {
+          if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
             el.value = newValue
           } else if (el instanceof HTMLElement) {
             el.innerText = newValue

src/site_adapters/blogger.ts

@@ -0,0 +1,32 @@
+import { RichTextEditor } from '../cell_editors/richTextEditor.js'
+
+export const BloggerAdapter = {
+    name: "Blogger",
+    urlPattern: "blogger.com",
+    colSpecs: [
+        { name: "id", type: "text", hidden: true },
+        { name: "document", editable: true, renderer: 'html', type: "text", editor: RichTextEditor },
+        { name: "source", editable: true, renderer: 'html', type: "text", editor: RichTextEditor },
+    ],
+    getDataRows: () => {
+        let container = document.getElementById("blogger-app");
+        console.log(container);
+        let container2 : HTMLElement = container;
+        return [
+            {
+                el: container2,
+                dataValues: {
+                    id: 1, // only one row so we can just hardcode an ID
+                    document: container.querySelector("#postingComposeBox"),
+                    source: container.querySelector("#postingHtmlBox"),
+                }
+            }
+        ]
+    },
+    // Reload data anytime there's a click or keypress on the page
+    setupReloadTriggers: (reload) => {
+        document.addEventListener("click", (e) => { reload() });
+        document.addEventListener("keydown", (e) => { reload() });
+    }
+};
+

src/site_adapters/expedia.ts

@@ -1,12 +1,13 @@
 import { FullCalendarEditor } from '../cell_editors/fullCalendarEditor.js'
+import { RichTextEditor } from '../cell_editors/richTextEditor.js'
 
 export const ExpediaAdapter = {
   name: "Expedia2",
   urlPattern: "expedia.com",
   colSpecs: [
   { name: "id", type: "text", hidden: true },
   { name: "origin", editable: true, type: "text" },
-  { name: "destination", editable: true, type: "text" },
+  { name: "destination", editable: true, type: "text", editor: RichTextEditor },
   { name: "departDate", editable: true, type: "text", editor: FullCalendarEditor },
   { name: "returnDate", editable: true, type: "text", editor: FullCalendarEditor }
   ],

src/wildcard.ts

@@ -3,10 +3,12 @@
 import { createTable } from './core'
 import { ExpediaAdapter } from './site_adapters/expedia';
 import { AirbnbAdapter } from './site_adapters/airbnb';
+import {BloggerAdapter} from "./site_adapters/blogger";
 
 const siteAdapters = [
 ExpediaAdapter,
-AirbnbAdapter
+AirbnbAdapter,
+    BloggerAdapter
 ]
 
 const run = function () {

yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@ckeditor/ckeditor5-build-classic@^16.0.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-16.0.0.tgz#9141e94ea6765eda4925aaf062448507410bbe70"
+  integrity sha512-gBfZqWg3hmCvhq6/wX5UJp4qwl6gB+NJPpOkya2Y3jWKA0HKf3UdlhIvaHq7dRaqhi4unmqaJZVEk5VpZ1vDOg==
+
 "@fullcalendar/core@^4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@fullcalendar/core/-/core-4.3.1.tgz#a061c6d2e998d4155439dbc8aefdfe01cdf648d8"