├── .github
    └── workflows
    │   └── dispatch.yml
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── src
    ├── README.md
    ├── complete.ts
    └── html.ts
└── test
    └── test-complete.ts


/.github/workflows/dispatch.yml:
--------------------------------------------------------------------------------
 1 | name: Trigger CI
 2 | on: push
 3 | 
 4 | jobs:
 5 |   build:
 6 |     name: Dispatch to main repo
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |       - name: Emit repository_dispatch
10 |         uses: mvasigh/dispatch-action@main
11 |         with:
12 |           # You should create a personal access token and store it in your repository
13 |           token: ${{ secrets.DISPATCH_AUTH }}
14 |           repo: dev
15 |           owner: codemirror
16 |           event_type: push
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | package-lock.json
3 | /dist
4 | /test/*.js
5 | /test/*.d.ts
6 | /test/*.d.ts.map
7 | .tern-*
8 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /src
2 | /test
3 | /node_modules
4 | .tern-*
5 | rollup.config.js
6 | tsconfig.json
7 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## 6.4.9 (2024-04-12)
  2 | 
  3 | ### Bug fixes
  4 | 
  5 | Fix a bug in `autoCloseTags` that made tags not close when typing > after an attribute.
  6 | 
  7 | ## 6.4.8 (2024-01-23)
  8 | 
  9 | ### Bug fixes
 10 | 
 11 | Complete attribute names after whitespace in a tag even when completion isn't explicitly triggered.
 12 | 
 13 | ## 6.4.7 (2023-11-27)
 14 | 
 15 | ### Bug fixes
 16 | 
 17 | Parse `script` tags with `application/json` type as JSON syntax.
 18 | 
 19 | ## 6.4.6 (2023-08-28)
 20 | 
 21 | ### Bug fixes
 22 | 
 23 | `autoCloseTags` now generates two separate transactions, so that the completion can be undone separately.
 24 | 
 25 | Add highlighting for the content of `<script>` tags with a type of `importmap` or `speculationrules`.
 26 | 
 27 | ## 6.4.5 (2023-06-23)
 28 | 
 29 | ### Bug fixes
 30 | 
 31 | Fix a bug where HTML autocompletion didn't work when the cursor was at the end of a bit of HTML code inside a mixed-language document.
 32 | 
 33 | ## 6.4.4 (2023-06-05)
 34 | 
 35 | ### Bug fixes
 36 | 
 37 | Fix a bug where the completed tag names didn't take into account the parent node's declared children in the schema in some circumstances.
 38 | 
 39 | ## 6.4.3 (2023-03-27)
 40 | 
 41 | ### Bug fixes
 42 | 
 43 | Fix a bug that could cause some nested language regions to be parsed multiple times.
 44 | 
 45 | ## 6.4.2 (2023-02-10)
 46 | 
 47 | ### Bug fixes
 48 | 
 49 | Fix an issue where `autoCloseTags` would close self-closing tags when typed directly in front of a word.
 50 | 
 51 | ## 6.4.1 (2023-01-12)
 52 | 
 53 | ### Bug fixes
 54 | 
 55 | Use only the tag name for matching of opening and closing tags.
 56 | 
 57 | ## 6.4.0 (2022-11-30)
 58 | 
 59 | ### Bug fixes
 60 | 
 61 | Directly depend on @lang/css 1.1.0, since we're using a new top rule name introduced in that.
 62 | 
 63 | ### New features
 64 | 
 65 | Add a `globalAttrs` property to (completion) `TagSpec` objects that controls whether global attributes are completed in that tag.
 66 | 
 67 | ## 6.3.1 (2022-11-29)
 68 | 
 69 | ### Bug fixes
 70 | 
 71 | Remove incorrect pure annotation that broke the code after tree-shaking.
 72 | 
 73 | ## 6.3.0 (2022-11-28)
 74 | 
 75 | ### Bug fixes
 76 | 
 77 | Parse type=text/babel script tags as JSX.
 78 | 
 79 | ### New features
 80 | 
 81 | The new `nestedLanguages` option can be used to configure how the content of script, style, and textarea tags is parsed.
 82 | 
 83 | The content of style attributes will now be parsed as CSS, and the content of on[event] attributes as JavaScript. The new `nestedAttributes` option can be used to configure the parsing of other attribute values.
 84 | 
 85 | ## 6.2.0 (2022-11-16)
 86 | 
 87 | ### New features
 88 | 
 89 | Add a `selfClosingTags` option to `html` that enables `/>` syntax.
 90 | 
 91 | ## 6.1.4 (2022-11-15)
 92 | 
 93 | ### Bug fixes
 94 | 
 95 | Parse the content of text/javascript or lang=ts script tags as TypeScript, use JS for text/jsx, and TSX for text/typescript-jsx.
 96 | 
 97 | ## 6.1.3 (2022-10-24)
 98 | 
 99 | ### Bug fixes
100 | 
101 | Remove deprecated HTML tags from the completions.
102 | 
103 | ## 6.1.2 (2022-09-27)
104 | 
105 | ### Bug fixes
106 | 
107 | Make tag auto-closing consume `>` characters after the cursor.
108 | 
109 | ## 6.1.1 (2022-09-05)
110 | 
111 | ### Bug fixes
112 | 
113 | Properly list the dependency on @codemirror/view in package.json.
114 | 
115 | ## 6.1.0 (2022-06-22)
116 | 
117 | ### New features
118 | 
119 | It is now possible to pass in options to extend the set of tags and attributes provided by autocompletion.
120 | 
121 | ## 6.0.0 (2022-06-08)
122 | 
123 | ### Breaking changes
124 | 
125 | Update dependencies to 6.0.0
126 | 
127 | ## 0.20.0 (2022-04-20)
128 | 
129 | ### New features
130 | 
131 | Autocompletion now suggests the `<template>` and `<slot>` elements.
132 | 
133 | ## 0.19.4 (2021-11-30)
134 | 
135 | ### Bug fixes
136 | 
137 | Fix an issue where autoclosing a tag directly in front of alphanumeric text would include nonsense text in the completed tag name.
138 | 
139 | ## 0.19.3 (2021-09-23)
140 | 
141 | ### New features
142 | 
143 | The package now exports a completion source function, rather than a prebuilt completion extension.
144 | 
145 | Use more specific highlighting tags for attribute names and values.
146 | 
147 | ## 0.19.2 (2021-09-21)
148 | 
149 | ### New features
150 | 
151 | The new `autoCloseTags` extension (included by default in `html()`) finishes closing tags when you type a `>` or `/` character.
152 | 
153 | ## 0.19.1 (2021-08-11)
154 | 
155 | ### Bug fixes
156 | 
157 | Fix incorrect versions for @lezer dependencies.
158 | 
159 | ## 0.19.0 (2021-08-11)
160 | 
161 | ### Bug fixes
162 | 
163 | Improve autocompletion in/after unclosed opening tags.
164 | 
165 | ### New features
166 | 
167 | `html()` now takes a `matchClosingTags` option to turn off closing tag matching.
168 | 
169 | ## 0.18.1 (2021-05-05)
170 | 
171 | ### Bug fixes
172 | 
173 | Fix an issue where the completer would sometimes try to complete an opening tag to its own close tag.
174 | 
175 | Fix a bug that would sometimes produce the wrong indentation in HTML elements.
176 | 
177 | Fix a bug that broke tag-specific attribute completion in tags like `<input>` or `<script>`.
178 | 
179 | Move a new version of lezer-html which solves some issues with autocompletion.
180 | 
181 | ## 0.18.0 (2021-03-03)
182 | 
183 | ### Bug fixes
184 | 
185 | Improves indentation at end of implicitly closed elements.
186 | 
187 | ## 0.17.1 (2021-01-06)
188 | 
189 | ### New features
190 | 
191 | The package now also exports a CommonJS module.
192 | 
193 | ## 0.17.0 (2020-12-29)
194 | 
195 | ### Breaking changes
196 | 
197 | First numbered release.
198 | 
199 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!-- NOTE: README.md is generated from src/README.md -->
  2 | 
  3 | # @codemirror/lang-html [![NPM version](https://img.shields.io/npm/v/@codemirror/lang-html.svg)](https://www.npmjs.org/package/@codemirror/lang-html)
  4 | 
  5 | [ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lang-html/blob/main/CHANGELOG.md) ]
  6 | 
  7 | This package implements HTML language support for the
  8 | [CodeMirror](https://codemirror.net/) code editor.
  9 | 
 10 | The [project page](https://codemirror.net/) has more information, a
 11 | number of [examples](https://codemirror.net/examples/) and the
 12 | [documentation](https://codemirror.net/docs/).
 13 | 
 14 | This code is released under an
 15 | [MIT license](https://github.com/codemirror/lang-html/tree/main/LICENSE).
 16 | 
 17 | We aim to be an inclusive, welcoming community. To make that explicit,
 18 | we have a [code of
 19 | conduct](http://contributor-covenant.org/version/1/1/0/) that applies
 20 | to communication around the project.
 21 | 
 22 | ## Usage
 23 | 
 24 | ```javascript
 25 | import {EditorView, basicSetup} from "codemirror"
 26 | import {html} from "@codemirror/lang-html"
 27 | 
 28 | const view = new EditorView({
 29 |   parent: document.body,
 30 |   doc: `<!doctype html>\n<title>HTML</title>`,
 31 |   extensions: [basicSetup, html()]
 32 | })
 33 | ```
 34 | 
 35 | ## API Reference
 36 | 
 37 | <dl>
 38 | <dt id="user-content-html">
 39 |   <code><strong><a href="#user-content-html">html</a></strong>(<a id="user-content-html^config" href="#user-content-html^config">config</a>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a> = {}) → <a href="https://codemirror.net/docs/ref#language.LanguageSupport">LanguageSupport</a></code></dt>
 40 | 
 41 | <dd><p>Language support for HTML, including
 42 | <a href="#user-content-htmlcompletion"><code>htmlCompletion</code></a> and JavaScript and
 43 | CSS support extensions.</p>
 44 | <dl><dt id="user-content-html^config">
 45 |   <code><strong><a href="#user-content-html^config">config</a></strong></code></dt>
 46 | 
 47 | <dd><dl><dt id="user-content-html^config.matchclosingtags">
 48 |   <code><strong><a href="#user-content-html^config.matchclosingtags">matchClosingTags</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
 49 | 
 50 | <dd><p>By default, the syntax tree will highlight mismatched closing
 51 | tags. Set this to <code>false</code> to turn that off (for example when you
 52 | expect to only be parsing a fragment of HTML text, not a full
 53 | document).</p>
 54 | </dd><dt id="user-content-html^config.selfclosingtags">
 55 |   <code><strong><a href="#user-content-html^config.selfclosingtags">selfClosingTags</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
 56 | 
 57 | <dd><p>By default, the parser does not allow arbitrary self-closing tags.
 58 | Set this to <code>true</code> to turn on support for <code>/&gt;</code> self-closing tag
 59 | syntax.</p>
 60 | </dd><dt id="user-content-html^config.autoclosetags">
 61 |   <code><strong><a href="#user-content-html^config.autoclosetags">autoCloseTags</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
 62 | 
 63 | <dd><p>Determines whether <a href="#user-content-autoclosetags"><code>autoCloseTags</code></a>
 64 | is included in the support extensions. Defaults to true.</p>
 65 | </dd><dt id="user-content-html^config.extratags">
 66 |   <code><strong><a href="#user-content-html^config.extratags">extraTags</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="#user-content-tagspec">TagSpec</a>&gt;</code></dt>
 67 | 
 68 | <dd><p>Add additional tags that can be completed.</p>
 69 | </dd><dt id="user-content-html^config.extraglobalattributes">
 70 |   <code><strong><a href="#user-content-html^config.extraglobalattributes">extraGlobalAttributes</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[] | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>&gt;</code></dt>
 71 | 
 72 | <dd><p>Add additional completable attributes to all tags.</p>
 73 | </dd><dt id="user-content-html^config.nestedlanguages">
 74 |   <code><strong><a href="#user-content-html^config.nestedlanguages">nestedLanguages</a></strong>&#8288;?: {tag: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, attrs&#8288;?: fn(<a id="user-content-html^config.nestedlanguages.attrs^attrs" href="#user-content-html^config.nestedlanguages.attrs^attrs">attrs</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>&gt;) → <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, parser: <a href="https://lezer.codemirror.net/docs/ref/#common.Parser">Parser</a>}[]</code></dt>
 75 | 
 76 | <dd><p>Register additional languages to parse the content of specific
 77 | tags. If given, <code>attrs</code> should be a function that, given an
 78 | object representing the tag's attributes, returns <code>true</code> if this
 79 | language applies.</p>
 80 | </dd><dt id="user-content-html^config.nestedattributes">
 81 |   <code><strong><a href="#user-content-html^config.nestedattributes">nestedAttributes</a></strong>&#8288;?: {name: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, tagName&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, parser: <a href="https://lezer.codemirror.net/docs/ref/#common.Parser">Parser</a>}[]</code></dt>
 82 | 
 83 | <dd><p>Register additional languages to parse attribute values with.</p>
 84 | </dd></dl></dd></dl></dd>
 85 | <dt id="user-content-htmllanguage">
 86 |   <code><strong><a href="#user-content-htmllanguage">htmlLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.LRLanguage">LRLanguage</a></code></dt>
 87 | 
 88 | <dd><p>A language provider based on the <a href="https://github.com/lezer-parser/html">Lezer HTML
 89 | parser</a>, extended with the
 90 | JavaScript and CSS parsers to parse the content of <code>&lt;script&gt;</code> and
 91 | <code>&lt;style&gt;</code> tags.</p>
 92 | </dd>
 93 | <dt id="user-content-htmlcompletionsource">
 94 |   <code><strong><a href="#user-content-htmlcompletionsource">htmlCompletionSource</a></strong>(<a id="user-content-htmlcompletionsource^context" href="#user-content-htmlcompletionsource^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → <a href="https://codemirror.net/docs/ref#autocomplete.CompletionResult">CompletionResult</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt>
 95 | 
 96 | <dd><p>HTML tag completion. Opens and closes tags and attributes in a
 97 | context-aware way.</p>
 98 | </dd>
 99 | <dt id="user-content-tagspec">
100 |   <h4>
101 |     <code>interface</code>
102 |     <a href="#user-content-tagspec">TagSpec</a></h4>
103 | </dt>
104 | 
105 | <dd><p>Type used to specify tags to complete.</p>
106 | <dl><dt id="user-content-tagspec.attrs">
107 |   <code><strong><a href="#user-content-tagspec.attrs">attrs</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[] | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>&gt;</code></dt>
108 | 
109 | <dd><p>Define tag-specific attributes. Property names are attribute
110 | names, and property values can be null to indicate free-form
111 | attributes, or a list of strings for suggested attribute values.</p>
112 | </dd><dt id="user-content-tagspec.globalattrs">
113 |   <code><strong><a href="#user-content-tagspec.globalattrs">globalAttrs</a></strong>&#8288;?: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code></dt>
114 | 
115 | <dd><p>When set to false, don't complete global attributes on this tag.</p>
116 | </dd><dt id="user-content-tagspec.children">
117 |   <code><strong><a href="#user-content-tagspec.children">children</a></strong>&#8288;?: readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[]</code></dt>
118 | 
119 | <dd><p>Can be used to specify a list of child tags that are valid
120 | inside this tag. The default is to allow any tag.</p>
121 | </dd></dl>
122 | 
123 | </dd>
124 | <dt id="user-content-htmlcompletionsourcewith">
125 |   <code><strong><a href="#user-content-htmlcompletionsourcewith">htmlCompletionSourceWith</a></strong>(<a id="user-content-htmlcompletionsourcewith^config" href="#user-content-htmlcompletionsourcewith^config">config</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>) → fn(<a id="user-content-htmlcompletionsourcewith^returns^context" href="#user-content-htmlcompletionsourcewith^returns^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → <a href="https://codemirror.net/docs/ref#autocomplete.CompletionResult">CompletionResult</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt>
126 | 
127 | <dd><p>Create a completion source for HTML extended with additional tags
128 | or attributes.</p>
129 | <dl><dt id="user-content-htmlcompletionsourcewith^config">
130 |   <code><strong><a href="#user-content-htmlcompletionsourcewith^config">config</a></strong></code></dt>
131 | 
132 | <dd><dl><dt id="user-content-htmlcompletionsourcewith^config.extratags">
133 |   <code><strong><a href="#user-content-htmlcompletionsourcewith^config.extratags">extraTags</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="#user-content-tagspec">TagSpec</a>&gt;</code></dt>
134 | 
135 | <dd><p>Define extra tag names to complete.</p>
136 | </dd><dt id="user-content-htmlcompletionsourcewith^config.extraglobalattributes">
137 |   <code><strong><a href="#user-content-htmlcompletionsourcewith^config.extraglobalattributes">extraGlobalAttributes</a></strong>&#8288;?: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeystype">Record</a>&lt;<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[] | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>&gt;</code></dt>
138 | 
139 | <dd><p>Add global attributes that are available on all tags.</p>
140 | </dd></dl></dd></dl></dd>
141 | <dt id="user-content-autoclosetags">
142 |   <code><strong><a href="#user-content-autoclosetags">autoCloseTags</a></strong>: <a href="https://codemirror.net/docs/ref#state.Extension">Extension</a></code></dt>
143 | 
144 | <dd><p>Extension that will automatically insert close tags when a <code>&gt;</code> or
145 | <code>/</code> is typed.</p>
146 | </dd>
147 | </dl>
148 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@codemirror/lang-html",
 3 |   "version": "6.4.9",
 4 |   "description": "HTML language support for the CodeMirror code editor",
 5 |   "scripts": {
 6 |     "test": "cm-runtests",
 7 |     "prepare": "cm-buildhelper src/html.ts"
 8 |   },
 9 |   "keywords": [
10 |     "editor",
11 |     "code"
12 |   ],
13 |   "author": {
14 |     "name": "Marijn Haverbeke",
15 |     "email": "marijn@haverbeke.berlin",
16 |     "url": "http://marijnhaverbeke.nl"
17 |   },
18 |   "type": "module",
19 |   "main": "dist/index.cjs",
20 |   "exports": {
21 |     "import": "./dist/index.js",
22 |     "require": "./dist/index.cjs"
23 |   },
24 |   "types": "dist/index.d.ts",
25 |   "module": "dist/index.js",
26 |   "sideEffects": false,
27 |   "license": "MIT",
28 |   "dependencies": {
29 |     "@codemirror/autocomplete": "^6.0.0",
30 |     "@codemirror/lang-css": "^6.0.0",
31 |     "@codemirror/lang-javascript": "^6.0.0",
32 |     "@codemirror/language": "^6.4.0",
33 |     "@codemirror/state": "^6.0.0",
34 |     "@codemirror/view": "^6.17.0",
35 |     "@lezer/html": "^1.3.0",
36 |     "@lezer/common": "^1.0.0",
37 |     "@lezer/css": "^1.1.0"
38 |   },
39 |   "devDependencies": {
40 |     "@codemirror/buildhelper": "^1.0.0"
41 |   },
42 |   "repository": {
43 |     "type": "git",
44 |     "url": "https://github.com/codemirror/lang-html.git"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
 1 | <!-- NOTE: README.md is generated from src/README.md -->
 2 | 
 3 | # @codemirror/lang-html [![NPM version](https://img.shields.io/npm/v/@codemirror/lang-html.svg)](https://www.npmjs.org/package/@codemirror/lang-html)
 4 | 
 5 | [ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lang-html/blob/main/CHANGELOG.md) ]
 6 | 
 7 | This package implements HTML language support for the
 8 | [CodeMirror](https://codemirror.net/) code editor.
 9 | 
10 | The [project page](https://codemirror.net/) has more information, a
11 | number of [examples](https://codemirror.net/examples/) and the
12 | [documentation](https://codemirror.net/docs/).
13 | 
14 | This code is released under an
15 | [MIT license](https://github.com/codemirror/lang-html/tree/main/LICENSE).
16 | 
17 | We aim to be an inclusive, welcoming community. To make that explicit,
18 | we have a [code of
19 | conduct](http://contributor-covenant.org/version/1/1/0/) that applies
20 | to communication around the project.
21 | 
22 | ## Usage
23 | 
24 | ```javascript
25 | import {EditorView, basicSetup} from "codemirror"
26 | import {html} from "@codemirror/lang-html"
27 | 
28 | const view = new EditorView({
29 |   parent: document.body,
30 |   doc: `<!doctype html>\n<title>HTML</title>`,
31 |   extensions: [basicSetup, html()]
32 | })
33 | ```
34 | 
35 | ## API Reference
36 | 
37 | @html
38 | 
39 | @htmlLanguage
40 | 
41 | @htmlCompletionSource
42 | 
43 | @TagSpec
44 | 
45 | @htmlCompletionSourceWith
46 | 
47 | @autoCloseTags
48 | 


--------------------------------------------------------------------------------
/src/complete.ts:
--------------------------------------------------------------------------------
  1 | import {EditorState, Text} from "@codemirror/state"
  2 | import {syntaxTree} from "@codemirror/language"
  3 | import {CompletionContext, CompletionResult} from "@codemirror/autocomplete"
  4 | import {SyntaxNode} from "@lezer/common"
  5 | 
  6 | /// Type used to specify tags to complete.
  7 | export interface TagSpec {
  8 |   /// Define tag-specific attributes. Property names are attribute
  9 |   /// names, and property values can be null to indicate free-form
 10 |   /// attributes, or a list of strings for suggested attribute values.
 11 |   attrs?: Record<string, null | readonly string[]>,
 12 |   /// When set to false, don't complete global attributes on this tag.
 13 |   globalAttrs?: boolean,
 14 |   /// Can be used to specify a list of child tags that are valid
 15 |   /// inside this tag. The default is to allow any tag.
 16 |   children?: readonly string[]
 17 | }
 18 | 
 19 | const Targets = ["_blank", "_self", "_top", "_parent"]
 20 | const Charsets = ["ascii", "utf-8", "utf-16", "latin1", "latin1"]
 21 | const Methods = ["get", "post", "put", "delete"]
 22 | const Encs = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]
 23 | const Bool = ["true", "false"]
 24 | 
 25 | const S: TagSpec = {} // Empty tag spec
 26 | 
 27 | const Tags: Record<string, TagSpec> = {
 28 |   a: {
 29 |     attrs: {
 30 |       href: null, ping: null, type: null,
 31 |       media: null,
 32 |       target: Targets,
 33 |       hreflang: null
 34 |     }
 35 |   },
 36 |   abbr: S,
 37 |   address: S,
 38 |   area: {
 39 |     attrs: {
 40 |       alt: null, coords: null, href: null, target: null, ping: null,
 41 |       media: null, hreflang: null, type: null,
 42 |       shape: ["default", "rect", "circle", "poly"]
 43 |     }
 44 |   },
 45 |   article: S,
 46 |   aside: S,
 47 |   audio: {
 48 |     attrs: {
 49 |       src: null, mediagroup: null,
 50 |       crossorigin: ["anonymous", "use-credentials"],
 51 |       preload: ["none", "metadata", "auto"],
 52 |       autoplay: ["autoplay"],
 53 |       loop: ["loop"],
 54 |       controls: ["controls"]
 55 |     }
 56 |   },
 57 |   b: S,
 58 |   base: { attrs: { href: null, target: Targets } },
 59 |   bdi: S,
 60 |   bdo: S,
 61 |   blockquote: { attrs: { cite: null } },
 62 |   body: S,
 63 |   br: S,
 64 |   button: {
 65 |     attrs: {
 66 |       form: null, formaction: null, name: null, value: null,
 67 |       autofocus: ["autofocus"],
 68 |       disabled: ["autofocus"],
 69 |       formenctype: Encs,
 70 |       formmethod: Methods,
 71 |       formnovalidate: ["novalidate"],
 72 |       formtarget: Targets,
 73 |       type: ["submit", "reset", "button"]
 74 |     }
 75 |   },
 76 |   canvas: { attrs: { width: null, height: null } },
 77 |   caption: S,
 78 |   center: S,
 79 |   cite: S,
 80 |   code: S,
 81 |   col: { attrs: { span: null } },
 82 |   colgroup: { attrs: { span: null } },
 83 |   command: {
 84 |     attrs: {
 85 |       type: ["command", "checkbox", "radio"],
 86 |       label: null, icon: null, radiogroup: null, command: null, title: null,
 87 |       disabled: ["disabled"],
 88 |       checked: ["checked"]
 89 |     }
 90 |   },
 91 |   data: { attrs: { value: null } },
 92 |   datagrid: { attrs: { disabled: ["disabled"], multiple: ["multiple"] } },
 93 |   datalist: { attrs: { data: null } },
 94 |   dd: S,
 95 |   del: { attrs: { cite: null, datetime: null } },
 96 |   details: { attrs: { open: ["open"] } },
 97 |   dfn: S,
 98 |   div: S,
 99 |   dl: S,
100 |   dt: S,
101 |   em: S,
102 |   embed: { attrs: { src: null, type: null, width: null, height: null } },
103 |   eventsource: { attrs: { src: null } },
104 |   fieldset: { attrs: { disabled: ["disabled"], form: null, name: null } },
105 |   figcaption: S,
106 |   figure: S,
107 |   footer: S,
108 |   form: {
109 |     attrs: {
110 |       action: null, name: null,
111 |       "accept-charset": Charsets,
112 |       autocomplete: ["on", "off"],
113 |       enctype: Encs,
114 |       method: Methods,
115 |       novalidate: ["novalidate"],
116 |       target: Targets
117 |     }
118 |   },
119 |   h1: S, h2: S, h3: S, h4: S, h5: S, h6: S,
120 |   head: {
121 |     children: ["title", "base", "link", "style", "meta", "script", "noscript", "command"]
122 |   },
123 |   header: S,
124 |   hgroup: S,
125 |   hr: S,
126 |   html: {
127 |     attrs: { manifest: null }
128 |   },
129 |   i: S,
130 |   iframe: {
131 |     attrs: {
132 |       src: null, srcdoc: null, name: null, width: null, height: null,
133 |       sandbox: ["allow-top-navigation", "allow-same-origin", "allow-forms", "allow-scripts"],
134 |       seamless: ["seamless"]
135 |     }
136 |   },
137 |   img: {
138 |     attrs: {
139 |       alt: null, src: null, ismap: null, usemap: null, width: null, height: null,
140 |       crossorigin: ["anonymous", "use-credentials"]
141 |     }
142 |   },
143 |   input: {
144 |     attrs: {
145 |       alt: null, dirname: null, form: null, formaction: null,
146 |       height: null, list: null, max: null, maxlength: null, min: null,
147 |       name: null, pattern: null, placeholder: null, size: null, src: null,
148 |       step: null, value: null, width: null,
149 |       accept: ["audio/*", "video/*", "image/*"],
150 |       autocomplete: ["on", "off"],
151 |       autofocus: ["autofocus"],
152 |       checked: ["checked"],
153 |       disabled: ["disabled"],
154 |       formenctype: Encs,
155 |       formmethod: Methods,
156 |       formnovalidate: ["novalidate"],
157 |       formtarget: Targets,
158 |       multiple: ["multiple"],
159 |       readonly: ["readonly"],
160 |       required: ["required"],
161 |       type: ["hidden", "text", "search", "tel", "url", "email", "password", "datetime", "date", "month",
162 |              "week", "time", "datetime-local", "number", "range", "color", "checkbox", "radio",
163 |              "file", "submit", "image", "reset", "button"]
164 |     }
165 |   },
166 |   ins: { attrs: { cite: null, datetime: null } },
167 |   kbd: S,
168 |   keygen: {
169 |     attrs: {
170 |       challenge: null, form: null, name: null,
171 |       autofocus: ["autofocus"],
172 |       disabled: ["disabled"],
173 |       keytype: ["RSA"]
174 |     }
175 |   },
176 |   label: { attrs: { for: null, form: null } },
177 |   legend: S,
178 |   li: { attrs: { value: null } },
179 |   link: {
180 |     attrs: {
181 |       href: null, type: null,
182 |       hreflang: null,
183 |       media: null,
184 |       sizes: ["all", "16x16", "16x16 32x32", "16x16 32x32 64x64"]
185 |     }
186 |   },
187 |   map: { attrs: { name: null } },
188 |   mark: S,
189 |   menu: { attrs: { label: null, type: ["list", "context", "toolbar"] } },
190 |   meta: {
191 |     attrs: {
192 |       content: null,
193 |       charset: Charsets,
194 |       name: ["viewport", "application-name", "author", "description", "generator", "keywords"],
195 |       "http-equiv": ["content-language", "content-type", "default-style", "refresh"]
196 |     }
197 |   },
198 |   meter: { attrs: { value: null, min: null, low: null, high: null, max: null, optimum: null } },
199 |   nav: S,
200 |   noscript: S,
201 |   object: {
202 |     attrs: {
203 |       data: null, type: null, name: null, usemap: null, form: null, width: null, height: null,
204 |       typemustmatch: ["typemustmatch"]
205 |     }
206 |   },
207 |   ol: { attrs: { reversed: ["reversed"], start: null, type: ["1", "a", "A", "i", "I"] },
208 |         children: ["li", "script", "template", "ul", "ol"] },
209 |   optgroup: { attrs: { disabled: ["disabled"], label: null } },
210 |   option: { attrs: { disabled: ["disabled"], label: null, selected: ["selected"], value: null } },
211 |   output: { attrs: { for: null, form: null, name: null } },
212 |   p: S,
213 |   param: { attrs: { name: null, value: null } },
214 |   pre: S,
215 |   progress: { attrs: { value: null, max: null } },
216 |   q: { attrs: { cite: null } },
217 |   rp: S,
218 |   rt: S,
219 |   ruby: S,
220 |   samp: S,
221 |   script: {
222 |     attrs: {
223 |       type: ["text/javascript"],
224 |       src: null,
225 |       async: ["async"],
226 |       defer: ["defer"],
227 |       charset: Charsets
228 |     }
229 |   },
230 |   section: S,
231 |   select: {
232 |     attrs: {
233 |       form: null, name: null, size: null,
234 |       autofocus: ["autofocus"],
235 |       disabled: ["disabled"],
236 |       multiple: ["multiple"]
237 |     }
238 |   },
239 |   slot: {attrs: { name: null }},
240 |   small: S,
241 |   source: { attrs: { src: null, type: null, media: null } },
242 |   span: S,
243 |   strong: S,
244 |   style: {
245 |     attrs: {
246 |       type: ["text/css"],
247 |       media: null,
248 |       scoped: null
249 |     }
250 |   },
251 |   sub: S,
252 |   summary: S,
253 |   sup: S,
254 |   table: S,
255 |   tbody: S,
256 |   td: { attrs: { colspan: null, rowspan: null, headers: null } },
257 |   template: S,
258 |   textarea: {
259 |     attrs: {
260 |       dirname: null, form: null, maxlength: null, name: null, placeholder: null,
261 |       rows: null, cols: null,
262 |       autofocus: ["autofocus"],
263 |       disabled: ["disabled"],
264 |       readonly: ["readonly"],
265 |       required: ["required"],
266 |       wrap: ["soft", "hard"]
267 |     }
268 |   },
269 |   tfoot: S,
270 |   th: { attrs: { colspan: null, rowspan: null, headers: null, scope: ["row", "col", "rowgroup", "colgroup"] } },
271 |   thead: S,
272 |   time: { attrs: { datetime: null } },
273 |   title: S,
274 |   tr: S,
275 |   track: {
276 |     attrs: {
277 |       src: null, label: null, default: null,
278 |       kind: ["subtitles", "captions", "descriptions", "chapters", "metadata"],
279 |       srclang: null
280 |     }
281 |   },
282 |   ul: { children: ["li", "script", "template", "ul", "ol"] },
283 |   var: S,
284 |   video: {
285 |     attrs: {
286 |       src: null, poster: null, width: null, height: null,
287 |       crossorigin: ["anonymous", "use-credentials"],
288 |       preload: ["auto", "metadata", "none"],
289 |       autoplay: ["autoplay"],
290 |       mediagroup: ["movie"],
291 |       muted: ["muted"],
292 |       controls: ["controls"]
293 |     }
294 |   },
295 |   wbr: S
296 | }
297 | 
298 | const GlobalAttrs: Record<string, null | readonly string[]> = {
299 |   accesskey: null,
300 |   class: null,
301 |   contenteditable: Bool,
302 |   contextmenu: null,
303 |   dir: ["ltr", "rtl", "auto"],
304 |   draggable: ["true", "false", "auto"],
305 |   dropzone: ["copy", "move", "link", "string:", "file:"],
306 |   hidden: ["hidden"],
307 |   id: null,
308 |   inert: ["inert"],
309 |   itemid: null,
310 |   itemprop: null,
311 |   itemref: null,
312 |   itemscope: ["itemscope"],
313 |   itemtype: null,
314 |   lang: ["ar", "bn", "de", "en-GB", "en-US", "es", "fr", "hi", "id", "ja", "pa", "pt", "ru", "tr", "zh"],
315 |   spellcheck: Bool,
316 |   autocorrect: Bool,
317 |   autocapitalize: Bool,
318 |   style: null,
319 |   tabindex: null,
320 |   title: null,
321 |   translate: ["yes", "no"],
322 |   rel: ["stylesheet", "alternate", "author", "bookmark", "help", "license", "next", "nofollow", "noreferrer", "prefetch", "prev", "search", "tag"],
323 |   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(" "),
324 |   "aria-activedescendant": null,
325 |   "aria-atomic": Bool,
326 |   "aria-autocomplete": ["inline", "list", "both", "none"],
327 |   "aria-busy": Bool,
328 |   "aria-checked": ["true", "false", "mixed", "undefined"],
329 |   "aria-controls": null,
330 |   "aria-describedby": null,
331 |   "aria-disabled": Bool,
332 |   "aria-dropeffect": null,
333 |   "aria-expanded": ["true", "false", "undefined"],
334 |   "aria-flowto": null,
335 |   "aria-grabbed": ["true", "false", "undefined"],
336 |   "aria-haspopup": Bool,
337 |   "aria-hidden": Bool,
338 |   "aria-invalid": ["true", "false", "grammar", "spelling"],
339 |   "aria-label": null,
340 |   "aria-labelledby": null,
341 |   "aria-level": null,
342 |   "aria-live": ["off", "polite", "assertive"],
343 |   "aria-multiline": Bool,
344 |   "aria-multiselectable": Bool,
345 |   "aria-owns": null,
346 |   "aria-posinset": null,
347 |   "aria-pressed": ["true", "false", "mixed", "undefined"],
348 |   "aria-readonly": Bool,
349 |   "aria-relevant": null,
350 |   "aria-required": Bool,
351 |   "aria-selected": ["true", "false", "undefined"],
352 |   "aria-setsize": null,
353 |   "aria-sort": ["ascending", "descending", "none", "other"],
354 |   "aria-valuemax": null,
355 |   "aria-valuemin": null,
356 |   "aria-valuenow": null,
357 |   "aria-valuetext": null
358 | }
359 | 
360 | export const eventAttributes = (
361 |   "beforeunload copy cut dragstart dragover dragleave dragenter dragend " +
362 |   "drag paste focus blur change click load mousedown mouseenter mouseleave " +
363 |   "mouseup keydown keyup resize scroll unload"
364 | ).split(" ").map(n => "on" + n)
365 | for (let a of eventAttributes) GlobalAttrs[a] = null
366 | 
367 | export class Schema {
368 |   tags: Record<string, TagSpec>
369 |   globalAttrs: Record<string, null | readonly string[]>
370 |   allTags: readonly string[]
371 |   globalAttrNames: readonly string[]
372 | 
373 |   constructor(extraTags?: Record<string, TagSpec>, extraAttrs?: Record<string, null | readonly string[]>) {
374 |     this.tags = {...Tags, ...extraTags}
375 |     this.globalAttrs = {...GlobalAttrs, ...extraAttrs}
376 |     this.allTags = Object.keys(this.tags)
377 |     this.globalAttrNames = Object.keys(this.globalAttrs)
378 |   }
379 | 
380 |   static default = new Schema
381 | }
382 | 
383 | export function elementName(doc: Text, tree: SyntaxNode | null | undefined, max = doc.length) {
384 |   if (!tree) return ""
385 |   let tag = tree.firstChild
386 |   let name = tag && tag.getChild("TagName")
387 |   return name ? doc.sliceString(name.from, Math.min(name.to, max)) : ""
388 | }
389 | 
390 | function findParentElement(tree: SyntaxNode | null, skip = false) {
391 |   for (; tree; tree = tree.parent) if (tree.name == "Element") {
392 |     if (skip) skip = false
393 |     else return tree
394 |   }
395 |   return null
396 | }
397 | 
398 | function allowedChildren(doc: Text, tree: SyntaxNode | null, schema: Schema) {
399 |   let parentInfo = schema.tags[elementName(doc, findParentElement(tree))]
400 |   return parentInfo?.children || schema.allTags
401 | }
402 | 
403 | function openTags(doc: Text, tree: SyntaxNode) {
404 |   let open = []
405 |   for (let parent: SyntaxNode | null = findParentElement(tree); parent && !parent.type.isTop;
406 |        parent = findParentElement(parent.parent)) {
407 |     let tagName = elementName(doc, parent)
408 |     if (tagName && parent.lastChild!.name == "CloseTag") break
409 |     if (tagName && open.indexOf(tagName) < 0 && (tree.name == "EndTag" || tree.from >= parent.firstChild!.to))
410 |       open.push(tagName)
411 |   }
412 |   return open
413 | }
414 | 
415 | const identifier = /^[:\-\.\w\u00b7-\uffff]*$/
416 | 
417 | function completeTag(state: EditorState, schema: Schema, tree: SyntaxNode, from: number, to: number) {
418 |   let end = /\s*>/.test(state.sliceDoc(to, to + 5)) ? "" : ">"
419 |   let parent = findParentElement(tree, true)
420 |   return {from, to,
421 |           options: allowedChildren(state.doc, parent, schema).map(tagName => ({label: tagName, type: "type"})).concat(
422 |             openTags(state.doc, tree).map((tag, i) => ({label: "/" + tag, apply: "/" + tag + end,
423 |                                                         type: "type", boost: 99 - i}))),
424 |           validFor: /^\/?[:\-\.\w\u00b7-\uffff]*$/}
425 | }
426 | 
427 | function completeCloseTag(state: EditorState, tree: SyntaxNode, from: number, to: number) {
428 |   let end = /\s*>/.test(state.sliceDoc(to, to + 5)) ? "" : ">"
429 |   return {from, to,
430 |           options: openTags(state.doc, tree).map((tag, i) => ({label: tag, apply: tag + end, type: "type", boost: 99 - i})),
431 |           validFor: identifier}
432 | }
433 | 
434 | function completeStartTag(state: EditorState, schema: Schema, tree: SyntaxNode, pos: number) {
435 |   let options = [], level = 0
436 |   for (let tagName of allowedChildren(state.doc, tree, schema))
437 |     options.push({label: "<" + tagName, type: "type"})
438 |   for (let open of openTags(state.doc, tree))
439 |     options.push({label: "</" + open + ">", type: "type", boost: 99 - level++})
440 |   return {from: pos, to: pos, options, validFor: /^<\/?[:\-\.\w\u00b7-\uffff]*$/}
441 | }
442 | 
443 | function completeAttrName(state: EditorState, schema: Schema, tree: SyntaxNode, from: number, to: number) {
444 |   let elt = findParentElement(tree), info = elt ? schema.tags[elementName(state.doc, elt)] : null
445 |   let localAttrs = info && info.attrs ? Object.keys(info.attrs) : []
446 |   let names = info && info.globalAttrs === false ? localAttrs
447 |     : localAttrs.length ? localAttrs.concat(schema.globalAttrNames) : schema.globalAttrNames
448 |   return {from, to,
449 |           options: names.map(attrName => ({label: attrName, type: "property"})),
450 |           validFor: identifier}
451 | }
452 | 
453 | function completeAttrValue(state: EditorState, schema: Schema, tree: SyntaxNode, from: number, to: number) {
454 |   let nameNode = tree.parent?.getChild("AttributeName")
455 |   let options = [], token = undefined
456 |   if (nameNode) {
457 |     let attrName = state.sliceDoc(nameNode.from, nameNode.to)
458 |     let attrs: readonly string[] | null | undefined = schema.globalAttrs[attrName]
459 |     if (!attrs) {
460 |       let elt = findParentElement(tree), info = elt ? schema.tags[elementName(state.doc, elt)] : null
461 |       attrs = info?.attrs && info.attrs[attrName]
462 |     }
463 |     if (attrs) {
464 |       let base = state.sliceDoc(from, to).toLowerCase(), quoteStart = '"', quoteEnd = '"'
465 |       if (/^['"]/.test(base)) {
466 |         token = base[0] == '"' ? /^[^"]*$/ : /^[^']*$/
467 |         quoteStart = ""
468 |         quoteEnd = state.sliceDoc(to, to + 1) == base[0] ? "" : base[0]
469 |         base = base.slice(1)
470 |         from++
471 |       } else {
472 |         token = /^[^\s<>='"]*$/
473 |       }
474 |       for (let value of attrs)
475 |         options.push({label: value, apply: quoteStart + value + quoteEnd, type: "constant"})
476 |     }
477 |   }
478 |   return {from, to, options, validFor: token}
479 | }
480 | 
481 | function htmlCompletionFor(schema: Schema, context: CompletionContext): CompletionResult | null {
482 |   let {state, pos} = context, tree = syntaxTree(state).resolveInner(pos, -1), around = tree.resolve(pos)
483 |   for (let scan = pos, before; around == tree && (before = tree.childBefore(scan));) {
484 |     let last = before.lastChild
485 |     if (!last || !last.type.isError || last.from < last.to) break
486 |     around = tree = before
487 |     scan = last.from
488 |   }
489 |   if (tree.name == "TagName") {
490 |     return tree.parent && /CloseTag$/.test(tree.parent.name) ? completeCloseTag(state, tree, tree.from, pos)
491 |       : completeTag(state, schema, tree, tree.from, pos)
492 |   } else if (tree.name == "StartTag") {
493 |     return completeTag(state, schema, tree, pos, pos)
494 |   } else if (tree.name == "StartCloseTag" || tree.name == "IncompleteCloseTag") {
495 |     return completeCloseTag(state, tree, pos, pos)
496 |   } else if (tree.name == "OpenTag" || tree.name == "SelfClosingTag" || tree.name == "AttributeName") {
497 |     return completeAttrName(state, schema, tree, tree.name == "AttributeName" ? tree.from : pos, pos)
498 |   } else if (tree.name == "Is" || tree.name == "AttributeValue" || tree.name == "UnquotedAttributeValue") {
499 |     return completeAttrValue(state, schema, tree, tree.name == "Is" ? pos : tree.from, pos)
500 |   } else if (context.explicit && (around.name == "Element" || around.name == "Text" || around.name == "Document")) {
501 |     return completeStartTag(state, schema, tree, pos)
502 |   } else {
503 |     return null
504 |   }
505 | }
506 | 
507 | /// HTML tag completion. Opens and closes tags and attributes in a
508 | /// context-aware way.
509 | export function htmlCompletionSource(context: CompletionContext) {
510 |   return htmlCompletionFor(Schema.default, context)
511 | }
512 | 
513 | /// Create a completion source for HTML extended with additional tags
514 | /// or attributes.
515 | export function htmlCompletionSourceWith(config: {
516 |   /// Define extra tag names to complete.
517 |   extraTags?: Record<string, TagSpec>,
518 |   /// Add global attributes that are available on all tags.
519 |   extraGlobalAttributes?: Record<string, null | readonly string[]>
520 | }) {
521 |   let {extraTags, extraGlobalAttributes: extraAttrs} = config
522 |   let schema = extraAttrs || extraTags ? new Schema(extraTags, extraAttrs) : Schema.default
523 |   return (context: CompletionContext) => htmlCompletionFor(schema, context)
524 | }
525 | 


--------------------------------------------------------------------------------
/src/html.ts:
--------------------------------------------------------------------------------
  1 | import {parser, configureNesting} from "@lezer/html"
  2 | import {Parser} from "@lezer/common"
  3 | import {cssLanguage, css} from "@codemirror/lang-css"
  4 | import {javascriptLanguage, typescriptLanguage, jsxLanguage, tsxLanguage, javascript} from "@codemirror/lang-javascript"
  5 | import {EditorView} from "@codemirror/view"
  6 | import {EditorSelection} from "@codemirror/state"
  7 | import {LRLanguage, indentNodeProp, foldNodeProp, LanguageSupport, syntaxTree,
  8 |         bracketMatchingHandle} from "@codemirror/language"
  9 | import {elementName, htmlCompletionSourceWith, TagSpec, eventAttributes} from "./complete"
 10 | export {htmlCompletionSource, TagSpec, htmlCompletionSourceWith} from "./complete"
 11 | 
 12 | type NestedLang = {
 13 |   tag: string,
 14 |   attrs?: (attrs: {[attr: string]: string}) => boolean,
 15 |   parser: Parser
 16 | }
 17 | 
 18 | const jsonParser = javascriptLanguage.parser.configure({top: "SingleExpression"})
 19 | 
 20 | const defaultNesting: NestedLang[] = [
 21 |   {tag: "script",
 22 |    attrs: attrs => attrs.type == "text/typescript" || attrs.lang == "ts",
 23 |    parser: typescriptLanguage.parser},
 24 |   {tag: "script",
 25 |    attrs: attrs => attrs.type == "text/babel" || attrs.type == "text/jsx",
 26 |    parser: jsxLanguage.parser},
 27 |   {tag: "script",
 28 |    attrs: attrs => attrs.type == "text/typescript-jsx",
 29 |    parser: tsxLanguage.parser},
 30 |   {tag: "script",
 31 |    attrs(attrs) {
 32 |      return /^(importmap|speculationrules|application\/(.+\+)?json)$/i.test(attrs.type)
 33 |    },
 34 |    parser: jsonParser},
 35 |   {tag: "script",
 36 |    attrs(attrs) {
 37 |      return !attrs.type || /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i.test(attrs.type)
 38 |    },
 39 |    parser: javascriptLanguage.parser},
 40 |   {tag: "style",
 41 |    attrs(attrs) {
 42 |      return (!attrs.lang || attrs.lang == "css") && (!attrs.type || /^(text\/)?(x-)?(stylesheet|css)$/i.test(attrs.type))
 43 |    },
 44 |    parser: cssLanguage.parser}
 45 | ]
 46 | 
 47 | type NestedAttr = {
 48 |   name: string,
 49 |   tagName?: string,
 50 |   parser: Parser
 51 | }
 52 | 
 53 | const defaultAttrs: NestedAttr[] = [
 54 |   {name: "style",
 55 |    parser: cssLanguage.parser.configure({top: "Styles"})}
 56 | ].concat(eventAttributes.map(name => ({name, parser: javascriptLanguage.parser})))
 57 | 
 58 | const htmlPlain = LRLanguage.define({
 59 |   name: "html",
 60 |   parser: parser.configure({
 61 |     props: [
 62 |       indentNodeProp.add({
 63 |         Element(context) {
 64 |           let after = /^(\s*)(<\/)?/.exec(context.textAfter)!
 65 |           if (context.node.to <= context.pos + after[0].length) return context.continue()
 66 |           return context.lineIndent(context.node.from) + (after[2] ? 0 : context.unit)
 67 |         },
 68 |         "OpenTag CloseTag SelfClosingTag"(context) {
 69 |           return context.column(context.node.from) + context.unit
 70 |         },
 71 |         Document(context) {
 72 |           if (context.pos + /\s*/.exec(context.textAfter)![0].length < context.node.to)
 73 |             return context.continue()
 74 |           let endElt = null, close
 75 |           for (let cur = context.node;;) {
 76 |             let last = cur.lastChild
 77 |             if (!last || last.name != "Element" || last.to != cur.to) break
 78 |             endElt = cur = last
 79 |           }
 80 |           if (endElt && !((close = endElt.lastChild) && (close.name == "CloseTag" || close.name == "SelfClosingTag")))
 81 |             return context.lineIndent(endElt.from) + context.unit
 82 |           return null
 83 |         }
 84 |       }),
 85 |       foldNodeProp.add({
 86 |         Element(node) {
 87 |           let first = node.firstChild, last = node.lastChild!
 88 |           if (!first || first.name != "OpenTag") return null
 89 |           return {from: first.to, to: last.name == "CloseTag" ? last.from : node.to}
 90 |         }
 91 |       }),
 92 |       bracketMatchingHandle.add({
 93 |         "OpenTag CloseTag": node => node.getChild("TagName")
 94 |       })
 95 |     ]
 96 |   }),
 97 |   languageData: {
 98 |     commentTokens: {block: {open: "<!--", close: "-->"}},
 99 |     indentOnInput: /^\s*<\/\w+\W$/,
100 |     wordChars: "-._"
101 |   }
102 | })
103 | 
104 | /// A language provider based on the [Lezer HTML
105 | /// parser](https://github.com/lezer-parser/html), extended with the
106 | /// JavaScript and CSS parsers to parse the content of `<script>` and
107 | /// `<style>` tags.
108 | export const htmlLanguage = htmlPlain.configure({
109 |   wrap: configureNesting(defaultNesting, defaultAttrs)
110 | })
111 | 
112 | /// Language support for HTML, including
113 | /// [`htmlCompletion`](#lang-html.htmlCompletion) and JavaScript and
114 | /// CSS support extensions.
115 | export function html(config: {
116 |   /// By default, the syntax tree will highlight mismatched closing
117 |   /// tags. Set this to `false` to turn that off (for example when you
118 |   /// expect to only be parsing a fragment of HTML text, not a full
119 |   /// document).
120 |   matchClosingTags?: boolean,
121 |   /// By default, the parser does not allow arbitrary self-closing tags.
122 |   /// Set this to `true` to turn on support for `/>` self-closing tag
123 |   /// syntax.
124 |   selfClosingTags?: boolean,
125 |   /// Determines whether [`autoCloseTags`](#lang-html.autoCloseTags)
126 |   /// is included in the support extensions. Defaults to true.
127 |   autoCloseTags?: boolean,
128 |   /// Add additional tags that can be completed.
129 |   extraTags?: Record<string, TagSpec>,
130 |   /// Add additional completable attributes to all tags.
131 |   extraGlobalAttributes?: Record<string, null | readonly string[]>,
132 |   /// Register additional languages to parse the content of specific
133 |   /// tags. If given, `attrs` should be a function that, given an
134 |   /// object representing the tag's attributes, returns `true` if this
135 |   /// language applies.
136 |   nestedLanguages?: NestedLang[]
137 |   /// Register additional languages to parse attribute values with.
138 |   nestedAttributes?: NestedAttr[]
139 | } = {}) {
140 |   let dialect = "", wrap
141 |   if (config.matchClosingTags === false) dialect = "noMatch"
142 |   if (config.selfClosingTags === true) dialect = (dialect ? dialect + " " : "") + "selfClosing"
143 |   if (config.nestedLanguages && config.nestedLanguages.length ||
144 |       config.nestedAttributes && config.nestedAttributes.length)
145 |     wrap = configureNesting((config.nestedLanguages || []).concat(defaultNesting),
146 |                             (config.nestedAttributes || []).concat(defaultAttrs))
147 |   let lang = wrap ? htmlPlain.configure({wrap, dialect}) : dialect ? htmlLanguage.configure({dialect}) : htmlLanguage
148 |   return new LanguageSupport(lang, [
149 |     htmlLanguage.data.of({autocomplete: htmlCompletionSourceWith(config)}),
150 |     config.autoCloseTags !== false ? autoCloseTags : [],
151 |     javascript().support,
152 |     css().support
153 |   ])
154 | }
155 | 
156 | const selfClosers = new Set(
157 |   "area base br col command embed frame hr img input keygen link meta param source track wbr menuitem".split(" "))
158 | 
159 | /// Extension that will automatically insert close tags when a `>` or
160 | /// `/` is typed.
161 | export const autoCloseTags = EditorView.inputHandler.of((view, from, to, text, insertTransaction) => {
162 |   if (view.composing || view.state.readOnly || from != to || (text != ">" && text != "/") ||
163 |       !htmlLanguage.isActiveAt(view.state, from, -1)) return false
164 |   let base = insertTransaction(), {state} = base
165 |   let closeTags = state.changeByRange(range => {
166 |     let didType = state.doc.sliceString(range.from - 1, range.to) == text
167 |     let {head} = range, after = syntaxTree(state).resolveInner(head, -1), name
168 |     if (didType && text == ">" && after.name == "EndTag") {
169 |       let tag = after.parent!
170 |       if (tag.parent?.lastChild?.name != "CloseTag" &&
171 |           (name = elementName(state.doc, tag.parent, head)) &&
172 |           !selfClosers.has(name)) {
173 |         let to = head + (state.doc.sliceString(head, head + 1) === ">" ? 1 : 0)
174 |         let insert = `</${name}>`
175 |         return {range, changes: {from: head, to, insert}}
176 |       }
177 |     } else if (didType && text == "/" && after.name == "IncompleteCloseTag") {
178 |       let tag = after.parent!
179 |       if (after.from == head - 2 && tag.lastChild?.name != "CloseTag" &&
180 |           (name = elementName(state.doc, tag, head)) && !selfClosers.has(name)) {
181 |         let to = head + (state.doc.sliceString(head, head + 1) === ">" ? 1 : 0)
182 |         let insert = `${name}>`
183 |         return {
184 |           range: EditorSelection.cursor(head + insert.length, -1),
185 |           changes: {from: head, to, insert}
186 |         }
187 |       }
188 |     }
189 |     return {range}
190 |   })
191 |   if (closeTags.changes.empty) return false
192 |   view.dispatch([
193 |     base,
194 |     state.update(closeTags, {
195 |       userEvent: "input.complete",
196 |       scrollIntoView: true
197 |     })
198 |   ])
199 |   return true
200 | })
201 | 


