@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-rich-text-editor/pf-rich-text-editor.css

@@ -0,0 +1,136 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.label {
+  color: var(--pf-field-label);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.required {
+  color: var(--pf-field-required);
+  margin-inline-start: var(--space-1);
+}
+
+.description {
+  color: var(--pf-field-description);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.error {
+  color: var(--pf-field-error);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.box {
+  background: var(--pf-rte-bg);
+  border: 1px solid var(--pf-rte-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.box:focus-within {
+  border-color: var(--pf-rte-focus-border);
+  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));
+}
+
+.box--invalid {
+  border-color: var(--pf-rte-invalid-border);
+}
+
+.box--disabled {
+  opacity: var(--pf-rte-disabled-opacity, 0.75);
+}
+
+.toolbar {
+  align-items: center;
+  background: var(--pf-rte-bg-subtle);
+  border-bottom: 1px solid var(--pf-rte-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  padding: var(--space-2);
+}
+
+.tool {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--pf-rte-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  min-height: 28px;
+  padding: 0 var(--space-2);
+}
+
+.tool:hover:not(:disabled) {
+  background: var(--pf-rte-bg);
+  border-color: var(--pf-rte-border);
+}
+
+.tool:focus-visible {
+  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.tool:disabled {
+  cursor: not-allowed;
+  opacity: var(--pf-rte-disabled-opacity, 0.55);
+}
+
+.divider {
+  background: var(--pf-rte-border);
+  height: 18px;
+  margin: 0 var(--space-1);
+  width: 1px;
+}
+
+.editor {
+  color: var(--pf-rte-text);
+  font: inherit;
+  line-height: 1.5;
+  min-height: var(--pf-rte-min-height, 140px);
+  outline: none;
+  overflow-wrap: anywhere;
+  padding: var(--space-3);
+}
+
+/*
+ * The browser's own paragraphs, which `execCommand` and Enter both produce.
+ * There is no `::slotted` involved: this content is in the shadow root,
+ * written there imperatively, so a plain descendant selector reaches it.
+ */
+.editor p {
+  margin: 0 0 0.75em;
+}
+
+.editor p:last-child {
+  margin-bottom: 0;
+}
+
+.editor:empty::before {
+  color: var(--pf-rte-text-muted);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
+.count {
+  color: var(--pf-rte-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+  text-align: end;
+}

package/dist/collection/components/pf-rich-text-editor/pf-rich-text-editor.js

@@ -0,0 +1,519 @@
+import { RICH_TEXT_COMMANDS, composeDescribedBy, getRovingItems, resolveListMove, resolveRovingKey, stripOuterParagraph, syncRovingTabIndex, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+import { applyControlValidity } from "../../form-validity";
+/**
+ * A form-associated rich-text field over a `contenteditable`.
+ *
+ * The toolbar is core's list, so this and the React `RichTextEditor` cannot
+ * offer different buttons, and the value is normalised with core's
+ * `stripOuterParagraph`, so they cannot disagree about what a round trip
+ * looks like.
+ *
+ * Two things differ from the React component, both deliberate:
+ *
+ * - **The toolbar is one tab stop**, with the arrows moving inside it, which
+ *   is the ARIA toolbar pattern and what `pf-toolbar` already does. The React
+ *   version is six tab stops inside a `role="toolbar"`, so tabbing past the
+ *   field walks every button; `todo.md` has that.
+ * - **It is a real form control.** `formAssociated` with `ElementInternals` is
+ *   what puts the value in `FormData`; a `contenteditable` is not a form
+ *   control in any framework, and the React component's value reaches a form
+ *   only if the consumer wires it there themselves.
+ *
+ * `document.execCommand` is deprecated and is still the only way to apply
+ * formatting inside a `contenteditable` without a dependency, which is the
+ * same trade the React component makes.
+ *
+ * @part field - the wrapper around label, toolbar, editor and messages.
+ * @part label - the label element.
+ * @part toolbar - the formatting toolbar.
+ * @part tool - one toolbar button.
+ * @part editor - the editable area.
+ * @part count - the character counter.
+ * @part description - the hint text.
+ * @part error - the error message.
+ */
+export class PfRichTextEditor {
+    internals;
+    el;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` content attribute rather than from this property.
+     */
+    name;
+    /** The field's value, as HTML. */
+    value = '';
+    label;
+    description;
+    /** Error message from the consumer. Its presence marks the control invalid. */
+    error;
+    placeholder = 'Start typing...';
+    /** The editable area's smallest height, in pixels. */
+    minHeight = 140;
+    /** The most characters of text the field will hold. */
+    characterMax;
+    required = false;
+    disabled = false;
+    /** Fires when the value changes, however it changed. */
+    pfChange;
+    /** The text length, which the counter shows. */
+    characterCount = 0;
+    /** The value a reset restores, captured before `value` can be replaced. */
+    initialValue = '';
+    /** The last value inside the character limit, which an overrun reverts to. */
+    lastWithinLimit = '';
+    editor;
+    toolbar;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    componentDidLoad() {
+        this.writeValueIntoEditor();
+        if (this.toolbar)
+            syncRovingTabIndex(getRovingItems(this.toolbar));
+    }
+    handleValueChange() {
+        this.writeValueIntoEditor();
+        this.syncFormState();
+    }
+    syncFormState() {
+        const text = this.editor?.textContent ?? '';
+        this.internals.setFormValue(this.value ?? '');
+        applyControlValidity(this.internals, text.trim().length > 0, this.required, this.error);
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** Applies one of the toolbar's commands, as pressing its button does. */
+    async format(command) {
+        this.runCommand(command);
+    }
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * the rule a native `<input value="initial">` follows.
+     */
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.writeValueIntoEditor();
+    }
+    /**
+     * The editable area's content is written imperatively, never rendered.
+     *
+     * A `contenteditable` that a vdom also owns is a fight: the person types,
+     * the DOM changes under the renderer, and the next render puts the old
+     * content back with the caret at the start. So the element renders an empty
+     * box once and sets `innerHTML` only when the value it holds and the value
+     * in the box actually differ.
+     */
+    writeValueIntoEditor() {
+        const next = stripOuterParagraph(this.value ?? '');
+        if (this.editor && this.editor.innerHTML !== next)
+            this.editor.innerHTML = next;
+        this.lastWithinLimit = next;
+        this.characterCount = this.editor?.textContent?.length ?? 0;
+    }
+    onInput = () => {
+        if (!this.editor)
+            return;
+        const length = this.editor.textContent?.length ?? 0;
+        /*
+         * Over the limit: put the last good value back rather than let the
+         * content grow. The caret lands at the start of the box, which is the
+         * cost of this approach and the reason a limit should be generous.
+         */
+        if (typeof this.characterMax === 'number' && length > this.characterMax) {
+            this.editor.innerHTML = this.lastWithinLimit;
+            this.characterCount = this.editor.textContent?.length ?? 0;
+            return;
+        }
+        this.lastWithinLimit = this.editor.innerHTML;
+        this.characterCount = length;
+        this.value = this.editor.innerHTML;
+        this.syncFormState();
+        this.pfChange.emit({ value: this.value });
+    };
+    runCommand(command) {
+        if (!this.editor || this.disabled)
+            return;
+        this.editor.focus();
+        /*
+         * Deprecated, and still the only way to format inside a
+         * `contenteditable` without a dependency. It is also the one DOM call
+         * here that a test project cannot make: Stencil's mock DOM has no
+         * `execCommand` at all, so the toolbar is browser-tested.
+         */
+        document.execCommand?.(command);
+        this.onInput();
+    }
+    /** The toolbar is one tab stop, with the arrows moving inside it. */
+    onToolbarKeyDown = (event) => {
+        if (event.defaultPrevented || !this.toolbar)
+            return;
+        const action = resolveRovingKey(event.key, 'horizontal');
+        if (!action)
+            return;
+        const items = getRovingItems(this.toolbar);
+        const current = items.indexOf(this.el.shadowRoot?.activeElement);
+        if (current === -1)
+            return;
+        const next = resolveListMove(action, items.map((_, index) => index), current);
+        if (next >= 0) {
+            event.preventDefault();
+            items[next].focus();
+        }
+    };
+    onToolbarFocusIn = (event) => {
+        if (this.toolbar)
+            syncRovingTabIndex(getRovingItems(this.toolbar), event.target);
+    };
+    render() {
+        const hasCount = typeof this.characterMax === 'number';
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error', hasCount && 'count');
+        return (h(Host, { key: '1e777ccc50af79784ab6348ff378ebc505919fb2' }, h("div", { key: '432f2eaa3288f993ec43423cccc29461713d0231', class: "field", part: "field" }, this.label && (h("label", { key: '04fea69f6c553e6f0a9008696ec9a65b5741ba42', class: "label", part: "label", id: "label", htmlFor: "editor" }, this.label, this.required && (h("span", { key: '104964261dc140c4aa59b3831ed40bdcd298b714', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '221e3f47b1bec4663155ad201bef63e1533eeb85', class: {
+                box: true,
+                'box--invalid': Boolean(this.error),
+                'box--disabled': this.disabled,
+            } }, h("div", { key: '20e03010935746f7491ec091395c698520d65f1b', class: "toolbar", part: "toolbar", role: "toolbar", "aria-label": "Formatting options", "aria-orientation": "horizontal", ref: (node) => (this.toolbar = node), onKeyDown: this.onToolbarKeyDown, onFocusin: this.onToolbarFocusIn }, RICH_TEXT_COMMANDS.map((tool) => [
+            tool.separatorBefore ? h("span", { class: "divider", "aria-hidden": "true" }) : null,
+            h("button", { type: "button", class: "tool", part: "tool", "data-command": tool.command, "aria-label": tool.label, disabled: this.disabled,
+                // A press must not take the caret out of the editor, or the
+                // command has no selection to apply to.
+                onMouseDown: (event) => event.preventDefault(), onClick: () => this.runCommand(tool.command) }, tool.text),
+        ])), h("div", { key: 'ee4fa67a3c45efe5fb9d4e9f77d1a639fcee5c1a', id: "editor", class: "editor", part: "editor", role: "textbox", "aria-multiline": "true", "aria-labelledby": this.label ? 'label' : null, "aria-required": this.required ? 'true' : null, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, "aria-disabled": this.disabled ? 'true' : null, contentEditable: !this.disabled, "data-placeholder": this.placeholder, style: { '--pf-rte-min-height': `${this.minHeight}px` }, ref: (node) => (this.editor = node), onInput: this.onInput })), this.description && (h("p", { key: 'e55178dd64e111d6940a9a2de5541a1adfefef8d', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '118e10b3463e82ef5af5f0a51df45693b864b695', class: "error", part: "error", id: "error" }, this.error)), hasCount && (h("p", { key: 'c8163c0bb3c46c1ea8c6b0def9179fbd93dffa56', class: "count", part: "count", id: "count", "aria-live": "polite" }, this.characterCount, "/", this.characterMax)))));
+    }
+    static get is() { return "pf-rich-text-editor"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-rich-text-editor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-rich-text-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Submitted under this name.\n\nReflected, because a form-associated custom element takes its submission\nname from the `name` content attribute rather than from this property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The field's value, as HTML."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message from the consumer. Its presence marks the control invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Start typing...'"
+            },
+            "minHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The editable area's smallest height, in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height",
+                "defaultValue": "140"
+            },
+            "characterMax": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The most characters of text the field will hold."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "character-max"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "characterCount": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the value changes, however it changed."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "format": {
+                "complexType": {
+                    "signature": "(command: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "command",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Applies one of the toolbar's commands, as pressing its button does.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-rich-text-editor.js.map