Merge pull request #405 from Valexr/fix/md-code_specs-attribs

fix: md-code specs/attribs

packages/nuemark/src/parse-blocks.js

@@ -30,7 +30,7 @@ export function parseBlocks(lines, capture) {
         block = { is_code: true, ...parseTag(specs), code: [] }
         return blocks.push(block)
 
-      // end of code
+        // end of code
       } else {
         return block = null
       }
@@ -75,10 +75,10 @@ export function parseBlocks(lines, capture) {
 
       // new list
       if (!block?.is_list) {
-        block = { is_list: true, numbered, entries: [[ line ]] }
+        block = { is_list: true, numbered, entries: [[line]] }
         return blocks.push(block)
 
-      // new list item
+        // new list item
       } else {
         return block.entries.push([line])
       }
@@ -140,15 +140,15 @@ export function parseBlocks(lines, capture) {
       if (block?.is_tag) block.body.push(line)
       else if (block?.is_list) addListEntry(block, line)
 
-    // blockquotes
+      // blockquotes
     } else if (block?.is_quote && c) {
       if (c) block.content.push(line)
 
-    // content (append)
+      // content (append)
     } else if (block?.is_content) {
       block.content.push(line)
 
-    // new content block
+      // new content block
     } else {
       block = c ? { is_content: true, content: [line] } : { is_newline: true }
       blocks.push(block)

packages/nuemark/src/parse-tag.js

@@ -6,7 +6,9 @@ const ATTR = 'id is class style hidden disabled popovertarget popover'.split(' '
 */
 export function parseTag(input) {
   const { str, getValue } = valueGetter(input)
-  const [specs, ...attribs] = str.split(/\s+/)
+  const strings = str.split(/\s+/)
+  const specs = strings.filter((s, i) => !i || s.match(/^[#|.]/)).join('')
+  const attribs = strings.filter(s => !specs.includes(s))
   const self = { ...parseSpecs(specs), data: {} }
 
 
@@ -51,7 +53,7 @@ export function valueGetter(input) {
 
   function getValue(key) {
     if (key[0] == ':' && key.slice(-1) == ':') {
-      return strings[1 * key.slice(1, -1) -1]
+      return strings[1 * key.slice(1, -1) - 1]
     }
   }
 

packages/nuemark/src/render-blocks.js

@@ -12,7 +12,7 @@ export function renderLines(lines, opts) {
   return renderBlocks(things.blocks, { ...opts, ...things })
 }
 
-export function renderBlocks(blocks, opts={}) {
+export function renderBlocks(blocks, opts = {}) {
   return blocks.map(b => renderBlock(b, opts)).join('\n')
 }
 
@@ -22,14 +22,14 @@ function renderBlock(block, opts) {
 
   return block.is_content ? renderContent(block.content, opts) :
     block.is_heading ? renderHeading(block, opts) :
-    block.is_quote ? elem('blockquote', renderBlocks(block.blocks, opts)) :
-    block.is_tag ? renderTag(block, opts) :
-    block.is_table ? renderTable(block, opts) :
-    block.is_list ? renderList(block, opts) :
-    block.is_code ? renderCode(block, opts) :
-    block.is_newline ? '' :
-    block.is_break ? '<hr>' :
-    console.error('Unknown block', block)
+      block.is_quote ? elem('blockquote', renderBlocks(block.blocks, opts)) :
+        block.is_tag ? renderTag(block, opts) :
+          block.is_table ? renderTable(block, opts) :
+            block.is_list ? renderList(block, opts) :
+              block.is_code ? renderCode(block, opts) :
+                block.is_newline ? '' :
+                  block.is_break ? '<hr>' :
+                    console.error('Unknown block', block)
 }
 
 // recursive
@@ -38,13 +38,13 @@ function renderList({ items, numbered }, opts) {
   return elem(numbered ? 'ol' : 'ul', html.join('\n'))
 }
 
-export function renderHeading(h, opts={}) {
+export function renderHeading(h, opts = {}) {
   const attr = { ...h.attr }
   const show_id = opts.heading_ids
   if (show_id && !attr.id) attr.id = createHeadingId(h.text)
 
   // anchor
-  const a = show_id ? elem('a', { href: `#${ attr.id }`, title: h.text }) : ''
+  const a = show_id ? elem('a', { href: `#${attr.id}`, title: h.text }) : ''
 
   return elem('h' + h.level, attr, a + renderTokens(h.tokens, opts))
 }
@@ -66,7 +66,7 @@ function renderCode({ name, code, attr, data }, opts) {
   const { numbered } = data
   const klass = attr.class
   delete attr.class
-  let html = elem('pre', attr, glow(code, { language: name, numbered}))
+  let html = elem('pre', attr, glow(code, { language: name, numbered }))
 
   const caption = data.caption || data._
 
@@ -96,7 +96,7 @@ function renderAttrs(attr) {
   const arr = []
   for (const key in attr) {
     const val = attr[key]
-    if (val) arr.push(val === true ? key :`${key}="${val}"`)
+    if (val) arr.push(val === true ? key : `${key}="${val}"`)
   }
   return arr[0] ? ' ' + arr.join(' ') : ''
 }

packages/nuemark/test/block.test.js

@@ -5,7 +5,7 @@ import { nuemark } from '..'
 
 
 test('paragraphs', () => {
-  const { blocks } = parseBlocks([ 'a', 'b', '', '', 'c' ])
+  const { blocks } = parseBlocks(['a', 'b', '', '', 'c'])
   expect(blocks.length).toBe(2)
 
   const html = renderBlocks(blocks)
@@ -14,16 +14,16 @@ test('paragraphs', () => {
 })
 
 test('list items', () => {
-  const { blocks } = parseBlocks(['- a', '', '  a1',  '- b', '', '', '- c'])
+  const { blocks } = parseBlocks(['- a', '', '  a1', '- b', '', '', '- c'])
   expect(blocks.length).toBe(1)
-  expect(blocks[0].entries).toEqual([[ "a", "", "a1" ], [ "b", "", "" ], [ "c" ]])
+  expect(blocks[0].entries).toEqual([["a", "", "a1"], ["b", "", ""], ["c"]])
 })
 
 
 test('nested lists', () => {
-  const { blocks } = parseBlocks(['- item', '', '  - nested 1',  '', '', '  - nested 2'])
+  const { blocks } = parseBlocks(['- item', '', '  - nested 1', '', '', '  - nested 2'])
   expect(blocks.length).toBe(1)
-  expect(blocks[0].entries[0]).toEqual([ "item", "", "- nested 1", "", "", "- nested 2" ])
+  expect(blocks[0].entries[0]).toEqual(["item", "", "- nested 1", "", "", "- nested 2"])
 
   const html = renderBlocks(blocks)
   expect(html).toEndWith('<li><p>nested 2</p></li></ul></li></ul>')
@@ -55,12 +55,12 @@ test('subsequent blockquotes', () => {
 test('numbered items', () => {
   const { blocks } = parseBlocks(['1. Yo', '10. Bruh', '* Bro'])
   expect(blocks[0].numbered).toBeTrue()
-  expect(blocks[0].entries).toEqual([[ "Yo" ], [ "Bruh" ], [ "Bro" ]])
+  expect(blocks[0].entries).toEqual([["Yo"], ["Bruh"], ["Bro"]])
 })
 
 
 test('multiple thematic breaks', () => {
-  const { blocks } = parseBlocks(['A', '---', 'B', '---', 'C' ])
+  const { blocks } = parseBlocks(['A', '---', 'B', '---', 'C'])
   expect(blocks.length).toBe(5)
 })
 
@@ -128,8 +128,14 @@ test('render blockquote', () => {
 })
 
 test('render fenced code', () => {
-  const html = renderLines(['``` css.pink numbered', 'em {}', '```'])
-  expect(html).toStartWith('<div class="pink"><pre><code language="css"><span>')
+  const html0 = renderLines(['```css .pink numbered', 'em {}', '```'])
+  expect(html0).toStartWith('<div class="pink"><pre><code language="css"><span>')
+  const html1 = renderLines(['```css.pink numbered', 'em {}', '```'])
+  expect(html1).toStartWith('<div class="pink"><pre><code language="css"><span>')
+  const html2 = renderLines(['```.pink numbered', 'em {}', '```'])
+  expect(html2).toStartWith('<div class="pink"><pre><code language="*"><span>')
+  const html3 = renderLines(['```.pink', 'em {}', '```'])
+  expect(html3).toStartWith('<div class="pink"><pre><code language="*">')
 })
 
 test('fenced code with caption', () => {
@@ -141,29 +147,29 @@ test('fenced code with caption', () => {
 
 test('multi-line list entries', () => {
   const list = parseBlocks(['* foo', '  boy', '* bar']).blocks[0]
-  expect(list.entries).toEqual([ [ "foo", "boy" ], [ "bar" ] ])
+  expect(list.entries).toEqual([["foo", "boy"], ["bar"]])
 })
 
 test('nested list', () => {
   const { items } = parseBlocks(['* > foo', '  1. boy', '  2. bar']).blocks[0]
-  const [ [ quote, nested ] ] = items
+  const [[quote, nested]] = items
 
   expect(quote.is_quote).toBeTrue()
   expect(nested.is_list).toBeTrue()
 })
 
 test('blockquote', () => {
-  const [ quote ] = parseBlocks(['> foo', '> boy']).blocks
+  const [quote] = parseBlocks(['> foo', '> boy']).blocks
   expect(quote.is_quote).toBeTrue()
-  expect(quote.content).toEqual([ "foo", "boy" ])
+  expect(quote.content).toEqual(["foo", "boy"])
 })
 
 test('fenced code blocks', () => {
-  const [ code ] = parseBlocks(['``` css.foo numbered', 'func()', '```']).blocks
+  const [code] = parseBlocks(['``` css.foo numbered', 'func()', '```']).blocks
 
   expect(code.name).toBe('css')
   expect(code.attr).toEqual({ class: 'foo' })
-  expect(code.code).toEqual([ "func()" ])
+  expect(code.code).toEqual(["func()"])
   expect(code.data.numbered).toBeTrue()
 })
 
@@ -176,8 +182,8 @@ test('parse table', () => {
   ]
 
   // parse
-  const [ table ] = parseBlocks(lines).blocks
-  expect(table.rows[1]).toEqual([ "January", "$250" ])
+  const [table] = parseBlocks(lines).blocks
+  expect(table.rows[1]).toEqual(["January", "$250"])
   expect(table.rows.length).toBe(3)
   expect(table.head).toBeTrue()