marksmith 0.0.4

data/app/frontend/entrypoints/javascript/controllers/marksmith_controller.js

@@ -0,0 +1,111 @@
+/* eslint-disable camelcase */
+import '@github/markdown-toolbar-element'
+import { Controller } from '@hotwired/stimulus'
+import { DirectUpload } from '@rails/activestorage'
+import { post } from '@rails/request.js'
+import { subscribe } from '@github/paste-markdown'
+
+// upload code from Jeremy Smith's blog post
+// https://hybrd.co/posts/github-issue-style-file-uploader-using-stimulus-and-active-storage
+
+// Connects to data-controller="marksmith"
+export default class extends Controller {
+  static values = {
+    attachUrl: String,
+    previewUrl: String,
+    resourceClass: String,
+    fieldId: String,
+  }
+
+  static targets = ['fieldElement', 'previewElement', 'writeTabButton', 'previewTabButton', 'toolbar']
+
+  connect() {
+    subscribe(this.fieldElementTarget, { defaultPlainTextPaste: { urlLinks: true } })
+  }
+
+  switchToWrite(event) {
+    event.preventDefault()
+
+    // toggle buttons
+    this.writeTabButtonTarget.classList.add('ms:hidden')
+    this.previewTabButtonTarget.classList.remove('ms:hidden')
+
+    // toggle write/preview buttons
+    this.fieldElementTarget.classList.remove('ms:hidden')
+    this.previewElementTarget.classList.add('ms:hidden')
+
+    // toggle the toolbar back
+    this.toolbarTarget.classList.remove('ms:hidden')
+  }
+
+  switchToPreview(event) {
+    event.preventDefault()
+
+    post(this.previewUrlValue, {
+      body: {
+        body: this.fieldElementTarget.value,
+        resource_class: this.resourceClassValue,
+        field_id: this.fieldIdValue,
+        element_id: this.previewElementTarget.id,
+      },
+      responseKind: 'turbo-stream',
+    })
+
+    // set the min height to the field element height
+    this.previewElementTarget.style.minHeight = `${this.fieldElementTarget.offsetHeight}px`
+
+    // toggle buttons
+    this.writeTabButtonTarget.classList.remove('ms:hidden')
+    this.previewTabButtonTarget.classList.add('ms:hidden')
+
+    // toggle elements
+    this.fieldElementTarget.classList.add('ms:hidden')
+    this.previewElementTarget.classList.remove('ms:hidden')
+
+    // toggle the toolbar
+    this.toolbarTarget.classList.add('ms:hidden')
+  }
+
+  dropUpload(event) {
+    event.preventDefault()
+    this.uploadFiles(event.dataTransfer.files)
+  }
+
+  pasteUpload(event) {
+    if (!event.clipboardData.files.length) return
+
+    event.preventDefault()
+    this.uploadFiles(event.clipboardData.files)
+  }
+
+  uploadFiles(files) {
+    Array.from(files).forEach((file) => this.uploadFile(file))
+  }
+
+  uploadFile(file) {
+    const upload = new DirectUpload(file, this.attachUrlValue)
+
+    upload.create((error, blob) => {
+      if (error) {
+        console.log('Error', error)
+      } else {
+        const text = this.markdownLink(blob)
+        const start = this.fieldElementTarget.selectionStart
+        const end = this.fieldElementTarget.selectionEnd
+        this.fieldElementTarget.setRangeText(text, start, end)
+      }
+    })
+  }
+
+  markdownLink(blob) {
+    const { filename } = blob
+    const url = `/rails/active_storage/blobs/${blob.signed_id}/${filename}`
+    const prefix = (this.isImage(blob.content_type) ? '!' : '')
+
+    return `${prefix}[${filename}](${url})\n`
+  }
+
+  isImage(contentType) {
+    return ['image/jpeg', 'image/gif', 'image/png'].includes(contentType)
+  }
+}

data/app/helpers/marksmith/application_helper.rb

@@ -0,0 +1,4 @@
+module Marksmith
+  module ApplicationHelper
+  end
+end

data/app/helpers/marksmith/helper.rb

