-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo.html
207 lines (162 loc) · 10.5 KB
/
demo.html
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Indent Editor demo</title>
<script src="dist/dist.js"></script>
<script src="dist/sn-codemirror-search/search.js"></script>
<script src="dist/sn-codemirror-search/searchcursor.js"></script>
<script src="dist/sn-codemirror-search/dialog/dialog.js"></script>
<link rel="stylesheet" media="all" href="dist/dist.css">
<link rel="stylesheet" media="all" href="dist/sn-codemirror-search/dialog/dialog.css">
</head>
<body style="padding: 10px; box-sizing: border-box; max-width: 1200px">
<div id="wrapper" style="border: 2px solid black">
<textarea id="code" name="code" style="height: 100%">
# Indent editor
This is a demo of the Indent Editor for Standard Notes.
You can type around and get a feel for it.
A simple text editor that makes it easy to write and read nested notes.
# Vertical spacing
Empty lines are small, giving you more control over spacing.
There is a bit more space between lines compared to a basic plaintext editor.
It's minor, but helps with readability along with other features.
# Indentation
Press Tab to indent the current line by 2 spaces.
Press Shift + Tab to de-indent the current line by 2 spaces.
You can also just put spaces as you normally would.
These lines are indented (There are some spaces before the text)
Pressing Enter copies the indentation for the new line. (Try it!)
Lines wrap are indentation aware. You may notice that the wrapped part (after the line break) is shown with the same indentation as the first part. This is a long line to show that the text will end up wrapping when it reaches the end of the screen.
For indentation, in addition to spaces, you can also use:
* stars
- dashes
> greather than signs
+ plus signs
->*+ As long as they are before any other text, they are all considered part of indentation. So wrapped lines, like this one are indented until after them. This is great for making lists. The font for these special indentation characters is fixed-width, so things always line up.
* When you press enter, the * - > + that are part of the indentation are also copied.
# Numbered list
1. When lines start a number, a dot and a space will have the number and dot count as indentation
2. There can also be spaces before the number.
3. If you press enter on a line in a numbered list, the new line will copy the indentation and the number will be automatically incremented.
4. Try it, press enter here. The next line will be 5.
5. Other lines will not be automatically numbered, I feel this avoids it possibly doing too much. What if I really wanted to have two 5. ?
# Headers
Lines that start with a number sign (#) are headers, bolder and bigger.
They come in 3 sizes, by using up to 3 number signs
* # The big one! A single number sign.
* ## Headers can be indented, including after the usual *->+ characters!
* ### This one is just bold, not bigger. Thats with 3 number signs.
# Web addresses
If something looks like a web address, then it is automatically highlighted.
If it starts with http:// or https://
http://www.wikipedia.org/
https://www.google.com/search?q=more+complex+address
When there are no https://, it tries to find addresses that have the common .com, .org, .io, etc
github.com/MaxLap/standard-notes-indent-editor
standardnotes.org
Lastly, you can ctrl+click on those links to open those pages in a new tab. Try it!
# Paragraphs
(This part about paragraph usually doesn't happen on mobile, because your screen is not large enough. Try it on a desktop / laptop!)
You may have already noticed that lines that wrap don't go as far right as they could. The lines instead stop after around 50 characters. This avoids paragraph that are super large or long line followed by very few words, both harder to read. This usually has no effect on mobile because screen aren't as large. Also for that readability goal, lines that wrap have a little bit less space between the lines.
You can see the little extra spacing between this line and the above paragraph.
Note that lines that are not wrapping can end up longer than paragraphs. Depending on your screen, this line might be longer than the paragraph.
-> This is useful if you mostly do lists with sometimes long lines.
-> This avoids having a 2nd line with a single word; it will wrap a chunk of the line. Try adding words here until it warps!
-> This can be changed in the setting
**********-> Note that paragraphs' will be moved as a whole by indentation. The paragraph itself will have the same size as other ones. So this paragraph's right side is further to the right than the one that is a few lines above. You can try adding/removing some of the stars at the begining of this to see the whole paragraph moving with the indentation.
# Code
You can use `backticks` to have a piece of code in a line.
The text will be highlighted a little using a different font (which is fixed-width).
Additionally, other styling (such as headers) will not activate within a code or code block.
You can use ``` triple backticks for code blocks. Put them at the end of a line (or as the only thing on the line) and code formatting will be applied until another line ends with triple backticks.
So here is some code: ```
function hello() {
console.log("Hello world");
# Number signs don't make headers / big text in code blocks
# Also of note: Empty lines have a normal height
}
```
* The background will start at the same indentation as the line with triple backticks: ```
function hello() {
console.log("Hello world");
}
```
Or of the first line of code, whichever one is less indented:
```
function hello() {
console.log("Hello world");
}
```
There is no syntax highlighting for code blocks, but you can specify a language name name after the triple backticks:
```javascript
console.log('no syntax highlighting, but compatible with markdown');
```
# Keyboard shortcuts
Here are a couple of pretty useful shortcuts available in this editor. Try them out!
* `Ctrl+D`: Duplicate the current selection, or the whole line if nothing is selected.
* `Ctrl+Shift+Up`: Move current line (or selected lines) up by one line
* `Ctrl+Shift+Down`: Move current line (or selected lines) down by one line
* Many others, this editor is based on CodeMirror, which has its own set of shortcuts for things.
# Final notes
All of this happens without modifying the text; you can always go back to a plain text file if you need to.
This is still a work in progress:
* Other simple features will be added to help with readability and usability.
* Some things are not final and may be improved.
* Things I'm not totally happy with right now:
* The spacing between lines. In some cases, I feel the lines should be closer together.
* The overall look of code blocks, especially for empty lines.
# Install it!
Now that you tried the editor, you can follow these instructions to install it in your Standard Notes:
https://github.com/MaxLap/standard-notes-indent-editor#how-to-install (ctrl+click it)
# Support it?
If you like it, please consider sponsoring the project on https://github.com/MaxLap/standard-notes-indent-editor.
</textarea>
<button id="config-panel-toggle" style="position: absolute; right: 15px; top: 1px; z-index: 10" onclick="displayConfigPanel()">
cfg
</button>
<div id="config-panel" style="display: none; position: absolute; top: 0px; bottom: 0px;">
Use monospace font for this note <br/>
<label><input type="radio" name="monospace" value="yes" onclick="changeMonospaceConfig('yes')"/> yes </label>
<label><input type="radio" name="monospace" value="no" onclick="changeMonospaceConfig('no')"/> no </label>
<label><input type="radio" name="monospace" value="default" onclick="changeMonospaceConfig('default')"/> default </label>
<br/><br/>
<div style="display: none">
Use monospace font default (for notes you didn't select a specific choice) <br/>
<label><input type="radio" name="monospace_default" value="yes" onclick="changeMonospaceDefaultConfig('yes')"/> yes </label>
<label><input type="radio" name="monospace_default" value="no" onclick="changeMonospaceDefaultConfig('no')"/> no </label>
<br/><br/>
</div>
Allow non-wrapping lines to be longer for this note <br/>
<label><input type="radio" name="allow_longer_lines" value="yes" onclick="changeAllowLongerLinesConfig('yes')"/> yes </label>
<label><input type="radio" name="allow_longer_lines" value="no" onclick="changeAllowLongerLinesConfig('no')"/> no </label>
<label><input type="radio" name="allow_longer_lines" value="default" onclick="changeAllowLongerLinesConfig('default')"/> default </label>
<br/><br/>
<div style="display: none">
Allow non-wrapping lines to be longer default (for notes you didn't select a specific choice) <br/>
<label><input type="radio" name="allow_longer_lines_default" value="yes" onclick="changeAllowLongerLinesDefaultConfig('yes')"/> yes </label>
<label><input type="radio" name="allow_longer_lines_default" value="no" onclick="changeAllowLongerLinesDefaultConfig('no')"/> no </label>
<br/><br/>
</div>
Color headers (<span class="colored-like-header">would be this color</span>) <br/>
<label><input type="radio" name="color_headers" value="yes" onclick="changeColorHeadersConfig('yes')"/> yes </label>
<label><input type="radio" name="color_headers" value="no" onclick="changeColorHeadersConfig('no')"/> no </label>
<label><input type="radio" name="color_headers" value="default" onclick="changeColorHeadersConfig('default')"/> default </label>
<br/><br/>
<div style="display: none">
Color headers default (for notes you didn't select a specific choice) <br/>
<label><input type="radio" name="color_headers_default" value="yes" onclick="changeColorHeadersDefaultConfig('yes')"/> yes </label>
<label><input type="radio" name="color_headers_default" value="no" onclick="changeColorHeadersDefaultConfig('no')"/> no </label>
<br/><br/>
</div>
Indent Editor is free, please consider supporting me! <a href="https://github.com/MaxLap/standard-notes-indent-editor">(Click sponsor)</a>
<br/><br/>
<button onclick="hideConfigPanel()">
Close
</button>
</div>
<div>
</body>
</html>