marksmith 0.2.2 → 0.4.0

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

@@ -20,7 +20,9 @@ export default class extends Controller {
     fileUploadsEnabled: { type: Boolean, default: true },
   }
 
-  static targets = ['fieldContainer', 'fieldElement', 'previewElement', 'writeTabButton', 'previewTabButton', 'toolbar']
+  static targets = ['fieldContainer', 'fieldElement', 'previewPane', 'writeTabButton', 'previewTabButton', 'toolbar']
+
+  activeTabClass = "active"
 
   get #fileUploadsDisabled() {
     return !this.fileUploadsEnabledValue
@@ -34,42 +36,47 @@ export default class extends Controller {
     event.preventDefault()
 
     // toggle buttons
-    this.writeTabButtonTarget.classList.add('ms:hidden')
-    this.previewTabButtonTarget.classList.remove('ms:hidden')
+    this.writeTabButtonTarget.classList.add(this.activeTabClass)
+    this.previewTabButtonTarget.classList.remove(this.activeTabClass)
 
     // toggle write/preview buttons
     this.fieldContainerTarget.classList.remove('ms:hidden')
-    this.previewElementTarget.classList.add('ms:hidden')
+    this.previewPaneTarget.classList.add('ms:hidden')
 
     // toggle the toolbar back
-    this.toolbarTarget.classList.remove('ms:hidden')
+    this.toolbarTarget.classList.remove('ms:opacity-0', 'ms:pointer-events-none')
   }
 
   switchToPreview(event) {
     event.preventDefault()
 
+    // unfocus the active element to hide the outline around the editor
+    this.element.focus()
+    this.element.blur()
+    document.activeElement.blur()
+
     post(this.previewUrlValue, {
       body: {
         body: this.fieldElementTarget.value,
-        element_id: this.previewElementTarget.id,
+        element_id: this.previewPaneTarget.id,
         extra_params: this.extraPreviewParamsValue,
       },
       responseKind: 'turbo-stream',
     })
 
     // set the min height to the field element height
-    this.previewElementTarget.style.minHeight = `${this.fieldElementTarget.offsetHeight}px`
+    this.previewPaneTarget.style.minHeight = `${this.fieldElementTarget.offsetHeight}px`
 
     // toggle buttons
-    this.writeTabButtonTarget.classList.remove('ms:hidden')
-    this.previewTabButtonTarget.classList.add('ms:hidden')
+    this.writeTabButtonTarget.classList.remove(this.activeTabClass)
+    this.previewTabButtonTarget.classList.add(this.activeTabClass)
 
     // toggle elements
     this.fieldContainerTarget.classList.add('ms:hidden')
-    this.previewElementTarget.classList.remove('ms:hidden')
+    this.previewPaneTarget.classList.remove('ms:hidden')
 
     // toggle the toolbar
-    this.toolbarTarget.classList.add('ms:hidden')
+    this.toolbarTarget.classList.add('ms:opacity-0', 'ms:pointer-events-none')
   }
 
   dropUpload(event) {

data/app/helpers/marksmith/marksmith_helper.rb

@@ -0,0 +1,59 @@
+module Marksmith
+  module MarksmithHelper
+    def marksmithed(body)
+      Marksmith::Renderer.new(body:).render
+    end
+
+    def marksmith_tag(name, **kwargs, &block)
+      rails_direct_uploads_url = if defined?(ActiveStorage)
+        main_app.rails_direct_uploads_url
+      end
+
+      editor = Marksmith::Editor.new(name:, rails_direct_uploads_url:, **kwargs, &block)
+
+      render partial: "marksmith/shared/editor", locals: { name: editor.name, editor: }
+    end
+
+    def marksmith_asset_tags(*args, **kwargs)
+      stylesheet_link_tag("marksmith", *args, **kwargs) +
+      javascript_include_tag("marksmith.esm.js", *args, **kwargs)
+    end
+
+    def marksmith_button_classes
+      class_names(
+        "ms:flex ms:items:center ms:cursor-pointer ms:py-1 ms:px-1.5 ms:hover:bg-neutral-200 ms:rounded",
+        "ms:dark:text-neutral-300 ms:dark:hover:bg-neutral-600"
+      )
+    end
+
+    def marksmith_toolbar_button(name, **kwargs)
+      content_tag "md-#{name}", marksmith_toolbar_svg(name), title: t("marksmith.#{name.to_s.gsub("-", "_")}").humanize, class: marksmith_button_classes
+    end
+
+    def marksmith_tab_classes
+      class_names(
+        # marksmith_button_classes,
+        "marksmith-toggle-button ms:text-sm ms:hover:bg-neutral-300 ms:text-sm ms:font-medium ms:cursor-pointer ms:text-neutral-500 ms:px-3",
+        # borders
+        "ms:bg-transparent ms:hover:bg-transparent",
+        "ms:-my-px ms:-ml-px ms:border ms:border-transparent",
+        "ms:h-[calc(100%+3px)] ms:border-b-none",
+        # "ms:border-b-neutral-00",
+        # active classes
+        "ms:[.active]:bg-neutral-50 ms:[.active]:text-neutral-900 ms:dark:[.active]:text-neutral-300 ms:[.active]:dark:bg-neutral-800 ms:[.active]:dark:border-neutral-500 ms:[.active]:rounded-t-md ms:[.active]:border-neutral-500",
+
+      )
+    end
+
+    def marksmith_inline_svg(path)
+      File.open(Marksmith::Engine.root.join(path)).read.html_safe
+    end
+
+    # TODO: maybe inline svgs in the future
+    def marksmith_toolbar_svg(name)
+      marksmith_inline_svg("app/assets/images/marksmith/svgs/#{name}.svg")
+    rescue
+      "<!-- Failed to load SVG for #{name} -->"
+    end
+  end
+end

data/app/models/marksmith/editor.rb

@@ -0,0 +1,104 @@
+require "uri"
+
+class Marksmith::Editor
+  attr_reader :name,
+    :extra_preview_params,
+    :form,
+    :disabled,
+    :controller_data_attributes,
+    :classes,
+    :data_attributes,
+    :placeholder,
+    :autofocus,
+    :style,
+    :gallery,
+    :kwargs,
+    :id
+
+  def initialize(name:,
+    upload_url: nil,
+    rails_direct_uploads_url: nil,
+    enable_file_uploads: nil,
+    extra_preview_params: {},
+    form: nil,
+    disabled: false,
+    controller_data_attributes: {},
+    classes: nil,
+    data_attributes: {},
+    placeholder: nil,
+    autofocus: false,
+    style: nil,
+    value: nil,
+    id: "marksmith-instance-#{rand(1000..9999)}",
+    gallery: {},
+    **kwargs)
+    @name = name
+    @kwargs = kwargs
+
+    @upload_url = upload_url
+    @rails_direct_uploads_url = rails_direct_uploads_url
+    @enable_file_uploads = enable_file_uploads
+    @extra_preview_params = extra_preview_params
+    @form = form
+    @disabled = disabled
+    @controller_data_attributes = controller_data_attributes
+    @classes = classes
+    @data_attributes = data_attributes
+    @placeholder = placeholder
+    @autofocus = autofocus
+    @style = style
+    @value = value
+    @id = id
+    @gallery = gallery
+  end
+
+  def gallery_enabled
+    gallery.fetch(:enabled, false)
+  end
+
+  def gallery_open_path
+    gallery.fetch(:open_path, nil)
+  end
+
+  def gallery_params
+    gallery.fetch(:params, {})
+  end
+
+  def gallery_turbo_frame
+    gallery.fetch(:turbo_frame, nil)
+  end
+
+  def gallery_full_path
+    if gallery_open_path.present?
+      uri = URI.parse(gallery_open_path)
+      uri.query = [ uri.query, gallery_params.map { |k, v| "#{k}=#{v}" }.join("&") ].compact.join("&")
+      uri.to_s
+    end
+  end
+
+  def upload_url
+    if @upload_url.present?
+      @upload_url
+    elsif defined?(ActiveStorage)
+      @rails_direct_uploads_url
+    end
+  end
+
+  def enable_file_uploads
+    if upload_url.blank?
+      false
+    elsif @enable_file_uploads.nil?
+      true
+    else
+      @enable_file_uploads
+    end
+  end
+
+  def field_name
+    form&.field_name(name) || name
+  end
+
+  def value
+    form&.object&.send(name) || @value || nil
+  end
+end

data/app/models/marksmith/renderer.rb

@@ -7,6 +7,8 @@ module Marksmith
     def render
       if Marksmith.configuration.parser == "commonmarker"
         render_commonmarker
+      elsif Marksmith.configuration.parser == "kramdown"
+        render_kramdown
       else
         render_redcarpet
       end
@@ -14,7 +16,7 @@ module Marksmith
 
     def render_commonmarker
       # commonmarker expects an utf-8 encoded string
-      body = @body.to_s.dup.force_encoding('utf-8')
+      body = @body.to_s.dup.force_encoding("utf-8")
       Commonmarker.to_html(body)
     end
 
@@ -34,5 +36,10 @@ module Marksmith
         with_toc_data: true
       ).render(@body)
     end
