onOpen()

in packages/storybook/stories/react-use-popup.stories.tsx [45:81]


    onOpen(state) {
      const { bounds, target, payload } = state
      assert(target)
      const { computedStyle } = target.paragraph

      const style: CSSProperties = {
        position: 'absolute',
        left: bounds.left,
        top: bounds.top,
        width: bounds.width,
        height: bounds.height,
        background: 'transparent',
        border: payload?.border ?? 'none', // 可以获取 payload
        margin: 0,
        padding: 0,
        outline: 'none',
        font: computedStyle.font,
        color: computedStyle.color,
        lineHeight: `${computedStyle.lineHeight}px`, // 不加 px 会被识别成按字体大小比例行高
        textRendering: 'geometricPrecision',
        textDecoration: 'none',
      }

      const handleBlur = () => {
        state.close()
      }

      setEditor(
        <textarea
          ref={editorRef}
          autoFocus={true}
          onBlur={handleBlur}
          style={style}
          defaultValue={value}
        />
      )
    },