aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText/SummaryView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/formattedText/SummaryView.tsx')
-rw-r--r--src/client/views/nodes/formattedText/SummaryView.tsx73
1 files changed, 44 insertions, 29 deletions
diff --git a/src/client/views/nodes/formattedText/SummaryView.tsx b/src/client/views/nodes/formattedText/SummaryView.tsx
index c017db034..01acc3de9 100644
--- a/src/client/views/nodes/formattedText/SummaryView.tsx
+++ b/src/client/views/nodes/formattedText/SummaryView.tsx
@@ -1,35 +1,49 @@
-import { TextSelection } from "prosemirror-state";
-import { Fragment, Node, Slice } from "prosemirror-model";
+import { TextSelection } from 'prosemirror-state';
+import { Fragment, Node, Slice } from 'prosemirror-model';
import * as ReactDOM from 'react-dom';
-import React = require("react");
+import React = require('react');
// an elidable textblock that collapses when its '<-' is clicked and expands when its '...' anchor is clicked.
// this node actively edits prosemirror (as opposed to just changing how things are rendered) and thus doesn't
// really need a react view. However, it would be cleaner to figure out how to do this just as a react rendering
// method instead of changing prosemirror's text when the expand/elide buttons are clicked.
export class SummaryView {
- _fieldWrapper: HTMLSpanElement; // container for label and value
+ dom: HTMLSpanElement; // container for label and value
constructor(node: any, view: any, getPos: any) {
const self = this;
- this._fieldWrapper = document.createElement("span");
- this._fieldWrapper.className = this.className(node.attrs.visibility);
- this._fieldWrapper.onpointerdown = function (e: any) { self.onPointerDown(e, node, view, getPos); };
- this._fieldWrapper.onkeypress = function (e: any) { e.stopPropagation(); };
- this._fieldWrapper.onkeydown = function (e: any) { e.stopPropagation(); };
- this._fieldWrapper.onkeyup = function (e: any) { e.stopPropagation(); };
- this._fieldWrapper.onmousedown = function (e: any) { e.stopPropagation(); };
+ this.dom = document.createElement('span');
+ this.dom.className = this.className(node.attrs.visibility);
+ this.dom.onpointerdown = function (e: any) {
+ self.onPointerDown(e, node, view, getPos);
+ };
+ this.dom.onkeypress = function (e: any) {
+ e.stopPropagation();
+ };
+ this.dom.onkeydown = function (e: any) {
+ e.stopPropagation();
+ };
+ this.dom.onkeyup = function (e: any) {
+ e.stopPropagation();
+ };
+ this.dom.onmousedown = function (e: any) {
+ e.stopPropagation();
+ };
const js = node.toJSON;
- node.toJSON = function () { return js.apply(this, arguments); };
+ node.toJSON = function () {
+ return js.apply(this, arguments);
+ };
- ReactDOM.render(<SummaryViewInternal />, this._fieldWrapper);
- (this as any).dom = this._fieldWrapper;
+ ReactDOM.render(<SummaryViewInternal />, this.dom);
+ (this as any).dom = this.dom;
}
- className = (visible: boolean) => "formattedTextBox-summarizer" + (visible ? "" : "-collapsed");
- destroy() { ReactDOM.unmountComponentAtNode(this._fieldWrapper); }
- selectNode() { }
+ className = (visible: boolean) => 'formattedTextBox-summarizer' + (visible ? '' : '-collapsed');
+ destroy() {
+ ReactDOM.unmountComponentAtNode(this.dom);
+ }
+ selectNode() {}
updateSummarizedText(start: any, view: any) {
const mtype = view.state.schema.marks.summarize;
@@ -44,8 +58,7 @@ export class SummaryView {
if (node.marks.find((m: any) => m.type === mtype || m.type === mtypeInc)) {
visited.add(node);
endPos = i + node.nodeSize - 1;
- }
- else skip = true;
+ } else skip = true;
}
});
}
@@ -56,26 +69,28 @@ export class SummaryView {
const visible = !node.attrs.visibility;
const attrs = { ...node.attrs, visibility: visible };
let textSelection = TextSelection.create(view.state.doc, getPos() + 1);
- if (!visible) { // update summarized text and save in attrs
+ if (!visible) {
+ // update summarized text and save in attrs
textSelection = this.updateSummarizedText(getPos() + 1, view);
attrs.text = textSelection.content();
attrs.textslice = attrs.text.toJSON();
}
- view.dispatch(view.state.tr.
- setSelection(textSelection). // select the current summarized text (or where it will be if its collapsed)
- replaceSelection(!visible ? new Slice(Fragment.fromArray([]), 0, 0) : node.attrs.text). // collapse/expand it
- setNodeMarkup(getPos(), undefined, attrs)); // update the attrs
+ view.dispatch(
+ view.state.tr
+ .setSelection(textSelection) // select the current summarized text (or where it will be if its collapsed)
+ .replaceSelection(!visible ? new Slice(Fragment.fromArray([]), 0, 0) : node.attrs.text) // collapse/expand it
+ .setNodeMarkup(getPos(), undefined, attrs)
+ ); // update the attrs
e.preventDefault();
e.stopPropagation();
- this._fieldWrapper.className = this.className(visible);
- }
+ this.dom.className = this.className(visible);
+ };
}
-interface ISummaryView {
-}
+interface ISummaryView {}
// currently nothing needs to be rendered for the internal view of a summary.
export class SummaryViewInternal extends React.Component<ISummaryView> {
render() {
return <> </>;
}
-} \ No newline at end of file
+}