sam/Quill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

323: Updated js and html templates for consistency and ease of use

Browse Source
This commit is contained in:
metacryst
2023-09-11 15:29:44 -05:00
parent 8076a87f64
commit e1ce1ce4cc
9 changed files with 92 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -8,11 +8,11 @@
Usage: Install the VSCode extension "Quill". Usage: Install the VSCode extension "Quill".
## Boilerplate: ## Boilerplate:
- ```*page```: Type in an HTML file and select the suggestion to create HTML boilerplate. - ```*html```: Type in an HTML file and select the suggestion to create HTML boilerplate.
- ```*element```: Type in a JS file and select the suggestion to create JS Custom Element boilerplate. - ```*element```: Type in a JS file and select the suggestion to create JS Custom Element boilerplate.
## Functions: ## Functions:
Clone this repository into the top level of the project you are working on, so the HTML can find the "quill.js" functions. Clone this repository into the top level of the project you are working on, so the HTML can find the "quill.js" functions.
Use backticks with both to get HTML and CSS syntax highlighting. Use backticks with both to get HTML and CSS syntax highlighting.
- ```addStyle```: Adds a style to a Quill style tag in the head. - ```addStyle```: Adds a style to a Quill style tag in the head.
- ```create```: Creates a parsed HTML element (which is not yet in the DOM) - ```html```: Creates a parsed HTML element (which is not yet in the DOM)

BIN
VSCode/.DS_Store vendored
View File

Binary file not shown.

2
VSCode/package.json
View File

@@ -2,7 +2,7 @@
"name": "quill", "name": "quill",
"displayName": "Quill", "displayName": "Quill",
"description": "HTML/CSS Syntax highlighting, best used with the Quill framework", "description": "HTML/CSS Syntax highlighting, best used with the Quill framework",
"version": "1.0.2", "version": "1.0.3",
"publisher": "capturedsun", "publisher": "capturedsun",
"icon": "docs/Quill.png", "icon": "docs/Quill.png",
"engines": { "engines": {

BIN
VSCode/quill-1.0.3.vsix Normal file
View File

Binary file not shown.

40
VSCode/snippets-html.json
View File

@@ -1,21 +1,47 @@
{ {
"*page": { "*page": {
"prefix": "*page", "prefix": "*html",
"body": [ "body": [
"<!DOCTYPE html>", "<!DOCTYPE html>",
"<html lang=\"en\">", "<html lang=\"en\">",
" <head>", " <head>",
" <title>Index</title>", " <title>Quill</title>",
" <link rel=\"icon\" href=\"\">",
" <link rel=\"stylesheet\" href=\"\">",
" <script type=\"module\">", " <script type=\"module\">",
" import * as quill from './Quill/quill.js';", " window.addStyle = function addStyle(cssString) {",
" window.quill = {};", " let container = document.querySelector(\"style#quillStyles\");",
" Object.entries(quill).forEach(([name, exported]) => window[name] = exported);", " if(!container) {",
" container = document.createElement('style');",
" container.id = \"quillStyles\";",
" document.head.appendChild(container);",
" }",
"",
" let primarySelector = cssString.substring(0, cssString.indexOf(\"{\"));",
" primarySelector = primarySelector.replace(/\\*/g, \"all\");",
" primarySelector = primarySelector.replace(/#/g, \"id-\");",
" primarySelector = primarySelector.replace(/,/g, \"\");",
" let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`)",
" if(!stylesheet) {",
" stylesheet = document.createElement('style');",
" stylesheet.id = primarySelector;",
" stylesheet.appendChild(document.createTextNode(cssString));",
" container.appendChild(stylesheet);",
" } else {",
" stylesheet.innerText = cssString",
" }",
" }",
"",
" window.html = function html(elementString) {",
" let parser = new DOMParser();",
" let doc = parser.parseFromString(elementString, 'text/html');",
" return doc.body.firstChild;",
" }",
" </script>", " </script>",
" <script type=\"module\" src=\"index.js\"></script>", " <script type=\"module\" src=\"\"></script>",
" </head>", " </head>",
" <body>", " <body>",
"", "",
"",
" </body>", " </body>",
"</html>" "</html>"
], ],

26
VSCode/snippets-js.json
View File

@@ -31,11 +31,12 @@
"", "",
" constructor() {", " constructor() {",
" super();", " super();",
" quill.addStyle(this.css);", " addStyle(this.css);",
" this.innerHTML = this.html;", " this.innerHTML = this.html;",
" }", " }",
"", "",
" connectedCallback() {", " connectedCallback() {",
" ",
" }", " }",
"", "",
"}", "}",
@@ -44,28 +45,5 @@
"export default Index;" "export default Index;"
], ],
"description": "Custom Element Template" "description": "Custom Element Template"
},
"*page": {
"prefix": "*page",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
" <head>",
" <title>Index</title>",
" <script type=\"module\">",
" import * as quill from './Quill/quill.js';",
" window.quill = {};",
" Object.entries(quill).forEach(([name, exported]) => window[name] = exported);",
" </script>",
" <script type=\"module\" src=\"index.js\"></script>",
" </head>",
" <body>",
"",
"",
" </body>",
"</html>"
],
"description": "Use the DOM collection of functions"
} }
} }