+
+    def render_kramdown
+      body = @body.to_s.dup.force_encoding("utf-8")
+      Kramdown::Document.new(body).to_html
+    end
   end
 end

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

@@ -0,0 +1,15 @@
+<%= tag.markdown_toolbar for: name,
+  class: class_names("ms:flex ms:flex-wrap ms:px-2 ms:py-1", "ms:pointer-events-none": disabled),
+  data: { marksmith_target: "toolbar" } do
+%>
+  <%= marksmith_toolbar_button "bold" %>
+  <%= marksmith_toolbar_button "header" %>
+  <%= marksmith_toolbar_button "italic" %>
+  <%= marksmith_toolbar_button "quote" %>
+  <%= marksmith_toolbar_button "code" %>
+  <%= marksmith_toolbar_button "link" %>
+  <%= marksmith_toolbar_button "image" %>
+  <%= marksmith_toolbar_button "unordered-list" %>
+  <%= marksmith_toolbar_button "ordered-list" %>
+  <%= marksmith_toolbar_button "task-list" %>
+<% end %>

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

@@ -1,46 +1,6 @@
-<%
-  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[:class] || nil
-  rows = local_assigns[:rows] || 15
-  field_name = form&.field_name(name) || name
-  value = if defined?(form)
-    form.object.send(name)
-  else
-    local_assigns[:value] || nil
-  end
-  extra_preview_params = local_assigns[:extra_preview_params] || {}
-  upload_url = if local_assigns[:upload_url].present?
-    local_assigns[:upload_url]
-  elsif defined?(ActiveStorage)
-    main_app.rails_direct_uploads_url
-  end
-
-  enable_file_uploads = if upload_url.blank?
-      false
-    elsif local_assigns[:enable_file_uploads].nil?
-      true
-    else
-      local_assigns[:enable_file_uploads]
-    end
-
-
-  # Used by Avo and other adapters to enable the gallery link.
-  gallery_enabled = local_assigns.dig(:gallery, :enabled) || false
-  gallery_open_path = local_assigns.dig(:gallery, :open_path) || nil
-  gallery_params = local_assigns.dig(:gallery, :params) || {}
-  if gallery_open_path.present?
-    gallery_full_path = gallery_open_path + "?" + gallery_params.map { |k,v| "#{k}=#{v}" }.join('&')
-  else
-    gallery_full_path = nil
-  end
-  gallery_turbo_frame = local_assigns.dig(:gallery, :turbo_frame) || nil
-%>
 <%= content_tag :div,
