Skip to content

Commit 19fadac

Browse files
coatlesscoatless
committed
Deploying to gh-pages from @ 93d42d9 🚀
1 parent 69af2d9 commit 19fadac

File tree

67 files changed

+3971
-212
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+3971
-212
lines changed

‎demos/qwebr-auto-run.html

+67-2
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,15 @@
233233
color: #696969;
234234
}
235235

236+
/* Style the code highlight lines */
237+
body.quarto-light .qwebr-editor-highlight-line {
238+
background-color: lightblue;
239+
}
240+
241+
body.quarto-dark .qwebr-editor-highlight-line {
242+
background-color: darkblue;
243+
}
244+
236245
/* Style the modal pop-up */
237246

238247
/* The Modal (background) */
@@ -392,7 +401,7 @@
392401
};
393402

394403
// Store cell data
395-
globalThis.qwebrCellDetails = [{"options":{"results":"markup","fig-cap":"","context":"interactive","editor-word-wrap":"true","message":"true","output":"true","comment":"","fig-height":5,"out-width":"700px","out-height":"","label":"unnamed-chunk-1","autorun":"false","editor-quick-suggestions":"false","editor-max-height":"","read-only":"false","dpi":72,"fig-width":7,"classes":"","warning":"true","editor-font-scale":"1"},"code":"# Write your name here by replace ___\nname <- \"_____\"\nprint(paste0(\"Hello, \", name, \"!\"))","id":1},{"options":{"results":"markup","fig-cap":"","context":"interactive","editor-word-wrap":"true","message":"true","output":"true","comment":"","fig-height":5,"out-width":"700px","out-height":"","label":"unnamed-chunk-2","autorun":"true","editor-quick-suggestions":"false","editor-max-height":"","read-only":"false","dpi":72,"fig-width":7,"classes":"","warning":"true","editor-font-scale":"1"},"code":"# Write your name here by replace ___\nname <- \"_____\"\nprint(paste0(\"Hello, \", name, \"!\"))","id":2},{"options":{"results":"markup","fig-cap":"","context":"output","editor-word-wrap":"true","message":"true","output":"true","comment":"","fig-height":5,"out-width":"700px","out-height":"","label":"unnamed-chunk-3","autorun":"true","editor-quick-suggestions":"false","editor-max-height":"","read-only":"false","dpi":72,"fig-width":7,"classes":"","warning":"true","editor-font-scale":"1"},"code":"data(\"gapminder\", package = \"gapminder\")\nhead(gapminder)","id":3},{"options":{"results":"markup","fig-cap":"","context":"output","editor-word-wrap":"true","message":"true","output":"true","comment":"","fig-height":"3","out-width":"500px","out-height":"","label":"unnamed-chunk-4","autorun":"true","editor-quick-suggestions":"false","editor-max-height":"","read-only":"false","dpi":72,"fig-width":"5","classes":"","warning":"true","editor-font-scale":"1"},"code":"ggplot(gapminder, aes(lifeExp)) + \n geom_density(aes(fill=continent), alpha=1/4) + theme_bw() ","id":4},{"options":{"results":"markup","fig-cap":"","context":"interactive","editor-word-wrap":"true","message":"true","output":"true","comment":"","fig-height":"3","out-width":"500px","out-height":"","label":"unnamed-chunk-5","autorun":"true","editor-quick-suggestions":"false","editor-max-height":"","read-only":"false","dpi":72,"fig-width":"5","classes":"","warning":"true","editor-font-scale":"1"},"code":"ggplot(gapminder, aes(lifeExp)) + \n theme_bw() ","id":5}];
404+
globalThis.qwebrCellDetails = [{"id":1,"options":{"dpi":72,"fig-cap":"","out-height":"","out-width":"700px","label":"unnamed-chunk-1","editor-font-scale":"1","results":"markup","editor-word-wrap":"true","output":"true","read-only":"false","fig-width":7,"fig-height":5,"comment":"","classes":"","editor-quick-suggestions":"false","message":"true","context":"interactive","editor-max-height":"","autorun":"false","warning":"true"},"code":"# Write your name here by replace ___\nname <- \"_____\"\nprint(paste0(\"Hello, \", name, \"!\"))"},{"id":2,"options":{"dpi":72,"fig-cap":"","out-height":"","out-width":"700px","label":"unnamed-chunk-2","editor-font-scale":"1","results":"markup","editor-word-wrap":"true","output":"true","read-only":"false","fig-width":7,"fig-height":5,"comment":"","classes":"","editor-quick-suggestions":"false","message":"true","context":"interactive","editor-max-height":"","autorun":"true","warning":"true"},"code":"# Write your name here by replace ___\nname <- \"_____\"\nprint(paste0(\"Hello, \", name, \"!\"))"},{"id":3,"options":{"dpi":72,"fig-cap":"","out-height":"","out-width":"700px","label":"unnamed-chunk-3","editor-font-scale":"1","results":"markup","editor-word-wrap":"true","output":"true","read-only":"false","fig-width":7,"fig-height":5,"comment":"","classes":"","editor-quick-suggestions":"false","message":"true","context":"output","editor-max-height":"","autorun":"true","warning":"true"},"code":"data(\"gapminder\", package = \"gapminder\")\nhead(gapminder)"},{"id":4,"options":{"dpi":72,"fig-cap":"","out-height":"","out-width":"500px","label":"unnamed-chunk-4","editor-font-scale":"1","results":"markup","editor-word-wrap":"true","output":"true","read-only":"false","fig-width":"5","fig-height":"3","comment":"","classes":"","editor-quick-suggestions":"false","message":"true","context":"output","editor-max-height":"","autorun":"true","warning":"true"},"code":"ggplot(gapminder, aes(lifeExp)) + \n geom_density(aes(fill=continent), alpha=1/4) + theme_bw() "},{"id":5,"options":{"dpi":72,"fig-cap":"","out-height":"","out-width":"500px","label":"unnamed-chunk-5","editor-font-scale":"1","results":"markup","editor-word-wrap":"true","output":"true","read-only":"false","fig-width":"5","fig-height":"3","comment":"","classes":"","editor-quick-suggestions":"false","message":"true","context":"interactive","editor-max-height":"","autorun":"true","warning":"true"},"code":"ggplot(gapminder, aes(lifeExp)) + \n theme_bw() "}];
396405

