blacklight/scribe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
scribe/spec/classes/markup_converter_spec.cr

197 lines
4.9 KiB
Crystal
Raw Normal View History

First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
require "../spec_helper"
include Nodes
describe MarkupConverter do
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
describe "#convert" do
it "returns just text with no markups" do
markups = [] of PostResponse::Markup
result = MarkupConverter.convert(text: "Hello, world", markups: markups)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
result.should eq([Text.new(content: "Hello, world")])
end
it "returns text with multiple markups" do
markups = Array(PostResponse::Markup).from_json <<-JSON
[
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
{
"title": null,
"type": "STRONG",
"href": null,
"start": 0,
"end": 6,
"rel": null,
"anchorType": null
},
{
"title": null,
"type": "EM",
"href": null,
"start": 11,
"end": 21,
"rel": null,
"anchorType": null
}
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
]
JSON
result = MarkupConverter.convert(text: "strong and emphasized only", markups: markups)
result.should eq([
Strong.new(children: [Text.new(content: "strong")] of Child),
Text.new(content: " and "),
Emphasis.new(children: [Text.new(content: "emphasized")] of Child),
Text.new(content: " only"),
])
end
it "returns text with a code markup" do
markups = Array(PostResponse::Markup).from_json <<-JSON
[
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
{
"title": null,
"type": "CODE",
"href": null,
"start": 7,
"end": 11,
"rel": null,
"anchorType": null
}
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
]
JSON
result = MarkupConverter.convert(text: "inline code", markups: markups)
Render a Link Anchor As opposed to a user anchor
2021-07-04 23:06:17 +02:00
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
result.should eq([
Text.new(content: "inline "),
Code.new(children: [Text.new(content: "code")] of Child),
])
end
it "renders an A-LINK markup" do
markups = Array(PostResponse::Markup).from_json <<-JSON
[
Render a Link Anchor As opposed to a user anchor
2021-07-04 23:06:17 +02:00
{
"title": "",
"type": "A",
"href": "https://example.com",
"start": 7,
"end": 11,
"rel": "",
"anchorType": "LINK"
}
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
]
JSON
result = MarkupConverter.convert(text: "I am a Link", markups: markups)
Render a User Anchor
2021-07-04 23:37:45 +02:00
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
result.should eq([
Text.new("I am a "),
Anchor.new(children: [Text.new("Link")] of Child, href: "https://example.com"),
])
end
it "renders an A-USER markup" do
markups = Array(PostResponse::Markup).from_json <<-JSON
[
Render a User Anchor
2021-07-04 23:37:45 +02:00
{
"title": null,
"type": "A",
"href": null,
"userId": "abc123",
"start": 3,
"end": 10,
"rel": null,
"anchorType": "USER"
}
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
]
JSON
result = MarkupConverter.convert(text: "Hi Dr Nick!", markups: markups)
result.should eq([
Text.new("Hi "),
Link to the author's page Right now this links to the user's medium page. It may link to an internal page in the future. Instead of the Page taking the author as a string, it now takes a PostResponse::Creator object. The Articles::ShowPage then converts the Creator (a name and user_id) to an author link. Finally, I did some refactoring of UserAnchor (which I thought I was going to use for this) to change it's userId attribute to user_id as is Crystal convention.
2021-09-15 21:44:28 +02:00
UserAnchor.new(children: [Text.new("Dr Nick")] of Child, user_id: "abc123"),
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
Text.new("!"),
])
end
it "renders overlapping markups" do
markups = Array(PostResponse::Markup).from_json <<-JSON
[
{
"title": null,
"type": "STRONG",
"href": null,
"userId": null,
"start": 7,
"end": 15,
"rel": null,
"anchorType": null
},
{
"title": null,
"type": "EM",
"href": null,
"userId": null,
"start": 0,
"end": 10,
"rel": null,
"anchorType": null
}
]
JSON
result = MarkupConverter.convert(text: "Italic and bold", markups: markups)
result.should eq([
Emphasis.new(children: [Text.new("Italic ")] of Child),
Emphasis.new(children: [
Strong.new(children: [Text.new("and")] of Child),
] of Child),
Strong.new(children: [Text.new(" bold")] of Child),
])
end
end
describe "#wrap_in_markups" do
it "returns text wrapped in multiple markups" do
markups = Array(PostResponse::Markup).from_json <<-JSON
[
{
"title": null,
"type": "STRONG",
"href": null,
"start": 0,
"end": 17,
"rel": null,
"anchorType": null
},
{
"title": null,
"type": "A",
"href": null,
"userId": "abc123",
"start": 13,
"end": 17,
"rel": null,
"anchorType": "USER"
}
]
JSON
converter = MarkupConverter.new(text: "it's ya boi, jack", markups: markups)
result = converter.wrap_in_markups("jack", markups)
result.should eq([
UserAnchor.new(children: [
Strong.new([
Text.new("jack"),
] of Child),
Link to the author's page Right now this links to the user's medium page. It may link to an internal page in the future. Instead of the Page taking the author as a string, it now takes a PostResponse::Creator object. The Articles::ShowPage then converts the Creator (a name and user_id) to an author link. Finally, I did some refactoring of UserAnchor (which I thought I was going to use for this) to change it's userId attribute to user_id as is Crystal convention.
2021-09-15 21:44:28 +02:00
] of Child, user_id: "abc123"),
Overlapping refactor Example: * Text: "strong and emphasized only" * Markups: * Strong: 0..10 * Emphasis: 7..21 First, get all the borders of the markups, including the start (0) and end (text.size) indexes of the text in order: ``` [0, 7, 10, 21, 26] ``` Then attach markups to each range. Note that the ranges are exclusive; they don't include the final number: * 0...7: Strong * 7...10: Strong, Emphasized * 10...21: Emphasized * 21...26: N/A Bundle each range and it's related markups into a value object RangeWithMarkup and return the list. Loop through that list and recursively apply each markup to each segment of text: * Apply a `Strong` markup to the text "strong " * Apply a `Strong` markup to the text "and" * Wrap that in an `Emphasis` markup * Apply an `Emphasis` markup to the text " emphasized" * Leave the text " only" as is --- This has the side effect of breaking up the nodes more than they need to be broken up. For example right now the algorithm creates this HTML: ``` <strong>strong </strong><em><strong>and</strong></em> ``` instead of: ``` <strong>strong <em>and</em></strong> ``` But that's a task for another day.
2021-07-19 02:21:44 +02:00
])
end
Render a User Anchor
2021-07-04 23:37:45 +02:00
end
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
end
Reference in a new issue Copy permalink