2 files changed, 96 insertions, 0 deletions

diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index ce9e29b26..491208c4c 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -110,6 +110,33 @@ export const nodes: { [index: string]: NodeSpec } = {
         //     }
         // }]
     },
+
+    // TODO
+    checkbox: {
+        inline: true,
+        attrs: {
+            visibility: { default: false },
+            // text: { default: undefined },
+            // textslice: { default: undefined },
+            // textlen: { default: 0 }
+
+        },
+        group: "inline",
+        toDOM(node) {
+            const attrs = { style: `width: 40px` };
+            return ["span", { ...node.attrs, ...attrs }];
+        },
+        // parseDOM: [{
+        //     tag: "star", getAttrs(dom: any) {
+        //         return {
+        //             visibility: dom.getAttribute("visibility"),
+        //             oldtext: dom.getAttribute("oldtext"),
+        //             oldtextlen: dom.getAttribute("oldtextlen"),
+        //         }
+        //     }
+        // }]
+    },
+
     // :: NodeSpec An inline image (`<img>`) node. Supports `src`,
     // `alt`, and `href` attributes. The latter two default to the empty
     // string.
@@ -522,6 +549,49 @@ export class ImageResizeView {
     }
 }
 
+export class CheckboxView {
+    _view: any;
+    _collapsed: HTMLElement;
+
+    constructor(node: any, view: any, getPos: any) {
+        this._collapsed = document.createElement("span");
+        this._collapsed.textContent = node.attrs.visibility ? "⬛" : "⬜";
+        this._collapsed.style.position = "relative";
+        // this._collapsed.style.width = "80px";
+        this._collapsed.style.height = "20px";
+        let self = this;
+        this._view = view;
+        const js = node.toJSON;
+        node.toJSON = function () {
+
+            return js.apply(this, arguments);
+        };
+        this._collapsed.onpointerdown = function (e: any) {
+            console.log(node.attrs.visibility)
+            if (node.attrs.visibility) {
+                let y = getPos();
+                const attrs = { ...node.attrs };
+                attrs.visibility = !attrs.visibility;
+                view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs));
+                self._collapsed.textContent = "⬜";
+            } else {
+                let y = getPos();
+                const attrs = { ...node.attrs };
+                attrs.visibility = !attrs.visibility;
+                console.log(attrs.visibility)
+                view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs));
+                self._collapsed.textContent = "⬛";
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            console.log(node.attrs.visibility)
+
+        };
+        (this as any).dom = this._collapsed;
+    }
+
+}
+
 export class SummarizedView {
     // TODO: highlight text that is summarized. to find end of region, walk along mark
     _collapsed: HTMLElement;
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index d33a52d7f..8f66a0ad4 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -177,6 +177,7 @@ export class TooltipTextMenu {
         this.listTypeToIcon = new Map();
         this.listTypeToIcon.set(schema.nodes.bullet_list, ":");
         this.listTypeToIcon.set(schema.nodes.ordered_list, "1)");
+        // this.listTypeToIcon.set(schema.nodes.checklist, "⬜");
         this.listTypes = Array.from(this.listTypeToIcon.keys());
 
         //custom tools
@@ -186,6 +187,7 @@ export class TooltipTextMenu {
         this.tooltip.appendChild(this._brushdom);
         this.tooltip.appendChild(this.createLink().render(this.view).dom);
         this.tooltip.appendChild(this.createStar().render(this.view).dom);
+        this.tooltip.appendChild(this.createCheckbox().render(this.view).dom)
 
         this.updateListItemDropdown(":", this.listTypeBtnDom);
 
@@ -439,6 +441,16 @@ export class TooltipTextMenu {
         return true;
     }
 
+    public static insertCheckbox(state: EditorState<any>, dispatch: any) {
+        let newNode = schema.nodes.checkbox.create({ visibility: false });
+        if (dispatch) {
+            //console.log(newNode.attrs.text.toString());
+            dispatch(state.tr.replaceSelectionWith(newNode));
+            wrapInList(nodeType)(state, dispatch);
+        }
+        return true;
+    }
+
     //will display a remove-list-type button if selection is in list, otherwise will show list type dropdown
     updateListItemDropdown(label: string, listTypeBtn: any) {
         //remove old btn
@@ -548,6 +560,20 @@ export class TooltipTextMenu {
         });
     }
 
+    createCheckbox() {
+        return new MenuItem({
+            title: "Checkbox",
+            label: "Checkbox",
+            icon: icons.code,
+            css: "color:white",
+            class: "checkbox",
+            execEvent: "",
+            run: (state, dispatch) => {
+                TooltipTextMenu.insertCheckbox(state, dispatch);
+            }
+        })
+    }
+
     deleteLinkItem() {
         const icon = {
             height: 16, width: 16,