<?php
/**
* Functions for using the built-in code editor library
*
* @package Code_Snippets
*/
namespace Code_Snippets\Utils;
use Code_Snippets\Settings\Settings_Fields;
use function Code_Snippets\Settings\get_setting;
use function Code_Snippets\Settings\get_settings_values;
use const Code_Snippets\PLUGIN_FILE;
use const Code_Snippets\PLUGIN_VERSION;
/**
* Register and load the CodeMirror library.
*
* @param string $type Type of code editor – either 'php', 'css', 'js', or 'html'.
* @param array<string, mixed> $extra_atts Pass a list of attributes to override the saved ones.
*/
function enqueue_code_editor( string $type, array $extra_atts = [] ) {
$modes = [
'css' => 'text/css',
'php' => 'php-snippet',
'js' => 'javascript',
'html' => 'application/x-httpd-php',
];
if ( ! isset( $modes[ $type ] ) ) {
$type = 'php';
}
$default_atts = [
'mode' => $modes[ $type ],
'inputStyle' => 'textarea',
'matchBrackets' => true,
'extraKeys' => [
'Alt-F' => 'findPersistent',
'Ctrl-Space' => 'autocomplete',
'Ctrl-/' => 'toggleComment',
'Cmd-/' => 'toggleComment',
'Alt-Up' => 'swapLineUp',
'Alt-Down' => 'swapLineDown',
],
'gutters' => [ 'CodeMirror-lint-markers', 'CodeMirror-foldgutter' ],
'lint' => 'php' === $type,
'direction' => 'ltr',
'colorpicker' => [ 'mode' => 'edit' ],
'foldOptions' => [ 'widget' => '...' ],
];
// Add relevant saved setting values to the default attributes.
$plugin_settings = get_settings_values();
$field_definitions = Settings_Fields::get_field_definitions();
foreach ( $field_definitions['editor'] as $field_id => $field ) {
// The 'codemirror' setting field specifies the name of the attribute.
$default_atts[ $field['codemirror'] ] = $plugin_settings['editor'][ $field_id ];
}
// Merge the default attributes with the ones passed into the function.
$atts = wp_parse_args( $default_atts, $extra_atts );
$atts = apply_filters( 'code_snippets_codemirror_atts', $atts );
// Ensure number values are not formatted as strings.
foreach ( [ 'indentUnit', 'tabSize' ] as $number_att ) {
$atts[ $number_att ] = intval( $atts[ $number_att ] );
}
// Remove fontSize from the options and add it as an inline style.
if ( isset( $atts['fontSize'] ) ) {
$font_size = intval( $atts['fontSize'] );
unset( $atts['fontSize'] );
wp_add_inline_style( 'code-editor', ".CodeMirror { font-size: {$font_size}px !important; }" );
}
wp_enqueue_code_editor(
[
'type' => $modes[ $type ],
'codemirror' => $atts,
]
);
wp_enqueue_script( 'htmlhint' );
wp_enqueue_script( 'csslint' );
wp_enqueue_script( 'jshint' );
wp_enqueue_script(
'code-snippets-code-editor',
plugins_url( 'dist/editor.js', PLUGIN_FILE ),
[ 'code-editor' ],
PLUGIN_VERSION,
[ 'in_footer' => true ]
);
enqueue_code_editor_theme();
}
/**
* Load the CodeMirror assets required for read-only code previews.
*
* @param string $type Type of code editor – either 'php', 'css', 'js', or 'html'.
*
* @return void
*/
function enqueue_code_preview_editor( string $type ): void {
$modes = [
'css' => 'text/css',
'php' => 'text/x-php',
'js' => 'javascript',
'html' => 'application/x-httpd-php',
];
wp_enqueue_code_editor(
[
'type' => $modes[ $type ] ?? $modes['php'],
'codemirror' => [
'lint' => false,
'readOnly' => true,
],
]
);
enqueue_code_editor_theme();
}
/**
* Load the configured CodeMirror theme.
*
* @return void
*/
function enqueue_code_editor_theme(): void {
$theme = get_setting( 'editor', 'theme' );
if ( 'default' !== $theme ) {
wp_enqueue_style(
'code-snippets-editor-theme-' . $theme,
plugins_url( "dist/editor-themes/$theme.css", PLUGIN_FILE ),
[ 'code-editor' ],
PLUGIN_VERSION
);
}
}
/**
* Retrieve a list of the available CodeMirror themes.
*
* @return array<string> The available themes.
*/
function get_editor_themes(): array {
static $themes = null;
if ( ! is_null( $themes ) ) {
return $themes;
}
$themes = array();
$themes_dir = plugin_dir_path( PLUGIN_FILE ) . 'dist/editor-themes/';
$theme_files = glob( $themes_dir . '*.css' );
foreach ( $theme_files as $theme ) {
$theme = str_replace( $themes_dir, '', $theme );
$theme = str_replace( '.css', '', $theme );
$themes[] = $theme;
}
return $themes;
}