@adecore/editor-core 0.22.1 → 0.23.0

package/src/document.ts

@@ -1,8 +1,9 @@
+import { scriptSource } from './script-source.ts';
 import { CloserTracker } from './closer-tracker.ts';
 import { planBlockComment, planLineComments } from './comments.ts';
 import { planEnter } from './enter.ts';
 import { planAutoIndent, planJoinLines, planToggleCase, properIndent, spacingBetween } from './line-commands.ts';
-import { mapOffset } from './offsets.ts';
+import { mapOffset, offsetMapper } from './offsets.ts';
 import { planPaste } from './paste.ts';
 import type { EnterOptions, EnterPlan } from './enter.ts';
 import type { EditPlan, EditSource } from './edit-source.ts';
@@ -15,9 +16,9 @@ import { isQuote, replacesComparison, surround, swapQuotes } from './typing-hand
 import { scanBrackets } from './brackets.ts';
 import type { BracketIndex } from './brackets.ts';
 import { hasSmartSemicolon, isPhp } from './lexical.ts';
-import { clampInteger, TextRope } from './rope.ts';
+import { clampInteger, TextRope, ROPE_CHUNK_SIZE } from './rope.ts';
 import type { DocumentLine } from './rope.ts';
-import { findMatches, replacementText, splitsSurrogate } from './search.ts';
+import { findMatches, findMatchFrom, replacementText, splitsSurrogate } from './search.ts';
 import type { FindMatch, FindNextOptions, FindOptions } from './search.ts';
 import { dedupeFoldingRanges, deriveFoldingRanges, indentationColumn, scanStructure, tabWidth } from './structure.ts';
 import type { FoldingOptions, FoldingRange, StructureRange } from './structure.ts';
@@ -45,6 +46,8 @@ export interface OffsetRange {
 }
 
 export interface DocumentEditOptions extends EditOptions {
+    /* Positions in the resulting text, committed with the edit and its undo state. */
+    selectionPositions?: readonly { readonly anchor: Position; readonly head: Position }[];
     /* The edit is refused, with nothing changed, unless the document is still at this revision. */
     expectedRevision?: number;
 }
