bullet_train-fields 1.19.2 → 1.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ccda16d2b5d1134b7f81212578059145485efab865ef9f19e5ece86dcc8f41c
-  data.tar.gz: bb472c52204857f44d12232343204807c3a3667b70019b1a1a283262469d1aa1
+  metadata.gz: 2656a1e9663726891c41452518e8ca12907980b07f1e085597c2591a454cb361
+  data.tar.gz: 212e25792745b3fda7da34b55a235526aa0979d75832d7294651173388920263
 SHA512:
-  metadata.gz: 73ed64e6d61fd2df3dd25d8d7853ff7d62c3e5f946274604f1dd1eecb343343f17e1b093eba57bfc29918d55a0ea02dbaf3abeafd1a0d1798f7d6e7104ef274e
-  data.tar.gz: 8abe487795726a1a89030633972542ba7b63244786070e8797659f4d0bdd10aa18db5db86d34b0de1d5582eae14b81310b3fbd42973d0eaea12ab7a71bf51942
+  metadata.gz: 8ff7f8a7f606e0d1811e93412a27a604332e350355c696fa9df72e00b203367bfa54887b7eb38ab8fd3a2a701171c72ea7da543d9de9e9a94ff2aa68011893ce
+  data.tar.gz: 1e77d47ca39501d6c2545877f0a303416d4005382989531e9d90dda7aadb6c00e2c88b6a034d75adefb60f32ed7ef896f4bef9cc0ac72ea5acb0d049976ba239

data/app/javascript/controllers/fields/code_editor_controller.js

