Add optional copy-to-clipboard widget (for code sections) #39

Open
opened 4 months ago by notorand-it · 2 comments

There should be an optional widget that allows to copy the content of a code section (or any section fwim) into the client clipboard.

Main use cases are for code snippets and shell scripts. But it can be applied to any text section that the user would need to "use" outside of the wiki.

Note. Ideally this should be a snippet that doesn't require the author to replicate the text from the section to the widget-enabling markup/pseudocode.

There should be an optional widget that allows to copy the content of a code section (or any section fwim) into the client clipboard. Main use cases are for code snippets and shell scripts. But it can be applied to any text section that the user would need to "use" outside of the wiki. Note. Ideally this should be a snippet that doesn't require the author to replicate the text from the section to the widget-enabling markup/pseudocode.
notorand-it added the
request
label 4 months ago
Alamantus added the
extension
label 4 months ago

I quickly threw together an extension that you can copy into your Custom JS section of Wiki Settings.

A live demo is available, but I'll be using that FeatherWiki to develop other extensions, so things might not be super stable there.

Here is the hand-minified version:

/**FW#39*/
(()=>{const html=window.html,d=document;window.FW.use((y, e, z)=>{const i=()=>{setTimeout(()=>{[...d.getElementsByTagName('pre')].forEach(q=>{if(q.getElementsByClassName('ext_ctc').length>0)return;const b=html`<button class=ext_ctc aria-label="Copy to Clipboard">\uD83D\uDCCB</button>`;b.onclick=()=>{const p=q.cloneNode(true);p.removeChild(p.getElementsByClassName('ext_ctc')[0]);const c=()=>prompt("Press Ctrl+C and press Enter",p.textContent);try{navigator.clipboard.writeText(p.textContent).then(()=>alert("Copied!"),c);}catch(r){c();}};q.insertBefore(b,q.childNodes[0]);});d.body.appendChild(html`<style>pre{position:relative;}pre:hover .ext_ctc{display:block;}.ext_ctc{display:none;padding:3px 6px;position:absolute;top:3px;right:3px;}</style>`);},0);};e.on('render',i);i();});})();

And here is the unminified version:

/** Copy-to-clipboard for code sections (FeatherWiki#39) */
(() => {
  const app = window.FW;
  const html = window.html;

  app.use((state, emitter, app) => {
    const insert = () => {
      setTimeout(() => {
        [...document.getElementsByTagName('pre')].forEach(codeblock => {
          if (codeblock.getElementsByClassName('ext_ctc').length > 0) return;
          const b = html`<button class=ext_ctc aria-label="Copy to Clipboard">\uD83D\uDCCB</button>`;
          b.onclick = () => {
            const p = codeblock.cloneNode(true);
            p.removeChild(p.getElementsByClassName('ext_ctc')[0]);
            const c = () => prompt("Press Ctrl+C and press Enter", p.textContent);
            try {
              navigator.clipboard.writeText(p.textContent).then(()=>alert("Copied!"),c);
            } catch (e) { c(); }
          };
          codeblock.insertBefore(b, codeblock.childNodes[0]);
        });
        document.body.appendChild(html`<style>pre{position:relative;}pre:hover .ext_ctc{display:block;}.ext_ctc{display:none;padding:3px 6px;position:absolute;top:3px;right:3px;}</style>`);
      }, 0);
    };
    emitter.on('render', insert);
    insert();
  });
})();

I have not tested this extension on anything other than Chrome 103, but I believe it should work on all browsers supported by FeatherWiki. There is a fallback method of copying to the clipboard in case the browser doesn't support navigator.clipboard.

Edit: Combined issue replies

I quickly threw together an extension that you can copy into your Custom JS section of Wiki Settings. A [live demo](https://featherdev.tiddlyhost.com/?page=copy-to-clipboard) is available, but I'll be using that FeatherWiki to develop other extensions, so things might not be super stable there. Here is the hand-minified version: ```js /**FW#39*/ (()=>{const html=window.html,d=document;window.FW.use((y, e, z)=>{const i=()=>{setTimeout(()=>{[...d.getElementsByTagName('pre')].forEach(q=>{if(q.getElementsByClassName('ext_ctc').length>0)return;const b=html`<button class=ext_ctc aria-label="Copy to Clipboard">\uD83D\uDCCB</button>`;b.onclick=()=>{const p=q.cloneNode(true);p.removeChild(p.getElementsByClassName('ext_ctc')[0]);const c=()=>prompt("Press Ctrl+C and press Enter",p.textContent);try{navigator.clipboard.writeText(p.textContent).then(()=>alert("Copied!"),c);}catch(r){c();}};q.insertBefore(b,q.childNodes[0]);});d.body.appendChild(html`<style>pre{position:relative;}pre:hover .ext_ctc{display:block;}.ext_ctc{display:none;padding:3px 6px;position:absolute;top:3px;right:3px;}</style>`);},0);};e.on('render',i);i();});})(); ``` And here is the unminified version: ```js /** Copy-to-clipboard for code sections (FeatherWiki#39) */ (() => { const app = window.FW; const html = window.html; app.use((state, emitter, app) => { const insert = () => { setTimeout(() => { [...document.getElementsByTagName('pre')].forEach(codeblock => { if (codeblock.getElementsByClassName('ext_ctc').length > 0) return; const b = html`<button class=ext_ctc aria-label="Copy to Clipboard">\uD83D\uDCCB</button>`; b.onclick = () => { const p = codeblock.cloneNode(true); p.removeChild(p.getElementsByClassName('ext_ctc')[0]); const c = () => prompt("Press Ctrl+C and press Enter", p.textContent); try { navigator.clipboard.writeText(p.textContent).then(()=>alert("Copied!"),c); } catch (e) { c(); } }; codeblock.insertBefore(b, codeblock.childNodes[0]); }); document.body.appendChild(html`<style>pre{position:relative;}pre:hover .ext_ctc{display:block;}.ext_ctc{display:none;padding:3px 6px;position:absolute;top:3px;right:3px;}</style>`); }, 0); }; emitter.on('render', insert); insert(); }); })(); ``` I have not tested this extension on anything other than Chrome 103, but I believe it should work on all browsers supported by FeatherWiki. There is a fallback method of copying to the clipboard in case the browser doesn't support navigator.clipboard. Edit: Combined issue replies

I've uploaded the extension to Github Pages. Instead of pasting the above snippet into Custom JS, you can paste the following below:

document.body.appendChild(html`<script src="https://pythonmcpi.github.io/fw_ext/copy_to_clipboard.min.js"><\/script>`);

You'll get automatic updates if I fix any bugs with the snippet, and you'll save over half a KB of disk space. However, you won't be able to use the extension without internet if you load it from Github Pages.

I've uploaded the extension to Github Pages. Instead of pasting the above snippet into Custom JS, you can paste the following below: ```js document.body.appendChild(html`<script src="https://pythonmcpi.github.io/fw_ext/copy_to_clipboard.min.js"><\/script>`); ``` You'll get automatic updates if I fix any bugs with the snippet, and you'll save over half a KB of disk space. However, you won't be able to use the extension without internet if you load it from Github Pages.
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Reference: Alamantus/FeatherWiki#39
Loading…
There is no content yet.