action_markdown 0.1.2 → 0.1.4
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 +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
|