├── VERSION
├── .gitignore
├── src
    └── index.js
├── public
    ├── css
    │   ├── website.css
    │   └── editor.css
    ├── demo.html
    └── js
    │   └── ProseArea-dev.js
├── rollup.config.js
├── package.json
├── CHANGELOG.md
├── LICENSE
└── README.md


/VERSION:
--------------------------------------------------------------------------------
1 | 0.3.5
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 | /node_modules
3 | /package-lock.json
4 | /yarn.lock
5 | /public/ProseArea.js
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export {EditorView} from "prosemirror-view"
2 | export {EditorState} from "prosemirror-state"
3 | export {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"
4 | export {exampleSetup} from "prosemirror-example-setup"
5 | 


--------------------------------------------------------------------------------
/public/css/website.css:
--------------------------------------------------------------------------------
1 | body { font-family: sans-serif; font-size: 12px; }
2 | 
3 | #editor {}
4 | 
5 | #area-editor { margin: 16px; }
6 | 
7 | #area-testing { border: 1px solid black; width: 600px; text-align: center; }
8 | #area-testing textarea { width: 560px; margin: 8px; }
9 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import builtins from 'rollup-plugin-node-builtins';
 3 | import json from '@rollup/plugin-json';
 4 | import resolve from 'rollup-plugin-node-resolve';
 5 | import commonJS from 'rollup-plugin-commonjs'
 6 | 
 7 | 
 8 | export default {
 9 |   input: './src/index.js',
10 |   output: {
11 |     format: 'iife',
12 |     file: 'public/js/ProseArea.js',
13 |     name: 'ProseArea'
14 |   },
15 |   plugins: [
16 |       builtins(),
17 |       babel(),
18 |       json(),
19 |       resolve(),
20 |       commonJS({
21 |         include: 'node_modules/**'
22 |       })
23 |     ],
24 | };
25 | 
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "prosearea",
 3 |   "dependencies": {
 4 |     "@rollup/plugin-json": "^4.0.0",
 5 |     "prosemirror-example-setup": "^1.0.1",
 6 |     "prosemirror-markdown": "^1.4.2",
 7 |     "prosemirror-model": "^1.6.4",
 8 |     "prosemirror-schema-basic": "^1.0.0",
 9 |     "prosemirror-state": "^1.2.2",
10 |     "prosemirror-view": "^1.6.8",
11 |     "punycode": "^2.1.1",
12 |     "rollup-plugin-node-builtins": "^2.1.2"
13 |   },
14 |   "devDependencies": {
15 |     "@babel/core": "^7.2.2",
16 |     "@babel/preset-env": "^7.2.3",
17 |     "babel-loader": "^8.0.5",
18 |     "rollup": "^1.1.0",
19 |     "rollup-plugin-babel": "^4.3.1",
20 |     "rollup-plugin-commonjs": "^9.2.0",
21 |     "rollup-plugin-node-resolve": "^4.0.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | 0.1:
 2 |     * Initial working version.
 3 | 
 4 | 0.2:
 5 |     * Files moved around and renamed.
 6 |     * CHANGELOG.md added.
 7 | 
 8 | 0.3:
 9 |     * WYSIWYG/markdown buttons optionally hidden.
10 |     * Support for disabling WYSIWYG/markdown editor via disabled-attribute.
11 |     * Event "changed" emitted when content changes.
12 |     * Event "save" periodically emitted if necessary, with 1-second hard-coded interval.
13 |     * View object accessible through target textarea node.
14 | 
15 | 0.3.1:
16 |     * LICENSE updated (MIT).
17 |     * README updated.
18 | 
19 | 0.3.2:
20 |     * README updated some more.
21 | 
22 | 0.3.3:
23 |     * Fixed bug resulting in newlines being omitted from POST content.
24 | 
25 | 0.3.4:
26 |     * Transparent support for focus-function on textarea -> WYSIWYG.
27 | 
28 | 0.3.5:
29 |     * CSS class "prosearea-instance" added automatically to ProseArea's container for custom styling.
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Helgi Hrafn Gunnarsson <helgi@binary.is>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/public/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html> <meta charset="utf8" />
 2 | <html>
 3 | <head>
 4 |     <link rel="stylesheet" href="css/editor.css" />
 5 |     <link rel="stylesheet" href="css/website.css" />
 6 | </head>
 7 | <body>
 8 | 
 9 | <!--
10 | Form has method="get" because we need to be able to show if the form's input
11 | values are shown in the URL, or even via JavaScript, which cannot access POST
12 | variable.
13 | -->
14 | <form method="get">
15 | <div id="area-editor">
16 |     <div>
17 |         <h2>Editor 1</h2>
18 |         <p><textarea class="editor" name="editor_1" id="editor-1">* List item with *italic* and **bold** markdown text.</textarea></p>
19 |     </div>
20 |     <div>
21 |         <h2>Editor 2</h2>
22 |         <p><textarea class="editor" name="editor_2" id="editor-2">Some **other** text.</textarea></p>
23 |     </div>
24 | </div>
25 | 
26 | <div id="area-testing">
27 |     <h2>Testing area (editor 1)</h2>
28 |     <p><textarea type="text" id="test_input"></textarea></p>
29 |     <p>
30 |         <button type="button" onclick="make_editor(); this.disabled = 'disabled';">Make editor</button>
31 |         <button type="button" onclick="get_textarea();">Get</button>
32 |         <button type="button" onclick="set_textarea();">Set</button>
33 |         |
34 |         <button type="submit">Submit</button>
35 |     </p>
36 | 
37 | </div>
38 | </form>
39 | 
40 | <script src="js/ProseArea.js"></script>
41 | <script src="js/ProseArea-dev.js"></script>
42 | 
43 | <script language="javascript" type="text/javascript">
44 | 
45 | // This <script> section belongs only to the page and will not be included in
46 | // the final package (except possibly as an example).
47 | 
48 | function get_textarea() {
49 |     let editor = document.querySelector('#editor-1');
50 |     let test_input = document.querySelector('#test_input');
51 |     test_input.value = editor.value;
52 | }
53 | 
54 | function set_textarea() {
55 |     let editor = document.querySelector('#editor-1');
56 |     let test_input = document.querySelector('#test_input');
57 |     editor.value = test_input.value;
58 | }
59 | 
60 | function make_editor() {
61 |     let translations = {
62 |         'markdown': 'Markdán',
63 |         'wysiwyg': 'ÞSÞSEÞSÞF'
64 |     }
65 |     markdownify(document.querySelectorAll('.editor'), 'wysiwyg', translations);
66 | }
67 | 
68 | </script>
69 | 
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ProseArea
 2 | 
 3 | ## About
 4 | 
 5 | ProseArea is a drop-in replacement for HTML textareas, providing [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editing of [markdown](https://en.wikipedia.org/wiki/Markdown), based on the [ProseMirror](https://prosemirror.net/) web library.
 6 | 
 7 | ## Design goals
 8 | 
 9 | * WYSIWYG markdown editing.
10 | * Plaintext markdown editing.
11 | * Drop-in replacement for HTML textareas.
12 | * UI-framework agnosticism.
13 | * Simplicity of use.
14 | 
15 | ## Installation
16 | 
17 | If you only want to start using ProseArea to turn textareas on your webpage to fully-functional WYSIWYG editors spouting out beautiful markdown, then everything you need is in `public/js`.
18 | 
19 | To see how to use it, take a look at `public/demo.html` for an example of how to convert HTML textareas into WYSIWYG/markdown editors.
20 | 
21 | Once a textarea has been turned into a WYSIWYG editor, you can read and write its content through the regular `value` property of the textarea, as shown in the example (`public/demo.html`). On GET and POST submissions, the editor's content will be delivered in markdown format with the textarea's name as a variable.
22 | 
23 | One of ProseArea's most important design goals is ease-of-use without in-depth knowledge of ProseMirror. If you have any kind of trouble using ProseArea, please let the authors know, since that indicates a need to make it even simpler.
24 | 
25 | ### Notes on usage
26 | 
27 | When ProseArea is applied to a `<textarea/>` (as per `public/demo.html`), it gains the CSS class `prosearea-instance`, which you can use to apply your own styles to it.
28 | 
29 | In particular, if you are applying it to already existing web designs, you might want to play around with CSS styles `display`, `float`, and dimension styles such as `max-width`. This is because ProseArea turns `<textarea/>` nodes into `<div/>` nodes, which behave differently with regard to available space and such.
30 | 
31 | ## Building
32 | 
33 | ProseArea is developed using Node.js, which you are expected to be at least mildly familiar with.
34 | 
35 | You need `yarn` (or at least `npm`) and `rollup` installed to **build** ProseArea.
36 | 
37 | Note that building is not necessary if you just want to start using it. You only need to do this if you want to play around with the code or partake in ProseArea's development.
38 | 
39 |     yarn install # Same as `npm install` except better.
40 |     rollup -c
41 | 
42 | ## License
43 | 
44 | Distributed under the MIT license as detailed in the file `LICENSE`.
45 | 
46 | ## Authors
47 | 
48 | * Helgi Hrafn Gunnarsson <helgi@binary.is>
49 | 


--------------------------------------------------------------------------------
/public/css/editor.css:
--------------------------------------------------------------------------------
  1 | .ProseMirror {
  2 |   position: relative;
  3 | }
  4 | 
  5 | .ProseMirror {
  6 |   word-wrap: break-word;
  7 |   white-space: pre-wrap;
  8 |   -webkit-font-variant-ligatures: none;
  9 |   font-variant-ligatures: none;
 10 | }
 11 | 
 12 | .ProseMirror pre {
 13 |   white-space: pre-wrap;
 14 | }
 15 | 
 16 | .ProseMirror li {
 17 |   position: relative;
 18 | }
 19 | 
 20 | .ProseMirror-hideselection *::selection { background: transparent; }
 21 | .ProseMirror-hideselection *::-moz-selection { background: transparent; }
 22 | .ProseMirror-hideselection { caret-color: transparent; }
 23 | 
 24 | .ProseMirror-selectednode {
 25 |   outline: 2px solid #8cf;
 26 | }
 27 | 
 28 | /* Make sure li selections wrap around markers */
 29 | 
 30 | li.ProseMirror-selectednode {
 31 |   outline: none;
 32 | }
 33 | 
 34 | li.ProseMirror-selectednode:after {
 35 |   content: "";
 36 |   position: absolute;
 37 |   left: -32px;
 38 |   right: -2px; top: -2px; bottom: -2px;
 39 |   border: 2px solid #8cf;
 40 |   pointer-events: none;
 41 | }
 42 | .ProseMirror-textblock-dropdown {
 43 |   min-width: 3em;
 44 | }
 45 | 
 46 | .ProseMirror-menu {
 47 |   margin: 0 -4px;
 48 |   line-height: 1;
 49 | }
 50 | 
 51 | .ProseMirror-tooltip .ProseMirror-menu {
 52 |   width: -webkit-fit-content;
 53 |   width: fit-content;
 54 |   white-space: pre;
 55 | }
 56 | 
 57 | .ProseMirror-menuitem {
 58 |   margin-right: 3px;
 59 |   display: inline-block;
 60 | }
 61 | 
 62 | .ProseMirror-menuseparator {
 63 |   border-right: 1px solid #ddd;
 64 |   margin-right: 3px;
 65 | }
 66 | 
 67 | .ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
 68 |   font-size: 90%;
 69 |   white-space: nowrap;
 70 | }
 71 | 
 72 | .ProseMirror-menu-dropdown {
 73 |   vertical-align: 1px;
 74 |   cursor: pointer;
 75 |   position: relative;
 76 |   padding-right: 15px;
 77 | }
 78 | 
 79 | .ProseMirror-menu-dropdown-wrap {
 80 |   padding: 1px 0 1px 4px;
 81 |   display: inline-block;
 82 |   position: relative;
 83 | }
 84 | 
 85 | .ProseMirror-menu-dropdown:after {
 86 |   content: "";
 87 |   border-left: 4px solid transparent;
 88 |   border-right: 4px solid transparent;
 89 |   border-top: 4px solid currentColor;
 90 |   opacity: .6;
 91 |   position: absolute;
 92 |   right: 4px;
 93 |   top: calc(50% - 2px);
 94 | }
 95 | 
 96 | .ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
 97 |   position: absolute;
 98 |   background: white;
 99 |   color: #666;
100 |   border: 1px solid #aaa;
101 |   padding: 2px;
102 | }
103 | 
104 | .ProseMirror-menu-dropdown-menu {
105 |   z-index: 15;
106 |   min-width: 6em;
107 | }
108 | 
109 | .ProseMirror-menu-dropdown-item {
110 |   cursor: pointer;
111 |   padding: 2px 8px 2px 4px;
112 | }
113 | 
114 | .ProseMirror-menu-dropdown-item:hover {
115 |   background: #f2f2f2;
116 | }
117 | 
118 | .ProseMirror-menu-submenu-wrap {
119 |   position: relative;
120 |   margin-right: -4px;
121 | }
122 | 
123 | .ProseMirror-menu-submenu-label:after {
124 |   content: "";
125 |   border-top: 4px solid transparent;
126 |   border-bottom: 4px solid transparent;
127 |   border-left: 4px solid currentColor;
128 |   opacity: .6;
129 |   position: absolute;
130 |   right: 4px;
131 |   top: calc(50% - 4px);
132 | }
133 | 
134 | .ProseMirror-menu-submenu {
135 |   display: none;
136 |   min-width: 4em;
137 |   left: 100%;
138 |   top: -3px;
139 | }
140 | 
141 | .ProseMirror-menu-active {
142 |   background: #eee;
143 |   border-radius: 4px;
144 | }
145 | 
146 | .ProseMirror-menu-active {
147 |   background: #eee;
148 |   border-radius: 4px;
149 | }
150 | 
151 | .ProseMirror-menu-disabled {
152 |   opacity: .3;
153 | }
154 | 
155 | .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
156 |   display: block;
157 | }
158 | 
159 | .ProseMirror-menubar {
160 |   border-top-left-radius: inherit;
161 |   border-top-right-radius: inherit;
162 |   position: relative;
163 |   min-height: 1em;
164 |   color: #666;
165 |   padding: 1px 6px;
166 |   top: 0; left: 0; right: 0;
167 |   border-bottom: 1px solid silver;
168 |   background: white;
169 |   z-index: 10;
170 |   -moz-box-sizing: border-box;
171 |   box-sizing: border-box;
172 |   overflow: visible;
173 | }
174 | 
175 | .ProseMirror-icon {
176 |   display: inline-block;
177 |   line-height: .8;
178 |   vertical-align: -2px; /* Compensate for padding */
179 |   padding: 2px 8px;
180 |   cursor: pointer;
181 | }
182 | 
183 | .ProseMirror-menu-disabled.ProseMirror-icon {
184 |   cursor: default;
185 | }
186 | 
187 | .ProseMirror-icon svg {
188 |   fill: currentColor;
189 |   height: 1em;
190 | }
191 | 
192 | .ProseMirror-icon span {
193 |   vertical-align: text-top;
194 | }
195 | .ProseMirror-gapcursor {
196 |   display: none;
197 |   pointer-events: none;
198 |   position: absolute;
199 | }
200 | 
201 | .ProseMirror-gapcursor:after {
202 |   content: "";
203 |   display: block;
204 |   position: absolute;
205 |   top: -2px;
206 |   width: 20px;
207 |   border-top: 1px solid black;
208 |   animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
209 | }
210 | 
211 | @keyframes ProseMirror-cursor-blink {
212 |   to {
213 |     visibility: hidden;
214 |   }
215 | }
216 | 
217 | .ProseMirror-focused .ProseMirror-gapcursor {
218 |   display: block;
219 | }
220 | /* Add space around the hr to make clicking it easier */
221 | 
222 | .ProseMirror-example-setup-style hr {
223 |   padding: 2px 10px;
224 |   border: none;
225 |   margin: 1em 0;
226 | }
227 | 
228 | .ProseMirror-example-setup-style hr:after {
229 |   content: "";
230 |   display: block;
231 |   height: 1px;
232 |   background-color: silver;
233 |   line-height: 2px;
234 | }
235 | 
236 | .ProseMirror ul, .ProseMirror ol {
237 |   padding-left: 30px;
238 | }
239 | 
240 | .ProseMirror blockquote {
241 |   padding-left: 1em;
242 |   border-left: 3px solid #eee;
243 |   margin-left: 0; margin-right: 0;
244 | }
245 | 
246 | .ProseMirror-example-setup-style img {
247 |   cursor: default;
248 | }
249 | 
250 | .ProseMirror-prompt {
251 |   background: white;
252 |   padding: 5px 10px 5px 15px;
253 |   border: 1px solid silver;
254 |   position: fixed;
255 |   border-radius: 3px;
256 |   z-index: 11;
257 |   box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
258 | }
259 | 
260 | .ProseMirror-prompt h5 {
261 |   margin: 0;
262 |   font-weight: normal;
263 |   font-size: 100%;
264 |   color: #444;
265 | }
266 | 
267 | .ProseMirror-prompt input[type="text"],
268 | .ProseMirror-prompt textarea {
269 |   background: #eee;
270 |   border: none;
271 |   outline: none;
272 | }
273 | 
274 | .ProseMirror-prompt input[type="text"] {
275 |   padding: 0 4px;
276 | }
277 | 
278 | .ProseMirror-prompt-close {
279 |   position: absolute;
280 |   left: 2px; top: 1px;
281 |   color: #666;
282 |   border: none; background: transparent; padding: 0;
283 | }
284 | 
285 | .ProseMirror-prompt-close:after {
286 |   content: "✕";
287 |   font-size: 12px;
288 | }
289 | 
290 | .ProseMirror-invalid {
291 |   background: #ffc;
292 |   border: 1px solid #cc7;
293 |   border-radius: 4px;
294 |   padding: 5px 10px;
295 |   position: absolute;
296 |   min-width: 10em;
297 | }
298 | 
299 | .ProseMirror-prompt-buttons {
300 |   margin-top: 5px;
301 |   display: none;
302 | }
303 | #editor, .editor {
304 |   background: white;
305 |   color: black;
306 |   background-clip: padding-box;
307 |   border-radius: 4px;
308 |   border: 2px solid rgba(0, 0, 0, 0.2);
309 |   padding: 5px 0;
310 |   margin-bottom: 23px;
311 | }
312 | 
313 | .ProseMirror p:first-child,
314 | .ProseMirror h1:first-child,
315 | .ProseMirror h2:first-child,
316 | .ProseMirror h3:first-child,
317 | .ProseMirror h4:first-child,
318 | .ProseMirror h5:first-child,
319 | .ProseMirror h6:first-child {
320 |   margin-top: 10px;
321 | }
322 | 
323 | .ProseMirror {
324 |   padding: 4px 8px 4px 14px;
325 |   line-height: 1.2;
326 |   outline: none;
327 | }
328 | 
329 | .ProseMirror p { margin-bottom: 1em }
330 | 


