Read the locale from the page

Refs #1817

.dev/locale-index.ts.mustache

@@ -1,3 +1,6 @@
 export type SupportedLocale = 'en-US'
 
 export const DefaultLocale: SupportedLocale = 'en-US'
+
+export const isSupportedLocale = (locale: string): locale is SupportedLocale =>
+  locale === 'en-US'

assets/dom.ts

@@ -30,3 +30,17 @@ export function getTargetElement(link: HTMLAnchorElement): HTMLElement | null {
 
   return document.getElementById(href.slice(1))
 }
+
+export function getLang(element: HTMLElement): string {
+  const lang = element.getAttribute('lang')
+
+  if (typeof lang === 'string') {
+    return lang
+  }
+
+  if (element.parentElement) {
+    return getLang(element.parentElement)
+  }
+
+  return ''
+}

assets/html-editor.ts

@@ -8,8 +8,8 @@ import numberedListIcon from 'remixicon/icons/Editor/list-ordered.svg'
 import bulletedListIcon from 'remixicon/icons/Editor/list-unordered.svg'
 import subscriptIcon from 'remixicon/icons/Editor/subscript.svg'
 import superscriptIcon from 'remixicon/icons/Editor/superscript.svg'
-import { disableButton, enableButton, preventDefault } from './dom.js'
-import { DefaultLocale } from './locales/index.js'
+import { disableButton, enableButton, getLang, preventDefault } from './dom.js'
+import { DefaultLocale, isSupportedLocale } from './locales/index.js'
 
 const translateDep = import('./locales/html-editor.js')
 
@@ -60,8 +60,11 @@ export class HtmlEditor extends HTMLElement {
 
     const { translateHtmlEditor } = await translateDep
 
+    const lang = getLang(this)
+    const locale = isSupportedLocale(lang) ? lang : DefaultLocale
+
     const toolbarButtons = Promise.all([
-      createButton(translateHtmlEditor(DefaultLocale)('bold'), boldIcon),
+      createButton(translateHtmlEditor(locale)('bold'), boldIcon),
       createButton('Italic', italicIcon),
       createButton('Subscript', subscriptIcon),
       createButton('Superscript', superscriptIcon),

test/assets/dom.test.ts

@@ -127,3 +127,57 @@ describe('getTargetElement', () => {
     })
   })
 })
+
+describe('getLang', () => {
+  describe('there is a lang', () => {
+    describe('on the element', () => {
+      it('finds the lang', async () => {
+        const element = await fixture<HTMLDivElement>('<div lang="en-US"></div>')
+
+        await expect(_.getLang(element)).to.equal('en-US')
+      })
+
+      describe('on the parent', () => {
+        it('finds the lang', async () => {
+          await fixture('<div lang="en-US"><div id="element"></div></div>')
+
+          await expect(_.getLang(document.getElementById('element')!)).to.equal('en-US')
+        })
+      })
+
+      describe('on an ancestor', () => {
+        it('finds the lang', async () => {
+          await fixture('<div lang="en-US"><div><div id="element"></div></div></div>')
+
+          await expect(_.getLang(document.getElementById('element')!)).to.equal('en-US')
+        })
+      })
+    })
+  })
+
+  describe("there isn't a lang", () => {
+    describe('on the element', () => {
+      it('returns an unknown lang', async () => {
+        const element = await fixture<HTMLDivElement>('<div></div>')
+
+        await expect(_.getLang(element)).to.equal('')
+      })
+
+      describe('on the parent', () => {
+        it('finds the lang', async () => {
+          await fixture('<div><div id="element"></div></div>')
+
+          await expect(_.getLang(document.getElementById('element')!)).to.equal('')
+        })
+      })
+
+      describe('on an ancestor', () => {
+        it('finds the lang', async () => {
+          await fixture('<div><div><div id="element"></div></div></div>')
+
+          await expect(_.getLang(document.getElementById('element')!)).to.equal('')
+        })
+      })
+    })
+  })
+})

test/assets/html-editor.test.ts

@@ -22,3 +22,39 @@ describe('while it loads', () => {
     expect(htmlEditor.querySelector('textarea')).to.be.have.attribute('hidden')
   })
 })
+
+describe('with a supported locale', () => {
+  it('uses the locale', async () => {
+    const element = defineCE(class extends _.HtmlEditor {})
+    await fixture<HTMLFormElement>('<form id="form"/>')
+    const htmlEditor = await fixture<_.HtmlEditor>(
+      `<div lang="en-US">
+        <${element}>
+          <textarea form="form"/>
+        </${element}>
+      </div>`,
+    )
+
+    await waitUntil(() => !htmlEditor.querySelector('.loading'), undefined, { timeout: 2000 })
+
+    expect(htmlEditor.querySelector('editor-toolbar button')).to.have.text('Bold')
+  })
+})
+
+describe('with an unsupported locale', () => {
+  it('uses the default locale', async () => {
+    const element = defineCE(class extends _.HtmlEditor {})
+    await fixture<HTMLFormElement>('<form id="form"/>')
+    const htmlEditor = await fixture<_.HtmlEditor>(
+      `<div lang="th-TH-u-nu-thai">
+        <${element}>
+          <textarea form="form"/>
+        </${element}>
+      </div>`,
+    )
+
+    await waitUntil(() => !htmlEditor.querySelector('.loading'), undefined, { timeout: 2000 })
+
+    expect(htmlEditor.querySelector('editor-toolbar button')).to.have.text('Bold')
+  })
+})