From dbf9b8beb9f48e91d358d022e48d39e2c4ed3ced Mon Sep 17 00:00:00 2001 From: Enrique Alcantara <ealcantara@gitlab.com> Date: Tue, 9 Aug 2022 14:55:13 -0400 Subject: [PATCH] Update example snapshots Update snapshots generated from examples of the GFM spec that can be interpreted as frontmatter Add new spec examples to describe front matter parsing rules --- .../example_snapshots/examples_index.yml | 15 ++ glfm_specification/example_snapshots/html.yml | 79 ++++++++++- .../example_snapshots/markdown.yml | 24 ++++ .../example_snapshots/prosemirror_json.yml | 130 ++++++++++++++++-- .../glfm_canonical_examples.txt | 79 +++++++++++ glfm_specification/output/spec.txt | 79 +++++++++++ .../render_html_and_json_for_all_examples.js | 2 + 7 files changed, 395 insertions(+), 13 deletions(-) diff --git a/glfm_specification/example_snapshots/examples_index.yml b/glfm_specification/example_snapshots/examples_index.yml index a6668173cc9b..5778819e0243 100644 --- a/glfm_specification/example_snapshots/examples_index.yml +++ b/glfm_specification/example_snapshots/examples_index.yml @@ -2027,3 +2027,18 @@ 07_02__gitlab_specific_markdown__task_list_items__004: spec_txt_example_position: 678 source_specification: gitlab +07_03__gitlab_specific_markdown__front_matter__001: + spec_txt_example_position: 679 + source_specification: gitlab +07_03__gitlab_specific_markdown__front_matter__002: + spec_txt_example_position: 680 + source_specification: gitlab +07_03__gitlab_specific_markdown__front_matter__003: + spec_txt_example_position: 681 + source_specification: gitlab +07_03__gitlab_specific_markdown__front_matter__004: + spec_txt_example_position: 682 + source_specification: gitlab +07_03__gitlab_specific_markdown__front_matter__005: + spec_txt_example_position: 683 + source_specification: gitlab diff --git a/glfm_specification/example_snapshots/html.yml b/glfm_specification/example_snapshots/html.yml index 14736c022759..eda78a29da4a 100644 --- a/glfm_specification/example_snapshots/html.yml +++ b/glfm_specification/example_snapshots/html.yml @@ -813,8 +813,7 @@ <a id="user-content-bar" class="anchor" href="#bar" aria-hidden="true"></a>Bar</h2> <p data-sourcepos="6:1-6:3" dir="auto">Baz</p> wysiwyg: |- - <hr> - <h2>Foo</h2> + <pre language="yaml" class="content-editor-code-block undefined code highlight" isfrontmatter="true"><code>Foo</code></pre> <h2>Bar</h2> <p>Baz</p> 04_03__leaf_blocks__setext_headings__018: @@ -834,8 +833,7 @@ <copy-code></copy-code> </div> wysiwyg: |- - <hr> - <hr> + <pre language="yaml" class="content-editor-code-block undefined code highlight" isfrontmatter="true"><code></code></pre> 04_03__leaf_blocks__setext_headings__020: canonical: | <ul> @@ -7745,3 +7743,76 @@ <p data-sourcepos="3:3-3:20">text in loose list</p> </li> </ul> +07_03__gitlab_specific_markdown__front_matter__001: + canonical: | + <pre> + <code> + title: YAML front matter + </code> + </pre> + static: |- + <div class="gl-relative markdown-code-block js-markdown-code"> + <pre data-sourcepos="1:1-3:3" class="code highlight js-syntax-highlight language-yaml" lang="yaml" data-lang-params="frontmatter" v-pre="true"><code><span id="LC1" class="line" lang="yaml"><span class="na">title</span><span class="pi">:</span> <span class="s">YAML front matter</span></span></code></pre> + <copy-code></copy-code> + </div> + wysiwyg: |- + <pre language="yaml" class="content-editor-code-block undefined code highlight" isfrontmatter="true"><code>title: YAML front matter</code></pre> +07_03__gitlab_specific_markdown__front_matter__002: + canonical: | + <pre> + <code> + title: TOML front matter + </code> + </pre> + static: |- + <div class="gl-relative markdown-code-block js-markdown-code"> + <pre data-sourcepos="1:1-3:3" class="code highlight js-syntax-highlight language-toml" lang="toml" data-lang-params="frontmatter" v-pre="true"><code><span id="LC1" class="line" lang="toml"><span class="err">title:</span> <span class="err">TOML</span> <span class="err">front</span> <span class="err">matter</span></span></code></pre> + <copy-code></copy-code> + </div> + wysiwyg: |- + <pre language="toml" class="content-editor-code-block undefined code highlight" isfrontmatter="true"><code>title: TOML front matter</code></pre> +07_03__gitlab_specific_markdown__front_matter__003: + canonical: | + <pre> + <code> + { + "title": "JSON front matter" + } + </code> + </pre> + static: |- + <div class="gl-relative markdown-code-block js-markdown-code"> + <pre data-sourcepos="1:1-5:3" class="code highlight js-syntax-highlight language-json" lang="json" data-lang-params="frontmatter" v-pre="true"><code><span id="LC1" class="line" lang="json"><span class="p">{</span></span> + <span id="LC2" class="line" lang="json"><span class="w"> </span><span class="nl">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"JSON front matter"</span></span> + <span id="LC3" class="line" lang="json"><span class="p">}</span></span></code></pre> + <copy-code></copy-code> + </div> + wysiwyg: |- + <pre language="json" class="content-editor-code-block undefined code highlight" isfrontmatter="true"><code>{ + "title": "JSON front matter" + }</code></pre> +07_03__gitlab_specific_markdown__front_matter__004: + canonical: | + <p>text</p> + <hr> + <h2>title: YAML front matter</h2> + static: |- + <p data-sourcepos="1:1-1:4" dir="auto">text</p> + <hr data-sourcepos="3:1-3:3"> + <h2 data-sourcepos="4:1-5:3" dir="auto"> + <a id="user-content-title-yaml-front-matter" class="anchor" href="#title-yaml-front-matter" aria-hidden="true"></a>title: YAML front matter</h2> + wysiwyg: |- + <p>text</p> + <hr> + <h2>title: YAML front matter</h2> +07_03__gitlab_specific_markdown__front_matter__005: + canonical: | + <hr> + <h2>title: YAML front matter</h2> + static: |- + <hr data-sourcepos="1:2-1:4"> + <h2 data-sourcepos="2:1-3:3" dir="auto"> + <a id="user-content-title-yaml-front-matter" class="anchor" href="#title-yaml-front-matter" aria-hidden="true"></a>title: YAML front matter</h2> + wysiwyg: |- + <hr> + <h2>title: YAML front matter</h2> diff --git a/glfm_specification/example_snapshots/markdown.yml b/glfm_specification/example_snapshots/markdown.yml index ffbc7d77ce5b..c875beb77f56 100644 --- a/glfm_specification/example_snapshots/markdown.yml +++ b/glfm_specification/example_snapshots/markdown.yml @@ -2203,3 +2203,27 @@ - [~] inapplicable text in loose list +07_03__gitlab_specific_markdown__front_matter__001: | + --- + title: YAML front matter + --- +07_03__gitlab_specific_markdown__front_matter__002: | + +++ + title: TOML front matter + +++ +07_03__gitlab_specific_markdown__front_matter__003: | + ;;; + { + "title": "JSON front matter" + } + ;;; +07_03__gitlab_specific_markdown__front_matter__004: | + text + + --- + title: YAML front matter + --- +07_03__gitlab_specific_markdown__front_matter__005: |2 + --- + title: YAML front matter + --- diff --git a/glfm_specification/example_snapshots/prosemirror_json.yml b/glfm_specification/example_snapshots/prosemirror_json.yml index e984719aaa7a..9f0d462aed37 100644 --- a/glfm_specification/example_snapshots/prosemirror_json.yml +++ b/glfm_specification/example_snapshots/prosemirror_json.yml @@ -1702,12 +1702,11 @@ "type": "doc", "content": [ { - "type": "horizontalRule" - }, - { - "type": "heading", + "type": "frontmatter", "attrs": { - "level": 2 + "language": "yaml", + "class": "code highlight", + "isFrontmatter": true }, "content": [ { @@ -1759,10 +1758,12 @@ "type": "doc", "content": [ { - "type": "horizontalRule" - }, - { - "type": "horizontalRule" + "type": "frontmatter", + "attrs": { + "language": "yaml", + "class": "code highlight", + "isFrontmatter": true + } } ] } @@ -20670,3 +20671,114 @@ Inapplicable task list items not yet implemented for WYSYWIG 07_02__gitlab_specific_markdown__task_list_items__004: |- Inapplicable task list items not yet implemented for WYSYWIG +07_03__gitlab_specific_markdown__front_matter__001: |- + { + "type": "doc", + "content": [ + { + "type": "frontmatter", + "attrs": { + "language": "yaml", + "class": "code highlight", + "isFrontmatter": true + }, + "content": [ + { + "type": "text", + "text": "title: YAML front matter" + } + ] + } + ] + } +07_03__gitlab_specific_markdown__front_matter__002: |- + { + "type": "doc", + "content": [ + { + "type": "frontmatter", + "attrs": { + "language": "toml", + "class": "code highlight", + "isFrontmatter": true + }, + "content": [ + { + "type": "text", + "text": "title: TOML front matter" + } + ] + } + ] + } +07_03__gitlab_specific_markdown__front_matter__003: |- + { + "type": "doc", + "content": [ + { + "type": "frontmatter", + "attrs": { + "language": "json", + "class": "code highlight", + "isFrontmatter": true + }, + "content": [ + { + "type": "text", + "text": "{\n \"title\": \"JSON front matter\"\n}" + } + ] + } + ] + } +07_03__gitlab_specific_markdown__front_matter__004: |- + { + "type": "doc", + "content": [ + { + "type": "paragraph", + "content": [ + { + "type": "text", + "text": "text" + } + ] + }, + { + "type": "horizontalRule" + }, + { + "type": "heading", + "attrs": { + "level": 2 + }, + "content": [ + { + "type": "text", + "text": "title: YAML front matter" + } + ] + } + ] + } +07_03__gitlab_specific_markdown__front_matter__005: |- + { + "type": "doc", + "content": [ + { + "type": "horizontalRule" + }, + { + "type": "heading", + "attrs": { + "level": 2 + }, + "content": [ + { + "type": "text", + "text": "title: YAML front matter" + } + ] + } + ] + } diff --git a/glfm_specification/input/gitlab_flavored_markdown/glfm_canonical_examples.txt b/glfm_specification/input/gitlab_flavored_markdown/glfm_canonical_examples.txt index a50c28c92966..332b311dff29 100644 --- a/glfm_specification/input/gitlab_flavored_markdown/glfm_canonical_examples.txt +++ b/glfm_specification/input/gitlab_flavored_markdown/glfm_canonical_examples.txt @@ -120,3 +120,82 @@ text in loose list </li> </ul> ```````````````````````````````` + +## Front matter + +See +[Front matter](https://docs.gitlab.com/ee/user/markdown.html#front-matter) in the GitLab Flavored Markdown documentation. + +Front matter is metadata included at the beginning of a Markdown document, preceding the content. +This data can be used by static site generators like Jekyll, Hugo, and many other applications. + +YAML front matter: + +```````````````````````````````` example gitlab frontmatter +--- +title: YAML front matter +--- +. +<pre> +<code> +title: YAML front matter +</code> +</pre> +```````````````````````````````` + +TOML front matter: + +```````````````````````````````` example gitlab frontmatter ++++ +title: TOML front matter ++++ +. +<pre> +<code> +title: TOML front matter +</code> +</pre> +```````````````````````````````` + +JSON front matter: + +```````````````````````````````` example gitlab frontmatter +;;; +{ + "title": "JSON front matter" +} +;;; +. +<pre> +<code> +{ + "title": "JSON front matter" +} +</code> +</pre> +```````````````````````````````` + +Front matter blocks should be inserted at the top of the document: + +```````````````````````````````` example gitlab frontmatter +text + +--- +title: YAML front matter +--- +. +<p>text</p> +<hr> +<h2>title: YAML front matter</h2> +```````````````````````````````` + +Front matter block delimiters shouldn’t be preceded by space characters: + +```````````````````````````````` example gitlab frontmatter + --- +title: YAML front matter +--- +. +<hr> +<h2>title: YAML front matter</h2> +```````````````````````````````` diff --git a/glfm_specification/output/spec.txt b/glfm_specification/output/spec.txt index b2735219d02a..32cb6a0594ef 100644 --- a/glfm_specification/output/spec.txt +++ b/glfm_specification/output/spec.txt @@ -9723,6 +9723,85 @@ text in loose list </ul> ```````````````````````````````` +## Front matter + +See +[Front matter](https://docs.gitlab.com/ee/user/markdown.html#front-matter) in the GitLab Flavored Markdown documentation. + +Front matter is metadata included at the beginning of a Markdown document, preceding the content. +This data can be used by static site generators like Jekyll, Hugo, and many other applications. + +YAML front matter: + +```````````````````````````````` example gitlab frontmatter +--- +title: YAML front matter +--- +. +<pre> +<code> +title: YAML front matter +</code> +</pre> +```````````````````````````````` + +TOML front matter: + +```````````````````````````````` example gitlab frontmatter ++++ +title: TOML front matter ++++ +. +<pre> +<code> +title: TOML front matter +</code> +</pre> +```````````````````````````````` + +JSON front matter: + +```````````````````````````````` example gitlab frontmatter +;;; +{ + "title": "JSON front matter" +} +;;; +. +<pre> +<code> +{ + "title": "JSON front matter" +} +</code> +</pre> +```````````````````````````````` + +Front matter blocks should be inserted at the top of the document: + +```````````````````````````````` example gitlab frontmatter +text + +--- +title: YAML front matter +--- +. +<p>text</p> +<hr> +<h2>title: YAML front matter</h2> +```````````````````````````````` + +Front matter block delimiters shouldn’t be preceded by space characters: + +```````````````````````````````` example gitlab frontmatter + --- +title: YAML front matter +--- +. +<hr> +<h2>title: YAML front matter</h2> +```````````````````````````````` + <!-- END TESTS --> # Appendix: A parsing strategy diff --git a/spec/frontend/content_editor/render_html_and_json_for_all_examples.js b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js index 782158810dd2..4a57c7b19429 100644 --- a/spec/frontend/content_editor/render_html_and_json_for_all_examples.js +++ b/spec/frontend/content_editor/render_html_and_json_for_all_examples.js @@ -16,6 +16,7 @@ import FigureCaption from '~/content_editor/extensions/figure_caption'; import FootnoteDefinition from '~/content_editor/extensions/footnote_definition'; import FootnoteReference from '~/content_editor/extensions/footnote_reference'; import FootnotesSection from '~/content_editor/extensions/footnotes_section'; +import Frontmatter from '~/content_editor/extensions/frontmatter'; import HardBreak from '~/content_editor/extensions/hard_break'; import Heading from '~/content_editor/extensions/heading'; import HorizontalRule from '~/content_editor/extensions/horizontal_rule'; @@ -52,6 +53,7 @@ const tiptapEditor = createTestEditor({ FootnoteDefinition, FootnoteReference, FootnotesSection, + Frontmatter, Figure, FigureCaption, HardBreak, -- GitLab