spina 1.1.1 → 2.0.0.alpha

data/app/assets/icons/spina/bold.svg

@@ -1 +1 @@
-<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M747 1521q74 32 140 32 376 0 376-335 0-114-41-180-27-44-61.5-74t-67.5-46.5-80.5-25-84-10.5-94.5-2q-73 0-101 10 0 53-.5 159t-.5 158q0 8-1 67.5t-.5 96.5 4.5 83.5 12 66.5zm-14-746q42 7 109 7 82 0 143-13t110-44.5 74.5-89.5 25.5-142q0-70-29-122.5t-79-82-108-43.5-124-14q-50 0-130 13 0 50 4 151t4 152q0 27-.5 80t-.5 79q0 46 1 69zm-541 889l2-94q15-4 85-16t106-27q7-12 12.5-27t8.5-33.5 5.5-32.5 3-37.5.5-34v-65.5q0-982-22-1025-4-8-22-14.5t-44.5-11-49.5-7-48.5-4.5-30.5-3l-4-83q98-2 340-11.5t373-9.5q23 0 68.5.5t67.5.5q70 0 136.5 13t128.5 42 108 71 74 104.5 28 137.5q0 52-16.5 95.5t-39 72-64.5 57.5-73 45-84 40q154 35 256.5 134t102.5 248q0 100-35 179.5t-93.5 130.5-138 85.5-163.5 48.5-176 14q-44 0-132-3t-132-3q-106 0-307 11t-231 12z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"/></svg>

data/app/assets/icons/spina/code.svg

@@ -1 +1 @@
-<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M553 1399l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23t-10 23zm591-1067l-373 1291q-4 13-15.5 19.5t-23.5 2.5l-62-17q-13-4-19.5-15.5t-2.5-24.5l373-1291q4-13 15.5-19.5t23.5-2.5l62 17q13 4 19.5 15.5t2.5 24.5zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>

data/app/assets/icons/spina/image.svg

@@ -1,10 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
-    <title>Untitled 2</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <path d="M224,0 L32,0 C14.355,0 0,14.356 0,32 L0,224 C0,241.644 14.355,256 32,256 L224,256 C241.645,256 256,241.644 256,224 L256,32 C256,14.356 241.645,0 224,0 L224,0 Z M240,224 C240,232.8 232.8,240 224,240 L32,240 C23.2,240 16,232.8 16,224 L16,32 C16,23.2 23.2,16 32,16 L224,16 C232.8,16 240,23.2 240,32 L240,224 L240,224 Z M224,147.999 L224,40 C224,35.582 220.418,32 216,32 L40,32 C35.582,32 32,35.582 32,40 L32,184 C32,188.418 35.582,192 40,192 L216,192 C220.418,192 224,188.418 224,184 L224,148.001 L224,147.999 L224,147.999 Z M216,40 L216,138.343 L186.829,109.172 C185.387,107.731 183.094,107.603 181.501,108.877 L144.297,138.64 L98.829,93.172 C97.345,91.688 94.965,91.603 93.381,92.978 L40,139.24 L40,40 L216,40 L216,40 Z M40,184 L40,149.827 L95.805,101.462 L141.171,146.828 C142.612,148.269 144.906,148.396 146.499,147.123 L183.703,117.36 L216,149.657 L216,184 L40,184 L40,184 Z M172,96 C183.028,96 192,87.028 192,76 C192,64.972 183.028,56 172,56 C160.972,56 152,64.972 152,76 C152,87.028 160.972,96 172,96 L172,96 Z M172,64 C178.628,64 184,69.372 184,76 C184,82.628 178.628,88 172,88 C165.372,88 160,82.628 160,76 C160,69.372 165.372,64 172,64 L172,64 Z" id="Shape" fill="#000000" sketch:type="MSShapeGroup"></path>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"/></svg>

data/app/assets/icons/spina/indent.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M27.31 363.3l96-96a16 16 0 0 0 0-22.62l-96-96C17.27 138.66 0 145.78 0 160v192c0 14.31 17.33 21.3 27.31 11.3zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"/></svg>

data/app/assets/icons/spina/italic.svg