@@ -0,0 +1,21 @@
+module Marksmith
+  module Helper
+    def marksmithed(body)
+      Marksmith::Renderer.new.renderer.render(body)
+    end
+
+    def marksmith_tag(name, **kwargs, &block)
+      render partial: "marksmith/shared/editor", locals: { name: name, **kwargs }
+    end
+
+    def marksmith_asset_tags(*args, **kwargs)
+      stylesheet_link_tag("marksmith", *args, **kwargs) +
+      javascript_include_tag("marksmith.esm.js", *args, **kwargs)
+    end
+
+    # TODO: maybe inline svgs in the future
+    def svg(name, options = {})
+      image_tag asset_path("marksmith/svgs/#{name}.svg"), options
+    end
+  end
+end

data/app/jobs/marksmith/application_job.rb

@@ -0,0 +1,4 @@
+module Marksmith
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/marksmith/application_mailer.rb

@@ -0,0 +1,6 @@
+module Marksmith
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/marksmith/application_record.rb

@@ -0,0 +1,5 @@
+module Marksmith
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/marksmith/renderer.rb

@@ -0,0 +1,23 @@
+require "redcarpet"
+require "rouge"
+
+module Marksmith
+  class Renderer
+    def renderer
+      ::Redcarpet::Markdown.new(
+        ::Redcarpet::Render::HTML,
+        tables: true,
+        lax_spacing: true,
+        fenced_code_blocks: true,
+        space_after_headers: true,
+        hard_wrap: true,
+        autolink: true,
+        strikethrough: true,
+        underline: true,
+        highlight: true,
+        quote: true,
+        with_toc_data: true
+      )
+    end
+  end
+end

data/app/views/layouts/marksmith/application.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Marksmith</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%= stylesheet_link_tag    "marksmith/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/app/views/marksmith/markdown_previews/create.turbo_stream.erb

@@ -0,0 +1,6 @@
+<%= turbo_stream.update params[:element_id] do %>
+  <div class="ms:px-3 ms:py-2">
+    <%= render "marksmith/shared/rendered_body", body: @body %>
+  </div>
+<% end %>
+

data/app/views/marksmith/shared/_editor.html.erb

