diff --git a/README.md b/README.md index f18033b..6c554a2 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,9 @@ You may have to reload obsidian (`ctrl+R`) to see changes. # Version History +## v0.2.1 +Forked project to update manifest.json + ## v0.2.0 Add excluded languages, currently only includes "todoist" to be compatible with the todoist plugin. Will add setting page to add custom exclude languages in future. diff --git a/main.ts b/main.ts index df20be2..33f1a51 100644 --- a/main.ts +++ b/main.ts @@ -5,6 +5,8 @@ const excludeLangs = [ "todoist" ]; +const svgCopy = ''; + export default class CMSyntaxHighlightPlugin extends Plugin { @@ -26,42 +28,45 @@ export default class CMSyntaxHighlightPlugin extends Plugin { } addCopyButtons(clipboard:any) { - document.querySelectorAll('pre > code').forEach(function (codeBlock) { + document.querySelectorAll('pre > code').forEach(function (codeBlock: HTMLElement) { - var pre = codeBlock.parentNode; + const pre = codeBlock.parentNode as HTMLPreElement; // check for excluded langs for ( let lang of excludeLangs ){ - if (pre.classList.contains( `language-${lang}` )) + if (pre.classList.contains(`language-${lang}`)) return; } - // Dont add more than once - if (pre.parentNode.classList.contains('has-copy-button')) { + const parent = pre.parentNode as HTMLDivElement; + + // don't add more than once + if (parent.classList.contains('has-copy-button')) { return; } - pre.parentNode.classList.add( 'has-copy-button' ); - var button = document.createElement('button'); - button.className = 'copy-code-button'; - button.type = 'button'; - button.innerText = 'Copy'; - - button.addEventListener('click', function () { - clipboard.writeText(codeBlock.innerText).then(function () { - /* Chrome doesn't seem to blur automatically, - leaving the button in a focused state. */ - button.blur(); - - button.innerText = 'copied!'; - - setTimeout(function () { - button.innerText = 'copy'; - }, 2000); - }, function (error) { - button.innerText = 'Error'; - }); - }); + parent.classList.add('has-copy-button'); + + const button = document.createElement('div'); + button.className = 'copy-code-button'; + button.setAttribute('aria-label', 'Copy code block'); + button.innerHTML = svgCopy; + + button.addEventListener('click', function () { + clipboard.writeText(codeBlock.innerText).then(function () { + /* Chrome doesn't seem to blur automatically, + leaving the button in a focused state. */ + button.blur(); + + button.innerText = 'Code has been copied!'; + + setTimeout(function () { + button.innerHTML = svgCopy; + }, 2000); + }, function () { + button.innerText = 'An error occurred!'; + }); + }); pre.appendChild(button); diff --git a/manifest.json b/manifest.json index 7f707f8..e8173dd 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "id": "code-block-copy", - "name": "Copy button for code blocks", + "name": "Copy button for code blocks (fixed version manifest)", "author": "Daniel Brandenburg", - "description": "Copy button for code blocks", + "description": "Temporary version fix released by Nathaniel Palmer of source project by Daniel Brandenburg (https:\/\/github.com\/jdbrice\/obsidian-code-block-copy)", "isDesktopOnly": false, - "version": "0.2.0" + "version": "0.2.1" } diff --git a/package.json b/package.json index 3d7cba5..db8718c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "code-block-copy", - "version": "0.1.0", + "version": "0.2.1", "description": "Copy button for code blocks", "main": "main.js", "scripts": { diff --git a/styles.scss b/styles.scss index 484d8d7..a14314f 100644 --- a/styles.scss +++ b/styles.scss @@ -1,8 +1,6 @@ .copy-code-button { - color: var(--background-primary); - background-color: var(--text-faint); - border-radius: 1px 1px 0px 0px; + color: var(--text-faint); /* right-align */ display: block; @@ -16,23 +14,15 @@ position: absolute; top: 0px; right: 0px; -} - -.copy-code-button:hover { - cursor: pointer; - background-color: var(--text-normal); -} -.copy-code-button:focus { - /* Avoid an ugly focus outline on click in Chrome, - but darken the button for accessibility. - See https://stackoverflow.com/a/25298082/1481479 */ - background-color: var(--text-normal); - outline: 0; -} + &:hover, &:active { + cursor: pointer; + color: var(--interactive-accent-hover); + } -.copy-code-button:active { - background-color: var(--text-normal); + &:focus { + outline: 0; + } } .highlight pre {