@qoretechnologies/reqraft 0.10.62-pr.142.g62c577f → 0.10.62

package/dist/helpers/choiceChip.d.ts

@@ -0,0 +1,98 @@
+import { IQorusAllowedValue } from '@qoretechnologies/ts-toolkit';
+import { Editor, Path } from 'slate';
+/**
+ * A value that IS one of the field's own choices, drawn as that choice.
+ *
+ * A rich-text field offered choices picks one by writing its value, so an
+ * author who chose the Slack channel "general" read `C07ERBFS0P6` in the
+ * editor. The value is right — it is what the server resolves — but it is not
+ * what was chosen by. These helpers draw such a value as one chip named from
+ * the choice, the way a template reference is drawn from the catalogue, while
+ * what is stored stays the plain value: the chip's own `value` is the choice's,
+ * so the text a document stands for is unchanged, and a document that is
+ * nothing but the chip is read back as the value it draws.
+ */
+/** The marker a choice chip carries, so it is told apart from a template reference. */
+export declare const CHOICE_CHIP_META = "allowedValue";
+export interface IChoiceChipNode {
+    type: 'tag';
+    value: string;
+    label: string;
+    metadata: {
+        [CHOICE_CHIP_META]: true;
+        description?: string;
+    };
+    children: [{
+        text: '';
+    }];
+}
+/** The choice's value as the plain string it is; it arrives in the form engine's `{type, value}` envelope. */
+export declare const choiceValue: (choice: IQorusAllowedValue) => string;
+/**
+ * The text a document is, when it is one paragraph of plain text and nothing
+ * else; `undefined` for anything more — a chip, a mark, a second paragraph.
+ */
+export declare const plainTextOfNodes: (nodes: unknown) => string | undefined;
+/**
+ * The choice a value is: a whole plain string the field offers, or a document
+ * that is one paragraph of exactly that text — which is what an edit of the
+ * chip stores, so an id typed back is the choice it was. A string or document
+ * holding anything more is the author's own text and is never a choice.
+ */
+export declare const choiceForValue: (value: unknown, choices?: IQorusAllowedValue[]) => IQorusAllowedValue | undefined;
+/** The one-chip document that draws a choice by its name. */
+export declare const choiceToNodes: (choice: IQorusAllowedValue) => {
+    type: 'paragraph';
+    children: ({
+        text: string;
+    } | IChoiceChipNode)[];
+}[];
+export declare const isChoiceChip: (node: unknown) => node is IChoiceChipNode;
+/**
+ * The value a document is, when the document is one choice chip and nothing
+ * else; `undefined` when the author has written anything around it, in which
+ * case the document itself is the value.
+ */
+export declare const choiceValueOfNodes: (nodes: unknown) => string | undefined;
+/**
+ * What a choice chip does when the author acts on it, by action.
+ *
+ * The chip is a void: it holds no text of its own, so a key or a click on it
+ * has nothing to land in, and an author who wants to change one letter of the
+ * value it draws (`C07ERBFS0P6` to `C07ERBFS0P7`) has no way in unless the
+ * chip opens. Each action is configurable, and the default is the one that
+ * opens it: a creatable choice is the author's to edit.
+ */
+export interface IChoiceChipBehavior {
+    /**
+     * Backspace with the cursor right after the chip. `unwrap` (the default)
+     * turns the chip into its value as plain text, the cursor at the end of it,
+     * for the author to edit; `remove` deletes it whole, as the editor deletes
+     * any other chip.
+     */
+    backspace?: 'unwrap' | 'remove';
+    /**
+     * A click on the chip's body. `unwrap` (the default) turns the chip into its
+     * value as plain text, the cursor at the end of it; `cursor` only places the
+     * cursor after it, as a click on a template chip does.
+     */
+    click?: 'unwrap' | 'cursor';
+}
+export declare const DEFAULT_CHOICE_CHIP_BEHAVIOR: Required<IChoiceChipBehavior>;
+/** Where the node is in the document, by identity; the editor renders the document's own nodes, so a chip handed to a click handler is one of them. */
+export declare const pathOfNode: (editor: Editor, node: unknown) => Path | undefined;
+/**
+ * The chip the cursor is on: right after it with nothing between, where
+ * Backspace would take it, or inside it, where the arrow keys can leave the
+ * cursor. Nothing when the selection spans text or sits anywhere else.
+ */
+export declare const choiceChipAtCursor: (editor: Editor) => Path | undefined;
+/**
+ * Opens the chip at `path` into its value as plain text, the cursor at the
+ * end of the text: what the author read is what they chose, now editable
+ * letter by letter. The document is text from here on, and is stored as the
+ * field stores anything typed; it is drawn as a chip again only when it is
+ * read back as exactly one of the choices.
+ */
+export declare const unwrapChoiceChip: (editor: Editor, path: Path) => boolean;
+//# sourceMappingURL=choiceChip.d.ts.map

