Skip to content

Commit

Permalink
Deploying to gh-pages from @ 93d42d9 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@coatless
coatless committed Jun 18, 2024
1 parent 69af2d9 commit 19fadac
Show file tree
Hide file tree
Showing 67 changed files with 3,971 additions and 212 deletions.
69 changes: 67 additions & 2 deletions demos/qwebr-auto-run.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,15 @@
color: #696969;
}

/* Style the code highlight lines */
body.quarto-light .qwebr-editor-highlight-line {
background-color: lightblue;
}

body.quarto-dark .qwebr-editor-highlight-line {
background-color: darkblue;
}

/* Style the modal pop-up */

/* The Modal (background) */
Expand Down Expand Up @@ -392,7 +401,7 @@
};

// Store cell data
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}];
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() "}];

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

function isValidCodeLineNumbers(stringCodeLineNumbers) {
// Regular expression to match valid input strings
const regex = /^(\d+(-\d+)?)(,\d+(-\d+)?)*$/;
return regex.test(stringCodeLineNumbers);
}

// Function that builds and registers a Monaco Editor instance
globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {

Expand Down Expand Up @@ -1956,7 +1971,7 @@ <h2 id="toc-title">On this page</h2>
const model = editor.getModel();
// Set EOL for the model
model.setEOL(monaco.editor.EndOfLineSequence.LF);

// Dynamically modify the height of the editor window if new lines are added.
let ignoreEvent = false;
const updateHeight = () => {
Expand All @@ -1982,6 +1997,56 @@ <h2 id="toc-title">On this page</h2>
}
};

// Function to generate decorations to highlight lines
// in the editor based on input string.
function decoratorHighlightLines(codeLineNumbers) {
// Store the lines to be lighlight
let linesToHighlight = [];

// Parse the codeLineNumbers string to get the line numbers to highlight
// First, split the string by commas
codeLineNumbers.split(',').forEach(part => {
// Check if we have a range of lines
if (part.includes('-')) {
// Handle range of lines (e.g., "6-8")
const [start, end] = part.split('-').map(Number);
for (let i = start; i <= end; i++) {
linesToHighlight.push(i);
}
} else {
// Handle single line (e.g., "7")
linesToHighlight.push(Number(part));
}
});

// Create monaco decorations for the lines to highlight
const decorations = linesToHighlight.map(lineNumber => ({
range: new monaco.Range(lineNumber, 1, lineNumber, 1),
options: {
isWholeLine: true,
className: 'qwebr-editor-highlight-line'
}
}));

// Return decorations to be applied to the editor
return decorations;
}

// Ensure that the editor-code-line-numbers option is set and valid
// then apply styling
if (qwebrOptions['editor-code-line-numbers']) {
// Remove all whitespace from the string
const codeLineNumbers = qwebrOptions['editor-code-line-numbers'].replace(/\s/g,'');
// Check if the string is valid for line numbers, e.g., "1,3-5,7"
if (isValidCodeLineNumbers(codeLineNumbers)) {
// Apply the decorations to the editor
editor.createDecorationsCollection(decoratorHighlightLines(codeLineNumbers));
} else {
// Warn the user that the input is invalid
console.warn(`Invalid "editor-code-line-numbers" value in code cell ${qwebrOptions['label']}: ${codeLineNumbers}`);
}
}

// Helper function to check if selected text is empty
function isEmptyCodeText(selectedCodeText) {
return (selectedCodeText === null || selectedCodeText === undefined || selectedCodeText === "");
Expand Down
69 changes: 67 additions & 2 deletions demos/qwebr-code-cell-options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,15 @@
color: #696969;
}

/* Style the code highlight lines */
body.quarto-light .qwebr-editor-highlight-line {
background-color: lightblue;
}

body.quarto-dark .qwebr-editor-highlight-line {
background-color: darkblue;
}

/* Style the modal pop-up */

/* The Modal (background) */
Expand Down Expand Up @@ -392,7 +401,7 @@
};

// Store cell data
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}];
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}];

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

function isValidCodeLineNumbers(stringCodeLineNumbers) {
// Regular expression to match valid input strings
const regex = /^(\d+(-\d+)?)(,\d+(-\d+)?)*$/;
return regex.test(stringCodeLineNumbers);
}

// Function that builds and registers a Monaco Editor instance
globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {

Expand Down Expand Up @@ -1958,7 +1973,7 @@ <h2 id="toc-title">On this page</h2>
const model = editor.getModel();
// Set EOL for the model
model.setEOL(monaco.editor.EndOfLineSequence.LF);

// Dynamically modify the height of the editor window if new lines are added.
let ignoreEvent = false;
const updateHeight = () => {
Expand All @@ -1984,6 +1999,56 @@ <h2 id="toc-title">On this page</h2>
}
};

// Function to generate decorations to highlight lines
// in the editor based on input string.
function decoratorHighlightLines(codeLineNumbers) {
// Store the lines to be lighlight
let linesToHighlight = [];

// Parse the codeLineNumbers string to get the line numbers to highlight
// First, split the string by commas
codeLineNumbers.split(',').forEach(part => {
// Check if we have a range of lines
if (part.includes('-')) {
// Handle range of lines (e.g., "6-8")
const [start, end] = part.split('-').map(Number);
for (let i = start; i <= end; i++) {
linesToHighlight.push(i);
}
} else {
// Handle single line (e.g., "7")
linesToHighlight.push(Number(part));
}
});

// Create monaco decorations for the lines to highlight
const decorations = linesToHighlight.map(lineNumber => ({
range: new monaco.Range(lineNumber, 1, lineNumber, 1),
options: {
isWholeLine: true,
className: 'qwebr-editor-highlight-line'
}
}));

// Return decorations to be applied to the editor
return decorations;
}

// Ensure that the editor-code-line-numbers option is set and valid
// then apply styling
if (qwebrOptions['editor-code-line-numbers']) {
// Remove all whitespace from the string
const codeLineNumbers = qwebrOptions['editor-code-line-numbers'].replace(/\s/g,'');
// Check if the string is valid for line numbers, e.g., "1,3-5,7"
if (isValidCodeLineNumbers(codeLineNumbers)) {
// Apply the decorations to the editor
editor.createDecorationsCollection(decoratorHighlightLines(codeLineNumbers));
} else {
// Warn the user that the input is invalid
console.warn(`Invalid "editor-code-line-numbers" value in code cell ${qwebrOptions['label']}: ${codeLineNumbers}`);
}
}

// Helper function to check if selected text is empty
function isEmptyCodeText(selectedCodeText) {
return (selectedCodeText === null || selectedCodeText === undefined || selectedCodeText === "");
Expand Down
Loading

0 comments on commit 19fadac

Please sign in to comment.