@@ -0,0 +1,182 @@
+import { Controller } from '@hotwired/stimulus'
+import { version as MONACO_VERSION } from 'monaco-editor/package.json'
+
+const MONACO_LOADED_EVENT = 'monaco:loaded'
+const MONACO_ERROR_EVENT = 'monaco:error'
+export default class extends Controller {
+  static targets = ['plainField', 'codeField']
+
+  static values = {
+    language: {
+      type: String,
+      default: 'javascript' // for all supported languages, see https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages
+    },
+    themeLight: {
+      type: String,
+      default: 'vs'
+    },
+    themeDark: {
+      type: String,
+      default: 'vs-dark'
+    },
+    monacoConfig: {
+      type: Object,
+      default: {}
+    }
+  }
+
+  connect() {
+    this.loadEditorFramework()
+    this.watchColorScheme()
+  }
+
+  disconnect() {
+    this.teardownCodeEditor()
+    this.unwatchColorScheme()
+  }
+
+  initCodeEditor() {
+    if (!this.hasPlainFieldTarget || !this.hasCodeFieldTarget) return
+    if (!this.monacoInstance) return
+
+    this.codeEditor = this.monacoInstance.editor.create(this.codeFieldTarget, {
+      value: this.plainFieldTarget.value,
+      language: this.languageValue,
+      ...this.editorConfig
+    })
+
+    this.codeEditor.onDidChangeModelContent(() => {
+      this.updatePlainField()
+    }) // teardownCodeEditor should properly unregister this event handler
+  }
+
+  updatePlainField() {
+    this.plainFieldTarget.value = this.codeEditor.getValue()
+    this.plainFieldTarget.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+
+  get editorConfig() {
+    return {
+      automaticLayout: true,
+      theme: this.theme,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      ...this.monacoConfigValue
+    }
+  }
+
+  showPlainField() {
+    this.plainFieldTarget.classList.remove('hidden')
+    this.codeFieldTarget.classList.add('hidden')
+  }
+
+  teardownCodeEditor() {
+    if (this.codeEditor) {
+      this.codeEditor.dispose()
+      this.codeEditor = null
+    }
+    document.removeEventListener(MONACO_LOADED_EVENT, this.initCodeEditor)
+    document.removeEventListener(MONACO_ERROR_EVENT, this.showPlainField)
+  }
+
+  loadEditorFramework() {
+    if (!this.hasPlainFieldTarget || !this.hasCodeFieldTarget) return
+
+    // Listen for Monaco load event
+    this.initCodeEditor = this.initCodeEditor.bind(this)
+    this.showPlainField = this.showPlainField.bind(this)
+    document.addEventListener(MONACO_LOADED_EVENT, this.initCodeEditor)
+    document.addEventListener(MONACO_ERROR_EVENT, this.showPlainField)
+    try {
+      if (this.monacoInstance) {
+        this.initCodeEditor()
+        return
+      }
+
+      this.ensureMonacoLoaded()
+    } catch (error) {
+      console.error('Monaco failed to load:', error)
+      this.showPlainField()
+    }
+  }
+
+  // if you want to include the monaco editor directly, overload this method in the subclass
+  // and monacoInstance() getter
+  ensureMonacoLoaded() {
+    // Check for existing script
+    const existingScript = document.querySelector('script[data-monaco-loader]')
+    if (!existingScript) {
+      const script = document.createElement('script')
+      script.src = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}/min/vs/loader.js`
+      script.dataset.monacoLoader = ''
+
+      script.onload = () => {
+        require.config({
+          paths: {
+            vs: `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}/min/vs`
+          }
+        })
+
+        require(['vs/editor/editor.main'], (monaco) => {
+          window.monacoInstance = monaco
+          document.dispatchEvent(new Event(MONACO_LOADED_EVENT))
+        })
+      }
+
+      script.onerror = () => {
+        try {
+          document.dispatchEvent(new Event(MONACO_ERROR_EVENT))
+        } catch (error) {
+          console.warn(
+            'script failed to load and code editor is no longer available',
+            error
+          )
+        }
+      }
+
+      document.head.appendChild(script)
+    }
+  }
+
+  // if you want to include the monaco editor directly, overload this method in the subclass
+  // and ensureMonacoLoaded() above
+  get monacoInstance() {
+    return window.monacoInstance
+  }
+
+  watchColorScheme() {
+    this.userPrefersDarkSchemeQuery = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    )
+    this.userPrefersDarkSchemeQuery.addEventListener(
+      'change',
+      this.updateTheme.bind(this)
+    )
+  }
+
+  unwatchColorScheme() {
+    if (this.userPrefersDarkSchemeQuery === undefined) return
+    this.userPrefersDarkSchemeQuery.removeEventListener(
+      'change',
+      this.updateTheme.bind(this)
+    )
+    this.userPrefersDarkSchemeQuery = undefined
+  }
+
+  updateTheme() {
+    this.codeEditor?.updateOptions({ theme: this.theme })
+  }
+
+  get theme() {
+    return this.userPrefersDarkScheme
+      ? this.themeDarkValue
+      : this.themeLightValue
+  }
+
+  get userPrefersDarkScheme() {
+    if (this.userPrefersDarkSchemeQuery === undefined) {
+      return false
+    }
+    return this.userPrefersDarkSchemeQuery.matches
+  }
+}

data/app/javascript/controllers/index.js

@@ -13,6 +13,7 @@ import PhoneController from './fields/phone_controller'
 import SuperSelectController from './fields/super_select_controller'
 import DependableController from './dependable_controller'
 import DependentFieldsFrameController from './dependent_fields_frame_controller'
+import CodeEditorController from './fields/code_editor_controller'
 
 export const controllerDefinitions = [
   [FieldController, 'fields/field_controller.js'],
@@ -28,6 +29,7 @@ export const controllerDefinitions = [
   [SuperSelectController, 'fields/super_select_controller.js'],
   [DependableController, 'dependable_controller.js'],
   [DependentFieldsFrameController, 'dependent_fields_frame_controller.js'],
+  [CodeEditorController, 'fields/code_editor_controller.js'],
 ].map(function(d) {
   const key = d[1]
   const controller = d[0]
@@ -51,4 +53,5 @@ export {
   SuperSelectController,
   DependableController,
   DependentFieldsFrameController,
+  CodeEditorController,
 }

data/lib/bullet_train/fields/version.rb

@@ -1,5 +1,5 @@
 module BulletTrain
   module Fields
-    VERSION = "1.19.2"
+    VERSION = "1.20.0"
   end
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bullet_train-fields
 version: !ruby/object:Gem::Version
-  version: 1.19.2
+  version: 1.20.0
 platform: ruby
 authors:
 - Andrew Culver
 bindir: bin
 cert_chain: []
-date: 2025-03-25 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: standard
@@ -126,6 +126,7 @@ files:
 - app/javascript/controllers/dependent_fields_frame_controller.js
 - app/javascript/controllers/fields/button_toggle_controller.js
 - app/javascript/controllers/fields/cloudinary_image_controller.js
+- app/javascript/controllers/fields/code_editor_controller.js
 - app/javascript/controllers/fields/color_picker_controller.js
 - app/javascript/controllers/fields/date_controller.js
 - app/javascript/controllers/fields/emoji_picker_controller.js
@@ -163,7 +164,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.6.7
 specification_version: 4
 summary: Bullet Train Fields
 test_files: []