CoCalc -- editor-templates.ts

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/frontend/editor-templates.ts
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
const console = `
7
<div id="webapp-console-templates" class="hide">
8
    <div class="webapp-console smc-vfill webapp-console-blur">
9

10
        <!-- The bar across the top -->
11
        <!-- increase font, decrease font, refresh, paste spot, then title ... font indicator-->
12
        <div class="webapp-console-topbar">
13
            <div class="smc-users-viewing-document webapp-editor-chat-title">
14
            <!--to be filled with react component for users viewing the document-->
15
            </div>
16

17
            &nbsp;&nbsp;
18

19
            <div class="pull-left">
20
                <span class="btn-group visible-xs">
21
                    <a href="#decrease-font" class="btn btn-default"><i class="fa fa-font" style="font-size:8pt"> </i> </a>
22
                    <a href="#increase-font" class="btn btn-default"><i class="fa fa-font" style="font-size:13pt"> </i></a>
23
                    <a href="#refresh" class='btn btn-default'><i class="fa fa-repeat" style="font-size:14pt"> </i></a>
24
                </span>
25

26
                <span class="hidden-xs">
27
                    <span class="btn-group">
28
                        <a href="#decrease-font" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="right" title="Smaller"><i class="fa fa-font" style="font-size:7pt"> </i> </a>
29
                        <a href="#increase-font" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="right" title="Bigger"><i class="fa fa-font" style="font-size:10pt"> </i> </a>
30
                        <a href="#refresh" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="right" title="Reconnect"><i class="fa fa-repeat"> </i> </a>
31
                       <a href="#pause" class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="right" title="Pause"><i class="fa fa-pause"> </i> </a>
32
                       <a href="#paste" class="btn btn-default btn-sm"  data-toggle="tooltip" data-placement="right" title="History"><i class="fa fa-paste"> </i> </a>
33
                        <a href="#initfile" class="btn btn-default btn-sm"  data-toggle="tooltip" data-placement="right" title="Init file"><i class="fa fa-rocket"> </i> </a>
34
                        <a href="#boot" class="btn btn-default btn-sm"  data-toggle="tooltip" data-placement="right" title="Boot others"><i class="fa fa-sign-out-alt"> </i> </a>
35

36
                    </span>
37
                    &nbsp;&nbsp;
38
                    <span>
39
                        <span class="webapp-console-font-indicator hide"><i class="fa fa-font"> </i>
40
                            <span class="webapp-console-font-indicator-size"></span>pt
41
                            <a class="btn btn-success btn-sm" href="#font-make-default">make default</a>
42
                        </span>
43
                    </span>
44
                </span>
45
            </div>
46

47
            <div class="webapp-console-title pull-left"></div>
48
            &nbsp;&nbsp;
49
            <div class="pull-right webapp-burst-indicator hide" style="background: red;color: white; padding: 5px 15px;
50
    font-weight: bold;">
51
                WARNING: Large burst of output! (May try to interrupt.)
52
            </div>
53

54
            <div class="webapp-console-mobile-input">
55

56
                <input class="webapp-console-input-line form-control" type="text" style="width:98%" placeholder="Type input or paste here...">
57
                <span class="btn-group">
58
                    <a class="btn webapp-console-submit-esc btn-default">esc</a>
59
                    <a class="btn webapp-console-submit-line btn-default">return</a>
60
                    <a class="btn webapp-console-submit-submit btn-default">submit</a>
61
                    <a class="btn webapp-console-submit-ctrl-b btn-default">ctrl-b</a>
62
                    <a class="btn webapp-console-submit-ctrl-c btn-default">ctrl-c</a>
63
                    <a class="btn webapp-console-submit-tab btn-default">tab</a>
64
                    <a class="btn webapp-console-submit-up btn-default"><i class="fa fa-arrow-up"></i></a>
65
                    <a class="btn webapp-console-submit-down btn-default"><i class="fa fa-arrow-down"></i></a>
66
                    <a class="btn webapp-console-submit-left btn-default"><i class="fa fa-arrow-left"></i></a>
67
                    <a class="btn webapp-console-submit-right btn-default"><i class="fa fa-arrow-right"></i></a>
68
                </span>
69
            </div>
70

71
            <textarea class="webapp-console-textarea"></textarea>
72
        <!--
73
            <a class="btn btn-info webapp-console-esc hide">esc</a>
74
            <a class="btn btn-info webapp-console-tab hide">tab</a>
75
            <a class="btn btn-info webapp-console-control hide">control</a>
76
            <a class="btn webapp-console-up"><i class="fa fa-arrow-up"></i></a>
77
            <a class="btn webapp-console-down"><i class="fa fa-arrow-down"></i></a>
78
-->
79
        </div>
80

81
        <!-- The actual terminal -->
82
        <!-- I tried  autocomplete="false" in the textarea, but this is not valid HTML, and I think didn't work anyways.
83
              Jason Grout suggests: autocapitalize="off" autocorrect="off" autocomplete="off"
84
        -->
85
        <div class="smc-vfill" style="position:relative">
86
            <textarea class="webapp-console-for-mobile hide"></textarea>
87
            <div style="flex:1; display:flex; overflow:hidden" class="webapp-console-terminal-container">
88
                <div style="flex:1; position:relative">
89
                    <div class="smc-vfill webapp-console-terminal"></div>
90
                </div>
91
                <div class="webapp-console-scrollbar"></div>
92
            </div>
93
        </div>
94
    </div>
95
</div>
96

97
`;
98

