setSnippet(previous => ({ ...previous, scope }))}
+ updateScope={scope => {
+ setSnippet(previous => ({ ...previous, scope }))
+ }}
/>}
+ {__('Code Direction', 'code-snippets')}
+
+
+
+ codeEditorInstance?.codemirror.setOption('direction', 'rtl' === event.target.value ? 'rtl' : 'ltr')
+ }>
+ {__('LTR', 'code-snippets')}
+ {__('RTL', 'code-snippets')}
+
+
+ )
+}
+
+export const SnippetEditorToolbar: React.FC = () =>
+
+ {window.CODE_SNIPPETS_EDIT?.extraSaveButtons ?
diff --git a/js/Edit/SnippetForm/SnippetForm.tsx b/src/js/components/SnippetForm/SnippetForm.tsx
similarity index 66%
rename from js/Edit/SnippetForm/SnippetForm.tsx
rename to src/js/components/SnippetForm/SnippetForm.tsx
index 497f57e1..03b2d679 100644
--- a/js/Edit/SnippetForm/SnippetForm.tsx
+++ b/src/js/components/SnippetForm/SnippetForm.tsx
@@ -2,19 +2,19 @@ import React, { useState } from 'react'
import classnames from 'classnames'
import { isNetworkAdmin } from '../../utils/general'
import { createEmptySnippet, getSnippetType } from '../../utils/snippets'
-import { ActionButtons } from '../buttons/ActionButtons'
-import { UpgradeDialog } from '../components/UpgradeDialog'
-import { useSnippetForm, WithSnippetFormContext } from './context'
-import { DescriptionEditor } from '../fields/DescriptionEditor'
-import { MultisiteSharingSettings } from '../fields/MultisiteSharingSettings'
-import { NameInput } from '../fields/NameInput'
-import { PriorityInput } from '../fields/PriorityInput'
-import { ScopeInput } from '../fields/ScopeInput'
-import { TagsInput } from '../fields/TagsInput'
-import { Notices } from '../components/Notices'
-import { PageHeading } from '../components/PageHeading'
-import { SnippetEditor } from '../SnippetEditor/SnippetEditor'
-import { SnippetEditorToolbar } from '../SnippetEditor/SnippetEditorToolbar'
+import { WithSnippetFormContext, useSnippetForm } from '../../hooks/useSnippetForm'
+import { ActionButtons } from './buttons/ActionButtons'
+import { UpgradeDialog } from './page/UpgradeDialog'
+import { DescriptionEditor } from './fields/DescriptionEditor'
+import { MultisiteSharingSettings } from './fields/MultisiteSharingSettings'
+import { NameInput } from './fields/NameInput'
+import { PriorityInput } from './fields/PriorityInput'
+import { ScopeInput } from './fields/ScopeInput'
+import { TagsInput } from './fields/TagsInput'
+import { Notices } from './page/Notices'
+import { PageHeading } from './page/PageHeading'
+import { SnippetEditor } from './SnippetEditor/SnippetEditor'
+import { SnippetEditorToolbar } from './SnippetEditor/SnippetEditorToolbar'
const OPTIONS = window.CODE_SNIPPETS_EDIT
diff --git a/js/Edit/buttons/ActionButtons.tsx b/src/js/components/SnippetForm/buttons/ActionButtons.tsx
similarity index 73%
rename from js/Edit/buttons/ActionButtons.tsx
rename to src/js/components/SnippetForm/buttons/ActionButtons.tsx
index 974d9f36..7daffdc3 100644
--- a/js/Edit/buttons/ActionButtons.tsx
+++ b/src/js/components/SnippetForm/buttons/ActionButtons.tsx
@@ -1,9 +1,9 @@
import React from 'react'
import { Spinner } from '@wordpress/components'
-import { useSnippetForm } from '../SnippetForm/context'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
import { DeleteButton } from './DeleteButton'
import { ExportButtons } from './ExportButtons'
-import { SubmitButton } from './SubmitButton'
+import { SubmitButton } from './SubmitButtons'
export const ActionButtons: React.FC = () => {
const { snippet, isWorking } = useSnippetForm()
@@ -12,11 +12,12 @@ export const ActionButtons: React.FC = () => {
diff --git a/js/Edit/buttons/DeleteButton.tsx b/src/js/components/SnippetForm/buttons/DeleteButton.tsx
similarity index 79%
rename from js/Edit/buttons/DeleteButton.tsx
rename to src/js/components/SnippetForm/buttons/DeleteButton.tsx
index 22c40cf2..e6571fe5 100644
--- a/js/Edit/buttons/DeleteButton.tsx
+++ b/src/js/components/SnippetForm/buttons/DeleteButton.tsx
@@ -3,8 +3,8 @@ import React, { useState } from 'react'
import { __ } from '@wordpress/i18n'
import { Button } from '../../common/Button'
import { ConfirmDialog } from '../../common/ConfirmDialog'
-import { useSnippetsAPI } from '../../utils/api/snippets'
-import { useSnippetForm } from '../SnippetForm/context'
+import { useSnippetsAPI } from '../../../hooks/useSnippets'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
export const DeleteButton: React.FC = () => {
const api = useSnippetsAPI()
@@ -34,9 +34,9 @@ export const DeleteButton: React.FC = () => {
api.delete(snippet)
.then(() => {
setIsWorking(false)
- window.location.replace(addQueryArgs(window?.CODE_SNIPPETS?.urls.manage, { result: 'deleted' }))
+ window.location.replace(addQueryArgs(window.CODE_SNIPPETS?.urls.manage, { result: 'deleted' }))
})
- .catch(error => handleRequestError(error, __('Could not delete snippet.', 'code-snippets')))
+ .catch((error: unknown) => handleRequestError(error, __('Could not delete snippet.', 'code-snippets')))
}}
>
diff --git a/js/Edit/buttons/ExportButtons.tsx b/src/js/components/SnippetForm/buttons/ExportButtons.tsx
similarity index 61%
rename from js/Edit/buttons/ExportButtons.tsx
rename to src/js/components/SnippetForm/buttons/ExportButtons.tsx
index f063123f..7e57e67a 100644
--- a/js/Edit/buttons/ExportButtons.tsx
+++ b/src/js/components/SnippetForm/buttons/ExportButtons.tsx
@@ -1,17 +1,17 @@
import React from 'react'
-import { AxiosResponse } from 'axios'
import { __ } from '@wordpress/i18n'
import { Button } from '../../common/Button'
-import { ExportSnippets } from '../../types/ExportSnippets'
-import { useSnippetsAPI } from '../../utils/api/snippets'
-import { downloadSnippetExportFile } from '../../utils/files'
-import { useSnippetForm } from '../SnippetForm/context'
+import { useSnippetsAPI } from '../../../hooks/useSnippets'
+import { downloadSnippetExportFile } from '../../../utils/files'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import type { SnippetsExport } from '../../../types/SnippetsExport'
+import type { AxiosResponse } from 'axios'
export const ExportButtons: React.FC = () => {
const api = useSnippetsAPI()
const { snippet, isWorking, setIsWorking, handleRequestError } = useSnippetForm()
- const handleFileResponse = (response: AxiosResponse) => {
+ const handleFileResponse = (response: AxiosResponse) => {
const data = response.data
setIsWorking(false)
console.info('file response', response)
@@ -34,26 +34,27 @@ export const ExportButtons: React.FC = () => {
api.export(snippet)
.then(handleFileResponse)
// translators: %s: error message.
- .catch(error => handleRequestError(error, __('Could not download export file.', 'code-snippets')))
+ .catch((error: unknown) => handleRequestError(error, __('Could not download export file.', 'code-snippets')))
}}
disabled={isWorking}
>
{__('Export', 'code-snippets')}
- {window.CODE_SNIPPETS_EDIT?.enableDownloads ?
- {
api.exportCode(snippet)
.then(handleFileResponse)
// translators: %s: error message.
- .catch(error => handleRequestError(error, __('Could not download file.', 'code-snippets')))
+ .catch((error: unknown) => handleRequestError(error, __('Could not download file.', 'code-snippets')))
}}
disabled={isWorking}
>
{__('Export Code', 'code-snippets')}
- : ''}
+
+ : ''}
)
}
diff --git a/src/js/components/SnippetForm/buttons/SubmitButtons.tsx b/src/js/components/SnippetForm/buttons/SubmitButtons.tsx
new file mode 100644
index 00000000..fb85a80b
--- /dev/null
+++ b/src/js/components/SnippetForm/buttons/SubmitButtons.tsx
@@ -0,0 +1,198 @@
+import React, { useState } from 'react'
+import { __ } from '@wordpress/i18n'
+import { handleUnknownError } from '../../../utils/errors'
+import { Button } from '../../common/Button'
+import { ConfirmDialog } from '../../common/ConfirmDialog'
+import { isNetworkAdmin } from '../../../utils/general'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
+import type { Snippet } from '../../../types/Snippet'
+import type { ButtonProps } from '../../common/Button'
+
+interface SubmitButtonProps extends ButtonProps {
+ inlineButtons?: boolean
+}
+
+const SaveChangesButton: React.FC = ({ inlineButtons, ...props }) =>
+
+ {__('Save Changes', 'code-snippets')}
+
+
+const SaveAndExecuteButton: React.FC = ({ inlineButtons, ...props }) =>
+
+ {inlineButtons
+ ? __('Execute Once', 'code-snippets')
+ : __('Save Changes and Execute Once', 'code-snippets')}
+
+
+const DeactivateButton: React.FC = ({ inlineButtons, ...props }) =>
+
+ {inlineButtons
+ ? __('Deactivate', 'code-snippets')
+ : __('Save Changes and Deactivate', 'code-snippets')}
+
+
+const ActivateButton: React.FC = ({ inlineButtons, ...props }) =>
+
+ {inlineButtons
+ ? __('Activate', 'code-snippets')
+ : __('Save Changes and Activate', 'code-snippets')}
+
+
+interface ActivateOrDeactivateButtonProps {
+ snippet: Snippet
+ onActivate: VoidFunction
+ onDeactivate: VoidFunction
+ primaryActivate: boolean
+ inlineButtons?: boolean
+ disabled: boolean
+}
+
+const ActivateOrDeactivateButton: React.FC = ({
+ snippet,
+ disabled,
+ onActivate,
+ onDeactivate,
+ inlineButtons,
+ primaryActivate
+}) => {
+ const commonProps: SubmitButtonProps = { small: inlineButtons, type: 'submit', disabled, inlineButtons }
+
+ switch (true) {
+ case snippet.shared_network && isNetworkAdmin():
+ return null
+
+ case 'single-use' === snippet.scope:
+ return = ({ isOpen, onClose, onSubmit, validationWarning }) =>
+ {
+ onSubmit?.()
+ onClose()
+ }}
+ >
+ {`${validationWarning} ${__('Continue?', 'code-snippets')}`}
+
+
+export interface SubmitButtonsProps {
+ inlineButtons?: boolean
+}
+
+export const SubmitButton: React.FC = ({ inlineButtons }) => {
+ const { snippet, isWorking, submitSnippet, submitAndActivateSnippet, submitAndDeactivateSnippet } = useSnippetForm()
+ const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false)
+ const [submitAction, setSubmitAction] = useState()
+ const validationWarning = validateSnippet(snippet)
+ const activateByDefault = shouldActivateByDefault(snippet, inlineButtons)
+
+ const handleSubmit = (submitAction: () => Promise): void => {
+ if (validationWarning) {
+ setIsConfirmDialogOpen(true)
+ setSubmitAction(() => submitAction)
+ } else {
+ submitAction()
+ .then(() => undefined)
+ .catch(handleUnknownError)
+ }
+ }
+
+ return <>
+ {activateByDefault ? null
+ : handleSubmit(submitSnippet)}
+ disabled={isWorking}
+ inlineButtons={inlineButtons}
+ />}
+
+ handleSubmit(submitAndActivateSnippet)}
+ onDeactivate={() => handleSubmit(submitAndDeactivateSnippet)}
+ />
+
+ {activateByDefault
+ ? handleSubmit(submitSnippet)}
+ disabled={isWorking}
+ inlineButtons={inlineButtons}
+ /> : null}
+
+ {
+ setIsConfirmDialogOpen(false)
+ setSubmitAction(undefined)
+ }}
+ />
+
+}
diff --git a/js/Edit/fields/DescriptionEditor.tsx b/src/js/components/SnippetForm/fields/DescriptionEditor.tsx
similarity index 84%
rename from js/Edit/fields/DescriptionEditor.tsx
rename to src/js/components/SnippetForm/fields/DescriptionEditor.tsx
index 651c263d..0efaf5c5 100644
--- a/js/Edit/fields/DescriptionEditor.tsx
+++ b/src/js/components/SnippetForm/fields/DescriptionEditor.tsx
@@ -1,12 +1,10 @@
import React, { useCallback, useEffect } from 'react'
import { __ } from '@wordpress/i18n'
import domReady from '@wordpress/dom-ready'
-import { useSnippetForm } from '../SnippetForm/context'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
export const EDITOR_ID = 'snippet_description'
-const DEFAULT_ROWS = 5
-
const TOOLBAR_BUTTONS = [
[
'bold',
@@ -62,8 +60,8 @@ export const DescriptionEditor: React.FC = () => {
domReady(() => initializeEditor(onChange))
}, [onChange])
- return window.CODE_SNIPPETS_EDIT?.enableDescription ?
-
+ return window.CODE_SNIPPETS_EDIT?.enableDescription
+ ?
{__('Description', 'code-snippets')}
@@ -76,9 +74,9 @@ export const DescriptionEditor: React.FC = () => {
onChange={event => onChange(event.target.value)}
autoComplete="off"
disabled={isReadOnly}
- rows={window.CODE_SNIPPETS_EDIT?.descEditorOptions.rows ?? DEFAULT_ROWS}
+ rows={window.CODE_SNIPPETS_EDIT.descEditorOptions.rows}
cols={40}
>{snippet.desc}
- :
- null
+
diff --git a/js/Edit/fields/ScopeInput.tsx b/src/js/components/SnippetForm/fields/ScopeInput.tsx
similarity index 77%
rename from js/Edit/fields/ScopeInput.tsx
rename to src/js/components/SnippetForm/fields/ScopeInput.tsx
index 05baa631..408fa950 100644
--- a/js/Edit/fields/ScopeInput.tsx
+++ b/src/js/components/SnippetForm/fields/ScopeInput.tsx
@@ -1,12 +1,18 @@
import { ExternalLink } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
-import React, { Dispatch, SetStateAction, useState } from 'react'
-import { SNIPPET_TYPE_SCOPES, SNIPPET_TYPES, SnippetScope } from '../../types/Snippet'
-import { isNetworkAdmin } from '../../utils/general'
-import { buildShortcodeTag, ShortcodeAtts } from '../../utils/shortcodes'
-import { getSnippetType } from '../../utils/snippets'
+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 '../SnippetForm/context'
+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'
@@ -92,29 +98,30 @@ const ShortcodeInfo: React.FC = () => {
shortcodes: false
}))
- return 'content' === snippet.scope ?
- <>
+ return 'content' === snippet.scope
+ ? <>
{__('There are multiple options for inserting this snippet into a post, page or other content.', 'code-snippets')}
{' '}
- {snippet.id ?
- // eslint-disable-next-line 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 max-len
- __('After saving, you can copy a shortcode, or use the Classic Editor button, Block editor (Pro) or Elementor widget (Pro).', '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 ?
- <>
+ {snippet.id
+ ? <>
+ return options?.enabled
+ ?
{__('Tags', 'code-snippets')}
@@ -26,6 +26,6 @@ export const TagsInput: React.FC = () => {
allowSpaces={options.allowSpaces}
placeholder={__('Enter a list of tags; separated by commas.', 'code-snippets')}
/>
- :
- null
+
+ onRemove: VoidFunction
children?: ReactNode
+ autoHide?: boolean
}
-const DismissibleNotice: React.FC = ({ classNames, onRemove, children }) => {
-
+const DismissibleNotice: React.FC = ({ classNames, onRemove, children, autoHide = true }) => {
useEffect(() => {
- if (window.CODE_SNIPPETS_EDIT?.scrollToNotices) {
- window.scrollTo({ top: 0, behavior: 'smooth' })
+ if (autoHide) {
+ const timer = setTimeout(onRemove, NOTICE_TIMEOUT_MS)
+ return () => clearTimeout(timer)
}
- }, [])
+ return undefined
+ }, [autoHide, onRemove])
return (
-
+
<>{children}
{
event.preventDefault()
- onRemove(event)
+ onRemove()
}}>
{__('Dismiss notice.', 'code-snippets')}
@@ -35,16 +40,17 @@ export const Notices: React.FC = () => {
const { currentNotice, setCurrentNotice, snippet, setSnippet } = useSnippetForm()
return <>
- {currentNotice ?
-
setCurrentNotice(undefined)}>
+ {currentNotice
+ ? setCurrentNotice(undefined)}>
{currentNotice[1]}
- :
- null}
+
+ : null}
- {snippet.code_error ?
-
setSnippet(previous => ({ ...previous, code_error: null }))}
+ autoHide={false}
>
{sprintf(
@@ -55,7 +61,7 @@ export const Notices: React.FC = () => {
{snippet.code_error[0]}
- :
- null}
+
+ : null}
}
diff --git a/js/Edit/components/PageHeading.tsx b/src/js/components/SnippetForm/page/PageHeading.tsx
similarity index 73%
rename from js/Edit/components/PageHeading.tsx
rename to src/js/components/SnippetForm/page/PageHeading.tsx
index ad998a32..2545d0fc 100644
--- a/js/Edit/components/PageHeading.tsx
+++ b/src/js/components/SnippetForm/page/PageHeading.tsx
@@ -1,23 +1,24 @@
import { __, _x } from '@wordpress/i18n'
import React from 'react'
-import { createEmptySnippet } from '../../utils/snippets'
-import { useSnippetForm } from '../SnippetForm/context'
+import { createEmptySnippet } from '../../../utils/snippets'
+import { useSnippetForm } from '../../../hooks/useSnippetForm'
const OPTIONS = window.CODE_SNIPPETS_EDIT
export const PageHeading: React.FC = () => {
- const { snippet, updateSnippet } = useSnippetForm()
+ const { snippet, updateSnippet, setCurrentNotice } = useSnippetForm()
return (
- {0 === currentTab ?
-
setCurrentTab(1)} /> :
- setCurrentTab(1)} />
+ :
* Released under the MIT license.
*/
-import React, { InputHTMLAttributes, KeyboardEventHandler, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
+import { handleUnknownError } from '../../utils/errors'
import { SuggestionList } from './SuggestionList'
import { TagList } from './TagList'
+import type { InputHTMLAttributes, KeyboardEventHandler } from 'react'
const COMPLETION_MIN_LENGTH = 2
const SPECIAL_CHARS_RE = /(?[-\\^$[\]()+{}?*.|])/g
@@ -16,28 +18,22 @@ const isNotEmpty = (value: string | null | undefined): value is string =>
!['', '""', "''", '``', undefined, null].includes(value)
const isTagSelected = (selected: string[], tag: string) => {
- if (!selected?.includes(tag)) {
+ if (!selected.includes(tag)) {
return false
}
const re = new RegExp(`^${escapeRegex(tag)}`)
return 1 === selected.filter(test_tag => re.test(test_tag)).length
}
-export type TagEditorCompletions = string[] | ((value?: string) => string[]) | ((value?: string) => Promise) | undefined
+export type TagEditorCompletions = string[] | ((value?: string) => Promise) | undefined
-const buildCompletions = (completions: TagEditorCompletions, value: string | undefined, onBuild: (result: string[]) => void) => {
- if (completions) {
- if ('function' === typeof completions) {
- const result = completions(value)
- if (result && 'then' in result && 'function' === typeof result.then) {
- result.then(list => onBuild(list))
-
- } else if (result instanceof Array) {
- onBuild(result)
- }
- } else {
- onBuild(completions)
- }
+const buildCompletions = (completions: TagEditorCompletions, value: string | undefined): Promise => {
+ if (!completions) {
+ return Promise.resolve(undefined)
+ } else if ('function' === typeof completions) {
+ return completions(value)
+ } else {
+ return Promise.resolve(completions)
}
}
@@ -90,13 +86,15 @@ export const TagEditor: React.FC = ({
const triggerCompletion = (openList = inputValue.length >= completionMinLength) => {
if (openList) {
- buildCompletions(completions, inputValue, list => {
- setLastCompletionList(completionList)
-
- if (list.length) {
- setCompletionList(allowDuplicates ? list : list.filter(item => !tags.includes(item)))
- }
- })
+ buildCompletions(completions, inputValue)
+ .then(list => {
+ setLastCompletionList(completionList)
+
+ if (list?.length) {
+ setCompletionList(allowDuplicates ? list : list.filter(item => !tags.includes(item)))
+ }
+ })
+ .catch(handleUnknownError)
}
setCompletionOpen(openList)
@@ -105,21 +103,36 @@ export const TagEditor: React.FC = ({
const keyboardHandler: KeyboardEventHandler = event => {
const { key, ctrlKey, metaKey } = event
- if ('Enter' === key || ',' === key || ' ' === key && !allowSpaces) {
- addTag()
-
- } else if ('Backspace' === key && !inputValue) {
- removeTag()
-
- } else if (' ' === key && (ctrlKey || metaKey)) {
- triggerCompletion(true)
+ switch (key) {
+ case 'Enter':
+ case ',':
+ event.preventDefault()
+ addTag()
+ break
+
+ case 'Backspace':
+ if (!inputValue) {
+ event.preventDefault()
+ removeTag()
+ }
+ break
+
+ case ' ':
+ if (ctrlKey || metaKey) {
+ event.preventDefault()
+ triggerCompletion(true)
+ } else if (!allowSpaces) {
+ event.preventDefault()
+ addTag()
+ }
+ break
- } else if (!isTagLimit() || 'Tab' === key) {
- return
+ case 'Tab':
+ if (!isTagLimit()) {
+ event.preventDefault()
+ }
+ break
}
-
- event.preventDefault()
- event.stopPropagation()
}
const inputHandler = () => {
@@ -132,32 +145,34 @@ export const TagEditor: React.FC = ({
}
}
- return
+ return (
+
+ )
}
diff --git a/js/common/TagEditor/TagList.tsx b/src/js/components/TagEditor/TagList.tsx
similarity index 86%
rename from js/common/TagEditor/TagList.tsx
rename to src/js/components/TagEditor/TagList.tsx
index 241076ae..50b8c5a5 100644
--- a/js/common/TagEditor/TagList.tsx
+++ b/src/js/components/TagEditor/TagList.tsx
@@ -11,7 +11,7 @@ export const TagList: React.FC = ({ tags, onRemove }) =>
{tag}
- {
+ {
onRemove(tag)
event.preventDefault()
}}>Γ
diff --git a/js/common/TagEditor/index.ts b/src/js/components/TagEditor/index.ts
similarity index 100%
rename from js/common/TagEditor/index.ts
rename to src/js/components/TagEditor/index.ts
diff --git a/js/common/Button.tsx b/src/js/components/common/Button.tsx
similarity index 90%
rename from js/common/Button.tsx
rename to src/js/components/common/Button.tsx
index 913a78e9..02757769 100644
--- a/js/common/Button.tsx
+++ b/src/js/components/common/Button.tsx
@@ -1,5 +1,6 @@
-import React, { ButtonHTMLAttributes } from 'react'
+import React from 'react'
import classnames from 'classnames'
+import type { ButtonHTMLAttributes } from 'react'
export interface ButtonProps extends Omit, 'id' | 'name'> {
id?: string
diff --git a/js/common/ConfirmDialog.tsx b/src/js/components/common/ConfirmDialog.tsx
similarity index 85%
rename from js/common/ConfirmDialog.tsx
rename to src/js/components/common/ConfirmDialog.tsx
index 059e9aa2..81604d1a 100644
--- a/js/common/ConfirmDialog.tsx
+++ b/src/js/components/common/ConfirmDialog.tsx
@@ -1,6 +1,7 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
import { __ } from '@wordpress/i18n'
-import { Modal, Flex, Button } from '@wordpress/components'
+import { Button, Flex, Modal } from '@wordpress/components'
+import type { ReactNode } from 'react'
export interface ConfirmDialogProps {
open?: boolean
@@ -23,8 +24,8 @@ export const ConfirmDialog: React.FC = ({
cancelLabel = __('Cancel', 'code-snippets'),
confirmButtonClassName
}) =>
- open ?
- = ({
{confirmLabel}
- :
- null
+
+ : null
diff --git a/js/common/CopyToClipboardButton.tsx b/src/js/components/common/CopyToClipboardButton.tsx
similarity index 69%
rename from js/common/CopyToClipboardButton.tsx
rename to src/js/components/common/CopyToClipboardButton.tsx
index 4511b918..12d0183c 100644
--- a/js/common/CopyToClipboardButton.tsx
+++ b/src/js/components/common/CopyToClipboardButton.tsx
@@ -1,4 +1,6 @@
-import React, { HTMLAttributes, MouseEventHandler, useState } from 'react'
+import React, { useState } from 'react'
+import { handleUnknownError } from '../../utils/errors'
+import type { HTMLAttributes, MouseEventHandler } from 'react'
const TIMEOUT = 3000
@@ -16,24 +18,25 @@ export const CopyToClipboardButton: React.FC = ({
...props
}) => {
const [isSuccess, setIsSuccess] = useState(false)
+ const clipboard = window.navigator.clipboard as Clipboard | undefined
const clickHandler: MouseEventHandler = event => {
event.preventDefault()
- window.navigator.clipboard?.writeText(text)
+ clipboard?.writeText(text)
.then(() => {
setIsSuccess(true)
setTimeout(() => setIsSuccess(false), TIMEOUT)
})
- .catch(error => console.error(error))
+ .catch(handleUnknownError)
}
- return window.navigator.clipboard ?
- = {
+ name: 'application/x-httpd-php',
+ startOpen: true
+}
+
+defineMode('php-snippet', (config: EditorConfiguration) => getMode(config, mode))
+
+registerHelper('lint', 'php', (text: string) => {
+ const linter = new Linter(text)
+ linter.lint()
+
+ return linter.annotations
+})
diff --git a/js/utils/api/axios.ts b/src/js/hooks/useAxios.ts
similarity index 92%
rename from js/utils/api/axios.ts
rename to src/js/hooks/useAxios.ts
index 4cbdc610..a513e6ab 100644
--- a/js/utils/api/axios.ts
+++ b/src/js/hooks/useAxios.ts
@@ -1,5 +1,6 @@
import { useMemo } from 'react'
-import axios, { AxiosInstance, AxiosResponse, CreateAxiosDefaults } from 'axios'
+import axios from 'axios'
+import type { AxiosInstance, AxiosResponse, CreateAxiosDefaults } from 'axios'
export interface AxiosAPI {
get: (url: string) => Promise>
diff --git a/js/Edit/SnippetForm/context.tsx b/src/js/hooks/useSnippetForm.tsx
similarity index 69%
rename from js/Edit/SnippetForm/context.tsx
rename to src/js/hooks/useSnippetForm.tsx
index 8ee80366..c5a36f77 100644
--- a/js/Edit/SnippetForm/context.tsx
+++ b/src/js/hooks/useSnippetForm.tsx
@@ -1,10 +1,12 @@
-import { AxiosError, isAxiosError } from 'axios'
-import React, { createContext, Dispatch, PropsWithChildren, SetStateAction, useCallback, useContext, useMemo, useState } from 'react'
-import { Notice } from '../../types/Notice'
-import { Snippet } from '../../types/Snippet'
-import { CodeEditorInstance } from '../../types/WordPressCodeEditor'
-import { isLicensed, isProSnippet } from '../../utils/snippets'
-import { useSnippetSubmit } from '../utils/submit'
+import { isAxiosError } from 'axios'
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import { isLicensed } from '../utils/general'
+import { isProSnippet } from '../utils/snippets'
+import { useSnippetSubmit } from './useSnippetSubmit'
+import type { Dispatch, PropsWithChildren, SetStateAction} from 'react'
+import type { ScreenNotice } from '../types/ScreenNotice'
+import type { Snippet } from '../types/Snippet'
+import type { CodeEditorInstance } from '../types/WordPressCodeEditor'
export interface SnippetFormContext {
snippet: Snippet
@@ -13,14 +15,14 @@ export interface SnippetFormContext {
isReadOnly: boolean
isWorking: boolean
setIsWorking: Dispatch>
- currentNotice: Notice | undefined
- setCurrentNotice: Dispatch>
+ currentNotice: ScreenNotice | undefined
+ setCurrentNotice: Dispatch>
codeEditorInstance: CodeEditorInstance | undefined
setCodeEditorInstance: Dispatch>
- handleRequestError: (error: AxiosError | unknown, message?: string) => void
- submitSnippet: VoidFunction
- submitAndActivateSnippet: VoidFunction
- submitAndDeactivateSnippet: VoidFunction
+ handleRequestError: (error: unknown, message?: string) => void
+ submitSnippet: () => Promise
+ submitAndActivateSnippet: () => Promise
+ submitAndDeactivateSnippet: () => Promise
}
const SnippetFormContext = createContext(undefined)
@@ -42,12 +44,12 @@ export interface WithSnippetFormContextProps extends PropsWithChildren {
export const WithSnippetFormContext: React.FC = ({ children, initialSnippet }) => {
const [snippet, setSnippet] = useState(initialSnippet)
const [isWorking, setIsWorking] = useState(false)
- const [currentNotice, setCurrentNotice] = useState()
+ const [currentNotice, setCurrentNotice] = useState()
const [codeEditorInstance, setCodeEditorInstance] = useState()
const submitSnippet = useSnippetSubmit(setSnippet, setIsWorking, setCurrentNotice)
const isReadOnly = useMemo(() => !isLicensed() && isProSnippet(snippet.scope), [snippet.scope])
- const handleRequestError = useCallback((error: AxiosError | unknown, message?: string) => {
+ const handleRequestError = useCallback((error: unknown, message?: string) => {
console.error('Request failed', error)
setIsWorking(false)
setCurrentNotice(['error', [message, isAxiosError(error) ? error.message : ''].filter(Boolean).join(' ')])
diff --git a/js/Edit/utils/submit.ts b/src/js/hooks/useSnippetSubmit.ts
similarity index 69%
rename from js/Edit/utils/submit.ts
rename to src/js/hooks/useSnippetSubmit.ts
index 08cdd8be..b61f3dd8 100644
--- a/js/Edit/utils/submit.ts
+++ b/src/js/hooks/useSnippetSubmit.ts
@@ -1,16 +1,17 @@
import { __ } from '@wordpress/i18n'
import { addQueryArgs } from '@wordpress/url'
import { isAxiosError } from 'axios'
-import { Dispatch, SetStateAction, useCallback } from 'react'
-import { Notice } from '../../types/Notice'
-import { Snippet } from '../../types/Snippet'
-import { useSnippetsAPI } from '../../utils/api/snippets'
+import { useCallback } from 'react'
+import { useSnippetsAPI } from './useSnippets'
+import type { Dispatch, SetStateAction } from 'react'
+import type { ScreenNotice } from '../types/ScreenNotice'
+import type { Snippet } from '../types/Snippet'
const getSuccessNotice = (request: Snippet, response: Snippet, active: boolean | undefined) => {
if (active === undefined) {
- return 0 === request.id ?
- __('Snippet created.', 'code-snippets') :
- __('Snippet updated.', 'code-snippets')
+ return 0 === request.id
+ ? __('Snippet created.', 'code-snippets')
+ : __('Snippet updated.', 'code-snippets')
}
if (0 === request.id && active) {
@@ -18,9 +19,9 @@ const getSuccessNotice = (request: Snippet, response: Snippet, active: boolean |
}
if (active) {
- return 'single-use' === response.scope ?
- __('Snippet updated and executed.', 'code-snippets') :
- __('Snippet updated and activated.', 'code-snippets')
+ return 'single-use' === response.scope
+ ? __('Snippet updated and executed.', 'code-snippets')
+ : __('Snippet updated and activated.', 'code-snippets')
} else {
return __('Snippet updated and deactivated')
}
@@ -29,7 +30,7 @@ const getSuccessNotice = (request: Snippet, response: Snippet, active: boolean |
export const useSnippetSubmit = (
setSnippet: Dispatch>,
setIsWorking: Dispatch>,
- setCurrentNotice: Dispatch>
+ setCurrentNotice: Dispatch>
): (snippet: Snippet, active?: boolean) => Promise => {
const api = useSnippetsAPI()
@@ -39,7 +40,7 @@ export const useSnippetSubmit = (
const result = await (async (): Promise => {
try {
- const requestData: Snippet = { ...snippet, active: undefined === active ? snippet.active : active }
+ const requestData: Snippet = { ...snippet, active: active ?? snippet.active }
const { data } = await (0 === snippet.id ? api.create(requestData) : api.update(requestData))
setIsWorking(false)
return data.id ? data : undefined
@@ -51,9 +52,9 @@ export const useSnippetSubmit = (
if (undefined === result || 'string' === typeof result) {
const message = [
- snippet.id ?
- __('Could not create snippet.', 'code-snippets') :
- __('Could not update snippet.', 'code-snippets'),
+ snippet.id
+ ? __('Could not create snippet.', 'code-snippets')
+ : __('Could not update snippet.', 'code-snippets'),
result ?? __('The server did not send a valid response.', 'code-snippets')
]
@@ -63,7 +64,7 @@ export const useSnippetSubmit = (
setSnippet({ ...result })
setCurrentNotice(['updated', getSuccessNotice(snippet, result, active)])
- if (snippet.id && result?.id) {
+ if (snippet.id && result.id) {
window.document.title = window.document.title.replace(
__('Add New Snippet', 'code-snippets'),
__('Edit Snippet', 'code-snippets')
diff --git a/js/utils/api/snippets.ts b/src/js/hooks/useSnippets.ts
similarity index 82%
rename from js/utils/api/snippets.ts
rename to src/js/hooks/useSnippets.ts
index 8a3bd77d..4a59752d 100644
--- a/js/utils/api/snippets.ts
+++ b/src/js/hooks/useSnippets.ts
@@ -1,10 +1,11 @@
import { useEffect, useMemo, useState } from 'react'
-import { AxiosResponse, CreateAxiosDefaults } from 'axios'
import { addQueryArgs } from '@wordpress/url'
-import { ExportSnippets } from '../../types/ExportSnippets'
-import { Snippet } from '../../types/Snippet'
-import { isNetworkAdmin } from '../general'
-import { useAxios } from './axios'
+import { handleUnknownError } from '../utils/errors'
+import { isNetworkAdmin } from '../utils/general'
+import { useAxios } from './useAxios'
+import type { Snippet } from '../types/Snippet'
+import type { SnippetsExport } from '../types/SnippetsExport'
+import type { AxiosResponse, CreateAxiosDefaults } from 'axios'
const ROUTE_BASE = window.CODE_SNIPPETS?.restAPI.snippets
@@ -20,7 +21,7 @@ export interface SnippetsAPI {
delete: (snippet: Snippet) => Promise>
activate: (snippet: Snippet) => Promise>
deactivate: (snippet: Snippet) => Promise>
- export: (snippet: Snippet) => Promise>
+ export: (snippet: Snippet) => Promise>
exportCode: (snippet: Snippet) => Promise>
}
@@ -56,7 +57,7 @@ export const useSnippetsAPI = (): SnippetsAPI => {
post(buildURL(snippet, 'deactivate')),
export: snippet =>
- get(buildURL(snippet, 'export')),
+ get(buildURL(snippet, 'export')),
exportCode: snippet =>
get(buildURL(snippet, 'export-code'))
@@ -71,6 +72,7 @@ export const useSnippets = (): Snippet[] | undefined => {
if (!snippets) {
api.fetchAll(isNetworkAdmin())
.then(response => setSnippets(response.data))
+ .catch(handleUnknownError)
}
}, [api, snippets])
diff --git a/src/js/manage.ts b/src/js/manage.ts
new file mode 100644
index 00000000..634cad9b
--- /dev/null
+++ b/src/js/manage.ts
@@ -0,0 +1,5 @@
+import { handleShowCloudPreview, handleSnippetActivationSwitches, handleSnippetPriorityChanges } from './services/manage'
+
+handleSnippetActivationSwitches()
+handleSnippetPriorityChanges()
+handleShowCloudPreview()
diff --git a/js/mce.ts b/src/js/mce.ts
similarity index 80%
rename from js/mce.ts
rename to src/js/mce.ts
index ff56f6bc..c302de99 100644
--- a/js/mce.ts
+++ b/src/js/mce.ts
@@ -1,7 +1,7 @@
-import * as tinymce from 'tinymce'
-import { Editor } from 'tinymce'
-import { ContentShortcodeAtts, SourceShortcodeAtts } from './types/Shortcodes'
-import { LocalisedEditor } from './types/WordPressEditor'
+import tinymce from 'tinymce'
+import type { Editor } from 'tinymce'
+import type { ContentShortcodeAtts, SourceShortcodeAtts } from './types/Shortcodes'
+import type { LocalisedEditor } from './types/WordPressEditor'
const convertToValues = (array: Record) =>
Object.keys(array).map(key => ({
@@ -19,7 +19,7 @@ export const insertContentMenu = (editor: Editor, activeEditor: LocalisedEditor)
type: 'listbox',
name: 'id',
label: activeEditor.getLang('code_snippets.snippet_label'),
- values: convertToValues(activeEditor.getLang('code_snippets.all_snippets') as Record)
+ values: convertToValues(> activeEditor.getLang('code_snippets.all_snippets'))
},
{
type: 'checkbox',
@@ -29,7 +29,9 @@ export const insertContentMenu = (editor: Editor, activeEditor: LocalisedEditor)
],
onsubmit: (event: { data: SourceShortcodeAtts }) => {
const id = parseInt(event.data.id, 10)
- if (!id) return
+ if (!id) {
+ return
+ }
let atts = ''
@@ -53,7 +55,7 @@ export const insertSourceMenu = (editor: Editor, ed: LocalisedEditor) => ({
type: 'listbox',
name: 'id',
label: ed.getLang('code_snippets.snippet_label'),
- values: convertToValues(ed.getLang('code_snippets.content_snippets') as Record)
+ values: convertToValues(> ed.getLang('code_snippets.content_snippets'))
},
{
type: 'checkbox',
@@ -73,7 +75,9 @@ export const insertSourceMenu = (editor: Editor, ed: LocalisedEditor) => ({
],
onsubmit: (event: { data: ContentShortcodeAtts }) => {
const id = parseInt(event.data.id, 10)
- if (!id) return
+ if (!id) {
+ return
+ }
let atts = ''
@@ -90,7 +94,7 @@ export const insertSourceMenu = (editor: Editor, ed: LocalisedEditor) => ({
})
tinymce.PluginManager.add('code_snippets', editor => {
- const activeEditor = tinymce.activeEditor as LocalisedEditor
+ const activeEditor = tinymce.activeEditor
editor.addButton('code_snippets', {
icon: 'code',
diff --git a/js/prism.ts b/src/js/prism.ts
similarity index 92%
rename from js/prism.ts
rename to src/js/prism.ts
index 77e0385b..fb2dbdef 100644
--- a/js/prism.ts
+++ b/src/js/prism.ts
@@ -1,4 +1,4 @@
-import * as Prism from 'prismjs'
+import Prism from 'prismjs'
import 'prismjs/components/prism-markup'
import 'prismjs/components/prism-markup-templating'
import 'prismjs/components/prism-clike'
@@ -19,3 +19,5 @@ document.addEventListener('readystatechange', () => {
Prism.highlightAll()
}
})
+
+window.CODE_SNIPPETS_PRISM = Prism
diff --git a/js/manage/activation.ts b/src/js/services/manage/activation.ts
similarity index 56%
rename from js/manage/activation.ts
rename to src/js/services/manage/activation.ts
index a4ebab9e..039edf1c 100644
--- a/js/manage/activation.ts
+++ b/src/js/services/manage/activation.ts
@@ -1,13 +1,13 @@
import { __ } from '@wordpress/i18n'
-import { Snippet } from '../types/Snippet'
import { updateSnippet } from './requests'
+import type { Snippet } from '../../types/Snippet'
/**
* Update the snippet count of a specific view
* @param element
* @param increment
*/
-const updateViewCount = (element: HTMLElement, increment: boolean) => {
+const updateViewCount = (element: HTMLElement | null, increment: boolean) => {
if (element?.textContent) {
let count = parseInt(element.textContent.replace(/\((?\d+)\)/, '$1'), 10)
count += increment ? 1 : -1
@@ -23,14 +23,16 @@ const updateViewCount = (element: HTMLElement, increment: boolean) => {
* @param event
*/
export const toggleSnippetActive = (link: HTMLAnchorElement, event: Event) => {
- const row = link?.parentElement?.parentElement // Switch < cell < row
+ const row = link.parentElement?.parentElement // Switch < cell < row
if (!row) {
console.error('Could not toggle snippet active status.', row)
return
}
- const match = row.className.match(/\b(?:in)?active-snippet\b/)
- if (!match) return
+ const match = /\b(?:in)?active-snippet\b/.exec(row.className)
+ if (!match) {
+ return
+ }
event.preventDefault()
@@ -38,30 +40,40 @@ export const toggleSnippetActive = (link: HTMLAnchorElement, event: Event) => {
const snippet: Partial = { active: activating }
updateSnippet('active', row, snippet, response => {
- const button = row.querySelector('.snippet-activation-switch') as HTMLAnchorElement
+ const button: HTMLAnchorElement | null = row.querySelector('.snippet-activation-switch')
if (response.success) {
- row.className = activating ?
- row.className.replace(/\binactive-snippet\b/, 'active-snippet') :
- row.className.replace(/\bactive-snippet\b/, 'inactive-snippet')
+ row.className = activating
+ ? row.className.replace(/\binactive-snippet\b/, 'active-snippet')
+ : row.className.replace(/\bactive-snippet\b/, 'inactive-snippet')
const views = document.querySelector('.subsubsub')
const activeCount = views?.querySelector('.active .count')
const inactiveCount = views?.querySelector('.inactive .count')
- activeCount ? updateViewCount(activeCount, activating) : null
- inactiveCount ? updateViewCount(inactiveCount, activating) : null
+ if (activeCount) {
+ updateViewCount(activeCount, activating)
+ }
- button.title = activating ? __('Deactivate', 'code-snippets') : __('Activate', 'code-snippets')
+ if (inactiveCount) {
+ updateViewCount(inactiveCount, activating)
+ }
+
+ if (button) {
+ button.title = activating ? __('Deactivate', 'code-snippets') : __('Activate', 'code-snippets')
+ }
} else {
row.className += ' erroneous-snippet'
- button.title = __('An error occurred when attempting to activate', 'code-snippets')
+
+ if (button) {
+ button.title = __('An error occurred when attempting to activate', 'code-snippets')
+ }
}
})
}
export const handleSnippetActivationSwitches = () => {
for (const link of document.getElementsByClassName('snippet-activation-switch')) {
- link.addEventListener('click', event => toggleSnippetActive(link as HTMLAnchorElement, event))
+ link.addEventListener('click', event => toggleSnippetActive( link, event))
}
}
diff --git a/js/manage/cloud.ts b/src/js/services/manage/cloud.ts
similarity index 65%
rename from js/manage/cloud.ts
rename to src/js/services/manage/cloud.ts
index e8f14a9b..6aa94805 100644
--- a/js/manage/cloud.ts
+++ b/src/js/services/manage/cloud.ts
@@ -17,22 +17,25 @@ export const handleShowCloudPreview = () => {
const snippetId = button.getAttribute('data-snippet')
const snippetLanguage = button.getAttribute('data-lang')
- const snippetCodeInput = document.getElementById(`cloud-snippet-code-${snippetId}`)
- const snippetCode = snippetCodeInput?.value
+ const snippetCodeInput = document.getElementById(`cloud-snippet-code-${snippetId}`)
+ const snippetCodeModalTag = document.getElementById('snippet-code-thickbox')
+
+ if (!snippetCodeModalTag || !snippetCodeInput) {
+ return
+ }
- const snippetCodeModalTag = document.getElementById('snippet-code-thickbox')
snippetCodeModalTag.classList.remove(...snippetCodeModalTag.classList)
snippetCodeModalTag.classList.add(`language-${snippetLanguage}`)
- snippetCodeModalTag.textContent = snippetCode
+ snippetCodeModalTag.textContent = snippetCodeInput.value
if ('markup' === snippetLanguage) {
- snippetCodeModalTag.innerHTML = `<![CDATA[${snippetCode}]]> `
+ snippetCodeModalTag.innerHTML = `<![CDATA[${snippetCodeInput.value}]]> `
}
if ('php' === snippetLanguage) {
// Check if there is an opening php tag if not add it.
- if (!snippetCode.startsWith(' {
}
}
-
export const handleSnippetPriorityChanges = () => {
- for (const field of document.getElementsByClassName('snippet-priority') as HTMLCollectionOf) {
+ for (const field of > document.getElementsByClassName('snippet-priority')) {
field.addEventListener('input', () => updateSnippetPriority(field))
field.disabled = false
}
diff --git a/js/manage/requests.ts b/src/js/services/manage/requests.ts
similarity index 65%
rename from js/manage/requests.ts
rename to src/js/services/manage/requests.ts
index 19ebb417..a80fbca6 100644
--- a/js/manage/requests.ts
+++ b/src/js/services/manage/requests.ts
@@ -1,7 +1,12 @@
-import { Snippet, SnippetScope } from '../types/Snippet'
-import { isNetworkAdmin } from '../utils/general'
+import { isNetworkAdmin } from '../../utils/general'
+import type { Snippet, SnippetScope } from '../../types/Snippet'
-export type SuccessCallback = (response: { success: boolean, data?: unknown }) => void
+export interface ResponseData {
+ success: boolean
+ data?: T
+}
+
+export type SuccessCallback = (response: ResponseData) => void
const sendSnippetRequest = (query: string, onSuccess?: SuccessCallback) => {
const request = new XMLHttpRequest()
@@ -11,11 +16,12 @@ const sendSnippetRequest = (query: string, onSuccess?: SuccessCallback) => {
request.onload = () => {
const success = 200
const errorStart = 400
- if (success > request.status || errorStart <= request.status) return
- // eslint-disable-next-line no-console
- console.info(request.responseText)
+ if (success > request.status || errorStart <= request.status) {
+ return
+ }
- onSuccess?.(JSON.parse(request.responseText))
+ console.info(request.responseText)
+ onSuccess?.( JSON.parse(request.responseText))
}
request.send(query)
@@ -29,7 +35,7 @@ const sendSnippetRequest = (query: string, onSuccess?: SuccessCallback) => {
* @param successCallback
*/
export const updateSnippet = (field: keyof Snippet, row: Element, snippet: Partial, successCallback?: SuccessCallback) => {
- const nonce = document.getElementById('code_snippets_ajax_nonce') as HTMLInputElement | null
+ const nonce = document.getElementById('code_snippets_ajax_nonce')
const columnId = row.querySelector('.column-id')
if (!nonce || !columnId?.textContent || !parseInt(columnId.textContent, 10)) {
@@ -37,9 +43,9 @@ export const updateSnippet = (field: keyof Snippet, row: Element, snippet: Parti
}
snippet.id = parseInt(columnId.textContent, 10)
- snippet.shared_network = Boolean(row.className.match(/\bshared-network-snippet\b/))
+ snippet.shared_network = null !== /\bshared-network-snippet\b/.exec(row.className)
snippet.network = snippet.shared_network || isNetworkAdmin()
- snippet.scope = row.getAttribute('data-snippet-scope') as SnippetScope | null ?? snippet.scope
+ snippet.scope = row.getAttribute('data-snippet-scope') ?? snippet.scope
const queryString = `action=update_code_snippet&_ajax_nonce=${nonce.value}&field=${field}&snippet=${JSON.stringify(snippet)}`
sendSnippetRequest(queryString, successCallback)
diff --git a/js/settings/editor-preview.ts b/src/js/services/settings/editor-preview.ts
similarity index 85%
rename from js/settings/editor-preview.ts
rename to src/js/services/settings/editor-preview.ts
index 8d9315c9..f83a6b20 100644
--- a/js/settings/editor-preview.ts
+++ b/src/js/services/settings/editor-preview.ts
@@ -1,4 +1,4 @@
-import '../editor'
+import '../../editor'
const parseSelect = (select: HTMLSelectElement) => select.options[select.selectedIndex].value
const parseCheckbox = (checkbox: HTMLInputElement) => checkbox.checked
@@ -14,6 +14,7 @@ const initialiseCodeMirror = () => {
}
console.error('Could not initialise CodeMirror on textarea.', textarea)
+ return undefined
}
export const handleEditorPreviewUpdates = () => {
@@ -29,11 +30,11 @@ export const handleEditorPreviewUpdates = () => {
const value = (() => {
switch (setting.type) {
case 'select':
- return parseSelect(element as HTMLSelectElement)
+ return parseSelect( element)
case 'checkbox':
- return parseCheckbox(element as HTMLInputElement)
+ return parseCheckbox( element)
case 'number':
- return parseNumber(element as HTMLInputElement)
+ return parseNumber( element)
default:
return null
}
diff --git a/src/js/services/settings/index.ts b/src/js/services/settings/index.ts
new file mode 100644
index 00000000..1cbaa4c6
--- /dev/null
+++ b/src/js/services/settings/index.ts
@@ -0,0 +1,2 @@
+export { handleSettingsTabs } from './tabs'
+export { handleEditorPreviewUpdates } from './editor-preview'
diff --git a/js/settings/tabs.ts b/src/js/services/settings/tabs.ts
similarity index 96%
rename from js/settings/tabs.ts
rename to src/js/services/settings/tabs.ts
index f01d9285..6301beee 100644
--- a/js/settings/tabs.ts
+++ b/src/js/services/settings/tabs.ts
@@ -33,7 +33,7 @@ export const handleSettingsTabs = () => {
return
}
- const tabs = tabsWrapper.querySelectorAll('.nav-tab') ?? []
+ const tabs = tabsWrapper.querySelectorAll('.nav-tab')
for (const tab of tabs) {
tab.addEventListener('click', event => {
diff --git a/src/js/settings.ts b/src/js/settings.ts
new file mode 100644
index 00000000..c943ae31
--- /dev/null
+++ b/src/js/settings.ts
@@ -0,0 +1,4 @@
+import { handleEditorPreviewUpdates, handleSettingsTabs } from './services/settings'
+
+handleSettingsTabs()
+handleEditorPreviewUpdates()
diff --git a/src/js/types/KeyboardShortcut.ts b/src/js/types/KeyboardShortcut.ts
new file mode 100644
index 00000000..58e647fb
--- /dev/null
+++ b/src/js/types/KeyboardShortcut.ts
@@ -0,0 +1,31 @@
+import { _x } from '@wordpress/i18n'
+
+export const KEYBOARD_KEYS = {
+ 'Cmd': _x('Cmd', 'keyboard key', 'code-snippets'),
+ 'Ctrl': _x('Ctrl', 'keyboard key', 'code-snippets'),
+ 'Shift': _x('Shift', 'keyboard key', 'code-snippets'),
+ 'Option': _x('Option', 'keyboard key', 'code-snippets'),
+ 'Alt': _x('Alt', 'keyboard key', 'code-snippets'),
+ 'Tab': _x('Tab', 'keyboard key', 'code-snippets'),
+ 'Up': _x('Up', 'keyboard key', 'code-snippets'),
+ 'Down': _x('Down', 'keyboard key', 'code-snippets'),
+ 'A': _x('A', 'keyboard key', 'code-snippets'),
+ 'D': _x('D', 'keyboard key', 'code-snippets'),
+ 'F': _x('F', 'keyboard key', 'code-snippets'),
+ 'G': _x('G', 'keyboard key', 'code-snippets'),
+ 'R': _x('R', 'keyboard key', 'code-snippets'),
+ 'S': _x('S', 'keyboard key', 'code-snippets'),
+ 'Y': _x('Y', 'keyboard key', 'code-snippets'),
+ 'Z': _x('Z', 'keyboard key', 'code-snippets'),
+ '/': _x('/', 'keyboard key', 'code-snippets'),
+ '[': _x(']', 'keyboard key', 'code-snippets'),
+ ']': _x(']', 'keyboard key', 'code-snippets')
+}
+
+export type KeyboardKey = keyof typeof KEYBOARD_KEYS
+
+export interface KeyboardShortcut {
+ label: string
+ mod: KeyboardKey | KeyboardKey[]
+ key: KeyboardKey
+}
diff --git a/src/js/types/ScreenNotice.ts b/src/js/types/ScreenNotice.ts
new file mode 100644
index 00000000..9b2c52a2
--- /dev/null
+++ b/src/js/types/ScreenNotice.ts
@@ -0,0 +1 @@
+export type ScreenNotice = ['error' | 'updated', string]
diff --git a/js/types/SelectOption.ts b/src/js/types/SelectOption.ts
similarity index 75%
rename from js/types/SelectOption.ts
rename to src/js/types/SelectOption.ts
index 82339a5b..918fd1a5 100644
--- a/js/types/SelectOption.ts
+++ b/src/js/types/SelectOption.ts
@@ -1,4 +1,4 @@
-import { GroupBase } from 'react-select'
+import type { GroupBase } from 'react-select'
export interface SelectOption {
readonly value: T
diff --git a/js/types/Shortcodes.ts b/src/js/types/Shortcodes.ts
similarity index 92%
rename from js/types/Shortcodes.ts
rename to src/js/types/Shortcodes.ts
index 013ea7de..edb63d99 100644
--- a/js/types/Shortcodes.ts
+++ b/src/js/types/Shortcodes.ts
@@ -5,6 +5,7 @@ export interface SourceShortcodeAtts {
export interface ContentShortcodeAtts {
id: string
+ name: string
php: boolean
format: boolean
shortcodes: boolean
diff --git a/js/types/Snippet.ts b/src/js/types/Snippet.ts
similarity index 100%
rename from js/types/Snippet.ts
rename to src/js/types/Snippet.ts
index 8b4844a1..c03c8c4a 100644
--- a/js/types/Snippet.ts
+++ b/src/js/types/Snippet.ts
@@ -13,6 +13,9 @@ export interface Snippet {
code_error?: [string, number] | null
}
+export type SnippetType = typeof SNIPPET_TYPES[number]
+export type SnippetScope = typeof SNIPPET_SCOPES[number]
+
export const SNIPPET_SCOPES = [
'global', 'admin', 'front-end', 'single-use',
'content', 'head-content', 'footer-content',
@@ -22,9 +25,6 @@ export const SNIPPET_SCOPES = [
export const SNIPPET_TYPES = ['php', 'html', 'css', 'js']
-export type SnippetType = typeof SNIPPET_TYPES[number]
-export type SnippetScope = typeof SNIPPET_SCOPES[number]
-
export const SNIPPET_TYPE_SCOPES: Record = {
php: ['global', 'admin', 'front-end', 'single-use'],
html: ['content', 'head-content', 'footer-content'],
diff --git a/src/js/types/SnippetsExport.ts b/src/js/types/SnippetsExport.ts
new file mode 100644
index 00000000..5eff6a6f
--- /dev/null
+++ b/src/js/types/SnippetsExport.ts
@@ -0,0 +1,7 @@
+import type { Snippet } from './Snippet'
+
+export interface SnippetsExport {
+ generator: string
+ date_created: string
+ snippets: Snippet[]
+}
diff --git a/js/types/Window.ts b/src/js/types/Window.ts
similarity index 75%
rename from js/types/Window.ts
rename to src/js/types/Window.ts
index 3fc62e0c..c409555c 100644
--- a/js/types/Window.ts
+++ b/src/js/types/Window.ts
@@ -1,7 +1,8 @@
-import tinymce from 'tinymce'
-import { Snippet } from './Snippet'
-import { CodeEditorInstance, EditorOption, WordPressCodeEditor } from './WordPressCodeEditor'
-import { WordPressEditor } from './WordPressEditor'
+import type Prism from 'prismjs'
+import type tinymce from 'tinymce'
+import type { Snippet } from './Snippet'
+import type { CodeEditorInstance, EditorOption, WordPressCodeEditor } from './WordPressCodeEditor'
+import type { WordPressEditor } from './WordPressEditor'
declare global {
interface Window {
@@ -15,6 +16,7 @@ declare global {
readonly wpActiveEditor?: string
code_snippets_editor_preview?: CodeEditorInstance
readonly code_snippets_editor_settings: EditorOption[]
+ CODE_SNIPPETS_PRISM?: typeof Prism
readonly CODE_SNIPPETS?: {
isLicensed: boolean
restAPI: {
@@ -29,19 +31,20 @@ declare global {
manage: string
addNew: string
edit: string
+ connectCloud: string
}
}
readonly CODE_SNIPPETS_EDIT?: {
snippet: Snippet
+ pageTitleActions: Record
isPreview: boolean
- enableTags: boolean
+ isLicensed: boolean
enableDownloads: boolean
scrollToNotices: boolean
extraSaveButtons: boolean
activateByDefault: boolean
enableDescription: boolean
editorTheme: string
- pageTitleActions: Record
tagOptions: {
enabled: boolean
allowSpaces: boolean
diff --git a/js/types/WordPressCodeEditor.ts b/src/js/types/WordPressCodeEditor.ts
similarity index 91%
rename from js/types/WordPressCodeEditor.ts
rename to src/js/types/WordPressCodeEditor.ts
index 0da788cf..14021b26 100644
--- a/js/types/WordPressCodeEditor.ts
+++ b/src/js/types/WordPressCodeEditor.ts
@@ -1,4 +1,4 @@
-import { Editor, EditorConfiguration } from 'codemirror'
+import type { Editor, EditorConfiguration } from 'codemirror'
export interface EditorOption {
name: string
diff --git a/js/types/WordPressEditor.ts b/src/js/types/WordPressEditor.ts
similarity index 94%
rename from js/types/WordPressEditor.ts
rename to src/js/types/WordPressEditor.ts
index daca075a..a9952cf1 100644
--- a/js/types/WordPressEditor.ts
+++ b/src/js/types/WordPressEditor.ts
@@ -1,4 +1,4 @@
-import tinymce from 'tinymce'
+import type tinymce from 'tinymce'
export interface VisualEditorSettings {
tinymce: boolean | tinymce.Settings & {
diff --git a/js/types/wp/Page.ts b/src/js/types/wp/Page.ts
similarity index 83%
rename from js/types/wp/Page.ts
rename to src/js/types/wp/Page.ts
index 7829300f..437aa76e 100644
--- a/js/types/wp/Page.ts
+++ b/src/js/types/wp/Page.ts
@@ -1,4 +1,4 @@
-import { Post } from './Post'
+import type { Post } from './Post'
export const PAGES_ENDPOINT = '/wp/v2/pages'
diff --git a/js/types/wp/Post.ts b/src/js/types/wp/Post.ts
similarity index 100%
rename from js/types/wp/Post.ts
rename to src/js/types/wp/Post.ts
diff --git a/js/types/wp/PostType.ts b/src/js/types/wp/PostType.ts
similarity index 100%
rename from js/types/wp/PostType.ts
rename to src/js/types/wp/PostType.ts
diff --git a/js/types/wp/Term.ts b/src/js/types/wp/Term.ts
similarity index 100%
rename from js/types/wp/Term.ts
rename to src/js/types/wp/Term.ts
diff --git a/js/types/wp/User.ts b/src/js/types/wp/User.ts
similarity index 100%
rename from js/types/wp/User.ts
rename to src/js/types/wp/User.ts
diff --git a/src/js/utils/Linter.ts b/src/js/utils/Linter.ts
new file mode 100644
index 00000000..db0369e4
--- /dev/null
+++ b/src/js/utils/Linter.ts
@@ -0,0 +1,170 @@
+/**
+ * Based on work licensed under the BSD 3-Clause license.
+ *
+ * Copyright (c) 2017, glayzzle
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * * Redistributions of source code must retain the above copyright notice, this
+ * list of conditions and the following disclaimer.
+ *
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ * this list of conditions and the following disclaimer in the documentation
+ * and/or other materials provided with the distribution.
+ *
+ * * Neither the name of the copyright holder nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+import { Engine } from 'php-parser'
+import CodeMirror from 'codemirror'
+import type { Block, Location, Node } from 'php-parser'
+
+export interface Annotation {
+ message: string
+ severity: string
+ from: CodeMirror.Position
+ to: CodeMirror.Position
+}
+
+export interface Identifier extends Node {
+ name: string
+}
+
+export interface Declaration extends Node {
+ name: Identifier | string
+}
+
+export class Linter {
+ private readonly code: string
+
+ private readonly function_names: Set
+
+ private readonly class_names: Set
+
+ public readonly annotations: Annotation[]
+
+ /**
+ * Constructor.
+ * @param code
+ */
+ constructor(code: string) {
+ this.code = code
+ this.annotations = []
+
+ this.function_names = new Set()
+ this.class_names = new Set()
+ }
+
+ /**
+ * Lint the provided code.
+ */
+ lint() {
+ const parser = new Engine({
+ parser: {
+ suppressErrors: true,
+ version: 800
+ },
+ ast: {
+ withPositions: true
+ }
+ })
+
+ try {
+ const program = parser.parseEval(this.code)
+
+ if (0 < program.errors.length) {
+ for (const error of program.errors) {
+ this.annotate(error.message, error.loc)
+ }
+ }
+
+ this.visit(program)
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ /**
+ * Visit nodes recursively.
+ * @param node
+ */
+ visit(node: Node) {
+ if (node.kind) {
+ this.validate(node)
+ }
+
+ if ('children' in node) {
+ const block = node
+ for (const child of block.children) {
+ this.visit(child)
+ }
+ }
+ }
+
+ /**
+ * Check whether a given identifier has already been defined, creating an annotation if so.
+ * @param identifier
+ * @param registry
+ * @param label
+ */
+ checkDuplicateIdentifier(identifier: Identifier, registry: Set, label: string) {
+ if (registry.has(identifier.name)) {
+ this.annotate(`Cannot redeclare ${label} ${identifier.name}()`, identifier.loc)
+ } else {
+ registry.add(identifier.name)
+ }
+ }
+
+ /**
+ * Perform additional validations on nodes.
+ * @param node
+ */
+ validate(node: Node) {
+ const decl = node
+ const ident = decl.name
+
+ if (!('name' in decl && 'name' in ident) || 'identifier' !== ident.kind) {
+ return
+ }
+
+ if ('function' === node.kind) {
+ this.checkDuplicateIdentifier(ident, this.function_names, 'function')
+ } else if ('class' === node.kind) {
+ this.checkDuplicateIdentifier(ident, this.class_names, 'class')
+ }
+ }
+
+ /**
+ * Create a lint annotation.
+ * @param message
+ * @param location
+ * @param severity
+ */
+ annotate(message: string, location: Location | null, severity = 'error') {
+ const [start, end] = location
+ ? location.end.offset < location.start.offset ? [location.end, location.start] : [location.start, location.end]
+ : [{ line: 0, column: 0 }, { line: 0, column: 0 }]
+
+ this.annotations.push({
+ message,
+ severity,
+ from: CodeMirror.Pos(start.line - 1, start.column),
+ to: CodeMirror.Pos(end.line - 1, end.column)
+ })
+ }
+}
diff --git a/src/js/utils/errors.ts b/src/js/utils/errors.ts
new file mode 100644
index 00000000..c2961a8b
--- /dev/null
+++ b/src/js/utils/errors.ts
@@ -0,0 +1,3 @@
+export const handleUnknownError = (error: unknown) => {
+ console.error(error)
+}
diff --git a/js/utils/files.ts b/src/js/utils/files.ts
similarity index 82%
rename from js/utils/files.ts
rename to src/js/utils/files.ts
index 2654307f..30617a1b 100644
--- a/js/utils/files.ts
+++ b/src/js/utils/files.ts
@@ -1,5 +1,5 @@
-import { Snippet } from '../types/Snippet'
import { getSnippetType } from './snippets'
+import type { Snippet } from '../types/Snippet'
const SECOND_IN_MS = 1000
const TIMEOUT_SECONDS = 40
@@ -28,7 +28,9 @@ export const downloadSnippetExportFile = (
) => {
const [ext, mimeType] = MIME_INFO[type ?? getSnippetType(scope)]
- const title = name.toLowerCase().replace(/[^\w-]+/g, '-') ?? `snippet-${id}`
+ const sanitizedName = name.toLowerCase().replace(/[^\w-]+/g, '-').trim()
+
+ const title = '' === sanitizedName ? `snippet-${id}` : sanitizedName
const filename = `${title}.code-snippets.${ext}`
downloadAsFile(content, filename, mimeType)
diff --git a/src/js/utils/general.ts b/src/js/utils/general.ts
new file mode 100644
index 00000000..c073673b
--- /dev/null
+++ b/src/js/utils/general.ts
@@ -0,0 +1,8 @@
+export const isNetworkAdmin = (): boolean =>
+ window.pagenow.endsWith('-network')
+
+export const isMacOS = (): boolean =>
+ null !== /mac/i.exec(window.navigator.userAgent)
+
+export const isLicensed = (): boolean =>
+ !!window.CODE_SNIPPETS?.isLicensed
diff --git a/src/js/utils/restAPI.ts b/src/js/utils/restAPI.ts
new file mode 100644
index 00000000..774c6b8b
--- /dev/null
+++ b/src/js/utils/restAPI.ts
@@ -0,0 +1,20 @@
+import axios from 'axios'
+import { trimLeadingChar, trimTrailingChar } from './text'
+import type { AxiosRequestConfig, AxiosResponse } from 'axios'
+
+const REST_BASE = window.CODE_SNIPPETS?.restAPI.base ?? ''
+
+const getRestUrl = (endpoint: string): string =>
+ `${trimTrailingChar(REST_BASE, '/')}/${trimLeadingChar(endpoint, '/')}`
+
+const GET_CACHE: Record | undefined> = {}
+
+export const getCached = (endpoint: string, refresh = false, config?: AxiosRequestConfig): Promise> =>
+ !refresh && GET_CACHE[endpoint]
+ ? Promise.resolve(> GET_CACHE[endpoint])
+ : axios
+ .get, D>(getRestUrl(endpoint), config)
+ .then(response => {
+ GET_CACHE[endpoint] = response
+ return response
+ })
diff --git a/js/utils/shortcodes.ts b/src/js/utils/shortcodes.ts
similarity index 100%
rename from js/utils/shortcodes.ts
rename to src/js/utils/shortcodes.ts
diff --git a/js/utils/snippets.ts b/src/js/utils/snippets.ts
similarity index 53%
rename from js/utils/snippets.ts
rename to src/js/utils/snippets.ts
index 7f8e929b..1f199476 100644
--- a/js/utils/snippets.ts
+++ b/src/js/utils/snippets.ts
@@ -1,5 +1,5 @@
-import { Snippet, SnippetScope, SnippetType } from '../types/Snippet'
import { isNetworkAdmin } from './general'
+import type { Snippet, SnippetScope, SnippetType } from '../types/Snippet'
const PRO_TYPES: SnippetType[] = ['css', 'js']
@@ -17,22 +17,22 @@ export const createEmptySnippet = (): Snippet => ({
priority: 10
})
-export const getSnippetType = (snippet: Snippet | SnippetScope): SnippetType => {
- const scope = 'string' === typeof snippet ? snippet : snippet.scope
+export const getSnippetType = (snippetOrScope: Snippet | SnippetScope): SnippetType => {
+ const scope = 'string' === typeof snippetOrScope ? snippetOrScope : snippetOrScope.scope
- if (scope.endsWith('-css')) {
- return 'css'
- }
+ switch (true) {
+ case scope.endsWith('-css'):
+ return 'css'
- if (scope.endsWith('-js')) {
- return 'js'
- }
+ case scope.endsWith('-js'):
+ return 'js'
- if (scope.endsWith('content')) {
- return 'html'
- }
+ case scope.endsWith('content'):
+ return 'html'
- return 'php'
+ default:
+ return 'php'
+ }
}
export const isProSnippet = (snippet: Snippet | SnippetScope): boolean =>
@@ -40,6 +40,3 @@ export const isProSnippet = (snippet: Snippet | SnippetScope): boolean =>
export const isProType = (type: SnippetType): boolean =>
PRO_TYPES.includes(type)
-
-export const isLicensed = (): boolean =>
- !!window.CODE_SNIPPETS?.isLicensed
diff --git a/src/js/utils/text.ts b/src/js/utils/text.ts
new file mode 100644
index 00000000..aa483698
--- /dev/null
+++ b/src/js/utils/text.ts
@@ -0,0 +1,16 @@
+export const toCamelCase = (text: string): string =>
+ text.replace(/-(?[a-z])/g, (_, letter: string) => letter.toUpperCase())
+
+export const trimLeadingChar = (text: string, character: string): string =>
+ character === text.charAt(0) ? text.slice(1) : text
+
+export const trimTrailingChar = (text: string, character: string): string =>
+ character === text.charAt(text.length - 1) ? text.slice(0, -1) : text
+
+export const truncateWords = (text: string, wordCount: number): string => {
+ const words = text.trim().split(/\s+/)
+
+ return words.length > wordCount
+ ? `${words.slice(0, wordCount).join(' ')}β¦`
+ : text
+}
diff --git a/license.txt b/src/license.txt
similarity index 100%
rename from license.txt
rename to src/license.txt
diff --git a/php/admin-menus/class-admin-menu.php b/src/php/admin-menus/class-admin-menu.php
similarity index 80%
rename from php/admin-menus/class-admin-menu.php
rename to src/php/admin-menus/class-admin-menu.php
index 7bfd0472..2e731eb0 100644
--- a/php/admin-menus/class-admin-menu.php
+++ b/src/php/admin-menus/class-admin-menu.php
@@ -12,35 +12,35 @@ abstract class Admin_Menu {
*
* @var string
*/
- public $name;
+ public string $name;
/**
* The label shown in the admin menu.
*
* @var string
*/
- public $label;
+ public string $label;
/**
* The text used for the page title.
*
* @var string
*/
- public $title;
+ public string $title;
/**
* The base slug for the top-level admin menu.
*
* @var string
*/
- protected $base_slug;
+ protected string $base_slug;
/**
* The slug for this admin menu.
*
* @var string
*/
- protected $slug;
+ protected string $slug;
/**
* Constructor.
@@ -122,36 +122,6 @@ protected function print_messages() {
// None required by default.
}
- /**
- * Retrieve a result message based on a posted status
- *
- * @param array $messages List of possible messages to display.
- * @param string $request_var Name of $_REQUEST variable to check.
- * @param string $class_name Class to use on buttons. Default 'updated'.
- *
- * @return bool Whether a result message was printed.
- */
- protected function print_result_message( array $messages, string $request_var = 'result', string $class_name = 'updated' ): bool {
-
- if ( empty( $_REQUEST[ $request_var ] ) ) {
- return false;
- }
-
- $result = sanitize_key( $_REQUEST[ $request_var ] );
-
- if ( isset( $messages[ $result ] ) ) {
- printf(
- '',
- wp_kses_post( $messages[ $result ] ),
- esc_attr( $class_name )
- );
-
- return true;
- }
-
- return false;
- }
-
/**
* Executed when the admin page is loaded
*/
@@ -184,7 +154,7 @@ abstract public function enqueue_assets();
*
* @return array Link labels keyed to link URLs.
*/
- protected function page_title_action_links( array $actions ): array {
+ public function page_title_action_links( array $actions ): array {
$plugin = code_snippets();
$links = [];
@@ -229,7 +199,7 @@ protected function page_title_action_links( array $actions ): array {
*
* @param array $actions List of actions to render as links, as array values.
*/
- protected function render_page_title_actions( array $actions ) {
+ public function render_page_title_actions( array $actions ) {
foreach ( $this->page_title_action_links( $actions ) as $label => $url ) {
printf( '%s ', esc_url( $url ), esc_html( $label ) );
}
diff --git a/php/admin-menus/class-edit-menu.php b/src/php/admin-menus/class-edit-menu.php
similarity index 95%
rename from php/admin-menus/class-edit-menu.php
rename to src/php/admin-menus/class-edit-menu.php
index 9cf9e6c3..92141748 100644
--- a/php/admin-menus/class-edit-menu.php
+++ b/src/php/admin-menus/class-edit-menu.php
@@ -5,7 +5,7 @@
use function Code_Snippets\Settings\get_setting;
/**
- * This class handles the add/edit menu
+ * This class handles the add/edit menu.
*/
class Edit_Menu extends Admin_Menu {
@@ -25,10 +25,12 @@ class Edit_Menu extends Admin_Menu {
* @var Snippet|null
* @see Edit_Menu::load_snippet_data()
*/
- protected $snippet = null;
+ protected ?Snippet $snippet = null;
/**
- * Constructor
+ * Constructor.
+ *
+ * @return void
*/
public function __construct() {
parent::__construct(
@@ -39,7 +41,9 @@ public function __construct() {
}
/**
- * Register action and filter hooks
+ * Register action and filter hooks.
+ *
+ * @return void
*/
public function run() {
parent::run();
@@ -68,7 +72,9 @@ public function register() {
}
/**
- * Executed when the menu is loaded
+ * Executed when the menu is loaded.
+ *
+ * @return void
*/
public function load() {
parent::load();
@@ -138,6 +144,8 @@ public function load_snippet_data() {
/**
* Enqueue assets for the edit menu
+ *
+ * @return void
*/
public function enqueue_assets() {
$plugin = code_snippets();
diff --git a/php/admin-menus/class-import-menu.php b/src/php/admin-menus/class-import-menu.php
similarity index 90%
rename from php/admin-menus/class-import-menu.php
rename to src/php/admin-menus/class-import-menu.php
index c321356a..3c3b2565 100644
--- a/php/admin-menus/class-import-menu.php
+++ b/src/php/admin-menus/class-import-menu.php
@@ -137,15 +137,22 @@ protected function print_messages() {
esc_html_e( 'No snippets were imported.', 'code-snippets' );
} else {
- /* translators: 1: amount of snippets imported, 2: link to Snippets menu */
- $text = _n(
- 'Successfully imported %1$d snippet. Have fun! ',
- 'Successfully imported %1$d snippets. Have fun! ',
- $imported,
- 'code-snippets'
+ /* translators: %d: amount of snippets imported */
+ printf(
+ _n(
+ 'Successfully imported %d snippet.',
+ 'Successfully imported %d snippets.',
+ $imported,
+ 'code-snippets'
+ ),
+ '' . number_format_i18n( $imported ) . ' ',
);
- printf( wp_kses_post( $text ), esc_html( $imported ), esc_url( code_snippets()->get_menu_url( 'manage' ) ) );
+ printf(
+ ' %s ',
+ esc_url( code_snippets()->get_menu_url( 'manage' ) ),
+ esc_html__( 'Have fun!', 'code-snippets' )
+ );
}
echo ' ';
diff --git a/php/admin-menus/class-manage-menu.php b/src/php/admin-menus/class-manage-menu.php
similarity index 83%
rename from php/admin-menus/class-manage-menu.php
rename to src/php/admin-menus/class-manage-menu.php
index 8c700661..4e90b8b2 100644
--- a/php/admin-menus/class-manage-menu.php
+++ b/src/php/admin-menus/class-manage-menu.php
@@ -14,24 +14,23 @@
class Manage_Menu extends Admin_Menu {
/**
- * Holds the list table class
+ * Instance of the list table class.
*
* @var List_Table
*/
- public $list_table;
+ public List_Table $list_table;
/**
* Instance of the cloud list table class for search results.
*
* @var Cloud_Search_List_Table
*/
- public $cloud_search_list_table;
+ public Cloud_Search_List_Table $cloud_search_list_table;
/**
* Class constructor
*/
public function __construct() {
-
parent::__construct(
'manage',
_x( 'All Snippets', 'menu label', 'code-snippets' ),
@@ -173,15 +172,12 @@ public function register_compact_menu() {
public function load() {
parent::load();
- /* Load the contextual help tabs */
$contextual_help = new Contextual_Help( 'manage' );
$contextual_help->load();
- // Initialize the search cloud list table class.
$this->cloud_search_list_table = new Cloud_Search_List_Table();
$this->cloud_search_list_table->prepare_items();
- /* Initialize the list table class */
$this->list_table = new List_Table();
$this->list_table->prepare_items();
}
@@ -210,8 +206,8 @@ public function enqueue_assets() {
wp_set_script_translations( 'code-snippets-manage-js', 'code-snippets' );
- if ( 'cloud_search' === $this->get_current_type() ) {
- Frontend::enqueue_all_prism_themes();
+ if ( 'cloud' === $this->get_current_type() || 'cloud_search' === $this->get_current_type() ) {
+ Front_End::enqueue_all_prism_themes();
}
}
@@ -232,36 +228,18 @@ protected function get_current_type(): string {
* @return void
*/
public function print_pro_message() {
- echo '
', esc_html_x( 'Pro', 'go pro badge', 'code-snippets' ), ' ';
+ if ( ! code_snippets()->licensing->is_licensed() ) {
+ echo '
', esc_html__( 'Pro', 'code-snippets' ), ' ';
+ }
}
/**
* Print the status and error messages
+ *
+ * @return void
*/
protected function print_messages() {
- // Output a warning if safe mode is active.
- if ( defined( 'CODE_SNIPPETS_SAFE_MODE' ) && CODE_SNIPPETS_SAFE_MODE ) {
- echo '
';
- echo wp_kses_post( __( 'Warning: Safe mode is active and snippets will not execute! Remove the CODE_SNIPPETS_SAFE_MODE constant from wp-config.php to turn off safe mode. Help ', 'code-snippets' ) );
- echo '
';
- }
-
- $this->print_result_message(
- apply_filters(
- 'code_snippets/manage/result_messages',
- array(
- 'executed' => __( 'Snippet
executed .', 'code-snippets' ),
- 'activated' => __( 'Snippet
activated .', 'code-snippets' ),
- 'activated-multi' => __( 'Selected snippets
activated .', 'code-snippets' ),
- 'deactivated' => __( 'Snippet
deactivated .', 'code-snippets' ),
- 'deactivated-multi' => __( 'Selected snippets
deactivated .', 'code-snippets' ),
- 'deleted' => __( 'Snippet
deleted .', 'code-snippets' ),
- 'deleted-multi' => __( 'Selected snippets
deleted .', 'code-snippets' ),
- 'cloned' => __( 'Snippet
cloned .', 'code-snippets' ),
- 'cloned-multi' => __( 'Selected snippets
cloned .', 'code-snippets' ),
- )
- )
- );
+ $this->render_view( 'partials/list-table-notices' );
}
/**
diff --git a/php/admin-menus/class-settings-menu.php b/src/php/admin-menus/class-settings-menu.php
similarity index 97%
rename from php/admin-menus/class-settings-menu.php
rename to src/php/admin-menus/class-settings-menu.php
index 013d398b..aa87d4dc 100644
--- a/php/admin-menus/class-settings-menu.php
+++ b/src/php/admin-menus/class-settings-menu.php
@@ -58,7 +58,7 @@ public function enqueue_assets() {
wp_enqueue_style(
'code-snippets-settings',
plugins_url( 'dist/settings.css', $plugin->file ),
- [],
+ [ 'code-editor' ],
$plugin->version
);
}
@@ -135,7 +135,6 @@ public function render() {
settings_fields( OPTION_GROUP );
$this->do_settings_tabs();
-
?>
', esc_attr( $section['id'] ) );
+ printf( '