diff --git a/glfm_specification/example_snapshots/examples_index.yml b/glfm_specification/example_snapshots/examples_index.yml
index a6668173cc9b2a3f3aa7b19bfe9eae56ae19a95f..5778819e0243e05464990bde6e61fa13480a25b2 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 14736c02275950686ccd7a8498ee93773374e14c..eda78a29da4aaf14d38a653e3bf97849675ce3f9 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 ffbc7d77ce5b57f537afab1de4528c46b2d579c0..c875beb77f56b990b98912a1f8016b1f36b98453 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 e984719aaa7a342d18f84bda540444bb1b65b4b7..9f0d462aed37d673272d807679df52df9d38951d 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 a50c28c929668ed13a8d1187af7a29a0e95a4314..332b311dff294309cf3271b9d1d4a534a57b1885 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 b2735219d02ad0ef34274bb06a263daf00d13414..32cb6a0594ef05cfd68dcb5758b248d0beab203f 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 782158810dd2688d44b6825b8c13ad0086132fb0..4a57c7b19429926c5889678ce7e979579fc63e4b 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,