maglevcms 2.1.0 → 3.0.0.beta1

data/app/components/maglev/uikit/form/richtext_controller.js

@@ -0,0 +1,248 @@
+import { Controller } from '@hotwired/stimulus'
+import { Editor, Document, Text, Paragraph, Heading, Blockquote, CodeBlock, History, Bold, Italic, Underline, Strike, Superscript, HardBreak, Link, ListItem, BulletList, OrderedList } from 'tiptap'
+
+const MaglevLink = Link.extend({
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+        parseHTML(element) {
+          return element.getAttribute('href')
+        },
+      },
+      target: {
+        default: this.options.HTMLAttributes.target,
+      },
+      rel: {
+        default: this.options.HTMLAttributes.rel,
+      },
+      class: {
+        default: this.options.HTMLAttributes.class,
+      },
+      'maglev-link-type': {
+        default: 'url'
+      },
+      'maglev-link-id': {
+        default: null,
+      },
+      'maglev-section-id': {
+        default: null,
+      },
+    }
+  },
+})
+
+export default class extends Controller {
+  static targets = ['editor', 'hiddenInput', 'button', 'blockButton']
+  static values = { inputName: String, content: String, lineBreak: Boolean, editLinkPath: String }
+
+  connect() {
+    this.buildEditor()
+  }
+
+  buildEditor() {
+    this.editor = new Editor({
+      element: this.editorTarget,
+      extensions: this.buildExtensions(),
+      content: this.contentValue,
+      onSelectionUpdate: ({ editor }) => {
+        // Simple actions
+        this.toggleButtonState('bold', editor.isActive('bold'))        
+        this.toggleButtonState('italic', editor.isActive('italic'))
+        this.toggleButtonState('underline', editor.isActive('underline'))
+        this.toggleButtonState('strikethrough', editor.isActive('strikethrough'))
+        this.toggleButtonState('superscript', editor.isActive('superscript'))
+        this.toggleButtonState('unordered_list', editor.isActive('bulletList'))
+        this.toggleButtonState('ordered_list', editor.isActive('orderedList'))
+        this.toggleButtonState('link', editor.isActive('link'))
+
+        // Block buttons
+        this.toggleBlockButtonState()
+      },
+      onUpdate: ({ editor }) => {
+        const content = this.getHTML(editor)
+        this.hiddenInputTarget.value = content
+        this.dispatch('change', { detail: { value:content } })
+      }
+    })
+    this.toggleBlockButtonState()
+  }
+
+  disconnect() {
+    this.editor?.destroy()
+    this.editor = null
+  }
+
+  buildExtensions() {
+    const extensions = [
+      Document, Text, Paragraph, History, Bold, Italic, Underline, Strike, Superscript,
+      MaglevLink.configure({ openOnClick: false, target: null }),
+    ]
+    // Line break (ie: <br> instead of <p>)
+    if (this.lineBreakValue) {
+      const customHardBreak = HardBreak.extend({
+        addKeyboardShortcuts () {
+          return {
+            Enter: () => this.editor.commands.setHardBreak()
+          }
+        }
+      })
+      extensions.push(customHardBreak)
+    } else {
+      extensions.push(
+        Blockquote, CodeBlock, ListItem, BulletList, OrderedList,
+        Heading.configure({ levels: [2, 3, 4] })
+      )
+    }
+    return extensions
+  }
+
+  getHTML(editor) {
+    const content = editor.getHTML()
+    return this.lineBreakValue ? content.replace(/<\/?p>/g, '') : content      
+  }
+
+  focus() {
+    this.editor.commands.focus('end')
+  }
+
+  // Mark buttons
+
+  toggleBold(event) {
+    this.editor.chain().focus().toggleBold().run()
+    event.currentTarget.classList.toggle('active')
+  }
+
+  toggleItalic(event) {
+    this.editor.chain().focus().toggleItalic().run()
+    event.currentTarget.classList.toggle('active')
+  }
+
+  toggleUnderline(event) {
+    this.editor.chain().focus().toggleUnderline().run()
+    event.currentTarget.classList.toggle('active')
+  }
+
+  toggleStrikethrough(event) {
+    this.editor.chain().focus().toggleStrike().run()
+    event.currentTarget.classList.toggle('active')
+  }
+
+  toggleSuperscript(event) {
+    this.editor.chain().focus().toggleSuperscript().run()
+    event.currentTarget.classList.toggle('active')
+  }
+
+  toggleUnorderedList(event) {
+    this.editor.commands.toggleBulletList()
+    event.currentTarget.classList.toggle('active', this.editor.isActive('bulletList'))
+    this.toggleButtonState('ordered_list', false)
+  }
+
+  toggleOrderedList(event) {
+    this.editor.chain().focus().toggleOrderedList().run()
+    event.currentTarget.classList.toggle('active', this.editor.isActive('orderedList'))
+    this.toggleButtonState('unordered_list', false)
+  }
+
+  toggleParagraph() {
+    this.editor.commands.setParagraph()
+    this.toggleBlockButtonState()
+  }
+
+  toggleHeading2() {
+    this.editor.commands.toggleHeading({ level: 2 })
+    this.toggleBlockButtonState()
+  }
+
+  toggleHeading3() {
+    this.editor.commands.toggleHeading({ level: 3 })
+    this.toggleBlockButtonState()
+  }
+
+  toggleHeading4() {
+    this.editor.commands.toggleHeading({ level: 4 })
+    this.toggleBlockButtonState()
+  }
+
+  toggleBlockquote() {
+    this.editor.commands.toggleBlockquote()
+    this.toggleBlockButtonState()
+  }
+
+  toggleCodeBlock() {
+    this.editor.commands.toggleCodeBlock()
+    this.toggleBlockButtonState()
+  }
+
+  toggleButtonState(name, isActive) {
+    this.buttonTargets.forEach(button => {
+      if (button.dataset.name !== name) return
+      button.classList.toggle('active', isActive)
+    })
+  }
+
+  toggleBlockButtonState() {
+    if (!this.hasBlockButtonTarget) return
+
+    let name = 'paragraph'
+    if (this.editor.isActive('paragraph')) {
+      name = 'paragraph'
+    } else if (this.editor.isActive('heading', { level: 2 })) {
+      name = 'heading_2'
+    } else if (this.editor.isActive('heading', { level: 3 })) {
+      name = 'heading_3'
+    } else if (this.editor.isActive('heading', { level: 4 })) {
+      name = 'heading_4'
+    } else if (this.editor.isActive('blockquote')) {
+      name = 'blockquote'
+    } else if (this.editor.isActive('codeBlock')) {
+      name = 'code_block'
+    }
+    this.blockButtonTarget.querySelectorAll(`[data-block-button-name]`).forEach(button => {
+      button.classList.toggle('hidden', button.dataset.blockButtonName !== name)
+    })
+  }
+
+  openLinkModal(event) {
+    console.log('toggleLink', event)
+    const url = new URL(this.editLinkPathValue, window.location.origin)
+    const link = this.editor.getAttributes('link')
+
+    console.log('toggleLink,build link from', link)
+    
+    url.searchParams.set('input_name', this.inputNameValue)
+    url.searchParams.set('link[href]', link.href ?? '')
+    url.searchParams.set('link[link_id]', link['maglev-link-id'])
+    url.searchParams.set('link[section_id]', link['maglev-section-id'])
+    url.searchParams.set('link[open_new_window]', link.target === '_blank')
+
+    // get or guess the link type
+    let linkType = link['maglev-link-type']
+    if (!linkType) linkType = link.href?.startsWith('mailto:') ? 'email' : 'url'
+    url.searchParams.set('link[link_type]', linkType)
+    
+    // email
+    if (linkType === 'email')
+      url.searchParams.set('link[email]', link.href.replace('mailto:', ''))
+    
+    Turbo.visit(url, { frame: 'modal' })
+  }
+
+  setLink(event) {
+    const link = JSON.parse(event.detail)
+    console.log('setLink, link=', link)
+    this.editor.commands.setLink({ 
+      href: link.href, 
+      target: link.open_new_window ? '_blank' : '', 
+      'maglev-link-type': link.link_type,
+      'maglev-link-id': link.link_id,
+      'maglev-section-id': link.section_id
+    })
+  }
+
+  unsetLink() {
+    this.editor.commands.unsetLink()
+    this.toggleButtonState('link', false)
+  }
+}