99
const editor = `
100
<div id="webapp-editor-templates" class="hide">
101
  <!-- Template for the entire editor, both tabs and the actual content -->
102
  <div class="webapp-editor">
103
    <div class="row">
104
      <div class="col-xs-12">
105
        <!-- The editor content gets displayed here -->
106
        <div class="webapp-editor-content"></div>
107
      </div>
108
    </div>
109
  </div>
110

111
  <!-- Template for the tab at the top of the editor with filename and an x -->
112
  <ul>
113
    <!-- ul so is valid html -->
114
    <li class="super-menu webapp-editor-filename-pill">
115
      <div class="webapp-editor-close-button-x pull-right lighten">
116
        <i class="fa fa-times"></i>
117
      </div>
118
      <a>
119
        <span class="webapp-editor-tab-filename"></span>
120
      </a>
121
    </li>
122
  </ul>
123

124
  <!-- Template for the codemirror text editor -->
125
  <div class="webapp-editor-codemirror smc-vfill">
126
    <textarea class="webapp-editor-textarea-0 hide"></textarea>
127
    <textarea class="webapp-editor-textarea-1 hide"></textarea>
128
    <div class="webapp-editor-codemirror-content smc-vfill">
129
      <div class="webapp-editor-codemirror-button-row">
130
        <div class="webapp-editor-codemirror-button-container">
131
          <div
132
            class="hidden-xs webapp-editor-chat-title webapp-editor-write-only pull-right"
133
          >
134
            <div class="smc-users-viewing-document">
135
              <!--to be filled with react component for users viewing the document-->
136
            </div>
137
          </div>
138

139
          <div class="smc-editor-file-info-dropdown" style="float: left; margin-top:7px"></div>
140

141
          <span class="visible-xs">
142
            <span class="btn-group">
143
              <!-- <a href="#close" class="btn btn-default btn-lg"><i class="fa fa-toggle-up"></i> <span>Files...</span></a>-->
144
              <a href="#save" class="btn btn-success btn-lg"
145
                ><i class="fa fa-save"></i> Save</a
146
              >
147
              <a href="#goto-line" class="btn btn-default btn-lg"
148
                ><i class="fa fa-bolt"> </i
149
              ></a>
150
            </span>
151

152
            <span
153
              class="btn-group webapp-editor-codemirror-worksheet-buttons hide"
154
            >
155
              <a href="#execute" class="btn btn-success btn-lg">
156
                <i class="fa fa-play"></i> Run</a
157
              >
158
              <a href="#interrupt" class="btn btn-warning btn-lg">
159
                <i class="fa fa-stop"></i
160
              ></a>
161
              <a href="#kill" class="btn btn-warning btn-lg"
162
                ><i class="fa fa-refresh"></i
163
              ></a>
164
              <a href="#tab" class="btn btn-info btn-lg">
165
                <i class="fa fa-step-forward"></i
166
              ></a>
167
            </span>
168

169
            <span class="btn-group">
170
              <a href="#decrease-font" class="btn btn-default btn-lg"
171
                ><i class="fa fa-font" style="font-size: 8pt"> </i>
172
              </a>
173
              <a href="#increase-font" class="btn btn-default btn-lg"
174
                ><i class="fa fa-font" style="font-size: 13pt"> </i>
175
              </a>
176
            </span>
177

178
            <a
179
              class="btn btn-primary btn-lg hide"
180
              href="#copy-to-another-project"
181
              ><i class="fa fa-paper-plane"> </i>
182
              <span>Copy To Your Project...</span></a
183
            >
184
          </span>
185

186
          <span class="btn-group webapp-editor-write-only">
187
            <a
188
              href="#save"
189
              class="hidden-xs btn btn-success webapp-editor-save-group"
190
              data-toggle="tooltip"
191
              data-placement="bottom"
192
              title="Save file to disk."
193
            >
194
              <i class="fa fa-save primary-icon"></i>
195
              <i class="fa fa-cocalc-ring hide"></i>
196
              Save
197
              <span
198
                class="smc-uncommitted hide"
199
                data-toggle="tooltip"
200
                data-placement="bottom"
201
                title="DANGER: File NOT sent to server and not saved to disk.  You will lose work if you close this file."
202
              >
203
                NOT saved!</span
204
              >
205
            </a>
206
            <a
207
              href="#history"
208
              class="hidden-xs btn btn-info webapp-editor-history-button hide"
209
              data-toggle="tooltip"
210
              data-placement="bottom"
211
              title="View the history of this file."
212
            >
213
              <i class="fa fa-history"></i>
214
              <span class="hidden-sm">TimeTravel</span>
215
            </a>
216
<!--             <a
217
              href="#chatgpt"
218
              style="background:#10a37f;color:white"
219
              class="hidden-xs btn btn-default hide"
220
              data-toggle="tooltip"
221
              data-placement="bottom"
222
              title="Get assistance from ChatGPT."
223
            >
224
              <i class="fa fa-robot"></i>
225
              <span class="hidden-sm hidden-md">ChatGPT</span>
226
            </a> -->
227
          </span>
228

229
          <span class="hidden-xs">
230
            <span class="webapp-editor-codemirror-worksheet-buttons hide">
231
              <span class="btn-group webapp-editor-write-only">
232
                <a
233
                  href="#execute"
234
                  class="btn btn-default"
235
                  data-toggle="tooltip"
236
                  data-placement="bottom"
237
                  title="Execute current or selected cells (unless input hidden)."
238
                  ><i class="fa fa-play"></i> &nbsp;Run</a
239
                >
240
                <a
241
                  href="#tab"
242
                  class="btn btn-default"
243
                  data-toggle="tooltip"
244
                  data-placement="bottom"
245
                  title="Tab completion."
246
                >
247
                  <i class="fa fa-step-forward"></i>
248
                  <span class="hidden-sm hidden-md">Tab</span></a
249
                >
250
                <a
251
                  href="#interrupt"
252
                  class="btn btn-default"
253
                  data-toggle="tooltip"
254
                  data-placement="bottom"
255
                  title="Stop the running calculation."
256
                  ><i class="fa fa-stop"></i>
257
                  <span class="hidden-sm hidden-md">Stop</span></a
258
                >
259
                <a
260
                  href="#kill"
261
                  class="btn btn-default"
262
                  data-toggle="tooltip"
263
                  data-placement="bottom"
264
                  title="Restart the running Sage process (all variables reset)."
265
                  ><i class="fa fa-refresh"></i>
266
                  <span class="hidden-sm hidden-md">Restart</span></a
267
                >
268
              </span>
269
              <span class="btn-group webapp-editor-write-only hidden-sm">
270
                <a
271
                  href="#toggle-input"
272
                  class="btn btn-default"
273
                  data-toggle="tooltip"
274
                  data-placement="bottom"
275
                  title="Toggle display of input of selected cells."
276
                  ><i class="fa fa-toggle-on"></i>
277
                  <span class="hidden-sm hidden-md">in</span></a
278
                >
279
                <a
280
                  href="#toggle-output"
281
                  class="btn btn-default"
282
                  data-toggle="tooltip"
283
                  data-placement="bottom"
284
                  title="Toggle display of output of selected cells."
285
                  ><i class="fa fa-toggle-on"></i>
286
                  <span class="hidden-sm hidden-md">out</span></a
287
                >
288
                <a
289
                  href="#delete-output"
290
                  class="btn btn-default"
291
                  data-toggle="tooltip"
292
                  data-placement="bottom"
293
                  title="Delete output of selected cells (unless input hidden)."
294
                  ><i class="fa fa-times-circle"></i
295
                ></a>
296
              </span>
297
            </span>
298
          </span>
299
          <span class="hidden-xs btn-group editor-btn-group">
300
            <a
301
              href="#vim-mode-toggle"
302
              class="btn btn-default webapp-editor-write-only"
303
              data-toggle="tooltip"
304
              data-placement="bottom"
305
              title="Toggle VIM mode"
306
              style="width: 4em"
307
              >esc</a
308
            >
309
            <a
310
              href="#autoindent"
311
              class="btn btn-default webapp-editor-write-only"
312
              data-toggle="tooltip"
313
              data-placement="bottom"
314
              title="Autoindent selected text"
315
              ><i class="fa fa-indent"></i
316
            ></a>
317
            <a
318
              href="#undo"
319
              class="btn btn-default webapp-editor-write-only"
320
              data-toggle="tooltip"
321
              data-placement="bottom"
322
              title="Undo"
323
              ><i class="fa fa-undo"></i
324
            ></a>
325
            <a
326
              href="#redo"
327
              class="btn btn-default webapp-editor-write-only"
328
              data-toggle="tooltip"
329
              data-placement="bottom"
330
              title="Redo"
331
              ><i class="fa fa-repeat"></i
332
            ></a>
333
            <a
334
              href="#search"
335
              class="btn btn-default btn-history"
336
              data-toggle="tooltip"
337
              data-placement="bottom"
338
              title="Search"
339
              ><i class="fa fa-search"></i
340
            ></a>
341
            <!-- <a href="#prev" class="btn btn-default btn-history" data-toggle="tooltip" data-placement="bottom" title="Previous"><i class="fa fa-chevron-up"></i></a>
342
                        <a href="#next" class="btn btn-default btn-history" data-toggle="tooltip" data-placement="bottom" title="Next"><i class="fa fa-chevron-down"></i></a>-->
343
            <a
344
              href="#replace"
345
              class="btn btn-default webapp-editor-write-only"
346
              data-toggle="tooltip"
347
              data-placement="bottom"
348
              title="Replace"
349
              ><i class="fa fa-exchange"></i
350
            ></a>
351
            <a
352
              href="#split-view"
353
              class="btn btn-default"
354
              data-toggle="tooltip"
355
              data-placement="bottom"
356
              title="Split view of document"
357
            >
358
              <i class="fa fa-horizontal-split webapp-editor-layout-0 hide"></i>
359
              <i class="fa fa-vertical-split webapp-editor-layout-1 hide"></i>
360
              <i
361
                class="fa fa-window-maximize webapp-editor-layout-2 hide"
362
                style="font-size: 12pt"
363
              ></i>
364
            </a>
365
            <a
366
              href="#decrease-font"
367
              class="btn btn-default btn-history"
368
              data-toggle="tooltip"
369
              data-placement="bottom"
370
              title="Decrease text size"
371
              ><i class="fa fa-font" style="font-size: 7pt"> </i>
372
            </a>
373
            <a
374
              href="#increase-font"
375
              class="btn btn-default btn-history"
376
              data-toggle="tooltip"
377
              data-placement="bottom"
378
              title="Increase text size"
379
              ><i class="fa fa-font" style="font-size: 11pt"> </i>
380
            </a>
381
            <a
382
              href="#goto-line"
383
              class="btn btn-default btn-history"
384
              data-toggle="tooltip"
385
              data-placement="bottom"
386
              title="Go to line"
387
              ><i class="fa fa-bolt"> </i>
388
            </a>
389
            <a
390
              href="#copy"
391
              class="btn btn-default btn-history webapp-editor-write-only"
392
              data-toggle="tooltip"
393
              data-placement="bottom"
394
              title="Copy"
395
              ><i class="fa fa-copy"> </i>
396
            </a>
397
            <a
398
              href="#paste"
399
              class="btn btn-default btn-history webapp-editor-write-only"
400
              data-toggle="tooltip"
401
              data-placement="bottom"
402
              title="Paste"
403
              ><i class="fa fa-paste"> </i>
404
            </a>
405
            <a
406
              href="#sagews2pdf"
407
              class="hidden-sm btn btn-default webapp-editor-write-only hide"
408
              data-toggle="tooltip"
409
              data-placement="bottom"
410
              title="Convert to PDF"
411
              ><i class="fa fa-file-pdf-o"> </i>
412
            </a>
413
            <a
414
              href="#print"
415
              class="hidden-sm btn btn-default webapp-editor-write-only hide"
416
              data-toggle="tooltip"
417
              data-placement="bottom"
418
              title="Print"
419
              ><i class="fa fa-print"> </i>
420
              <i class="fa fa-cocalc-ring hide"></i
421
            ></a>
422
            <a
423
              href="#sagews2ipynb"
424
              class="hidden-sm btn btn-default webapp-editor-write-only hide"
425
              data-toggle="tooltip"
426
              data-placement="bottom"
427
              title="Convert to ipynb"
428
              ><i class="fa fa-ipynb"> </i>
429
              <span class="hidden-sm hidden-md">Jupyter</span></a
430
            >
431
          </span>
432

433
          <span class="btn-group webapp-editor-read-only hide">
434
            <a
435
              href="#readonly"
436
              class="hidden-xs btn btn-success webapp-editor-save-group disabled"
437
              data-toggle="tooltip"
438
              data-placement="bottom"
439
              title="File is read only."
440
            >
441
              <i class="fa fa-save"></i>
442
              <span class="hidden-sm">Readonly</span>
443
            </a>
444
            <a
445
              href="#history"
446
              class="hidden-xs btn btn-info webapp-editor-history-button hide"
447
              data-toggle="tooltip"
448
              data-placement="bottom"
449
              title="View the history of this file."
450
            >
451
              <i class="fa fa-history"></i>
452
              <span class="hidden-sm hidden-md">TimeTravel</span>
453
            </a>
454
          </span>
455

456
          <span class="hidden-xs">
457
            <a class="btn btn-primary hide" href="#copy-to-another-project"
458
              ><i class="fa fa-paper-plane"> </i>
459
              <span>Copy To Your Project...</span></a
460
            >
461
            <!--<a class="btn btn-success" href="#download-file"><i class="fa fa-cloud-download"> </i> <span class="hidden-sm">Download</span></a>-->
462
          </span>
463

464
          <span class="webapp-editor-codemirror-loading hide">
465
            <i class="fa fa-cocalc-ring"></i> load…
466
          </span>
467

468
          <span class="webapp-editor-codemirror-sync">
469
            <span class="webapp-editor-codemirror-not-synced hide"
470
              ><i class="fa fa-cocalc-ring"></i> sync…</span
471
            >
472
            <span class="webapp-editor-codemirror-synced hide"
473
              ><i class="fa fa-check"></i
474
            ></span>
475
          </span>
476

477
          <span class="webapp-editor-codemirror-message"></span>
478
          <span class="webapp-editor-codemirror-filename pull-right"></span>
479
        </div>
480

481
        <div class="webapp-editor-buttonbars webapp-editor-write-only">
482
          <div class="webapp-editor-latex-buttonbar hide"></div>
483
          <div
484
            class="webapp-editor-codemirror-textedit-buttons hide visible-sm-block visible-md-block visible-lg-block"
485
          >
486
            <code
487
              class="webapp-editor-codeedit-buttonbar-mode pull-right hide"
488
            ></code>
489
            <span class="react-target"></span>
490
            <span
491
              class="webapp-editor-codeedit-buttonbar-assistant pull-right hide"
492
            >
493
              <a
494
                href="#assistant"
495
                class="btn btn-default"
496
                data-toggle="tooltip"
497
                data-placement="bottom"
498
                title="Insert examples"
499
              >
500
                <i class="fa fa-magic"></i>
501
                <span class="hidden-sm">Snippets</span>
502
              </a>
503
            </span>
504
          </div>
505
          <div class="webapp-editor-codemirror-worksheet-editable-buttons hide">
506
            <span class="btn-group">
507
              <a
508
                href="#bold"
509
                class="btn btn-default"
510
                data-toggle="tooltip"
511
                data-placement="top"
512
                title="Bold"
513
                ><i class="fa fa-bold"></i
514
              ></a>
515
              <a
516
                href="#italic"
517
                class="btn btn-default"
518
                data-toggle="tooltip"
519
                data-placement="top"
520
                title="Italic"
521
                ><i class="fa fa-italic"></i
522
              ></a>
523
              <a
524
                href="#underline"
525
                class="btn btn-default"
526
                data-toggle="tooltip"
527
                data-placement="top"
528
                title="Underline"
529
                ><i class="fa fa-underline"></i
530
              ></a>
531
              <a
532
                href="#strikethrough"
533
                class="btn btn-default"
534
                data-toggle="tooltip"
535
                data-placement="top"
536
                title="Strike through"
537
                ><i class="fa fa-strikethrough"></i
538
              ></a>
539
              <a
540
                href="#subscript"
541
                class="btn btn-default"
542
                data-toggle="tooltip"
543
                data-placement="top"
544
                title="Subscript (use LaTeX for serious equations)"
545
                ><i class="fa fa-subscript"></i
546
              ></a>
547
              <a
548
                href="#superscript"
549
                class="btn btn-default"
550
                data-toggle="tooltip"
551
                data-placement="top"
552
                title="Superscript"
553
                ><i class="fa fa-superscript"></i
554
              ></a>
555
            </span>
556
            <span class="btn-group">
557
              <a
558
                href="#equation"
559
                data-args="special"
560
                class="btn btn-default"
561
                data-toggle="tooltip"
562
                data-placement="top"
563
                title="Inline equation..."
564
              >
565
                $
566
              </a>
567
              <a
568
                href="#display_equation"
569
                data-args="special"
570
                class="btn btn-default"
571
                data-toggle="tooltip"
572
                data-placement="top"
573
                title="Displayed equation..."
574
              >
575
                $$
576
              </a>
577
              <a
578
                href="#insertunorderedlist"
579
                class="btn btn-default"
580
                data-toggle="tooltip"
581
                data-placement="top"
582
                title="Insert unordered list"
583
                ><i class="fa fa-list"></i
584
              ></a>
585
              <a
586
                href="#insertorderedlist"
587
                class="btn btn-default"
588
                data-toggle="tooltip"
589
                data-placement="top"
590
                title="Insert ordered list"
591
                ><i class="fa fa-list-ol"></i
592
              ></a>
593
              <a
594
                href="#link"
595
                data-args="special"
596
                class="btn btn-default"
597
                data-toggle="tooltip"
598
                data-placement="top"
599
                title="Insert link..."
600
                ><i class="fa fa-link"></i
601
              ></a>
602
              <a
603
                href="#image"
604
                data-args="special"
605
                class="btn btn-default"
606
                data-toggle="tooltip"
607
                data-placement="top"
608
                title="Insert image..."
609
                ><i class="fa fa-image"></i
610
              ></a>
611
              <!-- <a href="#insertHorizontalRule" class="btn btn-default">&lt;hr&gt;</a> -->
612
            </span>
613
            <span class="btn-group">
614
              <a
615
                href="#justifyleft"
616
                class="btn btn-default"
617
                data-toggle="tooltip"
618
                data-placement="top"
619
                title="Left justify"
620
                ><i class="fa fa-align-left"></i
621
              ></a>
622
              <a
623
                href="#justifycenter"
624
                class="btn btn-default"
625
                data-toggle="tooltip"
626
                data-placement="top"
627
                title="Justify center"
628
                ><i class="fa fa-align-center"></i
629
              ></a>
630
              <a
631
                href="#justifyright"
632
                class="btn btn-default"
633
                data-toggle="tooltip"
634
                data-placement="top"
635
                title="Right justify"
636
                ><i class="fa fa-align-right"></i
637
              ></a>
638
              <a
639
                href="#justifyfull"
640
                class="btn btn-default"
641
                data-toggle="tooltip"
642
                data-placement="top"
643
                title="Justify full"
644
                ><i class="fa fa-align-justify"></i
645
              ></a>
646
              <a
647
                href="#outdent"
648
                class="btn btn-default"
649
                data-toggle="tooltip"
650
                data-placement="top"
651
                title="Outdent"
652
                ><i class="fa fa-outdent"></i
653
              ></a>
654
              <a
655
                href="#indent"
656
                class="btn btn-default"
657
                data-toggle="tooltip"
658
                data-placement="top"
659
                title="Indent"
660
                ><i class="fa fa-indent"></i
661
              ></a>
662
            </span>
663
            <span class="btn-group">
664
              <a
665
                href="#undo"
666
                class="btn btn-default"
667
                data-toggle="tooltip"
668
                data-placement="top"
669
                title="Undo"
670
                ><i class="fa fa-undo"></i
671
              ></a>
672
              <a
673
                href="#redo"
674
                class="btn btn-default"
675
                data-toggle="tooltip"
676
                data-placement="top"
677
                title="Redo"
678
                ><i class="fa fa-repeat"></i
679
              ></a>
680
            </span>
681
            <span class="btn-group">
682
              <span
683
                class="btn-group sagews-output-editor-font smc-tooltip"
684
                data-toggle="tooltip"
685
                data-placement="top"
686
                title="Fonts"
687
              >
688
                <span
689
                  class="btn btn-default dropdown-toggle"
690
                  data-toggle="dropdown"
691
                  title="Font"
692
                >
693
                  <i class="fa fa-font"></i> <b class="caret"></b>
694
                </span>
695
                <ul class="dropdown-menu"></ul>
696
              </span>
697
              <span
698
                class="btn-group sagews-output-editor-font-size smc-tooltip"
699
                data-toggle="tooltip"
700
                data-placement="top"
701
                title="Font size"
702
              >
703
                <span
704
                  class="btn btn-default dropdown-toggle"
705
                  data-toggle="dropdown"
706
                  title="Text height"
707
                >
708
                  <i class="fa fa-text-height"></i> <b class="caret"></b>
709
                </span>
710
                <ul class="dropdown-menu"></ul>
711
              </span>
712
              <span
713
                class="btn-group sagews-output-editor-block-type smc-tooltip"
714
                data-toggle="tooltip"
715
                data-placement="top"
716
                title="Format type"
717
              >
718
                <span
719
                  class="btn btn-default dropdown-toggle"
720
                  data-toggle="dropdown"
721
                  title="Header"
722
                >
723
                  <i class="fa fa-header"></i> <b class="caret"></b>
724
                </span>
725
                <ul class="dropdown-menu"></ul>
726
              </span>
727
            </span>
728
            <span class="btn-group">
729
              <!-- not implemented yet -->
730
              <span
731
                class="sagews-output-editor-foreground-color-selector input-group color smc-tooltip"
732
                data-color-format="rgb"
733
                data-toggle="tooltip"
734
                data-placement="top"
735
                title="Text color"
736
              >
737
                <input
738
                  type="text"
739
                  style="cursor: pointer"
740
                  class="form-control"
741
                />
742
                <span class="input-group-addon" style="padding: 3px"
743
                  ><i class="fa fa-font" style="height: 16px; width: 16px"></i
744
                  ><b class="caret"></b
745
                ></span>
746
              </span>
747
            </span>
748
            <span class="btn-group">
749
              <!-- not implemented yet -->
750
              <span
751
                class="sagews-output-editor-background-color-selector input-group color smc-tooltip"
752
                data-color-format="rgb"
753
                data-toggle="tooltip"
754
                data-placement="top"
755
                title="Text background highlight color"
756
              >
757
                <input
758
                  type="text"
759
                  style="cursor: pointer"
760
                  class="form-control"
761
                />
762
                <span class="input-group-addon" style="padding: 3px"
763
                  ><i class="fa fa-font" style="height: 16px; width: 16px"></i
764
                  ><b class="caret"></b
765
                ></span>
766
              </span>
767
            </span>
768
          </div>
769
        </div>
770
      </div>
771

772
      <div
773
        class="webapp-editor-codemirror-input-container-layout-0 hide"
774
        style="flex: 1; display: flex; flex-direction: column"
775
      >
776
        <!-- See https://github.com/codemirror/CodeMirror/issues/3679 for why we do this nesting
777
                       (to work around a chrome bug, and/or avoid major slowdown doing layout?) -->
778
        <div
779
          class="webapp-editor-codemirror-input-box"
780
          style="display: flex; flex-direction: column; position: relative"
781
        >
782
          <div style="position: absolute; height: 100%; width: 100%"></div>
783
        </div>
784
        <div class="webapp-editor-codemirror-input-box-1 hide">
785
          <div></div>
786
        </div>
787
      </div>
788

789
      <div
790
        class="webapp-editor-codemirror-input-container-layout-1 hide"
791
        style="flex: 1; display: flex; flex-direction: column"
792
      >
793
        <!-- See https://github.com/codemirror/CodeMirror/issues/3679 for why we do this nesting
794
                       (to work around a chrome bug, and/or avoid major slowdown doing layout?) -->
795
        <div
796
          class="webapp-editor-codemirror-input-box"
797
          style="display: flex; flex-direction: column; position: relative"
798
        >
799
          <div style="position: absolute; height: 100%; width: 100%"></div>
800
        </div>
801
        <div class="webapp-editor-resize-bar-layout-1"></div>
802
        <!-- flex: 1 so expands to what is left after editor above is placed. -->
803
        <div
804
          class="webapp-editor-codemirror-input-box-1"
805
          style="
806
            flex: 1;
807
            display: flex;
808
            flex-direction: column;
809
            position: relative;
810
          "
811
        >
812
          <div style="position: absolute; height: 100%; width: 100%"></div>
813
        </div>
814
      </div>
815

816
      <div
817
        class="webapp-editor-codemirror-input-container-layout-2 hide"
818
        style="flex: 1; display: flex; flex-direction: row"
819
      >
820
        <!-- See https://github.com/codemirror/CodeMirror/issues/3679 for why we do this nesting
821
                       (to work around a chrome bug, and/or avoid major slowdown doing layout?) -->
822
        <div
823
          class="webapp-editor-codemirror-input-box"
824
          style="display: flex; flex-direction: column; position: relative"
825
        >
826
          <div style="position: absolute; height: 100%; width: 100%"></div>
827
        </div>
828
        <div class="webapp-editor-resize-bar-layout-2"></div>
829
        <!-- flex: 1 so expands to what is left after editor above is placed. -->
830
        <div
831
          class="webapp-editor-codemirror-input-box-1"
832
          style="
833
            flex: 1;
834
            display: flex;
835
            flex-direction: column;
836
            position: relative;
837
          "
838
        >
839
          <div style="position: absolute; height: 100%; width: 100%"></div>
840
        </div>
841
      </div>
842
    </div>
843
    <div
844
      class="webapp-editor-codemirror-startup-message alert alert-warning hide"
845
      role="alert"
846
    ></div>
847
  </div>
848

849
  <!-- Template for the codemirror text editor other user cursors -->
850
  <div class="webapp-editor-codemirror-cursor">
851
    <span class="webapp-editor-codemirror-cursor-label"></span>
852
    <div class="webapp-editor-codemirror-cursor-inside">&nbsp;&nbsp;&nbsp;</div>
853
  </div>
854

855
  <div class="smc-editor-codemirror-cursor">
856
    <span class="smc-editor-codemirror-cursor-label"></span>
857
    <div class="smc-editor-codemirror-cursor-inside">&nbsp;&nbsp;&nbsp;</div>
858
  </div>
859

860
  <!-- Static HTML viewer -->
861
  <div class="webapp-editor-static-html">
862
    <div class="webapp-editor-static-html-content">
863
      <iframe style="width: 100%; border: 0px"> </iframe>
864
    </div>
865
  </div>
866

867
  <!-- Templates for the png-based PDF previewer; this is designed for the pdf changes in little ways locally.  -->
868
  <div class="webapp-editor-pdf-preview smc-vfill">
869
    <div class="webapp-editor-pdf-preview-spinner hide"></div>
870
    <div class="webapp-editor-pdf-preview-highlight hide"></div>
871
    <div class="webapp-editor-pdf-preview-buttons">
872
      <span class="btn-group">
873
        <a
874
          href="#zoom-preview-out"
875
          class="btn btn-sm btn-default"
876
          data-toggle="tooltip"
877
          data-placement="bottom"
878
          title="Zoom out some"
879
          ><i class="fa fa-search-minus"></i
880
        ></a>
881
        <a
882
          href="#zoom-preview-in"
883
          class="btn btn-sm btn-default"
884
          data-toggle="tooltip"
885
          data-placement="bottom"
886
          title="Zoom in some"
887
          ><i class="fa fa-search-plus"></i
888
        ></a>
889
        <a
890
          href="#zoom-preview-fullpage"
891
          class="btn btn-sm btn-default"
892
          data-toggle="tooltip"
893
          data-placement="bottom"
894
          title="Zoom so page width matches viewport"
895
          ><i class="fa fa-file-o"></i
896
        ></a>
897
        <a
898
          href="#zoom-preview-width"
899
          class="btn btn-sm btn-default"
900
          data-toggle="tooltip"
901
          data-placement="bottom"
902
          title="Zoom in close"
903
          ><i class="fa fa-arrows-alt"></i
904
        ></a>
905
        <a
906
          href="#preview-resolution"
907
          class="btn btn-sm btn-default"
908
          data-toggle="tooltip"
909
          data-placement="bottom"
910
          title="Change the preview resolution"
911
          ><i class="fa fa-th"></i
912
        ></a>
913
        <a
914
          href="#pdf-download"
915
          class="btn btn-sm btn-default"
916
          data-toggle="tooltip"
917
          data-placement="bottom"
918
          title="Download the PDF file"
919
          ><i class="fa fa-download"></i
920
        ></a>
921
      </span>
922
      <span class="btn-group pull-right">
923
        <a
924
          href="#toggle-preview"
925
          class="btn btn-sm btn-default"
926
          data-toggle="tooltip"
927
          data-placement="bottom"
928
          title="If enabled, the LaTeX file is compiled and a preview is rendered."
929
        >
930
          <i class="fa fa-check-square-o"></i> Build preview
931
        </a>
932
      </span>
933
    </div>
934
    <div
935
      style="flex: 1; overflow-y: auto; overflow-x: auto"
936
      class="webapp-editor-pdf-preview-output"
937
    >
938
      <div class="webapp-editor-pdf-preview-page"></div>
939
      <div class="webapp-editor-pdf-preview-message hide"></div>
940
    </div>
941
  </div>
942

943
  <!-- Templates for the embedded PDF previewer: just uses the built-in renderer; can't cope with file updates, inverse search, etc. -->
944
  <div class="webapp-editor-pdf-preview-embed smc-vfill">
945
    <div class="webapp-editor-codemirror-button-row">
946
      <span class="webapp-editor-pdf-preview-embed-spinner hide"></span>
947
      <span class="btn-group">
948
        <a class="btn btn-default btn-lg visible-xs" href="#close"
949
          ><i class="fa fa-toggle-up"></i>
950
          <span class="hidden-xs">Files...</span></a
951
        >
952
        <a class="btn btn-default btn-lg visible-xs" href="#refresh"
953
          ><i class="fa fa-refresh"></i>
954
          <span class="hidden-xs"> Refresh</span></a
955
        >
956
        <a class="btn btn-default hidden-xs" href="#refresh"
957
          ><i class="fa fa-refresh"></i>
958
          <span class="hidden-xs"> Refresh</span></a
959
        >
960
      </span>
961
      <span class="btn-group pull-right">
962
        <a class="btn btn-default webapp-editor-pdf-title hidden-xs">
963
          <i class="fa fa-external-link"></i>
964
          <span></span>
965
        </a>
966
      </span>
967
    </div>
968
    <div class="webapp-editor-pdf-preview-embed-page smc-vfill">
969
      <iframe frameborder="0" scrolling="no" style="width: 100%; height: 100%">
970
        <br />
971
        <br />
972
        &nbsp;&nbsp;&nbsp;Your browser doesn't support embedded PDF's, but you
973
        can <a target="_blank">download <span></span></a>...
974
      </iframe>
975
    </div>
976
  </div>
977

978
  <div class="webapp-editor-history smc-vfill">
979
    <div
980
      class="webapp-editor-history-controls"
981
      style="
982
        display: flex;
983
        padding-left: 10px;
984
        padding-right: 10px;
985
        border-bottom: 1px solid lightgrey;
986
        background-color: #efefef;
987
      "
988
    >
989
      <span
990
        style="
991
          color: #666;
992
          font-size: 14pt;
993
          font-weight: bold;
994
          margin-right: 1em;
995
        "
996
      >
997
        <i class="fa fa-history"></i>
998
        TimeTravel
999
      </span>
1000
      <span>
1001
        <a
1002
          href="#show-diff"
1003
          class="btn btn-default"
1004
          data-toggle="tooltip"
1005
          data-placement="bottom"
1006
          title="Show changes"
1007
          ><i class="fa fa-square-o"></i> Changes</a
1008
        >
1009
        <a
1010
          href="#hide-diff"
1011
          class="btn btn-default hide"
1012
          data-toggle="tooltip"
1013
          data-placement="bottom"
1014
          title="Show what changed"
1015
          ><i class="fa fa-check-square-o"></i> Changes</a
1016
        >
1017
      </span>
1018
      <span
1019
        class="webapp-editor-history-control-button-container btn-group smc-btn-group-nobreak"
1020
        style="margin-left: 1em"
1021
      >
1022
        <a
1023
          href="#back"
1024
          class="btn btn-default"
1025
          data-toggle="tooltip"
1026
          data-placement="bottom"
1027
          title="Back"
1028
          ><i class="fa fa-step-backward"></i
1029
        ></a>
1030
        <a
1031
          href="#forward"
1032
          class="btn btn-default disabled"
1033
          data-toggle="tooltip"
1034
          data-placement="bottom"
1035
          title="Forward"
1036
          ><i class="fa fa-step-forward"></i
1037
        ></a>
1038
      </span>
1039
      <span class="btn-group smc-btn-group-nobreak">
1040
        <a
1041
          href="#file"
1042
          class="btn btn-info"
1043
          style="margin-left: 1em"
1044
          data-toggle="tooltip"
1045
          data-placement="bottom"
1046
          title="Show full file"
1047
          ><i class="fa fa-file-code-o"></i> Open File</a
1048
        >
1049
        <a
1050
          href="#revert"
1051
          class="btn btn-warning hide"
1052
          data-toggle="tooltip"
1053
          data-placement="bottom"
1054
          title="Revert the live file to the displayed revision"
1055
          ><i class="fa fa-undo"></i> Revert live version to this &nbsp;</a
1056
        >
1057
        <a href="#snapshots" class="btn btn-default">
1058
          <i class="fa fa-life-saver"></i>
1059
          <span class="hidden-sm" style="font-size: 12px">Backups</span>
1060
        </a>
1061
        <a
1062
          href="#all"
1063
          class="btn btn-default hide"
1064
          data-toggle="tooltip"
1065
          data-placement="bottom"
1066
          title="Load complete history"
1067
          ><i class="fa fa-floppy-o"></i> Load All History
1068
        </a>
1069
        <a
1070
          href="#export"
1071
          class="btn btn-default"
1072
          data-toggle="tooltip"
1073
          data-placement="bottom"
1074
          title="Export to file"
1075
          ><i class="fa fa-file-export"></i> Export</a
1076
        >
1077
      </span>
1078
      <div style="color: #666; margin-left: 1em">
1079
        <span
1080
          class="webapp-editor-history-revision-time"
1081
          style="font-weight: bold; font-size: 12pt"
1082
        ></span
1083
        ><span class="webapp-editor-history-diff-mode hide"
1084
          >&nbsp;&nbsp; to&nbsp;&nbsp; </span
1085
        ><span
1086
          class="hide webapp-editor-history-diff-mode webapp-editor-history-revision-time2"
1087
          style="font-weight: bold; font-size: 12pt"
1088
        ></span
1089
        ><span class="webapp-editor-history-revision-number"> </span>
1090
      </div>
1091
    </div>
1092
    <div style="margin-top: 7px; margin-right: 15px">
1093
      &nbsp;
1094
      <span
1095
        class="webapp-editor-history-revision-user lighten pull-right"
1096
      ></span>
1097
    </div>
1098
    <div
1099
      class="webapp-editor-history-sliders"
1100
      style="border-bottom: 1px solid lightgrey"
1101
    >
1102
      <div
1103
        class="webapp-editor-history-slider webapp-editor-history-slider-style"
1104
      ></div>
1105
      <div
1106
        class="webapp-editor-history-diff-slider hide webapp-editor-history-slider-style"
1107
      ></div>
1108
    </div>
1109

1110
    <div class="webapp-editor-history-no-viewer hide" style="margin-left: 15px">
1111
      <b>WARNING: </b> History viewer for this file type not implemented, so
1112
      showing underlying raw file instead.
1113
    </div>
1114

1115
    <div class="webapp-editor-history-history_editor smc-vfill"></div>
1116
  </div>
1117

1118
  <span class="sagews-input">
1119
    <span class="sagews-input-hr sagews-input-eval-state"></span>
1120
    <span class="sagews-input-hr sagews-input-run-state"></span>
1121
    <span class="sagews-input-hr sagews-input-newcell"></span>
1122
  </span>
1123

1124
  <span class="sagews-output">
1125
    <span class="sagews-output-container">
1126
      <span class="sagews-output-messages"></span>
1127
    </span>
1128
  </span>
1129

1130
  <div class="webapp-ipython-notebook">
1131
    <!--<h3 style="margin-left:1em">IPython Notebook: <span class="webapp-ipython-filename"></span></h3>-->
1132
    <div class="webapp-ipython-notebook-buttons hidden-xs">
1133
      <span class="webapp-ipython-notebook-status-messages lighten"> </span>
1134
      <span class="hide webapp-ipython-notebook-danger"
1135
        >DANGER: Users on this VM could connect unless you stop your
1136
        ipython-notebook server (they would have to know secret internal
1137
        project-id).</span
1138
      >
1139
      <span class="btn-group">
1140
        <a
1141
          href="#save"
1142
          class="btn btn-sm btn-success"
1143
          data-toggle="tooltip"
1144
          data-placement="bottom"
1145
          title="Save .ipynb file to disk (file is constantly sync'd with server)."
1146
        >
1147
          <i class="fa fa-save primary-icon"></i
1148
          ><i class="fa fa-cocalc-ring hide"></i> Save
1149
        </a>
1150
        <a
1151
          href="#history"
1152
          class="btn btn-sm btn-info webapp-editor-history-button hide"
1153
          data-toggle="tooltip"
1154
          data-placement="bottom"
1155
          title="View the history of this file."
1156
        >
1157
          <i class="fa fa-history"></i>
1158
          <span class="hidden-sm">TimeTravel</span>
1159
        </a>
1160
        <a
1161
          href="#reload"
1162
          class="btn btn-sm btn-warning"
1163
          data-toggle="tooltip"
1164
          data-placement="bottom"
1165
          title="Reload this Notebook; use if the IPython server is killed or restarted on another port"
1166
        >
1167
          <i class="fa fa-refresh"></i> Reload</a
1168
        >
1169
        <a
1170
          href="#publish"
1171
          class="btn btn-primary btn-sm"
1172
          data-toggle="tooltip"
1173
          data-placement="bottom"
1174
          title="Publish this notebook for anybody to see"
1175
        >
1176
          <i class="fa fa-refresh fa-spin hide"> </i>
1177
          <i class="fa fa-share-square"></i> Publish</a
1178
        >
1179
        <a
1180
          href="#info"
1181
          class="btn btn-sm btn-info"
1182
          data-toggle="tooltip"
1183
          data-placement="bottom"
1184
          title="Extra information about the IPython notebook"
1185
        >
1186
          <i class="fa fa-info-circle"></i> About
1187
        </a>
1188
      </span>
1189
    </div>
1190
    <div class="visible-xs">
1191
      <span class="btn-group">
1192
        <a href="#save" class="btn btn-success btn-lg">
1193
          <i class="fa fa-save"></i> Save</a
1194
        >
1195
      </span>
1196
      <span class="btn-group webapp-editor-codemirror-worksheet-buttons hide">
1197
        <a href="#execute" class="btn btn-default btn-lg">
1198
          <i class="fa fa-play"></i>
1199
          <span>Run</span>
1200
        </a>
1201
        <a href="#interrupt" class="btn btn-default btn-lg">
1202
          <i class="fa fa-stop"></i>
1203
          <span>Stop</span>
1204
        </a>
1205
        <a href="#tab" class="btn btn-default btn-lg">
1206
          <i class="fa fa-info-circle"></i>
1207
          <span>Tab</span>
1208
        </a>
1209
      </span>
1210
      <span class="btn-group">
1211
        <a href="#reload" class="btn btn-warning btn-lg">
1212
          <i class="fa fa-refresh"></i> Reload</a
1213
        >
1214
        <a href="#info" class="btn btn-info btn-lg">
1215
          <i class="fa fa-info-circle"></i>
1216
        </a>
1217
      </span>
1218
    </div>
1219
    <h3
1220
      class="webapp-ipython-notebook-connecting hide"
1221
      style="margin-left: 2em"
1222
    >
1223
      Opening...
1224
    </h3>
1225
    <div class="webapp-ipython-notebook-notebook"></div>
1226
  </div>
1227

1228
  <div
1229
    class="modal webapp-file-print-dialog"
1230
    data-backdrop="static"
1231
    tabindex="-1"
1232
    role="dialog"
1233
    aria-hidden="true"
1234
  >
1235
    <div class="modal-dialog">
1236
      <div class="modal-content">
1237
        <div class="modal-header">
1238
          <button type="button" class="close btn-close" aria-hidden="true">
1239
            <span style="font-size: 20pt">×</span>
1240
          </button>
1241
          <h3>
1242
            <i class="fa fa-print"> </i> Printable PDF version of
1243
            <span class="webapp-file-print-filename"></span>
1244
          </h3>
1245
        </div>
1246
        <div class="well">
1247
          <h4>Heading <span class="lighten">(click to edit)</span></h4>
1248
          <div class="well" style="background-color: white; text-align: center">
1249
            <h4 class="webapp-file-print-title" contenteditable="true"></h4>
1250
            <h5 class="webapp-file-print-author" contenteditable="true"></h5>
1251
            <h5 class="webapp-file-print-date" contenteditable="true"></h5>
1252
          </div>
1253
          <div class="webapp-file-options-sagews hide">
1254
            <h4>Worksheet Options</h4>
1255
            <div class="well" style="background-color: white">
1256
              <div class="checkbox">
1257
                <label class="" rel="tooltip" title="Table of contents">
1258
                  <input
1259
                    type="checkbox"
1260
                    class="webapp-file-print-contents"
1261
                    rel="tooltip"
1262
                  />Table of contents
1263
                </label>
1264
              </div>
1265
              <div class="checkbox">
1266
                <label class="" rel="tooltip" title="Keep generated files">
1267
                  <input
1268
                    type="checkbox"
1269
                    class="webapp-file-print-keepfiles"
1270
                    rel="tooltip"
1271
                  />Keep generated files in a sub-directory. This is useful for
1272
                  debugging printing issues or additional editing.
1273
                  <div class="smc-file-printing-tempdir hide"></div>
1274
                </label>
1275
              </div>
1276
            </div>
1277
          </div>
1278
        </div>
1279
        <div class="modal-footer">
1280
          <button class="btn btn-close pull-left btn-default btn-lg">
1281
            Close
1282
          </button>
1283
          <button class="btn btn-primary btn-submit pull-left btn-lg">
1284
            <i class="fa fa-bolt primary-icon"> </i>
1285
            <i class="fa fa-cocalc-ring hide"></i> Generate PDF
1286
          </button>
1287
          <span class="webapp-file-printing-progress hide"
1288
            >Preparing PDF version...</span
1289
          >
1290
          <a class="webapp-file-printing-link hide" target="_blank"
1291
            >link to PDF version</a
1292
          >
1293
        </div>
1294
      </div>
1295
    </div>
1296
  </div>
1297
  <div
1298
    class="modal webapp-goto-line-dialog"
1299
    data-backdrop="static"
1300
    tabindex="-1"
1301
    role="dialog"
1302
    aria-hidden="true"
1303
  >
1304
    <div class="modal-dialog">
1305
      <div class="modal-content">
1306
        <div class="modal-header">
1307
          <button type="button" class="close btn-close" aria-hidden="true">
1308
            <span style="font-size: 20pt">×</span>
1309
          </button>
1310
          <h3><i class="fa fa-bolt"> </i> Goto Line</h3>
1311
        </div>
1312
        <div class="well" style="margin: 1em">
1313
          <div class="lighten">
1314
            Enter <span class="webapp-goto-line-range"></span>
1315
          </div>
1316
          <input
1317
            class="webapp-goto-line-input form-control"
1318
            style="width: 95%; margin-top: 1ex"
1319
            type="text"
1320
            placeholder=""
1321
          />
1322
        </div>
1323
        <div class="modal-footer">
1324
          <button class="btn btn-close btn-default">Cancel</button>
1325
          <button class="btn btn-primary btn-submit">OK</button>
1326
        </div>
1327
      </div>
1328
    </div>
1329
  </div>
1330

1331
  <div class="webapp-editor-textedit-buttonbar">
1332
    <span class="btn-group">
1333
      <a
1334
        href="#bold"
1335
        class="btn btn-default"
1336
        data-toggle="tooltip"
1337
        data-placement="bottom"
1338
        title="Bold"
1339
        ><i class="fa fa-bold"></i
1340
      ></a>
1341
      <a
1342
        href="#italic"
1343
        class="btn btn-default"
1344
        data-toggle="tooltip"
1345
        data-placement="bottom"
1346
        title="Italic"
1347
        ><i class="fa fa-italic"></i
1348
      ></a>
1349
      <a
1350
        href="#underline"
1351
        class="btn btn-default"
1352
        data-toggle="tooltip"
1353
        data-placement="bottom"
1354
        title="Underline"
1355
        ><i class="fa fa-underline"></i
1356
      ></a>
1357
      <a
1358
        href="#strikethrough"
1359
        class="btn btn-default"
1360
        data-toggle="tooltip"
1361
        data-placement="bottom"
1362
        title="Strike through"
1363
        ><i class="fa fa-strikethrough"></i
1364
      ></a>
1365
      <a
1366
        href="#subscript"
1367
        class="btn btn-default"
1368
        data-toggle="tooltip"
1369
        data-placement="bottom"
1370
        title="Subscript (use LaTeX for serious equations)"
1371
        ><i class="fa fa-subscript"></i
1372
      ></a>
1373
      <a
1374
        href="#superscript"
1375
        class="btn btn-default"
1376
        data-toggle="tooltip"
1377
        data-placement="bottom"
1378
        title="Superscript"
1379
        ><i class="fa fa-superscript"></i
1380
      ></a>
1381
      <a
1382
        href="#comment"
1383
        class="btn btn-default"
1384
        data-toggle="tooltip"
1385
        data-placement="bottom"
1386
        title="Comment out selection"
1387
        ><i class="fa fa-comment-o"></i
1388
      ></a>
1389
    </span>
1390
    <span class="btn-group">
1391
      <a
1392
        href="#equation"
1393
        class="btn btn-default"
1394
        data-toggle="tooltip"
1395
        data-placement="bottom"
1396
        title="Inline equation..."
1397
      >
1398
        $
1399
      </a>
1400
      <a
1401
        href="#display_equation"
1402
        class="btn btn-default"
1403
        data-toggle="tooltip"
1404
        data-placement="bottom"
1405
        title="Displayed equation..."
1406
      >
1407
        $$
1408
      </a>
1409
      <a
1410
        href="#insertunorderedlist"
1411
        class="btn btn-default"
1412
        data-toggle="tooltip"
1413
        data-placement="bottom"
1414
        title="Insert unordered list"
1415
        ><i class="fa fa-list"></i
1416
      ></a>
1417
      <a
1418
        href="#insertorderedlist"
1419
        class="btn btn-default"
1420
        data-toggle="tooltip"
1421
        data-placement="bottom"
1422
        title="Insert ordered list"
1423
        ><i class="fa fa-list-ol"></i
1424
      ></a>
1425
      <a
1426
        href="#link"
1427
        data-args="special"
1428
        class="btn btn-default"
1429
        data-toggle="tooltip"
1430
        data-placement="bottom"
1431
        title="Insert link..."
1432
        ><i class="fa fa-link"></i
1433
      ></a>
1434
      <a
1435
        href="#image"
1436
        data-args="special"
1437
        class="btn btn-default"
1438
        data-toggle="tooltip"
1439
        data-placement="bottom"
1440
        title="Insert image..."
1441
        ><i class="fa fa-image"></i
1442
      ></a>
1443
      <a
1444
        href="#table"
1445
        data-args="special"
1446
        class="btn btn-default"
1447
        data-toggle="tooltip"
1448
        data-placement="bottom"
1449
        title="Insert table"
1450
        ><i class="fa fa-table"></i
1451
      ></a>
1452
      <a
1453
        href="#horizontalRule"
1454
        data-args="special"
1455
        class="btn btn-default"
1456
        data-toggle="tooltip"
1457
        data-placement="bottom"
1458
        title="Insert horizontal line"
1459
        >&mdash;</a
1460
      >
1461
      <a
1462
        href="#SpecialChar"
1463
        data-args="special"
1464
        class="btn btn-default"
1465
        data-toggle="tooltip"
1466
        data-placement="bottom"
1467
        title="Insert Special Character ..."
1468
        >&Omega;</a
1469
      >
1470
    </span>
1471
    <span class="btn-group">
1472
      <a
1473
        href="#justifyleft"
1474
        class="btn btn-default"
1475
        data-toggle="tooltip"
1476
        data-placement="bottom"
1477
        title="Left justify"
1478
        ><i class="fa fa-align-left"></i
1479
      ></a>
1480
      <a
1481
        href="#justifycenter"
1482
        class="btn btn-default"
1483
        data-toggle="tooltip"
1484
        data-placement="bottom"
1485
        title="Justify center"
1486
        ><i class="fa fa-align-center"></i
1487
      ></a>
1488
      <a
1489
        href="#justifyright"
1490
        class="btn btn-default"
1491
        data-toggle="tooltip"
1492
        data-placement="bottom"
1493
        title="Right justify"
1494
        ><i class="fa fa-align-right"></i
1495
      ></a>
1496
      <a
1497
        href="#justifyfull"
1498
        class="btn btn-default"
1499
        data-toggle="tooltip"
1500
        data-placement="bottom"
1501
        title="Justify full"
1502
        ><i class="fa fa-align-justify"></i
1503
      ></a>
1504
      <a
1505
        href="#indent"
1506
        class="btn btn-default"
1507
        data-toggle="tooltip"
1508
        data-placement="bottom"
1509
        title="Indent/quote selected text"
1510
        ><i class="fa fa-indent"></i
1511
      ></a>
1512
      <a
1513
        href="#unformat"
1514
        class="btn btn-default"
1515
        data-toggle="tooltip"
1516
        data-placement="bottom"
1517
        title="Remove formatting"
1518
        ><i class="fa fa-remove"></i
1519
      ></a>
1520
      <a
1521
        href="#clean"
1522
        class="btn btn-default"
1523
        data-toggle="tooltip"
1524
        data-placement="bottom"
1525
        title="Make selected HTML valid"
1526
        ><i class="fa fa-code"></i
1527
      ></a>
1528
    </span>
1529
    <span class="btn-group">
1530
      <span
1531
        class="btn-group sagews-output-editor-font-face smc-tooltip"
1532
        data-toggle="tooltip"
1533
        data-placement="bottom"
1534
        title="Fonts"
1535
      >
1536
        <span
1537
          class="btn btn-default dropdown-toggle"
1538
          data-toggle="dropdown"
1539
          title="Font"
1540
        >
1541
          <i class="fa fa-font"></i> <b class="caret"></b>
1542
        </span>
1543
        <ul class="dropdown-menu"></ul>
1544
      </span>
1545
      <span
1546
        class="btn-group sagews-output-editor-font-size smc-tooltip"
1547
        data-toggle="tooltip"
1548
        data-placement="bottom"
1549
        title="Font size"
1550
      >
1551
        <span
1552
          class="btn btn-default dropdown-toggle"
1553
          data-toggle="dropdown"
1554
          title="Text height"
1555
        >
1556
          <i class="fa fa-text-height"></i> <b class="caret"></b>
1557
        </span>
1558
        <ul class="dropdown-menu"></ul>
1559
      </span>
1560
      <span
1561
        class="btn-group sagews-output-editor-block-type smc-tooltip"
1562
        data-toggle="tooltip"
1563
        data-placement="bottom"
1564
        title="Format type"
1565
      >
1566
        <span
1567
          class="btn btn-default dropdown-toggle"
1568
          data-toggle="dropdown"
1569
          title="Header"
1570
        >
1571
          <i class="fa fa-header"></i> <b class="caret"></b>
1572
        </span>
1573
        <ul class="dropdown-menu"></ul>
1574
      </span>
1575
    </span>
1576
    <!-- color menus disabled/broken: see https://github.com/sagemathinc/cocalc/issues/1167 for re-implementing them -->
1577
    <span class="btn-group">
1578
      <span
1579
        class="hide sagews-output-editor-foreground-color-selector input-group color smc-tooltip"
1580
        data-color-format="rgb"
1581
        data-toggle="tooltip"
1582
        data-placement="bottom"
1583
        title="Text color"
1584
      >
1585
        <input type="text" style="cursor: pointer" class="form-control" />
1586
        <span class="input-group-addon" style="padding: 3px"
1587
          ><i class="fa fa-font" style="height: 16px; width: 16px"></i
1588
          ><b class="caret"></b
1589
        ></span>
1590
      </span>
1591
    </span>
1592
    <span class="btn-group">
1593
      <span
1594
        class="hide sagews-output-editor-background-color-selector input-group color smc-tooltip"
1595
        data-color-format="rgb"
1596
        data-toggle="tooltip"
1597
        data-placement="bottom"
1598
        title="Text background highlight color"
1599
      >
1600
        <input type="text" style="cursor: pointer" class="form-control" />
1601
        <span class="input-group-addon" style="padding: 3px"
1602
          ><i class="fa fa-font" style="height: 16px; width: 16px"></i
1603
          ><b class="caret"></b
1604
        ></span>
1605
      </span>
1606
    </span>
1607
  </div>
1608

1609
  <div class="webapp-editor-codeedit-buttonbar hide" style="margin: 2px">
1610
    <!-- buttonbar.coffee populates all entries -->
1611
  </div>
1612

1613
  <div class="webapp-editor-redit-buttonbar hide" style="margin: 2px">
1614
    <!-- buttonbar.coffee populates the entries -->
1615
  </div>
1616
  <div class="webapp-editor-julia-edit-buttonbar hide" style="margin: 2px">
1617
    <!-- buttonbar.coffee populates the entries -->
1618
  </div>
1619
  <div class="webapp-editor-sh-edit-buttonbar hide" style="margin: 2px">
1620
    <!-- buttonbar.coffee populates the entries -->
1621
  </div>
1622
  <div class="webapp-editor-fricas-edit-buttonbar hide" style="margin: 2px">
1623
    <!-- buttonbar.coffee populates the entries -->
1624
  </div>
1625
  <div class="webapp-editor-fallback-edit-buttonbar hide" style="margin: 2px">
1626
    <a class="btn btn-default" href="#todo">&hellip;</a>
1627
  </div>
1628

1629
  <div class="sagews-output-raw_input">
1630
    <div class="form-inline">
1631
      <div class="form-group">
1632
        <label
1633
          class="sagews-output-raw_input-prompt"
1634
          style="margin-right: 10px"
1635
        >
1636
        </label>
1637
        <div class="input-group">
1638
          <input class="sagews-output-raw_input-value form-control" />
1639
          <span class="input-group-btn">
1640
            <button
1641
              class="btn btn-success sagews-output-raw_input-submit"
1642
              type="button"
1643
            >
1644
              <i class="fa fa-check"></i>
1645
            </button>
1646
          </span>
1647
        </div>
1648
      </div>
1649
    </div>
1650
  </div>
1651
</div>
1652

1653
`;
1654