397406
</script>
398407
<script type="module">
@@ -1903,6 +1912,12 @@ <h2 id="toc-title">On this page</h2>
19031912
// Global array to store Monaco Editor instances
19041913
globalThis.qwebrEditorInstances = [];
19051914

1915+
function isValidCodeLineNumbers(stringCodeLineNumbers) {
1916+
// Regular expression to match valid input strings
1917+
const regex = /^(\d+(-\d+)?)(,\d+(-\d+)?)*$/;
1918+
return regex.test(stringCodeLineNumbers);
1919+
}
1920+
19061921
// Function that builds and registers a Monaco Editor instance
19071922
globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {
19081923

@@ -1956,7 +1971,7 @@ <h2 id="toc-title">On this page</h2>
19561971
const model = editor.getModel();
19571972
// Set EOL for the model
19581973
model.setEOL(monaco.editor.EndOfLineSequence.LF);
1959-
1974+
19601975
// Dynamically modify the height of the editor window if new lines are added.
19611976
let ignoreEvent = false;
19621977
const updateHeight = () => {
@@ -1982,6 +1997,56 @@ <h2 id="toc-title">On this page</h2>
19821997
}
19831998
};
19841999

2000+
// Function to generate decorations to highlight lines
2001+
// in the editor based on input string.
2002+
function decoratorHighlightLines(codeLineNumbers) {
2003+
// Store the lines to be lighlight
2004+
let linesToHighlight = [];
2005+
2006+
// Parse the codeLineNumbers string to get the line numbers to highlight
2007+
// First, split the string by commas
2008+
codeLineNumbers.split(',').forEach(part => {
2009+
// Check if we have a range of lines
2010+
if (part.includes('-')) {
2011+
// Handle range of lines (e.g., "6-8")
2012+
const [start, end] = part.split('-').map(Number);
2013+
for (let i = start; i <= end; i++) {
2014+
linesToHighlight.push(i);
2015+
}
2016+
} else {
2017+
// Handle single line (e.g., "7")
2018+
linesToHighlight.push(Number(part));
2019+
}
2020+
});
2021+
2022+
// Create monaco decorations for the lines to highlight
2023+
const decorations = linesToHighlight.map(lineNumber => ({
2024+
range: new monaco.Range(lineNumber, 1, lineNumber, 1),
2025+
options: {
2026+
isWholeLine: true,
2027+
className: 'qwebr-editor-highlight-line'
2028+
}
2029+
}));
2030+
2031+
// Return decorations to be applied to the editor
2032+
return decorations;
2033+
}
2034+
2035+
// Ensure that the editor-code-line-numbers option is set and valid
2036+
// then apply styling
2037+
if (qwebrOptions['editor-code-line-numbers']) {
2038+
// Remove all whitespace from the string
2039+
const codeLineNumbers = qwebrOptions['editor-code-line-numbers'].replace(/\s/g,'');
2040+
// Check if the string is valid for line numbers, e.g., "1,3-5,7"
2041+
if (isValidCodeLineNumbers(codeLineNumbers)) {
2042+
// Apply the decorations to the editor
2043+
editor.createDecorationsCollection(decoratorHighlightLines(codeLineNumbers));
2044+
} else {
2045+
// Warn the user that the input is invalid
2046+
console.warn(`Invalid "editor-code-line-numbers" value in code cell ${qwebrOptions['label']}: ${codeLineNumbers}`);
2047+
}
2048+
}
2049+
19852050
// Helper function to check if selected text is empty
19862051
function isEmptyCodeText(selectedCodeText) {
19872052
return (selectedCodeText === null || selectedCodeText === undefined || selectedCodeText === "");

‎demos/qwebr-code-cell-options.html

+67-2
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,15 @@
233233
color: #696969;
234234
}
235235