data/app/components/maglev/uikit/form/search_form_component.html.erb

@@ -0,0 +1,24 @@
+<form 
+  action="<%= search_path %>"
+  class="<%= class_names %>"
+  data-controller="uikit-search-form"
+  <%= tag.attributes(data: data) %>
+>
+  <%= content if content? %>
+  <button type="submit" class="mr-2">
+    <%= render Maglev::Uikit::IconComponent.new(name: 'search', size: '1.25rem', class_names: 'text-gray-500') %>
+  </button>
+  <%= tag.input(
+    type: 'text',
+    name: name,
+    value: value,
+    placeholder: placeholder,
+    aria_label: placeholder,
+    class: 'block w-full border-0 bg-transparent focus:outline-none placeholder-gray-500',
+    data: { uikit_search_form_target: 'input' } 
+  ) %>
+  
+  <button type="button" class="<%= clear_button_class_names %>" data-action="click->uikit-search-form#clear" data-uikit-search-form-target="clearButton">
+    <%= render Maglev::Uikit::IconComponent.new(name: 'close', size: '1.25rem', class_names: 'text-gray-500') %>    
+  </button>
+</form>

data/app/components/maglev/uikit/form/search_form_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class SearchFormComponent < Maglev::Uikit::BaseComponent
+        attr_reader :name, :value, :search_path, :placeholder, :data
+
+        def initialize(name:, value:, search_path:, options: {})
+          @name = name
+          @value = value
+          @search_path = search_path
+          @placeholder = options[:placeholder]
+          @class_names = options[:class_names]
+          @data = options[:data]
+        end
+
+        def class_names
+          class_variants(
+            base: %(
+              inline-flex items-center py-2 px-4 rounded bg-gray-100 text-gray-800
+              has-[:focus]:ring has-[:focus]:ring-inset has-[:focus]:ring-2 has-[:focus]:ring-editor-primary/50
+            )
+          ).render(class: @class_names || '')
+        end
+
+        def clear_button_class_names(...)
+          class_variants(
+            base: 'ml-1 text-gray-500 cursor-pointer',
+            variants: {
+              invisible: 'invisible'
+            }
+          ).render(invisible: value_size.zero?)
+        end
+
+        def value_size
+          value&.size || 0
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/search_form_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus'
+import { useDebounce } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['input', 'clearButton']
+  static debounces = ['handleInput']
+
+  connect() {
+    useDebounce(this)
+    this._handleInput = this.handleInput.bind(this)
+    this.inputTarget.addEventListener('keyup', this._handleInput)
+  }
+
+  disconnect() {
+    this.inputTarget.removeEventListener('keyup', this._handleInput)
+  }
+
+  handleInput(event) {
+    if (event.target.value.length > 0) {
+      this.clearButtonTarget.classList.remove('invisible')
+    } else {
+      this.clearButtonTarget.classList.add('invisible')
+    }
+  }
+
+  clear() {
+    this.inputTarget.value = ''
+    this.clearButtonTarget.classList.add('invisible')
+    this.element.requestSubmit()
+  }
+}

