ordars_rails_editor 0.1.0

data/app/views/ordars_rails_editor/_editor.html.erb

@@ -0,0 +1,84 @@
+<%# ordars-rails-editor 본체 파셜 — 헬퍼 ore_editor 가 렌더.
+    locals: input_name, content, placeholder, upload_url, attach_name,
+            max_images, max_videos, max_mb, show_attach, editor_id %>
+<div class="ore" id="<%= editor_id %>"
+     data-ore-editor
+     data-ore-placeholder="<%= placeholder %>"
+     <% if upload_url.present? %>data-ore-upload-url="<%= upload_url %>"<% end %>
+     <% if attach_name.present? %>data-ore-attach-name="<%= attach_name %>"<% end %>
+     data-ore-max-images="<%= max_images %>"
+     data-ore-max-videos="<%= max_videos %>"
+     data-ore-max-mb="<%= max_mb %>">
+
+  <%# 저장 필드 — 에디터가 update/submit 마다 HTML 을 동기화 %>
+  <textarea class="ore-input" name="<%= input_name %>" hidden aria-hidden="true"><%= content %></textarea>
+
+  <div class="ore-toolbar">
+    <select class="ore-select ore-fontsize" data-tip="글자 크기">
+      <option value="">크기</option>
+      <option value="13px">13px</option>
+      <option value="15px">15px</option>
+      <option value="16px">16px</option>
+      <option value="18px">18px</option>
+      <option value="22px">22px</option>
+      <option value="28px">28px</option>
+    </select>
+    <span class="ore-sep"></span>
+    <button type="button" class="ore-btn" data-cmd="bulletList" data-tip="글머리 목록"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="4" cy="6" r="1.4" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1.4" fill="currentColor" stroke="none"/><path d="M9 6h12M9 12h12M9 18h12"/></svg></button>
+    <button type="button" class="ore-btn" data-cmd="orderedList" data-tip="번호 목록"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 6h11M10 12h11M10 18h11"/><text x="2" y="8" font-size="7.5" fill="currentColor" stroke="none" font-weight="700">1</text><text x="2" y="14.5" font-size="7.5" fill="currentColor" stroke="none" font-weight="700">2</text><text x="2" y="21" font-size="7.5" fill="currentColor" stroke="none" font-weight="700">3</text></svg></button>
+    <button type="button" class="ore-btn" data-cmd="blockquote" data-tip="인용">❝</button>
+    <span class="ore-sep"></span>
+    <button type="button" class="ore-btn" data-cmd="bold" data-tip="굵게 (Ctrl+B)"><b>B</b></button>
+    <button type="button" class="ore-btn" data-cmd="italic" data-tip="기울임 (Ctrl+I)"><i>I</i></button>
+    <button type="button" class="ore-btn" data-cmd="strike" data-tip="취소선"><s>S</s></button>
+    <button type="button" class="ore-btn" data-cmd="underline" data-tip="밑줄 (Ctrl+U)"><u>U</u></button>
+    <button type="button" class="ore-btn" data-cmd="code" data-tip="코드">&lt;/&gt;</button>
+    <span class="ore-sep"></span>
+    <span class="ore-btnwrap">
+      <button type="button" class="ore-btn" data-pop=".ore-colorpop" data-tip="글자색"><span style="border-bottom:3px solid #dc2626;">A</span></button>
+      <span class="ore-pop ore-colorpop"><span class="ore-pal ore-colorpal"></span></span>
+    </span>
+    <span class="ore-btnwrap">
+      <button type="button" class="ore-btn" data-pop=".ore-hlpop" data-tip="형광펜"><span style="background:#fef08a;border-radius:3px;padding:0 3px;">가</span></button>
+      <span class="ore-pop ore-hlpop"><span class="ore-pal ore-hlpal"></span></span>
+    </span>
+    <button type="button" class="ore-btn" data-cmd="link" data-tip="링크 삽입/해제"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></button>
+    <button type="button" class="ore-btn" data-cmd="hr" data-tip="구분선">—</button>
+    <span class="ore-sep"></span>
+    <button type="button" class="ore-btn" data-cmd="alignLeft" data-tip="왼쪽 정렬"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 10h12M3 14h18M3 18h12"/></svg></button>
+    <button type="button" class="ore-btn" data-cmd="alignCenter" data-tip="가운데 정렬"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M6 10h12M3 14h18M6 18h12"/></svg></button>
+    <button type="button" class="ore-btn" data-cmd="alignRight" data-tip="오른쪽 정렬"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M9 10h12M3 14h18M9 18h12"/></svg></button>
+    <button type="button" class="ore-btn" data-cmd="alignJustify" data-tip="양쪽 정렬"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 10h18M3 14h18M3 18h18"/></svg></button>
+    <span class="ore-sep"></span>
+    <button type="button" class="ore-btn ore-imgbtn" data-tip="이미지 본문 삽입"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg></button>
+    <span class="ore-tail">
+      <button type="button" class="ore-btn" data-cmd="undo" data-tip="실행 취소 (Ctrl+Z)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14L4 9l5-5"/><path d="M4 9h10a6 6 0 010 12h-3"/></svg></button>
+      <button type="button" class="ore-btn" data-cmd="redo" data-tip="다시 실행 (Ctrl+Y)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14l5-5-5-5"/><path d="M20 9H10a6 6 0 000 12h3"/></svg></button>
+      <span class="ore-sep"></span>
+      <button type="button" class="ore-btn ore-btn--wide ore-htmlbtn" data-cmd="html" data-tip="HTML 소스 편집">HTML</button>
+    </span>
+  </div>
+
+  <div class="ore-content"></div>
+  <textarea class="ore-html" spellcheck="false"></textarea>
+
+  <% if show_attach %>
+    <div class="ore-attachbar">
+      <span class="grp"><button type="button" class="ore-filebtn" data-tip="파일 첨부 (드래그도 가능)">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
+        파일</button></span>
+      <span class="grp">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+        이미지 <span class="ore-cnt-img">0</span>/<%= max_images %> <span class="ore-gauge ore-g-img"><i></i></span></span>
+      <span class="grp">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M10 9l5 3-5 3z" fill="currentColor" stroke="none"/></svg>
+        동영상 <span class="ore-cnt-vid">0</span>/<%= max_videos %> <span class="ore-gauge ore-g-vid"><i></i></span></span>
+      <span class="cap">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
+        첨부파일용량 <b class="ore-cap-used">0.00MB</b>/<%= max_mb %>MB <span class="ore-gauge ore-g-cap" style="width:110px;"><i></i></span></span>
+    </div>
+    <div class="ore-attachlist">
+      <div class="ore-attach-empty">첨부된 파일이 없습니다. — [파일] 버튼 또는 이 영역에 드래그</div>
+    </div>
+  <% end %>
+</div>