package/dist/helpers/choiceChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"choiceChip.d.ts","sourceRoot":"","sources":["../../src/helpers/choiceChip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAyB,MAAM,8BAA8B,CAAC;AACzF,OAAO,EAAE,MAAM,EAAQ,IAAI,EAAqB,MAAM,OAAO,CAAC;AAI9D;;;;;;;;;;;GAWG;AAEH,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAE/C,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,QAAQ,EAAE,CAAC;QAAE,IAAI,EAAE,EAAE,CAAA;KAAE,CAAC,CAAC;CAC1B;AAED,8GAA8G;AAC9G,eAAO,MAAM,WAAW,WAAY,kBAAkB,KAAG,MACR,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,OAAO,KAAG,MAAM,GAAG,SAqB1D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,UAClB,OAAO,YACJ,kBAAkB,EAAE,KAC7B,kBAAkB,GAAG,SAUvB,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,aAAa,WAChB,kBAAkB,KACzB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,QAAQ,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,eAAe,CAAC,EAAE,CAAA;CAAE,EAoBzE,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,OAAO,4BAIuC,CAAC;AAElF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,UAAW,OAAO,KAAG,MAAM,GAAG,SAa5D,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,4BAA4B,EAAE,QAAQ,CAAC,mBAAmB,CAGtE,CAAC;AAEF,uJAAuJ;AACvJ,eAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,OAAO,KAAG,IAAI,GAAG,SAWjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,WAAY,MAAM,KAAG,IAAI,GAAG,SAqB1D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,WAAY,MAAM,iBAAe,OAc7D,CAAC"}

package/dist/helpers/choiceChip.js

