kramdown-components 0.0.1 → 0.1.0
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/.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
|
#
|