data/config/importmap.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+# ordars-rails-editor importmap pins — gem 로드 시 자동 등록
+pin "ordars_rails_editor", to: "ordars_rails_editor/index.js"
+pin "ordars_rails_editor/tiptap", to: "ordars_rails_editor/tiptap.js", preload: false

data/lib/ordars_rails_editor/engine.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module OrdarsRailsEditor
+  class Engine < ::Rails::Engine
+    isolate_namespace OrdarsRailsEditor
+
+    initializer "ordars_rails_editor.assets" do |app|
+      if app.config.respond_to?(:assets)
+        app.config.assets.paths << root.join("app/assets/stylesheets")
+        app.config.assets.precompile += %w[ordars_rails_editor.css] if app.config.assets.respond_to?(:precompile)
+      end
+
+      # importmap 앱: JS 를 애셋 경로로 노출
+      if app.config.respond_to?(:importmap)
+        app.config.assets.paths << root.join("app/javascript")
+      end
+    end
+
+    initializer "ordars_rails_editor.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        app.config.importmap.paths << root.join("config/importmap.rb")
+        app.config.importmap.cache_sweepers << root.join("app/javascript")
+      end
+    end
+
+    initializer "ordars_rails_editor.helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include OrdarsRailsEditor::EditorHelper if defined?(OrdarsRailsEditor::EditorHelper)
+      end
+    end
+
+    initializer "ordars_rails_editor.view_paths" do
+      ActiveSupport.on_load(:action_controller) do
+        append_view_path OrdarsRailsEditor::Engine.root.join("app/views")
+      end
+    end
+  end
+end

