spina 2.4.0 → 2.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc21967f4a24ee99e20c76c80c6816cf921f4b0a270686049e8fb736f41c7b3d
-  data.tar.gz: bd94d0854dd6d9e85569075ef965524f3d458820482fecb874fe2ff669ea28df
+  metadata.gz: 6eddb2bbef87fd0d66a6ca49f2234bf75a659a67ddf1ccbf95b5ccb0fc385332
+  data.tar.gz: 283ae2a27280cd16c66927ce8aa82210112372a8bc873d25519ee7cf3e3b8b1b
 SHA512:
-  metadata.gz: 41393817fa4b6e939fa74f3c09d195edfa45b3142c4a30c99a21a6e85c1e0ca6c11516e1902170849ed487d9c47c064416516230685fac412b55af54bff37563
-  data.tar.gz: b94ce566a3ce68541b957831193e7931738ae605b95595901f2dfa915159ae0702189127c67fe2badbd1550e3f491262e18fe4c11775e9712b484502d83088c6
+  metadata.gz: 41ba06425dd468e816f32031eef4eaa6bafef3defb437274c980d96d9e9dcc130dcb975942dfc0171bcd0883b07efb3a4037610c9c843f9b7ad936c3afb88e57
+  data.tar.gz: b973bea94d9d22268c076b7023de7dc617876a0064ac6cb47c2513499b5e082c0556a7f991573088c3a228d53c4ee4453f0f1c44756dbe4580c0d48c3be37617

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

@@ -1,3 +1,3 @@
 import "@hotwired/turbo-rails"
-import "@hotwired/stimulus-autoloader"
 import "libraries/trix"
+import "controllers"

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

@@ -0,0 +1,11 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus
+application.warnings = true
+application.debug = false
+window.Stimulus = application
+
+export { application }
+

