add support for image title and alt attributes (#44)

* add support for image title and alt attributes * fix review comments * fix final review comments
googlecodelabs · Apr 10, 2018 · 48ed6f8 · 48ed6f8
1 parent d50c9a6
commit 48ed6f8
Show file tree

Hide file tree

Showing 7 changed files with 748 additions and 717 deletions.
diff --git a/claat/parser/gdoc/parse.go b/claat/parser/gdoc/parse.go
@@ -658,6 +658,8 @@ func image(ds *docState) types.Node {
 	n := types.NewImageNode(s)
 	n.MaxWidth = styleFloatValue(ds.cur, "width")
 	n.MutateBlock(findBlockParent(ds.cur))
+	n.Alt = nodeAttr(ds.cur, "alt")
+	n.Title = nodeAttr(ds.cur, "title")
 	return n
 }
 

diff --git a/claat/parser/gdoc/parse_test.go b/claat/parser/gdoc/parse_test.go
@@ -222,7 +222,7 @@ func TestParseDoc(t *testing.T) {
 
 		<p><span>[[</span><span class="bold">import</span><span>&nbsp;</span><span><a href="https://example.com/import">shared</a></span><span>]]</span></p>
 
-		<img src="https://host/image.png">
+		<img src="https://host/image.png" alt="alt text" title="title text">
 		<p><img src="https://host/small.png" style="height: 10px; width: 25.5px"> icon.</p>
 
 		<p><img alt="https://www.youtube.com/watch?v=vid" src="https://yt.com/vid.jpg"></p>
@@ -323,6 +323,8 @@ func TestParseDoc(t *testing.T) {
 	content := types.NewListNode()
 
 	img := types.NewImageNode("https://host/image.png")
+	img.Alt = "alt text"
+	img.Title = "title text"
 	para := types.NewListNode(img)
 	para.MutateBlock(true)
 	content.Append(para)

diff --git a/claat/parser/md/parse.go b/claat/parser/md/parse.go
@@ -406,12 +406,23 @@ func handleInfobox(ps *parserState) {
 
 // handleImage handles <img> tags. It assumes the tokenizer is pointing to the <img> tag itself.
 func handleImage(ps *parserState) {
+	var n *types.ImageNode
+	var alt, title string
 	for _, v := range ps.t.Attr {
-		if v.Key == "src" {
-			ps.emit(types.NewImageNode(v.Val))
-			break
+		switch strings.ToLower(v.Key) {
+		case "src":
+			n = types.NewImageNode(v.Val)
+		case "alt":
+			alt = v.Val
+		case "title":
+			title = v.Val
 		}
 	}
+	if n != nil {
+		n.Alt = alt
+		n.Title = title
+		ps.emit(n)
+	}
 }
 
 // handleLink handles links and download buttons, both of which appear as <a> elements.

diff --git a/claat/render/html.go b/claat/render/html.go
@@ -160,6 +160,12 @@ func (hw *htmlWriter) text(n *types.TextNode) {
 
 func (hw *htmlWriter) image(n *types.ImageNode) {
 	hw.writeString("<img")
+	if n.Alt != "" {
+		hw.writeFmt(" alt=%q", n.Alt)
+	}
+	if n.Title != "" {
+		hw.writeFmt(" title=%q", n.Title)
+	}
 	if n.MaxWidth > 0 {
 		hw.writeFmt(` style="max-width: %.2fpx"`, n.MaxWidth)
 	}

diff --git a/claat/render/md.go b/claat/render/md.go
@@ -16,6 +16,7 @@ package render
 
 import (
 	"bytes"
+	"fmt"
 	"io"
 	"path"
 	"sort"
@@ -148,9 +149,16 @@ func (mw *mdWriter) text(n *types.TextNode) {
 func (mw *mdWriter) image(n *types.ImageNode) {
 	mw.space()
 	mw.writeString("![")
-	mw.writeString(path.Base(n.Src))
+	if n.Alt != "" {
+		mw.writeString(n.Alt)
+	} else {
+		mw.writeString(path.Base(n.Src))
+	}
 	mw.writeString("](")
 	mw.writeString(n.Src)
+	if n.Title != "" {
+		mw.writeString(fmt.Sprintf(" %q", n.Title))
+	}
 	mw.writeString(")")
 }