turbo_boost-elements 0.0.3 → 0.0.4

data/app/javascript/elements/toggle_target_element.js

@@ -1,4 +1,5 @@
 import TurboBoostElement from './turbo_boost_element'
+import './toggle_target_focus'
 
 export default class ToggleTargetElement extends TurboBoostElement {
   connectedCallback () {
@@ -55,9 +56,7 @@ export default class ToggleTargetElement extends TurboBoostElement {
   focus () {
     clearTimeout(this.focusTimeout)
     this.focusTimeout = setTimeout(() => {
-      if (!this.focusElement) return
-      this.focusElement.focus()
-      this.focusElement.scrollIntoView({ block: 'center', behavior: 'smooth' })
+      if (this.focusElement) this.focusElement.focus()
     }, 50)
   }
 

data/app/javascript/elements/toggle_target_focus.js

@@ -0,0 +1,77 @@
+function deactivateTrixAttributes (editor) {
+  const attributes = [
+    'bold',
+    'bullet',
+    'code',
+    'heading1',
+    'href',
+    'italic',
+    'number',
+    'quote',
+    'strike'
+  ]
+  attributes.forEach(name => editor.deactivateAttribute(name))
+}
+
+function focusTrixEditorElement (element) {
+  if (element.value.length === 0) return
+
+  const editor = element.editor
+
+  // move cursor to the end
+  let lastRange = []
+  while (
+    lastRange[0] !== editor.getSelectedRange()[0] &&
+    lastRange[1] !== editor.getSelectedRange()[1]
+  ) {
+    lastRange = editor.getSelectedRange()
+    editor.moveCursorInDirection('forward')
+  }
+
+  // insert an empty char and select it
+  editor.insertString(' ')
+  editor.moveCursorInDirection('forward')
+  editor.setSelectedRange([lastRange[1], editor.getSelectedRange()[1]])
+
+  // deactivate all trix features for the selection
+  deactivateTrixAttributes(editor)
+
+  // move cursor to end and collapse the selection
+  editor.setSelectedRange([
+    editor.getSelectedRange()[1],
+    editor.getSelectedRange()[1]
+  ])
+}
+
+function shouldEnhanceFocus (element) {
+  return (
+    element.closest('turbo-boost-toggle-target') &&
+    element.tagName.match(/^input|textarea|trix-editor$/i)
+  )
+}
+
+function enhanceFocus (element) {
+  const trixEditorElement = element.closest('trix-editor')
+
+  try {
+    if (trixEditorElement) {
+      focusTrixEditorElement(trixEditorElement)
+    } else {
+      element.selectionStart = element.selectionEnd = element.value.length
+    }
+  } finally {
+    setTimeout(
+      () => element.scrollIntoView({ block: 'center', behavior: 'smooth' }),
+      100
+    )
+  }
+}
+
+addEventListener(
+  'focus',
+  event => {
+    if (shouldEnhanceFocus(document.activeElement))
+      enhanceFocus(document.activeElement)
+  },
+  true
+)

data/lib/turbo_boost/elements/version.rb

@@ -2,6 +2,6 @@
 
 module TurboBoost
   module Elements
-    VERSION = "0.0.3"
+    VERSION = "0.0.4"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-06 00:00:00.000000000 Z
+date: 2023-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -146,6 +146,7 @@ files:
 - app/javascript/devtools/toggle.js
 - app/javascript/elements/index.js
 - app/javascript/elements/toggle_target_element.js
+- app/javascript/elements/toggle_target_focus.js
 - app/javascript/elements/toggle_trigger_element.js
 - app/javascript/elements/turbo_boost_element.js
 - app/javascript/index.js