javascript 如何创建一个超链接插入模态而不丢失文本选择?

toiithl6  于 2022-12-02  发布在  Java
关注(0)|答案(2)|浏览(82)

我有一个React网站使用Slate-React Slate使用浏览器的prompt()函数将超链接应用到选定的文本,但我需要能够设置提示模式的样式,因此我必须找到替代方法。然而,如果我创建一个带有输入字段的简单Javascript弹出窗口,一旦焦点被应用到模态,所选择的文本就被取消选择,因此没有链接被插入。
有没有办法将焦点移到另一个元素上,同时保持原始文本处于选中状态?
实际上,我尝试模仿Google Docs使用的“插入超链接”功能/样式:

wqlqzqxt

wqlqzqxt1#

您可以让此选择处于状态,并使用此选择传递一些属性以在此选择上应用链接您可以通过使用Transforms.select(editor, thisSelection),然后应用链接来完成此操作

wqlqzqxt

wqlqzqxt2#

这是相当困难的,特别是如果你要创建一个可访问的模态来捕获输入。

const handleSave = (inputText: string, url: string, caretPosition: number, remove = false) => {
        let removalOffset = 0;
        let prevPath = null;
        if (remove && Path.hasPrevious(linkPath)) {
          prevPath = Path.previous(linkPath);
          const prevNode = Node.first(editor, prevPath)[0];
          removalOffset = Node.string(prevNode).length;
        }
        Transforms.insertText(editor, inputText, { at: { path: linkPath, offset: 0 } });
        Transforms.delete(editor, {
          at: {
            anchor: { path: linkPath, offset: inputText.length },
            focus: { path: linkPath, offset: text.text.length + inputText.length }
          }
        });
        Transforms.setNodes(
          editor,
          remove ? { link: undefined, url: undefined, linkOpen: undefined } : { linkOpen: undefined, url },
          { at: linkPath }
        );
        handleClose();
        if (!remove) {
          setPointer(inputText, caretPosition, linkPath);
        } else if (prevPath !== null) {
          setPointer(inputText, removalOffset + caretPosition, prevPath);
        }
};

setPointer函数调用Transforms.select。但是,如果要在模态中捕获输入以获得可访问性,则可能需要异步运行它。

相关问题