ponkotsu-md-editor 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3fcc832e7c792728b5f24535e0c4db9dd4550b00b1c3c50dc51641e2fe291cd9
|
|
4
|
+
data.tar.gz: 2bfe9efb0fda552216e43ff9e28eb5f87d58310298c40e017688b1313efc58b6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 59ce73c37580fb366eb9ea9c09ea66e81242c6d29c1bf86682f384d352f3f204afebd552b4cfa983bab9d8f802b4ce909590659a54d6eda079cddddcc02d129f
|
|
7
|
+
data.tar.gz: c9ab78eea5d9c4f2e15bf1df75affafc97c419ab25153ea1d6841a39bbb19af20d62accbe6ff731f3832caeb853012e421ebf63ba0db3ca6f032896f8716549e
|
data/README.md
CHANGED
|
@@ -1,39 +1,113 @@
|
|
|
1
|
-
#
|
|
1
|
+
# PonkotsuMdEditor
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://badge.fury.io/rb/ponkotsu-md-editor)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
PonkotsuMdEditorは、Railsアプリケーション向けのシンプルなMarkdownエディタGemです。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
PonkotsuMdEditor is a simple Markdown editor gem for Rails applications.
|
|
8
8
|
|
|
9
|
-
TODO: Replace `UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG` with your gem name right after releasing it to RubyGems.org. Please do not do it earlier due to security reasons. Alternatively, replace this section with instructions to install your gem from git if you don't plan to release to RubyGems.org.
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
Markdownテキストベースの編集エリア、プレビュー、ツールバーなどを備え、簡単に組み込むことができます。
|
|
11
|
+
|
|
12
|
+
It provides a markdown text-based editing area, preview, toolbar, and can be easily integrated into your app.
|
|
13
|
+
|
|
14
|
+
## 特徴/Features
|
|
15
|
+
- シンプルなUIで直感的にMarkdown編集
|
|
16
|
+
- Simple UI for intuitive Markdown editing
|
|
17
|
+
- プレビュー機能付き
|
|
18
|
+
- Includes preview feature
|
|
19
|
+
- JavaScript/CSSアセット同梱
|
|
20
|
+
- Bundled with JavaScript/CSS assets
|
|
21
|
+
- Railsビューに簡単組み込み
|
|
22
|
+
- Easy integration into Rails views
|
|
23
|
+
- textareaタグを使用していないので、Chromium系ブラウザにおける多量のテキスト入力でのパフォーマンス問題を回避（参照：https://issues.chromium.org/issues/341564372）
|
|
24
|
+
- Does not use textarea tag, so avoids performance issues with large text input on Chromium browsers (see: https://issues.chromium.org/issues/341564372)
|
|
25
|
+
|
|
26
|
+
## インストール/Installation
|
|
27
|
+
|
|
28
|
+
Gemfileに以下を追加してください。
|
|
29
|
+
|
|
30
|
+
Add the following to your Gemfile:
|
|
31
|
+
|
|
32
|
+
```ruby
|
|
33
|
+
gem 'ponkotsu-md-editor'
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
その後、以下を実行します。
|
|
37
|
+
|
|
38
|
+
Then run:
|
|
12
39
|
|
|
13
40
|
```bash
|
|
14
|
-
bundle
|
|
41
|
+
bundle install
|
|
15
42
|
```
|
|
16
43
|
|
|
17
|
-
|
|
44
|
+
## アセットについて/About Assets
|
|
45
|
+
|
|
46
|
+
本GemはRailsエンジンとしてアセット（JavaScript/CSS）を自動でプリコンパイル・ロードします。
|
|
47
|
+
|
|
48
|
+
This gem automatically precompiles and loads assets (JavaScript/CSS) as a Rails engine.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
特別な設定や`application.js`/`application.css`へのrequire追加は不要です。
|
|
52
|
+
|
|
53
|
+
No special settings or require statements in `application.js`/`application.css` are needed.
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
**本番環境やプリコンパイルが必要な環境では、以下のコマンドを実行してください。**
|
|
57
|
+
|
|
58
|
+
**In production or environments requiring precompilation, run the following command:**
|
|
18
59
|
|
|
19
60
|
```bash
|
|
20
|
-
|
|
61
|
+
rails assets:precompile
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## 使い方/Usage
|
|
65
|
+
|
|
66
|
+
### ビューへの組み込み例（ERB）/Example of embedding in a view (ERB)
|
|
67
|
+
|
|
68
|
+
```erb
|
|
69
|
+
<%= form_with model: @article, local: true, multipart: true, class: "article-form" do |form| %>
|
|
70
|
+
|
|
71
|
+
<%= markdown_editor(form, :content, @article.content, options: {
|
|
72
|
+
lang: :ja,
|
|
73
|
+
preview: true,
|
|
74
|
+
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]
|
|
75
|
+
}) %>
|
|
76
|
+
|
|
77
|
+
<% end %>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### コントローラでのパラメータ受け取り/Receiving parameters in controller
|
|
81
|
+
|
|
82
|
+
hiddenフィールドにMarkdownテキストが格納されます。あとは良しなに。
|
|
83
|
+
|
|
84
|
+
The markdown text is stored in a hidden field. Handle as needed.
|
|
85
|
+
|
|
86
|
+
```ruby
|
|
87
|
+
params[:model][:content] # => Markdown text
|
|
21
88
|
```
|
|
22
89
|
|
|
23
|
-
##
|
|
90
|
+
## 開発・テスト/Development & Testing
|
|
91
|
+
|
|
92
|
+
このgemは主にRailsのview要素（ヘルパー、パーシャル、JS/CSSアセット）を提供するため、RSpec等の通常のテストではUIや動作の自動テストは困難です。
|
|
93
|
+
|
|
94
|
+
This gem mainly provides Rails view elements (helpers, partials, JS/CSS assets), so UI and behavior cannot be automatically tested with standard RSpec, etc.
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
- UIやエディタの動作確認には、手動テストを推奨します。
|
|
98
|
+
- For UI/editor behavior, manual testing is recommended.
|
|
24
99
|
|
|
25
|
-
|
|
100
|
+
## コントリビュート/Contributing
|
|
26
101
|
|
|
27
|
-
|
|
102
|
+
バグ報告・プルリクエストは歓迎します。
|
|
28
103
|
|
|
29
|
-
|
|
104
|
+
Bug reports and pull requests are welcome.
|
|
30
105
|
|
|
31
|
-
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
|
32
106
|
|
|
33
|
-
|
|
107
|
+
GitHub repository: https://github.com/dhq-boiler/ponkotsu-md-editor
|
|
34
108
|
|
|
35
|
-
|
|
109
|
+
## ライセンス/License
|
|
36
110
|
|
|
37
|
-
|
|
111
|
+
このGemは[MITライセンス](https://opensource.org/licenses/MIT)のもとで公開されています。
|
|
38
112
|
|
|
39
|
-
|
|
113
|
+
This gem is released under the [MIT License](https://opensource.org/licenses/MIT).
|
|
@@ -27,6 +27,23 @@
|
|
|
27
27
|
textarea.addEventListener('blur', syncToHidden);
|
|
28
28
|
// 初期化時にも同期
|
|
29
29
|
syncToHidden();
|
|
30
|
+
|
|
31
|
+
// 初期状態でプレースホルダを表示するための空要素チェック
|
|
32
|
+
function updatePlaceholderVisibility() {
|
|
33
|
+
// <br>のみの場合も空とみなす
|
|
34
|
+
if (textarea.innerHTML.trim() === ' ' || textarea.innerHTML.trim() === '' || textarea.innerHTML.trim() === '\<br\>') {
|
|
35
|
+
textarea.classList.add('empty');
|
|
36
|
+
} else {
|
|
37
|
+
textarea.classList.remove('empty');
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// 初期状態をチェック
|
|
42
|
+
updatePlaceholderVisibility();
|
|
43
|
+
|
|
44
|
+
// 入力時にプレースホルダの表示/非表示を制御
|
|
45
|
+
textarea.addEventListener('input', updatePlaceholderVisibility);
|
|
46
|
+
textarea.addEventListener('blur', updatePlaceholderVisibility);
|
|
30
47
|
}
|
|
31
48
|
} else {
|
|
32
49
|
callback();
|
|
@@ -8,7 +8,12 @@
|
|
|
8
8
|
contenteditable="true"
|
|
9
9
|
data-field="content"
|
|
10
10
|
class="form-control markdown-textarea">
|
|
11
|
-
|
|
11
|
+
<%
|
|
12
|
+
def crlf_to_br(text)
|
|
13
|
+
text.gsub(/\r\n|\r|\n/, "<br>").html_safe
|
|
14
|
+
end
|
|
15
|
+
%>
|
|
16
|
+
<%= crlf_to_br(h(locals[:content])) %>
|
|
12
17
|
</div>
|
|
13
18
|
|
|
14
19
|
<div id="editor_content_placeholder">
|
|
@@ -13,7 +13,7 @@ module PonkotsuMdEditor
|
|
|
13
13
|
# @param form [ActionView::Helpers::FormBuilder] The form builder object.
|
|
14
14
|
# @param attribute [Symbol, String] The attribute name to bind the editor to (e.g., :content).
|
|
15
15
|
# @param content [String] The initial content to display in the editor.
|
|
16
|
-
# @param options [Hash] Editor configuration options (
|
|
16
|
+
# @param options [Hash] Editor configuration options (:bold :italic :strikethrough :heading1 :heading2 :heading3 :heading4 :heading5 :heading6 :unordered_list :ordered_list :check_list :blockquote :link :image :code :code_block :table :horizontal_rule).
|
|
17
17
|
# @return [String] The rendered HTML for the Markdown editor.
|
|
18
18
|
#
|
|
19
19
|
# Example usage in a Rails view:
|
|
@@ -27,6 +27,7 @@ module PonkotsuMdEditor
|
|
|
27
27
|
form = form[:form] if form.is_a?(Hash)
|
|
28
28
|
attribute = attribute[:attribute] if attribute.is_a?(Hash)
|
|
29
29
|
content = content[:attribute] if content.is_a?(Hash)
|
|
30
|
+
options = options[:options] if options.is_a?(Hash)
|
|
30
31
|
render "ponkotsu_md_editor/editor", locals: { attribute: attribute, content: content, form: form, options: options }
|
|
31
32
|
end
|
|
32
33
|
end
|