CopyCodeButton/main.js at master · InPoint-Automation/CopyCodeButton · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// Copy Code Button - Copyright (C) 2026 InPoint Automation Sp. z o.o.
// Licensed under the GNU General Public License v3 or later; see LICENSE.
//
// Adds copy-to-clipboard button to every code block in posts and pages.

class CopyCodeButton {
    constructor(API, name, config) {
        this.API = API;
        this.name = name;
        this.config = config;
    }

    addModifiers() {
        const isPost = this.config.applyTo === 'post' || this.config.applyTo === 'both';
        const isPage = this.config.applyTo === 'page' || this.config.applyTo === 'both';

        if (isPost) {
            this.API.addModifier('postText', this.addCopyButtons, 2, this);
        }
        if (isPage) {
            this.API.addModifier('pageText', this.addCopyButtons, 2, this);
        }
    }

    addInsertions() {
        this.API.addInsertion('customHeadCode', this.addStyles, 1, this);
        this.API.addInsertion('customFooterCode', this.addScript, 1, this);
    }

    addCopyButtons(rendererInstance, text) {
        const buttonHtml = '<button class="copy-code-btn" type="button" aria-label="Copy code">'
            + '<svg class="copy-code-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
            + '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>'
            + '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>'
            + '</svg>'
            + '<span class="copy-code-text"></span>'
            + '</button>';

        return text.replace(
            /(<pre(?:\s[^>]*)?>)\s*(<code(?:\s[^>]*)?>)([\s\S]*?)<\/code>\s*<\/pre>/gi,
            function (match, preTag, codeTag, codeContent) {
                return '<div class="code-block-wrapper">'
                    + buttonHtml
                    + preTag + codeTag + codeContent + '</code></pre>'
                    + '</div>';
            }
        );
    }

    addStyles(rendererInstance, context) {
        if (!context.post && !context.page) return '';

        return '<style>'
            + '.code-block-wrapper {'
            + '  position: relative;'
            + '}'
            + '.copy-code-btn {'
            + '  position: absolute !important;'
            + '  top: 8px !important;'
            + '  right: 12px !important;'
            + '  z-index: 10;'
            + '  display: flex !important;'
            + '  align-items: center !important;'
            + '  gap: 4px;'
            + '  padding: 6px !important;'
            + '  height: auto !important;'
            + '  min-height: 0 !important;'
            + '  border-radius: 4px;'
            + '  cursor: pointer;'
            + '  opacity: 0;'
            + '  transition: opacity 0.2s ease;'
            + '  line-height: 1 !important;'
            + '}'
            + '.code-block-wrapper:hover .copy-code-btn {'
            + '  opacity: 1;'
            + '}'
            + '.copy-code-btn.is-copied {'
            + '  opacity: 1;'
            + '  padding: 6px 10px !important;'
            + '}'
            + '.copy-code-icon {'
            + '  flex-shrink: 0;'
            + '}'
            + '.copy-code-text {'
            + '  color: inherit !important;'
            + '}'
            + '.copy-code-text:empty {'
            + '  display: none;'
            + '}'
            + '</style>';
    }

    addScript(rendererInstance, context) {
        if (!context.post && !context.page) return '';

        const copiedText = this.config.copiedText || 'Copied!';
        const copiedDuration = parseInt(this.config.copiedDuration, 10) || 2000;

        return '<script>'
            + 'document.addEventListener("DOMContentLoaded", function() {'
            + '  document.querySelectorAll(".copy-code-btn").forEach(function(btn) {'
            + '    btn.addEventListener("click", function() {'
            + '      var wrapper = this.closest(".code-block-wrapper");'
            + '      var code = wrapper.querySelector("code");'
            + '      if (!code) return;'
            + '      var text = code.innerText || code.textContent;'
            + '      navigator.clipboard.writeText(text).then(function() {'
            + '        var textSpan = btn.querySelector(".copy-code-text");'
            + '        textSpan.textContent = "' + this.escJs(copiedText) + '";'
            + '        btn.classList.add("is-copied");'
            + '        setTimeout(function() {'
            + '          textSpan.textContent = "";'
            + '          btn.classList.remove("is-copied");'
            + '        }, ' + copiedDuration + ');'
            + '      }).catch(function(err) {'
            + '        console.error("[Copy Code Button] Copy failed:", err);'
            + '      });'
            + '    });'
            + '  });'
            + '});'
            + '</script>';
    }

    escJs(str) {
        return String(str)
            .replace(/\\/g, '\\\\')
            .replace(/"/g, '\\"')
            .replace(/\n/g, '\\n');
    }
}

module.exports = CopyCodeButton;