maglevcms 2.1.0 → 3.0.0.beta1

data/app/assets/javascripts/maglev/editor/controllers/shared/submit_button_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+import { sleep } from"maglev-controllers/utils"
+
+export default class extends Controller {
+
+  initialize() {
+    this._start = this.start.bind(this)
+    this._end = this.end.bind(this)
+  }
+
+  connect() {
+    this.formElement = this.element.closest('form')
+    this.formElement.addEventListener('turbo:submit-start', this._start)
+    this.formElement.addEventListener('turbo:submit-end', this._end)
+  }
+
+  disconnect() {
+    this.formElement.removeEventListener('turbo:submit-start', this._start)
+    this.formElement.removeEventListener('turbo:submit-end', this._end)
+  }
+
+  start() {
+    this.formElement.classList.add('is-pending')
+    this.startedAt = Date.now()
+  }
+
+  async end(event) {
+    // still disabled
+    this.element.disabled = true
+
+    // on an UX standpoint, we want to show the pending state for a short time to avoid flickering
+    // if the submit (call to the server) took less than 800ms, we wait for 800ms to show the pending state
+    if (Date.now() - this.startedAt < 800) await sleep(800)
+
+    this.formElement.classList.remove('is-pending')
+    this.formElement.classList.add(event.detail.success ? 'is-success' : 'is-error')      
+    
+    // wait for 2 seconds and then remove the success or error class and add the default class
+    await sleep(1600)
+    
+    this.formElement.classList.remove(event.detail.success ? 'is-success' : 'is-error')
+    this.formElement.classList.add('is-default')
+    this.element.disabled = false
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/transition_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+import { enter, leave } from "el-transition"
+
+export default class extends Controller {
+  static targets = ['revealable']
+
+  enter() {
+    enter(this.revealableTarget)
+  }
+
+  leave() {
+    leave(this.revealableTarget)
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/uikit.js

@@ -0,0 +1,39 @@
+import { application } from  "maglev-controllers/application"
+
+import DropdownController from "uikit-controllers/dropdown_component/dropdown_controller"
+import TabsController from "uikit-controllers/tabs_component/tabs_controller"
+import DeviceTogglerController from "uikit-controllers/device_toggler_component/device_toggler_controller"
+import ModalController from "uikit-controllers/modal_component/modal_controller"
+import SearchFormController from "uikit-controllers/form/search_form_controller"
+import ImageFieldController from "uikit-controllers/form/image_field_controller"
+import ImageLibraryUploaderController from "uikit-controllers/image_library/uploader_controller"
+import CollapsibleController from "uikit-controllers/collapsible/collapsible_controller"
+import PageLayoutController from "uikit-controllers/page_layout_component/page_layout_controller"
+import SectionToolbarController from "uikit-controllers/section_toolbar/section_toolbar_controller"
+import ComboboxController from "uikit-controllers/form/combobox_controller"
+import LinkController from "uikit-controllers/form/link_controller"
+import RichtextController from "uikit-controllers/form/richtext_controller"
+import ColorFieldController from "uikit-controllers/form/color_field_controller"
+import TextFieldController from "uikit-controllers/form/text_field_controller"
+import SelectController from "uikit-controllers/form/select_controller"
+import CheckboxController from "uikit-controllers/form/checkbox_controller"
+import IconFieldController from "uikit-controllers/form/icon_field_controller"
+
+application.register("uikit-dropdown", DropdownController)
+application.register("uikit-tabs", TabsController)
+application.register("uikit-device-toggler", DeviceTogglerController)
+application.register("uikit-modal", ModalController)
+application.register("uikit-search-form", SearchFormController)
+application.register("uikit-image-library-uploader", ImageLibraryUploaderController)
+application.register("uikit-collapsible", CollapsibleController)
+application.register("uikit-page-layout", PageLayoutController)
+application.register("uikit-section-toolbar", SectionToolbarController)
+application.register("uikit-form-text-field", TextFieldController)
+application.register("uikit-form-image-field", ImageFieldController)
+application.register("uikit-form-combobox", ComboboxController)
+application.register("uikit-form-link", LinkController)
+application.register("uikit-form-richtext", RichtextController)
+application.register("uikit-form-color-field", ColorFieldController)
+application.register("uikit-form-select", SelectController)
+application.register("uikit-form-checkbox", CheckboxController)
+application.register("uikit-form-icon-field", IconFieldController)

data/app/assets/javascripts/maglev/editor/controllers/utils.js

@@ -0,0 +1,10 @@
+export const isSamePath = (targetPath) => {
+  const current = new URL(window.location.href)
+  const target  = new URL(targetPath, window.location.origin)
+
+  return current.pathname === target.pathname
+}
+
+export const sleep = (ms) => {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}

data/app/assets/javascripts/maglev/editor/index.js

@@ -0,0 +1,66 @@
+import "@hotwired/turbo-rails"
+import "maglev-controllers"
+import { PageRenderer, StreamActions } from '@hotwired/turbo'
+
+console.log('Maglev Editor v2 ⚡️')
+
+// We need to set the content locale in the headers for each Turbo request
+document.addEventListener("turbo:before-fetch-request", (event) => {
+  const { fetchOptions } = event.detail
+  const contentLocale = document.querySelector("meta[name=content-locale]").content
+  fetchOptions.headers["X-MAGLEV-LOCALE"] = contentLocale
+});
+
+// This is a hack to prevent the view transition from being triggered when clicking on a link with the same pathname and search
+document.addEventListener("click", (event) => {
+  const link = event.target.closest("a[href]")
+  if (!link) return
+
+  const current = new URL(window.location.href)
+  const target  = new URL(link.href, window.location.origin)
+
+  if (current.pathname === target.pathname && current.search === target.search) {
+    link.dataset.turboAction = "replace"
+  }
+})
+
+// iFrames will always be reloaded even if we mark them as turbo-permanent. 
+// In the context of the Editor, the workaround is to replace the content of another DIV (#root) 
+// instead of the body and put the preview iframe as a sibling of the root DIV.
+PageRenderer.prototype.assignNewBody = function() {
+  const body = document.querySelector("#root")
+  const el   = this.newElement.querySelector("#root")
+
+  // replace all the data attributes of the BODY tag with the data attributes of the newElement
+  // This is because the BODY tag carries the current page id in one of the controller values
+  const bodyDataAttributes = document.body.dataset
+  const newElementDataAttributes = this.newElement.dataset
+  Object.keys(newElementDataAttributes).forEach(key => {
+    bodyDataAttributes[key] = newElementDataAttributes[key]
+  })
+
+  // now replace the "body" with the newElement
+  if (body && el) {
+    body.replaceWith(el)
+    return
+  } else if (document.body && this.newElement instanceof HTMLBodyElement) {
+    document.body.replaceWith(this.newElement)
+  } else {
+    document.documentElement.appendChild(this.newElement)
+  }
+}
+
+// Custom stream actions
+ 
+StreamActions.console_log = function() {
+  const message = this.getAttribute("message")
+  console.log(message)
+}
+
+StreamActions.dispatch_event = function() {
+  const type = this.getAttribute("type")
+  const payload = this.getAttribute("payload")
+  console.log('dispatchEvent', type, payload, `dispatcher:${type}`)
+  const event = new CustomEvent(`dispatcher:${type}`, { detail: JSON.parse(payload) })
+  window.dispatchEvent(event)
+}

data/app/assets/stylesheets/maglev/application.css

@@ -13,3 +13,91 @@
  *= require_tree .
  *= require_self
  */
+
+@keyframes slide-out {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
+html[data-turbo-visit-direction="forward"]::view-transition-old(page-layout),
+html[data-turbo-visit-direction="back"]::view-transition-old(page-layout),
+html[data-turbo-visit-direction="forward"]::view-transition-old(expanded-page-layout),
+html[data-turbo-visit-direction="back"]::view-transition-old(expanded-page-layout) {
+  animation: 0.2s cubic-bezier(0.55, 0, 0.1, 1) both slide-out;
+}
+
+html[data-turbo-visit-direction="forward"]::view-transition-new(page-layout),
+html[data-turbo-visit-direction="back"]::view-transition-new(page-layout),
+html[data-turbo-visit-direction="forward"]::view-transition-new(expanded-page-layout),
+html[data-turbo-visit-direction="back"]::view-transition-new(expanded-page-layout) {
+  animation: 0.2s cubic-bezier(0.55, 0, 0.1, 1) both slide-in;
+}
+
+html[data-page-layout-vt-pair="already-present"]::view-transition-old(page-layout),
+html[data-page-layout-vt-pair="already-present"]::view-transition-old(expanded-page-layout),
+html[data-page-layout-vt-pair="already-present"]::view-transition-new(page-layout),
+html[data-page-layout-vt-pair="already-present"]::view-transition-new(expanded-page-layout) {
+  animation-duration: 0.3s !important;
+}
+
+::view-transition-group(sidebar) {
+  z-index: 20;
+}
+
+::view-transition-group(expanded-page-layout) {
+  z-index: 30;
+}
+
+::view-transition-group(page-preview) { 
+  transform-origin: right center; 
+}
+
+#page-layout[data-not-expanded] {
+  view-transition-name: page-layout;
+}
+
+#page-layout[data-expanded] {
+  view-transition-name: expanded-page-layout;
+}
+
+#app-layout-sidebar {
+  view-transition-name: sidebar;
+}
+
+
+/* Disable animations when user has reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none !important;
+}
+
+/* Page Preview animation */
+
+/* couldn't get this done in Tailwind custom classes */
+#page-preview {
+  transform: translateX(var(--page-preview-transform-x, 0px)) scale(var(--page-preview-scale-ratio, 1)); 
+  height: calc(100% * 1 / 1 / var(--page-preview-scale-ratio, 1));
+  width: var(--page-preview-width, 100%);
+}

data/app/{frontend/editor/design/components/rich-text-editor.scss → assets/stylesheets/maglev/tailwind.css.erb}

@@ -1,21 +1,36 @@
-.rich-text-editor {
-  position: relative;
-
-  @for $i from 1 through 20 {
-    &[data-rows='#{$i}'] {
-      .ProseMirror {
-        height: calc(#{$i} * 1.75rem);
-        overflow: auto;
-      }
-    }
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap");
+
+@import "tailwindcss";
+
+@theme {
+  --font-nunito: "Nunito Sans", sans-serif;
+
+  --color-editor-primary: var(--editor-color-primary);
+}
+
+@source "../../../";  
+<% Maglev.config.tailwindcss_folders.each do |folder| %>
+@source "<%= folder %>";
+<% end %>
+
+@utility bg-checkerboard {
+  background-image: linear-gradient(45deg, #F2F2F2 25%, transparent 25%), linear-gradient(-45deg, #F2F2F2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #F2F2F2 75%), linear-gradient(-45deg, transparent 75%, #F2F2F2 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+@utility capitalize-first {
+  &::first-letter {
+    text-transform: uppercase;
   }
+}
 
+@layer base {
+  /* Tiptap / ProseMirror */
   .ProseMirror {
-    @apply py-2 px-3 rounded bg-gray-100 text-gray-900;
+    @apply block py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500;
 
-    &:focus {
-      @apply outline-none focus:ring;
-    }
+    @apply h-[calc(var(--number-of-rows)*var(--spacing)*8)] overflow-auto leading-6; 
 
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -177,4 +192,4 @@
       cursor: col-resize;
     }
   }
-}
+}

data/app/components/maglev/editor/setting_registry.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module SettingRegistry
+      def self.instance
+        @instance ||= Instance.new(components: default_components)
+      end
+
+      # rubocop:disable Metrics/MethodLength
+      def self.default_components
+        {
+          text: proc { |definition| instance.text_field_klass(definition) },
+          image: Maglev::Editor::Settings::Image::ImageComponent,
+          select: Maglev::Editor::Settings::Select::SelectComponent,
+          link: Maglev::Editor::Settings::Link::LinkComponent,
+          color: Maglev::Editor::Settings::Color::ColorComponent,
+          checkbox: Maglev::Editor::Settings::Checkbox::CheckboxComponent,
+          collection_item: Maglev::Editor::Settings::CollectionItem::CollectionItemComponent,
+          icon: Maglev::Editor::Settings::Icon::IconComponent,
+          divider: Maglev::Editor::Settings::Divider::DividerComponent,
+          hint: Maglev::Editor::Settings::Hint::HintComponent
+        }
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      class Instance
+        attr_reader :components
+
+        def initialize(components: {})
+          @components = components
+        end
+
+        def register(type, component_klass_or_proc)
+          components[type.to_sym] = component_klass_or_proc
+        end
+
+        def fetch(definition)
+          klass_or_proc = components.fetch(definition.type.to_sym, nil)
+          klass = klass_or_proc.is_a?(Proc) ? klass_or_proc.call(definition) : klass_or_proc
+
+          return Maglev::Editor::Settings::BaseComponent if klass.nil?
+
+          klass
+        end
+
+        def text_field_klass(definition)
+          if definition.options[:html]
+            Maglev::Editor::Settings::Text::RichtextComponent
+          elsif definition.options[:nb_rows].to_i > 1
+            Maglev::Editor::Settings::Text::TextareaComponent
+          else
+            Maglev::Editor::Settings::Text::TextComponent
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/base_component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      class BaseComponent < ViewComponent::Base
+        attr_reader :definition, :value, :paths, :input_scope, :i18n_scope
+
+        def initialize(definition:, value:, paths:, scope:)
+          @definition = definition
+          @value = value
+          @paths = paths
+          @input_scope = scope[:input]
+          @i18n_scope = scope[:i18n]
+
+          after_initialize
+        end
+
+        def input_name
+          "#{input_scope}[#{definition.id}]"
+        end
+
+        def input_source
+          input_name.parameterize.underscore
+        end
+
+        def label
+          ::I18n.t("#{i18n_scope}.settings.#{definition.id}", default: definition.label)
+        end
+
+        def placeholder
+          ::I18n.t("#{i18n_scope}.settings.#{definition.id}_placeholder", default: default_placeholder)
+        end
+
+        def default_placeholder
+          ::I18n.t("maglev.editor.settings.#{definition.type}.placeholder")
+        end
+
+        def call
+          content_tag(:div, "Unknown setting type: #{definition.type} / #{definition.options}",
+                      class: 'bg-red-500 text-white p-4 rounded-md')
+        end
+
+        def fetch_path(name, context = {})
+          path_or_proc = paths.fetch(name, nil)
+          path_or_proc.is_a?(Proc) ? path_or_proc.call(definition, context) : path_or_proc
+        end
+
+        def after_initialize
+          # to be overridden by subclasses
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/checkbox/checkbox_component.html.erb

@@ -0,0 +1,16 @@
+<%= tag.div(
+  data: {
+    controller: "editor-setting",
+    editor_input_setting_id_value: definition.id,
+    editor_input_setting_type_value: definition.type,
+    action: %(
+      uikit-form-checkbox:change->editor-setting#change
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::CheckboxComponent.new(
+    label: label,
+    name: input_name,
+    checked: value
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/checkbox/checkbox_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Checkbox
+        class CheckboxComponent < Maglev::Editor::Settings::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/collection_item/collection_item_component.html.erb

@@ -0,0 +1,25 @@
+<%= tag.div(
+  data: {
+    controller: 'editor-setting',
+    editor_setting_setting_id_value: definition.id,
+    editor_setting_setting_type_value: definition.type,
+    editor_setting_core_controller_name_value: 'uikit-form-combobox',
+    action: %(
+      uikit-form-combobox:change->editor-setting#change
+      hashchange@window->editor-setting#focus
+    )
+  }
+) do %>
+  <%= render(Maglev::Uikit::Form::ComboboxComponent.new(
+    label: label,
+    name: input_name,
+    search_path: fetch_path(:collection_items_path),
+    options: {
+      placeholder: placeholder,
+      spread_fields: true,
+      clearable: true,
+      value: selected_item_id,
+      selected_label: selected_item_label
+    }
+  )) %>
+<% end %>

data/app/components/maglev/editor/settings/collection_item/collection_item_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module CollectionItem
+        class CollectionItemComponent < Maglev::Editor::Settings::BaseComponent
+          def selected_item_id
+            value&.fetch('id', nil)
+          end
+
+          def selected_item_label
+            value&.fetch('label', nil)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/color/color_component.html.erb

@@ -0,0 +1,17 @@
+<%= tag.div(
+  data: {
+    controller: "editor-setting",
+    editor_setting_setting_id_value: definition.id,
+    editor_setting_setting_type_value: definition.type,
+    action: "uikit-form-color-field:change->editor-setting#change"
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::ColorFieldComponent.new(
+    name: input_name,
+    options: {
+      label: label,  
+      value: value,
+      presets: definition.options[:presets],      
+    }
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/color/color_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Color
+        class ColorComponent < Maglev::Editor::Settings::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/divider/divider_component.html.erb

@@ -0,0 +1,12 @@
+<div class="relative mt-6 mb-4">
+  <div aria-hidden="true" class="absolute inset-0 flex items-center">
+    <div class="w-full border-t border-gray-200"></div>
+  </div>
+  <% if with_hint? %>
+    <div class="relative flex justify-center">
+      <span class="bg-white px-3 leading-6 text-gray-800 text-sm">
+        <%= label %>
+      </span>
+    </div>
+  <% end %>
+</div>

data/app/components/maglev/editor/settings/divider/divider_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Divider
+        class DividerComponent < Maglev::Editor::Settings::BaseComponent
+          def with_hint?
+            definition.options[:with_hint]
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/hint/hint_component.html.erb

@@ -0,0 +1,3 @@
+<div class="my-2 text-gray-600 text-sm prose prose-sm">
+  <%= label %>
+</div>

data/app/components/maglev/editor/settings/hint/hint_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Hint
+        class HintComponent < Maglev::Editor::Settings::BaseComponent
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/icon/icon_component.html.erb

@@ -0,0 +1,21 @@
+<%= tag.div(
+  data: {
+    controller: 'editor-setting',
+    editor_setting_setting_id_value: definition.id,
+    editor_setting_setting_type_value: definition.type,
+    editor_setting_core_controller_name_value: 'uikit-form-icon-field',
+    action: %(
+      uikit-form-icon-field:change->editor-setting#change
+      hashchange@window->editor-setting#focus
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::IconFieldComponent.new(    
+    name: input_name,
+    search_path: search_path,
+    options: {
+      label: label,
+      value: value,
+    }
+  ) %>
+<% end %>

data/app/components/maglev/editor/settings/icon/icon_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module Settings
+      module Icon
+        class IconComponent < Maglev::Editor::Settings::BaseComponent
+          def search_path
+            fetch_path(:icons_path, { source: input_source })
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/editor/settings/image/image_component.html.erb

@@ -0,0 +1,26 @@
+<%= tag.div(
+  data: {
+    controller: 'editor-setting',
+    editor_setting_setting_id_value: definition.id,
+    editor_setting_setting_type_value: definition.type,
+    editor_setting_core_controller_name_value: 'uikit-form-image-field',
+    action: %(
+      uikit-form-image-field:change->editor-setting#change
+      hashchange@window->editor-setting#focus
+    )
+  }
+) do %>
+  <%= render Maglev::Uikit::Form::ImageFieldComponent.new(    
+    name: input_name,
+    search_path: search_path,
+    options: {
+      label: label,
+      value: value,
+      spread_fields: true
+    },    
+    alt_text: {
+      name: alt_text_input_name,
+      value: value&.fetch(:alt_text, nil)
+    }    
+  ) %>
+<% end %>