diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/behaviors/copy_as_gfm.js similarity index 97% rename from app/assets/javascripts/copy_as_gfm.js rename to app/assets/javascripts/behaviors/copy_as_gfm.js index 93b0cbf4209..e7dc4ef8304 100644 --- a/app/assets/javascripts/copy_as_gfm.js +++ b/app/assets/javascripts/behaviors/copy_as_gfm.js @@ -1,7 +1,8 @@ /* eslint-disable class-methods-use-this, object-shorthand, no-unused-vars, no-use-before-define, no-new, max-len, no-restricted-syntax, guard-for-in, no-continue */ + import _ from 'underscore'; -import { insertText, getSelectedFragment, nodeMatchesSelector } from './lib/utils/common_utils'; -import { placeholderImage } from './lazy_loader'; +import { insertText, getSelectedFragment, nodeMatchesSelector } from '../lib/utils/common_utils'; +import { placeholderImage } from '../lazy_loader'; const gfmRules = { // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert @@ -284,7 +285,7 @@ const gfmRules = { }, }; -class CopyAsGFM { +export class CopyAsGFM { constructor() { $(document).on('copy', '.md, .wiki', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); }); $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection); }); @@ -469,7 +470,12 @@ class CopyAsGFM { } } -window.gl = window.gl || {}; -window.gl.CopyAsGFM = CopyAsGFM; +// Export CopyAsGFM as a global for rspec to access +// see /spec/features/copy_as_gfm_spec.rb +if (process.env.NODE_ENV !== 'production') { + window.CopyAsGFM = CopyAsGFM; +} -new CopyAsGFM(); +export default function initCopyAsGFM() { + return new CopyAsGFM(); +} diff --git a/app/assets/javascripts/behaviors/index.js b/app/assets/javascripts/behaviors/index.js index 44b2c974b9e..671532394a9 100644 --- a/app/assets/javascripts/behaviors/index.js +++ b/app/assets/javascripts/behaviors/index.js @@ -1,5 +1,6 @@ import './autosize'; import './bind_in_out'; +import initCopyAsGFM from './copy_as_gfm'; import './details_behavior'; import installGlEmojiElement from './gl_emoji'; import './quick_submit'; @@ -7,3 +8,4 @@ import './requires_input'; import './toggler_behavior'; installGlEmojiElement(); +initCopyAsGFM(); diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 9117f033c9f..31c5cfc5e55 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -46,7 +46,6 @@ import './commits'; import './compare'; import './compare_autocomplete'; import './confirm_danger_modal'; -import './copy_as_gfm'; import './copy_to_clipboard'; import Flash, { removeFlashClickListener } from './flash'; import './gl_dropdown'; diff --git a/app/assets/javascripts/shortcuts_issuable.js b/app/assets/javascripts/shortcuts_issuable.js index fc97938e3d1..4f4f606d293 100644 --- a/app/assets/javascripts/shortcuts_issuable.js +++ b/app/assets/javascripts/shortcuts_issuable.js @@ -4,6 +4,7 @@ import _ from 'underscore'; import 'mousetrap'; import ShortcutsNavigation from './shortcuts_navigation'; +import { CopyAsGFM } from './behaviors/copy_as_gfm'; export default class ShortcutsIssuable extends ShortcutsNavigation { constructor(isMergeRequest) { @@ -33,8 +34,8 @@ export default class ShortcutsIssuable extends ShortcutsNavigation { return false; } - const el = window.gl.CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true)); - const selected = window.gl.CopyAsGFM.nodeToGFM(el); + const el = CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true)); + const selected = CopyAsGFM.nodeToGFM(el); if (selected.trim() === '') { return false; diff --git a/spec/features/copy_as_gfm_spec.rb b/spec/features/copy_as_gfm_spec.rb index c6ba1211b9e..1fcb8d5bc67 100644 --- a/spec/features/copy_as_gfm_spec.rb +++ b/spec/features/copy_as_gfm_spec.rb @@ -664,7 +664,7 @@ describe 'Copy as GFM', :js do def html_to_gfm(html, transformer = 'transformGFMSelection', target: nil) js = <<-JS.strip_heredoc (function(html) { - var transformer = window.gl.CopyAsGFM[#{transformer.inspect}]; + var transformer = window.CopyAsGFM[#{transformer.inspect}]; var node = document.createElement('div'); $(html).each(function() { node.appendChild(this) }); @@ -678,7 +678,7 @@ describe 'Copy as GFM', :js do node = transformer(node, target); if (!node) return null; - return window.gl.CopyAsGFM.nodeToGFM(node); + return window.CopyAsGFM.nodeToGFM(node); })("#{escape_javascript(html)}") JS page.evaluate_script(js) diff --git a/spec/javascripts/behaviors/copy_as_gfm_spec.js b/spec/javascripts/behaviors/copy_as_gfm_spec.js new file mode 100644 index 00000000000..b8155144e2a --- /dev/null +++ b/spec/javascripts/behaviors/copy_as_gfm_spec.js @@ -0,0 +1,47 @@ +import { CopyAsGFM } from '~/behaviors/copy_as_gfm'; + +describe('CopyAsGFM', () => { + describe('CopyAsGFM.pasteGFM', () => { + function callPasteGFM() { + const e = { + originalEvent: { + clipboardData: { + getData(mimeType) { + // When GFM code is copied, we put the regular plain text + // on the clipboard as `text/plain`, and the GFM as `text/x-gfm`. + // This emulates the behavior of `getData` with that data. + if (mimeType === 'text/plain') { + return 'code'; + } + if (mimeType === 'text/x-gfm') { + return '`code`'; + } + return null; + }, + }, + }, + preventDefault() {}, + }; + + CopyAsGFM.pasteGFM(e); + } + + it('wraps pasted code when not already in code tags', () => { + spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => { + const insertedText = textFunc('This is code: ', ''); + expect(insertedText).toEqual('`code`'); + }); + + callPasteGFM(); + }); + + it('does not wrap pasted code when already in code tags', () => { + spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => { + const insertedText = textFunc('This is code: `', '`'); + expect(insertedText).toEqual('code'); + }); + + callPasteGFM(); + }); + }); +}); diff --git a/spec/javascripts/copy_as_gfm_spec.js b/spec/javascripts/copy_as_gfm_spec.js deleted file mode 100644 index ded450749d3..00000000000 --- a/spec/javascripts/copy_as_gfm_spec.js +++ /dev/null @@ -1,49 +0,0 @@ -import '~/copy_as_gfm'; - -(() => { - describe('gl.CopyAsGFM', () => { - describe('gl.CopyAsGFM.pasteGFM', () => { - function callPasteGFM() { - const e = { - originalEvent: { - clipboardData: { - getData(mimeType) { - // When GFM code is copied, we put the regular plain text - // on the clipboard as `text/plain`, and the GFM as `text/x-gfm`. - // This emulates the behavior of `getData` with that data. - if (mimeType === 'text/plain') { - return 'code'; - } - if (mimeType === 'text/x-gfm') { - return '`code`'; - } - return null; - }, - }, - }, - preventDefault() {}, - }; - - window.gl.CopyAsGFM.pasteGFM(e); - } - - it('wraps pasted code when not already in code tags', () => { - spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => { - const insertedText = textFunc('This is code: ', ''); - expect(insertedText).toEqual('`code`'); - }); - - callPasteGFM(); - }); - - it('does not wrap pasted code when already in code tags', () => { - spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => { - const insertedText = textFunc('This is code: `', '`'); - expect(insertedText).toEqual('code'); - }); - - callPasteGFM(); - }); - }); - }); -})(); diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js index f6320db8dc4..5d6a885d4cc 100644 --- a/spec/javascripts/shortcuts_issuable_spec.js +++ b/spec/javascripts/shortcuts_issuable_spec.js @@ -1,6 +1,8 @@ -import '~/copy_as_gfm'; +import initCopyAsGFM from '~/behaviors/copy_as_gfm'; import ShortcutsIssuable from '~/shortcuts_issuable'; +initCopyAsGFM(); + describe('ShortcutsIssuable', () => { const fixtureName = 'merge_requests/diff_comment.html.raw'; preloadFixtures(fixtureName);