@@ -1 +1 @@
-<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M384 1662l17-85q6-2 81.5-21.5t111.5-37.5q28-35 41-101 1-7 62-289t114-543.5 52-296.5v-25q-24-13-54.5-18.5t-69.5-8-58-5.5l19-103q33 2 120 6.5t149.5 7 120.5 2.5q48 0 98.5-2.5t121-7 98.5-6.5q-5 39-19 89-30 10-101.5 28.5t-108.5 33.5q-8 19-14 42.5t-9 40-7.5 45.5-6.5 42q-27 148-87.5 419.5t-77.5 355.5q-2 9-13 58t-20 90-16 83.5-6 57.5l1 18q17 4 185 31-3 44-16 99-11 0-32.5 1.5t-32.5 1.5q-29 0-87-10t-86-10q-138-2-206-2-51 0-143 9t-121 11z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"/></svg>

data/app/assets/icons/spina/link.svg

@@ -1 +1 @@
-<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>

data/app/assets/icons/spina/list-ol.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z"/></svg>

data/app/assets/icons/spina/list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg>

data/app/assets/icons/spina/outdent.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.69 363.29c10 10 27.31 2.93 27.31-11.31V160c0-14.32-17.33-21.31-27.31-11.31l-96 96a16 16 0 0 0 0 22.62zM432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 300.83v38.34A12.82 12.82 0 0 0 204.83 352h230.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288zm0-128H204.83A12.82 12.82 0 0 0 192 172.83v38.34A12.82 12.82 0 0 0 204.83 224h230.34A12.82 12.82 0 0 0 448 211.17v-38.34A12.82 12.82 0 0 0 435.17 160zM432 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"/></svg>

data/app/assets/icons/spina/preview/ics_spina-preview.html

@@ -192,10 +192,13 @@
 .icon-home:before,
 .icon-image:before,
 .icon-inbox-outline:before,
+.icon-indent:before,
 .icon-info:before,
 .icon-italic:before,
 .icon-large-check:before,
 .icon-link:before,
+.icon-list:before,
+.icon-list-ol:before,
 .icon-list-ul:before,
 .icon-lock:before,
 .icon-mail:before,
@@ -203,6 +206,7 @@
 .icon-media-library:before,
 .icon-megaphone:before,
 .icon-min:before,
+.icon-outdent:before,
 .icon-pages:before,
 .icon-pencil:before,
 .icon-pencil-outline:before,
@@ -211,12 +215,16 @@
 .icon-power-off:before,
 .icon-preview:before,
 .icon-product-outline:before,
+.icon-quote-right:before,
 .icon-random:before,
+.icon-redo:before,
 .icon-refresh:before,
 .icon-search:before,
 .icon-shop:before,
 .icon-social-outline:before,
+.icon-strikethrough:before,
 .icon-trash:before,
