diff --git a/cypress/integration/CodeViewer.spec.js b/cypress/integration/CodeViewer.spec.js
new file mode 100644
index 000000000..5a6a6f0ca
--- /dev/null
+++ b/cypress/integration/CodeViewer.spec.js
@@ -0,0 +1,21 @@
+describe("CodeViewer", () => {
+ it("should not be editable", () => {
+ cy.viewport(600, 1000).visit(
+ `/iframe.html?id=components-code-viewer--component`
+ );
+
+ cy.get(".cm-content").type("{selectall}").type("{backspace}");
+
+ cy.get(".cm-content").snapshot();
+ });
+
+ it("should not be able to cut the content", () => {
+ cy.viewport(600, 1000).visit(
+ `/iframe.html?id=components-code-viewer--component`
+ );
+
+ cy.get(".cm-content").type("{selectall}").type("{meta}x");
+
+ cy.get(".cm-content").snapshot();
+ });
+});
diff --git a/cypress/snapshots.js b/cypress/snapshots.js
index 17ecb2f0b..d44f6b473 100644
--- a/cypress/snapshots.js
+++ b/cypress/snapshots.js
@@ -1,29 +1,37 @@
module.exports = {
- CodeMirror: {
- 'Should render a "html" component with a proper syntax-highlight': {
- 1: '\n
\n
<!DOCTYPE html>
\n
<html\n lang="en">
\n
<head>
\n
<meta charset="UTF-8">
\n
<meta name="viewport" content="width=device-width, initial-scale=1.0">
\n
<meta http-equiv="X-UA-Compatible" content="ie=edge">
\n
<title>HTML 5\n Boilerplate</title>
\n
<link rel="stylesheet" href="style.css">
\n
</head>
\n
<body>
\n
<script src="index.js"></script>
\n
</body>
\n
</html>
\n
\n
\n
\n
<!DOCTYPE html>
\n
<html\n lang=\"en\">
\n
<head>
\n
<meta charset=\"UTF-8\">
\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
\n
<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
\n
<title>HTML 5\n Boilerplate</title>
\n
<link rel=\"stylesheet\" href=\"style.css\">
\n
</head>
\n
<body>
\n
<script src=\"index.js\"></script>
\n
</body>
\n
</html>
\n
\n
\n
\n
function foo(params) {
\n
return params
\n
}
\n
\n
const baz\n = (foo) => {
\n
return foo
\n
}
\n
\n
const array = [];
\n
const object = {};
\n
const regex = new Regex(//);
\n
\n
const expr = \'Papayas\';
\n
switch (expr)\n {
\n
case \'Oranges\':
\n
console.log(\'Oranges\n are $0.59 a pound.\');
\n
break;\n
\n
case \'Mangoes\':
\n
case \'Papayas\':
\n
console.log(\'Mangoes\n and papayas are $2.79 a pound.\');
\n
// expected output: "Mangoes and\n papayas are $2.79 a pound."
\n
break;\n
\n
default:
\n
console.log(`Sorry, we\n are out of ${expr}.`);\n
\n
}
\n
\n
\n
\n
function foo(params) {
\n
return params
\n
}
\n
\n
const baz\n = (foo) => {
\n
return foo
\n
}
\n
\n
const array = [];
\n
const object = {};
\n
const regex = new Regex(//);
\n
\n
const expr = 'Papayas';
\n
switch (expr)\n {
\n
case 'Oranges':
\n
console.log('Oranges\n are $0.59 a pound.');
\n
break;\n
\n
case 'Mangoes':
\n
case 'Papayas':
\n
console.log('Mangoes\n and papayas are $2.79 a pound.');
\n
// expected output: \"Mangoes and\n papayas are $2.79 a pound.\"
\n
break;\n
\n
default:
\n
console.log(`Sorry, we\n are out of ${expr}.`);\n
\n
}
\n
\n
\n
\n
function Greeting({ name }) {\n
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n
\n
export default function App()\n {
\n
return (
\n
<div>
\n
<Greeting name="Divyesh" />
\n
<Greeting name="Sarah" />
\n
<Greeting name="Taylor" />
\n
</div>
\n
);\n
\n
}
\n
\n
\n
\n
function Greeting({ name }) {\n
\n
return <h1>Hello, {name}!</h1>;
\n
}
\n
\n
export default function App()\n {
\n
return (
\n
<div>
\n
<Greeting name=\"Divyesh\" />
\n
<Greeting name=\"Sarah\" />
\n
<Greeting name=\"Taylor\" />
\n
</div>
\n
);\n
\n
}
\n
\n
\n
\n
body {\n
\n
background-color: lightblue;
\n
}
\n
\n
h1 {\n
\n
color:\n white;
\n
text-align: center;
\n
}
\n
\n
p {\n
\n
font-family: verdana;
\n
font-size: 20px;
\n
}
\n
\n
\n
\n
body {\n
\n
background-color: lightblue;
\n
}
\n
\n
h1 {\n
\n
color:\n white;
\n
text-align: center;
\n
}
\n
\n
p {\n
\n
font-family: verdana;
\n
font-size: 20px;
\n
}
\n
\n
\n
\n
@width:\n 10px;
\n
@height:\n @width + 10px;
\n
\n
#header {
\n
width:\n @width;
\n
height:\n @height;
\n
}
\n
\n
\n
\n
@width:\n 10px;
\n
@height:\n @width + 10px;
\n
\n
#header {
\n
width:\n @width;
\n
height:\n @height;
\n
}
\n
\n
\n
\n
<template>
\n
<div\n class="column is-12">
\n
<label class="label" for="email">Email</label>
\n
<p\n :class="{ \'control\': true\n }">
\n
<input v-validate="\'required|email\'" :class="{\'input\': true, \'is-danger\': errors.has(\'email\') }"\n name="email" type="text" placeholder="Email">
\n
<span v-show="errors.has(\'email\')" class="help is-danger">{{ errors.first(\'email\') }}</span>
\n
</p>
\n
</div>
\n
</template>
\n
\n
<script>
\n
export default {
\n
name:\n \'basic-example\'
\n
};\n
\n
</script>
\n
\n
\n
\n
<template>
\n
<div\n class=\"column is-12\">
\n
<label class=\"label\" for=\"email\">Email</label>
\n
<p\n :class=\"{ 'control': true\n }\">
\n
<input v-validate=\"'required|email'\" :class=\"{'input': true, 'is-danger': errors.has('email') }\"\n name=\"email\" type=\"text\" placeholder=\"Email\">
\n
<span v-show=\"errors.has('email')\" class=\"help is-danger\">{{ errors.first('email') }}</span>
\n
</p>
\n
</div>
\n
</template>
\n
\n
<script>
\n
export default {
\n
name:\n 'basic-example'
\n
};\n
\n
</script>
\n
\n
\n
const people = [{
\n
id:\n 0,
\n
name:\n \'Creola Katherine Johnson\',\n
\n
profession: \'mathematician\',
\n
},\n {
\n
id:\n 1,
\n
name:\n \'Mario José Molina-Pasquel Henríquez\',
\n
profession: \'chemist\',
\n
}];
\n
\n
export default function List()\n {
\n
const [text,\n setText] = useState("")
\n
const listItems = people.map(person =>
\n
<li>{person}</li>
\n
);\n
\n
return <ul>{listItems}</ul>;
\n
}
\n
\n
const people = [{
\n
id:\n 0,
\n
name:\n 'Creola Katherine Johnson',\n
\n
profession: 'mathematician',
\n
},\n {
\n
id:\n 1,
\n
name:\n 'Mario José Molina-Pasquel Henríquez',
\n
profession: 'chemist',
\n
}];
\n
\n
export default function List()\n {
\n
const [text,\n setText] = useState(\"\")
\n
const listItems = people.map(person =>
\n
<li>{person}</li>
\n
);\n
\n
return <ul>{listItems}</ul>;
\n
}
\n
\n
class name {
\n
constructor(params) {
\n
\n
}
\n
}
\n
\n
class name {
\n
constructor(params) {
\n
\n
}
\n
}
\n
\n
const people = [{
\n
id:\n 0,
\n
name:\n 'Creola Katherine Johnson',\n
\n
profession: 'mathematician',
\n
},\n {
\n
id:\n 1,
\n
name:\n 'Mario José Molina-Pasquel Henríquez',
\n
profession: 'chemist',
\n
}];
\n
\n
export default function List()\n {
\n
const listItems = people.map(person =>
\n
<li>{person}</li>
\n
);\n
\n
return <ul>{listItems}</ul>;
\n
}
\n
\n
const people = [{
\n
id:\n 0,
\n
name:\n 'Creola Katherine Johnson',\n
\n
profession: 'mathematician',
\n
},\n {
\n
id:\n 1,
\n
name:\n 'Mario José Molina-Pasquel Henríquez',
\n
profession: 'chemist',
\n
}];
\n
\n
export default function List()\n {
\n
const listItems = people.map(person =>
\n
<li>{person}</li>
\n
);\n
\n
return <ul>{listItems}</ul>;
\n
}
\n