diff options
Diffstat (limited to 'src/client/views/PreviewCursor.tsx')
| -rw-r--r-- | src/client/views/PreviewCursor.tsx | 83 | 
1 files changed, 76 insertions, 7 deletions
| diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index e7a5475ed..d8e161ab6 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -1,13 +1,20 @@ -import { action, observable } from 'mobx'; +import { action, observable, runInAction } from 'mobx';  import { observer } from 'mobx-react';  import "normalize.css";  import * as React from 'react';  import "./PreviewCursor.scss"; +import { Docs } from '../documents/Documents'; +// import { Transform } from 'prosemirror-transform'; +import { Doc } from '../../new_fields/Doc'; +import { Transform } from "../util/Transform";  @observer  export class PreviewCursor extends React.Component<{}> {      private _prompt = React.createRef<HTMLDivElement>();      static _onKeyPress?: (e: KeyboardEvent) => void; +    static _getTransform: () => Transform; +    static _addLiveTextDoc: (doc: Doc) => void; +    static _addDocument: (doc: Doc, allowDuplicates: false) => boolean;      @observable static _clickPoint = [0, 0];      @observable public static Visible = false;      //when focus is lost, this will remove the preview cursor @@ -20,12 +27,67 @@ export class PreviewCursor extends React.Component<{}> {          document.addEventListener("keydown", this.onKeyPress);          document.addEventListener("paste", this.paste);      } +      paste = (e: ClipboardEvent) => { -        console.log(e.clipboardData); -        if (e.clipboardData) { -            console.log(e.clipboardData.getData("text/html")); -            console.log(e.clipboardData.getData("text/csv")); -            console.log(e.clipboardData.getData("text/plain")); +        if (PreviewCursor.Visible) { +            if (e.clipboardData) { +                let newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); +                runInAction(() => { PreviewCursor.Visible = false; }); + + +                if (e.clipboardData.getData("text/plain") !== "") { + +                    // tests for youtube and makes video document +                    if (e.clipboardData.getData("text/plain").indexOf("www.youtube.com/watch") !== -1) { +                        const url = e.clipboardData.getData("text/plain").replace("youtube.com/watch?v=", "youtube.com/embed/"); +                        PreviewCursor._addDocument(Docs.Create.VideoDocument(url, { +                            title: url, width: 400, height: 315, +                            nativeWidth: 600, nativeHeight: 472.5, +                            x: newPoint[0], y: newPoint[1] +                        }), false); +                        return; +                    } + +                    // tests for URL and makes web document +                    let re: any = /^https?:\/\//g; +                    if (re.test(e.clipboardData.getData("text/plain"))) { +                        const url = e.clipboardData.getData("text/plain") +                        PreviewCursor._addDocument(Docs.Create.WebDocument(url, { +                            title: url, width: 300, height: 300, +                            // nativeWidth: 300, nativeHeight: 472.5, +                            x: newPoint[0], y: newPoint[1] +                        }), false); +                        return; +                    } + +                    // creates text document +                    let newBox = Docs.Create.TextDocument({ +                        width: 200, height: 100, +                        x: newPoint[0], +                        y: newPoint[1], +                        title: "-pasted text-" +                    }); + +                    newBox.proto!.autoHeight = true; +                    PreviewCursor._addLiveTextDoc(newBox); +                    return; +                } +                //pasting in images +                if (e.clipboardData.getData("text/html") !== "" && e.clipboardData.getData("text/html").includes("<img src=")) { +                    let re: any = /<img src="(.*?)"/g; +                    let arr: any[] = re.exec(e.clipboardData.getData("text/html")); + +                    let img: Doc = Docs.Create.ImageDocument( +                        arr[1], { +                            width: 300, title: arr[1], +                            x: newPoint[0], +                            y: newPoint[1], +                        }); +                    PreviewCursor._addDocument(img, false); +                    return; +                } + +            }          }      } @@ -49,9 +111,16 @@ export class PreviewCursor extends React.Component<{}> {          }      }      @action -    public static Show(x: number, y: number, onKeyPress: (e: KeyboardEvent) => void) { +    public static Show(x: number, y: number, +        onKeyPress: (e: KeyboardEvent) => void, +        addLiveText: (doc: Doc) => void, +        getTransform: () => Transform, +        addDocument: (doc: Doc, allowDuplicates: false) => boolean) {          this._clickPoint = [x, y];          this._onKeyPress = onKeyPress; +        this._addLiveTextDoc = addLiveText; +        this._getTransform = getTransform; +        this._addDocument = addDocument;          setTimeout(action(() => this.Visible = true), (1));      }      render() { | 