-  class: "marksmith ms:block ms:flex-col ms:w-full ms:border ms:border-neutral-300 ms:rounded ms:@container ms:focus-within:border-neutral-400",
+  id: editor.id,
+  class: "marksmith ms:block ms:flex-col ms:w-full ms:border ms:border-neutral-500 ms:rounded-md ms:@container ms:focus-within:outline-2 ms:outline-blue-500 ms:-outline-offset-1",
   data: {
     controller: "marksmith list-continuation",
     action: "
@@ -49,79 +9,15 @@
     ",
     unique_selector: ".#{@input_id}", # used to pinpoint the exact element in which to insert the attachment
     marksmith_preview_url_value: marksmith.markdown_previews_path,
-    marksmith_file_uploads_enabled_value: enable_file_uploads,
+    marksmith_file_uploads_enabled_value: editor.enable_file_uploads,
     marksmith_active_tab_class: "bg-white",
-    marksmith_attach_url_value: upload_url,
-    marksmith_extra_preview_params_value: extra_preview_params.as_json,
-    **local_assigns.fetch(:controller_data_attributes, {})
+    marksmith_attach_url_value: editor.upload_url,
+    marksmith_extra_preview_params_value: editor.extra_preview_params.as_json,
+    **editor.controller_data_attributes,
   } do %>
