Initial commit: WordPress wp-content (themes, plugins, languages)

- Theme: momentry (custom theme with REST API routes)
- Plugins: code-snippets (contains all API proxies)
- Languages: zh_TW translations
- Excludes: cache, backups, uploads, logs

plugins/code-snippets/js/components/SnippetForm/fields/DescriptionEditor.tsx

@@ -0,0 +1,88 @@
+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