236+
/* Style the code highlight lines */
237+
body.quarto-light .qwebr-editor-highlight-line {
238+
background-color: lightblue;
239+
}
240+
241+
body.quarto-dark .qwebr-editor-highlight-line {
242+
background-color: darkblue;
243+
}
244+
236245
/* Style the modal pop-up */
237246

238247
/* The Modal (background) */
@@ -392,7 +401,7 @@
392401
};
393402

394403
// Store cell data
395-
globalThis.qwebrCellDetails = [{"options":{"output":"true","editor-quick-suggestions":"false","out-height":"","fig-width":7,"autorun":"false","comment":"","editor-word-wrap":"true","read-only":"false","fig-height":5,"context":"interactive","editor-font-scale":"1","message":"true","classes":"","fig-cap":"","editor-max-height":"","warning":"true","label":"unnamed-chunk-1","out-width":"700px","results":"markup","dpi":72},"code":"# Write your name here by replace ___\nname <- \"_____\"\nprint(paste0(\"Hello, \", name, \"!\"))","id":1},{"options":{"output":"true","editor-quick-suggestions":"false","out-height":"","fig-width":7,"autorun":"true","comment":"","editor-word-wrap":"true","read-only":"false","fig-height":5,"context":"setup","editor-font-scale":"1","message":"true","classes":"","fig-cap":"","editor-max-height":"","warning":"true","label":"unnamed-chunk-2","out-width":"700px","results":"markup","dpi":72},"code":" \n# Generating a simple table\ndata <- data.frame(\n Name = c(\"Alice\", \"Bob\", \"Charlie\"),\n Age = c(25, 30, 22)\n)","id":2},{"options":{"output":"true","editor-quick-suggestions":"false","out-height":"","fig-width":7,"autorun":"false","comment":"","editor-word-wrap":"true","read-only":"false","fig-height":5,"context":"interactive","editor-font-scale":"1","message":"true","classes":"","fig-cap":"","editor-max-height":"","warning":"true","label":"unnamed-chunk-3","out-width":"700px","results":"asis","dpi":72},"code":"knitr::kable(data, \"html\")","id":3},{"options":{"output":"true","editor-quick-suggestions":"false","out-height":"","fig-width":7,"autorun":"false","comment":"","editor-word-wrap":"true","read-only":"false","fig-height":5,"context":"interactive","editor-font-scale":"1","message":"true","classes":"","fig-cap":"","editor-max-height":"","warning":"true","label":"unnamed-chunk-4","out-width":"700px","results":"markup","dpi":72},"code":"knitr::kable(data, \"html\")","id":4},{"options":{"output":"true","editor-quick-suggestions":"false","out-height":"","fig-width":"6","autorun":"true","comment":"","editor-word-wrap":"true","read-only":"false","fig-height":"6","context":"output","editor-font-scale":"1","message":"true","classes":"","fig-cap":"","editor-max-height":"","warning":"true","label":"unnamed-chunk-5","out-width":"700px","results":"markup","dpi":72},"code":"\ntinyplot::tinyplot(\n ~ Petal.Length | Species,\n data = iris,\n type = \"density\",\n palette = \"dark\", fill = \"by\",\n grid = TRUE,\n main = \"Distribution of petal lengths by species\"\n)","id":5},{"options":{"output":"true","editor-quick-suggestions":"false","out-height":"","fig-width":7,"autorun":"true","comment":"","editor-word-wrap":"true","read-only":"false","fig-height":5,"context":"output","editor-font-scale":"1","message":"true","classes":"","fig-cap":"","editor-max-height":"","warning":"true","label":"unnamed-chunk-6","out-width":"700px","results":"markup","dpi":72},"code":"\ntinyplot::tinyplot(\n ~ Petal.Length | Species,\n data = iris,\n type = \"density\",\n palette = \"dark\", fill = \"by\",\n grid = TRUE,\n main = \"Distribution of petal lengths by species\"\n)","id":6},{"options":{"output":"true","editor-quick-suggestions":"false","out-height":"500px","fig-width":"6","autorun":"true","comment":"","editor-word-wrap":"true","read-only":"false","fig-height":"6","context":"output","editor-font-scale":"1","message":"true","classes":"","fig-cap":"","editor-max-height":"","warning":"true","label":"unnamed-chunk-7","out-width":"500px","results":"markup","dpi":72},"code":"tinyplot::tinyplot(\n ~ Petal.Length | Species,\n data = iris,\n type = \"density\",\n palette = \"dark\", fill = \"by\",\n grid = TRUE,\n main = \"Distribution of petal lengths by species\"\n)","id":7}];
404+
globalThis.qwebrCellDetails = [{"options":{"fig-cap":"","editor-word-wrap":"true","out-width":"700px","comment":"","dpi":72,"fig-width":7,"results":"markup","warning":"true","label":"unnamed-chunk-1","editor-quick-suggestions":"false","context":"interactive","editor-max-height":"","read-only":"false","message":"true","output":"true","autorun":"false","classes":"","editor-font-scale":"1","fig-height":5,"out-height":""},"code":"# Write your name here by replace ___\nname <- \"_____\"\nprint(paste0(\"Hello, \", name, \"!\"))","id":1},{"options":{"fig-cap":"","editor-word-wrap":"true","out-width":"700px","comment":"","dpi":72,"fig-width":7,"results":"markup","warning":"true","label":"unnamed-chunk-2","editor-quick-suggestions":"false","context":"setup","editor-max-height":"","read-only":"false","message":"true","output":"true","autorun":"true","classes":"","editor-font-scale":"1","fig-height":5,"out-height":""},"code":" \n# Generating a simple table\ndata <- data.frame(\n Name = c(\"Alice\", \"Bob\", \"Charlie\"),\n Age = c(25, 30, 22)\n)","id":2},{"options":{"fig-cap":"","editor-word-wrap":"true","out-width":"700px","comment":"","dpi":72,"fig-width":7,"results":"asis","warning":"true","label":"unnamed-chunk-3","editor-quick-suggestions":"false","context":"interactive","editor-max-height":"","read-only":"false","message":"true","output":"true","autorun":"false","classes":"","editor-font-scale":"1","fig-height":5,"out-height":""},"code":"knitr::kable(data, \"html\")","id":3},{"options":{"fig-cap":"","editor-word-wrap":"true","out-width":"700px","comment":"","dpi":72,"fig-width":7,"results":"markup","warning":"true","label":"unnamed-chunk-4","editor-quick-suggestions":"false","context":"interactive","editor-max-height":"","read-only":"false","message":"true","output":"true","autorun":"false","classes":"","editor-font-scale":"1","fig-height":5,"out-height":""},"code":"knitr::kable(data, \"html\")","id":4},{"options":{"fig-cap":"","editor-word-wrap":"true","out-width":"700px","comment":"","dpi":72,"fig-width":"6","results":"markup","warning":"true","label":"unnamed-chunk-5","editor-quick-suggestions":"false","context":"output","editor-max-height":"","read-only":"false","message":"true","output":"true","autorun":"true","classes":"","editor-font-scale":"1","fig-height":"6","out-height":""},"code":"\ntinyplot::tinyplot(\n ~ Petal.Length | Species,\n data = iris,\n type = \"density\",\n palette = \"dark\", fill = \"by\",\n grid = TRUE,\n main = \"Distribution of petal lengths by species\"\n)","id":5},{"options":{"fig-cap":"","editor-word-wrap":"true","out-width":"700px","comment":"","dpi":72,"fig-width":7,"results":"markup","warning":"true","label":"unnamed-chunk-6","editor-quick-suggestions":"false","context":"output","editor-max-height":"","read-only":"false","message":"true","output":"true","autorun":"true","classes":"","editor-font-scale":"1","fig-height":5,"out-height":""},"code":"\ntinyplot::tinyplot(\n ~ Petal.Length | Species,\n data = iris,\n type = \"density\",\n palette = \"dark\", fill = \"by\",\n grid = TRUE,\n main = \"Distribution of petal lengths by species\"\n)","id":6},{"options":{"fig-cap":"","editor-word-wrap":"true","out-width":"500px","comment":"","dpi":72,"fig-width":"6","results":"markup","warning":"true","label":"unnamed-chunk-7","editor-quick-suggestions":"false","context":"output","editor-max-height":"","read-only":"false","message":"true","output":"true","autorun":"true","classes":"","editor-font-scale":"1","fig-height":"6","out-height":"500px"},"code":"tinyplot::tinyplot(\n ~ Petal.Length | Species,\n data = iris,\n type = \"density\",\n palette = \"dark\", fill = \"by\",\n grid = TRUE,\n main = \"Distribution of petal lengths by species\"\n)","id":7}];
396405