+.icon-undo:before,
 .icon-upload-outline:before,
 .icon-users-outline:before {
         display: inline-block;
@@ -264,10 +272,13 @@
 .icon-home:before { content: "\f11b"; }
 .icon-image:before { content: "\f11c"; }
 .icon-inbox-outline:before { content: "\f11d"; }
+.icon-indent:before { content: "\f13a"; }
 .icon-info:before { content: "\f11e"; }
 .icon-italic:before { content: "\f11f"; }
 .icon-large-check:before { content: "\f120"; }
 .icon-link:before { content: "\f121"; }
+.icon-list:before { content: "\f13b"; }
+.icon-list-ol:before { content: "\f13c"; }
 .icon-list-ul:before { content: "\f122"; }
 .icon-lock:before { content: "\f138"; }
 .icon-mail:before { content: "\f123"; }
@@ -275,6 +286,7 @@
 .icon-media-library:before { content: "\f125"; }
 .icon-megaphone:before { content: "\f126"; }
 .icon-min:before { content: "\f127"; }
+.icon-outdent:before { content: "\f141"; }
 .icon-pages:before { content: "\f128"; }
 .icon-pencil:before { content: "\f129"; }
 .icon-pencil-outline:before { content: "\f12a"; }
@@ -283,12 +295,16 @@
 .icon-power-off:before { content: "\f12d"; }
 .icon-preview:before { content: "\f12e"; }
 .icon-product-outline:before { content: "\f12f"; }
+.icon-quote-right:before { content: "\f13d"; }
 .icon-random:before { content: "\f130"; }
+.icon-redo:before { content: "\f13e"; }
 .icon-refresh:before { content: "\f131"; }
 .icon-search:before { content: "\f132"; }
 .icon-shop:before { content: "\f133"; }
 .icon-social-outline:before { content: "\f134"; }
+.icon-strikethrough:before { content: "\f13f"; }
 .icon-trash:before { content: "\f135"; }
+.icon-undo:before { content: "\f140"; }
 .icon-upload-outline:before { content: "\f136"; }
 .icon-users-outline:before { content: "\f137"; }
     </style>
@@ -306,7 +322,7 @@
   <body class="characters-off">
     <div id="page" class="container">
       <header>
-        <h1>ics_spina contains 58 glyphs:</h1>
+        <h1>ics_spina contains 66 glyphs:</h1>
         <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
       </header>
 
@@ -714,6 +730,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-indent" class="icon-indent"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-indent" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13a;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-info" class="icon-info"></i></span>
@@ -766,6 +795,32 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list" class="icon-list"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13b;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list-ol" class="icon-list-ol"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-list-ol" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13c;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-list-ul" class="icon-list-ul"></i></span>
@@ -857,6 +912,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-outdent" class="icon-outdent"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-outdent" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf141;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-pages" class="icon-pages"></i></span>
@@ -961,6 +1029,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-quote-right" class="icon-quote-right"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-quote-right" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13d;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-random" class="icon-random"></i></span>
@@ -974,6 +1055,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-redo" class="icon-redo"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-redo" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13e;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-refresh" class="icon-refresh"></i></span>
@@ -1026,6 +1120,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-strikethrough" class="icon-strikethrough"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-strikethrough" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13f;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-trash" class="icon-trash"></i></span>
@@ -1039,6 +1146,19 @@
         </div>
       </div>
       
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-undo" class="icon-undo"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-undo" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf140;" />
+        </div>
+      </div>
+      
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-upload-outline" class="icon-upload-outline"></i></span>

data/app/assets/icons/spina/quote-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"/></svg>

data/app/assets/icons/spina/redo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"/></svg>

data/app/assets/icons/spina/strikethrough.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 224H293.9l-87.17-26.83A43.55 43.55 0 0 1 219.55 112h66.79A49.89 49.89 0 0 1 331 139.58a16 16 0 0 0 21.46 7.15l42.94-21.47a16 16 0 0 0 7.16-21.46l-.53-1A128 128 0 0 0 287.51 32h-68a123.68 123.68 0 0 0-123 135.64c2 20.89 10.1 39.83 21.78 56.36H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h480a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-180.24 96A43 43 0 0 1 336 356.45 43.59 43.59 0 0 1 292.45 400h-66.79A49.89 49.89 0 0 1 181 372.42a16 16 0 0 0-21.46-7.15l-42.94 21.47a16 16 0 0 0-7.16 21.46l.53 1A128 128 0 0 0 224.49 480h68a123.68 123.68 0 0 0 123-135.64 114.25 114.25 0 0 0-5.34-24.36z"/></svg>

data/app/assets/icons/spina/undo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"/></svg>

data/app/assets/javascripts/spina/admin/application.js

@@ -1,7 +1,7 @@
 // jQuery
 
 //= require jquery
-//= require jquery_ujs
+//= require rails-ujs
 
 // Turbolinks
 
@@ -38,7 +38,6 @@
 //= require ./notifications
 //= require ./media_gallery
 
-//= require ./account
 //= require ./confirm_delete
 //= require ./pages
 

data/app/assets/javascripts/spina/admin/controllers/attachment_picker_controller.js

@@ -0,0 +1,15 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("attachment-picker", class extends Stimulus.Controller {
+    static get targets() {
+      return ["signedBlobId", "filename"]
+    }
+
+    chooseAttachment(event) {
+      let option = event.currentTarget.options[event.currentTarget.selectedIndex]
+      this.signedBlobIdTarget.value = option.dataset.signedBlobId || ""
+      this.filenameTarget.value = option.dataset.filename || ""
+    }
+  })
+})()

data/app/assets/javascripts/spina/admin/controllers/image_form_controller.js