-  <% toggle_button_classes = class_names(marksmith_button_classes, "ms:bg-neutral-200 ms:border-0 ms:bg-none ms:text-sm ms:hover:bg-neutral-300 ms:uppercase ms:text-xs ms:font-semibold ms:text-neutral-800") %>
-  <div class="ms:flex-1 ms:flex-col-reverse ms:@md:flex-row ms:grow ms:flex  ms:justify-bewteen ms:bg-neutral-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" type="button">
-        <%= t('marksmith.preview').humanize %>
-      </button>
-      <button class="<%= toggle_button_classes %> ms:hidden ms:bg-neutral-200" data-action="click->marksmith#switchToWrite" data-marksmith-target="writeTabButton" type="button">
-        <%= 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">
-      <%= marksmith_toolbar_button "bold" %>
-      <%= marksmith_toolbar_button "header" %>
-      <%= marksmith_toolbar_button "italic" %>
-      <%= marksmith_toolbar_button "quote" %>
-      <%= marksmith_toolbar_button "code" %>
-      <%= marksmith_toolbar_button "link" %>
-      <%= marksmith_toolbar_button "image" %>
-      <%= marksmith_toolbar_button "unordered-list" %>
-      <%= marksmith_toolbar_button "ordered-list" %>
-      <%= marksmith_toolbar_button "task-list" %>
-    </markdown-toolbar>
-  </div>
-  <% toolbar_button_classes = "ms:cursor-pointer ms:hover:bg-neutral-100 ms:px-1 ms:py-px ms:rounded ms:text-sm" %>
-  <div class="ms:border-t ms:w-full ms:border-neutral-300 ms:flex ms:flex-1">
-    <%= content_tag :div, class: "ms:flex ms:flex-1 ms:flex-col ms:size-full", data: { marksmith_target: "fieldContainer" } do %>
-      <%= text_area_tag field_name, value,
-        id: name,
-        class: class_names("ms:flex ms:flex-1 ms:rounded ms:border-none ms:resize-none ms:focus:outline-none ms:font-mono ms:focus:ring-0 ms:leading-normal ms:p-2 ms:text-sm", classes),
-        rows: rows,
-        data: {
-          action: "drop->marksmith#dropUpload paste->marksmith#pasteUpload",
-          marksmith_target: "fieldElement",
-          **data_attributes
-        },
-        disabled:,
-        placeholder:,
-        autofocus:,
-        style:
-      %>
-      <div class="ms:flex ms:flex-1 ms:flex-grow ms:space-x-2 ms:py-1 ms:border-t ms:border-neutral-300 ms:px-2 ms:font-sans ms:text-sm ms:p-2">
-        <%= link_to "https://docs.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax", target: "_blank", class: class_names("ms:flex ms:items-center ms:text-neutral-800 ms:no-underline", toolbar_button_classes) do %>
-          <%= image_tag asset_path("marksmith/svgs/markdown.svg"), class: "ms:inline ms:size-4 ms:mr-1" %> <%= t("marksmith.markdown_is_supported").humanize %>
-        <% end %>
-        <% if enable_file_uploads %>
-          <%= button_tag data: { action: "click->marksmith#buttonUpload" }, class: class_names("ms:bg-none ms:border-none ms:bg-transparent ms:text-neutral-600 ms:items-center ms:flex", toolbar_button_classes) do %>
-            <%= image_tag asset_path("marksmith/svgs/paperclip.svg"), class: "ms:inline ms:size-4 ms:mr-1" %> <%= t("marksmith.upload_files").humanize %>
-          <% end %>
-        <% end %>
-        <% if gallery_enabled %>
-          <%= link_to gallery_full_path, data: { turbo_frame: gallery_turbo_frame }, class: class_names("ms:flex ms:items-center ms:text-neutral-800 ms:no-underline", toolbar_button_classes) do %>
-            <%= image_tag asset_path("marksmith/svgs/gallery.svg"), class: "ms:inline ms:size-4 ms:mr-1" %> <%= t("marksmith.attach_from_gallery").humanize %>
-          <% end %>
-        <% end %>
-      </div>
-    <% end %>
-    <%= content_tag :div,
-      class: "ms:hidden ms:markdown-preview ms:size-full ms:flex-1 ms:flex ms:size-full ms:p-2 ms:overflow-auto",
-      id: "markdown-preview-#{name}",
-      data: {
-        marksmith_target: "previewElement",
-      } do %>
-      <div class="ms:button-spinner">
-        <div class="double-bounce1"></div>
-        <div class="double-bounce2"></div>
-      </div>
-    <% end %>
+  <%= render partial: "marksmith/shared/toolbar", locals: { name: editor.name, disabled: editor.disabled } %>
+  <div class="ms:border-t ms:w-full ms:border-neutral-500 ms:flex ms:flex-1">
+    <%= render partial: "marksmith/shared/editor_pane", locals: { editor: } %>
+    <%= render partial: "marksmith/shared/preview_pane", locals: { name: editor.name } %>
   </div>
 <% end %>

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

