09ef1f000f
- Theme: momentry (custom theme with REST API routes) - Plugins: code-snippets (contains all API proxies) - Languages: zh_TW translations - Excludes: cache, backups, uploads, logs
89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
import React, { useCallback, useEffect } from 'react'
|
|
import { __ } from '@wordpress/i18n'
|
|
import domReady from '@wordpress/dom-ready'
|
|
import { useSnippetForm } from '../../../hooks/useSnippetForm'
|
|
|
|
export const EDITOR_ID = 'snippet_description'
|
|
|
|
const TOOLBAR_BUTTONS = [
|
|
[
|
|
'bold',
|
|
'italic',
|
|
'underline',
|
|
'strikethrough',
|
|
'blockquote',
|
|
'bullist',
|
|
'numlist',
|
|
'alignleft',
|
|
'aligncenter',
|
|
'alignright',
|
|
'link',
|
|
'wp_adv',
|
|
'code_snippets'
|
|
],
|
|
[
|
|
'formatselect',
|
|
'forecolor',
|
|
'pastetext',
|
|
'removeformat',
|
|
'charmap',
|
|
'outdent',
|
|
'indent',
|
|
'undo',
|
|
'redo',
|
|
'spellchecker'
|
|
]
|
|
]
|
|
|
|
const initializeEditor = (onChange: (content: string) => void) => {
|
|
window.wp.editor?.initialize(EDITOR_ID, {
|
|
mediaButtons: window.CODE_SNIPPETS_EDIT?.descEditorOptions.mediaButtons,
|
|
quicktags: true,
|
|
tinymce: {
|
|
toolbar: TOOLBAR_BUTTONS.map(line => line.join(' ')),
|
|
setup: editor => {
|
|
editor.on('change', () => onChange(editor.getContent()))
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const DescriptionEditorTextarea: React.FC = () => {
|
|
const { snippet, setSnippet, isReadOnly } = useSnippetForm()
|
|
|
|
const handleChange = useCallback(
|
|
(desc: string) => setSnippet(previous => ({ ...previous, desc })),
|
|
[setSnippet]
|
|
)
|
|
|
|
useEffect(() => {
|
|
domReady(() => initializeEditor(handleChange))
|
|
}, [handleChange])
|
|
|
|
return (
|
|
<textarea
|
|
id={EDITOR_ID}
|
|
className="wp-editor-area"
|
|
onChange={event => handleChange(event.target.value)}
|
|
autoComplete="off"
|
|
disabled={isReadOnly}
|
|
rows={window.CODE_SNIPPETS_EDIT?.descEditorOptions.rows}
|
|
cols={40}
|
|
value={snippet.desc}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const DescriptionEditor: React.FC = () =>
|
|
window.CODE_SNIPPETS_EDIT?.enableDescription
|
|
? <div className="snippet-description-container">
|
|
<h2>
|
|
<label htmlFor={EDITOR_ID}>
|
|
{__('Description', 'code-snippets')}
|
|
</label>
|
|
</h2>
|
|
|
|
<DescriptionEditorTextarea />
|
|
</div>
|
|
: null
|