@@ -0,0 +1,181 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unwrapChoiceChip = exports.choiceChipAtCursor = exports.pathOfNode = exports.DEFAULT_CHOICE_CHIP_BEHAVIOR = exports.choiceValueOfNodes = exports.isChoiceChip = exports.choiceToNodes = exports.choiceForValue = exports.plainTextOfNodes = exports.choiceValue = exports.CHOICE_CHIP_META = void 0;
+var slate_1 = require("slate");
+var allowedValues_1 = require("./allowedValues");
+var options_1 = require("./options");
+/**
+ * A value that IS one of the field's own choices, drawn as that choice.
+ *
+ * A rich-text field offered choices picks one by writing its value, so an
+ * author who chose the Slack channel "general" read `C07ERBFS0P6` in the
+ * editor. The value is right — it is what the server resolves — but it is not
+ * what was chosen by. These helpers draw such a value as one chip named from
+ * the choice, the way a template reference is drawn from the catalogue, while
+ * what is stored stays the plain value: the chip's own `value` is the choice's,
+ * so the text a document stands for is unchanged, and a document that is
+ * nothing but the chip is read back as the value it draws.
+ */
+/** The marker a choice chip carries, so it is told apart from a template reference. */
+exports.CHOICE_CHIP_META = 'allowedValue';
+/** The choice's value as the plain string it is; it arrives in the form engine's `{type, value}` envelope. */
+var choiceValue = function (choice) { var _a; return String((_a = (0, options_1.getListElementValue)(choice.value)) !== null && _a !== void 0 ? _a : ''); };
+exports.choiceValue = choiceValue;
+/**
+ * The text a document is, when it is one paragraph of plain text and nothing
+ * else; `undefined` for anything more — a chip, a mark, a second paragraph.
+ */
+var plainTextOfNodes = function (nodes) {
+    if (!Array.isArray(nodes) || nodes.length !== 1) {
+        return undefined;
+    }
+    var paragraph = nodes[0];
+    if ((paragraph === null || paragraph === void 0 ? void 0 : paragraph.type) !== 'paragraph' || !Array.isArray(paragraph.children)) {
+        return undefined;
+    }
+    var text = '';
+    for (var _i = 0, _a = paragraph.children; _i < _a.length; _i++) {
+        var child = _a[_i];
+        if (typeof (child === null || child === void 0 ? void 0 : child.text) !== 'string' || Object.keys(child).some(function (key) { return key !== 'text'; })) {
+            return undefined;
+        }
+        text += child.text;
+    }
+    return text;
+};
+exports.plainTextOfNodes = plainTextOfNodes;
+/**
+ * The choice a value is: a whole plain string the field offers, or a document
+ * that is one paragraph of exactly that text — which is what an edit of the
+ * chip stores, so an id typed back is the choice it was. A string or document
+ * holding anything more is the author's own text and is never a choice.
+ */
+var choiceForValue = function (value, choices) {
+    var text = typeof value === 'string' ? value : (0, exports.plainTextOfNodes)(value);
+    if (!text || !(choices === null || choices === void 0 ? void 0 : choices.length)) {
+        return undefined;
+    }
+    return (0, allowedValues_1.findAllowedValueOption)(text, { allowed_values: choices });
+};
+exports.choiceForValue = choiceForValue;
+/** The one-chip document that draws a choice by its name. */
+var choiceToNodes = function (choice) {
+    var _a;
+    var _b, _c;
+    var value = (0, exports.choiceValue)(choice);
+    var description = (_b = choice.short_desc) !== null && _b !== void 0 ? _b : choice.desc;
+    return [
+        {
+            type: 'paragraph',
+            children: [
+                { text: '' },
+                {
+                    type: 'tag',
+                    value: value,
+                    label: (_c = choice.display_name) !== null && _c !== void 0 ? _c : value,
+                    metadata: __assign((_a = {}, _a[exports.CHOICE_CHIP_META] = true, _a), (description ? { description: description } : {})),
+                    children: [{ text: '' }],
+                },
+                { text: '' },
+            ],
+        },
+    ];
+};
+exports.choiceToNodes = choiceToNodes;
+var isChoiceChip = function (node) {
+    var _a;
+    return !!node &&
+        typeof node === 'object' &&
+        node.type === 'tag' &&
+        !!((_a = node.metadata) === null || _a === void 0 ? void 0 : _a[exports.CHOICE_CHIP_META]);
+};
+exports.isChoiceChip = isChoiceChip;
+/**
+ * The value a document is, when the document is one choice chip and nothing
+ * else; `undefined` when the author has written anything around it, in which
+ * case the document itself is the value.
+ */
+var choiceValueOfNodes = function (nodes) {
+    var _a, _b;
+    if (!Array.isArray(nodes) || nodes.length !== 1) {
+        return undefined;
+    }
+    var children = (_b = (_a = nodes[0]) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [];
+    var chips = children.filter(exports.isChoiceChip);
+    var text = children
+        .filter(function (node) { return !(0, exports.isChoiceChip)(node); })
+        .map(function (node) { return (typeof (node === null || node === void 0 ? void 0 : node.text) === 'string' ? node.text : '\u0000'); })
+        .join('');
+    return chips.length === 1 && text === '' ? chips[0].value : undefined;
+};
+exports.choiceValueOfNodes = choiceValueOfNodes;
+exports.DEFAULT_CHOICE_CHIP_BEHAVIOR = {
+    backspace: 'unwrap',
+    click: 'unwrap',
+};
+/** Where the node is in the document, by identity; the editor renders the document's own nodes, so a chip handed to a click handler is one of them. */
+var pathOfNode = function (editor, node) {
+    // Stepped by hand: the build target cannot iterate a generator (TS2802).
+    var nodes = slate_1.Node.nodes(editor);
+    for (var entry = nodes.next(); !entry.done; entry = nodes.next()) {
+        if (entry.value[0] === node) {
+            return entry.value[1];
+        }
+    }
+    return undefined;
+};
+exports.pathOfNode = pathOfNode;
+/**
+ * The chip the cursor is on: right after it with nothing between, where
+ * Backspace would take it, or inside it, where the arrow keys can leave the
+ * cursor. Nothing when the selection spans text or sits anywhere else.
+ */
+var choiceChipAtCursor = function (editor) {
+    var selection = editor.selection;
+    if (!selection || !slate_1.Range.isCollapsed(selection)) {
+        return undefined;
+    }
+    var _a = selection.anchor, path = _a.path, offset = _a.offset;
+    var inside = slate_1.Editor.above(editor, { at: path, match: exports.isChoiceChip, voids: true });
+    if (inside) {
+        return inside[1];
+    }
+    if (offset !== 0 || !slate_1.Path.hasPrevious(path)) {
+        return undefined;
+    }
+    var previous = slate_1.Path.previous(path);
+    return (0, exports.isChoiceChip)(slate_1.Node.get(editor, previous)) ? previous : undefined;
+};
+exports.choiceChipAtCursor = choiceChipAtCursor;
+/**
+ * Opens the chip at `path` into its value as plain text, the cursor at the
+ * end of the text: what the author read is what they chose, now editable
+ * letter by letter. The document is text from here on, and is stored as the
+ * field stores anything typed; it is drawn as a chip again only when it is
+ * read back as exactly one of the choices.
+ */
+var unwrapChoiceChip = function (editor, path) {
+    var chip = slate_1.Node.get(editor, path);
+    if (!(0, exports.isChoiceChip)(chip)) {
+        return false;
+    }
+    slate_1.Editor.withoutNormalizing(editor, function () {
+        slate_1.Transforms.removeNodes(editor, { at: path });
+        slate_1.Transforms.insertNodes(editor, [{ text: chip.value }], { at: path });
+        slate_1.Transforms.select(editor, slate_1.Editor.end(editor, path));
+    });
+    return true;
+};
+exports.unwrapChoiceChip = unwrapChoiceChip;
+//# sourceMappingURL=choiceChip.js.map

package/dist/helpers/choiceChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choiceChip.js","sourceRoot":"","sources":["../../src/helpers/choiceChip.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.10.62-pr.142.g62c577f",
+  "version": "0.10.62",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/engine/CompactRow.tsx

@@ -562,7 +562,7 @@ export const CompactRow = memo(
         !(field as { is_expression?: boolean }).is_expression &&
         (isValueTemplate(field.value) || !!findTemplate(ownTemplates ?? {}, field.value))
       ) {
-        return <ReadOnlyTemplateTag value={field.value} templates={ownTemplates} />;
+        return <ReadOnlyTemplateTag value={field.value} templates={ownTemplates} size='small' />;
       }
 
       // A LIST whose elements are rich-text envelopes is a list of strings, so it

package/src/components/form/engine/FormEngine.stories.tsx

@@ -9723,3 +9723,198 @@ const stickyBoxesStory = (layout: 'own' | 'host' | 'padded-host'): Story => ({
 export const BoxHeaderSlidesUnderToolbarOwnScroll: Story = stickyBoxesStory('own');
 export const BoxHeaderSlidesUnderToolbarHostScroll: Story = stickyBoxesStory('host');
 export const BoxHeaderSlidesUnderToolbarPaddedHost: Story = stickyBoxesStory('padded-host');
+
+/**
+ * A rich-text option's choices are picked from "Saved & Suggested Values",
+ * and picking one writes the choice's value: an author who chose the Slack
+ * channel "general" read `C07ERBFS0P6` in the editor. The value is what the
+ * server resolves, so it stays the value; the editor draws it by the name it
+ * was picked by. These two stories are the guard: one opens on the stored
+ * value, one performs the pick.
+ */
+const RICH_TEXT_CHOICE_OPTIONS = {
+  channel: {
+    type: 'richtext',
+    ui_type: 'richtext',
+    display_name: 'Channel',
+    short_desc: 'The channel to send the message to',
+    required: true,
+    allowed_values_creatable: true,
+    allowed_values: [
+      {
+        display_name: 'general',
+        short_desc: 'Company-wide announcements',
+        value: { type: 'richtext', value: 'C07ERBFS0P6' },
+      },
+      {
+        display_name: 'random',
+        short_desc: 'Anything goes',
+        value: { type: 'richtext', value: 'C07RANDOM01' },
+      },
+    ],
+  },
+} as never;
+
+const expectChannelChip = async (canvasElement: HTMLElement) => {
+  await waitFor(
+    () => {
+      const row = canvasElement.querySelector('[data-field="channel"]') as HTMLElement | null;
+      expect(row).toBeTruthy();
+      expect(row?.querySelector('.reqore-tag')?.textContent).toContain('general');
+      expect(row?.textContent).not.toContain('C07ERBFS0P6');
+    },
+    { timeout: 10000 }
+  );
+};
+
+export const RichTextChoiceIsShownByName: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a compact form whose rich-text Channel option holds the stored id of one of its choices, C07ERBFS0P6 — the editor shows one chip reading "general", and the id is not shown anywhere on the row.',
+      },
+    },
+  },
+  args: {
+    compact: true,
+    minColumnWidth: '360px',
+    initialExpandedOptions: ['channel'],
+    value: { channel: { type: 'richtext', value: 'C07ERBFS0P6' } },
+    options: RICH_TEXT_CHOICE_OPTIONS,
+  },
+  play: async ({ canvasElement }) => {
+    await expectChannelChip(canvasElement);
+  },
+};
+
+export const PickingARichTextChoiceShowsItsName: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a compact form with an empty rich-text Channel option. When "general" is picked from Saved & Suggested Values, the editor shows a chip reading "general" rather than the channel id it stores.',
+      },
+    },
+  },
+  args: {
+    compact: true,
+    minColumnWidth: '360px',
+    initialExpandedOptions: ['channel'],
+    value: {},
+    options: RICH_TEXT_CHOICE_OPTIONS,
+  },
+  play: async ({ canvasElement }) => {
+    await _testsClickText('Saved & Suggested Values');
+    await waitFor(
+      () => expect(within(document.body).getByText('general')).toBeInTheDocument(),
+      { timeout: 10000 }
+    );
+    await fireEvent.click(within(document.body).getByText('general'));
+
+    await expectChannelChip(canvasElement);
+  },
+};
+
+export const ARichTextChoiceRetypedReturnsToItsChip: Story = {
+  parameters: {
+    // Interaction-only: the play assertions are the guard, and the end state
+    // is already pictured by `RichTextChoiceIsShownByName`.
+    qlip: { skip: true },
+    docs: {
+      description: {
+        story:
+          'Renders a compact form whose rich-text Channel option shows its stored choice as the chip "general". A click opens the chip into C07ERBFS0P6 as text; Backspace makes the form emit C07ERBFS0P and a typed 6 makes it emit C07ERBFS0P6 again, each as a document and still shown as text while the author types; Tab out of the editor draws the chip "general" again and emits nothing further, since that document already stands for the choice.',
+      },
+    },
+  },
+  args: {
+    compact: true,
+    minColumnWidth: '360px',
+    initialExpandedOptions: ['channel'],
+    value: { channel: { type: 'richtext', value: 'C07ERBFS0P6' } },
+    options: RICH_TEXT_CHOICE_OPTIONS,
+  },
+  play: async ({ args, canvasElement }) => {
+    await expectChannelChip(canvasElement);
+    const row = canvasElement.querySelector('[data-field="channel"]') as HTMLElement;
+    const editor = row.querySelector('[contenteditable="true"]') as HTMLElement;
+
+    await userEvent.click(within(row).getByText('general'));
+    await waitFor(() => {
+      expect(editor.querySelector('.reqore-tag')).toBeNull();
+      expect(editor.contains(document.activeElement)).toBe(true);
+    });
+
+    const channelValue = (text: string) =>
+      expect.objectContaining({
+        channel: expect.objectContaining({ value: [{ type: 'paragraph', children: [{ text }] }] }),
+      });
+
+    // One key at a time, each emitted before the next: typed within the
+    // field's debounce, the two would settle as the value the field started
+    // with, and nothing would be emitted at all.
+    await userEvent.keyboard('{Backspace}');
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenLastCalledWith('test', channelValue('C07ERBFS0P'), undefined)
+    );
+    await userEvent.keyboard('6');
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenLastCalledWith('test', channelValue('C07ERBFS0P6'), undefined)
+    );
+    await expect(editor.querySelector('.reqore-tag')).toBeNull();
+
+    await userEvent.tab();
+    await expectChannelChip(canvasElement);
+    // Leaving the row changed nothing: the chip stands for what was emitted.
+    await expect(args.onChange).toHaveBeenLastCalledWith('test', channelValue('C07ERBFS0P6'), undefined);
+  },
+};
+
+export const ClickingARichTextChoiceEditsItsValue: Story = {
+  parameters: {
+    // Interaction-only: the play assertions are the guard, and the end state
+    // is already pictured by the compact rich-text rows.
+    qlip: { skip: true },
+    docs: {
+      description: {
+        story:
+          'Renders a compact form whose rich-text Channel option shows its stored choice as the chip "general". A click on the chip opens it into its value as editable text: the row shows C07ERBFS0P6 and no chip, with the cursor at the end, so Backspace and a typed 7 make it C07ERBFS0P7 — the value the form then emits for the option.',
+      },
+    },
+  },
+  args: {
+    compact: true,
+    minColumnWidth: '360px',
+    initialExpandedOptions: ['channel'],
+    value: { channel: { type: 'richtext', value: 'C07ERBFS0P6' } },
+    options: RICH_TEXT_CHOICE_OPTIONS,
+  },
+  play: async ({ args, canvasElement }) => {
+    await expectChannelChip(canvasElement);
+    const row = canvasElement.querySelector('[data-field="channel"]') as HTMLElement;
+    const editor = row.querySelector('[contenteditable="true"]') as HTMLElement;
+
+    // The chip's label: a tag binds its click to its content, not its frame.
+    await userEvent.click(within(row).getByText('general'));
+    await waitFor(() => {
+      expect(editor.querySelector('.reqore-tag')).toBeNull();
+      expect(editor.textContent).toBe('C07ERBFS0P6');
+      expect(editor.contains(document.activeElement)).toBe(true);
+    });
+
+    await userEvent.keyboard('{Backspace}7');
+    await waitFor(() => expect(editor.textContent).toBe('C07ERBFS0P7'));
+    await waitFor(() =>
+      expect(args.onChange).toHaveBeenLastCalledWith(
+        'test',
+        expect.objectContaining({
+          channel: expect.objectContaining({
+            value: [{ type: 'paragraph', children: [{ text: 'C07ERBFS0P7' }] }],
+          }),
+        }),
+        undefined
+      )
+    );
+  },
+};