@codemirror/lang-html
Version:
HTML language support for the CodeMirror code editor
668 lines (663 loc) • 25.8 kB
JavaScript
;
var html$1 = require('@lezer/html');
var langCss = require('@codemirror/lang-css');
var langJavascript = require('@codemirror/lang-javascript');
var view = require('@codemirror/view');
var state = require('@codemirror/state');
var language = require('@codemirror/language');
const Targets = ["_blank", "_self", "_top", "_parent"];
const Charsets = ["ascii", "utf-8", "utf-16", "latin1", "latin1"];
const Methods = ["get", "post", "put", "delete"];
const Encs = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"];
const Bool = ["true", "false"];
const S = {}; // Empty tag spec
const Tags = {
a: {
attrs: {
href: null, ping: null, type: null,
media: null,
target: Targets,
hreflang: null
}
},
abbr: S,
address: S,
area: {
attrs: {
alt: null, coords: null, href: null, target: null, ping: null,
media: null, hreflang: null, type: null,
shape: ["default", "rect", "circle", "poly"]
}
},
article: S,
aside: S,
audio: {
attrs: {
src: null, mediagroup: null,
crossorigin: ["anonymous", "use-credentials"],
preload: ["none", "metadata", "auto"],
autoplay: ["autoplay"],
loop: ["loop"],
controls: ["controls"]
}
},
b: S,
base: { attrs: { href: null, target: Targets } },
bdi: S,
bdo: S,
blockquote: { attrs: { cite: null } },
body: S,
br: S,
button: {
attrs: {
form: null, formaction: null, name: null, value: null,
autofocus: ["autofocus"],
disabled: ["autofocus"],
formenctype: Encs,
formmethod: Methods,
formnovalidate: ["novalidate"],
formtarget: Targets,
type: ["submit", "reset", "button"]
}
},
canvas: { attrs: { width: null, height: null } },
caption: S,
center: S,
cite: S,
code: S,
col: { attrs: { span: null } },
colgroup: { attrs: { span: null } },
command: {
attrs: {
type: ["command", "checkbox", "radio"],
label: null, icon: null, radiogroup: null, command: null, title: null,
disabled: ["disabled"],
checked: ["checked"]
}
},
data: { attrs: { value: null } },
datagrid: { attrs: { disabled: ["disabled"], multiple: ["multiple"] } },
datalist: { attrs: { data: null } },
dd: S,
del: { attrs: { cite: null, datetime: null } },
details: { attrs: { open: ["open"] } },
dfn: S,
div: S,
dl: S,
dt: S,
em: S,
embed: { attrs: { src: null, type: null, width: null, height: null } },
eventsource: { attrs: { src: null } },
fieldset: { attrs: { disabled: ["disabled"], form: null, name: null } },
figcaption: S,
figure: S,
footer: S,
form: {
attrs: {
action: null, name: null,
"accept-charset": Charsets,
autocomplete: ["on", "off"],
enctype: Encs,
method: Methods,
novalidate: ["novalidate"],
target: Targets
}
},
h1: S, h2: S, h3: S, h4: S, h5: S, h6: S,
head: {
children: ["title", "base", "link", "style", "meta", "script", "noscript", "command"]
},
header: S,
hgroup: S,
hr: S,
html: {
attrs: { manifest: null }
},
i: S,
iframe: {
attrs: {
src: null, srcdoc: null, name: null, width: null, height: null,
sandbox: ["allow-top-navigation", "allow-same-origin", "allow-forms", "allow-scripts"],
seamless: ["seamless"]
}
},
img: {
attrs: {
alt: null, src: null, ismap: null, usemap: null, width: null, height: null,
crossorigin: ["anonymous", "use-credentials"]
}
},
input: {
attrs: {
alt: null, dirname: null, form: null, formaction: null,
height: null, list: null, max: null, maxlength: null, min: null,
name: null, pattern: null, placeholder: null, size: null, src: null,
step: null, value: null, width: null,
accept: ["audio/*", "video/*", "image/*"],
autocomplete: ["on", "off"],
autofocus: ["autofocus"],
checked: ["checked"],
disabled: ["disabled"],
formenctype: Encs,
formmethod: Methods,
formnovalidate: ["novalidate"],
formtarget: Targets,
multiple: ["multiple"],
readonly: ["readonly"],
required: ["required"],
type: ["hidden", "text", "search", "tel", "url", "email", "password", "datetime", "date", "month",
"week", "time", "datetime-local", "number", "range", "color", "checkbox", "radio",
"file", "submit", "image", "reset", "button"]
}
},
ins: { attrs: { cite: null, datetime: null } },
kbd: S,
keygen: {
attrs: {
challenge: null, form: null, name: null,
autofocus: ["autofocus"],
disabled: ["disabled"],
keytype: ["RSA"]
}
},
label: { attrs: { for: null, form: null } },
legend: S,
li: { attrs: { value: null } },
link: {
attrs: {
href: null, type: null,
hreflang: null,
media: null,
sizes: ["all", "16x16", "16x16 32x32", "16x16 32x32 64x64"]
}
},
map: { attrs: { name: null } },
mark: S,
menu: { attrs: { label: null, type: ["list", "context", "toolbar"] } },
meta: {
attrs: {
content: null,
charset: Charsets,
name: ["viewport", "application-name", "author", "description", "generator", "keywords"],
"http-equiv": ["content-language", "content-type", "default-style", "refresh"]
}
},
meter: { attrs: { value: null, min: null, low: null, high: null, max: null, optimum: null } },
nav: S,
noscript: S,
object: {
attrs: {
data: null, type: null, name: null, usemap: null, form: null, width: null, height: null,
typemustmatch: ["typemustmatch"]
}
},
ol: { attrs: { reversed: ["reversed"], start: null, type: ["1", "a", "A", "i", "I"] },
children: ["li", "script", "template", "ul", "ol"] },
optgroup: { attrs: { disabled: ["disabled"], label: null } },
option: { attrs: { disabled: ["disabled"], label: null, selected: ["selected"], value: null } },
output: { attrs: { for: null, form: null, name: null } },
p: S,
param: { attrs: { name: null, value: null } },
pre: S,
progress: { attrs: { value: null, max: null } },
q: { attrs: { cite: null } },
rp: S,
rt: S,
ruby: S,
samp: S,
script: {
attrs: {
type: ["text/javascript"],
src: null,
async: ["async"],
defer: ["defer"],
charset: Charsets
}
},
section: S,
select: {
attrs: {
form: null, name: null, size: null,
autofocus: ["autofocus"],
disabled: ["disabled"],
multiple: ["multiple"]
}
},
slot: { attrs: { name: null } },
small: S,
source: { attrs: { src: null, type: null, media: null } },
span: S,
strong: S,
style: {
attrs: {
type: ["text/css"],
media: null,
scoped: null
}
},
sub: S,
summary: S,
sup: S,
table: S,
tbody: S,
td: { attrs: { colspan: null, rowspan: null, headers: null } },
template: S,
textarea: {
attrs: {
dirname: null, form: null, maxlength: null, name: null, placeholder: null,
rows: null, cols: null,
autofocus: ["autofocus"],
disabled: ["disabled"],
readonly: ["readonly"],
required: ["required"],
wrap: ["soft", "hard"]
}
},
tfoot: S,
th: { attrs: { colspan: null, rowspan: null, headers: null, scope: ["row", "col", "rowgroup", "colgroup"] } },
thead: S,
time: { attrs: { datetime: null } },
title: S,
tr: S,
track: {
attrs: {
src: null, label: null, default: null,
kind: ["subtitles", "captions", "descriptions", "chapters", "metadata"],
srclang: null
}
},
ul: { children: ["li", "script", "template", "ul", "ol"] },
var: S,
video: {
attrs: {
src: null, poster: null, width: null, height: null,
crossorigin: ["anonymous", "use-credentials"],
preload: ["auto", "metadata", "none"],
autoplay: ["autoplay"],
mediagroup: ["movie"],
muted: ["muted"],
controls: ["controls"]
}
},
wbr: S
};
const GlobalAttrs = {
accesskey: null,
class: null,
contenteditable: Bool,
contextmenu: null,
dir: ["ltr", "rtl", "auto"],
draggable: ["true", "false", "auto"],
dropzone: ["copy", "move", "link", "string:", "file:"],
hidden: ["hidden"],
id: null,
inert: ["inert"],
itemid: null,
itemprop: null,
itemref: null,
itemscope: ["itemscope"],
itemtype: null,
lang: ["ar", "bn", "de", "en-GB", "en-US", "es", "fr", "hi", "id", "ja", "pa", "pt", "ru", "tr", "zh"],
spellcheck: Bool,
autocorrect: Bool,
autocapitalize: Bool,
style: null,
tabindex: null,
title: null,
translate: ["yes", "no"],
rel: ["stylesheet", "alternate", "author", "bookmark", "help", "license", "next", "nofollow", "noreferrer", "prefetch", "prev", "search", "tag"],
role: "alert application article banner button cell checkbox complementary contentinfo dialog document feed figure form grid gridcell heading img list listbox listitem main navigation region row rowgroup search switch tab table tabpanel textbox timer".split(" "),
"aria-activedescendant": null,
"aria-atomic": Bool,
"aria-autocomplete": ["inline", "list", "both", "none"],
"aria-busy": Bool,
"aria-checked": ["true", "false", "mixed", "undefined"],
"aria-controls": null,
"aria-describedby": null,
"aria-disabled": Bool,
"aria-dropeffect": null,
"aria-expanded": ["true", "false", "undefined"],
"aria-flowto": null,
"aria-grabbed": ["true", "false", "undefined"],
"aria-haspopup": Bool,
"aria-hidden": Bool,
"aria-invalid": ["true", "false", "grammar", "spelling"],
"aria-label": null,
"aria-labelledby": null,
"aria-level": null,
"aria-live": ["off", "polite", "assertive"],
"aria-multiline": Bool,
"aria-multiselectable": Bool,
"aria-owns": null,
"aria-posinset": null,
"aria-pressed": ["true", "false", "mixed", "undefined"],
"aria-readonly": Bool,
"aria-relevant": null,
"aria-required": Bool,
"aria-selected": ["true", "false", "undefined"],
"aria-setsize": null,
"aria-sort": ["ascending", "descending", "none", "other"],
"aria-valuemax": null,
"aria-valuemin": null,
"aria-valuenow": null,
"aria-valuetext": null
};
const eventAttributes = ("beforeunload copy cut dragstart dragover dragleave dragenter dragend " +
"drag paste focus blur change click load mousedown mouseenter mouseleave " +
"mouseup keydown keyup resize scroll unload").split(" ").map(n => "on" + n);
for (let a of eventAttributes)
GlobalAttrs[a] = null;
class Schema {
constructor(extraTags, extraAttrs) {
this.tags = { ...Tags, ...extraTags };
this.globalAttrs = { ...GlobalAttrs, ...extraAttrs };
this.allTags = Object.keys(this.tags);
this.globalAttrNames = Object.keys(this.globalAttrs);
}
}
Schema.default = new Schema;
function elementName(doc, tree, max = doc.length) {
if (!tree)
return "";
let tag = tree.firstChild;
let name = tag && tag.getChild("TagName");
return name ? doc.sliceString(name.from, Math.min(name.to, max)) : "";
}
function findParentElement(tree, skip = false) {
for (; tree; tree = tree.parent)
if (tree.name == "Element") {
if (skip)
skip = false;
else
return tree;
}
return null;
}
function allowedChildren(doc, tree, schema) {
let parentInfo = schema.tags[elementName(doc, findParentElement(tree))];
return (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.children) || schema.allTags;
}
function openTags(doc, tree) {
let open = [];
for (let parent = findParentElement(tree); parent && !parent.type.isTop; parent = findParentElement(parent.parent)) {
let tagName = elementName(doc, parent);
if (tagName && parent.lastChild.name == "CloseTag")
break;
if (tagName && open.indexOf(tagName) < 0 && (tree.name == "EndTag" || tree.from >= parent.firstChild.to))
open.push(tagName);
}
return open;
}
const identifier = /^[:\-\.\w\u00b7-\uffff]*$/;
function completeTag(state, schema, tree, from, to) {
let end = /\s*>/.test(state.sliceDoc(to, to + 5)) ? "" : ">";
let parent = findParentElement(tree, true);
return { from, to,
options: allowedChildren(state.doc, parent, schema).map(tagName => ({ label: tagName, type: "type" })).concat(openTags(state.doc, tree).map((tag, i) => ({ label: "/" + tag, apply: "/" + tag + end,
type: "type", boost: 99 - i }))),
validFor: /^\/?[:\-\.\w\u00b7-\uffff]*$/ };
}
function completeCloseTag(state, tree, from, to) {
let end = /\s*>/.test(state.sliceDoc(to, to + 5)) ? "" : ">";
return { from, to,
options: openTags(state.doc, tree).map((tag, i) => ({ label: tag, apply: tag + end, type: "type", boost: 99 - i })),
validFor: identifier };
}
function completeStartTag(state, schema, tree, pos) {
let options = [], level = 0;
for (let tagName of allowedChildren(state.doc, tree, schema))
options.push({ label: "<" + tagName, type: "type" });
for (let open of openTags(state.doc, tree))
options.push({ label: "</" + open + ">", type: "type", boost: 99 - level++ });
return { from: pos, to: pos, options, validFor: /^<\/?[:\-\.\w\u00b7-\uffff]*$/ };
}
function completeAttrName(state, schema, tree, from, to) {
let elt = findParentElement(tree), info = elt ? schema.tags[elementName(state.doc, elt)] : null;
let localAttrs = info && info.attrs ? Object.keys(info.attrs) : [];
let names = info && info.globalAttrs === false ? localAttrs
: localAttrs.length ? localAttrs.concat(schema.globalAttrNames) : schema.globalAttrNames;
return { from, to,
options: names.map(attrName => ({ label: attrName, type: "property" })),
validFor: identifier };
}
function completeAttrValue(state, schema, tree, from, to) {
var _a;
let nameNode = (_a = tree.parent) === null || _a === void 0 ? void 0 : _a.getChild("AttributeName");
let options = [], token = undefined;
if (nameNode) {
let attrName = state.sliceDoc(nameNode.from, nameNode.to);
let attrs = schema.globalAttrs[attrName];
if (!attrs) {
let elt = findParentElement(tree), info = elt ? schema.tags[elementName(state.doc, elt)] : null;
attrs = (info === null || info === void 0 ? void 0 : info.attrs) && info.attrs[attrName];
}
if (attrs) {
let base = state.sliceDoc(from, to).toLowerCase(), quoteStart = '"', quoteEnd = '"';
if (/^['"]/.test(base)) {
token = base[0] == '"' ? /^[^"]*$/ : /^[^']*$/;
quoteStart = "";
quoteEnd = state.sliceDoc(to, to + 1) == base[0] ? "" : base[0];
base = base.slice(1);
from++;
}
else {
token = /^[^\s<>='"]*$/;
}
for (let value of attrs)
options.push({ label: value, apply: quoteStart + value + quoteEnd, type: "constant" });
}
}
return { from, to, options, validFor: token };
}
function htmlCompletionFor(schema, context) {
let { state, pos } = context, tree = language.syntaxTree(state).resolveInner(pos, -1), around = tree.resolve(pos);
for (let scan = pos, before; around == tree && (before = tree.childBefore(scan));) {
let last = before.lastChild;
if (!last || !last.type.isError || last.from < last.to)
break;
around = tree = before;
scan = last.from;
}
if (tree.name == "TagName") {
return tree.parent && /CloseTag$/.test(tree.parent.name) ? completeCloseTag(state, tree, tree.from, pos)
: completeTag(state, schema, tree, tree.from, pos);
}
else if (tree.name == "StartTag") {
return completeTag(state, schema, tree, pos, pos);
}
else if (tree.name == "StartCloseTag" || tree.name == "IncompleteCloseTag") {
return completeCloseTag(state, tree, pos, pos);
}
else if (tree.name == "OpenTag" || tree.name == "SelfClosingTag" || tree.name == "AttributeName") {
return completeAttrName(state, schema, tree, tree.name == "AttributeName" ? tree.from : pos, pos);
}
else if (tree.name == "Is" || tree.name == "AttributeValue" || tree.name == "UnquotedAttributeValue") {
return completeAttrValue(state, schema, tree, tree.name == "Is" ? pos : tree.from, pos);
}
else if (context.explicit && (around.name == "Element" || around.name == "Text" || around.name == "Document")) {
return completeStartTag(state, schema, tree, pos);
}
else {
return null;
}
}
/**
HTML tag completion. Opens and closes tags and attributes in a
context-aware way.
*/
function htmlCompletionSource(context) {
return htmlCompletionFor(Schema.default, context);
}
/**
Create a completion source for HTML extended with additional tags
or attributes.
*/
function htmlCompletionSourceWith(config) {
let { extraTags, extraGlobalAttributes: extraAttrs } = config;
let schema = extraAttrs || extraTags ? new Schema(extraTags, extraAttrs) : Schema.default;
return (context) => htmlCompletionFor(schema, context);
}
const jsonParser = langJavascript.javascriptLanguage.parser.configure({ top: "SingleExpression" });
const defaultNesting = [
{ tag: "script",
attrs: attrs => attrs.type == "text/typescript" || attrs.lang == "ts",
parser: langJavascript.typescriptLanguage.parser },
{ tag: "script",
attrs: attrs => attrs.type == "text/babel" || attrs.type == "text/jsx",
parser: langJavascript.jsxLanguage.parser },
{ tag: "script",
attrs: attrs => attrs.type == "text/typescript-jsx",
parser: langJavascript.tsxLanguage.parser },
{ tag: "script",
attrs(attrs) {
return /^(importmap|speculationrules|application\/(.+\+)?json)$/i.test(attrs.type);
},
parser: jsonParser },
{ tag: "script",
attrs(attrs) {
return !attrs.type || /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i.test(attrs.type);
},
parser: langJavascript.javascriptLanguage.parser },
{ tag: "style",
attrs(attrs) {
return (!attrs.lang || attrs.lang == "css") && (!attrs.type || /^(text\/)?(x-)?(stylesheet|css)$/i.test(attrs.type));
},
parser: langCss.cssLanguage.parser }
];
const defaultAttrs = [
{ name: "style",
parser: langCss.cssLanguage.parser.configure({ top: "Styles" }) }
].concat(eventAttributes.map(name => ({ name, parser: langJavascript.javascriptLanguage.parser })));
const htmlPlain = language.LRLanguage.define({
name: "html",
parser: html$1.parser.configure({
props: [
language.indentNodeProp.add({
Element(context) {
let after = /^(\s*)(<\/)?/.exec(context.textAfter);
if (context.node.to <= context.pos + after[0].length)
return context.continue();
return context.lineIndent(context.node.from) + (after[2] ? 0 : context.unit);
},
"OpenTag CloseTag SelfClosingTag"(context) {
return context.column(context.node.from) + context.unit;
},
Document(context) {
if (context.pos + /\s*/.exec(context.textAfter)[0].length < context.node.to)
return context.continue();
let endElt = null, close;
for (let cur = context.node;;) {
let last = cur.lastChild;
if (!last || last.name != "Element" || last.to != cur.to)
break;
endElt = cur = last;
}
if (endElt && !((close = endElt.lastChild) && (close.name == "CloseTag" || close.name == "SelfClosingTag")))
return context.lineIndent(endElt.from) + context.unit;
return null;
}
}),
language.foldNodeProp.add({
Element(node) {
let first = node.firstChild, last = node.lastChild;
if (!first || first.name != "OpenTag")
return null;
return { from: first.to, to: last.name == "CloseTag" ? last.from : node.to };
}
}),
language.bracketMatchingHandle.add({
"OpenTag CloseTag": node => node.getChild("TagName")
})
]
}),
languageData: {
commentTokens: { block: { open: "<!--", close: "-->" } },
indentOnInput: /^\s*<\/\w+\W$/,
wordChars: "-_"
}
});
/**
A language provider based on the [Lezer HTML
parser](https://github.com/lezer-parser/html), extended with the
JavaScript and CSS parsers to parse the content of `<script>` and
`<style>` tags.
*/
const htmlLanguage = htmlPlain.configure({
wrap: html$1.configureNesting(defaultNesting, defaultAttrs)
});
/**
Language support for HTML, including
[`htmlCompletion`](https://codemirror.net/6/docs/ref/#lang-html.htmlCompletion) and JavaScript and
CSS support extensions.
*/
function html(config = {}) {
let dialect = "", wrap;
if (config.matchClosingTags === false)
dialect = "noMatch";
if (config.selfClosingTags === true)
dialect = (dialect ? dialect + " " : "") + "selfClosing";
if (config.nestedLanguages && config.nestedLanguages.length ||
config.nestedAttributes && config.nestedAttributes.length)
wrap = html$1.configureNesting((config.nestedLanguages || []).concat(defaultNesting), (config.nestedAttributes || []).concat(defaultAttrs));
let lang = wrap ? htmlPlain.configure({ wrap, dialect }) : dialect ? htmlLanguage.configure({ dialect }) : htmlLanguage;
return new language.LanguageSupport(lang, [
htmlLanguage.data.of({ autocomplete: htmlCompletionSourceWith(config) }),
config.autoCloseTags !== false ? autoCloseTags : [],
langJavascript.javascript().support,
langCss.css().support
]);
}
const selfClosers = new Set("area base br col command embed frame hr img input keygen link meta param source track wbr menuitem".split(" "));
/**
Extension that will automatically insert close tags when a `>` or
`/` is typed.
*/
const autoCloseTags = view.EditorView.inputHandler.of((view, from, to, text, insertTransaction) => {
if (view.composing || view.state.readOnly || from != to || (text != ">" && text != "/") ||
!htmlLanguage.isActiveAt(view.state, from, -1))
return false;
let base = insertTransaction(), { state: state$1 } = base;
let closeTags = state$1.changeByRange(range => {
var _a, _b, _c;
let didType = state$1.doc.sliceString(range.from - 1, range.to) == text;
let { head } = range, after = language.syntaxTree(state$1).resolveInner(head, -1), name;
if (didType && text == ">" && after.name == "EndTag") {
let tag = after.parent;
if (((_b = (_a = tag.parent) === null || _a === void 0 ? void 0 : _a.lastChild) === null || _b === void 0 ? void 0 : _b.name) != "CloseTag" &&
(name = elementName(state$1.doc, tag.parent, head)) &&
!selfClosers.has(name)) {
let to = head + (state$1.doc.sliceString(head, head + 1) === ">" ? 1 : 0);
let insert = `</${name}>`;
return { range, changes: { from: head, to, insert } };
}
}
else if (didType && text == "/" && after.name == "IncompleteCloseTag") {
let tag = after.parent;
if (after.from == head - 2 && ((_c = tag.lastChild) === null || _c === void 0 ? void 0 : _c.name) != "CloseTag" &&
(name = elementName(state$1.doc, tag, head)) && !selfClosers.has(name)) {
let to = head + (state$1.doc.sliceString(head, head + 1) === ">" ? 1 : 0);
let insert = `${name}>`;
return {
range: state.EditorSelection.cursor(head + insert.length, -1),
changes: { from: head, to, insert }
};
}
}
return { range };
});
if (closeTags.changes.empty)
return false;
view.dispatch([
base,
state$1.update(closeTags, {
userEvent: "input.complete",
scrollIntoView: true
})
]);
return true;
});
exports.autoCloseTags = autoCloseTags;
exports.html = html;
exports.htmlCompletionSource = htmlCompletionSource;
exports.htmlCompletionSourceWith = htmlCompletionSourceWith;
exports.htmlLanguage = htmlLanguage;