--------------------------------------------------------------------------------
/test/test-complete.ts:
--------------------------------------------------------------------------------
  1 | import {EditorState} from "@codemirror/state"
  2 | import {CompletionContext, CompletionResult, CompletionSource} from "@codemirror/autocomplete"
  3 | import {html} from "@codemirror/lang-html"
  4 | import ist from "ist"
  5 | 
  6 | function get(doc: string, conf: {explicit?: boolean} = {}) {
  7 |   let cur = doc.indexOf("|")
  8 |   doc = doc.slice(0, cur) + doc.slice(cur + 1)
  9 |   let state = EditorState.create({
 10 |     doc,
 11 |     selection: {anchor: cur},
 12 |     extensions: [html()]
 13 |   })
 14 |   let result = state.languageDataAt<CompletionSource>("autocomplete", cur)[0](new CompletionContext(state, cur, !!conf.explicit))
 15 |   return result as CompletionResult | null
 16 | }
 17 | 
 18 | describe("HTML completion", () => {
 19 |   it("completes tag names", () => {
 20 |     let c = get("<|")!.options
 21 |     ist(c.length, 100, ">")
 22 |     ist(!c.some(o => /\W/.test(o.label)))
 23 |   })
 24 | 
 25 |   it("doesn't complete from nothing unless explicit", () => {
 26 |     ist(!get("|"))
 27 |   })
 28 | 
 29 |   it("completes at top level", () => {
 30 |     let c = get("|", {explicit: true})!.options
 31 |     ist(c.length, 100, ">")
 32 |     ist(c.every(o => /^<\w+$/.test(o.label) && o.type == "type"))
 33 |   })
 34 | 
 35 |   it("completes inside an element", () => {
 36 |     let c = get("<body>|", {explicit: true})!.options
 37 |     ist(c.length, 100, ">")
 38 |     ist(c.some(o => o.label == "</body>"))
 39 |     ist(c.every(o => /^<(\/body>|\w+)$/.test(o.label)))
 40 |   })
 41 | 
 42 |   it("completes attribute names", () => {
 43 |     let c = get("<body f|")!.options
 44 |     ist(c.length)
 45 |     ist(c.every(o => o.type == "property"))
 46 |   })
 47 | 
 48 |   it("completes attribute names explicitly", () => {
 49 |     let c = get("<body |", {explicit: true})!.options
 50 |     ist(c.length)
 51 |     ist(c.every(o => o.type == "property"))
 52 |   })
 53 | 
 54 |   it("completes attribute values", () => {
 55 |     let c = get("<form method=|")!.options
 56 |     ist(c.map(o => o.label).sort().join(","), "delete,get,post,put")
 57 |   })
 58 | 
 59 |   it("completes the 2nd attribute's values", () => {
 60 |     let c = get("<form lang=en method=|")!.options
 61 |     ist(c.map(o => o.label).sort().join(","), "delete,get,post,put")
 62 |   })
 63 | 
 64 |   it("keeps quotes for attribute values", () => {
 65 |     let c = get('<form method="|')!.options
 66 |     ist(c.map(o => o.apply).sort().join(","), 'delete",get",post",put"')
 67 |   })
 68 | 
 69 |   it("omits already closed quotes", () => {
 70 |     let c = get('<form method="|"')!
 71 |     ist(c.to, 14)
 72 |     ist(c.options.map(o => o.apply).sort().join(","), "delete,get,post,put")
 73 |   })
 74 | 
 75 |   it("can handle single quotes", () => {
 76 |     let c = get("<form method='|'")!
 77 |     ist(c.to, 14)
 78 |     ist(c.options.map(o => o.apply).sort().join(","), "delete,get,post,put")
 79 |   })
 80 | 
 81 |   it("completes close tags", () => {
 82 |     let c = get("<body></|")!.options
 83 |     ist(c.length, 1)
 84 |     ist(c[0].apply, "body>")
 85 |   })
 86 | 
 87 |   it("completes partial close tags", () => {
 88 |     let c = get("<body></b|")!.options
 89 |     ist(c.length, 1)
 90 |     ist(c[0].apply, "body>")
 91 |   })
 92 | 
 93 |   it("only completes close tags that haven't already been closed", () => {
 94 |     let c = get("<html><body><div><p></|</body></html>")!.options
 95 |     ist(c.length, 2)
 96 |     ist(c.map(o => o.apply).join(","), "p>,div>")
 97 |   })
 98 | 
 99 |   it("includes close tag in completion after less-than", () => {
100 |     let c = get("<html><|")!.options
101 |     ist(c.some(o => o.apply == "/html>"))
102 |   })
103 | 
104 |   it("completes allowed children", () => {
105 |     let c = get("<head>|</head>", {explicit: true})!.options
106 |     ist(!c.some(o => /\<div/.test(o.label)))
107 |   })
108 | 
109 |   it("completes allowed children after unfinished opening tag", () => {
110 |     let c = get("<head><|</head>")!.options
111 |     ist(!c.some(o => /^div/.test(o.label)))
112 |   })
113 | })
114 | 


--------------------------------------------------------------------------------