3 files changed, 101 insertions, 3 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,
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index e076efe18..a2e610fc2 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -8,7 +8,7 @@ import { keymap } from "prosemirror-keymap";
 import { Node as ProsNode } from "prosemirror-model";
 import { EditorState, Plugin, Transaction, Selection } from "prosemirror-state";
 import { NodeType, Slice, Node, Fragment } from 'prosemirror-model';
-import { EditorView } from "prosemirror-view";
+import { EditorView, NodeView } from "prosemirror-view";
 import { Doc, Opt, DocListCast } from "../../../new_fields/Doc";
 import { Id, Copy } from '../../../new_fields/FieldSymbols';
 import { List } from '../../../new_fields/List';
@@ -21,7 +21,7 @@ import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from "../../util/DragManager";
 import buildKeymap from "../../util/ProsemirrorExampleTransfer";
 import { inpRules } from "../../util/RichTextRules";
-import { ImageResizeView, schema, SummarizedView } from "../../util/RichTextSchema";
+import { ImageResizeView, schema, SummarizedView, CheckboxView } from "../../util/RichTextSchema";
 import { SelectionManager } from "../../util/SelectionManager";
 import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu";
 import { TooltipTextMenu } from "../../util/TooltipTextMenu";
@@ -38,6 +38,7 @@ import { For } from 'babel-types';
 import { DateField } from '../../../new_fields/DateField';
 import { Utils } from '../../../Utils';
 import { MainOverlayTextBox } from '../MainOverlayTextBox';
+import { CheckBox } from '../search/CheckBox';
 
 library.add(faEdit);
 library.add(faSmile, faTextHeight);
@@ -469,7 +470,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 dispatchTransaction: this.dispatchTransaction,
                 nodeViews: {
                     image(node, view, getPos) { return new ImageResizeView(node, view, getPos); },
-                    star(node, view, getPos) { return new SummarizedView(node, view, getPos); }
+                    star(node, view, getPos) { return new SummarizedView(node, view, getPos); },
+                    checkbox(node, view, getPos) { return new CheckboxView(node, view, getPos) as NodeView<any>; }
                 },
                 clipboardTextSerializer: this.clipboardTextSerializer,
                 handlePaste: this.handlePaste,