action_markdown 0.1.2 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +11 -0
- data/app/assets/stylesheets/action_markdown/action_markdown_toolbar.css +42 -0
- data/app/helpers/action_markdown/tag_helper.rb +98 -0
- data/app/models/action_markdown/markdown_text.rb +1 -0
- data/lib/action_markdown/engine.rb +6 -0
- data/lib/action_markdown/version.rb +1 -1
- data/lib/generators/action_markdown/install/install_generator.rb +29 -0
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 819dfe2572347f57003b682837bf117fcb0548e1a3794fdf4a30d5575d8c0a09
|
4
|
+
data.tar.gz: 56c826b841e25557d305651d848ec0707f63a50cfb5b41ecf00f86e966841a5d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 271f2cd02c1b66af671b0e940bdb4b1efdefbc38587e86ba97a576ed2d8e907c0243c69a44c461ee3aec75a3aa70aafef93ce85f76da14d686c3c54cf5d0ed09
|
7
|
+
data.tar.gz: a5a108c1a0b0fd10182e6f07bebe04518922f2270d829652b50910aa85a521607bfb4919ac6619fc6ffbd0308cdd3f3e702d9b1973bbc13232e060be21e7e78f
|
data/README.md
CHANGED
@@ -63,6 +63,17 @@ In the view above, the Markdown content will automatically be converted to the f
|
|
63
63
|
<p>This is a paragraph.</p>
|
64
64
|
```
|
65
65
|
|
66
|
+
**Note**: To use a Markdown fields in forms, we should use the `markdown_field` helper like in the following example:
|
67
|
+
|
68
|
+
```erb
|
69
|
+
<%= form_with model: article do |f| %>
|
70
|
+
<%= f.label :content %>
|
71
|
+
<%= f.markdown_field :content %>
|
72
|
+
|
73
|
+
<%= f.submit "Save" %>
|
74
|
+
<% end %>
|
75
|
+
```
|
76
|
+
|
66
77
|
## License
|
67
78
|
|
68
79
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -0,0 +1,42 @@
|
|
1
|
+
.action-markdown-toolbar {
|
2
|
+
/* Colors */
|
3
|
+
--am-toolbar-background: hsl(0, 0%, 95%);
|
4
|
+
--am-toolbar-item-hover: hsl(0, 0%, 85%);
|
5
|
+
--am-toolbar-item-color: hsl(0, 0%, 15%);
|
6
|
+
|
7
|
+
/* Spaces */
|
8
|
+
--am-toolbar-gap: 0.5rem;
|
9
|
+
--am-toolbar-padding: 0.25rem;
|
10
|
+
--am-toolbar-border-radius: 0.25rem;
|
11
|
+
--am-toolbar-item-border-radius: 0.125rem;
|
12
|
+
|
13
|
+
/* Actual styles */
|
14
|
+
display: flex;
|
15
|
+
gap: var(--am-toolbar-gap);
|
16
|
+
|
17
|
+
background-color: var(--am-toolbar-background);
|
18
|
+
border-radius: var(--am-toolbar-border-radius);
|
19
|
+
padding: var(--am-toolbar-padding);
|
20
|
+
overflow: auto;
|
21
|
+
}
|
22
|
+
|
23
|
+
.action-markdown-toolbar > * {
|
24
|
+
display: flex;
|
25
|
+
align-items: center;
|
26
|
+
cursor: pointer;
|
27
|
+
border-radius: var(--am-toolbar-item-border-radius);
|
28
|
+
padding: var(--am-toolbar-padding);
|
29
|
+
}
|
30
|
+
|
31
|
+
.action-markdown-toolbar > *:hover {
|
32
|
+
background-color: var(--am-toolbar-item-hover);
|
33
|
+
}
|
34
|
+
|
35
|
+
.action-markdown-toolbar svg {
|
36
|
+
fill: var(--am-toolbar-item-color);
|
37
|
+
}
|
38
|
+
|
39
|
+
.action-markdown-input {
|
40
|
+
max-width: 100%;
|
41
|
+
min-width: 100%;
|
42
|
+
}
|
@@ -0,0 +1,98 @@
|
|
1
|
+
require "action_view/helpers/tags/placeholderable"
|
2
|
+
|
3
|
+
module ActionMarkdown
|
4
|
+
module TagHelper
|
5
|
+
cattr_accessor(:id, instance_accessor: false) { 0 }
|
6
|
+
|
7
|
+
def markdown_field_tag(name, value = nil, options = {})
|
8
|
+
options = options.symbolize_keys
|
9
|
+
options[:id] ||= "action_markdown_input_#{ActionMarkdown::TagHelper.id += 1}"
|
10
|
+
options[:class] ||= "action-markdown-input"
|
11
|
+
|
12
|
+
markdown_toolbar(id: options[:id]) + content_tag("textarea", value, options)
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
16
|
+
|
17
|
+
module ActionView::Helpers
|
18
|
+
class Tags::ActionMarkdown < Tags::Base
|
19
|
+
include Tags::Placeholderable
|
20
|
+
|
21
|
+
def render
|
22
|
+
options = @options.stringify_keys
|
23
|
+
options["value"] = options.fetch("value") { value&.to_markdown }
|
24
|
+
add_default_name_and_id(options)
|
25
|
+
|
26
|
+
@template_object.markdown_field_tag("textarea", options["value"], options.except("value"))
|
27
|
+
end
|
28
|
+
end
|
29
|
+
|
30
|
+
module FormHelper
|
31
|
+
def markdown_field(object_name, method, options = {})
|
32
|
+
Tags::ActionMarkdown.new(object_name, method, self, options).render
|
33
|
+
end
|
34
|
+
end
|
35
|
+
|
36
|
+
class FormBuilder
|
37
|
+
def markdown_field(method, options = {})
|
38
|
+
@template.markdown_field(@object_name, method, objectify_options(options))
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
42
|
+
|
43
|
+
module ActionMarkdown
|
44
|
+
module TagHelper
|
45
|
+
def markdown_toolbar(id:)
|
46
|
+
<<~HTML.squish.html_safe
|
47
|
+
<markdown-toolbar class="action-markdown-toolbar" for="#{id}">
|
48
|
+
<md-header aria-label="Header" role="button">
|
49
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
50
|
+
<path d="M6 4V20ZM18 4V20Z"/>
|
51
|
+
<path d="M6 4V20H8V13H16V20H18V4H16V11H8V4H6Z"/>
|
52
|
+
</svg>
|
53
|
+
</md-header>
|
54
|
+
<md-bold aria-label="Bold" role="button">
|
55
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
56
|
+
<path d="M8 11h4.5a2.5 2.5 0 0 0 0-5H8v5Zm10 4.5a4.501 4.501 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.5 4.5 0 0 1 18 15.5ZM8 13v5h5.5a2.5 2.5 0 0 0 0-5H8Z"></path>
|
57
|
+
</svg>
|
58
|
+
</md-bold>
|
59
|
+
<md-italic aria-label="Italic" role="button">
|
60
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
61
|
+
<path d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15v2Z"></path>
|
62
|
+
</svg>
|
63
|
+
</md-italic>
|
64
|
+
<md-quote aria-label="Quote" role="button">
|
65
|
+
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
66
|
+
<path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5 3.871 3.871 0 0 1-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5 3.871 3.871 0 0 1-2.748-1.179z"></path>
|
67
|
+
</svg>
|
68
|
+
</md-quote>
|
69
|
+
<md-code aria-label="Code" role="button">
|
70
|
+
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
71
|
+
<path d="m23 12-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414z"></path>
|
72
|
+
</svg>
|
73
|
+
</md-code>
|
74
|
+
<md-link aria-label="Link" role="button">
|
75
|
+
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
76
|
+
<path d="M18.364 15.536 16.95 14.12l1.414-1.414a5.001 5.001 0 0 0-3.531-8.551 5 5 0 0 0-3.54 1.48L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 1 1 9.9 9.9l-1.415 1.414zm-2.828 2.828-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414zm-.708-10.607 1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z"></path>
|
77
|
+
</svg>
|
78
|
+
</md-link>
|
79
|
+
<md-image aria-label="Image" role="button">
|
80
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
81
|
+
<path d="M20 5H4v14l9.292-9.294a1 1 0 0 1 1.414 0L20 15.01V5zM2 3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path>
|
82
|
+
</svg>
|
83
|
+
</md-image>
|
84
|
+
<md-unordered-list aria-label="Unordered list" role="button">
|
85
|
+
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
86
|
+
<path d="M8 4h13v2H8zM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM8 11h13v2H8zm0 7h13v2H8z"></path>
|
87
|
+
</svg>
|
88
|
+
</md-unordered-list>
|
89
|
+
<md-ordered-list aria-label="Ordered list" role="button">
|
90
|
+
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
91
|
+
<path d="M8 4h13v2H8zM5 3v3h1v1H3V6h1V4H3V3zM3 14v-2.5h2V11H3v-1h3v2.5H4v.5h2v1zm2 5.5H3v-1h2V18H3v-1h3v4H3v-1h2zM8 11h13v2H8zm0 7h13v2H8z"></path>
|
92
|
+
</svg>
|
93
|
+
</md-ordered-list>
|
94
|
+
</markdown-toolbar>
|
95
|
+
HTML
|
96
|
+
end
|
97
|
+
end
|
98
|
+
end
|
@@ -13,11 +13,40 @@ module ActionMarkdown
|
|
13
13
|
"app/assets/stylesheets/action_markdown.css"
|
14
14
|
)
|
15
15
|
|
16
|
+
copy_file(
|
17
|
+
"app/assets/stylesheets/action_markdown/action_markdown_toolbar.css",
|
18
|
+
"app/assets/stylesheets/action_markdown_toolbar.css"
|
19
|
+
)
|
20
|
+
|
16
21
|
copy_file(
|
17
22
|
"app/views/action_markdown/contents/_content.html.erb",
|
18
23
|
"app/views/action_markdown/contents/_content.html.erb"
|
19
24
|
)
|
20
25
|
end
|
26
|
+
|
27
|
+
def install_javascript_dependencies
|
28
|
+
if Rails.root.join("config/importmap.rb").exist?
|
29
|
+
say "Import @github/markdown-toolbar-element", :green
|
30
|
+
append_to_file "app/javascript/application.js", %(import "@github/markdown-toolbar-element"\n)
|
31
|
+
|
32
|
+
github_lib = "@github/markdown-toolbar-element"
|
33
|
+
github_link = "https://ga.jspm.io/npm:@github/markdown-toolbar-element@2.1.1/dist/index.js"
|
34
|
+
|
35
|
+
say "Pin #{github_lib}", :green
|
36
|
+
append_to_file "config/importmap.rb", %(pin "#{github_lib}", to: "#{github_link}"\n)
|
37
|
+
elsif Rails.root.join("package.json").exist?
|
38
|
+
say "Import @github/markdown-toolbar-element", :green
|
39
|
+
append_to_file "app/javascript/application.js", %(import "@github/markdown-toolbar-element"\n)
|
40
|
+
|
41
|
+
say "Install @github/markdown-toolbar-element", :green
|
42
|
+
run "yarn add @github/markdown-toolbar-element@2.1.1"
|
43
|
+
else
|
44
|
+
say <<~TEXT.squish, :red
|
45
|
+
You must either be running with node (package.json) or
|
46
|
+
importmap-rails (config/importmap.rb) to use action_markdown.
|
47
|
+
TEXT
|
48
|
+
end
|
49
|
+
end
|
21
50
|
end
|
22
51
|
end
|
23
52
|
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: action_markdown
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Alexandre Ruban
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2023-01-09 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -62,6 +62,8 @@ files:
|
|
62
62
|
- MIT-LICENSE
|
63
63
|
- README.md
|
64
64
|
- app/assets/stylesheets/action_markdown/action_markdown.css
|
65
|
+
- app/assets/stylesheets/action_markdown/action_markdown_toolbar.css
|
66
|
+
- app/helpers/action_markdown/tag_helper.rb
|
65
67
|
- app/models/action_markdown/application_record.rb
|
66
68
|
- app/models/action_markdown/markdown_text.rb
|
67
69
|
- app/views/action_markdown/contents/_content.html.erb
|