@@ -379,6 +382,7 @@ export class DocumentModel {
     occurrencesExhausted = false;
     private closers = new CloserTracker();
     private bracketCache?: { revision: number; language: string; index: BracketIndex };
+    private scriptCache?: { revision: number; sources: Map<number, { limit: number; text?: string; index?: BracketIndex }> };
 
     constructor(text = '') {
         this.rope = TextRope.from(text);
@@ -481,23 +485,33 @@ export class DocumentModel {
         }
         const unique = this.validateEdits(edits);
         const changed = unique.filter((edit) => changesText(this.rope, edit));
-        let next = this.rope;
-        for (let index = changed.length - 1; index >= 0; index--) {
-            const edit = changed[index]!;
-            next = next.replace(edit.from, edit.to, edit.text);
+        // Sparse edits keep structural sharing; dense edits avoid rescanning a leaf for each replacement.
+        const rebuild = changed.length >= 256 && changed.length * ROPE_CHUNK_SIZE >= this.rope.length;
+        let next = rebuild ? this.rope.rebuild(changed) : this.rope;
+        if (!rebuild) {
+            for (let index = changed.length - 1; index >= 0; index--) {
+                const edit = changed[index]!;
+                next = next.replace(edit.from, edit.to, edit.text);
+            }
         }
-        const nextSelections =
-            options.selections ??
-            this.selections.map((selection) => ({ anchor: mapOffset(selection.anchor, unique), head: mapOffset(selection.head, unique) }));
+        const map = offsetMapper(unique);
+        const at = (position: Position): number => {
+            const line = next.lineBounds(position.line);
+            return offsetIn(next, line.start + clampInteger(position.column, line.end - line.start));
+        };
         // Several edits can cancel each other out, like moving a character and moving it back.
         const unchanged =
             next === this.rope || (changed.length > 1 && next.length === this.rope.length && next.equalsRange(this.rope, changed[0]!.from, changed.at(-1)!.to));
         if (unchanged) {
             if (options.selections) {
-                this.setSelections(nextSelections);
+                this.setSelections(options.selections);
             }
             return false;
         }
+        const nextSelections =
+            options.selections ??
+            options.selectionPositions?.map((selection) => ({ anchor: at(selection.anchor), head: at(selection.head) })) ??
+            this.selections.map((selection) => ({ anchor: map(selection.anchor), head: map(selection.head) }));
 
         const before = this.state();
         const firstLine = this.rope.lineAt(changed[0]!.from);
@@ -512,13 +526,14 @@ export class DocumentModel {
         const after = this.state();
         const changes = changed.map((edit) => ({ from: edit.from, to: edit.to, insertedLength: edit.text.length }));
         const last = this.undoStack.at(-1);
-        if (
+        const joinsGroup =
             options.historyGroup &&
             this.groupOpen &&
             last?.group === options.historyGroup &&
             last.after.rope === before.rope &&
-            sameSelections(last.after.selections, before.selections)
-        ) {
+            sameSelections(last.after.selections, before.selections);
+        const joinsPrevious = options.joinPrevious === true && last !== undefined && last.after.rope === before.rope;
+        if (last !== undefined && (joinsGroup || joinsPrevious)) {
             last.after = after;
             last.changes.push(changes);
         } else {
@@ -527,9 +542,14 @@ export class DocumentModel {
         if (this.undoStack.length > historyLimit) {
             this.undoStack.shift();
         }
-        this.groupOpen = Boolean(options.historyGroup);
+        this.groupOpen = Boolean(options.historyGroup) && !joinsPrevious;
         this.redoStack = [];
-        this.emit([changes], options.source ?? 'external', () => editsOf(previous, changed));
+        this.emit(
+            [changes],
+            options.source ?? 'external',
+            () => (rebuild ? stretchEdits(previous, next, [changes]) : editsOf(previous, changed)),
+            options.typed
+        );
         return true;
     }
 
@@ -574,11 +594,7 @@ export class DocumentModel {
 
     /* Includes a match that starts at `from`, or ends there when searching backwards. */
     findNext(query: string, from = this.selections.at(-1)!.head, options: FindNextOptions = {}): FindMatch | null {
-        const matches = this.find(query, options);
-        const offset = clampInteger(from, this.rope.length);
-        const ordered = options.backwards ? matches.reverse() : matches;
-        const found = ordered.find((match) => (options.backwards ? match.to <= offset : match.from >= offset));
-        return found ?? (options.wrap === false ? null : (ordered[0] ?? null));
+        return findMatchFrom(this.getText(), query, this.revision, from, options);
     }
 
     /* Refuses a match from an earlier revision, or one whose text no longer sits there. */
@@ -604,14 +620,34 @@ export class DocumentModel {
         if (options.expectedRevision !== undefined && options.expectedRevision !== this.revision) {
             return 0;
         }
-        const matches = this.find(query, options);
+        return this.replaceMatches(this.find(query, options), replacement, options);
+    }
+
+    /* Commits retained search results as one undo step; one stale result refuses the entire batch. */
+    replaceMatches(matches: readonly FindMatch[], replacement: string, options: ReplaceOptions = {}): number {
+        const revision = this.revision;
+        if (
+            matches.length === 0 ||
+            (options.expectedRevision !== undefined && options.expectedRevision !== revision) ||
+            matches.some((match) => match.revision !== revision || this.slice(match.from, match.to) !== match.text)
+        ) {
+            return 0;
+        }
+        const ranges = new Set<string>();
+        for (const match of matches) {
+            const key = `${match.from}:${match.to}`;
+            if (ranges.has(key)) {
+                throw new RangeError('Search matches must have unique ranges.');
+            }
+            ranges.add(key);
+        }
         const text = this.getText();
         const edits = matches.map((match) => ({
             from: match.from,
             to: match.to,
             text: replacementText(text, match, replacement, options.literal, options.preserveCase)
         }));
-        return this.applyEdits(edits, { source: 'command', ...options }) ? matches.length : 0;
+        return this.applyEdits(edits, { source: 'command', ...options, expectedRevision: revision }) ? matches.length : 0;
     }
 
     getFoldingRanges(options: FoldingOptions = {}): FoldingRange[] {
@@ -855,10 +891,13 @@ export class DocumentModel {
         const arrow = text === '-' && input.smartArrow && from === to;
         const needsContext = text.length === 1 && (/[()[\]{}'"`<]/.test(text) || (text === ';' && smartSemicolon) || arrow);
         const context = needsContext ? this.typingContext(from, language) : undefined;
-        if (arrow && context?.mode === 'code' && context.word !== 'control-close' && this.endsOperand(from)) {
+        if (arrow && context?.mode === 'code' && context.embedded === undefined && context.word !== 'control-close' && this.endsOperand(from)) {
             return { from, to, text, anchor: 1, head: 1, arrow: true };
         }
-        const insideQuote = context && (context.mode === 'quote' || context.mode === 'template') && context.quote === text && !context.escaped;
+        const insideQuote =
+            context &&
+            (((context.mode === 'quote' || context.mode === 'template') && context.quote === text && !context.escaped) ||
+                (context.mode === 'html' && context.markup === 'value' && context.markupQuote === text));
         if (pairing && from === to && after === text && (quote ? insideQuote : context?.mode === 'code' && context.bracket?.close === text)) {
             return { from, to, text: '', anchor: 1, head: 1, skip: true };
         }
@@ -937,9 +976,13 @@ export class DocumentModel {
     }
 
     private shouldClosePair(offset: number, opener: string, after: string, context: TypingContext | undefined, input: TypingInput): boolean {
+        if (context?.mode === 'html') {
+            return context.markup === 'equals' && (opener === '"' || opener === "'") && (!after || /[\s>/]/u.test(after));
+        }
         const interpolation = this.isInterpolation(offset, opener, context);
         const quote = isQuote(opener);
-        const followedByTerminator = quote ? !identifier.test(after) && after !== opener : !after || /[\s)\]}>,;:]/u.test(after);
+        const scriptEnd = context?.embedded !== undefined && /^<\/script(?=[\s/>]|$)/i.test(this.slice(offset, offset + 9));
+        const followedByTerminator = quote ? !identifier.test(after) && after !== opener : !after || scriptEnd || /[\s)\]}>,;:]/u.test(after);
         if (context?.mode !== 'code' && !interpolation) {
             return false;
         }
@@ -954,7 +997,7 @@ export class DocumentModel {
                 !this.completesTripleQuote(offset, opener, input.language)
             );
         }
-        return !this.hasMatch(offset, opener, input.language);
+        return !this.hasMatch(offset, opener, input.language, context);
     }
 
     /* The third quote of a Python docstring opener is typed as it is, since the pair that came before it is the empty string. */
@@ -963,7 +1006,15 @@ export class DocumentModel {
     }
 
     /* Whether the bracket just typed at `offset` would find its closer in the text that already follows it. */
-    private hasMatch(offset: number, opener: string, language: string): boolean {
+    private hasMatch(offset: number, opener: string, language: string, context?: TypingContext): boolean {
+        if (context?.embedded === 'javascript' && context.embedStart !== undefined) {
+            const source = this.scriptSource(context.embedStart, matchScanLimit).text;
+            if (source === undefined) {
+                return false;
+            }
+            const at = offset - context.embedStart;
+            return scanBrackets(source.slice(0, at) + opener + source.slice(at), 'javascript').pairs.has(at);
+        }
         if (this.rope.length > matchScanLimit) {
             return false;
         }
@@ -1533,7 +1584,7 @@ export class DocumentModel {
         }
         return this.applySelectionEdits(
             plans.map((entry) => ({ from: entry.from, to: entry.to, text: entry.text, anchor: entry.caret, head: entry.caret })),
-            { source: 'command' }
+            { source: 'command', typed: mode === 'enter' }
         );
     }
 
@@ -1595,7 +1646,9 @@ export class DocumentModel {
      * it, which it took from that block. Such a closer sits shallower than the brace's line and leaves an opener before it unmatched.
      */
     private isUnclosedBrace(offset: number, language: string): boolean {
-        const index = this.bracketIndex(language);
+        const context = isPhp(language) ? this.typingContext(offset, language) : undefined;
+        const index =
+            context?.embedded === 'javascript' && context.embedStart !== undefined ? this.scriptBracketIndex(context.embedStart) : this.bracketIndex(language);
         if (index === undefined) {
             return false;
         }
@@ -1610,6 +1663,41 @@ export class DocumentModel {
         return [...index.unmatched].some((at) => at < offset && this.rope.charAt(at) === '{');
     }
 
+    private scriptSource(start: number, limit: number): { limit: number; text?: string; index?: BracketIndex } {
+        if (this.scriptCache?.revision !== this.revision) {
+            this.scriptCache = { revision: this.revision, sources: new Map() };
+        }
+        const cached = this.scriptCache.sources.get(start);
+        if (cached !== undefined && (cached.text !== undefined || cached.limit >= limit)) {
+            return cached.text !== undefined && cached.text.length > limit ? { limit } : cached;
+        }
+        const end = Math.min(this.rope.length, start + limit + 11);
+        let work = bracketScanLimit;
+        const prepared = scriptSource(this.slice(start, end), start, end === this.rope.length, (at) => {
+            const position = this.positionAt(at);
+            work -= position.column + 1;
+            return work < 0 ? null : this.typingContext(at, 'php');
+        });
+        const result = { limit, text: prepared !== undefined && prepared.length <= limit ? prepared : undefined };
+        this.scriptCache.sources.set(start, result);
+        return result;
+    }
+
+    private scriptBracketIndex(start: number): BracketIndex | undefined {
+        const source = this.scriptSource(start, bracketScanLimit);
+        if (source.text === undefined) {
+            return undefined;
+        }
+        if (source.index === undefined) {
+            const index = scanBrackets(source.text, 'javascript');
+            source.index = {
+                pairs: new Map([...index.pairs].map(([from, to]) => [from + start, to + start])),
+                unmatched: new Set([...index.unmatched].map((at) => at + start))
+            };
+        }
+        return source.index;
+    }
+
     /* Undefined for a document too large to scan on every Enter. */
     private bracketIndex(language: string): BracketIndex | undefined {
         if (this.rope.length > bracketScanLimit) {
@@ -1692,6 +1780,10 @@ export class DocumentModel {
             return false;
         }
         const context = this.typingContext(offset - 1, language);
+        if (context.mode === 'html' && context.markup === 'equals' && (opener === '"' || opener === "'")) {
+            const inside = this.typingContext(offset, language);
+            return inside.mode === 'html' && inside.markup === 'value' && inside.markupQuote === opener;
+        }
         return context.mode === 'code' || this.isInterpolation(offset - 1, opener, context);
     }
 
@@ -2126,11 +2218,19 @@ export class DocumentModel {
     }
 
     /* `contentEdits` is worked out when a listener asks, since most listeners never do and a restore of a large text would otherwise read all of it. */
-    private emit(changes?: readonly (readonly DocumentChange[])[], source?: EditorSnapshot['source'], contentEdits?: () => ContentEdit[]): void {
+    private emit(
+        changes?: readonly (readonly DocumentChange[])[],
+        source?: EditorSnapshot['source'],
+        contentEdits?: () => ContentEdit[],
+        typed?: boolean
+    ): void {
         const snapshot = this.getSnapshot();
         if (changes) {
             snapshot.changes = changes.map((transaction) => transaction.map((change) => ({ ...change })));
             snapshot.source = source;
+            if (typed) {
+                snapshot.typed = true;
+            }
             if (contentEdits) {
                 let edits: ContentEdit[] | undefined;
                 Object.defineProperty(snapshot, 'contentEdits', { get: () => (edits ??= contentEdits()), enumerable: true });

package/src/edit-regions.ts

@@ -0,0 +1,96 @@
+import type { EditSource } from './edit-source.ts';
+import { type EditRegion, vueRegionAt } from './languages.ts';
+import { hasJsx, jsxChildren } from './markup-regions.ts';
+
+export type EditRegions = (line: number, offset?: number) => EditRegion | null;
+
+const SCAN_LIMIT = 2_000_000;
+export function phpLiteralAt(source: EditSource, offset: number): boolean {
+    const context = source.context(offset);
+    return context.mode === 'heredoc' || context.mode === 'quote' || (context.embedded !== undefined && context.mode === 'template');
+}
+
+export function phpTagAt(source: EditSource, offset: number): boolean {
+    const context = source.context(offset);
+    return context.mode === 'html' && (context.markup === 'tag' || context.markup === 'equals' || context.markup === 'value');
+}
+
+function firstContent(source: EditSource, line: number): number {
+    const bounds = source.line(line);
+    return bounds.start + bounds.text.length - bounds.text.trimStart().length;
+}
+
+function mixedPhpLine(source: EditSource, line: number): boolean {
+    const bounds = source.line(line);
+    let work = SCAN_LIMIT;
+    for (const match of bounds.text.matchAll(/<\?(?:php\b|=)|\?>/g)) {
+        work -= bounds.text.length + 1;
+        if (work < 0) {
+            return true;
+        }
+        const at = bounds.start + match.index;
+        const context = source.context(at);
+        const { mode, embedded } = context;
+        if (match[0] === '?>') {
+            if (mode !== 'html' && embedded === undefined) {
+                return true;
+            }
+        } else if (mode === 'html' || embedded !== undefined || (mode === 'code' && at === firstContent(source, line))) {
+            return true;
+        }
+    }
+    return false;
+}
+
+export function editRegions(source: EditSource, language: string): EditRegions {
+    const id = language.toLowerCase();
+    const end = source.line(source.lineCount - 1).end;
+    if (id === 'vue') {
+        return (line) => (/^<\/?(?:template|script|style)\b/.test(source.line(line).text) ? 'mixed' : vueRegionAt((index) => source.line(index).text, line));
+    }
+    if (hasJsx(id)) {
+        let children: ((offset: number) => boolean) | undefined;
+        return (line, offset) => {
+            if (end > SCAN_LIMIT) {
+                return null;
+            }
+            children ??= jsxChildren(source.slice(0, end));
+            return children(offset ?? firstContent(source, line)) ? 'jsx' : null;
+        };
+    }
+    if (id === 'php') {
+        return (line, offset) => {
+            const bounds = source.line(line);
+            if (
+                offset === undefined &&
+                (phpLiteralAt(source, bounds.start) ||
+                    phpLiteralAt(source, bounds.end) ||
+                    phpTagAt(source, bounds.start) ||
+                    phpTagAt(source, bounds.end) ||
+                    mixedPhpLine(source, line))
+            ) {
+                return 'mixed';
+            }
+            const at = offset ?? firstContent(source, line);
+            const context = source.context(at);
+            if (phpTagAt(source, at)) {
+                return 'mixed';
+            }
+            if (context.mode !== 'html' && context.embedded === undefined) {
+                return null;
+            }
+            if (context.markup === 'comment' || (offset === undefined && source.context(bounds.end).markup === 'comment')) {
+                return 'mixed';
+            }
+            if (context.markup === 'raw') {
+                const closing = /^<\/(script|style|textarea|title)(?=[\s/>]|$)/i.exec(source.slice(at, at + 11));
+                // The closing tag belongs to markup, while the preceding raw text keeps its syntax.
+                if (closing?.[1]?.toLowerCase() !== context.element) {
+                    return context.element === 'script' || context.element === 'style' ? context.element : 'mixed';
+                }
+            }
+            return 'template';
+        };
+    }
+    return () => null;
+}

package/src/enter.ts

@@ -1,4 +1,5 @@
 import type { EditSource } from './edit-source.ts';
+import { editRegions } from './edit-regions.ts';
 import { commentSyntax } from './languages.ts';
 import { hasHashComments, isBraced, isPhp, openers } from './lexical.ts';
 import { whitespaceOf } from './line-text.ts';
@@ -54,13 +55,14 @@ function escapeForPattern(text: string): string {
  * `if` or `for`, after `else`, `=>` or a binary operator. Languages with braces only.
  */
 export function continues(text: string, context: TypingContext, language: string): boolean {
-    if (!isBraced(language) || context.mode !== 'code') {
+    const effectiveLanguage = context.embedded ?? language;
+    if (!isBraced(effectiveLanguage) || context.mode !== 'code') {
         return false;
     }
     if (context.word === 'control-close' || context.word === 'else' || context.word === 'do') {
         return true;
     }
-    if (isPhp(language) && /(?<!\.)\.$/.test(text)) {
+    if (isPhp(effectiveLanguage) && /(?<!\.)\.$/.test(text)) {
         return true;
     }
     return trailingOperator.test(text);
@@ -149,6 +151,17 @@ class Enter {
         const start = leading.length < before.length ? base : leading;
         const plain = (indent: string): EnterPlan => ({ from, to: afterWhitespace, text: newline + indent, caret: newline.length + indent.length });
 
+        if (context.mode === 'code' || (isPhp(language) && context.mode === 'html')) {
+            const tag = this.openTag(trimmed, index);
+            if (tag) {
+                const inner = start + unit;
+                if (new RegExp(`^</${escapeForPattern(tag)}\\s*>`, 'i').test(source.slice(afterWhitespace, line.end))) {
+                    return { from, to: afterWhitespace, text: newline + inner + newline + start, caret: newline.length + inner.length };
+                }
+                return plain(inner);
+            }
+        }
+
         if (context.mode !== 'code') {
             return plain(leading);
         }
@@ -164,15 +177,6 @@ class Enter {
             return closing ?? plain(inner);
         }
 
-        const tag = this.openTag(trimmed, index);
-        if (tag) {
-            const inner = start + unit;
-            if (new RegExp(`^</${escapeForPattern(tag)}\\s*>`, 'i').test(source.slice(afterWhitespace, line.end))) {
-                return { from, to: afterWhitespace, text: newline + inner + newline + start, caret: newline.length + inner.length };
-            }
-            return plain(inner);
-        }
-
         if (this.opensIndentedBlock(trimmed, context)) {
             return plain(this.blockIndent(line.text, start) + unit);
         }
@@ -210,7 +214,7 @@ class Enter {
     /* The name of the tag the text ends in, when it is an open tag with children to come. */
     private openTag(trimmed: string, index: number): string | null {
         const { language } = this.options;
-        if (!markupLanguages.test(language)) {
+        if (!markupLanguages.test(language) && !isPhp(language)) {
             return null;
         }
         if (/^vue$/i.test(language) && this.source.region(index) === 'script') {
@@ -220,6 +224,14 @@ class Enter {
         if (!match || trimmed.endsWith('/>') || (voidElements.test(match[1]!) && !/^xml$/i.test(language))) {
             return null;
         }
+        if (isPhp(language)) {
+            const offset = this.source.line(index).start + trimmed.indexOf('<', match.index);
+            // Only earlier tags establish this opener's region; its content can be script or style.
+            const regions = editRegions(this.source, language);
+            if (regions(index, offset) !== 'template') {
+                return null;
+            }
+        }
         return match[1]!;
     }
 
@@ -288,7 +300,7 @@ class Enter {
 
     private inString(from: number, context: TypingContext, index: number): EnterPlan | null {
         const { source, options } = this;
-        const operator = concatenation.get(options.language.toLowerCase());
+        const operator = concatenation.get(context.embedded ?? options.language.toLowerCase());
         const quote = context.quote;
         if (operator === undefined || (quote !== '"' && quote !== "'")) {
             return null;

package/src/index.ts

@@ -2,8 +2,9 @@ export { DocumentModel } from './document.ts';
 export type { DocumentEditOptions, DocumentLine, OffsetRange, ReplaceAllOptions, ReplaceOptions, TypeTextOptions } from './document.ts';
 export { scanBrackets, type BracketIndex } from './brackets.ts';
 export { replaceWithCaseRespect } from './preserve-case.ts';
-export { findMatches, replacementText, type FindMatch, type FindNextOptions, type FindOptions } from './search.ts';
+export { findMatches, iterateMatches, findMatchFrom, replacementText, type FindMatch, type FindNextOptions, type FindOptions } from './search.ts';
 export { indentationColumn } from './structure.ts';
+export { findDocComments, MAX_DOC_COMMENTS, type DocComment } from './doc-comments.ts';
 export type { FoldHints, FoldRangeHint, FoldRole, FoldSymbolHint, FoldingOptions, FoldingRange } from './structure.ts';
 export { isHumpBoundary, isWordBoundary, wordBoundary, type WordText } from './words.ts';
 export type {

package/src/languages.ts

@@ -11,6 +11,7 @@ export interface CommentSyntax {
 
 /* The part of a Vue single file component a line sits in. */
 export type VueRegion = 'template' | 'script' | 'style';
+export type EditRegion = VueRegion | 'jsx' | 'mixed';
 
 const slashStar: BlockComment = { open: '/*', close: '*/' };
 const html: BlockComment = { open: '<!--', close: '-->' };
@@ -45,9 +46,15 @@ register('haskell hs', { line: '--', block: { open: '{-', close: '-}' } });
 register('plaintext text txt log', none);
 
 /* An id nothing knows has no comment syntax, which toggling a comment answers by doing nothing. */
-export function commentSyntax(language: string, region?: VueRegion | null): CommentSyntax {
+export function commentSyntax(language: string, region?: EditRegion | null): CommentSyntax {
     const id = language.toLowerCase();
-    if (id === 'vue') {
+    if (region === 'mixed') {
+        return none;
+    }
+    if (region === 'jsx') {
+        return { line: null, block: { open: '{/*', close: '*/}' } };
+    }
+    if (id === 'vue' || (id === 'php' && region !== null && region !== undefined)) {
         if (region === 'script') {
             return cLike;
         }

package/src/markup-regions.ts

@@ -15,14 +15,17 @@ const CLOSERS: Readonly<Record<string, string>> = { '{': '}', '(': ')', '[': ']'
  */
 class JsxScanner {
     readonly ranges: { from: number; to: number }[] = [];
+    readonly children: { from: number; to: number }[] = [];
+    private readonly collectChildren: boolean;
     /* The quoted values of attributes, quotes included. */
     readonly values: { from: number; to: number }[] = [];
     private readonly text: string;
     private depth = 0;
     private budget: number;
 
-    constructor(text: string) {
+    constructor(text: string, collectChildren = false) {
         this.text = text;
+        this.collectChildren = collectChildren;
         this.budget = text.length * 12 + 1_000;
     }
 
@@ -178,15 +181,35 @@ class JsxScanner {
 
     /* An element from its `<`, recorded when no element holds it, and the offset after its closing tag; -1 when it is not one. */
     private element(from: number, outermost: boolean): number {
+        const children = this.children.length;
+        const previousEnd = this.children.at(-1)?.to;
         this.depth++;
         const end = this.parseElement(from);
         this.depth--;
+        if (end < 0) {
+            this.children.length = children;
+            if (previousEnd !== undefined) {
+                this.children[children - 1]!.to = previousEnd;
+            }
+        }
         if (end >= 0 && outermost && this.depth === 0) {
             this.ranges.push({ from, to: end });
         }
         return end;
     }
 
+    private child(from: number, to: number): void {
+        if (!this.collectChildren || from >= to) {
+            return;
+        }
+        const previous = this.children.at(-1);
+        if (previous !== undefined && previous.to === from) {
+            previous.to = to;
+        } else {
+            this.children.push({ from, to });
+        }
+    }
+
     private skipSpace(from: number): number {
         let at = from;
         while (at < this.text.length && /\s/.test(this.text[at]!)) {
@@ -208,6 +231,22 @@ class JsxScanner {
             if (char === undefined || --this.budget < 0) {
                 return -1;
             }
+            if (char === '/' && text[at + 1] === '/') {
+                const end = text.indexOf('\n', at + 2);
+                if (end < 0) {
+                    return -1;
+                }
+                at = end + 1;
+                continue;
+            }
+            if (char === '/' && text[at + 1] === '*') {
+                const end = text.indexOf('*/', at + 2);
+                if (end < 0) {
+                    return -1;
+                }
+                at = end + 2;
+                continue;
+            }
             if (char === '/' && text[at + 1] === '>') {
                 return at + 2;
             }
@@ -253,14 +292,21 @@ class JsxScanner {
             }
         }
         for (;;) {
+            const start = at;
             while (at < text.length && text[at] !== '<' && text[at] !== '{') {
                 at++;
             }
+            this.child(start, text[at] === '<' ? at + 1 : at);
             if (at >= text.length || --this.budget < 0) {
                 return -1;
             }
             if (text[at] === '{') {
+                this.child(at, at + 1);
+                const from = at;
                 at = this.code(at + 1, '}');
+                if (at >= 0 && /^\{\s*\/\*/.test(text.slice(from, from + 20))) {
+                    this.child(from + 1, at);
+                }
             } else if (text[at + 1] === '/') {
                 const closing = /^<\/\s*([\w$.:-]*)\s*>/.exec(text.slice(at, at + 200));
                 return closing !== null && closing[1] === name ? at + closing[0].length : -1;
@@ -301,6 +347,13 @@ function insideAny(ranges: readonly { from: number; to: number }[], offset: numb
     return false;
 }
 
+/* Child text and nested tags use JSX comments; attributes and embedded expressions stay code. */
+export function jsxChildren(text: string): (offset: number) => boolean {
+    const scanner = new JsxScanner(text, true);
+    scanner.scan();
+    return (offset) => insideAny(scanner.children, offset);
+}
+
 /* Whether a language is one whose scripts can hold JSX. */
 export function hasJsx(language: string): boolean {
     return JSX_LANGUAGES.test(language);