diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 48 | ||||
| -rw-r--r-- | src/client/views/nodes/WebBox.scss | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/WebBox.tsx | 47 |
3 files changed, 76 insertions, 29 deletions
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 5492a457d..0e04bacf7 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -34,16 +34,12 @@ import "./FormattedTextBox.scss"; import React = require("react"); import { GoogleApiClientUtils, Pulls, Pushes } from '../../apis/google_docs/GoogleApiClientUtils'; import { DocumentDecorations } from '../DocumentDecorations'; -import { MainOverlayTextBox } from '../MainOverlayTextBox'; import { DictationManager } from '../../util/DictationManager'; import { ReplaceStep } from 'prosemirror-transform'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); -// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document -// - export const Blank = `{"doc":{"type":"doc","content":[]},"selection":{"type":"text","anchor":0,"head":0}}`; export interface FormattedTextBoxProps { @@ -147,27 +143,29 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe paste = (e: ClipboardEvent) => { 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(); + // } + // }); + // } + // } } } diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 07774263c..43220df71 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; @@ -61,6 +63,14 @@ width: 40px; transform-origin: top left; } + + .switchToText { + color: $main-accent; + } + + .switchToText:hover { + color: $dark-color; + } } button:hover { 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> |