@@ -0,0 +1,35 @@
+<%= content_tag :div, class: "ms:flex ms:flex-1 ms:flex-col ms:size-full", data: { marksmith_target: "fieldContainer" } do %>
+  <%= text_area_tag editor.field_name, editor.value,
+    id: editor.name,
+    class: class_names(
+      "ms:flex ms:flex-1 ms:border-none ms:resize-none ms:focus:outline-none ms:font-mono ms:focus:ring-0 ms:leading-normal ms:p-2 ms:text-sm ms:field-sizing-content ms:min-h-60",
+      "ms:dark:bg-neutral-800 ms:dark:text-neutral-200",
+      editor.classes
+    ),
+    data: {
+      action: "drop->marksmith#dropUpload paste->marksmith#pasteUpload",
+      marksmith_target: "fieldElement",
+      **editor.data_attributes
+    },
+    disabled: editor.disabled,
+    placeholder: editor.placeholder,
+    autofocus: editor.autofocus,
+    style: editor.style
+  %>
+  <% toolbar_button_classes = "ms:cursor-pointer ms:hover:bg-neutral-200 ms:px-1 ms:py-px ms:rounded ms:text-sm ms:dark:text-neutral-300 ms:dark:hover:bg-neutral-600" %>
+  <div class="ms:flex ms:flex-1 ms:flex-grow ms:space-x-2 ms:py-1 ms:border-t ms:border-neutral-500 ms:px-2 ms:font-sans ms:text-sm ms:p-2 ms:dark:bg-neutral-800 ms:dark:text-neutral-300 ms:rounded-b-md">
+    <%= link_to "https://docs.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax", target: "_blank", class: class_names("ms:flex ms:items-center ms:text-neutral-800 ms:no-underline ms:gap-1", toolbar_button_classes) do %>
+      <%= marksmith_inline_svg("app/assets/images/marksmith/svgs/markdown.svg") %> <span><%= t("marksmith.markdown_is_supported").humanize %></span>
+    <% end %>
+    <% if editor.enable_file_uploads %>
+      <%= button_tag data: { action: "click->marksmith#buttonUpload" }, class: class_names("ms:bg-none ms:border-none ms:bg-transparent ms:text-neutral-600 ms:items-center ms:flex ms:gap-1", toolbar_button_classes) do %>
+        <%= marksmith_inline_svg("app/assets/images/marksmith/svgs/paperclip.svg") %> <span><%= t("marksmith.upload_files").humanize %></span>
+      <% end %>
+    <% end %>
+    <% if editor.gallery_enabled %>
+      <%= link_to editor.gallery_full_path, data: { turbo_frame: editor.gallery_turbo_frame }, class: class_names("ms:flex ms:items-center ms:text-neutral-800 ms:no-underline ms:gap-1", toolbar_button_classes) do %>
+        <%= marksmith_inline_svg("app/assets/images/marksmith/svgs/gallery.svg") %> <span><%= t("marksmith.attach_from_gallery").humanize %></span>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,4 @@
+<div class="ms:button-spinner">
+  <div class="double-bounce1"></div>
+  <div class="double-bounce2"></div>
+</div>

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

@@ -0,0 +1,8 @@
+<%= content_tag :div,
+  class: "ms:hidden ms:markdown-preview ms:size-full ms:flex-1 ms:flex ms:size-full ms:p-2 ms:overflow-auto ms:bg-white ms:dark:bg-neutral-800 ms:rounded-b-md",
+  id: "markdown-preview-#{name}",
+  data: {
+    marksmith_target: "previewPane",
+  } do %>
+  <%= render partial: "marksmith/shared/loading_indicator" %>
+<% end %>

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

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

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

@@ -0,0 +1,8 @@
+<div class="ms:flex-1 ms:flex ms:items:center">
+  <button class="<%= marksmith_tab_classes %> active" data-action="click->marksmith#switchToWrite" data-marksmith-target="writeTabButton" type="button">
+    <%= t('marksmith.write').humanize %>
+  </button>
+  <button class="<%= marksmith_tab_classes %>" data-action="click->marksmith#switchToPreview" data-marksmith-target="previewTabButton" type="button">
+    <%= t('marksmith.preview').humanize %>
+  </button>
+</div>

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

