Design Description Editor

[jklewa]

We want full support for Headings, Text Styling (bold, italic), Links, Bulleted Lists, and Paragraph breaks

Nice to have: Images, Dynamic Amazon affiliate links, Dynamic links/image to another design published on that platform

[visherj]

PR: https://github.com/DrawnToDigital/pubman-ui/pull/19

[jklewa]

@visherj How difficult would it be to add support for block quotes and tables as well?

I also noticed that the description field is output in html. Is it possible to output in Markdown? I think that format is more widely supported but I'll have to check each platform to see how they do it - may still need a transformer per-platform to ensure it's formatted properly

[visherj]

Just seeing your comment, I'll take a look at these things as a part of my PR for the nice to haves!

[jklewa]

Here are some examples of text formatting on the 3 different platforms.

Some things that I noticed:

• Thingiverse uses Markdown, with some html tags also supported
• Printables maps headers H1,H2,H3 -> <h3>,<h4>,<h5>
• Makerworld maps headers H1,H2,H3 -> <h2>,<h3>,<h4>
• Printables has a short text-only Summary and a full Description field
• Makerworld only has a Description field, no "summary"
• Thingiverse calls its Description field a "Summary" section. You may create custom sections after the Summary.

Thingiverse

Details

html/markdown supported https://daringfireball.net/projects/markdown/basics

# Header 1
<h1>Header 1</h1>

**Bold** _Italic_ Normal Text __Underlined__

## Header 2
<h2>Header 2</h2>

[Link](https://example.com)

### Header 3
<h3>Header 3</h3>

> quotation
> block
> ### Headers are allowed in here

`code`
```var format = “code”```

Table

<table>
<tr><td>A1</td><td>B1</td></tr>
<tr><td>A2</td><td>B2</td></tr>
</table>

Lists

* Bullet A
* Bullet B

1. Number 1
2. Number 2

Printables

Details

<h3>Header 1</h3>
<p><strong>Bold</strong> <i>Italic</i> Normal Text</p>
<h4>Header 2</h4>
<p><a href="https://example.com">Link</a></p>
<h5>Header 3</h5>
<blockquote>
    <p>quotation<br>block</p>
</blockquote>
<p><code>var format = “code”</code></p>
<p>Table</p>
<figure class="table">
    <table>
        <tbody>
            <tr>
                <td>A1</td>
                <td>B1</td>
            </tr>
            <tr>
                <td>A2</td>
                <td>B2</td>
            </tr>
        </tbody>
    </table>
</figure>
<p>Lists</p>
<ul>
    <li>Bullet A</li>
    <li>Bullet B</li>
</ul>
<ol>
    <li>Number 1</li>
    <li>Number 2</li>
</ol>

MakerWorld

Details

<h2>Header 1</h2>
<p><strong>Bold</strong> <i>Italic </i><u>Underlined</u> Normal Text <span style="color:#E14747;">Red-Color</span></p>
<h3>Header 2</h3>
<p><a target="_blank" rel="noopener noreferrer" href="https://example.com">Link</a></p>
<h4>Header 3</h4>
<blockquote>
    <p>quotation<br>block</p>
</blockquote>
<p>(No code formatting option)</p>
<p>Aligned Left (normal)</p>
<p style="text-align:center;">Aligned Center</p>
<p style="text-align:right;">Aligned Right</p>
<p>&nbsp;</p>
<p>Table</p>
<figure class="table">
    <table>
        <tbody>
            <tr>
                <td>A1</td>
                <td>B1</td>
            </tr>
            <tr>
                <td>A2</td>
                <td>B2</td>
            </tr>
        </tbody>
    </table>
</figure>
<p>Lists Bullet type 1</p>
<ul>
    <li>Circular filled</li>
</ul>
<p>Lists Bullet type 2</p>
<ul style="list-style-type:circle;">
    <li>Circular hollow</li>
</ul>
<p>Lists Bullet type 3</p>
<ul style="list-style-type:square;">
    <li>Square filled</li>
</ul>
<p>Numbered type 1</p>
<ol>
    <li>Number 1</li>
</ol>
<p>Numbered type 2</p>
<ol style="list-style-type:lower-roman;">
    <li>lowercase roman numeral</li>
</ol>