activeadmin_mitosis_editor 0.1.0

data/docs/plans/2026-02-15-mitosis-editor-gem-implementation.md

@@ -0,0 +1,407 @@
+# activeadmin-mitosis-editor Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Create a Ruby gem that wraps mitosis-js as a custom input type for ActiveAdmin, providing split-view markdown editing.
+
+**Architecture:** Gem provides Formtastic input class + ERB view template + bundled JS/CSS assets. Users add to Gemfile and use `as: :mitosis_editor` in ActiveAdmin DSL.
+
+**Tech Stack:** Ruby, Ruby Gems, ActiveAdmin, Formtastic, JavaScript (mitosis-js)
+
+---
+
+### Task 1: Initialize gem structure
+
+**Files:**
+- Create: `Gemfile`
+- Create: `Rakefile`
+- Create: `bin/setup`
+- Create: `bin/console`
+- Create: `Gemfile.lock`
+- Create: `.gitignore`
+
+**Step 1: Create basic gem structure**
+
+```bash
+mkdir -p lib/activeadmin_mitosis_editor
+mkdir -p app/inputs
+mkdir -p app/views/inputs/mitosis_editor_input
+mkdir -p vendor/assets/javascripts
+mkdir -p vendor/assets/stylesheets
+mkdir -p spec
+```
+
+**Step 2: Create Gemfile**
+
+```ruby
+source "https://rubygems.org"
+
+gemspec
+```
+
+**Step 3: Create gemspec**
+
+```ruby
+Gem::Specification.new do |spec|
+  spec.name          = "activeadmin-mitosis-editor"
+  spec.version       = "0.1.0"
+  spec.authors       = ["Your Name"]
+  spec.summary       = "A split-view markdown editor input for ActiveAdmin"
+  spec.license      = "MIT"
+  spec.files         = Dir["{app,lib,vendor}/**/*", "*.md"]
+  spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency "railties", ">= 6.0"
+  spec.add_runtime_dependency "formtastic", "~> 4.0"
+end
+```
+
+**Step 4: Commit**
+
+```bash
+git init
+git add .
+git commit -m "feat: scaffold gem structure"
+```
+
+---
+
+### Task 2: Create main gem entry point
+
+**Files:**
+- Create: `lib/activeadmin_mitosis_editor.rb`
+- Create: `lib/activeadmin_mitosis_editor/version.rb`
+
+**Step 1: Create version.rb**
+
+```ruby
+module ActiveadminMitosisEditor
+  VERSION = "0.1.0"
+end
+```
+
+**Step 2: Create main entry point**
+
+```ruby
+require "activeadmin_mitosis_editor/version"
+
+module ActiveadminMitosisEditor
+  module Inputs
+    autoload :MitosisEditorInput, "activeadmin_mitosis_editor/inputs/mitosis_editor_input"
+  end
+end
+```
+
+**Step 3: Commit**
+
+```bash
+git add lib/
+git commit -m "feat: add gem entry point and version"
+```
+
+---
+
+### Task 3: Create Formtastic input class
+
+**Files:**
+- Create: `lib/activeadmin_mitosis_editor/inputs/mitosis_editor_input.rb`
+
+**Step 1: Create the input class**
+
+```ruby
+require "formtastic/inputs/string_input"
+
+module ActiveadminMitosisEditor
+  module Inputs
+    class MitosisEditorInput < Formtastic::Inputs::StringInput
+      def to_html
+        input_wrapping do
+          builder.hidden_field(method, input_html_options) +
+          template.render("inputs/mitosis_editor_input/form", { builder: builder, method: method, input_html_options: input_html_options })
+        end
+      end
+
+      def input_html_options
+        super.merge(class: "mitosis-editor-input hidden", data: { mit_height: options[:height] || "500px", mit_placeholder: options[:placeholder] || "" })
+      end
+    end
+  end
+end
+```
+
+**Step 2: Commit**
+
+```bash
+git add lib/
+git commit -m "feat: add Formtastic input class"
+```
+
+---
+
+### Task 4: Create ERB view template
+
+**Files:**
+- Create: `app/views/inputs/mitosis_editor_input/_form.html.erb`
+
+**Step 1: Create the template**
+
+```erb
+<div class="mitosis-editor-wrapper"
+     data-input-name="<%= input_html_options[:name] %>"
+     data-height="<%= input_html_options[:data][:mit_height] %>"
+     data-placeholder="<%= input_html_options[:data][:mit_placeholder] %>">
+  <div id="mitosis-editor-<%= input_html_options[:id] %>" class="mitosis-editor-container"></div>
+</div>
+
+<script>
+(function() {
+  var container = document.getElementById('mitosis-editor-<%= input_html_options[:id] %>');
+  var wrapper = container.closest('.mitosis-editor-wrapper');
+  var inputName = wrapper.dataset.inputName;
+  var height = wrapper.dataset.height || '500px';
+  var placeholder = wrapper.dataset.placeholder || '';
+
+  // Find the hidden input
+  var hiddenInput = document.querySelector('input[name="' + inputName + '"]');
+
+  if (window.MitosisEditor) {
+    var editor = window.MitosisEditor.createEditor({
+      container: container,
+      content: hiddenInput ? hiddenInput.value : '',
+      height: height,
+      placeholder: placeholder
+    });
+
+    // Sync editor content to hidden input on form submit
+    var form = container.closest('form');
+    if (form) {
+      form.addEventListener('submit', function() {
+        if (editor && editor.getMarkdown) {
+          hiddenInput.value = editor.getMarkdown();
+        }
+      });
+    }
+  }
+})();
+</script>
+```
+
+**Step 2: Commit**
+
+```bash
+git add app/views/
+git commit -m "feat: add ERB view template for editor"
+```
+
+---
+
+### Task 5: Bundle mitosis-js assets
+
+**Files:**
+- Create: `vendor/assets/javascripts/mitosis-editor.js`
+- Create: `vendor/assets/stylesheets/mitosis-editor.css`
+- Create: `vendor/assets/javascripts/prism.js` (and language files)
+
+**Step 1: Build mitosis-js**
+
+```bash
+cd /home/nadiar/Workspace/mitosis-js
+pnpm install
+pnpm build
+```
+
+**Step 2: Copy built assets**
+
+```bash
+cp /home/nadiar/Workspace/mitosis-js/dist/index.js vendor/assets/javascripts/mitosis-editor.js
+cp /home/nadiar/Workspace/mitosis-js/dist/index.css vendor/assets/stylesheets/mitosis-editor.css 2>/dev/null || true
+```
+
+**Step 3: Download Prism.js**
+
+```bash
+curl -sL https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js -o vendor/assets/javascripts/prism.js
+curl -sL https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css -o vendor/assets/stylesheets/prism-tomorrow.css
+```
+
+**Step 4: Create editor initialization wrapper**
+
+```javascript
+// vendor/assets/javascripts/mitosis-editor.js
+// Wrapper to expose mitosis-js as window.MitosisEditor
+
+(function() {
+  // mitosis-js will be loaded before this
+  window.MitosisEditor = window.MitosisEditor || window.createEditor || {};
+})();
+```
+
+**Step 5: Commit**
+
+```bash
+git add vendor/
+git commit -m "feat: bundle mitosis-js and Prism.js assets"
+```
+
+---
+
+### Task 6: Create Railtie for asset registration
+
+**Files:**
+- Create: `lib/activeadmin_mitosis_editor/railtie.rb`
+
+**Step 1: Create Railtie**
+
+```ruby
+module ActiveadminMitosisEditor
+  class Railtie < Rails::Railtie
+    initializer "activeadmin_mitosis_editor.assets" do
+      if defined?(Sprockets)
+        Rails.application.config.assets.paths << Gem.root.join("vendor/assets/javascripts").to_s
+        Rails.application.config.assets.paths << Gem.root.join("vendor/assets/stylesheets").to_s
+      end
+    end
+  end
+end
+```
+
+**Step 2: Update main entry to require railtie**
+
+```ruby
+# lib/activeadmin_mitosis_editor.rb
+require "activeadmin_mitosis_editor/version"
+require "activeadmin_mitosis_editor/railtie" if defined?(Rails)
+
+module ActiveadminMitosisEditor
+  # ...
+end
+```
+
+**Step 3: Commit**
+
+```bash
+git add lib/
+git commit -m "feat: add Railtie for asset pipeline integration"
+```
+
+---
+
+### Task 7: Create gem spec file
+
+**Files:**
+- Create: `activeadmin_mitosis_editor.gemspec`
+
+**Step 1: Create gemspec**
+
+```ruby
+Gem::Specification.new do |spec|
+  spec.name          = "activeadmin_mitosis_editor"
+  spec.version       = ActiveadminMitosisEditor::VERSION
+  spec.authors       = ["Your Name"]
+  spec.summary       = "A split-view markdown editor input for ActiveAdmin"
+  spec.description   = "Wraps mitosis-js as a custom input for ActiveAdmin forms"
+  spec.license       = "MIT"
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(spec|\.git)}) }
+  spec.require_paths = ["lib"]
+
+  spec.add_runtime_dependency "railties", ">= 6.0"
+  spec.add_runtime_dependency "formtastic", "~> 4.0"
+  spec.add_runtime_dependency "activesupport", ">= 6.0"
+end
+```
+
+**Step 2: Commit**
+
+```bash
+git add *.gemspec
+git commit -m "feat: add gemspec file"
+```
+
+---
+
+### Task 8: Create usage instructions
+
+**Files:**
+- Create: `README.md`
+
+**Step 1: Create README**
+
+```markdown
+# ActiveadminMitosisEditor
+
+A Ruby gem that provides a split-view markdown editor input for ActiveAdmin, powered by mitosis-js.
+
+## Installation
+
+Add this line to your Rails application's Gemfile:
+
+```ruby
+gem "activeadmin_mitosis_editor"
+```
+
+## Usage
+
+In your ActiveAdmin resource:
+
+```ruby
+ActiveAdmin.register Article do
+  form do |f|
+    f.inputs do
+      f.input :title
+      f.input :body, as: :mitosis_editor
+      f.input :body, as: :mitosis_editor, height: "400px", placeholder: "Write markdown..."
+    end
+    f.actions
+  end
+end
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| height | string | '500px' | Editor height |
+| placeholder | string | '' | Placeholder text |
+
+## Requirements
+
+- Rails >= 6.0
+- ActiveAdmin
+- Formtastic
+```
+
+**Step 2: Commit**
+
+```bash
+git add README.md
+git commit -m "docs: add README with usage instructions"
+```
+
+---
+
+## Summary
+
+**Total Tasks:** 8
+
+1. Initialize gem structure
+2. Create main gem entry point
+3. Create Formtastic input class
+4. Create ERB view template
+5. Bundle mitosis-js assets
+6. Create Railtie for asset registration
+7. Create gem spec file
+8. Create usage instructions
+
+---
+
+## Execution Choice
+
+**Plan complete and saved to `docs/plans/2026-02-15-mitosis-editor-gem-design.md` (implementation plan in this file).**
+
+**Two execution options:**
+
+1. **Subagent-Driven (this session)** - I dispatch fresh subagent per task, review between tasks, fast iteration
+
+2. **Parallel Session (separate)** - Open new session with executing-plans, batch execution with checkpoints
+
+Which approach?

data/lib/activeadmin_mitosis_editor/inputs/mitosis_editor_input.rb

@@ -0,0 +1,29 @@
+require "formtastic/inputs/string_input"
+
+module ActiveAdminMitosisEditor
+  module Inputs
+    class MitosisEditorInput < Formtastic::Inputs::StringInput
+      def to_html
+        input_wrapping do
+          builder.hidden_field(method, input_html_options) +
+          template.render("inputs/mitosis_editor_input/form", {
+            builder: builder,
+            method: method,
+            input_html_options: input_html_options,
+            editor_options: editor_options
+          })
+        end
+      end
+
+      def input_html_options
+        super.merge(class: "mitosis-editor-input hidden")
+      end
+
+      private
+
+      def editor_options
+        { height: "500px", placeholder: "", theme: "auto" }.merge(options[:editor_options] || {})
+      end
+    end
+  end
+end

data/lib/activeadmin_mitosis_editor/railtie.rb

@@ -0,0 +1,7 @@
+module ActiveAdminMitosisEditor
+  class Engine < Rails::Engine
+    # Asset paths are not registered via Railtie to avoid conflicts with app-level
+    # asset overrides. Applications using this gem should copy the bundled assets
+    # from vendor/assets to their app/assets/stylesheets/mitosis_editor/ directory.
+  end
+end

data/lib/activeadmin_mitosis_editor/version.rb

@@ -0,0 +1,3 @@
+module ActiveAdminMitosisEditor
+  VERSION = "0.1.0"
+end

data/lib/activeadmin_mitosis_editor.rb

@@ -0,0 +1,13 @@
+require "activeadmin_mitosis_editor/version"
+require "activeadmin_mitosis_editor/inputs/mitosis_editor_input"
+require "activeadmin_mitosis_editor/railtie" if defined?(Rails)
+
+module ActiveAdminMitosisEditor
+  def self.root
+    @root ||= Pathname.new(File.dirname(__dir__))
+  end
+
+  module Inputs
+    autoload :MitosisEditorInput, "activeadmin_mitosis_editor/inputs/mitosis_editor_input"
+  end
+end

data/lib/generators/mitosis_editor/styles_generator.rb

@@ -0,0 +1,23 @@
+require "rails/generators"
+
+module MitosisEditor
+  class StylesGenerator < Rails::Generators::Base
+    source_root File.expand_path("../../../vendor/assets/stylesheets", __dir__)
+
+    desc "Copy CSS files for customization"
+
+    def copy_css_files
+      copy_file "mitosis-editor.css",
+        "app/assets/stylesheets/mitosis-editor.css"
+      copy_file "theme-light.min.css",
+        "app/assets/stylesheets/theme-light.css"
+      copy_file "theme-dark.min.css",
+        "app/assets/stylesheets/theme-dark.css"
+    end
+
+    def show_readme
+      puts "\nDone! CSS files copied to app/assets/stylesheets/"
+      puts "You can customize the CSS variables in these files."
+    end
+  end
+end

data/lib/generators/mitosis_editor/templates/_dependencies.html.erb

@@ -0,0 +1,17 @@
+<%# Parameters:
+#   theme - 'light', 'dark', or 'auto' (default: 'light') %>
+<% theme = local_assigns[:theme] || "auto"
+theme_light = %w[light auto].include?(theme)
+theme_dark = %w[dark auto].include?(theme) %>
+<%= stylesheet_link_tag "mitosis-editor" %>
+<%= stylesheet_link_tag "theme-light" if theme_light %>
+<%= stylesheet_link_tag "theme-dark" if theme_dark %>
+<%= javascript_include_tag "mitosis-editor" %>
+
+<%# Uncomment the lines below to enable syntax highlighting with Prism %>
+<%#= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" %>
+<%#= javascript_include_tag "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js" %>
+<%#= javascript_include_tag "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js" %>
+<%#= javascript_include_tag "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js" %>
+<%#= javascript_include_tag "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js" %>
+<%#= javascript_include_tag "https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js" %>

data/lib/generators/mitosis_editor/views_generator.rb

@@ -0,0 +1,14 @@
+require "rails/generators"
+
+module MitosisEditor
+  class ViewsGenerator < Rails::Generators::Base
+    source_root File.expand_path("templates", __dir__)
+
+    desc "Copy mitosis editor dependencies partial for customization"
+
+    def copy_dependencies_partial
+      copy_file "_dependencies.html.erb",
+        "app/views/inputs/mitosis_editor_input/_dependencies.html.erb"
+    end
+  end
+end

data/script/bump-version

@@ -0,0 +1,78 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require_relative "../lib/activeadmin_mitosis_editor/version"
+
+module BumpVersion
+  class << self
+    def run(type = nil)
+      current = ActiveAdminMitosisEditor::VERSION
+      major, minor, patch = current.split(".").map(&:to_i)
+
+      bump_type = type || detect_bump_type
+
+      case bump_type
+      when "major"
+        major += 1
+        minor = 0
+        patch = 0
+      when "minor"
+        minor += 1
+        patch = 0
+      when "patch"
+        patch += 1
+      else
+        puts "Usage: bump-version [major|minor|patch]"
+        exit 1
+      end
+
+      new_version = "#{major}.#{minor}.#{patch}"
+      update_version(new_version)
+      new_version
+    end
+
+    private
+
+    def detect_bump_type
+      commits = `git log --oneline -10`.split("\n")
+      has_major = commits.any? { |c| c.include?("feat!:") || c.include?("BREAKING") }
+      has_fix = commits.any? { |c| c.include?("fix:") }
+      has_minor = commits.any? { |c| c.include?("feat:") }
+
+      return "major" if has_major
+      return "patch" if has_fix  # fix has higher priority than feat
+      return "minor" if has_minor
+
+      "patch"
+    end
+
+    def update_version(new_version)
+      file = "lib/activeadmin_mitosis_editor/version.rb"
+      content = File.read(file)
+      new_content = content.gsub(/VERSION = "[^"]+"/, "VERSION = \"#{new_version}\"")
+      File.write(file, new_content)
+
+      # Update CHANGELOG
+      update_changelog(new_version)
+
+      puts "Bumped version to #{new_version}"
+    end
+
+    def update_changelog(version)
+      return unless File.exist?("CHANGELOG.md")
+
+      date = Time.now.strftime("%Y-%m-%d")
+      content = File.read("CHANGELOG.md")
+
+      # Add new version section after "## [Unreleased]"
+      unreleased = "## [Unreleased]"
+      if content.include?(unreleased)
+        new_section = "#{unreleased}\n\n## [#{version}] - #{date}\n\n### Added\n- "
+        new_content = content.sub(unreleased, new_section)
+        File.write("CHANGELOG.md", new_content)
+      end
+    end
+  end
+end
+
+BumpVersion.run(ARGV[0])