data/app/assets/javascripts/spina/controllers/embed_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "html" ]
+  }
+  
+  insertEmbeddable(event) {
+    this.trixEditor.insertEmbeddable(event.detail.html)
+  }
+  
+  get trixEditor() {
+    return document.getElementById(this.element.dataset.trixTarget).trix
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/embed_tag_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  
+  connect() {
+    let event = new CustomEvent("embed-tag:embedded", this.eventOptions)
+    this.element.dispatchEvent(event)
+  }
+  
+  get eventOptions() {
+    let clone = this.element.cloneNode(true)
+    clone.removeAttribute("data-controller")
+    return {bubbles: true, detail: {html: clone.outerHTML}}
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/index.js

@@ -0,0 +1,5 @@
+import { application } from "controllers/application"
+
+// Eager load all Stimulus controllers
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/app/assets/javascripts/spina/controllers/trix_controller.js

@@ -5,11 +5,13 @@ export default class extends Controller {
     return [ "editor", "imageFields", "altField" ]
   }
   
-  connect() {    
+  connect() {
+    this.element[this.identifier] = this
+    
     this.editorTarget.addEventListener("trix-selection-change", function(event) {
       if (this.mutableImageAttachment) {
         this.imageFieldsTarget.classList.remove("hidden")
-        let position = this.mutableImageAttachment.querySelector("img").offsetTop + this.mutableImageAttachment.querySelector("img").offsetHeight - 16
+        let position = this.mutableImageAttachment.querySelector("img").offsetTop + this.mutableImageAttachment.querySelector("img").offsetHeight
         this.imageFieldsTarget.style.top = `${position}px`
         this.altFieldTarget.value = this.currentAltText
       } else {
@@ -18,6 +20,14 @@ export default class extends Controller {
     }.bind(this))
   }
   
+  insertEmbeddable(html) {
+    let embeddable = new Trix.Attachment({
+      content: html, 
+      contentType: "application/vnd+spina.embed+html"})
+      
+    this.editor.insertAttachment(embeddable)
+  }
+  
   preventSubmission(event) {
     if (event.key === 'Enter') event.preventDefault() // Prevent form submit from alt text fields
   }

data/app/assets/stylesheets/spina/_tailwind.css

@@ -2342,18 +2342,20 @@ trix-editor {
             user-select: none
   }
   figure.attachment {
+    margin: 0px;
+    display: inline-block
+  }
+  figure.attachment[data-trix-content-type="Spina::Image"] {
     max-height: 150px;
     max-width: 200px;
-    margin: 0px;
-    display: inline-block;
   }
-  figure.attachment img {
+  figure.attachment[data-trix-content-type="Spina::Image"] img {
     margin: 0px;
     border-radius: 0.375rem;
     -o-object-fit: contain;
        object-fit: contain;
   }
-  figure.attachment [data-label]:after {
+  figure.attachment[data-trix-content-type="Spina::Image"] [data-label]:after {
     content: attr(data-label);
     margin-top: 0.25rem;
     display: flex;
@@ -2367,7 +2369,7 @@ trix-editor {
     --tw-text-opacity: 1;
     color: rgba(107, 114, 128, var(--tw-text-opacity));
   }
-  figure[data-trix-mutable].attachment img {
+  figure[data-trix-mutable].attachment[data-trix-content-type="Spina::Image"] img {
     --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -2376,6 +2378,17 @@ trix-editor {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgba(121, 122, 184, var(--tw-ring-opacity))
   }
+  figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment > spina-embed {
+    display: block;
+    border-radius: 0.375rem;
+    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgba(121, 122, 184, var(--tw-ring-opacity));
+  }
   figure .attachment__caption {
     display: none
   }

data/app/assets/stylesheets/spina/tailwind/custom.css

@@ -154,25 +154,33 @@
     [data-trix-mutable]:not(.attachment__captain-editor) {
       @apply select-none
     }
-  
+    
     figure.attachment {
+      @apply m-0 inline-block
+    }
+  
+    figure.attachment[data-trix-content-type="Spina::Image"] {
       max-height: 150px;
       max-width: 200px;
-      @apply m-0 inline-block;
     }
   
-    figure.attachment img {
+    figure.attachment[data-trix-content-type="Spina::Image"] img {
       @apply m-0 rounded-md object-contain;
     }
     
-    figure.attachment [data-label]:after {
+    figure.attachment[data-trix-content-type="Spina::Image"] [data-label]:after {
       content: attr(data-label);
       @apply italic text-gray-500 h-8 flex items-center px-2 mt-1 text-sm;
     }
   
-    figure[data-trix-mutable].attachment img {
+    figure[data-trix-mutable].attachment[data-trix-content-type="Spina::Image"] img {
       @apply shadow-lg ring ring-spina-light
     }
+    
+    figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment > spina-embed {
+      @apply block;
+      @apply shadow-lg ring ring-spina-light rounded-md;
+    }
   
     figure .attachment__caption {
       @apply hidden

data/app/components/spina/forms/trix_toolbar_component.html.erb

@@ -1,57 +1,68 @@
 <div class="relative sticky top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
   <div class="flex items-center flex-wrap" data-controller="reveal">
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mb-3 mr-3">
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bold" data-trix-key="b" title="${Trix.config.lang.bold}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bold" data-trix-key="b" title="${Trix.config.lang.bold}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" 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>
       </button>
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="italic" data-trix-key="i" title="${Trix.config.lang.italic}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="italic" data-trix-key="i" title="${Trix.config.lang.italic}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" 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>
       </button>
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="<%=t 'spina.wysiwyg.link' %>" tabindex="-1" data-action="reveal#toggle">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="<%=t 'spina.wysiwyg.link' %>" tabindex="-1" data-action="reveal#toggle">
         <svg class="w-4 h-4" fill="currentColor" 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>
       </button>
     </div>
   
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3" data-trix-button-group="block-tools">
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading1" title="${Trix.config.lang.heading1}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading1" title="${Trix.config.lang.heading1}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M304 96h-98.94A13.06 13.06 0 0 0 192 109.06v21.88A13.06 13.06 0 0 0 205.06 144H232v88H88v-88h26.94A13.06 13.06 0 0 0 128 130.94V112a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v18.94A13.06 13.06 0 0 0 13.06 144H40v224H13.06A13.06 13.06 0 0 0 0 381.06V400a16 16 0 0 0 16 16h98.94A13.06 13.06 0 0 0 128 402.94v-21.88A13.06 13.06 0 0 0 114.94 368H88v-88h144v88h-26.94A13.06 13.06 0 0 0 192 381.06V400a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-18.94A13.06 13.06 0 0 0 306.94 368H280V144h26.94A13.06 13.06 0 0 0 320 130.94V112a16 16 0 0 0-16-16zm256 272h-56V120a24 24 0 0 0-24-24h-24a24 24 0 0 0-21.44 13.26l-24 48A24 24 0 0 0 432 192h24v176h-56a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
       </button>
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading2" title="${Trix.config.lang.heading2}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading2" title="${Trix.config.lang.heading2}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M304 96h-98.94A13.06 13.06 0 0 0 192 109.06v21.88A13.06 13.06 0 0 0 205.06 144H232v88H88v-88h26.94A13.06 13.06 0 0 0 128 130.94V112a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v18.94A13.06 13.06 0 0 0 13.06 144H40v224H13.06A13.06 13.06 0 0 0 0 381.06V400a16 16 0 0 0 16 16h98.94A13.06 13.06 0 0 0 128 402.94v-21.88A13.06 13.06 0 0 0 114.94 368H88v-88h144v88h-26.94A13.06 13.06 0 0 0 192 381.06V400a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-18.94A13.06 13.06 0 0 0 306.94 368H280V144h26.94A13.06 13.06 0 0 0 320 130.94V112a16 16 0 0 0-16-16zm244.14 272.13H410.82c8.52-60.35 146-79.28 146-179.31C556.8 134.17 515 96 455.05 96a114.71 114.71 0 0 0-97.92 55.05 11.81 11.81 0 0 0 3.58 15.95L382 181.23a11.89 11.89 0 0 0 16.27-3c13-18.23 31.58-31.35 53.72-31.35 29.57 0 49.43 18.08 49.43 45 0 67-149.45 84-149.45 195.49a137.14 137.14 0 0 0 1.39 18.42 12.18 12.18 0 0 0 11.8 10.21h183A11.85 11.85 0 0 0 560 404.18V380a11.85 11.85 0 0 0-11.86-11.87z"/></svg>
       </button>
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading3" title="${Trix.config.lang.heading3}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading3" title="${Trix.config.lang.heading3}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M480.07 219.78l75.39-85.88a11.82 11.82 0 0 0 2.93-7.76v-18.32A11.89 11.89 0 0 0 546.44 96H379.87a11.88 11.88 0 0 0-11.94 11.82V132a11.88 11.88 0 0 0 11.94 11.83s102.44-.11 106-.25c-2.77 2.88-74.12 85.58-74.12 85.58a11.67 11.67 0 0 0-1.86 12.38l6.71 15.3a12.94 12.94 0 0 0 10.93 7.16h17.08c48.61 0 65.85 27.23 65.85 50.56 0 28.57-24.58 50.13-57.17 50.13-24 0-46.88-10.46-65.29-26.89a12 12 0 0 0-17.76 1.81l-16 22a11.73 11.73 0 0 0 1.4 15.41c24.6 23.34 60.62 39 99.38 39 64.2 0 109.86-46.22 109.86-103.17.01-51.1-36.73-84.17-84.81-93.07zM304 96h-98.94A13.06 13.06 0 0 0 192 109.06v21.88A13.06 13.06 0 0 0 205.06 144H232v88H88v-88h26.94A13.06 13.06 0 0 0 128 130.94V112a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v18.94A13.06 13.06 0 0 0 13.06 144H40v224H13.06A13.06 13.06 0 0 0 0 381.06V400a16 16 0 0 0 16 16h98.94A13.06 13.06 0 0 0 128 402.94v-21.88A13.06 13.06 0 0 0 114.94 368H88v-88h144v88h-26.94A13.06 13.06 0 0 0 192 381.06V400a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-18.94A13.06 13.06 0 0 0 306.94 368H280V144h26.94A13.06 13.06 0 0 0 320 130.94V112a16 16 0 0 0-16-16z"/></svg>
       </button>
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading4" title="${Trix.config.lang.heading4}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading4" title="${Trix.config.lang.heading4}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M304 96h-98.94A13.06 13.06 0 0 0 192 109.06v21.88A13.06 13.06 0 0 0 205.06 144H232v88H88v-88h26.94A13.06 13.06 0 0 0 128 130.94V112a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v18.94A13.06 13.06 0 0 0 13.06 144H40v224H13.06A13.06 13.06 0 0 0 0 381.06V400a16 16 0 0 0 16 16h98.94A13.06 13.06 0 0 0 128 402.94v-21.88A13.06 13.06 0 0 0 114.94 368H88v-88h144v88h-26.94A13.06 13.06 0 0 0 192 381.06V400a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-18.94A13.06 13.06 0 0 0 306.94 368H280V144h26.94A13.06 13.06 0 0 0 320 130.94V112a16 16 0 0 0-16-16zm256 136h-16V112a16 16 0 0 0-16-16h-16a16 16 0 0 0-16 16v120h-96V112a16 16 0 0 0-16-16h-16a16 16 0 0 0-16 16v136a32 32 0 0 0 32 32h112v120a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V280h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
       </button>
     </div>
   
-    <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3">      
-      <%= link_to helpers.spina.admin_media_picker_path(target: "insert_#{@trix_id}"), class: "text-gray-700 w-9 h-9 flex items-center justify-center", data: {turbo_frame: "modal"} do %>
+    <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3">
+      
+      <%= link_to helpers.spina.admin_media_picker_path(target: "insert_#{@trix_id}"), class: "hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center", data: {turbo_frame: "modal"} do %>
         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
         </svg>
       <% end %>
       
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="quote" title="${Trix.config.lang.quote}" tabindex="-1">
+      <% if helpers.current_theme.embeds.any? %>
+        <%= link_to helpers.spina.new_admin_embed_path(target: "insert_#{@trix_id}"), class: "hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center", data: {turbo_frame: "modal"} do %>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM14 11a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0v-1h-1a1 1 0 110-2h1v-1a1 1 0 011-1z" />
+          </svg>
+        <% end %>
+      <% end %>
+    </div>
+    
+    <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="quote" title="${Trix.config.lang.quote}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 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>
       </button>
-      <button type="button" class="text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="code" title="${Trix.config.lang.code}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="code" title="${Trix.config.lang.code}" tabindex="-1">
         <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
         </svg>
       </button>
-      <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bullet" title="${Trix.config.lang.bullets}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 trix-button trix-button--icon trix-button--icon-bullet-list text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bullet" title="${Trix.config.lang.bullets}" tabindex="-1">
         <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M48 368a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0-160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 24H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
       </button>
-      <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="number" title="${Trix.config.lang.numbers}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 trix-button trix-button--icon trix-button--icon-number-list text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="number" title="${Trix.config.lang.numbers}" tabindex="-1">
         <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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.84a154.82 154.82 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.3 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.73 6.13-3.2 11.72 2.62 15.94 7.71 4.69 20.39 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 392H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 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.9 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.33c3.28-10.29 48.33-18.68 48.33-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.45 18.75-4.38 5.59-3 10.84 2.79 15.37l8.58 6.88c5.61 4.56 11 2.47 16.13-2.44a13.4 13.4 0 0 1 9.45-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.1 320z"/></svg>
       </button>
-      <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-action="decreaseNestingLevel" title="${Trix.config.lang.outdent}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 trix-button trix-button--icon trix-button--icon-decrease-nesting-level text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-action="decreaseNestingLevel" title="${Trix.config.lang.outdent}" tabindex="-1">
         <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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 424H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm3.17-128H204.83A12.82 12.82 0 0 0 192 308.83v22.34A12.82 12.82 0 0 0 204.83 344h230.34A12.82 12.82 0 0 0 448 331.17v-22.34A12.82 12.82 0 0 0 435.17 296zM432 40H16A16 16 0 0 0 0 56v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16zm3.17 128H204.83A12.82 12.82 0 0 0 192 180.83v22.34A12.82 12.82 0 0 0 204.83 216h230.34A12.82 12.82 0 0 0 448 203.17v-22.34A12.82 12.82 0 0 0 435.17 168z"/></svg>
       </button>
-      <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-action="increaseNestingLevel" title="${Trix.config.lang.indent}" tabindex="-1">
+      <button type="button" class="hover:bg-gray-300 trix-button trix-button--icon trix-button--icon-increase-nesting-level text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-action="increaseNestingLevel" title="${Trix.config.lang.indent}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 424H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM27.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.3zM435.17 168H204.83A12.82 12.82 0 0 0 192 180.83v22.34A12.82 12.82 0 0 0 204.83 216h230.34A12.82 12.82 0 0 0 448 203.17v-22.34A12.82 12.82 0 0 0 435.17 168zM432 48H16A16 16 0 0 0 0 64v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm3.17 248H204.83A12.82 12.82 0 0 0 192 308.83v22.34A12.82 12.82 0 0 0 204.83 344h230.34A12.82 12.82 0 0 0 448 331.17v-22.34A12.82 12.82 0 0 0 435.17 296z"/></svg>
       </button>
     </div>

data/app/controllers/spina/admin/embeds_controller.rb

@@ -0,0 +1,36 @@
+module Spina
+  module Admin
+    class EmbedsController < AdminController
+      
+      def new
+        @embeddable = (Spina::Embeds.constantize(embed_type) || embeddables.first).new
+      end
+      
+      def create
+        @embeddable = Spina::Embeds.constantize(embed_type).new(embed_params)
+        
+        if @embeddable.valid?
+          render turbo_stream: turbo_stream.update(:trix_attachment_html, @embeddable.to_trix_attachment)
+        else
+          render :new, status: :unprocessable_entity
+        end
+      end
+      
+      private
+      
+        def embeddables
+          @embeddables ||= current_theme.embeddables
+        end
+        helper_method :embeddables
+      
+        def embed_type
+          params[:embed_type]
+        end
+      
+        def embed_params
+          params.require(:embeddable).permit!
+        end
+      
+    end
+  end
+end

data/app/helpers/spina/admin/icons_helper.rb

@@ -8,7 +8,7 @@ module Spina::Admin
 		
 		def heroicon(name, style: :outline, **options)
 	    file = read_file(Spina::Engine.root.join("app/assets/icons/heroicons", style.to_s, "#{name}.svg"))
-	    
+	    return "" if file.nil?
 	    doc = Nokogiri::XML(file)
 	    svg = doc.root
 	    svg[:class] = options[:class]
@@ -18,7 +18,7 @@ module Spina::Admin
 		private
 		
 	    def read_file(path)
-	      File.exist?(path) || raise(FileNotFound, "File #{path} not found")
+	      return nil unless File.exist?(path)
 	      File.read(path)
 	    end  
 

data/app/helpers/spina/spina_helper.rb

@@ -1,10 +1,11 @@
 module Spina::SpinaHelper
 
-  def spina_importmap_tags(entry_point = "application")
+  def spina_importmap_tags(entry_point = "application", shim: true)
     safe_join [
       javascript_inline_importmap_tag(Spina.config.importmap.to_json(resolver: self)),
       javascript_importmap_module_preload_tags(Spina.config.importmap),
-      javascript_importmap_shim_tag,
+      (javascript_importmap_shim_nonce_configuration_tag if shim),
+      (javascript_importmap_shim_tag if shim),
       javascript_import_module_tag(entry_point)
     ], "\n"
   end

data/app/models/spina/embeds/base.rb

@@ -0,0 +1,7 @@
+module Spina::Embeds
+  class Base    
+    include ActiveModel::Model
+    include Spina::Embeddable
+    include Spina::Embeds::TrixConversion
+  end
+end

data/app/models/spina/embeds/button.rb

@@ -0,0 +1,13 @@
+module Spina::Embeds
+  class Button < Base
+    attributes :url, :label
+    
+    heroicon "cursor-click"
+    
+    validates :url, :label, presence: true
+    
+    def to_trix_partial_path
+      "spina/embeds/buttons/trix_button"
+    end
+  end
+end

data/app/models/spina/embeds/vimeo.rb

@@ -0,0 +1,39 @@
+require 'net/http'
+
+module Spina::Embeds
+  class Vimeo < Base
+    attributes :url
+    
+    heroicon "video-camera"
+    
+    REGEX = /(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/
+    
+    validates :url, presence: true, format: {with: REGEX}
+    
+    def id
+      REGEX.match(url).try(:[], 5)
+    end
+    
+    # Get title from Vimeo API (remote call)
+    def remote_title
+      get_vimeo_json&.dig(0, "title")
+    end
+    
+    def to_trix_partial_path
+      "spina/embeds/vimeos/thumbnail"
+    end
+    
+    private
+    
+      def get_vimeo_json
+        uri = URI("https://vimeo.com/api/v2/video/#{id}.json")
+        response = Net::HTTP.get(uri)
+        begin
+          JSON.parse(response)
+        rescue
+          nil
+        end
+      end
+    
+  end
+end

data/app/models/spina/embeds/youtube.rb

@@ -0,0 +1,39 @@
+require 'net/http'
+
+module Spina::Embeds
+  class Youtube < Base
+    attributes :url
+    
+    heroicon "video-camera"
+    
+    REGEX = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+    
+    validates :url, presence: true, format: {with: REGEX}
+    
+    def id
+      REGEX.match(url).try(:[], 1)
+    end
+    
+    # Get title from Youtube API (remote call)
+    def remote_title
+      get_youtube_json&.dig("title")
+    end
+    
+    def to_trix_partial_path
+      "spina/embeds/youtubes/thumbnail"
+    end
+    
+    private
+  
+      def get_youtube_json
+        uri = URI("https://www.youtube.com/oembed?url=http://youtube.com/watch?v=#{id}&format=json")
+        response = Net::HTTP.get(uri)
+        begin
+          JSON.parse(response)
+        rescue
+          nil
+        end
+      end
+      
+  end
+end

data/app/models/spina/page.rb

@@ -26,6 +26,8 @@ module Spina
     scope :sorted, -> { order(:position) }
     scope :live, -> { active.where(draft: false) }
     scope :in_menu, -> { where(show_in_menu: true) }
+    
+    before_create :set_default_position
 
     # Copy resource from parent
     before_save :set_resource_from_parent, if: -> { parent.present? }
@@ -102,6 +104,10 @@ module Spina
     end
 
     private
+    
+      def set_default_position
+        self.position ||= self.class.maximum(:position).to_i.next
+      end
 
       def set_resource_from_parent
         self.resource_id = parent.resource_id

data/app/presenters/spina/content_presenter.rb

@@ -14,7 +14,7 @@ module Spina
 
     def html(name)
       html = find_part(name)&.content
-      ActiveSupport::SafeBuffer.new(html.to_s)
+      RichTextPresenter.new(view_context, html)
     end
 
     def image_tag(image, variant_options = {}, options = {})

data/app/presenters/spina/rich_text_presenter.rb

@@ -0,0 +1,45 @@
+module Spina
+  class RichTextPresenter
+    attr_reader :html, :view_context
+    
+    EMBED_CONTENT_TYPE = "application/vnd+spina.embed+html"
+    
+    def initialize(view_context, html)
+      @view_context = view_context || Spina::Current.page&.view_context
+      @html = html
+    end
+    
+    def to_s
+      ActiveSupport::SafeBuffer.new(render_embeds(html))
+    end
+    
+    private
+    
+      def embed_selector
+        "figure[data-trix-content-type=\"#{EMBED_CONTENT_TYPE}\"]"
+      end
+    
+      def render_embeds(html)
+        doc = Nokogiri::HTML(html)
+        doc.css(embed_selector).each do |node|
+          node.replace render_embed(node.first_element_child)
+        end
+        doc.to_s
+      end
+      
+      def render_embed(element)
+        embeddable = element_to_embeddable(element)
+        view_context.render(embeddable)
+      end
+      
+      def element_to_embeddable(element)
+        embeddable = Spina::Embeds.constantize(element["data-embed-type"])
+        embeddable&.from_json(element["data-embed-attributes"]) || null_object
+      end
+      
+      def null_object
+        {inline: ""}
+      end
+
+  end
+end

data/app/views/spina/admin/embeds/new.html.erb

@@ -0,0 +1,47 @@
+<%= render Spina::UserInterface::ModalComponent.new(size: "max-w-screen-md h-full md:h-96") do %>
+  <div class="h-full" data-controller="embed" data-trix-target="<%= params[:target] %>">
+    <%= turbo_frame_tag :trix_attachment_html, class: 'hidden', data: {embeddables_target: "html", action: "embed-tag:embedded->embed#insertEmbeddable embed-tag:embedded->modal#close"} %>
+    
+    <%= turbo_frame_tag :embeddable_form do %>
+      <div class="flex h-full">
+        <div class="p-4 w-64 bg-gray-100 md:bg-opacity-50">
+          <div class="text-xs font-medium text-gray-600 mb-2">
+            <%=t "spina.embeds.embed_a_component" %>
+          </div>
+          <% embeddables.each do |embeddable| %>
+            <% if embeddable.name == @embeddable.class.name %>
+              <% classes = "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center text-gray-900 bg-spina-dark bg-opacity-20" %>
+            <% else %>
+              <% classes = "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center text-gray-600 hover:bg-gray-200 bg-opacity-100 hover:bg-gray-200" %>
+            <% end %>
+          
+            <%= link_to spina.new_admin_embed_path(embed_type: embeddable.name), class: classes, data: {turbo_frame: :embeddable_form} do %>
+              <%= heroicon(embeddable.icon, style: :solid, class: 'w-5 h-5 mr-2 text-spina-light') %>
+              <%= embeddable.model_name.human %>
+            <% end %>
+          <% end %>
+        </div>
+        
+        <div class="bg-white flex-1">
+          <%= form_with model: @embeddable, scope: :embeddable, url: spina.admin_embeds_path, class: 'h-full' do |f| %>
+            <%= hidden_field_tag :embed_type, @embeddable.class.name %>
+            
+            <div class="h-full relative">
+              <div class="flex-1 p-5 h-full pb-20 overflow-scroll">
+                <%= render partial: @embeddable.to_fields_path, locals: {f: f} %>
+              </div>
+              
+              <div class="w-full flex backdrop-filter backdrop-blur-lg absolute bottom-0 justify-end p-5 py-4 border-t border-gray-200">
+                <%= button_tag type: :submit, class: 'btn btn-primary' do %>
+                  <%= heroicon('plus', style: :solid, class: 'w-6 h-6 -ml-2') %>
+                  <%=t "spina.embeds.embed_component" %>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+    
+  </div>
+<% end %>

data/app/views/spina/admin/shared/_flash.html.erb

@@ -1,5 +1,5 @@
-<div class="fixed bottom-0 left-0 w-full flex justify-center z-50">
+<div class="fixed bottom-0 left-0 w-full flex justify-center z-50 pointer-events-none">
   <% flash.each do |type, message| %>
     <%= render Spina::UserInterface::FlashMessageComponent.new(type: type, message: message) %>
   <% end %>
-</div>
+</div>

data/app/views/spina/embeds/buttons/_button.html.erb

@@ -0,0 +1,3 @@
+<%= link_to button.url do %>
+  <%= button.label %>
+<% end %>

data/app/views/spina/embeds/buttons/_button_fields.html.erb

@@ -0,0 +1,14 @@
+<div class="text-xl font-bold mb-3 text-gray-800">
+  Button
+  <div class="text-sm text-gray-500 font-normal">
+    A simple button that links somewhere
+  </div>
+</div>
+
+<%= render Spina::Forms::LabelComponent.new(f, :url) %>
+<%= render Spina::Forms::TextFieldComponent.new(f, :url, autofocus: true) %>
+
+<div class="mt-3">
+  <%= render Spina::Forms::LabelComponent.new(f, :label) %>
+  <%= render Spina::Forms::TextFieldComponent.new(f, :label) %>
+</div>

data/app/views/spina/embeds/buttons/_trix_button.html.erb

@@ -0,0 +1,3 @@
+<%= button_tag type: :button, class: "btn btn-default" do %>
+  <%= button.label %>
+<% end %>

data/app/views/spina/embeds/vimeos/_thumbnail.html.erb

@@ -0,0 +1,6 @@
+<div class='border border-blue-600 text-blue-600 rounded-md flex items-center px-1 whitespace-nowrap'>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+    <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
+  </svg>
+  <%= vimeo.remote_title %>
+</div>

data/app/views/spina/embeds/vimeos/_vimeo.html.erb

@@ -0,0 +1 @@
+<iframe src="https://player.vimeo.com/video/<%= vimeo.id %>" width="640" height="475" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

data/app/views/spina/embeds/vimeos/_vimeo_fields.html.erb

@@ -0,0 +1,9 @@
+<div class="text-xl font-bold mb-3 text-gray-800">
+  Vimeo
+  <div class="text-sm text-gray-500 font-normal">
+    Embed a Vimeo video
+  </div>
+</div>
+
+<%= render Spina::Forms::LabelComponent.new(f, :url) %>
+<%= render Spina::Forms::TextFieldComponent.new(f, :url, autofocus: true) %>

data/app/views/spina/embeds/youtubes/_thumbnail.html.erb

@@ -0,0 +1,6 @@
+<div class='border border-red-600 text-red-600 rounded-md flex items-center px-1 whitespace-nowrap'>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+    <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
+  </svg>
+  <%= youtube.remote_title %>
+</div>

data/app/views/spina/embeds/youtubes/_youtube.html.erb

@@ -0,0 +1 @@
+<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/<%= youtube.id %>" frameborder="0"></iframe>

data/app/views/spina/embeds/youtubes/_youtube_fields.html.erb

@@ -0,0 +1,9 @@
+<div class="text-xl font-bold mb-3 text-gray-800">
+  Youtube
+  <div class="text-sm text-gray-500 font-normal">
+    Embed a Youtube video
+  </div>
+</div>
+
+<%= render Spina::Forms::LabelComponent.new(f, :url) %>
+<%= render Spina::Forms::TextFieldComponent.new(f, :url, autofocus: true) %>

data/config/initializers/importmap.rb

@@ -1,7 +1,7 @@
 Spina.config.importmap.draw do
   # Stimulus & Turbo
   pin "@hotwired/stimulus", to: "stimulus.js"
-  pin "@hotwired/stimulus-autoloader", to: "stimulus-autoloader.js"
+  pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
   pin "@hotwired/turbo-rails", to: "turbo.js"
   
   # Spina entrypoint

data/config/locales/en.yml

@@ -1,4 +1,10 @@
 en:
+  activemodel:
+    attributes:
+      spina/embeds/youtube:
+        url: youtube.com/watch?v=...
+      spina/embeds/vimeo:
+        url: vimeo.com/...
   activerecord:
     attributes:
       spina/account:
@@ -94,6 +100,15 @@ en:
       spina/user:
         one: User
         other: Users
+  helpers:
+    label:
+      spina/embeds/button:
+        url: URL
+        label: Button label
+      spina/embeds/youtube:
+        url: Youtube URL
+      spina/embeds/vimeo:
+        url: Vimeo URL
   spina:
     accounts:
       contact_details: Contact details
@@ -117,6 +132,9 @@ en:
     delete_confirmation: Are you sure you want to delete <strong>%{subject}</strong>?
     edit: Edit
     edit_website: Edit your website
+    embeds:
+      embed_a_component: Embed a component
+      embed_component: Embed component
     forgot_password:
       expired: Your password reset token has expired
       mail_subject: Reset your password

data/config/routes.rb

@@ -80,6 +80,8 @@ Spina::Engine.routes.draw do
     resources :images
     
     resource :media_picker, controller: "media_picker", only: [:show]
+    
+    resources :embeds, only: [:new, :create]
   end
 
   # Sitemap

data/lib/generators/spina/templates/config/initializers/themes/default.rb

@@ -59,4 +59,7 @@ Spina::Theme.register do |theme|
   
   # Plugins (optional)
   theme.plugins = []
+  
+  # Embeds (optional)
+  theme.embeds = []
 end

data/lib/generators/spina/templates/config/initializers/themes/demo.rb

@@ -69,4 +69,7 @@ Spina::Theme.register do |theme|
 
   # Plugins (optional)
   theme.plugins = ['reviews']
+  
+  # Embeds (optional)
+  theme.embeds = []
 end

data/lib/spina/embeddable.rb

@@ -0,0 +1,48 @@
+module Spina
+  module Embeddable
+    extend ActiveSupport::Concern
+    
+    included do
+      class_attribute :embed_attributes, default: []
+      class_attribute :icon, default: nil
+    end
+    
+    class_methods do
+      def from_json(json)
+        begin
+          attributes = JSON.parse(json)
+          attributes.transform_keys!(&:to_sym)
+          new(attributes)
+        rescue
+          Rails.logger.error "[#{self.class.name}] Couldn't parse JSON"
+          nil
+        end
+      end
+      
+      def attributes(*names)
+        attr_accessor(*names.map(&:to_sym))
+        self.embed_attributes += names.map(&:to_sym)
+      end
+      
+      # Give it an icon
+      def heroicon(name)
+        self.icon = name
+      end
+    end
+    
+    def initialize(attributes = {})
+      attributes.slice(*self.class.embed_attributes).each do |key, value|
+        instance_variable_set("@#{key}", value)
+      end
+    end
+    
+    def to_fields_path
+      "#{to_partial_path}_fields"
+    end
+    
+    def to_trix_partial_path
+      to_partial_path
+    end
+    
+  end
+end

data/lib/spina/embeds/trix_conversion.rb

@@ -0,0 +1,41 @@
+module Spina
+  module Embeds
+    module TrixConversion
+      extend ActiveSupport::Concern
+      
+      # Wrap rendered partial in an <embed> tag for Trix
+      def to_trix_attachment(content = trix_attachment_content)        
+        wrap_with_embed_tag(content)
+      end
+      
+      def wrap_with_embed_tag(html)
+        element = html_document.create_element("spina-embed", embed_tag_attributes)
+        element.inner_html = html
+        element.to_html
+      end
+      
+      private
+      
+        def embed_tag_attributes
+          spina_attributes.merge({"data-embed-attributes": embed_attributes_to_json})
+        end
+      
+        def embed_attributes_to_json
+          JSON.generate Hash[self.class.embed_attributes.map{|a| [a.to_s, send(a)]}]
+        end
+        
+        def spina_attributes
+          {"data-embed-type": self.class.name, "data-controller": "embed-tag"}
+        end
+      
+        def trix_attachment_content
+          ApplicationController.render(partial: to_trix_partial_path, formats: :html, object: self, as: model_name.element)
+        end
+        
+        def html_document
+          Nokogiri::HTML::Document.new.tap{|doc| doc.encoding = "UTF-8"}
+        end
+      
+    end
+  end
+end

data/lib/spina/embeds.rb

@@ -0,0 +1,11 @@
+module Spina
+  module Embeds
+  
+    def self.constantize(embeddable_type)
+      return nil if embeddable_type.blank?
+      name = embeddable_type.camelize.demodulize.to_s
+      "Spina::Embeds::#{name}".safe_constantize
+    end
+
+  end
+end

data/lib/spina/engine.rb

@@ -16,7 +16,7 @@ require 'browser'
 module Spina
   class Engine < ::Rails::Engine
     isolate_namespace Spina
-
+    
     config.autoload_paths += %W( #{config.root}/lib )
 
     config.to_prepare do
@@ -26,8 +26,9 @@ module Spina
           require_dependency(decorator)
         end
       end
-
-      # Register JSON part types for editing content
+    end
+    
+    config.to_prepare do
       Spina::Part.register(
         Spina::Parts::Line,
         Spina::Parts::MultiLine,
@@ -38,6 +39,7 @@ module Spina
         Spina::Parts::Option,
         Spina::Parts::Attachment
       )
-    end    
+    end
+
   end
 end

data/lib/spina/part.rb

@@ -8,12 +8,20 @@ module Spina
       end
 
       def register(*parts)
-        parts.each{|part| all << part}
+        parts.each do |part|
+          unregister(part)
+          all << part
+        end
+      end
+      
+      def unregister(part)
+        all.delete_if do |registered_part|
+          registered_part.name == part.name
+        end
       end
 
     end
 
-
   end
 end
 

data/lib/spina/railtie.rb

@@ -5,6 +5,16 @@ module Spina
       app.config.assets.precompile += %w(spina/manifest)
     end
     
+    initializer "spina.theme_reloader" do |app|
+      reloader = ThemeReloader.new
+      reloader.execute
+      
+      app.reloaders << reloader
+      app.reloader.to_run do
+        reloader.execute
+      end
+    end
+    
     ActiveSupport.on_load(:action_controller) do
       ::ActionController::Base.send(:include, Spina::AdminSectionable)
     end

data/lib/spina/theme.rb

@@ -1,13 +1,18 @@
 module Spina
   class Theme
 
-    attr_accessor :name, :title, :parts, :page_parts, :structures, :view_templates, :layout_parts, :custom_pages, :plugins, :public_theme, :config, :navigations, :resources
+    attr_accessor :name, :title, :parts, :page_parts, :structures, :view_templates, :layout_parts, :custom_pages, :plugins, :public_theme, :config, :navigations, :resources, :embeds
 
     class << self
 
       def all
         ::Spina::THEMES
       end
+      
+      def unregister(name)
+        theme = find_by_name(name)
+        all.delete(theme) if theme
+      end
 
       def find_by_name(name)
         all.find { |theme| theme.name == name }
@@ -17,6 +22,7 @@ module Spina
         theme = ::Spina::Theme.new
         yield theme
         raise 'Missing theme name' if theme.name.nil?
+        unregister(theme.name)
         if theme.plugins.nil?
           theme.plugins = ::Spina::Plugin.all.map { |plugin| plugin.name }
         end
@@ -33,8 +39,13 @@ module Spina
       @custom_pages     = []
       @navigations      = []
       @resources        = []
+      @embeds           = []
       @public_theme = false
     end
+    
+    def embeddables
+      embeds.map{|embed| Embeds.constantize(embed)}
+    end
 
     def new_page_templates(resource: nil)
       page_collection = resource&.name || "main"

data/lib/spina/theme_reloader.rb

@@ -0,0 +1,20 @@
+class Spina::ThemeReloader
+  delegate :execute_if_updated, :execute, :updated?, to: :updater
+  
+  def reload!
+    theme_paths.each { |path| load path }
+  end
+  
+  private
+  
+    def updater
+      @updater ||= Rails.application.config.file_watcher.new(theme_paths) do 
+        reload!
+      end
+    end
+  
+    def theme_paths
+      Rails.root.glob("config/initializers/themes/*.rb") 
+    end
+  
+end

data/lib/spina/version.rb

@@ -1,3 +1,3 @@
 module Spina
-  VERSION = "2.4.0"
+  VERSION = "2.5.0"
 end

data/lib/spina.rb

@@ -1,6 +1,7 @@
 require 'spina/engine'
 require 'spina/admin_sectionable'
 require 'spina/railtie'
+require 'spina/theme_reloader'
 require 'spina/plugin'
 require 'spina/theme'
 require 'spina/tailwind_purger'
@@ -8,6 +9,9 @@ require 'spina/attr_json_spina_parts_model'
 require 'spina/attr_json_monkeypatch'
 require 'spina/authentication/sessions'
 require 'spina/authentication/basic'
+require 'spina/embeddable'
+require 'spina/embeds'
+require 'spina/embeds/trix_conversion'
 
 module Spina
   include ActiveSupport::Configurable

data/lib/tasks/spina_tasks.rake

@@ -25,7 +25,7 @@ namespace :spina do
     desc "Compile Tailwind.css for Spina"
     task :compile do
       Dir.chdir(File.join(__dir__, "../..")) do
-        system "npx tailwindcss-cli@latest build -i ./app/assets/stylesheets/spina/tailwind/custom.css -o ./app/assets/stylesheets/spina/_tailwind.css -c ./app/assets/config/spina/tailwind.config.js"
+        system "npx tailwindcss@latest build -i ./app/assets/stylesheets/spina/tailwind/custom.css -o ./app/assets/stylesheets/spina/_tailwind.css -c ./app/assets/config/spina/tailwind.config.js"
       end
     end
     

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spina
 version: !ruby/object:Gem::Version
-  version: 2.4.0
+  version: 2.5.0
 platform: ruby
 authors:
 - Bram Jetten
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-09-09 00:00:00.000000000 Z
+date: 2021-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -182,50 +182,44 @@ dependencies:
   name: importmap-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.5.1
+        version: 0.7.6
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.5.1
+        version: 0.7.6
 - !ruby/object:Gem::Dependency
   name: turbo-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.7.4
+        version: 0.8.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.7.4
+        version: 0.8.0
 - !ruby/object:Gem::Dependency
   name: stimulus-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.8
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 0.5.0
+        version: 0.7.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.8
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 0.5.0
+        version: 0.7.0
 - !ruby/object:Gem::Dependency
   name: babosa
   requirement: !ruby/object:Gem::Requirement
@@ -821,17 +815,21 @@ files:
 - app/assets/images/spina/spina.png
 - app/assets/images/spina/spina.svg
 - app/assets/javascripts/spina/application.js
+- app/assets/javascripts/spina/controllers/application.js
 - app/assets/javascripts/spina/controllers/attachment_picker_controller.js
 - app/assets/javascripts/spina/controllers/autofocus_controller.js
 - app/assets/javascripts/spina/controllers/button_controller.js
 - app/assets/javascripts/spina/controllers/confetti_controller.js
 - app/assets/javascripts/spina/controllers/confirm_controller.js
 - app/assets/javascripts/spina/controllers/delegate_click_controller.js
+- app/assets/javascripts/spina/controllers/embed_controller.js
+- app/assets/javascripts/spina/controllers/embed_tag_controller.js
 - app/assets/javascripts/spina/controllers/exists_controller.js
 - app/assets/javascripts/spina/controllers/form_controller.js
 - app/assets/javascripts/spina/controllers/hotkeys_controller.js
 - app/assets/javascripts/spina/controllers/image_collection_controller.js
 - app/assets/javascripts/spina/controllers/image_fade_in_controller.js
+- app/assets/javascripts/spina/controllers/index.js
 - app/assets/javascripts/spina/controllers/infinite_scroll_controller.js
 - app/assets/javascripts/spina/controllers/loading_button_controller.js
 - app/assets/javascripts/spina/controllers/media_picker_controller.js
@@ -922,6 +920,7 @@ files:
 - app/controllers/spina/admin/accounts_controller.rb
 - app/controllers/spina/admin/admin_controller.rb
 - app/controllers/spina/admin/attachments_controller.rb
+- app/controllers/spina/admin/embeds_controller.rb
 - app/controllers/spina/admin/images_controller.rb
 - app/controllers/spina/admin/layout_controller.rb
 - app/controllers/spina/admin/media_folders_controller.rb
@@ -963,6 +962,10 @@ files:
 - app/models/spina/application_record.rb
 - app/models/spina/attachment.rb
 - app/models/spina/current.rb
+- app/models/spina/embeds/base.rb
+- app/models/spina/embeds/button.rb
+- app/models/spina/embeds/vimeo.rb
+- app/models/spina/embeds/youtube.rb
 - app/models/spina/image.rb
 - app/models/spina/media_folder.rb
 - app/models/spina/navigation.rb
@@ -985,6 +988,7 @@ files:
 - app/models/spina/user.rb
 - app/presenters/spina/content_presenter.rb
 - app/presenters/spina/menu_presenter.rb
+- app/presenters/spina/rich_text_presenter.rb
 - app/serializers/spina/api/base_serializer.rb
 - app/serializers/spina/api/image_serializer.rb
 - app/serializers/spina/api/navigation_serializer.rb
@@ -999,6 +1003,7 @@ files:
 - app/views/spina/admin/attachments/edit.html.erb
 - app/views/spina/admin/attachments/index.html.erb
 - app/views/spina/admin/attachments/show.html.erb
+- app/views/spina/admin/embeds/new.html.erb
 - app/views/spina/admin/images/_image.html.erb
 - app/views/spina/admin/images/edit.html.erb
 - app/views/spina/admin/images/index.html.erb
@@ -1057,6 +1062,15 @@ files:
 - app/views/spina/admin/users/edit.html.erb
 - app/views/spina/admin/users/index.html.erb
 - app/views/spina/admin/users/new.html.erb
+- app/views/spina/embeds/buttons/_button.html.erb
+- app/views/spina/embeds/buttons/_button_fields.html.erb
+- app/views/spina/embeds/buttons/_trix_button.html.erb
+- app/views/spina/embeds/vimeos/_thumbnail.html.erb
+- app/views/spina/embeds/vimeos/_vimeo.html.erb
+- app/views/spina/embeds/vimeos/_vimeo_fields.html.erb
+- app/views/spina/embeds/youtubes/_thumbnail.html.erb
+- app/views/spina/embeds/youtubes/_youtube.html.erb
+- app/views/spina/embeds/youtubes/_youtube_fields.html.erb
 - app/views/spina/sitemaps/show.xml.builder
 - app/views/spina/user_mailer/forgot_password.html.erb
 - app/views/spina/user_mailer/forgot_password.text.erb
@@ -1115,12 +1129,16 @@ files:
 - lib/spina/attr_json_spina_parts_model.rb
 - lib/spina/authentication/basic.rb
 - lib/spina/authentication/sessions.rb
+- lib/spina/embeddable.rb
+- lib/spina/embeds.rb
+- lib/spina/embeds/trix_conversion.rb
 - lib/spina/engine.rb
 - lib/spina/part.rb
 - lib/spina/plugin.rb
 - lib/spina/railtie.rb
 - lib/spina/tailwind_purger.rb
 - lib/spina/theme.rb
+- lib/spina/theme_reloader.rb
 - lib/spina/version.rb
 - lib/tasks/spina_tasks.rake
 homepage: https://www.spinacms.com