@fusion.dev/helix-headless 0.219.0 → 0.221.0

package/dist/code-editor/root/code-editor-root.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, drawIcon, formatWords, HelixFormElement, ListedController, MIRROR_RULE, MixinControllerValue, MixinField, numberConverter, onApple, restoreValue, stopPress, words, } from '@fusion.dev/helix-core';
-import { asterisk, caretDown, caretRight, caretUp, info, magnifyingGlass, textAa, textAUnderline, warning, x, xCircleFill, } from '@fusion.dev/helix-icons';
+import { AriaForwardController, customElement, drawIcon, findPattern, findRanges, formatWords, HelixFormElement, ListedController, MixinControllerValue, MixinField, numberConverter, onApple, restoreValue, stopPress, words, } from '@fusion.dev/helix-core';
+import { info, magnifyingGlass, warning, xCircleFill } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
 import { html } from 'lit/static-html.js';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
 import '../../toolbar/index.js';
 export const diagnosticLines = (value, diagnostics) => {
@@ -53,24 +53,7 @@ export const positionOf = (value, at) => {
         line: before.split('\n').length,
     };
 };
-const patternOf = (query) => {
-    const source = query.regex ? query.search : query.search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    try {
-        return new RegExp(query.wholeWord ? `\\b(?:${source})\\b` : source, query.caseSensitive ? 'gu' : 'giu');
-    }
-    catch {
-        return undefined;
-    }
-};
-export const findRanges = (text, query) => {
-    const pattern = query.search === '' ? undefined : patternOf(query);
-    if (!pattern) {
-        return [];
-    }
-    return [...text.matchAll(pattern)]
-        .filter((match) => match[0] !== '')
-        .map((match) => [match.index, match.index + match[0].length]);
-};
+export { findRanges };
 const LANGUAGE_NAMES = {
     bash: 'Shell',
     css: 'CSS',
@@ -129,15 +112,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         this.wrap = false;
         this.caret = 0;
         this.findOpen = false;
-        this.found = undefined;
-        this.replaceOpen = false;
-        this.query = {
-            caseSensitive: false,
-            regex: false,
-            replace: '',
-            search: '',
-            wholeWord: false,
-        };
         this.escaped = false;
         this.engineEdited = false;
         this.handleViewFocusOut = (event) => {
@@ -147,6 +121,14 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
                 this.announceChange();
             }
         };
+        this.finder = {
+            end: () => this.view?.findEnd?.(),
+            find: (query, direction) => this.findIn(query, direction),
+            replace: (query, all) => this.replaceIn(query, all),
+        };
+        this.handleFindToggle = (event) => {
+            this.findOpen = event.newState === 'open';
+        };
         this.handleKeys = (event) => {
             const mod = onApple() ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
             if (mod && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'f') {
@@ -155,28 +137,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
                 void this.openFind();
             }
         };
-        this.handleFindInput = (event) => {
-            this.query = { ...this.query, search: event.target.value };
-            this.search('first');
-        };
-        this.handleReplaceInput = (event) => {
-            this.query = { ...this.query, replace: event.target.value };
-        };
-        this.handleFindKeys = (event) => {
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                this.closeFind();
-            }
-            else if (event.key === 'Enter') {
-                event.preventDefault();
-                if (event.target.getAttribute('part') === 'replace-field') {
-                    this.replace(event.metaKey || event.ctrlKey);
-                }
-                else {
-                    this.search(event.shiftKey ? 'previous' : 'next');
-                }
-            }
-        };
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -203,7 +163,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             this.escaped = false;
         };
     }
-    static { this.markRules = [MIRROR_RULE]; }
     static { this.words = 'helix-code-editor'; }
     get control() {
         return this.partNamed('control');
@@ -220,9 +179,6 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             wrap: this.wrap,
         };
     }
