ponkotsu-md-editor 0.1.0

data/app/assets/stylesheets/markdown_editor.css

@@ -0,0 +1,42 @@
+
+@theme {
+    --accent-color: #007bff; /* 例: ブルー */
+    --accent-color-hover: #0056b3; /* 例: ダークブルー */
+    --preview-bg: #363636; /* 例: ダークグレー */
+    --text-primary: #ffffff; /* 例: ホワイト */
+}
+
+.editor-container {
+    position: relative;
+}
+
+#editor_content {
+    position: relative;
+    /* エディターのスタイルは既存のまま */
+    overflow: hidden; /* はみ出し防止 */
+    height: calc(24 * 20px);
+}
+
+#editor_content_placeholder {
+    position: absolute;
+    top: -17px;     /* editor_contentのpaddingに合わせて調整 */
+    left: 13px;    /* editor_contentのpaddingに合わせて調整 */
+    color: #999;
+    pointer-events: none;
+    z-index: 1;
+    white-space: pre-line;  /* 改行を表示 */
+    /* デフォルトで表示 */
+    display: block;
+    max-height: calc(24 * 20px);
+    overflow: hidden;
+}
+
+/* emptyクラスがない時（コンテンツがある時）にプレースホルダーを隠す */
+#editor_content:not(.empty) ~ #editor_content_placeholder {
+    display: none;
+}
+
+/*!* フォーカス時も隠す *!*/
+/*#editor_content:focus ~ #editor_content_placeholder {*/
+/*    display: none;*/
+/*}*/

data/app/ponkotsu/md/editor/_editor.html.erb