data/lib/ordars_rails_editor/sanitizer.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module OrdarsRailsEditor
+  # 에디터 저장 HTML 서버측 새니타이저 — 저장형 XSS 방어의 정본.
+  #
+  # ⭐호스트 앱은 «저장 직전» 반드시 이걸 통과시킨다:
+  #     post.content = OrdarsRailsEditor::Sanitizer.clean(params[:content])
+  #   클라이언트(에디터)가 만드는 HTML 스키마와 이 화이트리스트는 한 쌍 — 에디터에 서식을
+  #   추가하면 여기 허용 목록도 함께 넓힌다(안 넓히면 저장 시 조용히 벗겨진다 — 의도된 동작).
+  #
+  # style 속성은 통째 허용하지 않고 «속성 단위»로 거른다(color/background-color/font-size/text-align).
+  module Sanitizer
+    ALLOWED_TAGS = %w[p br strong b em i s del u code pre blockquote ul ol li h1 h2 h3 hr a img span].freeze
+    ALLOWED_ATTRIBUTES = %w[href target rel src alt width height style data-file-id].freeze
+    ALLOWED_STYLE_PROPS = %w[color background-color font-size text-align].freeze
+    ALLOWED_URI_SCHEMES = %w[http https mailto tel].freeze
+
+    module_function
+
+    def clean(html)
+      return "" if html.nil? || html.to_s.strip.empty?
+
+      sanitized = base_sanitizer.sanitize(
+        html.to_s,
+        tags: ALLOWED_TAGS,
+        attributes: ALLOWED_ATTRIBUTES,
+        scrubber: nil
+      )
+
+      frag = Loofah.fragment(sanitized)
+
+      # style 은 허용 속성만 통과
+      frag.css("[style]").each do |node|
+        filtered = filter_style(node["style"])
+        filtered.empty? ? node.remove_attribute("style") : (node["style"] = filtered)
+      end
+
+      # 링크: 스킴 화이트리스트 + 새 탭 안전 rel
+      frag.css("a").each do |a|
+        href = a["href"].to_s.strip
+        scheme = href[/\A([a-z][a-z0-9+.-]*):/i, 1]&.downcase
+        if href.empty? || (scheme && !ALLOWED_URI_SCHEMES.include?(scheme))
+          a.remove_attribute("href")
+        end
+        a["rel"] = "noopener noreferrer" if a["target"].to_s == "_blank"
+      end
+
+      frag.to_s
+    end
+
+    def filter_style(style)
+      style.to_s.split(";").filter_map do |decl|
+        prop, value = decl.split(":", 2)
+        next if prop.nil? || value.nil?
+        prop = prop.strip.downcase
+        value = value.strip
+        next unless ALLOWED_STYLE_PROPS.include?(prop)
+        next if value.match?(/url\s*\(|expression|javascript/i)
+        "#{prop}: #{value}"
+      end.join("; ")
+    end
+
+    def base_sanitizer
+      @base_sanitizer ||= Rails::HTML5::SafeListSanitizer.new
+    end
+  end
+end

data/lib/ordars_rails_editor/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module OrdarsRailsEditor
+  VERSION = "0.1.0"
+end

data/lib/ordars_rails_editor.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require_relative "ordars_rails_editor/version"
+require_relative "ordars_rails_editor/sanitizer"
+require_relative "ordars_rails_editor/engine"
+
+module OrdarsRailsEditor
+  class Error < StandardError; end
+
+  # 기본 첨부 한도 (헬퍼 옵션으로 개별 지정 가능)
+  mattr_accessor :default_max_images, default: 100
+  mattr_accessor :default_max_videos, default: 50
+  mattr_accessor :default_max_total_mb, default: 50
+
+  def self.configure
+    yield self
+  end
+end

metadata

@@ -0,0 +1,70 @@
+--- !ruby/object:Gem::Specification
+name: ordars_rails_editor
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- reshacs
+bindir: bin
+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: '7.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.0'
+description: A board-style WYSIWYG editor for Rails apps. Ships a bundled Tiptap/ProseMirror
+  core (no external CDN), an etoland-style toolbar with color/highlight palettes and
+  tooltips, an attachment panel with upload adapter, HTML source mode, a server-side
+  sanitizer, and CSS-variable theming.
+email:
+- allevery80@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- app/assets/stylesheets/ordars_rails_editor.css
+- app/helpers/ordars_rails_editor/editor_helper.rb
+- app/javascript/ordars_rails_editor/index.js
+- app/javascript/ordars_rails_editor/tiptap.js
+- app/views/ordars_rails_editor/_editor.html.erb
+- config/importmap.rb
+- lib/ordars_rails_editor.rb
+- lib/ordars_rails_editor/engine.rb
+- lib/ordars_rails_editor/sanitizer.rb
+- lib/ordars_rails_editor/version.rb
+homepage: https://github.com/ordars/ordars-rails-editor
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.9
+specification_version: 4
+summary: Rich text editor for Rails (Tiptap core + self-contained toolbar/attachment
+  shell)
+test_files: []