@codemirror/lang-html - npm Package Compare versions

Comparing version 0.19.1 to 0.19.2

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 0.19.2 (2021-09-21)
+
+### New features
+
+The new `autoCloseTags` extension (included by default in `html()`) finishes closing tags when you type a `>` or `/` character.
+
 ## 0.19.1 (2021-08-11)
@@ -2,0 +8,0 @@

dist/index.d.ts

@@ -29,4 +29,14 @@ import * as _codemirror_state from '@codemirror/state';
     matchClosingTags?: boolean;
+    /**
+    Determines whether [`autoCloseTags`](https://codemirror.net/6/docs/ref/#lang-html.autoCloseTags)
+    is included in the support extensions. Defaults to true.
+    */
+    autoCloseTags?: boolean;
 }): LanguageSupport;
+/**
+Extension that will automatically insert close tags when a `>` or
+`/` is typed.
+*/
+declare const autoCloseTags: _codemirror_state.Extension;
 
-export { html, htmlCompletion, htmlLanguage };
+export { autoCloseTags, html, htmlCompletion, htmlLanguage };

dist/index.js

 import { parser, configureNesting } from '@lezer/html';
 import { cssLanguage, css } from '@codemirror/lang-css';
 import { javascriptLanguage, javascript } from '@codemirror/lang-javascript';
+import { EditorView } from '@codemirror/view';
+import { EditorSelection } from '@codemirror/state';
 import { syntaxTree, LRLanguage, indentNodeProp, foldNodeProp, LanguageSupport } from '@codemirror/language';
@@ -121,4 +123,3 @@ import { styleTags, tags } from '@codemirror/highlight';
     html: {
-        attrs: { manifest: null },
-        children: ["head", "body"]
+        attrs: { manifest: null }
     },
@@ -361,2 +362,4 @@ i: S,
 function elementName(doc, tree) {
+    if (!tree)
+        return "";
     let tag = tree.firstChild;
@@ -377,4 +380,3 @@ let name = tag && tag.getChild("TagName");
 function allowedChildren(doc, tree) {
-    let parent = findParentElement(tree, true);
-    let parentInfo = parent ? Tags[elementName(doc, parent)] : null;
+    let parentInfo = Tags[elementName(doc, findParentElement(tree, true))];
     return (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.children) || AllTags;
@@ -572,5 +574,42 @@ }
         lang = lang.configure({ dialect: "noMatch" });
-    return new LanguageSupport(lang, [htmlCompletion, javascript().support, css().support]);
+    return new LanguageSupport(lang, [
+        htmlCompletion,
+        config.autoCloseTags !== false ? autoCloseTags : [],
+        javascript().support,
+        css().support
+    ]);
 }
+/**
+Extension that will automatically insert close tags when a `>` or
+`/` is typed.
+*/
+const autoCloseTags = /*@__PURE__*/EditorView.inputHandler.of((view, from, to, text) => {
+    if (view.composing || view.state.readOnly || from != to || (text != ">" && text != "/") ||
+        !htmlLanguage.isActiveAt(view.state, from, -1))
+        return false;
+    let { state } = view;
+    let changes = state.changeByRange(range => {
+        var _a, _b, _c;
+        let around = syntaxTree(state).resolveInner(range.head, -1), name;
+        if (around.name == "TagName" || around.name == "StartTag")
+            around = around.parent;
+        if (text == ">" && around.name == "OpenTag") {
+            if (((_b = (_a = around.parent) === null || _a === void 0 ? void 0 : _a.lastChild) === null || _b === void 0 ? void 0 : _b.name) != "CloseTag" && (name = elementName(state.doc, around.parent)))
+                return { range: EditorSelection.cursor(range.head + 1), changes: { from: range.head, insert: `></${name}>` } };
+        }
+        else if (text == "/" && around.name == "OpenTag") {
+            let empty = around.parent, base = empty === null || empty === void 0 ? void 0 : empty.parent;
+            if (empty.from == range.head - 1 && ((_c = base.lastChild) === null || _c === void 0 ? void 0 : _c.name) != "CloseTag" && (name = elementName(state.doc, base))) {
+                let insert = `/${name}>`;
+                return { range: EditorSelection.cursor(range.head + insert.length), changes: { from: range.head, insert } };
+            }
+        }
+        return { range };
+    });
+    if (changes.changes.empty)
+        return false;
+    view.dispatch(changes, { userEvent: "input.type", scrollIntoView: true });
+    return true;
+});
 
-export { html, htmlCompletion, htmlLanguage };
+export { autoCloseTags, html, htmlCompletion, htmlLanguage };

package.json

 {
   "name": "@codemirror/lang-html",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "description": "HTML language support for the CodeMirror code editor",
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

53799

increased by8.88%

Lines of code

1260

increased by7.6%

No dependency changes