@destyler/edit 0.0.7-beta.1

package/dist/index.mjs

@@ -0,0 +1,520 @@
+import { createAnatomy } from '@zag-js/anatomy';
+import { createScope, dataAttr, ariaAttr, isComposingEvent, isApple, contains, raf } from '@zag-js/dom-query';
+import { createMachine } from '@zag-js/core';
+import { trackInteractOutside } from '@zag-js/interact-outside';
+import { compact, isEqual, createSplitProps } from '@zag-js/utils';
+import { createProps } from '@zag-js/types';
+
+const anatomy = createAnatomy("edit").parts(
+  "root",
+  "area",
+  "label",
+  "preview",
+  "input",
+  "editTrigger",
+  "submitTrigger",
+  "cancelTrigger",
+  "control"
+);
+const parts = anatomy.build();
+
+const dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `editable:${ctx.id}`,
+  getAreaId: (ctx) => ctx.ids?.area ?? `editable:${ctx.id}:area`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `editable:${ctx.id}:label`,
+  getPreviewId: (ctx) => ctx.ids?.preview ?? `editable:${ctx.id}:preview`,
+  getInputId: (ctx) => ctx.ids?.input ?? `editable:${ctx.id}:input`,
+  getControlId: (ctx) => ctx.ids?.control ?? `editable:${ctx.id}:control`,
+  getSubmitTriggerId: (ctx) => ctx.ids?.submitTrigger ?? `editable:${ctx.id}:submit`,
+  getCancelTriggerId: (ctx) => ctx.ids?.cancelTrigger ?? `editable:${ctx.id}:cancel`,
+  getEditTriggerId: (ctx) => ctx.ids?.editTrigger ?? `editable:${ctx.id}:edit`,
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getPreviewEl: (ctx) => dom.getById(ctx, dom.getPreviewId(ctx)),
+  getSubmitTriggerEl: (ctx) => dom.getById(ctx, dom.getSubmitTriggerId(ctx)),
+  getCancelTriggerEl: (ctx) => dom.getById(ctx, dom.getCancelTriggerId(ctx)),
+  getEditTriggerEl: (ctx) => dom.getById(ctx, dom.getEditTriggerId(ctx))
+});
+
+function connect(state, send, normalize) {
+  const disabled = state.context.disabled;
+  const interactive = state.context.isInteractive;
+  const readOnly = state.context.readOnly;
+  const invalid = state.context.invalid;
+  const autoResize = state.context.autoResize;
+  const translations = state.context.translations;
+  const editing = state.matches("edit");
+  const placeholderProp = state.context.placeholder;
+  const placeholder = typeof placeholderProp === "string" ? { edit: placeholderProp, preview: placeholderProp } : placeholderProp;
+  const value = state.context.value;
+  const empty = value.trim() === "";
+  const valueText = empty ? placeholder?.preview ?? "" : value;
+  return {
+    editing,
+    empty,
+    value,
+    valueText,
+    setValue(value2) {
+      send({ type: "VALUE.SET", value: value2, src: "setValue" });
+    },
+    clearValue() {
+      send({ type: "VALUE.SET", value: "", src: "clearValue" });
+    },
+    edit() {
+      if (!interactive)
+        return;
+      send("EDIT");
+    },
+    cancel() {
+      if (!interactive)
+        return;
+      send("CANCEL");
+    },
+    submit() {
+      if (!interactive)
+        return;
+      send("SUBMIT");
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        id: dom.getRootId(state.context),
+        dir: state.context.dir
+      });
+    },
+    getAreaProps() {
+      return normalize.element({
+        ...parts.area.attrs,
+        "id": dom.getAreaId(state.context),
+        "dir": state.context.dir,
+        "style": autoResize ? { display: "inline-grid" } : void 0,
+        "data-focus": dataAttr(editing),
+        "data-disabled": dataAttr(disabled),
+        "data-placeholder-shown": dataAttr(empty)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        "id": dom.getLabelId(state.context),
+        "dir": state.context.dir,
+        "htmlFor": dom.getInputId(state.context),
+        "data-focus": dataAttr(editing),
+        "data-invalid": dataAttr(invalid),
+        onClick() {
+          if (editing)
+            return;
+          const previewEl = dom.getPreviewEl(state.context);
+          previewEl?.focus({ preventScroll: true });
+        }
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        "dir": state.context.dir,
+        "aria-label": translations.input,
+        "name": state.context.name,
+        "form": state.context.form,
+        "id": dom.getInputId(state.context),
+        "hidden": autoResize ? void 0 : !editing,
+        "placeholder": placeholder?.edit,
+        "maxLength": state.context.maxLength,
+        "required": state.context.required,
+        "disabled": disabled,
+        "data-disabled": dataAttr(disabled),
+        "readOnly": readOnly,
+        "data-readonly": dataAttr(readOnly),
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        "data-autoresize": dataAttr(autoResize),
+        "defaultValue": value,
+        "size": autoResize ? 1 : void 0,
+        onChange(event) {
+          send({ type: "VALUE.SET", src: "input.change", value: event.currentTarget.value });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (isComposingEvent(event))
+            return;
+          const keyMap = {
+            Escape() {
+              send("CANCEL");
+              event.preventDefault();
+            },
+            Enter(event2) {
+              if (!state.context.submitOnEnter)
+                return;
+              const { localName } = event2.currentTarget;
+              if (localName === "textarea") {
+                const submitMod = isApple() ? event2.metaKey : event2.ctrlKey;
+                if (!submitMod)
+                  return;
+                send({ type: "SUBMIT", src: "keydown.enter" });
+                return;
+              }
+              if (localName === "input" && !event2.shiftKey && !event2.metaKey) {
+                send({ type: "SUBMIT", src: "keydown.enter" });
+                event2.preventDefault();
+              }
+            }
+          };
+          const exec = keyMap[event.key];
+          if (exec) {
+            exec(event);
+          }
+        },
+        "style": autoResize ? {
+          gridArea: "1 / 1 / auto / auto",
+          visibility: !editing ? "hidden" : void 0
+        } : void 0
+      });
+    },
+    getPreviewProps() {
+      return normalize.element({
+        "id": dom.getPreviewId(state.context),
+        ...parts.preview.attrs,
+        "dir": state.context.dir,
+        "data-placeholder-shown": dataAttr(empty),
+        "aria-readonly": ariaAttr(readOnly),
+        "data-readonly": dataAttr(disabled),
+        "data-disabled": dataAttr(disabled),
+        "aria-disabled": ariaAttr(disabled),
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        "aria-label": translations.edit,
+        "data-autoresize": dataAttr(autoResize),
+        "children": valueText,
+        "hidden": autoResize ? void 0 : editing,
+        "tabIndex": interactive ? 0 : void 0,
+        onClick() {
+          if (!interactive)
+            return;
+          if (state.context.activationMode !== "click")
+            return;
+          send({ type: "EDIT", src: "click" });
+        },
+        onFocus() {
+          if (!interactive)
+            return;
+          if (state.context.activationMode !== "focus")
+            return;
+          send({ type: "EDIT", src: "focus" });
+        },
+        onDoubleClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          if (state.context.activationMode !== "dblclick")
+            return;
+          send({ type: "EDIT", src: "dblclick" });
+        },
+        "style": autoResize ? {
+          whiteSpace: "pre",
+          userSelect: "none",
+          gridArea: "1 / 1 / auto / auto",
+          visibility: editing ? "hidden" : void 0,
+          // in event the preview overflow's the parent element
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        } : void 0
+      });
+    },
+    getEditTriggerProps() {
+      return normalize.button({
+        ...parts.editTrigger.attrs,
+        "id": dom.getEditTriggerId(state.context),
+        "dir": state.context.dir,
+        "aria-label": translations.edit,
+        "hidden": editing,
+        "type": "button",
+        "disabled": disabled,
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          send({ type: "EDIT", src: "edit.click" });
+        }
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        id: dom.getControlId(state.context),
+        ...parts.control.attrs,
+        dir: state.context.dir
+      });
+    },
+    getSubmitTriggerProps() {
+      return normalize.button({
+        ...parts.submitTrigger.attrs,
+        "dir": state.context.dir,
+        "id": dom.getSubmitTriggerId(state.context),
+        "aria-label": translations.submit,
+        "hidden": !editing,
+        "disabled": disabled,
+        "type": "button",
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          send({ type: "SUBMIT", src: "submit.click" });
+        }
+      });
+    },
+    getCancelTriggerProps() {
+      return normalize.button({
+        ...parts.cancelTrigger.attrs,
+        "dir": state.context.dir,
+        "aria-label": translations.cancel,
+        "id": dom.getCancelTriggerId(state.context),
+        "hidden": !editing,
+        "type": "button",
+        "disabled": disabled,
+        onClick(event) {
+          if (event.defaultPrevented)
+            return;
+          if (!interactive)
+            return;
+          send({ type: "CANCEL", src: "cancel.click" });
+        }
+      });
+    }
+  };
+}
+
+const sync = {
+  value: (ctx) => {
+    const inputEl = dom.getInputEl(ctx);
+    dom.setValue(inputEl, ctx.value);
+  }
+};
+const invoke = {
+  change(ctx) {
+    ctx.onValueChange?.({ value: ctx.value });
+    sync.value(ctx);
+  }
+};
+const set = {
+  value(ctx, value) {
+    if (isEqual(ctx.value, value))
+      return;
+    ctx.value = value;
+    invoke.change(ctx);
+  }
+};
+const submitOnEnter = (ctx) => ["both", "enter"].includes(ctx.submitMode);
+const submitOnBlur = (ctx) => ["both", "blur"].includes(ctx.submitMode);
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "editable",
+      initial: ctx.edit ? "edit" : "preview",
+      entry: ctx.edit ? ["focusInput"] : void 0,
+      context: {
+        activationMode: "focus",
+        submitMode: "both",
+        value: "",
+        previousValue: "",
+        selectOnFocus: true,
+        disabled: false,
+        readOnly: false,
+        ...ctx,
+        translations: {
+          input: "editable input",
+          edit: "edit",
+          submit: "submit",
+          cancel: "cancel",
+          ...ctx.translations
+        }
+      },
+      watch: {
+        value: ["syncInputValue"],
+        edit: ["toggleEditing"]
+      },
+      computed: {
+        submitOnEnter,
+        submitOnBlur,
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly)
+      },
+      on: {
+        "VALUE.SET": {
+          actions: "setValue"
+        }
+      },
+      states: {
+        preview: {
+          // https://bugzilla.mozilla.org/show_bug.cgi?id=559561
+          entry: ["blurInputIfNeeded"],
+          on: {
+            "CONTROLLED.EDIT": {
+              target: "edit",
+              actions: ["setPreviousValue", "focusInput"]
+            },
+            "EDIT": [
+              {
+                guard: "isEditControlled",
+                actions: ["invokeOnEdit"]
+              },
+              {
+                target: "edit",
+                actions: ["setPreviousValue", "focusInput", "invokeOnEdit"]
+              }
+            ]
+          }
+        },
+        edit: {
+          activities: ["trackInteractOutside"],
+          on: {
+            "CONTROLLED.PREVIEW": [
+              {
+                guard: "isSubmitEvent",
+                target: "preview",
+                actions: ["setPreviousValue", "restoreFocus", "invokeOnSubmit"]
+              },
+              {
+                target: "preview",
+                actions: ["revertValue", "restoreFocus", "invokeOnCancel"]
+              }
+            ],
+            "CANCEL": [
+              {
+                guard: "isEditControlled",
+                actions: ["invokeOnPreview"]
+              },
+              {
+                target: "preview",
+                actions: ["revertValue", "restoreFocus", "invokeOnCancel", "invokeOnPreview"]
+              }
+            ],
+            "SUBMIT": [
+              {
+                guard: "isEditControlled",
+                actions: ["invokeOnPreview"]
+              },
+              {
+                target: "preview",
+                actions: ["setPreviousValue", "restoreFocus", "invokeOnSubmit", "invokeOnPreview"]
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isEditControlled: (ctx2) => !!ctx2["edit.controlled"],
+        isSubmitEvent: (_ctx, evt) => evt.previousEvent?.type === "SUBMIT"
+      },
+      activities: {
+        trackInteractOutside(ctx2, _evt, { send }) {
+          return trackInteractOutside(dom.getInputEl(ctx2), {
+            exclude(target) {
+              const ignore = [dom.getCancelTriggerEl(ctx2), dom.getSubmitTriggerEl(ctx2)];
+              return ignore.some((el) => contains(el, target));
+            },
+            onFocusOutside: ctx2.onFocusOutside,
+            onPointerDownOutside: ctx2.onPointerDownOutside,
+            onInteractOutside(event) {
+              ctx2.onInteractOutside?.(event);
+              if (event.defaultPrevented)
+                return;
+              const { focusable } = event.detail;
+              send({ type: submitOnBlur(ctx2) ? "SUBMIT" : "CANCEL", src: "interact-outside", focusable });
+            }
+          });
+        }
+      },
+      actions: {
+        restoreFocus(ctx2, evt) {
+          if (evt.focusable)
+            return;
+          raf(() => {
+            const finalEl = ctx2.finalFocusEl?.() ?? dom.getEditTriggerEl(ctx2);
+            finalEl?.focus({ preventScroll: true });
+          });
+        },
+        focusInput(ctx2) {
+          raf(() => {
+            const inputEl = dom.getInputEl(ctx2);
+            if (!inputEl)
+              return;
+            if (ctx2.selectOnFocus) {
+              inputEl.select();
+            } else {
+              inputEl.focus({ preventScroll: true });
+            }
+          });
+        },
+        invokeOnCancel(ctx2) {
+          ctx2.onValueRevert?.({ value: ctx2.previousValue });
+        },
+        invokeOnSubmit(ctx2) {
+          ctx2.onValueCommit?.({ value: ctx2.value });
+        },
+        invokeOnEdit(ctx2) {
+          ctx2.onEditChange?.({ edit: true });
+        },
+        invokeOnPreview(ctx2) {
+          ctx2.onEditChange?.({ edit: false });
+        },
+        toggleEditing(ctx2, evt, { send }) {
+          send({ type: ctx2.edit ? "CONTROLLED.EDIT" : "CONTROLLED.PREVIEW", previousEvent: evt });
+        },
+        syncInputValue(ctx2) {
+          sync.value(ctx2);
+        },
+        setValue(ctx2, evt) {
+          const value = ctx2.maxLength != null ? evt.value.slice(0, ctx2.maxLength) : evt.value;
+          set.value(ctx2, value);
+        },
+        setPreviousValue(ctx2) {
+          ctx2.previousValue = ctx2.value;
+        },
+        revertValue(ctx2) {
+          set.value(ctx2, ctx2.previousValue);
+        },
+        blurInputIfNeeded(ctx2) {
+          dom.getInputEl(ctx2)?.blur();
+        }
+      }
+    }
+  );
+}
+
+const props = createProps()([
+  "activationMode",
+  "autoResize",
+  "dir",
+  "disabled",
+  "finalFocusEl",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "maxLength",
+  "name",
+  "onEditChange",
+  "onFocusOutside",
+  "onInteractOutside",
+  "onPointerDownOutside",
+  "onValueChange",
+  "onValueCommit",
+  "onValueRevert",
+  "placeholder",
+  "readOnly",
+  "required",
+  "selectOnFocus",
+  "edit",
+  "edit.controlled",
+  "submitMode",
+  "translations",
+  "value"
+]);
+const splitProps = createSplitProps(props);
+
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@destyler/edit",
+  "type": "module",
+  "version": "0.0.7-beta.1",
+  "description": "a component that allows users to edit text in place.",
+  "author": "Elone Hoo <elonehoo@gmail.com>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "dist"
+  ],
+  "dependencies": {
+    "@zag-js/anatomy": "^0.80.0",
+    "@zag-js/core": "^0.80.0",
+    "@zag-js/dom-event": "^0.80.0",
+    "@zag-js/dom-query": "^0.80.0",
+    "@zag-js/form-utils": "^0.80.0",
+    "@zag-js/interact-outside": "^0.80.0",
+    "@zag-js/types": "^0.80.0",
+    "@zag-js/utils": "^0.80.0"
+  },
+  "scripts": {
+    "clear": "rimraf ./dist",
+    "clear:node_modules": "rimraf ./node_modules",
+    "build": "pnpm run clear && unbuild",
+    "stub": "unbuild --stub"
+  }
+}