397406
</script>
398407
<script type="module">
@@ -1905,6 +1914,12 @@ <h2 id="toc-title">On this page</h2>
19051914
// Global array to store Monaco Editor instances
19061915
globalThis.qwebrEditorInstances = [];
19071916

1917+
function isValidCodeLineNumbers(stringCodeLineNumbers) {
1918+
// Regular expression to match valid input strings
1919+
const regex = /^(\d+(-\d+)?)(,\d+(-\d+)?)*$/;
1920+
return regex.test(stringCodeLineNumbers);
1921+
}
1922+
19081923
// Function that builds and registers a Monaco Editor instance
19091924
globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {
19101925

@@ -1958,7 +1973,7 @@ <h2 id="toc-title">On this page</h2>
19581973
const model = editor.getModel();
19591974
// Set EOL for the model
19601975
model.setEOL(monaco.editor.EndOfLineSequence.LF);
1961-
1976+
19621977
// Dynamically modify the height of the editor window if new lines are added.
19631978
let ignoreEvent = false;
19641979
const updateHeight = () => {
@@ -1984,6 +1999,56 @@ <h2 id="toc-title">On this page</h2>
19841999
}
19852000
};
19862001

2002+
// Function to generate decorations to highlight lines
2003+
// in the editor based on input string.
2004+
function decoratorHighlightLines(codeLineNumbers) {
2005+
// Store the lines to be lighlight
2006+
let linesToHighlight = [];
2007+
2008+
// Parse the codeLineNumbers string to get the line numbers to highlight
2009+
// First, split the string by commas
2010+
codeLineNumbers.split(',').forEach(part => {
2011+
// Check if we have a range of lines
2012+
if (part.includes('-')) {
2013+
// Handle range of lines (e.g., "6-8")
2014+
const [start, end] = part.split('-').map(Number);
2015+
for (let i = start; i <= end; i++) {
2016+
linesToHighlight.push(i);
2017+
}
2018+
} else {
2019+
// Handle single line (e.g., "7")
2020+
linesToHighlight.push(Number(part));
2021+
}
2022+
});
2023+
2024+
// Create monaco decorations for the lines to highlight
2025+
const decorations = linesToHighlight.map(lineNumber => ({
2026+
range: new monaco.Range(lineNumber, 1, lineNumber, 1),
2027+
options: {
2028+
isWholeLine: true,
2029+
className: 'qwebr-editor-highlight-line'
2030+
}
2031+
}));
2032+
2033+
// Return decorations to be applied to the editor
2034+
return decorations;
2035+
}
2036+
2037+
// Ensure that the editor-code-line-numbers option is set and valid
2038+
// then apply styling
2039+
if (qwebrOptions['editor-code-line-numbers']) {
2040+
// Remove all whitespace from the string
2041+
const codeLineNumbers = qwebrOptions['editor-code-line-numbers'].replace(/\s/g,'');
2042+
// Check if the string is valid for line numbers, e.g., "1,3-5,7"
2043+
if (isValidCodeLineNumbers(codeLineNumbers)) {
2044+
// Apply the decorations to the editor
2045+
editor.createDecorationsCollection(decoratorHighlightLines(codeLineNumbers));
2046+
} else {
2047+
// Warn the user that the input is invalid
2048+
console.warn(`Invalid "editor-code-line-numbers" value in code cell ${qwebrOptions['label']}: ${codeLineNumbers}`);
2049+
}
2050+
}
2051+
19872052
// Helper function to check if selected text is empty
19882053
function isEmptyCodeText(selectedCodeText) {
19892054
return (selectedCodeText === null || selectedCodeText === undefined || selectedCodeText === "");

0 commit comments

Comments
 (0)