first commit

wp-content/plugins/code-snippets/js/components/EditorSidebar/controls/ActivationSwitch.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { __ } from '@wordpress/i18n'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import { SubmitSnippetAction, useSubmitSnippet } from '../../../hooks/useSubmitSnippet'
+import { handleUnknownError } from '../../../utils/errors'
+
+export const ActivationSwitch = () => {
+	const { snippet, isWorking } = useSnippetForm()
+	const { submitSnippet } = useSubmitSnippet()
+
+	return (
+		<div className="inline-form-field activation-switch-container">
+			<h4>{__('Status')}</h4>
+
+			<label>
+				{snippet.active
+					? __('Active', 'code-snippets')
+					: __('Inactive', 'code-snippets')}
+
+				<input
+					id="activation-switch"
+					type="checkbox"
+					checked={snippet.active}
+					disabled={isWorking || !!snippet.shared_network}
+					className="switch"
+					onChange={() => {
+						submitSnippet(snippet.active
+							? SubmitSnippetAction.SAVE_AND_DEACTIVATE
+							: SubmitSnippetAction.SAVE_AND_ACTIVATE)
+							.then(() => undefined)
+							.catch(handleUnknownError)
+					}}
+				/>
+			</label>
+		</div>
+	)
+}

wp-content/plugins/code-snippets/js/components/EditorSidebar/controls/MultisiteSharingSettings.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { __ } from '@wordpress/i18n'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import { Tooltip } from '../../common/Tooltip'
+
+export const MultisiteSharingSettings: React.FC = () => {
+	const { snippet, setSnippet, isReadOnly } = useSnippetForm()
+
+	return (
+		<div className="inline-form-field activation-switch-container">
+			<h4>
+				{__('Share with Subsites', 'code-snippets')}
+			</h4>
+
+			<Tooltip inline start>
+				{__('Instead of running on every site, allow this snippet to be activated on individual sites on the network.', 'code-snippets')}
+			</Tooltip>
+
+			<label>
+				{snippet.shared_network
+					? __('Enabled', 'code-snippets')
+					: __('Disabled', 'code-snippets')}
+
+				<input
+					id="snippet_sharing"
+					name="snippet_sharing"
+					type="checkbox"
+					className="switch"
+					checked={!!snippet.shared_network}
+					disabled={isReadOnly}
+					onChange={event =>
+						setSnippet(previous => ({
+							...previous,
+							active: false,
+							shared_network: event.target.checked
+						}))}
+				/>
+			</label>
+		</div>
+	)
+}

wp-content/plugins/code-snippets/js/components/EditorSidebar/controls/PriorityInput.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { __ } from '@wordpress/i18n'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import { Tooltip } from '../../common/Tooltip'
+
+export const PriorityInput = () => {
+	const { snippet, isReadOnly, setSnippet } = useSnippetForm()
+
+	return (
+		<div className="snippet-priority inline-form-field">
+			<h4>
+				<label htmlFor="snippet-priority">
+					{__('Priority', 'code-snippets')}
+				</label>
+			</h4>
+
+			<Tooltip block end>
+				{__('Snippets with a lower priority number will run before those with a higher number.', 'code-snippets')}
+			</Tooltip>
+
+			<input
+				type="number"
+				id="snippet-priority"
+				name="snippet_priority"
+				value={snippet.priority}
+				disabled={isReadOnly}
+				onChange={event => setSnippet(previous => ({
+					...previous,
+					priority: parseInt(event.target.value, 10)
+				}))}
+			/>
+		</div>
+	)
+}

wp-content/plugins/code-snippets/js/components/EditorSidebar/controls/RTLControl.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { __ } from '@wordpress/i18n'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
+
+export const RTLControl: React.FC = () => {
+	const { codeEditorInstance } = useSnippetForm()
+
+	return (
+		<div className="inline-form-field">
+			<h4>
+				<label htmlFor="snippet-code-direction">
+					{__('Code Direction', 'code-snippets')}
+				</label>
+			</h4>
+
+			<select id="snippet-code-direction" onChange={event =>
+				codeEditorInstance?.codemirror.setOption('direction', 'rtl' === event.target.value ? 'rtl' : 'ltr')
+			}>
+				<option value="ltr">{__('LTR', 'code-snippets')}</option>
+				<option value="rtl">{__('RTL', 'code-snippets')}</option>
+			</select>
+		</div>
+	)
+}