@@ -3,7 +3,7 @@
 
   application.register("image-form", class extends Stimulus.Controller {
     static get targets() {
-      return ["image", "field", "button"]
+      return ["image", "imageId", "signedBlobId", "filename"]
     }
 
     remove(e) {
@@ -12,9 +12,10 @@
       e.stopPropagation()
 
       // Remove image and reset field
-      this.imageTarget.remove()
-      this.buttonTarget.remove()
-      this.fieldTarget.value = null
+      this.imageTarget.querySelectorAll('img').forEach(image => image.remove())
+      this.imageIdTarget.value = null
+      this.signedBlobIdTarget.value = null
+      this.filenameTarget.value = null
     }
     
   })

data/app/assets/javascripts/spina/admin/controllers/infinite_scroll_controller.js

@@ -3,36 +3,34 @@
 
   application.register("infinite-scroll", class extends Stimulus.Controller {
     static get targets() {
-      return ["link"]
+      return ["link", "scrollContainer"]
     }
 
     connect() {
-      // Disable scroll event listeners
-      $(window).off('scroll.infiniteScroll')
-      $('#overlay section').off('scroll.infiniteScroll')
-
-      let $link = $(this.linkTarget)
-
-      // If the link has an actual href
-      if ($link.attr('href')) {
-        // If the window scrolls
-        $(window).on('scroll.infiniteScroll', this.loadNextPage($link))
+      this.element["infiniteScroll"] = this
+      this.scrollElement.addEventListener("scroll", this.loadNextPage.bind(this))
+      this.loadNextPage()
+    }
 
-        // If the overlay scrolls
-        $('#overlay section').on('scroll.infiniteScroll', function() {
-          $(window).trigger('scroll.infiniteScroll')
-        })
+    disconnect() {
+      this.scrollElement.removeEventListener("scroll", this.loadNextPage.bind(this))
+    }
 
-        $(window).trigger('scroll.infiniteScroll')
+    get scrollElement() {
+      if (this.hasScrollContainerTarget) {
+        return this.scrollContainerTarget
+      } else {
+        return window
       }
     }
 
-    loadNextPage(link) {
-      if ($(window).scrollTop() > link.offset().top - $(window).height() - 500) {
-        $(window).off('scroll.infiniteScroll')
-        $('#overlay section').off('scroll.infiniteScroll')
-        $.rails.disableElement(link)
-        $.getScript(link.attr('href'))
+    loadNextPage() {
+      if (this.hasLinkTarget) {
+        let top = this.linkTarget.getBoundingClientRect().top
+        if (top < window.innerHeight + 500) {
+          this.linkTarget.dataset.disableWith = "..."
+          this.linkTarget.click()
+        }
       }
     }
 

data/app/assets/javascripts/spina/admin/controllers/media_picker_controller.js

@@ -0,0 +1,171 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("media-picker", class extends Stimulus.Controller {
+    static get targets() {
+      return ["input", "image", "grid", "selectedImage", "selectedImages", "selectedCount", "alt", "linkToUrl", "trixImage"]
+    }
+
+    connect() {
+      this.toggleActive()
+
+      if (this.hasSelectedImagesTarget) {
+        this.sortable = Sortable.create(this.selectedImagesTarget)
+      }
+    }
+
+    choose(event) {
+      switch(this.element.dataset.mode) {
+        case "single":
+          this.imageTargets.forEach((image) => image.querySelector('input').checked = false)
+          event.currentTarget.checked = true
+          this.imageIdInput.value = event.currentTarget.value
+          this.signedBlobIdInput.value = event.currentTarget.dataset.signedBlobId
+          this.filenameInput.value = event.currentTarget.dataset.filename
+          this.placeholder.innerHTML = `<img src="${event.currentTarget.dataset.thumbnailUrl}" width="200" height="150" />`
+          this.element.modal.close()
+          break
+        case "multiple":
+          if(event.currentTarget.checked) {
+            this.addImage(event.currentTarget.dataset.imageId, event.currentTarget.dataset.signedBlobId, event.currentTarget.dataset.filename, event.currentTarget.dataset.thumbnailUrl)
+          } else {
+            this.removeImage(event.currentTarget.dataset.imageId)
+          }
+          this.setCount()
+          break
+        case "trix":
+          this.imageTargets.forEach((image) => image.querySelector('input').checked = false)
+          event.currentTarget.checked = true
+          this.trixImage = event.currentTarget
+          break
+      }
+    }
+
+    choose_multiple(event) {
+      // Set image id's
+      let fields = this.imageCollectionPlaceholder.dataset.fields
+      let id = this.imageCollectionPlaceholder.dataset.id
+
+      let timeIndex = 0
+
+      // Set image thumbnails
+      this.imageCollectionPlaceholder.innerHTML = ""
+      this.selectedImageTargets.forEach(function(image) {
+        // this.imageCollectionPlaceholder.insertAdjacentHTML("beforeend", `<img src="${image.src}" />`)
+
+        // Time
+        let time = new Date().getTime() + timeIndex
+        timeIndex += 1
+
+        // Regexp
+        let regexp = new RegExp(`${id}|new_association`, 'g')
+
+        // Document generation
+        let doc = document.createRange().createContextualFragment(fields.replace(regexp, time))
+        doc.querySelector(".image-id").value = image.dataset.imageId
+        doc.querySelector(".signed-blob-id").value = image.dataset.signedBlobId
+        doc.querySelector(".filename").value = image.dataset.filename
+        doc.querySelector("img").src = image.src
+
+        this.imageCollectionPlaceholder.appendChild(doc)
+      }.bind(this))
+
+      // Close modal
+      this.element.modal.close()
+    }
+
+    insert_trix(event) {
+      let customEvent = new CustomEvent("image-insert", {bubbles: true, cancelable: true, detail: {
+        url: this.trixImage.dataset.fullImageUrl, 
+        alt: this.altTarget.value, 
+        link_to_url: this.linkToUrlTarget.value
+      }})
+      this.trixEditor.dispatchEvent(customEvent)
+
+      // Close modal
+      this.element.modal.close()
+    }
+
+    startUpload(event) {
+      event.currentTarget.querySelector('.media-picker-uploader').classList.add("uploading")
+    }
+
+    refresh(event) {
+      fetch(event.currentTarget.dataset.mediaPickerUrl)
+        .then(response => response.text())
+        .then(function(html) {
+          this.gridTarget.innerHTML = html
+          this.toggleActive()
+        }.bind(this))
+    }
+
+    toggleActive() {
+      this.imageTargets.forEach(function(image) {
+        let input = image.querySelector('input')
+        if (this.selectedIds.includes(input.value)) input.checked = true
+      }.bind(this))
+    }
+
+    openFolder(event) {
+      event.preventDefault()
+      fetch(event.currentTarget.href)
+        .then(response => response.text())
+        .then(function(html) {
+          this.gridTarget.innerHTML = html
+          this.toggleActive()
+        }.bind(this))
+    }
+
+    setCount() {
+      this.selectedCountTarget.innerHTML = `(${this.selectedIds.length})`
+    }
+
+    addImage(id, signed_blob_id, filename, url) {
+      this.selectedImagesTarget.insertAdjacentHTML("beforeend", `<img src="${url}" data-image-id="${id}" data-signed-blob-id="${signed_blob_id}" data-filename="${filename}" data-target="media-picker.selectedImage" />`)
+    }
+
+    removeImage(id) {
+      let image = this.selectedImagesTarget.querySelector(`img[data-image-id="${id}"]`)
+      this.selectedImagesTarget.removeChild(image)
+    }
+
+    get trixEditor() {
+      return document.querySelector(`trix-editor[toolbar="${this.inputTarget.value}"]`)
+    }
+
+    get selectedIds() {
+      return this.selectedImageTargets.map(function(image) {
+        return image.dataset.imageId
+      })
+    }
+
+    get imageCollectionPlaceholder() {
+      return document.querySelector(`#${this.inputTarget.value}`)
+    }
+    
+    get hiddenInputs() {
+      return document.querySelector(`#${this.inputTarget.value}`)
+    }
+    
+    get imageIdInput() {
+      return this.hiddenInputs.querySelector("input[data-target='image-form.imageId']")
+    }
+
+    get signedBlobIdInput() {
+      return this.hiddenInputs.querySelector("input[data-target='image-form.signedBlobId']")
+    }
+
+    get filenameInput() {
+      return this.hiddenInputs.querySelector("input[data-target='image-form.filename']")
+    }
+
+    get placeholder() {
+      return this.hiddenInputs.nextElementSibling
+    }
+
+    get token() {
+      return document.querySelector('meta[name="csrf-token"]').content
+    }
+
+  })
+})()