@@ -0,0 +1,120 @@
+<%
+  data_attributes = local_assigns[:data] || {}
+  disabled = local_assigns[:disabled] || false
+  placeholder = local_assigns[:placeholder] || nil
+  autofocus = local_assigns[:autofocus] || false
+  style = local_assigns[:style] || nil
+  classes = local_assigns[:classes] || nil
+  rows = local_assigns[:rows] || 15
+%>
+<%= content_tag :div,
+  class: "ms:flex ms:flex-col ms:w-full ms:border ms:border-zinc-300 ms:rounded ms:@container ms:group ms:focus-within:border-zinc-500",
+  data: {
+    controller: "marksmith",
+    marksmith_preview_url_value: marksmith.markdown_previews_path,
+    marksmith_active_tab_class: "bg-white",
+    marksmith_attach_url_value: rails_direct_uploads_url,
+    marksmith_resource_class_value: @resource.class.name,
+    marksmith_field_id_value: name,
+  } do %>
+  <% button_classes = class_names("ms:flex ms:items:center ms:cursor-pointer ms:py-1 ms:px-1.5 ms:hover:bg-zinc-200 ms:rounded") %>
+  <% toggle_button_classes = class_names(button_classes, "ms:border-0 ms:bg-none") %>
+  <div class="ms:flex-1 ms:flex-col-reverse ms:@md:flex-row ms:grow ms:flex  ms:justify-bewteen ms:bg-zinc-50 ms:rounded ms:px-2 ms:py-1 ms:gap-y-1">
+    <div class="ms:flex-1 ms:flex ms:items:center">
+      <button class="<%= toggle_button_classes %>" data-action="click->marksmith#switchToPreview" data-marksmith-target="previewTabButton">
+        <%= t('marksmith.preview').humanize %>
+      </button>
+      <button class="<%= toggle_button_classes %> ms:hidden ms:bg-zinc-200" data-action="click->marksmith#switchToWrite" data-marksmith-target="writeTabButton">
+        <%= t('marksmith.write').humanize %>
+      </button>
+    </div>
+
+    <markdown-toolbar for="<%= name %>" class="<%= class_names("ms:flex ms:flex-wrap", "ms:pointer-events-none": disabled) %>" data-marksmith-target="toolbar">
+      <md-bold
+        title="<%= t('marksmith.bold').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "bold", class: "ms:inline ms:size-4" %>
+      </md-bold>
+      <md-header
+        title="<%= t('marksmith.heading').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "heading", class: "ms:inline ms:size-4" %>
+      </md-header>
+      <md-italic
+        title="<%= t('marksmith.italic').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "italic", class: "ms:inline ms:size-4" %>
+      </md-italic>
+      <md-quote
+        title="<%= t('marksmith.quote').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "quote", class: "ms:inline ms:size-4" %>
+      </md-quote>
+      <md-code
+        title="<%= t('marksmith.code').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "code", class: "ms:inline ms:size-4" %>
+      </md-code>
+      <md-link
+        title="<%= t('marksmith.link').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "link", class: "ms:inline ms:size-4" %>
+      </md-link>
+      <md-image
+        title="<%= t('marksmith.image').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "photo", class: "ms:inline ms:size-4" %>
+      </md-image>
+      <md-unordered-list
+        title="<%= t('marksmith.unordered_list').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "list-bullet", class: "ms:inline ms:size-4" %>
+      </md-unordered-list>
+      <md-ordered-list
+        title="<%= t('marksmith.ordered_list').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "numbered-list", class: "ms:inline ms:size-4" %>
+      </md-ordered-list>
+      <md-task-list
+        title="<%= t('marksmith.task_list').humanize %>"
+        class="<%= button_classes %>"
+      >
+        <%= svg "list-todo", class: "ms:inline ms:size-4" %>
+      </md-task-list>
+    </markdown-toolbar>
+  </div>
+
+  <div class="ms:border-t ms:border-zinc-300 ms:flex">
+    <%= form.text_area name,
+      id: name,
+      # value: @field.value,
+      class: class_names("ms:flex ms:flex-1 ms:rounded ms:border-none ms:py-2 ms:px-3  ms:focus:outline-none", classes),
+      rows: rows,
+      data: {
+        marksmith_target: "fieldElement",
+        action: "drop->marksmith#dropUpload paste->marksmith#pasteUpload",
+        **data_attributes
+      },
+      disabled:,
+      placeholder:,
+      autofocus:,
+      style:
+    %>
+    <%= content_tag :div, class: "ms:hidden ms:markdown-preview", id: "markdown-preview-#{name}", data: { marksmith_target: "previewElement" } do %>
+      <div class="button-spinner">
+        <div class="double-bounce1"></div>
+        <div class="double-bounce2"></div>
+      </div>
+    <% end %>
+  </div>
+</div>
+<% end %>

data/app/views/marksmith/shared/_rendered_body.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, class: "ms:prose ms:prose-zinc" do %>
+  <%= sanitize(@body, tags: %w(table th tr td span) + ActionView::Helpers::SanitizeHelper.sanitizer_vendor.safe_list_sanitizer.allowed_tags.to_a) %>
+<% end %>

data/config/locales/marksmith.en.yml

@@ -0,0 +1,33 @@
+# Files in the config/locales directory are used for internationalization and
+# are automatically loaded by Rails. If you want to use locales other than
+# English, add the necessary files in this directory.
+#
+# To use the locales, use `I18n.t`:
+#
+#     I18n.t "hello"
+#
+# In views, this is aliased to just `t`:
+#
+#     <%= t("hello") %>
+#
+# To use a different locale, set it with `I18n.locale`:
+#
+#     I18n.locale = :es
+#
+# This would use the information in config/locales/es.yml.
+#
+# To learn more about the API, please read the Rails Internationalization guide
+# at https://guides.rubyonrails.org/i18n.html.
+#
+# Be aware that YAML interprets the following case-insensitive strings as
+# booleans: `true`, `false`, `on`, `off`, `yes`, `no`. Therefore, these strings
+# must be quoted to be interpreted as strings. For example:
+#
+#     en:
+#       "yes": yup
+#       enabled: "ON"
+# TODO: add keys here
+
+en:
+  marksmith:
+    hello: "Hello world"

data/config/routes.rb

@@ -0,0 +1,3 @@
+Marksmith::Engine.routes.draw do
+  resources :markdown_previews, only: [:create]
+end

data/config/vite.json

@@ -0,0 +1,16 @@
+{
+  "all": {
+    "sourceCodeDir": "app/frontend",
+    "watchAdditionalPaths": []
+  },
+  "development": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-dev",
+    "port": 3036
+  },
+  "test": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-test",
+    "port": 3037
+  }
+}