@@ -0,0 +1,102 @@
+<%
+  _options = {
+    form: form,
+    content: content,
+    lang: options[:lang] || :en,
+    preview: options[:preview] || true,
+    tools: options[:tools] || %w[bold italic strikethrough heading1 heading2 heading3 heading4 heading5 heading6 unordered_list ordered_list check_list blockquote link image code code_block table horizontal_rule],
+    placeholder: locals[:placeholder] || case lang
+    when :en
+      <<-EOS
+      EOS
+    when :ja
+      <<-EOS
+      Markdownで記事を書いてください...
+
+      例：
+      # 見出し1
+      ## 見出し2
+      ### 見出し3
+
+      **太字** *斜体* ~~打ち消し線~~
+
+      - 箇条書きリスト
+      - リストアイテム2
+
+      1. 番号付きリスト
+      2. 番号付きアイテム2
+
+      - [ ] 未完了タスク
+      - [x] 完了済みタスク
+
+      > 引用ブロック
+      > 複数行の引用文
+
+      [リンク](https://example.com)
+      ![画像](画像URL)
+
+      `インラインコード`
+
+      ```
+      コードブロック
+      function example() {
+      return 'Hello';
+      }
+      ```
+
+      | 列1 | 列2 | 列3 |
+      |-----|-----|-----|
+      | セル1 | セル2 | セル3 |
+
+      ---
+
+      詳しい記法はツールバーのボタンをご活用ください。
+      EOS
+      else
+        "Not supported language"
+      end
+  }
+%>
+
+<div class="markdown-editor">
+  <%= render "toolbar", options: _options %>
+  <%= render "input_area", options: _options %>
+</div>
+<div class="form-text medium-contrast-text">
+  <strong><%= case lang
+              when :en
+                "You can write in Markdown."
+              when :ja
+                "Markdownで記載できます。"
+              else
+                "N/A"
+              end %></strong>
+  <a href="#" data-bs-toggle="modal" data-bs-target="#markdownHelpModal" class="text-decoration-none" style="color: var(--accent-color);">
+    <%= case lang
+        when :en
+          "Writing Guide"
+        when :ja
+          "書き方ガイド"
+        else
+          "N/A"
+        end %>
+  </a> |
+  <strong><%= case lang
+              when :en
+                "Keyboard Shortcuts"
+              when :ja
+                "キーボードショートカット"
+              else
+                "N/A"
+              end %>：</strong>
+  <%= case lang
+      when :en
+        "Ctrl+B (Bold), Ctrl+I (Italic), Ctrl+K (Link), Tab (Indent)"
+      when :ja
+        "Ctrl+B (太字), Ctrl+I (斜体), Ctrl+K (リンク), Tab (インデント)"
+      else
+        "N/A"
+      end %>
+</div>
+
+<%= javascript_include_tag 'markdown_editor' %>

data/app/ponkotsu/md/editor/_input_area.html.erb

@@ -0,0 +1,22 @@
+<%
+  form = locals[:form]
+  content = locals[:content]
+  placeholder = locals[:placeholder]
+%>
+
+<div class="editor-container">
+  <div id="editor_content"
+       contenteditable="true"
+       data-field="content"
+       class="form-control markdown-textarea">
+    <%= raw content %>
+  </div>
+
+  <div id="editor_content_placeholder">
+    <%= placeholder %>
+  </div>
+
+  <%= form.hidden_field :content, id: "content_hidden_field" %>
+
+  <%= render "preview_area" %>
+</div>

data/app/ponkotsu/md/editor/_preview_area.html.erb

@@ -0,0 +1,3 @@
+<div class="markdown-preview" id="markdownPreview"
+     style="display: none; min-height: 500px; padding: 1rem; background-color: var(--preview-bg); border: 1px solid var(--border-color); border-radius: 0.375rem; color: var(--text-primary);">
+</div>

data/app/ponkotsu/md/editor/_toolbar.html.erb

@@ -0,0 +1,150 @@
+<%
+  enable_bold = options[:tools].include?('bold')
+  enable_italic = options[:tools].include?('italic')
+  enable_strikethrough = options[:tools].include?('strikethrough')
+  enable_heading1 = options[:tools].include?('heading1')
+  enable_heading2 = options[:tools].include?('heading2')
+  enable_heading3 = options[:tools].include?('heading3')
+  enable_heading4 = options[:tools].include?('heading4')
+  enable_heading5 = options[:tools].include?('heading5')
+  enable_heading6 = options[:tools].include?('heading6')
+  enable_unordered_list = options[:tools].include?('unordered_list')
+  enable_ordered_list = options[:tools].include?('ordered_list')
+  enable_check_list = options[:tools].include?('check_list')
+  enable_blockquote = options[:tools].include?('blockquote')
+  enable_link = options[:tools].include?('link')
+  enable_image = options[:tools].include?('image')
+  enable_code = options[:tools].include?('code')
+  enable_code_block = options[:tools].include?('code_block')
+  enable_table = options[:tools].include?('table')
+  enable_horizontal_rule = options[:tools].include?('horizontal_rule')
+  enable_preview = options[:preview]
+%>
+
+<div class="editor-toolbar mb-2">
+  <div class="btn-group btn-group-sm" role="group">
+    <% if enable_bold %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('**', '**')" title="太字 (Ctrl+B)">
+      <i class="bi bi-type-bold"></i>
+    </button>
+    <% end %>
+
+    <% if enable_italic %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('*', '*')" title="斜体 (Ctrl+I)">
+      <i class="bi bi-type-italic"></i>
+    </button>
+    <% end %>
+
+    <% if enable_strikethrough %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('~~', '~~')" title="打ち消し線">
+      <i class="bi bi-type-strikethrough"></i>
+    </button>
+    <% end %>
+
+    <% if enable_code %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('`', '`')" title="インラインコード">
+      <i class="bi bi-code"></i>
+    </button>
+    <% end %>
+  </div>
+  <div class="btn-group btn-group-sm ms-2" role="group">
+    <% if enable_heading1 %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('# ', '')" title="見出し1">
+      <i class="bi bi-type-h1"></i>
+    </button>
+    <% end %>
+
+    <% if enable_heading2 %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('## ', '')" title="見出し2">
+      <i class="bi bi-type-h2"></i>
+    </button>
+    <% end %>
+
+    <% if enable_heading3 %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('### ', '')" title="見出し3">
+      <i class="bi bi-type-h3"></i>
+    </button>
+    <% end %>
+
+    <% if enable_heading4 %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('#### ', '')" title="見出し4">
+      <i class="bi bi-type-h4"></i>
+    </button>
+    <% end %>
+
+    <% if enable_heading5 %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('##### ', '')" title="見出し5">
+      <i class="bi bi-type-h5"></i>
+    </button>
+    <% end %>
+
+    <% if enable_heading6 %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('###### ', '')" title="見出し6">
+      <i class="bi bi-type-h6"></i>
+    </button>
+    <% end %>
+  </div>
+  <div class="btn-group btn-group-sm ms-2" role="group">
+    <% if enable_link %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('[', '](URL)')" title="リンク">
+      <i class="bi bi-link-45deg"></i>
+    </button>
+    <% end %>
+
+    <% if enable_unordered_list %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('- ', '')" title="箇条書きリスト">
+      <i class="bi bi-list-ul"></i>
+    </button>
+    <% end %>
+
+    <% if enable_ordered_list %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('1. ', '')" title="番号付きリスト">
+      <i class="bi bi-list-ol"></i>
+    </button>
+    <% end %>
+
+    <% if enable_code_block %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertCode()" title="コードスパンまたはコードブロック">
+      <i class="bi bi-code-square"></i>
+    </button>
+    <% end %>
+
+    <% if enable_blockquote %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('> ', '')" title="引用">
+      <i class="bi bi-quote"></i>
+    </button>
+    <% end %>
+
+    <% if enable_image %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('![', '](画像URL)')" title="画像">
+      <i class="bi bi-image"></i>
+    </button>
+    <% end %>
+
+    <% if enable_table %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertTable()" title="テーブル">
+      <i class="bi bi-table"></i>
+    </button>
+    <% end %>
+
+    <% if enable_horizontal_rule %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('\n---\n', '')" title="水平線">
+      <i class="bi bi-dash-lg"></i>
+    </button>
+    <% end %>
+
+    <% if enable_check_list %>
+    <button type="button" class="btn btn-outline-secondary" onclick="insertMarkdown('- [ ] ', '')" title="チェックボックス">
+      <i class="bi bi-check-square"></i>
+    </button>
+    <% end %>
+  </div>
+
+  <% if enable_preview %>
+  <div class="btn-group btn-group-sm ms-2" role="group">
+    <button type="button" class="btn btn-outline-primary" onclick="togglePreview()" id="previewToggle">
+      <i class="bi bi-eye"></i> プレビュー
+    </button>
+  </div>
+  <% end %>
+</div>

data/lib/ponkotsu/md/editor/engine.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PonkotsuMdEditor
+  # Rails Engine for PonkotsuMdEditor gem
+  # This engine integrates the Markdown editor functionality into Rails applications
+  # by providing views, assets, and helper methods for rendering the editor components
+  class Engine < ::Rails::Engine
+    # Isolate this engine's namespace to prevent conflicts with the host application
+    isolate_namespace PonkotsuMdEditor
+
+    # Initialize helper methods to be available in ActionView
+    # This makes PonkotsuMdEditor::Helpers methods accessible in Rails views
+    initializer "ponkotsu_md_editor.helpers" do
+      ActionView::Base.include PonkotsuMdEditor::Helpers
+    end
+  end
+end

data/lib/ponkotsu/md/editor/helpers.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative "editor/"
+
+module PonkotsuMdEditor
+  class Error < StandardError; end
+  # Your code goes here...
+
+  # Helper methods for rendering Markdown editor components in Rails views
+  # This module provides view helpers that can be used in ERB templates
+  # to integrate the PonkotsuMdEditor functionality
+  module Helpers
+    # Renders a Markdown editor component with the specified content and options
+    #
+    # @param content [String] Initial content to display in the editor (default: "")
+    # @param options [Hash] Configuration options for the editor (default: {})
+    # @return [String] Rendered HTML for the Markdown editor
+    #
+    # Example usage in a Rails view:
+    #   <%= markdown_editor(form, :content, {
+    #                                         lang: :en,
+    #                                         preview: true,
+    #                                         tools: [ :bold, :italic, :strikethrough ],
+    #                                         placeholder: "This is Placeholder."
+    #                                       }) %>
+    def markdown_editor(form, content = "", options = {})
+      render "editor", content: content, form: form, options: options
+    end
+  end
+end

data/lib/ponkotsu/md/editor/version.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Ponkotsu
+  module Md
+    module Editor
+      VERSION = "0.1.0"
+    end
+  end
+end

data/sig/ponkotsu/md/editor.rbs

@@ -0,0 +1,8 @@
+module Ponkotsu
+  module Md
+    module Editor
+      VERSION: String
+      # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+    end
+  end
+end

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: ponkotsu-md-editor
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- dhq_boiler
+bindir: exe
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 8.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 8.0.2
+description: There is a bug in Chrome where entering large amounts of text into a
+  textarea element causes significant slowness (https://issues.chromium.org/issues/341564372).
+  This gem serves as a countermeasure for that issue.
+email:
+- dhq_boiler@live.jp
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/markdown_editor.js
+- app/assets/stylesheets/markdown_editor.css
+- app/ponkotsu/md/editor/_editor.html.erb
+- app/ponkotsu/md/editor/_input_area.html.erb
+- app/ponkotsu/md/editor/_preview_area.html.erb
+- app/ponkotsu/md/editor/_toolbar.html.erb
+- lib/ponkotsu/md/editor/engine.rb
+- lib/ponkotsu/md/editor/helpers.rb
+- lib/ponkotsu/md/editor/version.rb
+- sig/ponkotsu/md/editor.rbs
+homepage: https://github.com/dhq-boiler/ponkotsu-md-editor
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/dhq-boiler/ponkotsu-md-editor
+  source_code_uri: https://github.com/dhq-boiler/ponkotsu-md-editor
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.4.5
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: A gem that provides a fun Markdown editor.
+test_files: []