Skip to content

Commit 0277742

Browse files
committed
Remove attempted fix of background-colour incompatibility that was actually a hljs/Prism clash; Prevent and document hljs/Prism clash in tests
1 parent e05d8a7 commit 0277742

File tree

5 files changed

+222
-162
lines changed

5 files changed

+222
-162
lines changed

code-input.css

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,18 +68,16 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
6868
grid-row: 1;
6969
grid-column: 1;
7070
display: block;
71+
}
72+
code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
73+
height: max-content;
74+
width: max-content;
7175

7276
/* Allow colour change to reflect properly;
7377
transition-behavior: allow-discrete could be used but this is better supported and
7478
works with the color property. */
7579
transition: color 0.001s;
7680
}
77-
code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input pre {
78-
border: 0;
79-
80-
height: max-content;
81-
width: max-content;
82-
}
8381

8482
code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
8583
/* Remove all margin and padding from others */

tests/i18n-common.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// Attribution: Translated by Oliver Geer with some help from English Wiktionary
2+
let findAndReplaceTranslations = {
3+
start: "Buscar términos en su código.",
4+
none: "No hay sucesos",
5+
oneFound: "1 suceso encontrado.",
6+
matchIndex: (index, count) => `${index} de ${count} sucesos.`,
7+
error: (message) => `Error: ${message}`,
8+
infiniteLoopError: "Causa un ciclo infinito",
9+
closeDialog: "Cerrar el Diálogo y Regresar al Editor",
10+
findPlaceholder: "Buscar",
11+
findCaseSensitive: "Prestar atención a las minúsculas/mayúsculas",
12+
findRegExp: "Utilizar expresión regular de JavaScript",
13+
replaceTitle: "Reemplazar",
14+
replacePlaceholder: "Reemplazar con",
15+
findNext: "Buscar Suceso Próximo",
16+
findPrevious: "Buscar Suceso Previo",
17+
replaceActionShort: "Reemplazar",
18+
replaceAction: "Reemplazar este Suceso",
19+
replaceAllActionShort: "Reemplazar Todos",
20+
replaceAllAction: "Reemplazar Todos los Sucesos"
21+
};
22+
let goToLineTranslations = {
23+
closeDialog: "Cerrar el Diálogo y Regresar al Editor",
24+
input: "Línea:Columno o Línea luego Retorno",
25+
guidanceFormat: "Formato incorrecto. Ingresa un número de línea (por ej. 1) o un número de línea luego dos puntos luego un número de columno (por ej. 1:3).",
26+
guidanceLineRange: (current, max) => `Número de línea (actualmente ${current}) debería ser entre 1 y ${max}.`,
27+
guidanceColumnRange: (line, current, max) => `En la línea número ${line}, número de columno (actualmente ${current}) debería ser entre 1 y ${max}.`,
28+
guidanceValidLine: (line) => `Tecla Retorno para ir a línea número ${line}.`,
29+
guidanceValidColumn: (line, column) => `Tecla Retorno para ir a línea número ${line}, columno número ${column}.`,
30+
};
31+
let indentTranslations = {
32+
tabForIndentation: "Tabulador y Mayús-Tabulador actualmente para la indentación. Tecla Escape para activar la navegación por el teclado.",
33+
tabForNavigation: "Tabulador y Mayús-Tabulador actualmente para la navegación por el teclado. Tecla para activar la indentación.",
34+
};
35+
36+
rtl = `# ערך מומלץ ערך מומלץ
37+
38+
**לוטרת** הים היא יונק ימי קטן יחסית, חבר במשפחת הסמורים, שחי לחופיו הצפוניים והמזרחיים של האוקיינוס השקט.
39+
40+
ההגנה מפני קור אצל לוטרת הים מבוססת על שכבה עבה של פרווה, שהיא מהצפופות בעולם החי,
41+
וזאת בשונה ממרבית היונקים הימיים הנסמכים על שכבת שומן. CC-BY-SA he.wikipedia.org אף שהיא מסוגלת להלך על היבשה, מבלה לוטרת הים את מרבית זמנה באוקיינוס הפתוח.
42+
43+
# مقالة اليوم المختارة
44+
45+
**الواقعية في الأدب الإسبا**ني هي حركة أدبية شكلت جزءًا من الواقعية، وهو تيار ثقافي ظهر في أوروبا في منتصف القرن التاسع عشر عقب اضمحلال اتجاهات الرومانسية.
46+
47+
ظهر سابقًا في فرنسا سنة 1850 حيث تطورت أصوله التي كانت موجودة بالفعل في الرومانسية، وخصوصًا في الأدب الذي يتناول العادات والتقاليد. CC-BY-SA ar.wikipedia.org التي كانت تعج بكل ما هو خيالي وجمالي خلاب، وعمدوا إلى الملاحظة الموضوعية للأشخاص والمجتمع والأحداث المعاصرة في محاولة منهم إلى تقديم صورة واضحة للمجتمع آنذاك.`;
48+
ltr = `# From today's featured article
49+
50+
CC-BY-SA en.wikipedia.org: History is the systematic study of the past with its main focus on the human past.
51+
52+
Historians analyse and interpret primary and secondary sources to construct narratives about what happened and explain why it happened. RTL: مقالة اليوم المختارة They engage in source criticism to assess the authenticity, content, and reliability of these sources.
53+
54+
# निर्वाचित लेख
55+
56+
CC-BY-SA hi.wikipedia.org: **ग्लेशियर नेशनल पार्क** अमेरिकी राष्ट्रीय उद्यान है, जो कि कनाडा-संयुक्त राज्य अमेरिका की सीमा पर स्थित है। उद्यान संयुक्त राज्य के उत्तर-पश्चिमी मोंटाना राज्य
57+
58+
में स्थित है और कनाडा की ओर अल्बर्टा और ब्रिटिश कोलम्बिया प्रांतों से सटा हुआ है। उद्यान दस लाख एकड़ RTL: ערך מומלץ ערך מומלץ (4,000 किमी2) से अधिक क्षेत्र में फैला हुआ है और इसमें दो पर्वत श्रृंखला (रॉकी पर्वत की उप-श्रेणियाँ), 130 से अधिक नामित झीलें...`;
59+
const elems = document.querySelectorAll("body > code-input, body > textarea");
60+
for(let i = 0; i < elems.length; i++) {
61+
let dir = elems[i].getAttribute("dir");
62+
if(dir == "rtl") elems[i].value = rtl;
63+
else elems[i].value = ltr;
64+
}

