1 files changed, 83 insertions, 0 deletions
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index ce9e29b26..733c50d20 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -6,6 +6,7 @@ import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list';
 import { EditorState, Transaction, NodeSelection, TextSelection, Selection, } from "prosemirror-state";
 import { EditorView, } from "prosemirror-view";
 import { View } from '@react-pdf/renderer';
+import { TooltipTextMenu } from './TooltipTextMenu';
 
 const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"],
     preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0];
@@ -110,6 +111,19 @@ export const nodes: { [index: string]: NodeSpec } = {
         //     }
         // }]
     },
+
+    checkbox: {
+        inline: true,
+        attrs: {
+            visibility: { default: false }
+        },
+        group: "inline",
+        toDOM(node) {
+            const attrs = { style: `width: 40px` };
+            return ["span", { ...node.attrs, ...attrs }];
+        },
+    },
+
     // :: NodeSpec An inline image (`<img>`) node. Supports `src`,
     // `alt`, and `href` attributes. The latter two default to the empty
     // string.
@@ -188,6 +202,20 @@ export const nodes: { [index: string]: NodeSpec } = {
         // parseDOM: [{ tag: "ul" }, { style: 'list-style-type=disc' }],
         // toDOM() { return ulDOM }
     },
+
+    checkbox_list: {
+        content: 'checklist_item+',
+        marks: '_',
+        group: 'block',
+        // inline: true,
+        parseDOM: [
+            { tag: "ul" }
+        ],
+        toDOM() {
+            return ["ul", { style: 'list-style: none' }, 0];
+        },
+    },
+
     //bullet_list: {
     //  content: 'list_item+',
     // group: 'block',
@@ -199,6 +227,18 @@ export const nodes: { [index: string]: NodeSpec } = {
     list_item: {
         ...listItem,
         content: 'paragraph block*'
+    },
+
+    checklist_item: {
+        content: 'paragraph block*',
+        parseDOM: [{ tag: "li" }],
+        // toDOM() {
+        //     return ["li", { style: 'content: checkbox' }, 0];
+        // },
+        toDOM() {
+            return ["li", 0];
+        },
+        defining: true
     }
 };
 
@@ -522,6 +562,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;