@portabletext/plugin-emoji-picker 1.0.3 → 1.0.4

package/dist/index.js

@@ -1,12 +1,11 @@
 import { c } from "react/compiler-runtime";
 import { useEditor } from "@portabletext/editor";
 import { useActorRef, useSelector } from "@xstate/react";
-import { raise, defineBehavior, effect, forward } from "@portabletext/editor/behaviors";
-import * as selectors from "@portabletext/editor/selectors";
-import * as utils from "@portabletext/editor/utils";
+import { raise, defineBehavior, effect } from "@portabletext/editor/behaviors";
+import { getFocusSpan, isPointAfterSelection, isPointBeforeSelection, getMarkState, getNextSpan } from "@portabletext/editor/selectors";
 import { createKeyboardShortcut } from "@portabletext/keyboard-shortcuts";
 import { defineInputRule, defineInputRuleBehavior } from "@portabletext/plugin-input-rule";
-import { setup, or, not, assign, sendTo, fromCallback, assertEvent } from "xstate";
+import { setup, not, assign, sendTo, fromCallback, assertEvent } from "xstate";
 function createMatchEmojis(config) {
   return ({
     keyword
@@ -62,22 +61,99 @@ const arrowUpShortcut = createKeyboardShortcut({
   default: [{
     key: "Escape"
   }]
-}), triggerRule = defineInputRule({
+}), getTriggerState = (snapshot) => {
+  const focusSpan = getFocusSpan(snapshot), markState = getMarkState(snapshot);
+  if (!focusSpan || !markState || !snapshot.context.selection)
+    return;
+  const focusSpanTextBefore = focusSpan.node.text.slice(0, snapshot.context.selection.focus.offset), focusSpanTextAfter = focusSpan.node.text.slice(snapshot.context.selection.focus.offset), nextSpan = getNextSpan(snapshot);
+  return {
+    focusSpan,
+    markState,
+    focusSpanTextBefore,
+    focusSpanTextAfter,
+    nextSpan
+  };
+};
+function createTriggerActions({
+  snapshot,
+  payload,
+  keywordState
+}) {
+  if (payload.markState.state === "unchanged") {
+    const focusSpan2 = {
+      node: {
+        _key: payload.focusSpan.node._key,
+        _type: payload.focusSpan.node._type,
+        text: `${payload.focusSpanTextBefore}${payload.lastMatch.text}${payload.focusSpanTextAfter}`,
+        marks: payload.markState.marks
+      },
+      path: payload.focusSpan.path,
+      textBefore: payload.focusSpanTextBefore,
+      textAfter: payload.focusSpanTextAfter
+    };
+    return keywordState === "complete" ? [raise(createKeywordFoundEvent({
+      focusSpan: focusSpan2
+    }))] : [raise(createTriggerFoundEvent({
+      focusSpan: focusSpan2
+    }))];
+  }
+  const newSpan = {
+    _key: snapshot.context.keyGenerator(),
+    _type: payload.focusSpan.node._type,
+    text: payload.lastMatch.text,
+    marks: payload.markState.marks
+  }, focusSpan = {
+    node: {
+      _key: newSpan._key,
+      _type: newSpan._type,
+      text: `${newSpan.text}${payload.nextSpan?.node.text ?? ""}`,
+      marks: payload.markState.marks
+    },
+    path: [{
+      _key: payload.focusSpan.path[0]._key
+    }, "children", {
+      _key: newSpan._key
+    }],
+    textBefore: "",
+    textAfter: payload.nextSpan?.node.text ?? ""
+  };
+  return [raise({
+    type: "select",
+    at: payload.lastMatch.targetOffsets
+  }), raise({
+    type: "delete",
+    at: payload.lastMatch.targetOffsets
+  }), raise({
+    type: "insert.child",
+    child: newSpan
+  }), ...keywordState === "complete" ? [raise(createKeywordFoundEvent({
+    focusSpan
+  }))] : [raise(createTriggerFoundEvent({
+    focusSpan
+  }))]];
+}
+const triggerRule = defineInputRule({
   on: /:/,
   guard: ({
+    snapshot,
     event
   }) => {
     const lastMatch = event.matches.at(-1);
-    return lastMatch === void 0 ? !1 : {
-      keyword: lastMatch.text,
-      keywordAnchor: {
-        point: lastMatch.selection.anchor,
-        blockOffset: lastMatch.targetOffsets.anchor
-      },
-      keywordFocus: lastMatch.targetOffsets.focus
-    };
+    if (lastMatch === void 0)
+      return !1;
+    const triggerState = getTriggerState(snapshot);
+    return triggerState ? {
+      lastMatch,
+      ...triggerState
+    } : !1;
   },
-  actions: [(_, payload) => [raise(createTriggerFoundEvent(payload))]]
+  actions: [({
+    snapshot
+  }, payload) => createTriggerActions({
+    snapshot,
+    payload,
+    keywordState: "partial"
+  })]
 });
 function createTriggerFoundEvent(payload) {
   return {
@@ -88,48 +164,47 @@ function createTriggerFoundEvent(payload) {
 const partialKeywordRule = defineInputRule({
   on: /:[\S]+/,
   guard: ({
+    snapshot,
     event
   }) => {
     const lastMatch = event.matches.at(-1);
-    if (lastMatch === void 0)
+    if (lastMatch === void 0 || lastMatch.targetOffsets.anchor.offset < event.textBefore.length)
       return !1;
-    const keyword = lastMatch.text, keywordAnchor = {
-      point: lastMatch.selection.anchor,
-      blockOffset: lastMatch.targetOffsets.anchor
-    }, keywordFocus = lastMatch.targetOffsets.focus;
-    return {
-      keyword,
-      keywordAnchor,
-      keywordFocus
-    };
+    const triggerState = getTriggerState(snapshot);
+    return triggerState ? {
+      ...triggerState,
+      lastMatch
+    } : !1;
   },
-  actions: [(_, payload) => [raise(createPartialKeywordFoundEvent(payload))]]
-});
-function createPartialKeywordFoundEvent(payload) {
-  return {
-    type: "custom.partial keyword found",
-    ...payload
-  };
-}
-const keywordRule = defineInputRule({
+  actions: [({
+    snapshot
+  }, payload) => createTriggerActions({
+    snapshot,
+    payload,
+    keywordState: "partial"
+  })]
+}), keywordRule = defineInputRule({
   on: /:[\S]+:/,
   guard: ({
+    snapshot,
     event
   }) => {
     const lastMatch = event.matches.at(-1);
-    if (lastMatch === void 0)
+    if (lastMatch === void 0 || lastMatch.targetOffsets.anchor.offset < event.textBefore.length)
       return !1;
-    const keyword = lastMatch.text, keywordAnchor = {
-      point: lastMatch.selection.anchor,
-      blockOffset: lastMatch.targetOffsets.anchor
-    }, keywordFocus = lastMatch.targetOffsets.focus;
-    return {
-      keyword,
-      keywordAnchor,
-      keywordFocus
-    };
+    const triggerState = getTriggerState(snapshot);
+    return triggerState ? {
+      ...triggerState,
+      lastMatch
+    } : !1;
   },
-  actions: [(_, payload) => [raise(createKeywordFoundEvent(payload))]]
+  actions: [({
+    snapshot
+  }, payload) => createTriggerActions({
+    snapshot,
+    payload,
+    keywordState: "complete"
+  })]
 });
 function createKeywordFoundEvent(payload) {
   return {
@@ -154,15 +229,6 @@ const triggerListenerCallback = ({
         sendBack(event);
       })]]
     })
-  }), input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: "custom.partial keyword found",
-      actions: [({
-        event
-      }) => [effect(() => {
-        sendBack(event);
-      })]]
-    })
   }), input.editor.registerBehavior({
     behavior: defineBehavior({
       on: "custom.trigger found",
@@ -238,10 +304,16 @@ const triggerListenerCallback = ({
         type: "dismiss"
       });
     }), raise({
-      type: "delete.text",
+      type: "delete",
       at: {
-        anchor: event.anchor,
-        focus: event.focus
+        anchor: {
+          path: event.focusSpan.path,
+          offset: event.focusSpan.textBefore.length
+        },
+        focus: {
+          path: event.focusSpan.path,
+          offset: event.focusSpan.node.text.length - event.focusSpan.textAfter.length
+        }
       }
     }), raise({
       type: "insert.text",
@@ -265,22 +337,19 @@ const triggerListenerCallback = ({
       }) => {
         if (!enterShortcut.guard(event.originEvent) && !tabShortcut.guard(event.originEvent))
           return !1;
-        const anchor = context.keywordAnchor?.blockOffset, focus = context.keywordFocus, match = context.matches[context.selectedIndex];
-        return match && anchor && focus ? {
-          anchor,
-          focus,
+        const focusSpan = context.focusSpan, match = context.matches[context.selectedIndex];
+        return match && focusSpan ? {
+          focusSpan,
           emoji: match.emoji
         } : !1;
       },
       actions: [(_, {
-        anchor,
-        focus,
+        focusSpan,
         emoji
       }) => [raise({
         type: "custom.insert emoji",
         emoji,
-        anchor,
-        focus
+        focusSpan
       })]]
     })
   }), input.context.editor.registerBehavior({
@@ -295,19 +364,6 @@ const triggerListenerCallback = ({
         });
       })]]
     })