data/app/components/maglev/uikit/form/select_component.html.erb

@@ -0,0 +1,19 @@
+
+
+<div class="space-y-1 flex flex-col" data-controller="uikit-form-select">
+  <label for="<%= dom_id %>" class="block font-semibold text-gray-800 flex items-center gap-2">
+    <span><%= label %></span>
+    <% if error %>
+      <span class="text-red-700 bg-red-100 text-xs py-1 px-3 rounded"><%= error %></span>
+    <% end %>
+  </label>
+  <div class="grid grid-cols-1">
+    <%= select_tag name, 
+      html_choices, 
+      class: 'col-start-1 row-start-1 w-full appearance-none 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', 
+      **input_tag_options,
+      **html_options
+    %>
+    <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down', size: '1.25rem', class_names: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4') %>    
+  </div>
+</div>

data/app/components/maglev/uikit/form/select_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class SelectComponent < ViewComponent::Base
+        attr_reader :label, :name, :choices, :options, :html_options, :input_data, :input_action
+
+        def initialize(label:, name:, choices:, options: {}, html_options: {})
+          @label = label
+          @name = name
+          @choices = choices
+          @options = options
+          @html_options = html_options
+          @input_data = html_options.delete(:data) || {}
+          @input_action = input_data.delete(:action) || {}
+        end
+
+        def dom_id
+          name.to_s.parameterize.underscore
+        end
+
+        def error
+          options[:error]
+        end
+
+        def input_tag_options
+          {
+            id: dom_id,
+            value: options[:value],
+            **options.slice(:multiple, :disabled, :include_blank, :prompt),
+            data: input_tag_data
+          }
+        end
+
+        def input_tag_data
+          {
+            action: [
+              'change->uikit-form-select#change',
+              **input_action
+            ].join(' '),
+            **input_data
+          }
+        end
+
+        def html_choices
+          helpers.options_for_select(choices, options[:value])
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/select_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  change(event) {
+    this.dispatch('change', { detail: { value: event.target.value } })
+  }
+}

data/app/components/maglev/uikit/form/text_field_component.html.erb

@@ -0,0 +1,26 @@
+<div class="space-y-1 flex flex-col" data-controller="uikit-form-text-field">
+  <label for="<%= dom_id %>" class="block font-semibold text-gray-800 flex items-center gap-2">
+    <span><%= label %></span>
+    <% if error %>
+      <span class="text-red-700 bg-red-100 text-xs py-1 px-3 rounded"><%= error %></span>
+    <% end %>
+  </label>
+  <%= tag.input(
+    id: dom_id,
+    name: name,
+    value: value,
+    type: 'text',
+    placeholder: placeholder,
+    autocomplete: 'off',
+    class: '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',
+    data: {
+      'uikit-form-text-field-target': 'input',
+      action: [
+        'input->uikit-form-text-field#change',
+        **input_action
+      ].join(' '),      
+      **input_data
+    },
+    **html_options
+  ) %>
+</div>