--------------------------------------------------------------------------------
/public/js/ProseArea-dev.js:
--------------------------------------------------------------------------------
  1 | // Everything in this file will eventually be moved to the package's index.js
  2 | // file. It is kept here temporarily for development purposes.
  3 | 
  4 | class MarkdownView {
  5 | 
  6 |     constructor(target, place, value, editable=true) {
  7 |         this.textarea = place.appendChild(document.createElement("textarea"));
  8 |         this.textarea.disabled = !editable;
  9 |         this.textarea.value = value;
 10 |     }
 11 | 
 12 |     get content() {
 13 |         return this.textarea.value;
 14 |     }
 15 | 
 16 |     set content(value) {
 17 |         this.textarea.value = value;
 18 |     }
 19 | 
 20 |     focus() {
 21 |         this.textarea.focus();
 22 |     }
 23 | 
 24 |     destroy() {
 25 |         this.textarea.remove();
 26 |     }
 27 | }
 28 | 
 29 | 
 30 | class ProseMirrorView {
 31 | 
 32 |     constructor(target, place, value, editable=true) {
 33 |         this.timer = null;
 34 |         this.is_saved = true;
 35 | 
 36 |         this.target = target;
 37 |         this.place = place;
 38 | 
 39 |         this.view = new ProseArea.EditorView(place, {
 40 |             state: this.make_editor_state(value),
 41 |             editable: function() { return editable; },
 42 |             dispatchTransaction: this.dispatchTransaction.bind(this),
 43 |         });
 44 | 
 45 |         // To provide access to the view (for example the save-function)
 46 |         // through the target textarea node.
 47 |         // Example:
 48 |         //     document.querySelector('.prosearea-editor').view.save()
 49 |         target.view = this;
 50 | 
 51 |         // Replace the target's focus-function with the one from the view.
 52 |         target.focus = this.focus;
 53 | 
 54 |         // Hide the menubar if non-editable. This is a somewhat temporary
 55 |         // solution, because we're still utilizing ProseMirror's example-setup
 56 |         // package. The proper solution is to implement our own menubar but
 57 |         // we'll go with whatever works for now.
 58 |         if (!editable) {
 59 |             this.place.querySelector('.ProseMirror-menubar').style.display = 'none';
 60 |         }
 61 |     }
 62 | 
 63 |     save() {
 64 |         // Check if saving is needed.
 65 |         if (!this.is_saved) {
 66 | 
 67 |             // Retrieve markdown.
 68 |             let markdown = this.getMarkdown();
 69 | 
 70 |             // Emit an event to notify external scripts.
 71 |             this.target.dispatchEvent(new CustomEvent('save', { detail: markdown }));
 72 | 
 73 |             // Mark current content as saved.
 74 |             this.is_saved = true;
 75 |         }
 76 |     }
 77 | 
 78 |     dispatchTransaction(transaction) {
 79 | 
 80 |         // Check if changes have actually been made. Note that this may
 81 |         // include white-space content that does not reflect in a change in
 82 |         // the produced markdown.
 83 |         if (transaction.steps.length > 0) {
 84 | 
 85 |             // Mark this content as unsaved.
 86 |             this.is_saved = false;
 87 | 
 88 |             // Dispatch an event when content changes so that external JS is
 89 |             // able to react accordingly, for example by updating a status
 90 |             // message or enabling a save-button.
 91 |             this.target.dispatchEvent(new CustomEvent('changed'));
 92 |         }
 93 | 
 94 |         // If timer is already running, we'll reset it. This means that every
 95 |         // time the user interacts with the editor and leaves it alone for the
 96 |         // given amount of time, the editor checks if the content has changed
 97 |         // and saves it, if so.
 98 |         if (this.timer != null) {
 99 |             window.clearTimeout(this.timer);
100 |         }
101 |         this.timer = setTimeout(this.save.bind(this), 1000);
102 | 
103 |         // Internal ProseMirror stuff. Update the stuff so that the user's
104 |         // requested changes take effect.
105 |         this.view.updateState(this.view.state.apply(transaction));
106 |     }
107 | 
108 |     make_editor_state(value) {
109 |         return ProseArea.EditorState.create({
110 |             doc: ProseArea.defaultMarkdownParser.parse(value),
111 |             plugins: ProseArea.exampleSetup({ 'schema': ProseArea.schema })
112 |         });
113 |     }
114 | 
115 |     // Function to simplify the getting of content in markdown format.
116 |     getMarkdown() {
117 |         return ProseArea.defaultMarkdownSerializer.serialize(this.view.state.doc);
118 |     }
119 | 
120 |     get content() {
121 |         return this.getMarkdown();
122 |     }
123 | 
124 |     set content(value) {
125 |         let new_state = this.make_editor_state(value);
126 |         this.view.updateState(new_state);
127 |     }
128 | 
129 |     focus() {
130 |         this.view.focus();
131 |     }
132 | 
133 |     destroy() {
134 |         this.view.destroy();
135 |     }
136 | }
137 | 
138 | 
139 | function markdownify(target, default_text_type='wysiwyg', translations={}, show_view_buttons=true) {
140 | 
141 |     // Seamless support for multiple targets. If we've received more than one
142 |     // object, we'll iterate through them and call this very same function
143 |     // again on each one, in which case this iteration will **not** be run,
144 |     // but the remainder of the function instead.
145 |     if (target.length != undefined) {
146 |         for (let i = 0; i < target.length; i++) {
147 |             markdownify(target[i], default_text_type, translations, show_view_buttons);
148 |         }
149 |         return;
150 |     }
151 | 
152 |     // Make sure that translations are reasonable.
153 |     if (!(translations instanceof Object)) {
154 |         translations = {};
155 |     }
156 |     if (!translations.hasOwnProperty('markdown')) {
157 |         translations['markdown'] = 'Markdown';
158 |     }
159 |     if (!translations.hasOwnProperty('wysiwyg')) {
160 |         translations['wysiwyg'] = 'WYSIWYG';
161 |     }
162 | 
163 |     // Warn the user if the target has no name, which we need to correctly set
164 |     // up Markdown/WYSIWYG ratio buttons.
165 |     let target_name = target.getAttribute('name');
166 |     if (!target_name) {
167 |         console.error('Markdown/WYSIWYG target textarea should have a name.');
168 |     }
169 | 
170 |     // Fetch and clear information we need from the target.
171 |     let start_content = target.value;
172 |     let editable = !target.disabled;
173 |     target.textContent = '';
174 | 
175 |     // Update the target's textContet from the value on form submit to make
176 |     // sure that the value is properly submitted with the form.
177 |     if (target.form) {
178 |         target.form.addEventListener('submit', function(event) {
179 |             target.textContent = target.value;
180 |         });
181 |     }
182 | 
183 |     // Create a more malleable div called "place" to host the editor, out of
184 |     // the given textarea called "target".
185 |     let place = document.createElement('div');
186 |     // Add a CSS class so that the instance's style can be customized.
187 |     place.classList.add('prosearea-instance');
188 |     target.parentNode.insertBefore(place, target);
189 |     target.style.display = 'none';
190 |     Object.defineProperty(target, 'value', {
191 |         get: function() {
192 |             if (view) {
193 |                 return view.content;
194 |             }
195 |         },
196 |         set: function(input_value) {
197 |             if (view) {
198 |                 view.content = input_value;
199 |             }
200 |         }
201 |     });
202 | 
203 |     // Create the appropriate ProseMirror view.
204 |     let View = default_text_type == 'markdown' ? MarkdownView : ProseMirrorView;
205 |     var view = new View(target, place, start_content, editable);
206 | 
207 |     if (show_view_buttons) {
208 |         ['markdown', 'wysiwyg'].forEach(text_type => {
209 |             // Create HTML elements for label and radio button.
210 |             let label = document.createElement('label');
211 |             let button = document.createElement('input');
212 | 
213 |             // Configure the radio button.
214 |             button.setAttribute('name', 'text_type_' + target_name);
215 |             button.setAttribute('type', 'radio');
216 |             button.setAttribute('value', text_type);
217 |             if (text_type == default_text_type) {
218 |                 button.setAttribute('checked', 'checked');
219 |             }
220 | 
221 |             // Add the radio button to the label.
222 |             label.append(button);
223 |             label.append(' ' + translations[text_type]);
224 | 
225 |             // Place the label (containing the button) immediately following the
226 |             // element that we wish to convert into a WYSIWYG/Markdown editor.
227 |             place.parentNode.insertBefore(label, place);
228 | 
229 |             // Make the button do stuff.
230 |             button.addEventListener("change", () => {
231 |                 // Obviously, the radio button shouldn't do anything unless it's
232 |                 // the one being selected.
233 |                 if (!button.checked) {
234 |                     return;
235 |                 }
236 | 
237 |                 // Figure out whether WYSIWYG or markdown are being selected.
238 |                 let View = button.value == "markdown" ? MarkdownView : ProseMirrorView;
239 | 
240 |                 // No need to do anything is current view already selected.
241 |                 if (view instanceof View) {
242 |                     return;
243 |                 }
244 | 
245 |                 // Re-create view according to selection with content.
246 |                 let content = view.content;
247 |                 view.destroy();
248 |                 view = new View(target, place, content, editable);
249 |                 view.focus();
250 |             });
251 |         });
252 |     }
253 | }
254 | 


--------------------------------------------------------------------------------