aboutsummaryrefslogtreecommitdiff
path: root/src/client/util/RTFMarkup.tsx
blob: a07ad204762ab592f7cd016662c68c62d0bcba24 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
import { action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { MainViewModal } from '../views/MainViewModal';
import { SnappingManager } from './SnappingManager';

@observer
export class RTFMarkup extends React.Component<{}> {
    // eslint-disable-next-line no-use-before-define
    static Instance: RTFMarkup;
    @observable private isOpen = false; // whether the SharingManager modal is open or not

    public setOpen = action((status: boolean) => {
        this.isOpen = status;
    });

    constructor(props: {}) {
        super(props);
        makeObservable(this);
        RTFMarkup.Instance = this;
    }

    /**
     * @returns the main interface of the SharingManager.
     */
    @computed get cheatSheet() {
        return (
            <div style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor, textAlign: 'initial', height: '100%' }}>
                <p>
                    <b style={{ fontSize: 'larger' }}>(( any text ))</b>
                    {` submit text to Chat GPT to have results appended afterward`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`#tag `}</b>
                    {`  add hashtag metadata to document. e.g, #idea`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`#, ## ... ###### `}</b>
                    {`  set heading style based on number of '#'s between 1 and 6`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`>> `}</b>
                    {`  add a sidebar text document inline`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`\`\`\` `}</b>
                    {`  create a code snippet block`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-f `}</b>
                    {`  collapse to an inline footnote`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-e `}</b>
                    {`  collapse to elided text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-[ `}</b>
                    {`  left justify text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-\\ `}</b>
                    {`  center text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`cmd-] `}</b>
                    {`  right justify text`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%% `}</b>
                    {`  restore default styling`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%color `}</b>
                    {`  changes text color styling. e.g., %green.`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%num `}</b>
                    {`  set font size. e.g., %10 for 10pt font`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%eq `}</b>
                    {`  creates an equation block for typeset math`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%/ `}</b>
                    {`  switch between primary and alternate text (see bottom right Button for hover options).`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%> `}</b>
                    {`  create a bockquote section. Terminate with 2 carriage returns`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%q `}</b>
                    {`  start a quoted block of text that’s indented on the left and right. Terminate with %q`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%d `}</b>
                    {`  start a block text where the first line is indented`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`%h `}</b>
                    {`  start a block of text that begins with a hanging indent`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>@(wiki:phrase)</b>
                    {` display wikipedia page for entered text (terminate with carriage return)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`@(doctitle) `}</b>
                    {`  hyperlink to document specified by it’s title`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[@(doctitle.)fieldname] `}</b>
                    {`  display value of fieldname of text document (unless (doctitle.) is used to indicate another document by it's title)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[@fieldname:value] `}</b>
                    {`  assign value to fieldname to data document and display it (if '=' is used instead of ':' the value is set on the layout Doc.  if value is wrapped in (()) then it will be sent to ChatGPT and the response will replace the value)`}
                </p>
                <p>
                    <b style={{ fontSize: 'larger' }}>{`[@fieldname:=expression] `}</b>
                    {`  assign a computed expression to fieldname to data document and display it (if '=:=' is used instead of ':=' the expression is set on the layout Doc.  if value is wrapped in (()) then it will be sent to ChatGPT and the prompt/response will replace the value)`}
                </p>
            </div>
        );
    }

    render() {
        return (
            <MainViewModal
                dialogueBoxStyle={{ backgroundColor: SnappingManager.userBackgroundColor, alignContent: 'normal', color: SnappingManager.userColor, padding: '16px' }}
                contents={this.cheatSheet}
                isDisplayed={this.isOpen}
                interactive
                closeOnExternalClick={() => this.setOpen(false)}
            />
        );
    }
}