Add Copy Button to Code Blocks #138
Conversation
|
working on failing test now... |
|
the library inserts a UUID into the generated html, this causes any snap-shot used by our tests to fail. it may make sense to use the library as a starting point for our own custom code. |
|
fixes: #17 |
- client.js only - visual feedback with css - uses navigator.clipboard.writeText - adds the copy button on all PRE > CODE (or even PRE > SPAN) elements - pass data-copy=off to disable supersedes #138
There was a problem hiding this comment.
Using markdown-it was a good way to prototype, but the plugin implementation does not appear to be a good fit for the CLI platform:
- duplicates the contents in each block, making pages bigger
- uses a bunch of (obfuscated) code just to call document.execCommand("copy").
- execCommand is deprecated, we must use navigator.clipboard
- runs server-side, which means it can't process reactive code blocks.
In terms of UI I want to show "copy" only on hover, and replace it with "success" or "error" (how can it error, I don't know?) after the click.
I'd also want to make this optional (maybe a front-matter option, project option, or even block option).
Let me suggest an alternative approach, that builds on this work, but with a different implementation: #177
| @@ -0,0 +1,65 @@ | |||
| /* hide the langauge label provided by MarkdownIt */ | |||
There was a problem hiding this comment.
| /* hide the langauge label provided by MarkdownIt */ | |
| /* hide the language label provided by MarkdownIt */ |
| @@ -21,7 +21,7 @@ describe("parseMarkdown(input)", () => { | |||
| const snapshot = parseMarkdown(await readFile(path, "utf8"), "test/input", name); | |||
| let allequal = true; | |||
| for (const ext of ["html", "json"]) { | |||
| const actual = ext === "json" ? jsonMeta(snapshot) : snapshot[ext]; | |||
| const actual = applySpecialCaseFilters(ext === "json" ? jsonMeta(snapshot) : snapshot[ext]); | |||
There was a problem hiding this comment.
We'll want the build to be always reproducible, not only in tests; otherwise it's going to be painful for people who track changes of the artifacts, or when you who use a deploy script based on file differences.
| </code><div class="m-mdic-copy-wrapper"><span class="u-mdic-copy-code_lang">js</span><div class="u-mdic-copy-notify" id="j-notify">success</div><button class="u-mdic-copy-btn j-mdic-copy-btn" data-mdic-content="function add(a, b) { | ||
| return a + b; | ||
| } | ||
| " data-mdic-attach-content="" data-mdic-notify-id="j-notify" data-mdic-notify-delay="2000" data-mdic-copy-fail-text="fail" onclick="!function(t){const e={copy:(t='',e='')=>new Promise((c,o)=>{const n=document.createElement('textarea'),d=e?`\n\n${e}`:e;n.value=`${t}${d}`,document.body.appendChild(n),n.select();try{const t=document.execCommand('copy');document.body.removeChild(n),t?c():o()}catch(t){document.body.removeChild(n),o()}}),btnClick(t){const c=t&&t.dataset?t.dataset:{},o=c.mdicNotifyId,n=document.getElementById(o),d=c.mdicNotifyDelay,i=c.mdicCopyFailText;e.copy(c.mdicContent,c.mdicAttachContent).then(()=>{n.style.display='block',setTimeout(()=>{n.style.display='none'},d)}).catch(()=>{alert(i)})}};e.btnClick(t)}(this);">copy</button></div></pre> |
There was a problem hiding this comment.
I think we should roll our own, without this obfuscated code.
|
this is superseded by #177 |
- client.js only - visual feedback with css - uses navigator.clipboard.writeText - adds the copy button on all PRE > CODE (or even PRE > SPAN) elements - pass data-copy=off to disable supersedes #138
this uses the markdown-it plugin markdown-it-copy to add a copy-button to preview nodes. i've made a few
dubiousexpedient css choices.display: none;, but i can't find an option anywhere to disable this.here is a js code block:
a dot code block:
a dot code block with the success notification which lasts 2 seconds:
i doubt this will be the final visual treatment - for example, a nice copy icon button, but i don't think we have a set of icons in the project yet.