Final comment editor
Context sharing the final comment editor ref between the editor and the submit action.
Import from @workspace/ui-bridge/context/final-comment-editor-context.
Overview
The editor itself is RichEditor from @workspace/ui-rich-text; this context only carries its ref. BridgePrimitivesProvider (@workspace/ui-bridge/provider) mounts it together with BridgeProvider, see Usage.
The Final Comment Editor context provides a way to share a BridgeEditorRef across components without prop drilling. This is used when the editor and the submit button live in different parts of the component tree.
FinalCommentEditorProvider
Wraps a component tree to provide access to the final comment editor ref.
import { FinalCommentEditorProvider } from '@workspace/ui-bridge/context/final-comment-editor-context';
<FinalCommentEditorProvider>
<EditorSection />
<SubmitSection />
</FinalCommentEditorProvider>useFinalCommentEditor
Hook to access the final comment editor. Throws if used outside FinalCommentEditorProvider.
import { useFinalCommentEditor } from '@workspace/ui-bridge/context/final-comment-editor-context';
function SubmitSection() {
const { getHTML, getPBN, hasContent } = useFinalCommentEditor();
const handleSubmit = () => {
if (hasContent()) {
const html = getHTML();
const pbn = getPBN();
// submit...
}
};
}| Return | Type | Description |
|---|---|---|
getHTML | () => string | null | Get editor content as HTML, or null if no editor |
getPBN | () => string | null | Get editor content as PBN, or null if no editor |
hasContent | () => boolean | Check if the editor has any content |
useFinalCommentEditorOptional
Same as useFinalCommentEditor but returns null instead of throwing when used outside the provider.
import { useFinalCommentEditorOptional } from '@workspace/ui-bridge/context/final-comment-editor-context';
const ctx = useFinalCommentEditorOptional();
if (ctx) {
const html = ctx.getHTML();
}Returns: FinalCommentEditorContextValue | null
useRegisterFinalCommentEditor
Hook used by the editor component to register its ref with the context. Called internally to expose the editor ref to consumers.
import { useRegisterFinalCommentEditor } from '@workspace/ui-bridge/context/final-comment-editor-context';
function EditorSection() {
const editorRef = useRef<BridgeEditorRef>(null);
useRegisterFinalCommentEditor(editorRef);
return <BridgeEditor ref={editorRef} />;
}| Parameter | Type | Description |
|---|---|---|
editorRef | RefObject<BridgeEditorRef | null> | Ref to the BridgeEditor instance |