aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx52
-rw-r--r--src/client/views/nodes/WebBox.scss61
-rw-r--r--src/client/views/nodes/WebBox.tsx47
3 files changed, 135 insertions, 25 deletions
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 3f3360eff..1467334ef 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -145,31 +145,41 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
paste = (e: ClipboardEvent) => {
+ //this is throwing a ton of erros so i had to comment it out
if (e.clipboardData && this._editorView) {
- let pdfPasteText = `${Utils.GenerateDeterministicGuid("pdf paste")}`;
- for (let i = 0; i < e.clipboardData.items.length; i++) {
- let item = e.clipboardData.items.item(i);
- if (item.type === "text/plain") {
- item.getAsString((text) => {
- let pdfPasteIndex = text.indexOf(pdfPasteText);
- if (pdfPasteIndex > -1) {
- let insertText = text.substr(0, pdfPasteIndex);
- const tx = this._editorView!.state.tr.insertText(insertText);
- // tx.setSelection(new Selection(tx.))
- const state = this._editorView!.state;
- this._editorView!.dispatch(tx);
- if (FormattedTextBox._toolTipTextMenu) {
- // this._toolTipTextMenu.makeLinkWithState(state)
- }
- e.stopPropagation();
- e.preventDefault();
- }
- });
- }
- }
+ // let pdfPasteText = `${Utils.GenerateDeterministicGuid("pdf paste")}`;
+ // for (let i = 0; i < e.clipboardData.items.length; i++) {
+ // let item = e.clipboardData.items.item(i);
+ // console.log(item)
+ // if (item.type === "text/plain") {
+ // console.log("plain")
+ // item.getAsString((text) => {
+ // let pdfPasteIndex = text.indexOf(pdfPasteText);
+ // if (pdfPasteIndex > -1) {
+ // let insertText = text.substr(0, pdfPasteIndex);
+ // const tx = this._editorView!.state.tr.insertText(insertText);
+ // // tx.setSelection(new Selection(tx.))
+ // const state = this._editorView!.state;
+ // this._editorView!.dispatch(tx);
+ // if (FormattedTextBox._toolTipTextMenu) {
+ // // this._toolTipTextMenu.makeLinkWithState(state)
+ // }
+ // e.stopPropagation();
+ // e.preventDefault();
+ // }
+ // });
+ // }
+ // }
}
}
+ public setText = (text: string) => {
+ const tx = this._editorView!.state.tr.insertText(text);
+ const state = this._editorView!.state;
+ this._editorView!.dispatch(tx);
+ return new RichTextField(JSON.stringify(state.toJSON()));
+ }
+
dispatchTransaction = (tx: Transaction) => {
if (this._editorView) {
const state = this._editorView.state.apply(tx);
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 07774263c..b28f950c2 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -1,3 +1,5 @@
+@import "../globalCssVariables.scss";
+
.webBox-cont,
.webBox-cont-interactive {
padding: 0vw;
@@ -60,6 +62,65 @@
position: absolute;
width: 40px;
transform-origin: top left;
+ // margin-top: 10px;
+ }
+
+ .switchToText {
+ color: $main-accent;
+ }
+
+ .switchToText:hover {
+ color: $dark-color;
+ }
+
+ .collectionViewBaseChrome-viewSpecs {
+ margin-left: 10px;
+ display: grid;
+
+
+
+ .collectionViewBaseChrome-viewSpecsMenu {
+ overflow: hidden;
+ transition: height .5s, display .5s;
+ position: absolute;
+ top: 60px;
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+ background: rgb(238, 238, 238);
+ box-shadow: grey 2px 2px 4px;
+
+ .qs-datepicker {
+ left: unset;
+ right: 0;
+ }
+
+ .collectionViewBaseChrome-viewSpecsMenu-row {
+ display: grid;
+ grid-template-columns: 150px 200px 150px;
+ margin-top: 10px;
+ margin-right: 10px;
+
+ .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
+ .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
+ .collectionViewBaseChrome-viewSpecsMenu-rowRight {
+ font-size: 75%;
+ letter-spacing: 2px;
+ color: grey;
+ margin-left: 10px;
+ padding: 5px;
+ border: none;
+ outline-color: black;
+ }
+ }
+
+ .collectionViewBaseChrome-viewSpecsMenu-lastRow {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 10px;
+ margin: 10px;
+ }
+ }
}
}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 9b66b2431..f0140d04b 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -1,7 +1,7 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, observable } from "mobx";
import { observer } from "mobx-react";
-import { FieldResult } from "../../../new_fields/Doc";
+import { FieldResult, Doc } from "../../../new_fields/Doc";
import { HtmlField } from "../../../new_fields/HtmlField";
import { InkTool } from "../../../new_fields/InkField";
import { Cast, NumCast } from "../../../new_fields/Types";
@@ -13,6 +13,12 @@ import { FieldView, FieldViewProps } from './FieldView';
import { KeyValueBox } from "./KeyValueBox";
import "./WebBox.scss";
import React = require("react");
+import { SelectionManager } from "../../util/SelectionManager";
+import { Docs } from "../../documents/Documents";
+import { faStickyNote } from "@fortawesome/free-solid-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+library.add(faStickyNote)
@observer
export class WebBox extends React.Component<FieldViewProps> {
@@ -64,6 +70,29 @@ export class WebBox extends React.Component<FieldViewProps> {
}
}
+
+ switchToText = () => {
+ let url: string = "";
+ let field = Cast(this.props.Document[this.props.fieldKey], WebField);
+ if (field) url = field.url.href;
+
+ let newBox = Docs.Create.TextDocument({
+ x: NumCast(this.props.Document.x),
+ y: NumCast(this.props.Document.y),
+ title: url,
+ width: 200,
+ height: 70,
+ documentText: "@@@" + url
+ });
+
+ SelectionManager.SelectedDocuments().map(dv => {
+ dv.props.addDocument && dv.props.addDocument(newBox, false);
+ dv.props.removeDocument && dv.props.removeDocument(dv.props.Document);
+ });
+
+ Doc.BrushDoc(newBox);
+ }
+
urlEditor() {
return (
<div className="webView-urlEditor" style={{ top: this.collapsed ? -70 : 0 }}>
@@ -86,9 +115,19 @@ export class WebBox extends React.Component<FieldViewProps> {
onChange={this.onURLChange}
onKeyDown={this.onValueKeyDown}
/>
- <button className="submitUrl" onClick={this.submitURL}>
- SUBMIT URL
- </button>
+ <div style={{
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ minWidth: "100px",
+ }}>
+ <button className="submitUrl" onClick={this.submitURL}>
+ SUBMIT
+ </button>
+ <div className="switchToText" title="Convert web to text doc" onClick={this.switchToText} style={{ display: "flex", alignItems: "center", justifyContent: "center" }} >
+ <FontAwesomeIcon icon={faStickyNote} size={"lg"} />
+ </div>
+ </div>
</div>
</div>
</div>