From 1a7c7ee843d4833a1660714b2998b4420f5feaf7 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 15 Oct 2023 02:59:31 +0900
Subject: [PATCH] Add lang directive and lang constructor option

---
 index.d.ts                            |  1 +
 src/markdown/directives/apply.js      |  4 ++++
 src/markdown/directives/directives.js |  3 +++
 src/marpit.js                         |  1 +
 test/markdown/directives/apply.js     | 30 +++++++++++++++++++++++++++
 5 files changed, 39 insertions(+)

diff --git a/index.d.ts b/index.d.ts
index b8dedc0..26769cf 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -10,6 +10,7 @@ declare namespace Marpit {
     anchor?: boolean | AnchorCallback
     container?: false | Element | Element[]
     headingDivider?: false | HeadingDivider | HeadingDivider[]
+    lang?: string
     looseYAML?: boolean
     markdown?: any
     printable?: boolean
diff --git a/src/markdown/directives/apply.js b/src/markdown/directives/apply.js
index e6f224d..61b3a80 100644
--- a/src/markdown/directives/apply.js
+++ b/src/markdown/directives/apply.js
@@ -17,6 +17,7 @@ import builtInDirectives from './directives'
  */
 function _apply(md, opts = {}) {
   const { marpit } = md
+  const { lang } = marpit.options
 
   const dataset = opts.dataset === undefined ? true : !!opts.dataset
   const css = opts.css === undefined ? true : !!opts.css
@@ -69,6 +70,9 @@ function _apply(md, opts = {}) {
           }
 
           // Apply attribute to token
+          if (lang || marpitDirectives.lang)
+            token.attrSet('lang', lang || marpitDirectives.lang)
+
           if (marpitDirectives.class)
             token.attrJoin('class', marpitDirectives.class)
 
diff --git a/src/markdown/directives/directives.js b/src/markdown/directives/directives.js
index f85e370..3f14719 100644
--- a/src/markdown/directives/directives.js
+++ b/src/markdown/directives/directives.js
@@ -19,6 +19,8 @@
  * @prop {Directive} headingDivider Specify heading divider option.
  * @prop {Directive} style Specify the CSS style to apply additionally.
  * @prop {Directive} theme Specify theme of the slide deck.
+ * @prop {Directive} lang Specify the language of the slide deck. It will
+ *     assign as `lang` attribute for each slide.
  */
 export const globals = Object.assign(Object.create(null), {
   headingDivider: (value) => {
@@ -41,6 +43,7 @@ export const globals = Object.assign(Object.create(null), {
   },
   style: (v) => ({ style: v }),
   theme: (v, marpit) => (marpit.themeSet.has(v) ? { theme: v } : {}),
+  lang: (v) => ({ lang: v }),
 })
 
 /**
diff --git a/src/marpit.js b/src/marpit.js
index c563510..7dbe90c 100644
--- a/src/marpit.js
+++ b/src/marpit.js
@@ -23,6 +23,7 @@ const defaultOptions = {
   anchor: true,
   container: marpitContainer,
   headingDivider: false,
+  lang: undefined,
   looseYAML: false,
   markdown: undefined,
   printable: true,
diff --git a/test/markdown/directives/apply.js b/test/markdown/directives/apply.js
index 872c81b..595bc5d 100644
--- a/test/markdown/directives/apply.js
+++ b/test/markdown/directives/apply.js
@@ -102,6 +102,36 @@ describe('Marpit directives apply plugin', () => {
     })
   })
 
+  describe('Global directives', () => {
+    describe('lang directive', () => {
+      const langDir = dedent`
+        ---
+        lang: en-US
+        ---
+
+        ---
+      `
+
+      it('applies lang attribute to each section element', () => {
+        const $ = load(mdForTest().render(langDir))
+        const sections = $('section')
+
+        expect(sections.eq(0).attr('lang')).toBe('en-US')
+        expect(sections.eq(1).attr('lang')).toBe('en-US')
+      })
+
+      context('when lang directive is not defined', () => {
+        it('follows the lang option of Marpit instance', () => {
+          const $ = load(md({}).render(''))
+          expect($('section').first().attr('lang')).toBeUndefined()
+
+          const $lang = load(md({ options: { lang: 'en-US' } }).render(''))
+          expect($lang('section').first().attr('lang')).toBe('en-US')
+        })
+      })
+    })
+  })
+
   describe('Local directives', () => {
     describe('Background image', () => {
       const bgDirs = dedent`