data/app/components/maglev/uikit/form/text_field_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class TextFieldComponent < ViewComponent::Base
+        attr_reader :label, :name, :options, :input_data, :input_action, :html_options
+
+        # options: { value: nil, placeholder: nil, error: nil }
+        # html_options: { data: { attribute: 'value' } }
+        def initialize(label:, name:, options: {}, html_options: {})
+          @label = label
+          @name = name
+          @options = options
+          @html_options = html_options
+          @input_data = html_options.delete(:data) || {}
+          @input_action = input_data.delete(:action) || {}
+        end
+
+        def dom_id
+          name.to_s.parameterize.underscore
+        end
+
+        def value
+          options[:value]
+        end
+
+        def hint
+          options[:hint]
+        end
+
+        def placeholder
+          options[:placeholder]
+        end
+
+        def error
+          options[:error]
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/text_field_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input']
+
+  change(event) {
+    const text = event.target.value
+    this.dispatch('change', { detail: { value: text } })
+  }
+
+  focus() {
+    const input = this.inputTarget
+    const len = input.value.length
+    input.focus()
+    input.setSelectionRange(len, len)
+    input.scrollLeft = input.scrollWidth
+  }
+}

data/app/components/maglev/uikit/form/textarea_component.html.erb

@@ -0,0 +1,43 @@
+<div 
+  class="flex flex-col" 
+  <% if max_length? %>
+  data-controller="uikit-form-text-field max-length"
+  data-max-length-threshold-value="<%= max_length %>"
+  data-max-length-threshold-class-value="text-red-600"
+  data-max-length-default-class-value="text-gray-600"
+  <% else %>
+  data-controller="uikit-form-text-field"
+  <% end %>
+>
+  <label for="<%= dom_id %>" class="block font-semibold text-gray-800 flex justify-between items-center">
+    <div class="gap-2 flex items-center">
+      <span><%= label %></span>
+      <% if error %>
+        <span class="text-red-700 bg-red-100 text-xs py-1 px-3 rounded"><%= error %></span>
+      <% end %>
+    </div>
+    
+    <% if max_length? %>
+      <span class="text-xs" data-max-length-target="counter"><%= num_characters %> / <%= max_length %></span>
+    <% end %>
+  </label>
+
+  <%= content_tag :textarea, value,
+    id: dom_id,
+    class: 'block mt-1 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',
+    name: name,
+    autocomplete: 'off',
+    placeholder: placeholder,
+    rows: rows,
+    data: {
+      'max-length-target': 'input',
+      'uikit-form-text-field-target': 'input',
+      action: [
+        'input->uikit-form-text-field#change',
+        **input_action
+      ].join(' '),      
+      **input_data
+    },
+    **html_options
+  %>
+</div>

data/app/components/maglev/uikit/form/textarea_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class TextareaComponent < ViewComponent::Base
+        attr_reader :label, :name, :options, :input_data, :input_action, :html_options
+
+        # options: { value: nil, rows: 2, max_length: nil }
+        def initialize(label:, name:, options: {}, html_options: {})
+          @label = label
+          @name = name
+          @options = options
+          @input_data = html_options.delete(:data) || {}
+          @input_action = input_data.delete(:action) || {}
+          @html_options = html_options
+        end
+
+        def dom_id
+          name.to_s.parameterize.underscore
+        end
+
+        def placeholder
+          options[:placeholder]
+        end
+
+        def value
+          options[:value]
+        end
+
+        def rows
+          options[:rows]
+        end
+
+        def max_length
+          options[:max_length]
+        end
+
+        def num_characters
+          value.to_s.length
+        end
+
+        def max_length?
+          max_length.present?
+        end
+
+        def error
+          options[:error]
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/icon_button_component/icon_button_component.html.erb

@@ -0,0 +1,3 @@
+<%= button_tag class: button_classes(class: options[:class]), data: options[:data], type: 'button' do %>
+  <%= render Maglev::Uikit::IconComponent.new(name: icon_name, size: "1.15rem") %>
+<% end %>

data/app/components/maglev/uikit/icon_button_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class IconButtonComponent < Maglev::Uikit::BaseComponent
+      attr_reader :icon_name, :options
+
+      def initialize(icon_name: nil, **options)
+        @icon_name = icon_name
+        @options = options
+      end
+
+      def button_classes(...)
+        helpers.maglev_icon_button_classes(...)
+      end
+    end
+  end
+end