-    get readable() {
-        return this.query.search === '' || patternOf(this.query) !== undefined;
-    }
     focus(options) {
         if (this.view?.focus) {
             this.view.focus();
@@ -273,7 +229,7 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
             this.refreshFeedback();
         }
         this.toggleState('find-open', this.findOpen);
-        this.toggleState('replace-open', this.findOpen && this.replaceOpen && !this.readOnly);
+        this.attachFind();
         const mount = this.partNamed('view');
         if (changed.has('engine') || (this.engine && !this.view && mount)) {
             this.view?.destroy();
@@ -308,43 +264,35 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         return true;
     }
     async openFind() {
+        const find = this.find?.element;
+        if (!find) {
+            return;
+        }
         const control = this.control;
         if (!this.view && control && control.selectionEnd > control.selectionStart) {
             const selected = control.value.slice(control.selectionStart, control.selectionEnd);
             if (!selected.includes('\n')) {
-                this.query = { ...this.query, search: selected };
+                find.query = selected;
             }
         }
-        this.findOpen = true;
-        await this.updateComplete;
-        const field = this.partNamed('find-field');
-        field?.focus();
-        field?.select();
-        if (this.query.search !== '') {
-            this.search('first');
-        }
-    }
-    closeFind() {
-        this.findOpen = false;
-        this.found = undefined;
-        this.view?.findEnd?.();
-        this.focus();
+        await find.show();
     }
-    search(direction) {
-        if (this.query.search === '' || !this.readable) {
-            this.found = undefined;
-            this.view?.findEnd?.();
+    attachFind() {
+        const element = this.partNamed('find') ?? undefined;
+        if (element === this.find?.element) {
             return;
         }
+        this.find?.sink.detach();
+        this.find = element ? { element, sink: element.attach(this.finder) } : undefined;
+    }
+    findIn(query, direction) {
         if (this.view?.find) {
-            this.found = this.view.find(this.query, direction);
-            return;
+            return this.view.find(query, direction);
         }
         const control = this.control;
-        const ranges = findRanges(this.value, this.query);
+        const ranges = findRanges(this.value, query);
         if (!control || ranges.length === 0) {
-            this.found = { count: ranges.length, index: -1 };
-            return;
+            return { count: ranges.length, index: -1 };
         }
         const at = direction === 'first' ? control.selectionStart : control.selectionEnd;
         let index = direction === 'previous'
@@ -356,54 +304,37 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         const [from, to] = ranges[index] ?? [0, 0];
         control.setSelectionRange(from, to);
         this.caret = from;
-        this.found = { count: ranges.length, index };
+        return { count: ranges.length, index };
     }
-    replace(all) {
-        if (this.readOnly || this.query.search === '' || !this.readable) {
-            return;
+    replaceIn(query, all) {
+        if (this.readOnly) {
+            return undefined;
         }
         if (this.view?.replace) {
-            this.found = this.view.replace(this.query, all);
-            return;
+            return this.view.replace(query, all);
         }
         const control = this.control;
-        const pattern = patternOf(this.query);
+        const pattern = findPattern(query);
         if (!control || !pattern) {
-            return;
+            return undefined;
         }
         if (all) {
-            this.requestValue(this.value.replace(pattern, this.query.replace));
+            this.requestValue(this.value.replace(pattern, query.replace));
         }
         else {
-            const selected = findRanges(this.value, this.query).find(([from, to]) => from === control.selectionStart && to === control.selectionEnd);
+            const selected = findRanges(this.value, query).find(([from, to]) => from === control.selectionStart && to === control.selectionEnd);
             if (!selected) {
-                this.search('next');
-                return;
+                return this.findIn(query, 'next');
             }
             const [from, to] = selected;
             const one = new RegExp(pattern.source, pattern.flags.replace('g', ''));
-            const replaced = this.value.slice(from, to).replace(one, this.query.replace);
+            const replaced = this.value.slice(from, to).replace(one, query.replace);
             this.requestValue(this.value.slice(0, from) + replaced + this.value.slice(to));
             restoreValue(control, this.value);
             control.setSelectionRange(from + replaced.length, from + replaced.length);
         }
         restoreValue(control, this.value);
-        this.search('next');
-    }
-    toggleOption(option) {
-        this.query = { ...this.query, [option]: !this.query[option] };
-        this.search('first');
-    }
-    get countText() {
-        if (!this.readable) {
-            return this.findInvalidLabel;
-        }
-        return this.found === undefined
-            ? ''
-            : formatWords(this, 'matchesLabel', {
-                count: this.found.count,
-                index: Math.max(this.found.index, 0) + 1,
-            });
+        return this.findIn(query, 'next');
     }
     renderHeader() {
         const toolbar = this.tag('toolbar');
@@ -412,14 +343,14 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
         return html `<div part="header">
       ${this.renderLabel()}
       ${language ? html `<span part="language">${language}</span>` : nothing}
-      <${toolbar} part="controls" exportparts="toolbar: controls-toolbar" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
+      <${toolbar} part="controls" exportparts="toolbar: controls-toolbar" label=${this.controlsLabel}>
         <slot name="actions"></slot>
         <${button}
-          part="find"
-          exportparts="button: find-button, live: find-live, spinner: find-spinner, text: find-text"
+          part="find-toggle"
+          exportparts="button: find-toggle-button, live: find-toggle-live, spinner: find-toggle-spinner, text: find-toggle-text"
           .expanded=${this.findOpen}
           label=${this.findLabel}
-          @click=${() => (this.findOpen ? this.closeFind() : void this.openFind())}
+          @click=${() => (this.findOpen ? this.find?.element.hide() : void this.openFind())}
           @helix-press=${stopPress}
         >
           ${drawIcon(magnifyingGlass)}
@@ -428,132 +359,28 @@ let HelixHeadlessCodeEditor = class HelixHeadlessCodeEditor extends MixinControl
     </div>`;
     }
     renderFind() {
-        const toolbar = this.tag('toolbar');
-        const button = this.tag('icon-button');
-        const textButton = this.tag('button');
-        const searchable = this.readable && (this.found?.count ?? 0) > 0;
-        const replacing = this.replaceOpen && !this.readOnly;
-        return html `<div part="find-bar" role="search" aria-label=${this.findLabel} ?hidden=${!this.findOpen}>
-      ${this.readOnly
-            ? nothing
-            : html `<${button}
-              part="find-replace"
-              exportparts="button: find-replace-button, live: find-replace-live, spinner: find-replace-spinner, text: find-replace-text"
-              .expanded=${replacing}
-              label=${this.findReplaceLabel}
-              @click=${() => {
-                this.replaceOpen = !this.replaceOpen;
-            }}
-              @helix-press=${stopPress}
-            >
-              ${replacing ? drawIcon(caretDown) : html `<span data-mirror>${drawIcon(caretRight)}</span>`}
-            </${button}>`}
-      <input
-        part="find-field"
-        aria-label=${this.findLabel}
-        aria-invalid=${this.readable ? nothing : 'true'}
-        autocomplete="off"
-        placeholder=${this.findLabel}
-        spellcheck="false"
-        type="search"
-        .value=${live(this.query.search)}
-        @input=${this.handleFindInput}
-        @keydown=${this.handleFindKeys}
-      />
-      <span part="find-count" role="status">${this.countText}</span>
-      <${toolbar} part="find-controls" exportparts="toolbar: find-controls-toolbar" exportparts="toolbar: find-controls-toolbar" label=${this.findControlsLabel}>
-        <${button}
-          part="find-match-case"
-          exportparts="button: find-match-case-button, live: find-match-case-live, spinner: find-match-case-spinner, text: find-match-case-text"
-          aria-pressed=${this.query.caseSensitive ? 'true' : 'false'}
-          label=${this.findMatchCaseLabel}
-          @click=${() => this.toggleOption('caseSensitive')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(textAa)}
-        </${button}>
-        <${button}
-          part="find-whole-word"
-          exportparts="button: find-whole-word-button, live: find-whole-word-live, spinner: find-whole-word-spinner, text: find-whole-word-text"
-          aria-pressed=${this.query.wholeWord ? 'true' : 'false'}
-          label=${this.findWholeWordLabel}
-          @click=${() => this.toggleOption('wholeWord')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(textAUnderline)}
-        </${button}>
-        <${button}
-          part="find-regex"
-          exportparts="button: find-regex-button, live: find-regex-live, spinner: find-regex-spinner, text: find-regex-text"
-          aria-pressed=${this.query.regex ? 'true' : 'false'}
-          label=${this.findRegexLabel}
-          @click=${() => this.toggleOption('regex')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(asterisk)}
-        </${button}>
-        <${button}
-          part="find-previous"
-          exportparts="button: find-previous-button, live: find-previous-live, spinner: find-previous-spinner, text: find-previous-text"
-          ?disabled=${!searchable}
-          label=${this.findPreviousLabel}
-          @click=${() => this.search('previous')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(caretUp)}
-        </${button}>
-        <${button}
-          part="find-next"
-          exportparts="button: find-next-button, live: find-next-live, spinner: find-next-spinner, text: find-next-text"
-          ?disabled=${!searchable}
-          label=${this.findNextLabel}
-          @click=${() => this.search('next')}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(caretDown)}
-        </${button}>
-        <${button}
-          part="find-close"
-          exportparts="button: find-close-button, live: find-close-live, spinner: find-close-spinner, text: find-close-text"
-          label=${this.findCloseLabel}
-          @click=${() => this.closeFind()}
-          @helix-press=${stopPress}
-        >
-          ${drawIcon(x)}
-        </${button}>
-      </${toolbar}>
-      ${!replacing
-            ? nothing
-            : html `<input
-              part="replace-field"
-              aria-label=${this.replaceWithLabel}
-              autocomplete="off"
-              placeholder=${this.replaceWithLabel}
-              spellcheck="false"
-              type="text"
-              .value=${live(this.query.replace)}
-              @input=${this.handleReplaceInput}
-              @keydown=${this.handleFindKeys}
-            />
-            <${textButton}
-              part="replace"
-              exportparts="button: replace-button, live: replace-live, spinner: replace-spinner, text: replace-text"
-              ?disabled=${!searchable}
-              @click=${() => this.replace(false)}
-              @helix-press=${stopPress}
-            >
-              ${this.replaceLabel}
-            </${textButton}>
-            <${textButton}
-              part="replace-all"
-              exportparts="button: replace-all-button, live: replace-all-live, spinner: replace-all-spinner, text: replace-all-text"
-              ?disabled=${!searchable}
-              @click=${() => this.replace(true)}
-              @helix-press=${stopPress}
-            >
-              ${this.replaceAllLabel}
-            </${textButton}>`}
-    </div>`;
+        const find = this.tag('find');
+        return html `<${find}
+      part="find"
+      exportparts="actions: find-actions, bar: find-bar, close: find-close, close-button: find-close-button, close-live: find-close-live, close-spinner: find-close-spinner, close-text: find-close-text, controls: find-controls, controls-toolbar: find-controls-toolbar, count: find-count, field: find-field, live: find-live, match-case: find-match-case, match-case-button: find-match-case-button, match-case-live: find-match-case-live, match-case-pressed: find-match-case-pressed, match-case-spinner: find-match-case-spinner, match-case-text: find-match-case-text, next: find-next, next-button: find-next-button, next-live: find-next-live, next-spinner: find-next-spinner, next-text: find-next-text, previous: find-previous, previous-button: find-previous-button, previous-live: find-previous-live, previous-spinner: find-previous-spinner, previous-text: find-previous-text, regex: find-regex, regex-button: find-regex-button, regex-live: find-regex-live, regex-pressed: find-regex-pressed, regex-spinner: find-regex-spinner, regex-text: find-regex-text, replace: find-replace, replace-all: find-replace-all, replace-all-button: find-replace-all-button, replace-all-live: find-replace-all-live, replace-all-spinner: find-replace-all-spinner, replace-all-text: find-replace-all-text, replace-button: find-replace-button, replace-field: find-replace-field, replace-live: find-replace-live, replace-spinner: find-replace-spinner, replace-text: find-replace-text, replace-toggle: find-replace-toggle, replace-toggle-button: find-replace-toggle-button, replace-toggle-live: find-replace-toggle-live, replace-toggle-spinner: find-replace-toggle-spinner, replace-toggle-text: find-replace-toggle-text, whole-word: find-whole-word, whole-word-button: find-whole-word-button, whole-word-live: find-whole-word-live, whole-word-pressed: find-whole-word-pressed, whole-word-spinner: find-whole-word-spinner, whole-word-text: find-whole-word-text"
+      close-label=${this.findCloseLabel}
+      controls-label=${this.findControlsLabel}
+      invalid-label=${this.findInvalidLabel}
+      label=${this.findLabel}
+      match-case-label=${this.findMatchCaseLabel}
+      matches-label=${this.matchesLabel}
+      next-label=${this.findNextLabel}
+      previous-label=${this.findPreviousLabel}
+      ?readonly=${this.readOnly}
+      regex-label=${this.findRegexLabel}
+      replace-all-label=${this.replaceAllLabel}
+      replace-field-label=${this.replaceWithLabel}
+      replace-label=${this.replaceLabel}
+      replace-toggle-label=${this.findReplaceLabel}
+      shortcut=""
+      whole-word-label=${this.findWholeWordLabel}
+      @toggle=${this.handleFindToggle}
+    ></${find}>`;
     }
     renderDiagnostics() {
         if (this.diagnostics.length === 0) {
@@ -731,15 +558,6 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessCodeEditor.prototype, "findOpen", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "found", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "replaceOpen", void 0);
-__decorate([
-    state()
-], HelixHeadlessCodeEditor.prototype, "query", void 0);
 HelixHeadlessCodeEditor = __decorate([
     customElement('helix-headless-code-editor')
 ], HelixHeadlessCodeEditor);

package/dist/editor/index.d.ts

@@ -0,0 +1 @@
+export * from './root/editor-root.js';

package/dist/editor/index.js

@@ -0,0 +1 @@
+export * from './root/editor-root.js';