Skip to content

move markdown-toolbar-element into unconditional render #2353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

move markdown-toolbar-element into unconditional render #2353

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f86da0
move markdown-toolbar-element into unconditional render
keithamus Sep 20, 2022
2a24b67
clean up unused vars
keithamus Sep 20, 2022
75645c3
Dont crash when importing markdown toolbar element (#2403)
Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 4 additions & 8 deletions src/drafts/MarkdownEditor/_FormattingTools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ export type FormattingTools = {
reference: () => void
}

let hasRegisteredToolbarElement = false

/**
* Renders an invisible `markdown-toolbar-element` that provides formatting actions to the
* editor. This is a hacky way of using the library, but it allows us to use the built-in
Expand All @@ -24,12 +22,6 @@ let hasRegisteredToolbarElement = false
* buttons (ie, by keyboard shortcut).
*/
export const FormattingTools = forwardRef<FormattingTools, {forInputId: string}>(({forInputId}, forwadedRef) => {
useEffect(() => {
// requiring this module will register the custom element; we don't want to do that until the component mounts in the DOM
if (!hasRegisteredToolbarElement) require('@github/markdown-toolbar-element')
hasRegisteredToolbarElement = true
}, [])

const headerRef = useRef<HTMLElement>(null)
const boldRef = useRef<HTMLElement>(null)
const italicRef = useRef<HTMLElement>(null)
Expand All @@ -56,6 +48,10 @@ export const FormattingTools = forwardRef<FormattingTools, {forInputId: string}>
reference: () => referenceRef.current?.click()
}))

useEffect(() => {
require('@github/markdown-toolbar-element')
}, [])

return (
<markdown-toolbar for={forInputId} style={{display: 'none'}}>
<md-header ref={headerRef} />
Expand Down