@@ -0,0 +1,8 @@
+<%= tag.div class: class_names(
+  "ms:flex-1 ms:flex-col-reverse ms:@md:flex-row ms:grow ms:flex  ms:justify-bewteen ms:bg-neutral-50 ms:rounded-t-md ms:gap-y-1",
+  "ms:dark:bg-neutral-700 ms:dark:text-neutral-200"
+) do %>
+  <%= render partial: "marksmith/shared/tabs" %>
+
+  <%= render partial: "marksmith/shared/action_bar", locals: { name:, disabled: } %>
+<% end %>

data/config/locales/marksmith.de.yml

@@ -0,0 +1,17 @@
+de:
+  marksmith:
+    attach_from_gallery: Aus Galerie hinzufügen
+    bold: Fett
+    code: Code
+    header: Überschrift
+    image: Bild
+    italic: Kursiv
+    link: Link
+    markdown_is_supported: Markdown wird unterstützt
+    ordered_list: Nummerierte Liste
+    preview: Voransicht
+    quote: Zitat
+    task_list: TODO Liste
+    unordered_list: Liste
+    upload_files: Dateien uploaden
+    write: Schreiben

data/lib/marksmith/engine.rb

@@ -4,8 +4,8 @@ module Marksmith
 
     initializer "marksmith.view_helpers" do
       ActiveSupport.on_load :action_view do
-        require "marksmith/helper"
-        ActionView::Base.include Marksmith::Helper
+        require_relative "../../app/helpers/marksmith/marksmith_helper"
+        ActionView::Base.include Marksmith::MarksmithHelper
 
         module FormBuilderExtensions
           def marksmith(*args, **kwargs, &block)

data/lib/marksmith/version.rb

@@ -1,3 +1,3 @@
 module Marksmith
-  VERSION = "0.2.2"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: marksmith
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Adrian Marin
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-21 00:00:00.000000000 Z
+date: 2025-04-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -37,13 +37,11 @@ files:
 - 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/gallery.svg
 - app/assets/images/marksmith/svgs/header.svg
 - app/assets/images/marksmith/svgs/image.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/markdown.svg
 - app/assets/images/marksmith/svgs/ordered-list.svg
@@ -70,12 +68,21 @@ files:
 - app/frontend/entrypoints/javascript/controllers/index.js
 - app/frontend/entrypoints/javascript/controllers/list_continuation_controller.js
 - app/frontend/entrypoints/javascript/controllers/marksmith_controller.js
+- app/helpers/marksmith/marksmith_helper.rb
 - app/models/marksmith/application_record.rb
+- app/models/marksmith/editor.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/_action_bar.html.erb
 - app/views/marksmith/shared/_editor.html.erb
+- app/views/marksmith/shared/_editor_pane.html.erb
+- app/views/marksmith/shared/_loading_indicator.html.erb
+- app/views/marksmith/shared/_preview_pane.html.erb
 - app/views/marksmith/shared/_rendered_body.html.erb
+- app/views/marksmith/shared/_tabs.html.erb
+- app/views/marksmith/shared/_toolbar.html.erb
+- config/locales/marksmith.de.yml
 - config/locales/marksmith.en.yml
 - config/routes.rb
 - config/vite.json
@@ -85,7 +92,6 @@ files:
 - lib/marksmith/configuration.rb
 - lib/marksmith/engine.rb
 - lib/marksmith/fields/markdown_field.rb
-- lib/marksmith/helper.rb
 - lib/marksmith/version.rb
 - lib/tasks/marksmith_tasks.rake
 homepage: https://github.com/avo-hq/marksmith

data/app/assets/images/marksmith/svgs/color-swatch copy.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
-</svg>

data/app/assets/images/marksmith/svgs/link copy.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/>
-</svg>

data/lib/marksmith/helper.rb

@@ -1,29 +0,0 @@
-module Marksmith
-  module Helper
-    def marksmithed(body)
-      Marksmith::Renderer.new(body:).render
-    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
-
-    def marksmith_button_classes
-      class_names("ms:flex ms:items:center ms:cursor-pointer ms:py-1 ms:px-1.5 ms:hover:bg-neutral-200 ms:rounded")
-    end
-
-    def marksmith_toolbar_button(name, **kwargs)
-      content_tag "md-#{name}", marksmith_toolbar_svg(name), title: t("marksmith.#{name.to_s.gsub("-", "_")}").humanize, class: marksmith_button_classes
-    end
-
-    # TODO: maybe inline svgs in the future
-    def marksmith_toolbar_svg(name)
-      image_tag asset_path("marksmith/svgs/#{name}.svg"), class: "ms:inline ms:size-4"
-    end
-  end
-end