1655
const sagews_interact = `
1656
<div class="webapp-interact-templates hide">
1657

1658
    <!-- Interact -->
1659
    <div class="webapp-interact-container container-fluid">
1660
    </div>
1661

1662
    <!-- Interact: input-box -->
1663
    <div class="webapp-interact-control-input-box">
1664
        <div class="row">
1665
            <div class="col-sm-4">
1666
                <span class="webapp-interact-label pull-right"></span>
1667
            </div>
1668
            <div class="col-sm-8">
1669
                <input type="text" class="hide webapp-interact-input-box-font form-control">
1670
                <textarea class="hide webapp-interact-input-box-font" spellcheck="false"></textarea>
1671
                <span class="webapp-interact-control-input-box-submit-button hide">
1672
                    <a class="btn btn-default">Submit</a>
1673
                    <br><br>
1674
                </span>
1675
            </div>
1676
        </div>
1677
    </div>
1678

1679

1680
    <!-- Interact: checkbox -->
1681
    <div class="webapp-interact-control-checkbox">
1682
        <div class="row">
1683
            <div class="col-sm-4">
1684
                <span class="webapp-interact-label pull-right" style="  padding-top: 2px;"></span>
1685
            </div>
1686
            <div class="col-sm-8">
1687
                <input type="checkbox">
1688
            </div>
1689
        </div>
1690
    </div>
1691

1692
    <!-- Interact: selector -->
1693
    <div class="webapp-interact-control-selector">
1694
        <div class="row">
1695
            <div class="col-sm-4">
1696
                <span class="webapp-interact-label pull-right"></span>
1697
            </div>
1698
            <div class="col-sm-8">
1699
                <div class="webapp-interact-control-content"></div>
1700
            </div>
1701
        </div>
1702
    </div>
1703

1704
    <!-- Interact: button -->
1705
    <div class="webapp-interact-control-button">
1706
        <div class="row">
1707
            <div class="col-sm-4">
1708
                <span class="webapp-interact-label pull-right"></span>
1709
            </div>
1710
            <div class="col-sm-8">
1711
                <a class="btn btn-default"><i class="fa">&nbsp;&nbsp;</i> <span></span></a>
1712
            </div>
1713
        </div>
1714
    </div>
1715

1716
    <!-- Interact: text -->
1717
    <div class="webapp-interact-control-text">
1718
        <div class="row">
1719
            <div class="col-sm-4">
1720
                <span class="webapp-interact-label pull-right"></span>
1721
            </div>
1722
            <div class="col-sm-8">
1723
                <span class="webapp-interact-control-content"></span>
1724
            </div>
1725
        </div>
1726
    </div>
1727

1728
    <!-- Interact: color-selector -->
1729
    <div class="webapp-interact-control-color-selector">
1730
        <div class="row">
1731
            <div class="col-sm-4">
1732
                <span class="webapp-interact-label pull-right"></span>
1733
            </div>
1734
            <div class="col-sm-8">
1735
                <div class="input-group color" data-color-format="rgb">
1736
                    <input type="text" value="" style="font-family:monospace" class="form-control">
1737
                    <span class="input-group-addon"><i class="fa" style="height: 16px; width: 16px"></i></span>
1738
                </div>
1739
            </div>
1740
        </div>
1741
    </div>
1742

1743
    <!-- Interact: slider -->
1744
    <div class="webapp-interact-control-slider">
1745
        <div class=" webapp-interact-control-content">
1746
            <div class="row">
1747
                <div class="col-sm-4">
1748
                    <div class="webapp-interact-label pull-right"></div>
1749
                </div>
1750
                <div class="pull-left col-sm-6">
1751
                    <div class="webapp-interact-control-slider"></div>
1752
                </div>
1753
                <div class="col-sm-2">
1754
                    <div class="webapp-interact-control-value"></div>
1755
                </div>
1756
            </div>
1757
        </div>
1758
    </div>
1759

1760

1761
    <!-- Interact: range-slider -->
1762
    <div class="webapp-interact-control-range-slider">
1763
        <div class="webapp-interact-control-content">
1764
            <div class="row">
1765
                <div class="col-sm-4">
1766
                    <div class="webapp-interact-label pull-right"></div>
1767
                </div>
1768
                <div class="pull-left col-sm-6">
1769
                    <div class="webapp-interact-control-slider"></div>
1770
                </div>
1771
                <div class="col-sm-2">
1772
                    <div class="webapp-interact-control-value"></div>
1773
                </div>
1774
            </div>
1775
        </div>
1776
    </div>
1777

1778
    <!-- Interact: input_grid -->
1779
    <div class="webapp-interact-control-input-grid">
1780
        <div class="row">
1781
            <div class="col-sm-4">
1782
                <span class="webapp-interact-label pull-right"></span>
1783
            </div>
1784
            <div class="col-sm-8">
1785
                <span class="webapp-interact-control-grid well"></span>
1786
                <a class="btn btn-success btn-sm"><i class="fa fa-check"> </i><span></span></a>
1787
            </div>
1788
        </div>
1789
    </div>
1790

1791
</div>
1792
`;
1793

1794
const sagews_3d = `
1795
<div class="webapp-3d-templates hide">
1796
    <span class="webapp-3d-loading">
1797
        <i class="fa fa-cube fa-spin" style="font-size:16pt"></i>
1798
        Loading 3D scene...
1799
    </span>
1800
    <span class="webapp-3d-viewer">
1801
        <span class="webapp-3d-note hide">
1802
            Evaluate to see 3d plot.
1803
        </span>
1804
        <span class="webapp-3d-canvas">
1805
        </span>
1806
        <span class="webapp-3d-canvas-warning lighten hide" style="margin-top: -1em"   data-toggle="tooltip" data-placement="top" title="WARNING: using slow non-WebGL canvas renderer">canvas</span>
1807
    </span>
1808
</div>
1809
`;
1810

1811
const sagews_d3 = `
1812
<div class="webapp-d3-templates hide">
1813
    <span class="webapp-d3-graph-viewer">
1814
    </span>
1815
</div>
1816
`;
1817

1818
export const TEMPLATES_HTML =
1819
  console + editor + sagews_interact + sagews_3d + sagews_d3;
1820

1821
Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

Product

Resources

Company

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more, all in one place.

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.
