prototyep working version of elision -- however, it doesn't work once the text box is deselected/reloaded. didn't look into why

3 files changed, 57 insertions, 27 deletions

diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index a29036f19..84c2fd5c3 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -1,9 +1,9 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType } from "prosemirror-model";
-import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands';
+import { joinUp, lift, setBlockType, toggleMark, wrapIn, selectNodeForward, deleteSelection } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list';
-import { EditorState, Transaction, NodeSelection, } from "prosemirror-state";
+import { EditorState, Transaction, NodeSelection, TextSelection, Selection, } from "prosemirror-state";
 import { EditorView, } from "prosemirror-view";
 
 const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"],
@@ -26,13 +26,6 @@ export const nodes: { [index: string]: NodeSpec } = {
         toDOM() { return pDOM; }
     },
 
-    star: {
-        inline: true,
-        attrs: { oldtext: { default: "suhhhh" } },
-        group: "inline",
-        toDOM() { return ["star", "🟊"]; },
-        parseDOM: [{ tag: "star" }]
-    },
 
     // :: NodeSpec A blockquote (`<blockquote>`) wrapping one or more blocks.
     blockquote: {
@@ -85,6 +78,29 @@ export const nodes: { [index: string]: NodeSpec } = {
         group: "inline"
     },
 
+    star: {
+        inline: true,
+        attrs: {
+            visibility: { default: false },
+            oldtext: { default: undefined },
+            oldtextlen: { default: 0 }
+
+        },
+        group: "inline",
+        toDOM(node) {
+            const attrs = { style: `width: 40px` };
+            return ["span", { ...node.attrs, ...attrs }];
+        },
+        parseDOM: [{
+            tag: "span", 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.
@@ -428,13 +444,37 @@ export class ImageResizeView {
 
 export class SummarizedView {
     _collapsed: HTMLElement;
-    _selection: any;
-    constructor(node: any) {
-        this._collapsed = document.createElement("star");
+    constructor(node: any, view: any, getPos: any) {
+        this._collapsed = document.createElement("span");
+        this._collapsed.textContent = "...";
+        this._collapsed.style.opacity = "0.5";
+        this._collapsed.style.background = "yellow";
+        this._collapsed.style.position = "relative";
+        this._collapsed.style.width = "40px";
+        this._collapsed.style.height = "20px";
         this._collapsed.onpointerdown = function (e: any) {
             console.log("star pressed!");
+            if (node.attrs.visibility) {
+                let y = getPos();
+                view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1 + node.attrs.oldtextlen)));
+                view.dispatch(view.state.tr.deleteSelection(view.state, () => { }));
+
+            } else {
+                let y = getPos();
+                view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, y + 1, y + 1)));
+                view.dispatch(view.state.tr.replaceSelection(node.attrs.oldtext));
+            }
+            node.attrs.visibility = !node.attrs.visibility;
+            e.preventDefault();
+            e.stopPropagation();
         };
+        (this as any).dom = this._collapsed;
+
+    }
+    selectNode() {
+    }
 
+    deselectNode() {
     }
 }
 // :: Schema
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 905f1969c..6cc71be39 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -274,21 +274,11 @@ export class TooltipTextMenu {
 
     insertStar(state: EditorState<any>, dispatch: any) {
         console.log("creating star...");
-        let type = schema.nodes.star;
-        let select = state.selection;
-        let node = select.$from.nodeAfter;
-        if (node) {
-            if (node.type.name === "star") {
-                let oldselection = node.attrs.oldtext;
-                if (dispatch) {
-                    dispatch(state.tr.replaceSelection(oldselection.content()));
-                }
-                return true;
-            }
-        }
+        let newNode = schema.nodes.star.create();
         if (dispatch) {
-            let newNode = type.create();
-            newNode.attrs.oldtext = select;
+            newNode.attrs.visibility = false;
+            newNode.attrs.oldtext = state.selection.content();
+            newNode.attrs.oldtextlen = state.selection.to - state.selection.from;
             dispatch(state.tr.replaceSelectionWith(newNode));
         }
         return true;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index b40c6d580..3ba108a57 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -191,7 +191,7 @@ 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); }
+                    star(node, view, getPos) { return new SummarizedView(node, view, getPos); }
                 }
             });
             let text = StrCast(this.props.Document.documentText);