import { ExternalLink } from '@wordpress/components' import { __ } from '@wordpress/i18n' import React, { useState } from 'react' import { SNIPPET_TYPES, SNIPPET_TYPE_SCOPES } from '../../../types/Snippet' import { isNetworkAdmin } from '../../../utils/general' import { buildShortcodeTag } from '../../../utils/shortcodes' import { getSnippetType } from '../../../utils/snippets' import { CopyToClipboardButton } from '../../common/CopyToClipboardButton' import { useSnippetForm } from '../../../hooks/useSnippetForm' import { truncateWords } from '../../../utils/text' import type { ShortcodeAtts } from '../../../utils/shortcodes' import type { SnippetScope } from '../../../types/Snippet' import type { Dispatch, SetStateAction } from 'react' const MAX_SHORTCODE_NAME_WORDS = 3 const SHORTCODE_TAG = 'code_snippet' const SCOPE_ICONS: Record = { 'global': 'admin-site', 'admin': 'admin-tools', 'front-end': 'admin-appearance', 'single-use': 'clock', 'content': 'shortcode', 'head-content': 'editor-code', 'footer-content': 'editor-code', 'admin-css': 'dashboard', 'site-css': 'admin-customizer', 'site-head-js': 'media-code', 'site-footer-js': 'media-code' } const SCOPE_DESCRIPTIONS: Record = { 'global': __('Run snippet everywhere', 'code-snippets'), 'admin': __('Only run in administration area', 'code-snippets'), 'front-end': __('Only run on site front-end', 'code-snippets'), 'single-use': __('Only run once', 'code-snippets'), 'content': __('Only display when inserted into a post or page.', 'code-snippets'), 'head-content': __('Display in site section.', 'code-snippets'), 'footer-content': __('Display at the end of the section, in the footer.', 'code-snippets'), 'site-css': __('Site front-end styles', 'code-snippets'), 'admin-css': __('Administration area styles', 'code-snippets'), 'site-footer-js': __('Load JS at the end of the section', 'code-snippets'), 'site-head-js': __('Load JS in the section', 'code-snippets') } interface ShortcodeOptions { php: boolean format: boolean shortcodes: boolean } const ShortcodeTag: React.FC<{ atts: ShortcodeAtts }> = ({ atts }) =>

{buildShortcodeTag(SHORTCODE_TAG, atts)}

interface ShortcodeOptionsProps { optionLabels: [keyof ShortcodeOptions, string][] options: ShortcodeOptions setOptions: Dispatch> isReadOnly: boolean } const ShortcodeOptions: React.FC = ({ optionLabels, options, setOptions, isReadOnly }) =>

{__('Shortcode Options: ', 'code-snippets')} {optionLabels.map(([option, label]) => )}

const ShortcodeInfo: React.FC = () => { const { snippet, isReadOnly } = useSnippetForm() const [options, setOptions] = useState(() => ({ php: snippet.code.includes('

{__('There are multiple options for inserting this snippet into a post, page or other content.', 'code-snippets')} {' '} {snippet.id // eslint-disable-next-line @stylistic/max-len ? __('You can copy the below shortcode, or use the Classic Editor button, Block editor (Pro) or Elementor widget (Pro).', 'code-snippets') // eslint-disable-next-line @stylistic/max-len : __('After saving, you can copy a shortcode, or use the Classic Editor button, Block editor (Pro) or Elementor widget (Pro).', 'code-snippets')} {' '} {__('Learn more', 'code-snippets')}

{snippet.id ? <> : null} : null } export const ScopeInput: React.FC = () => { const { snippet, setSnippet, isReadOnly } = useSnippetForm() return <>

{__('Scope', 'code-snippets')}

{SNIPPET_TYPES .filter(type => !snippet.id || type === getSnippetType(snippet)) .map(type =>

{SNIPPET_TYPE_SCOPES[type].map(scope => )} {'html' === type ? : null}

)} }