WordPress Gutenberg Popover，如何在cursor处将position？

Question

我有一个Popover组件，我想在 cursor 上显示 position。例如，在RichText组件中，如果用户的 cursor 位于句子的开头/中间/结尾，则 Popover 将根据cursor目前在。

我希望它如何出现的快速 Photoshop：

工具栏链接 Popover 的基本工作原理。

---

我在这上面花了一整天，这是我最接近的一次。 在没有选择文本时有效，但在选择文本时无效。 选择文本后，它会出现在屏幕的左上角，就好像没有提供定位一样。

import {
    registerFormatType,
    toggleFormat,
    useAnchorRef,
} from '@wordpress/rich-text';
import { Fragment } from '@wordpress/element';
import { BlockControls, RichTextShortcut } from '@wordpress/block-editor';
import { Popover, ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { displayShortcut } from '@wordpress/keycodes';
import { __ } from '@wordpress/i18n';

const InsertMyPopup = {
    name: 'insertmypopup',
    title: __('My Popup'),
    character: 'o',
    value: '',
};

const { name, title, character } = InsertMyPopup;
const type = `my-popup/${name}`;


registerFormatType(type, {
    title,
    tagName: name,
    className: null,
    active: false,

    edit({ isActive, value, onChange, contentRef }) {
        const anchorRef = useAnchorRef({ ref: contentRef, value });

        const onToggle = () => {
            onChange(toggleFormat(value, { type }));
        };

        const thePopover = isActive && (
            <Popover
                placement='bottom-start'
                focusOnMount='firstElement'
                key='my-popover'
                expandOnMobile={true}
                headerTitle={__(
                    'My Popup',
                    'insert-my-popup'
                )}
                onClose={() => {
                    onChange(toggleFormat(value, { type }));
                }}
                anchorRef={anchorRef}
            >
                Popup
            </Popover>
        );

        return (
            <Fragment>
                <BlockControls group='other'>
                    <ToolbarGroup>
                        <ToolbarButton
                            icon='editor-customchar'
                            isPressed={isActive}
                            label={title}
                            onClick={onToggle}
                            shortcut={displayShortcut.primary(character)}
                        />
                    </ToolbarGroup>
                </BlockControls>
                <Fragment>
                    <RichTextShortcut
                        type='primary'
                        character={character}
                        onUse={onToggle}
                        contentRef={contentRef}
                    />
                </Fragment>
                {thePopover}
            </Fragment>
        );
    },
});

Answer 1

2 天后，终于弄明白了，摆脱了 useAnchorRef 并为 anchorRange 和 anchorRect 创建了一个 var 来存储定位。 仍然很想找到一种方法来使用新的 prop 锚点而不是 Popover 组件的已弃用的 prop 锚点。 我会离开这个？ 打开希望有人有想法。

import {
    registerFormatType,
    toggleFormat
} from '@wordpress/rich-text';
import { Fragment } from '@wordpress/element';
import { BlockControls, RichTextShortcut } from '@wordpress/block-editor';
import { Popover, ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { displayShortcut } from '@wordpress/keycodes';
import { __ } from '@wordpress/i18n';

const InsertMyPopup = {
    name: 'insertmypopup',
    title: __('My Popup'),
    character: 'o',
    value: '',
};

const { name, title, character } = InsertMyPopup;
const type = `my-popup/${name}`;
let anchorRange;
let anchorRect;

registerFormatType(type, {
    title,
    tagName: name,
    className: null,
    active: false,

    edit({ isActive, value, onChange, contentRef }) {
        const onToggle = () => {
            // Set up the anchorRange when the Popover is opened.
            const selection = document.defaultView.getSelection();

            anchorRange =
                selection.rangeCount > 0 ? selection.getRangeAt(0) : null;

            // Pin the Popover to the caret position.
            const boundingClientRect = anchorRange
                ? anchorRange.getBoundingClientRect()
                : null;

            anchorRect = anchorRange ? () => boundingClientRect : null;
            onChange(toggleFormat(value, { type }));
        };

        const thePopover = isActive && (
            <Popover
                placement='bottom-start'
                focusOnMount='firstElement'
                key='my-popover'
                expandOnMobile={true}
                headerTitle={__(
                    'My Popup',
                    'insert-my-popup'
                )}
                onClose={() => {
                    onChange(toggleFormat(value, { type }));
                }}
                getAnchorRect={anchorRect}
            >
                Popup
            </Popover>
        );

        return (
            <Fragment>
                <BlockControls group='other'>
                    <ToolbarGroup>
                        <ToolbarButton
                            icon='editor-customchar'
                            isPressed={isActive}
                            label={title}
                            onClick={onToggle}
                            shortcut={displayShortcut.primary(character)}
                        />
                    </ToolbarGroup>
                </BlockControls>
                <Fragment>
                    <RichTextShortcut
                        type='primary'
                        character={character}
                        onUse={onToggle}
                        contentRef={contentRef}
                    />
                </Fragment>
                {thePopover}
            </Fragment>
        );
    },
});