data/lib/marksmith/engine.rb

@@ -0,0 +1,25 @@
+module Marksmith
+  class Engine < ::Rails::Engine
+    isolate_namespace Marksmith
+
+    initializer "marksmith.view_helpers" do
+      ActiveSupport.on_load :action_view do
+        ActionView::Base.include Marksmith::Helper
+
+        module FormBuilderExtensions
+          def marksmith(*args, **kwargs, &block)
+            @template.marksmith_tag(*args, **kwargs.merge(form: self), &block)
+          end
+        end
+
+        ActionView::Helpers::FormBuilder.include FormBuilderExtensions
+      end
+    end
+
+    initializer "marksmith.assets.precompile" do |app|
+      if Rails.application.config.respond_to?(:assets)
+        app.config.assets.precompile << "marksmith_manifest.js"
+      end
+    end
+  end
+end

data/lib/marksmith/version.rb

@@ -0,0 +1,3 @@
+module Marksmith
+  VERSION = "0.0.4"
+end

data/lib/marksmith.rb

@@ -0,0 +1,5 @@
+require "marksmith/version"
+require "marksmith/engine"
+
+module Marksmith
+end

data/lib/tasks/marksmith_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :marksmith do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,131 @@
+--- !ruby/object:Gem::Specification
+name: marksmith
+version: !ruby/object:Gem::Version
+  version: 0.0.4
+platform: ruby
+authors:
+- Adrian Marin
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2025-01-22 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+- !ruby/object:Gem::Dependency
+  name: redcarpet
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Marksmith is a GitHub-style markdown editor for Ruby on Rails applications.
+email:
+- adrian@adrianthedev.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/marksmith_manifest.js
+- app/assets/images/marksmith/svgs/bold.svg
+- app/assets/images/marksmith/svgs/code.svg
+- app/assets/images/marksmith/svgs/color-swatch copy.svg
+- app/assets/images/marksmith/svgs/color-swatch.svg
+- app/assets/images/marksmith/svgs/heading.svg
+- app/assets/images/marksmith/svgs/italic.svg
+- app/assets/images/marksmith/svgs/link copy.svg
+- app/assets/images/marksmith/svgs/link.svg
+- app/assets/images/marksmith/svgs/list-bullet.svg
+- app/assets/images/marksmith/svgs/list-todo.svg
+- app/assets/images/marksmith/svgs/numbered-list.svg
+- app/assets/images/marksmith/svgs/photo.svg
+- app/assets/images/marksmith/svgs/quote.svg
+- app/assets/stylesheets/marksmith.css
+- app/assets/stylesheets/marksmith/application.css
+- app/controllers/marksmith/application_controller.rb
+- app/controllers/marksmith/markdown_previews_controller.rb
+- app/frontend/entrypoints/application.css
+- app/frontend/entrypoints/application.js
+- app/frontend/entrypoints/javascript/controllers/application.js
+- app/frontend/entrypoints/javascript/controllers/index.js
+- app/frontend/entrypoints/javascript/controllers/marksmith_controller.js
+- app/helpers/marksmith/application_helper.rb
+- app/helpers/marksmith/helper.rb
+- app/jobs/marksmith/application_job.rb
+- app/mailers/marksmith/application_mailer.rb
+- app/models/marksmith/application_record.rb
+- app/models/marksmith/renderer.rb
+- app/views/layouts/marksmith/application.html.erb
+- app/views/marksmith/markdown_previews/create.turbo_stream.erb
+- app/views/marksmith/shared/_editor.html.erb
+- app/views/marksmith/shared/_rendered_body.html.erb
+- config/locales/marksmith.en.yml
+- config/routes.rb
+- config/vite.json
+- lib/marksmith.rb
+- lib/marksmith/engine.rb
+- lib/marksmith/version.rb
+- lib/tasks/marksmith_tasks.rake
+homepage: https://github.com/avo-hq/marksmith
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/avo-hq/marksmith
+  source_code_uri: https://github.com/avo-hq/marksmith
+  changelog_uri: https://github.com/avo-hq/marksmith/releases
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.4.10
+signing_key:
+specification_version: 4
+summary: Marksmith is a GitHub-style markdown editor for Ruby on Rails applications.
+test_files: []