kramdown-components 0.0.1 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/README.md +58 -3
- data/kramdown-components.gemspec +1 -1
- data/lib/kramdown/custom_document.rb +2 -2
- data/lib/kramdown/custom_element.rb +3 -4
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5b94ad5f5cdccaf95fc96b86f44a27ece8f9b19ccd464e99d0b7de3b7bbd5a3a
|
4
|
+
data.tar.gz: 0d6aefeddcd1f1b13450895fcaa667fb21988ab57b2056492d50988d8034f543
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 465fabbc525bb9db36097702ecced4e2cee92e9730e68008c0b101a2415c1823fc9233ea0341c3b187338c1bac6f6c2ead11af0da24cdbb1287dda73ca38908b
|
7
|
+
data.tar.gz: e27405070724c9cb7f9011ae24cbb92ba5a5f805b7d09c8a7b0e3b51dbce364dc9649f6c64094c4a315720c9ba512ee2c344f4aff8d1490941b8fc1869146c65
|
data/.gitignore
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
kramdown-components-*.gem
|
data/README.md
CHANGED
@@ -22,10 +22,65 @@ doc = Kramdown::CustomDocument("# Title")
|
|
22
22
|
puts doc.to_html
|
23
23
|
```
|
24
24
|
|
25
|
-
###
|
25
|
+
### Registering Components
|
26
26
|
|
27
|
-
|
27
|
+
To define a custom element that can wrap child elements with the Markdown document, use the `define_element` class method to set the tag name.
|
28
28
|
|
29
|
+
```ruby
|
30
|
+
Kramdown::CustomDocument.define_element("wrapped-block")
|
31
|
+
```
|
32
|
+
|
33
|
+
You can customise the behaviour of components by extending `CustomElement` and binding the class to the tag name.
|
34
|
+
|
35
|
+
```ruby
|
36
|
+
class ImageGallery < Kramdown::CustomElement; end
|
37
|
+
|
38
|
+
Kramdown::CustomDocument.define_element("image-gallery", ImageGallery)
|
39
|
+
```
|
40
|
+
|
41
|
+
### DOM Rewriting
|
42
|
+
|
43
|
+
To rewrite DOM subtrees wrapped by the component, implement the `parse_dom` method of `CustomElement` and manipulate the internal `root` and `children` elements, with instances of `Kramdown::Element` to represent each node.
|
44
|
+
|
45
|
+
```ruby
|
46
|
+
class ButtonList < Kramdown::CustomElement
|
47
|
+
def parse_dom(root)
|
48
|
+
uls = root.children.filter { |child_el| child_el.type == :ul }
|
49
|
+
uls.each do |ul|
|
50
|
+
ul.children.each do |li|
|
51
|
+
button = Kramdown::Element.new(:html_element, "button")
|
52
|
+
button.children = li.children
|
53
|
+
li.children = [button]
|
54
|
+
end
|
55
|
+
end
|
56
|
+
end
|
57
|
+
end
|
58
|
+
|
59
|
+
Kramdown::CustomDocument.define_element("button-list", ButtonList)
|
60
|
+
```
|
61
|
+
|
62
|
+
When the `ButtonList#parse_dom` rewrite is applied, all child lists nested within the `<button-list>` component to have the content of each list item wrapped in a `<button>`.
|
63
|
+
|
64
|
+
**Source:**
|
65
|
+
|
66
|
+
```md
|
67
|
+
<button-list>
|
68
|
+
|
69
|
+
- One
|
70
|
+
- Two
|
71
|
+
- Three
|
72
|
+
|
73
|
+
</button-list>
|
29
74
|
```
|
30
75
|
|
31
|
-
|
76
|
+
**Result:**
|
77
|
+
|
78
|
+
```html
|
79
|
+
<button-list id="bl-uftcpsbnzytd">
|
80
|
+
<ul>
|
81
|
+
<li><button>One</button></li>
|
82
|
+
<li><button>Two</button></li>
|
83
|
+
<li><button>Three</button></li>
|
84
|
+
</ul>
|
85
|
+
</button-list>
|
86
|
+
```
|
data/kramdown-components.gemspec
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
Gem::Specification.new do |spec|
|
2
2
|
spec.name = "kramdown-components"
|
3
|
-
spec.version = "0.0
|
3
|
+
spec.version = "0.1.0"
|
4
4
|
spec.platform = Gem::Platform::RUBY
|
5
5
|
spec.summary = "Rewrite sections of Markdown documents using HTML Custom Elements."
|
6
6
|
spec.description = "Mix and match HTML and Markdown syntax. Generate nested DOM trees from a single top level element."
|
@@ -74,8 +74,8 @@ module Kramdown
|
|
74
74
|
end
|
75
75
|
|
76
76
|
custom_element_cls = @@custom_elements[outer_el.value]
|
77
|
-
element = custom_element_cls.new(outer_el.attr["id"]
|
78
|
-
element.parse_dom
|
77
|
+
element = custom_element_cls.new(outer_el.attr["id"])
|
78
|
+
element.parse_dom(outer_el)
|
79
79
|
|
80
80
|
# codeblocks = outer_el.children.filter { |child_el| child_el.type == :codeblock }
|
81
81
|
#
|