* Functions for using the built-in code editor library
use function Code_Snippets\Settings\get_setting;
* 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 = [] ) {
$plugin = code_snippets();
'html' => 'application/x-httpd-php',
if ( ! isset( $modes[ $type ] ) ) {
'mode' => $modes[ $type ],
'inputStyle' => 'textarea',
'Alt-F' => 'findPersistent',
'Ctrl-Space' => 'autocomplete',
'Ctrl-/' => 'toggleComment',
'Cmd-/' => 'toggleComment',
'Alt-Up' => 'swapLineUp',
'Alt-Down' => 'swapLineDown',
'gutters' => [ 'CodeMirror-lint-markers', 'CodeMirror-foldgutter' ],
'lint' => 'css' === $type || 'php' === $type,
'colorpicker' => [ 'mode' => 'edit' ],
'foldOptions' => [ 'widget' => '...' ],
// Add relevant saved setting values to the default attributes.
$plugin_settings = Settings\get_settings_values();
$setting_fields = Settings\get_settings_fields();
foreach ( $setting_fields['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; }" );
'type' => $modes[ $type ],
wp_enqueue_script( 'htmlhint' );
wp_enqueue_script( 'csslint' );
wp_enqueue_script( 'jshint' );
'code-snippets-code-editor',
plugins_url( 'dist/editor.js', $plugin->file ),
$theme = get_setting( 'editor', 'theme' );
if ( 'default' !== $theme ) {
'code-snippets-editor-theme-' . $theme,
plugins_url( "dist/editor-themes/$theme.css", $plugin->file ),
* Retrieve a list of the available CodeMirror themes.
* @return array<string> The available themes.
function get_editor_themes(): array {
if ( ! is_null( $themes ) ) {
$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 );