tests/i18n-hljs.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>code-input should be global: highlight.js</title>
5+
6+
<meta charset="utf-8"/>
7+
8+
<!--Import Highlight.JS-->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
15+
16+
17+
<!--Import code-input-->
18+
<link rel="stylesheet" href="../code-input.css">
19+
<script src="../code-input.js"></script>
20+
21+
<!--Import code-input plugins-->
22+
<script src="../plugins/auto-close-brackets.js"></script>
23+
<script src="../plugins/autocomplete.js"></script>
24+
<script src="../plugins/autodetect.js"></script>
25+
<link rel="stylesheet" href="../plugins/autocomplete.css">
26+
<script src="../plugins/find-and-replace.js"></script>
27+
<link rel="stylesheet" href="../plugins/find-and-replace.css">
28+
<script src="../plugins/go-to-line.js"></script>
29+
<link rel="stylesheet" href="../plugins/go-to-line.css">
30+
<script src="../plugins/indent.js"></script>
31+
<link rel="stylesheet" href="../plugins/prism-line-numbers.css">
32+
<script src="../plugins/select-token-callbacks.js"></script>
33+
<script src="../plugins/special-chars.js"></script>
34+
<link rel="stylesheet" href="../plugins/special-chars.css">
35+
36+
<!--Register templates-->
37+
38+
</head>
39+
<body>
40+
<style>
41+
* {
42+
box-sizing: border-box;
43+
}
44+
</style>
45+
<code-input dir="rtl" template="hljs" language="markdown"><textarea data-code-input-fallback placeholder="hljs rtl"></textarea></code-input>
46+
<code-input dir="ltr" template="hljs" language="markdown"><textarea data-code-input-fallback placeholder="hljs ltr"></textarea></code-input>
47+
<code-input dir="rtl" template="hljs+" language="markdown"><textarea data-code-input-fallback placeholder="hljs rtl"></textarea></code-input>
48+
<code-input dir="ltr" template="hljs+" language="markdown"><textarea data-code-input-fallback placeholder="hljs ltr"></textarea></code-input>
49+
50+
<script src="i18n-common.js"></script>
51+
<script>
52+
codeInput.registerTemplate("hljs", new codeInput.templates.Hljs(hljs, []));
53+
codeInput.registerTemplate("hljs+", new codeInput.templates.Hljs(hljs, [
54+
new codeInput.plugins.AutoCloseBrackets(),
55+
new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
56+
if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
57+
// Show popup
58+
popupElem.style.display = "block";
59+
popupElem.innerHTML = "Here's your popup!";
60+
} else {
61+
popupElem.style.display = "none";
62+
}
63+
}),
64+
new codeInput.plugins.Autodetect(),
65+
new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
66+
new codeInput.plugins.GoToLine(true, goToLineTranslations),
67+
new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
68+
new codeInput.plugins.SelectTokenCallbacks(codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks.createClassSynchronisation("in-selection"), false, true, true, true, true, false),
69+
//new codeInput.plugins.SpecialChars(true),
70+
]));
71+
</script>
72+
</body>
73+
</html>