-  }), input.context.editor.registerBehavior({
-    behavior: defineInputRuleBehavior({
-      rules: [keywordRule]
-    })
-  }), input.context.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: "custom.keyword found",
-      actions: [({
-        event
-      }) => [effect(() => {
-        sendBack(event);
-      })]]
-    })
   })];
   return () => {
     for (const unregister of unregisterBehaviors)
@@ -322,75 +378,7 @@ const triggerListenerCallback = ({
     type: "selection changed",
     snapshot
   });
-}).unsubscribe, textChangeListener = ({
-  sendBack,
-  input
-}) => {
-  const unregisterBehaviors = [input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: "insert.text",
-      guard: ({
-        snapshot
-      }) => snapshot.context.selection ? {
-        focus: snapshot.context.selection.focus
-      } : !1,
-      actions: [({
-        event
-      }, {
-        focus
-      }) => [effect(() => {
-        sendBack({
-          ...event,
-          focus
-        });
-      }), forward(event)]]
-    })
-  }), input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: "delete.backward",
-      guard: ({
-        snapshot,
-        event
-      }) => event.unit === "character" && snapshot.context.selection ? {
-        focus: snapshot.context.selection.focus
-      } : !1,
-      actions: [({
-        event
-      }, {
-        focus
-      }) => [effect(() => {
-        sendBack({
-          type: "delete.backward",
-          focus
-        });
-      }), forward(event)]]
-    })
-  }), input.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: "delete.forward",
-      guard: ({
-        snapshot,
-        event
-      }) => event.unit === "character" && snapshot.context.selection ? {
-        focus: snapshot.context.selection.focus
-      } : !1,
-      actions: [({
-        event
-      }, {
-        focus
-      }) => [effect(() => {
-        sendBack({
-          type: "delete.forward",
-          focus
-        });
-      }), forward(event)]]
-    })
-  })];
-  return () => {
-    for (const unregister of unregisterBehaviors)
-      unregister();
-  };
-}, emojiPickerMachine = setup({
+}).unsubscribe, emojiPickerMachine = setup({
   types: {
     context: {},
     input: {},
@@ -402,60 +390,44 @@ const triggerListenerCallback = ({
     "arrow listener": fromCallback(arrowListenerCallback),
     "trigger listener": fromCallback(triggerListenerCallback),
     "escape listener": fromCallback(escapeListenerCallback),
-    "selection listener": fromCallback(selectionListenerCallback),
-    "text change listener": fromCallback(textChangeListener)
+    "selection listener": fromCallback(selectionListenerCallback)
   },
   actions: {
-    "init keyword": assign({
-      keyword: ({
-        context,
-        event
-      }) => event.type !== "custom.trigger found" && event.type !== "custom.partial keyword found" && event.type !== "custom.keyword found" ? context.keyword : event.keyword
-    }),
-    "set keyword anchor": assign({
-      keywordAnchor: ({
+    "set focus span": assign({
+      focusSpan: ({
         context,
         event
-      }) => event.type !== "custom.trigger found" && event.type !== "custom.partial keyword found" && event.type !== "custom.keyword found" ? context.keywordAnchor : event.keywordAnchor
+      }) => event.type !== "custom.trigger found" && event.type !== "custom.keyword found" ? context.focusSpan : event.focusSpan
     }),
-    "set keyword focus": assign({
-      keywordFocus: ({
-        context,
-        event
-      }) => event.type !== "custom.trigger found" && event.type !== "custom.partial keyword found" && event.type !== "custom.keyword found" ? context.keywordFocus : event.keywordFocus
-    }),
-    "update keyword focus": assign({
-      keywordFocus: ({
-        context,
-        event
-      }) => (assertEvent(event, ["insert.text", "delete.backward", "delete.forward"]), context.keywordFocus ? {
-        path: context.keywordFocus.path,
-        offset: event.type === "insert.text" ? context.keywordFocus.offset + event.text.length : event.type === "delete.backward" || event.type === "delete.forward" ? context.keywordFocus.offset - 1 : event.focus.offset
-      } : context.keywordFocus)
+    "update focus span": assign({
+      focusSpan: ({
+        context
+      }) => {
+        if (!context.focusSpan)
+          return;
+        const snapshot = context.editor.getSnapshot(), focusSpan = getFocusSpan(snapshot);
+        if (!focusSpan || JSON.stringify(focusSpan.path) !== JSON.stringify(context.focusSpan.path) || !focusSpan.node.text.startsWith(context.focusSpan.textBefore) || !focusSpan.node.text.endsWith(context.focusSpan.textAfter))
+          return;
+        const keywordAnchor = {
+          path: focusSpan.path,
+          offset: context.focusSpan.textBefore.length
+        }, keywordFocus = {
+          path: focusSpan.path,
+          offset: focusSpan.node.text.length - context.focusSpan.textAfter.length
+        }, selectionIsBeforeKeyword = isPointAfterSelection(keywordAnchor)(snapshot), selectionIsAfterKeyword = isPointBeforeSelection(keywordFocus)(snapshot);
+        if (!(selectionIsBeforeKeyword || selectionIsAfterKeyword))
+          return {
+            node: focusSpan.node,
+            path: focusSpan.path,
+            textBefore: context.focusSpan.textBefore,
+            textAfter: context.focusSpan.textAfter
+          };
+      }
     }),
     "update keyword": assign({
       keyword: ({
-        context,
-        event
-      }) => {
-        if (assertEvent(event, "selection changed"), !context.keywordAnchor || !context.keywordFocus)
-          return "";
-        const keywordFocusPoint = utils.blockOffsetToSpanSelectionPoint({
-          context: event.snapshot.context,
-          blockOffset: context.keywordFocus,
-          direction: "forward"
-        });
-        return keywordFocusPoint ? selectors.getSelectionText({
-          ...event.snapshot,
-          context: {
-            ...event.snapshot.context,
-            selection: {
-              anchor: context.keywordAnchor.point,
-              focus: keywordFocusPoint
-            }
-          }
-        }) : "";
-      }
+        context
+      }) => context.focusSpan ? context.focusSpan.textBefore.length > 0 && context.focusSpan.textAfter.length > 0 ? context.focusSpan.node.text.slice(context.focusSpan.textBefore.length, -context.focusSpan.textAfter.length) : context.focusSpan.textBefore.length > 0 ? context.focusSpan.node.text.slice(context.focusSpan.textBefore.length) : context.focusSpan.textAfter.length > 0 ? context.focusSpan.node.text.slice(0, -context.focusSpan.textAfter.length) : context.focusSpan.node.text : ""
     }),
     "update matches": assign({
       matches: ({
@@ -485,12 +457,6 @@ const triggerListenerCallback = ({
         event
       }) => (assertEvent(event, "navigate to"), event.index)
     }),
-    "update emoji insert listener context": sendTo("emoji insert listener", ({
-      context
-    }) => ({
-      type: "context changed",
-      context
-    })),
     "update submit listener context": sendTo("submit listener", ({
       context
     }) => ({
@@ -498,86 +464,52 @@ const triggerListenerCallback = ({
       context
     })),
     "insert selected match": ({
-      context,
-      event
+      context
     }) => {
       const match = context.matches[context.selectedIndex];
-      !match || !context.keywordAnchor || !context.keywordFocus || event.type === "custom.keyword found" && match.type !== "exact" || context.editor.send({
+      !match || !context.focusSpan || context.editor.send({
         type: "custom.insert emoji",
         emoji: match.emoji,
-        anchor: context.keywordAnchor.blockOffset,
-        focus: context.keywordFocus
+        focusSpan: context.focusSpan
       });
     },
     reset: assign({
-      keywordAnchor: void 0,
-      keywordFocus: void 0,
+      focusSpan: void 0,
       keyword: "",
       matches: [],
       selectedIndex: 0
     })
   },
   guards: {
+    "no focus span": ({
+      context
+    }) => !context.focusSpan,
     "has matches": ({
       context
     }) => context.matches.length > 0,
     "no matches": not("has matches"),
-    "keyword is wel-formed": ({
+    "keyword is malformed": ({
+      context
+    }) => !context.incompleteKeywordRegex.test(context.keyword),
+    "keyword is direct match": ({
       context
-    }) => context.incompleteKeywordRegex.test(context.keyword),
-    "keyword is malformed": not("keyword is wel-formed"),
-    "selection is before keyword": ({
-      context,
-      event
-    }) => (assertEvent(event, "selection changed"), context.keywordAnchor ? selectors.isPointAfterSelection(context.keywordAnchor.point)(event.snapshot) : !0),
-    "selection is after keyword": ({
-      context,
-      event
-    }) => {
-      if (assertEvent(event, "selection changed"), context.keywordFocus === void 0)
-        return !0;
-      const keywordFocusPoint = utils.blockOffsetToSpanSelectionPoint({
-        context: event.snapshot.context,
-        blockOffset: context.keywordFocus,
-        direction: "forward"
-      });
-      return keywordFocusPoint ? selectors.isPointBeforeSelection(keywordFocusPoint)(event.snapshot) : !0;
-    },
-    "selection is expanded": ({
-      event
-    }) => (assertEvent(event, "selection changed"), selectors.isSelectionExpanded(event.snapshot)),
-    "selection moved unexpectedly": or(["selection is before keyword", "selection is after keyword", "selection is expanded"]),
-    "unexpected text insertion": ({
-      context,
-      event
     }) => {
-      if (event.type !== "insert.text" || !context.keywordAnchor)
+      if (!/^:[\S]+:$/.test(context.keyword))
         return !1;
-      const snapshot = context.editor.getSnapshot();
-      return selectors.isPointBeforeSelection(event.focus)({
-        ...snapshot,
-        context: {
-          ...snapshot.context,
-          selection: {
-            anchor: context.keywordAnchor.point,
-            focus: context.keywordAnchor.point
-          }
-        }
-      }) || utils.isEqualSelectionPoints(event.focus, context.keywordAnchor.point);
+      const match = context.matches.at(context.selectedIndex);
+      return !(!match || match.type !== "exact");
     }
   }
 }).createMachine({
-  /** @xstate-layout N4IgpgJg5mDOIC5RgLYHsBWBLABABywGMBrMAJwDosIAbMAYkLRrQDsctXZyAXSAbQAMAXUSg8aWFh5Y2YkAA9EARmUB2AJwUAzADYNADgCs65YO1q1ygDQgAnojUG1O5c+W7tAJmdfdRgF8A21RMXAIScgpuAEMyQgALTih6Tm4yHgo+BR4hUSQQCSkZOQKlBABaZW0DHSMAFksNQUF6oyNzL1sHBC9vCnrGtS8GtQaNNt0gkPRsfCJSSlj4pNYUiDA6PgoAMzQyAHc4iDz5IulZVnlyr3MKE30LA31DZoNuxD6vAaHdP29vOo1NNwLNwgsostEsl6BstmAKAAjGIkI5kE4iM6SC6lUDlerabT3arDfS3eoaPQfXr9QaWEaNcaTEGhOYRRbRMBxaFrWFYWAofmwU4Fc4lK5lFTqWqDAwUjReeoGbwaNTU1TPCh-QxNNS6XQGHwssHzSJLLkrGHcOiEcU4RIxNYCTGi7Hi66IfxE1oeZX1EbeZXUhUUZSKjxOOV6bTmY1hU0cqGrFLWsC2y72hKOmAnZT5cRuy4ehDVXQUVXDIyWGpmAzveyfLRKwQaVRVwR1ixeONsiHm7nJ+gigvFIuSkvKVuhgwaEwKmMKwbqkaCAaverqVuvKbBUHx9mQi08qAUVhoHAoGI8RJwHCwBJoA4w4eFQu4xSfaoDA3KOmCVSTn06r-i4-hGH0ZiEoI4H1D24JmpyA7JNED5PmsF5XjesD0KwMQAG5YFAV5gDgECPqwL5imOeKIIM9ShsoRh1i2erPB41L6C40GqISUb6n8cEJoeSFrChj7JBh14JHAOH4YRxE4AArnglFvhKNEIGoq4+E0yraPULa6PUHGqhQ3HVDUBL8dogkHv2lqife4noZeUkybhBFEXwOA8Ggqmju+5RGPqFBqP6ujDD4v4tjYDYIMqLjVKo5gdM4TGBLurLwYmR7JmJaFQJJWGpFwvB3psaZ8BARUJP5OLqR+CD1Loq5ymYfyeP4spGOqv70fpv7NBSBKtBlMz7n2iEOSeTkFTVMl1e645eB49wGP+K0UpBbjaMBzQUF4IzBYq7TNa2QS7meGzwAUWVCWQWIBQ15RVJq2ijJoLRtB03jUhUVYUHKtz-gqeoxkYGi2ZN1B0I99XFqobTlh4-5-Ot4H1j0ZirbcENhR4RmKrBmUmnZU3HnDS0aVUjHlh2cqtkqfTBdSSr0RMGieBS7htASUMIUmyFnvNsB3qhySU9RjUVBFdN1ltTPvbowZOGZEWHe9xgTHo-M5SJM3iy5mHSTdI7w+OlnlgY6heJzbgUv4ytxaqtSCBFg1eJFM4XQEQA */
   id: "emoji picker",
   context: ({
     input
   }) => ({
     editor: input.editor,
     keyword: "",
-    keywordAnchor: void 0,
-    keywordFocus: void 0,
+    focusSpan: void 0,
     matchEmojis: input.matchEmojis,
-    incompleteKeywordRegex: /:[\S]*$/,
+    incompleteKeywordRegex: /^:[\S]*$/,
     matches: [],
     selectedIndex: 0
   }),
@@ -605,14 +537,10 @@ const triggerListenerCallback = ({
       on: {
         "custom.trigger found": {
           target: "searching",
-          actions: ["set keyword anchor", "set keyword focus", "init keyword"]
-        },
-        "custom.partial keyword found": {
-          target: "searching",
-          actions: ["set keyword anchor", "set keyword focus", "init keyword"]
+          actions: ["set focus span", "update keyword"]
         },
         "custom.keyword found": {
-          actions: ["set keyword anchor", "set keyword focus", "init keyword", "update matches", "insert selected match"],
+          actions: ["set focus span", "update keyword", "update matches", "insert selected match"],
           target: "idle",
           reenter: !0
         }
@@ -641,43 +569,25 @@ const triggerListenerCallback = ({
         }) => ({
           editor: context.editor
         })
-      }, {
-        src: "text change listener",
-        input: ({
-          context
-        }) => ({
-          editor: context.editor
-        })
       }],
       on: {
-        "custom.keyword found": {
-          actions: ["set keyword anchor", "set keyword focus", "init keyword", "update matches", "insert selected match"]
-        },
-        "insert.text": [{
-          guard: "unexpected text insertion",
-          target: "idle"
-        }, {
-          actions: ["update keyword focus"]
-        }],
-        "delete.forward": {
-          actions: ["update keyword focus"]
-        },
-        "delete.backward": {
-          actions: ["update keyword focus"]
-        },
         dismiss: {
           target: "idle"
         },
         "selection changed": [{
-          guard: "selection moved unexpectedly",
-          target: "idle"
-        }, {
-          actions: ["update keyword", "update matches", "reset selected index", "update submit listener context"]
+          actions: ["update focus span", "update keyword", "update matches", "reset selected index", "update submit listener context"]
         }]
       },
       always: [{
+        guard: "no focus span",
+        target: "idle"
+      }, {
         guard: "keyword is malformed",
         target: "idle"
+      }, {
+        guard: "keyword is direct match",
+        actions: ["insert selected match"],
+        target: "idle"
       }],
       initial: "no matches showing",
       states: {