Skip to content
Closed
Changes from all commits
Commits
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
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