tests/i18n-prism.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>code-input should be global: Prism.js</title>
5+
6+
<meta charset="utf-8"/>
7+
8+
<!--Import Prism-->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" data-manual></script><!--Remove data-manual if also using Prism normally-->
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css">
14+
<script src="prism-match-braces-compatibility.js"></script>
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css">
16+
17+
<!--Import code-input-->
18+
<link rel="stylesheet" href="../code-input.css">
19+
<script src="../code-input.js"></script>
20+
21+
<!--Import code-input plugins-->
22+
<script src="../plugins/auto-close-brackets.js"></script>
23+
<script src="../plugins/autocomplete.js"></script>
24+
<script src="../plugins/autodetect.js"></script>
25+
<link rel="stylesheet" href="../plugins/autocomplete.css">
26+
<script src="../plugins/find-and-replace.js"></script>
27+
<link rel="stylesheet" href="../plugins/find-and-replace.css">
28+
<script src="../plugins/go-to-line.js"></script>
29+
<link rel="stylesheet" href="../plugins/go-to-line.css">
30+
<script src="../plugins/indent.js"></script>
31+
<link rel="stylesheet" href="../plugins/prism-line-numbers.css">
32+
<script src="../plugins/select-token-callbacks.js"></script>
33+
<script src="../plugins/special-chars.js"></script>
34+
<link rel="stylesheet" href="../plugins/special-chars.css">
35+
36+
<!--Register templates-->
37+
38+
</head>
39+
<body>
40+
<style>
41+
* {
42+
box-sizing: border-box;
43+
}
44+
</style>
45+
<code-input dir="rtl" template="prism" language="markdown"><textarea data-code-input-fallback placeholder="prism rtl"></textarea></code-input>
46+
<code-input dir="ltr" template="prism" language="markdown"><textarea data-code-input-fallback placeholder="prism ltr"></textarea></code-input>
47+
<code-input dir="rtl" template="prism+" language="markdown"><textarea data-code-input-fallback placeholder="prism rtl"></textarea></code-input>
48+
<code-input dir="ltr" template="prism+" language="markdown"><textarea data-code-input-fallback placeholder="prism ltr"></textarea></code-input>
49+
50+
<script src="i18n-common.js"></script>
51+
<script>
52+
codeInput.registerTemplate("prism", new codeInput.templates.Prism(Prism, []));
53+
codeInput.registerTemplate("prism+", new codeInput.templates.Prism(Prism, [
54+
new codeInput.plugins.AutoCloseBrackets(),
55+
new codeInput.plugins.Autocomplete(function(popupElem, textarea, selectionEnd) {
56+
if(textarea.value.substring(selectionEnd-5, selectionEnd) == "popup") {
57+
// Show popup
58+
popupElem.style.display = "block";
59+
popupElem.innerHTML = "Here's your popup!";
60+
} else {
61+
popupElem.style.display = "none";
62+
}
63+
}),
64+
new codeInput.plugins.FindAndReplace(true, true, findAndReplaceTranslations),
65+
new codeInput.plugins.GoToLine(true, goToLineTranslations),
66+
new codeInput.plugins.Indent(true, 2, {"(": ")", "[": "]", "{": "}"}, true, indentTranslations),
67+
new codeInput.plugins.SelectTokenCallbacks(new codeInput.plugins.SelectTokenCallbacks.TokenSelectorCallbacks(selectBrace, deselectAllBraces), true),
68+
//new codeInput.plugins.SpecialChars(true),
69+
]));
70+
</script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)