英文:
Is there a straightforward way to remove existing FORMAT_TEXT_COMMAND from @Lexical/react?
问题
I thought there would be a plugin for this, but I can't find one anywhere. I would like to register a command that removes any 'bold', 'italic', or 'underline' from a selection when a clear formatting icon button is clicked.
我以为会有一个插件可以做到这一点，但我无法在任何地方找到。我想注册一个命令，当点击清除格式图标按钮时，从选择中删除任何“粗体”，“斜体”或“下划线”。
I have tried registering my own command like this:
我已经尝试注册我的自定义命令，像这样：
const CLEAR_FORMAT_COMMAND: LexicalCommand
and then in a useEffect:
然后在 useEffect 中：
useEffect(() => {
return mergeRegister(
editor.registerUpdateListener(({ editorState }) => {
editorState.read(() => {
updateToolbar();
})
}),
editor.registerCommand(
CLEAR_FORMAT_COMMAND,
() => {
clearFormat(editor);
return true;
},
COMMAND_PRIORITY_LOW,
)
);
}, [updateToolbar, editor]);
and then onClick of the clear formatting icon, these get called:
然后在清除格式图标的点击事件中，这些被调用：
editor.dispatchCommand(CLEAR_FORMAT_COMMAND, undefined)
editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
setBlockType('paragraph')
The REMOVE_LIST_COMMAND works as expected. For some reason, the custom one does not, and clearFormat function in the register command never gets fired. And if it did, I'm not sure what to do inside it. I was thinking something like this, but I have not been able to get the dispatchCommand working in order to test it:
REMOVE_LIST_COMMAND 的效果如预期。但出于某种原因，自定义命令不起作用，并且在注册命令中的 clearFormat 函数从未被调用。如果它确实被调用，我不确定要在其中做什么。我在考虑类似于以下内容，但是我无法使 dispatchCommand 起作用以进行测试：
const clearFormat = (editor: LexicalEditor) => {
editor.update(() => {
const selection = $getSelection();
if (selection.hasFormat('bold')) {
selection.toggleFormat('bold');
}
...
})
}
(Note: The code snippets provided are just for reference and might need further adjustments depending on your specific context and libraries.)
英文:
I thought there would be a plugin for this, but I can't find one anywhere. I would like to register a command that removes any 'bold', 'italic', or 'underline' from a selection when a clear formatting icon button is clicked.
I have tried registering my own command like this:
const CLEAR_FORMAT_COMMAND: LexicalCommand<void> = createCommand();
and then in a useEffect:
useEffect(() => {
return mergeRegister(
editor.registerUpdateListener(({ editorState }) => {
editorState.read(() => {
updateToolbar();
})
}),
editor.registerCommand(
CLEAR_FORMAT_COMMAND,
() => {
clearFormat(editor);
return true;
},
COMMAND_PRIORITY_LOW,
)
);
}, [updateToolbar, editor]);
and then onClick of the clear formatting icon, these get called:
editor.dispatchCommand(CLEAR_FORMAT_COMMAND, undefined)
editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
setBlockType('paragraph')
The REMOVE_LIST_COMMAND works as expected. For some reason, the custom one does not, and clearFormat function in the register command never gets fired. And if it did, I'm not sure what to do inside it. I was thinking something like this, but I have not been able to get the dispatchCommand working in order to test it:
const clearFormat = (editor:LexicalEditor) => {
editor.update(() => {
const selection = $getSelection();
if (selection.hasFormat('bold')) {
selection.toggleFormat('bold');
}
...
})
}
</details>
# 答案1
**得分**: 1
这是在我的情况下使用 lexical 0.11.1 正常工作的代码：
```javascript
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
selection.getNodes().forEach((node) => {
if ($isTextNode(node)) {
node.setFormat(0);
node.setStyle("");
} else if ($isLinkNode(node)) {
const children = node.getChildren();
for (const child of children) {
node.insertBefore(child);
}
node.remove();
}
});
$setBlocksType(selection, () => $createParagraphNode());
}
});
希望这对你有帮助。
英文:
This is working for me with lexical 0.11.1:
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
selection.getNodes().forEach((node) => {
if ($isTextNode(node)) {
node.setFormat(0);
node.setStyle("");
} else if ($isLinkNode(node)) {
const children = node.getChildren();
for (const child of children) {
node.insertBefore(child);
}
node.remove();
}
});
$setBlocksType(selection, () => $createParagraphNode());
}
});
答案2
得分: 1
这看起来仍然在游乐场内，嵌套在下拉菜单中。这是 clearFormatting 这里的函数。我的实现更简单，所以我只是使用了：
const clearFormat = useCallback(() => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
selection.getNodes().forEach((node) => {
if ($isTextNode(node)) {
node.setFormat(0);
}
});
}
});
}, [editor]);
英文:
It looks like it is still in the playground, nested in a dropdown. It's the clearFormatting function here. My implementation is simpler, so I just used:
const clearFormat = useCallback(() => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
selection.getNodes().forEach((node) => {
if ($isTextNode(node)) {
node.setFormat(0);
}
});
}
});
}, [editor]);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论