5
deploy-howto.md Normal file
View File

@@ -0,0 +1,5 @@
# To Deploy Extension
```vsce package```
```vsce publish```

38
index.html
View File

@@ -1,16 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Index</title> <title>Quill</title>
<link rel="icon" href="">
<link rel="stylesheet" href="">
<script type="module"> <script type="module">
import * as quill from './Quill/quill.js'; window.addStyle = function addStyle(cssString) {
window.quill = {}; let container = document.querySelector("style#quillStyles");
Object.entries(quill).forEach(([name, exported]) => window[name] = exported); if(!container) {
container = document.createElement('style');
container.id = "quillStyles";
document.head.appendChild(container);
}
let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim();
primarySelector = primarySelector.replace(/\*/g, "all");
primarySelector = primarySelector.replace(/#/g, "id-");
primarySelector = primarySelector.replace(/,/g, "");
let stylesheet = container.querySelector(`:scope > style[id='${primarySelector}']`)
if(!stylesheet) {
stylesheet = document.createElement('style');
stylesheet.id = primarySelector;
stylesheet.appendChild(document.createTextNode(cssString));
container.appendChild(stylesheet);
} else {
stylesheet.innerText = cssString
}
}
window.html = function html(elementString) {
let parser = new DOMParser();
let doc = parser.parseFromString(elementString, 'text/html');
return doc.body.firstChild;
}
</script> </script>
<script type="module" src="index.js"></script> <script type="module" src=""></script>
</head> </head>
<body> <body>
</body> </body>
</html> </html>

40
quill.js
View File

@@ -1,28 +1,22 @@
export function addStyle(cssString) { export function addStyle(cssString) {
if(quill.detectMobile() || quill.getSafariVersion() < 16.4) { let container = document.querySelector("style#quillStyles");
let container = document.querySelector("style#quillStyles"); if(!container) {
if(!container) { container = document.createElement('style');
container = document.createElement('style'); container.id = "quillStyles";
container.id = "quillStyles"; document.head.appendChild(container);
document.head.appendChild(container); }
}
let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim(); let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim();
primarySelector = primarySelector.replace(/\*/g, "all"); primarySelector = primarySelector.replace(/\*/g, "all");
let stylesheet = container.querySelector(`:scope > style#${primarySelector}`) let stylesheet = container.querySelector(`:scope > style#${primarySelector}`)
if(!stylesheet) { if(!stylesheet) {
stylesheet = document.createElement('style'); stylesheet = document.createElement('style');
stylesheet.id = primarySelector; stylesheet.id = primarySelector;
stylesheet.appendChild(document.createTextNode(cssString)); stylesheet.appendChild(document.createTextNode(cssString));
container.appendChild(stylesheet); container.appendChild(stylesheet);
} else { } else {
stylesheet.innerText = cssString stylesheet.innerText = cssString
} }
return;
}
let stylesheet = new CSSStyleSheet();
stylesheet.replaceSync(cssString)
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
} }
export function createElement(elementString) { export function createElement(elementString) {