node_css.module

<?php

/**
 * Implements hook_menu().
 */
function node_css_menu() {
  $items = [];

  // Define the settings page.
  $items['admin/config/content/node_css'] = [
    'title' => 'Node CSS Settings',
    'description' => 'Settings for custom CSS on nodes.',
    'page callback' => 'backdrop_get_form',
    'page arguments' => ['node_css_settings'],
    'file' => 'node_css.admin.inc',
    'access arguments' => ['administer site configuration'],
  ];

  return $items;
}

/**
 * Implements hook_form_FORM_ID_alter() to add a CSS field to node forms
 * with CodeMirror CSS editor support and a "Copy code" feature.
 */
function node_css_form_node_form_alter(&$form, &$form_state) {
  // Load existing configuration.
  $config = config('node_css.settings');
  $enabled_content_types = $config->get('enabled_content_types');
  $content_type = $form['#node']->type;

  // If specific content types are selected, apply Node CSS only to those types.
  if (!empty($enabled_content_types) && !in_array($content_type, $enabled_content_types)) {
    return;
  }

  // Determine the default CSS value for this node.
  $default_value = $config->get('node-' . $form['#node']->nid)
    ?? $config->get('default_css_' . $content_type)
    ?? $config->get('default');

  // Get the configured height for the textarea, defaulting to 10 rows.
  $textarea_height = $config->get('css_textarea_height') ?: 10;

  // Get the configured position for the CSS editor.
  $position = $config->get('css_text_position') ?: 'bottom';  // Default to bottom if not set.

  // Define the "Copy code" link and editor wrapper.
  $copy_link = [
    '#type' => 'markup',
    '#markup' => '<a href="#" id="copy-css-code" class="copy-code-link">Copy code</a>',
  ];

  // Structure the form based on the chosen position.
  if ($position === 'top') {
    // Place the editor at the top.
    $form['css_text_wrapper'] = [
      '#type' => 'container',
      '#weight' => -100,
      '#attributes' => ['class' => ['codemirror-editor-wrapper']],
    ];
  } elseif ($position === 'vertical_tab') {
    // Place the editor in a vertical tab.
    $form['css_text_fieldset'] = [
      '#type' => 'fieldset',
      '#title' => t('Node CSS'),
      '#group' => 'additional_settings',
      '#description' => t('Add custom CSS for this node. This CSS will apply only to this specific node.'),
    ];
    $form['css_text_fieldset']['css_text_wrapper'] = [
      '#type' => 'container',
      '#attributes' => ['class' => ['codemirror-editor-wrapper']],
    ];
  } else {
    // Default to placing the editor at the bottom.
    $form['css_text_wrapper'] = [
      '#type' => 'container',
      '#weight' => 0,
      '#attributes' => ['class' => ['codemirror-editor-wrapper']],
    ];
  }

  // Add the "Copy code" link and the `CodeMirror` editor to the appropriate wrapper.
  if ($position === 'vertical_tab') {
    $form['css_text_fieldset']['css_text_wrapper']['copy_link'] = $copy_link;
    $form['css_text_fieldset']['css_text_wrapper']['css_text'] = [
      '#type' => 'textarea',
      '#title' => t('Node CSS'),
      '#rows' => $textarea_height,
      '#default_value' => $default_value,
      '#attributes' => [
        'id' => 'css-text-editor',
        'class' => ['codemirror-css-editor']
      ],
    ];
  } else {
    $form['css_text_wrapper']['copy_link'] = $copy_link;
    $form['css_text_wrapper']['css_text'] = [
      '#type' => 'textarea',
      '#title' => t('Node CSS'),
      '#rows' => $textarea_height,
      '#default_value' => $default_value,
      '#attributes' => [
        'id' => 'css-text-editor',
        'class' => ['codemirror-css-editor']
      ],
    ];
  }

  // Attach CodeMirror using the helper function.
  node_css_attach_codemirror($form);

  // Add custom CSS to style the "Copy code" link within the CodeMirror container.
  $form['#attached']['css'][] = [
    'type' => 'inline',
    'data' => '
      .codemirror-editor-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
      }

      .copy-code-link {
        position: absolute;
        top: 60px;
        right: 8px;
        z-index: 10;
        background: #f8f9fa;
        padding: 2px 6px;
        font-size: 12px;
        border-radius: 4px;
        text-decoration: none;
        color: #007bff;
        transition: background 0.2s;
      }

      .copy-code-link:hover {
        background: #e2e6ea;
      }
    ',
  ];

  // Attach JavaScript for the "Copy code" feature.
  $form['#attached']['js'][] = [
    'type' => 'inline',
    'data' => "
      document.addEventListener('DOMContentLoaded', function() {
        var copyButton = document.getElementById('copy-css-code');

        copyButton.addEventListener('click', function(e) {
          e.preventDefault();

          var editorElement = document.getElementById('css-text-editor');
          var editorInstance = window.codeMirrorEditors[editorElement.id];

          if (editorInstance) {
            var cssCode = editorInstance.getValue();

            navigator.clipboard.writeText(cssCode).then(function() {
              alert('CSS code copied to clipboard!');
            }).catch(function(err) {
              alert('Failed to copy CSS code: ' + err);
            });
          } else {
            alert('CodeMirror instance not found.');
          }
        });
      });
    ",
  ];
}


/**
 * Implement hook_node_insert().
 */
function node_css_node_insert(Node $node) {
  config_set('node_css.settings', 'node-' . $node->nid, $node->css_text);
}

/**
 * Implement hook_node_update().
 */
function node_css_node_update(Node $node) {
  config_set('node_css.settings', 'node-' . $node->nid, $node->css_text);
}

/**
 * Implements hook_node_view() to add custom CSS to the node if enabled for its content type.
 */
function node_css_node_view($node, $view_mode) {
  $config = config('node_css.settings');
  $enabled_content_types = $config->get('enabled_content_types');

  // If specific content types are selected, apply only to those types.
  if (!empty($enabled_content_types) && !in_array($node->type, $enabled_content_types)) {
    return;
  }

  // Check for node-specific CSS.
  if ($node_css = $config->get('node-' . $node->nid)) {
    $custom_css = '<style media="all">' . $node_css . '</style>' . PHP_EOL;
    backdrop_add_html_head([
      '#type' => 'markup',
      '#markup' => $custom_css,
      '#weight' => 100,
    ], 'node_css_' . $node->nid);
  }
}

/**
 * Helper function to attach CodeMirror to a form.
 */
function node_css_attach_codemirror(&$form, $textarea_selector = '.codemirror-css-editor') {
  // Load existing configuration.
  $config = config('node_css.settings');
  $selected_theme = $config->get('codemirror_theme') ?: 'default';
  $textarea_height = $config->get('css_textarea_height') ?: 10;  // Default to 10 rows if not set.

  // Calculate the height in pixels based on an estimated row height.
  $height_in_pixels = $textarea_height * 20;

  // Attach the CodeMirror library and chosen theme from CDN.
  $form['#attached']['js'][] = [
    'type' => 'file',
    'data' => backdrop_get_path('module', 'node_css') . '/codemirror/js/codemirror.min.js',
  ];
  $form['#attached']['js'][] = [
    'type' => 'file',
    'data' => backdrop_get_path('module', 'node_css') . '/codemirror/js/css.min.js',
  ];
  $form['#attached']['css'][] = [
    'type' => 'file',
    'data' => backdrop_get_path('module', 'node_css') . '/codemirror/css/codemirror.min.css',
  ];

  // CSS property value autocompletion.
  $form['#attached']['js'][] = [
    'type' => 'file',
    'data' => backdrop_get_path('module', 'node_css') . '/codemirror/js/show-hint.min.js',
  ];
  $form['#attached']['js'][] = [
    'type' => 'file',
    'data' => backdrop_get_path('module', 'node_css') . '/codemirror/js/css-hint.min.js',
  ];
  $form['#attached']['css'][] = [
    'type' => 'file',
    'data' => backdrop_get_path('module', 'node_css') . '/codemirror/css/show-hint.min.css',
  ];

  $form['#attached']['css'][] = [
    'type' => 'inline',
    'data' => '
    .CodeMirror {
      font-size: 12px;
      line-height: 1.4;
      height: ' . $height_in_pixels . 'px;
      resize: both;
      border: 1px #bbb solid;
    }
    .CodeMirror::after {
      content: \'\';
      position: absolute;
      left: 80ch;
      top: 0;
      bottom: 0;
      border-left: 1px dashed #ccc;
      pointer-events: none;
    }
    ',
  ];

  // Add theme-specific CSS file based on the selected theme.
  if ($selected_theme !== 'default') {
    $form['#attached']['css'][] = [
      'type' => 'external',
      'data' => "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/{$selected_theme}.min.css",
    ];
  }

  $base_url = url('', ['absolute' => TRUE]);
  $css_suggestions_url = $base_url . backdrop_get_path('module', 'node_css') . '/codemirror/css-suggestions.json';

  // Custom inline JavaScript to initialize CodeMirror and store each instance in a global array.
  $form['#attached']['js'][] = [
    'type' => 'inline',
    'data' => "document.addEventListener('DOMContentLoaded', function() {
                var cssSuggestions = {};
                window.codeMirrorEditors = {};  // Global object to hold each CodeMirror instance

                // Fetch CSS suggestions from the local JSON file
                fetch('{$css_suggestions_url}')
                  .then(response => {
                    if (!response.ok) {
                      throw new Error('Network response was not ok');
                    }
                    return response.json();
                  })
                  .then(data => {
                    cssSuggestions = data;
                  })
                  .catch(error => console.error('Error fetching CSS suggestions:', error));

                var editors = document.querySelectorAll('{$textarea_selector}');
                editors.forEach(function(textarea) {
                  var wrapper = textarea.closest('.codemirror-editor-wrapper');

                  if (!textarea.id) {
                    textarea.id = 'css-editor-' + Math.random().toString(36).substr(2, 9);
                  }

                  var editorInstance = CodeMirror.fromTextArea(textarea, {
                    mode: 'css',
                    lineNumbers: true,
                    lineWrapping: true,
                    theme: '{$selected_theme}',
                    extraKeys: {
                      'Space': function(cm) {
                        cm.replaceSelection(' ');
                        var hintOptions = customCssHint(cm);
                        if (hintOptions.list && hintOptions.list.length > 0) {
                          CodeMirror.showHint(cm, function(cmInstance) {
                            return hintOptions;
                          }, { completeSingle: false });
                        }
                      }
                    },
                    hintOptions: {
                      hint: customCssHint,
                      completeSingle: false
                    }
                  });
                  window.codeMirrorEditors[textarea.id] = editorInstance;
                });

                function customCssHint(editor) {
                  var cur = editor.getCursor();
                  var token = editor.getTokenAt(cur);
                  var line = editor.getLine(cur.line);
                  var property = line.slice(0, line.indexOf(':')).trim().toLowerCase();
                  var list = cssSuggestions[property] || [];
                  var start = token.start;
                  var end = token.end;

                  if (line.includes(':')) {
                    start = line.indexOf(':') + 1;
                    if (line.includes(';')) {
                      end = line.indexOf(';');
                    }
                  }

                  return {
                    list: list.map(function(item) {
                      return {
                        text: ' ' + item + ';\\n  ',
                        displayText: item,
                      };
                    }),
                    from: CodeMirror.Pos(cur.line, start),
                    to: CodeMirror.Pos(cur.line, end)
                  };
                }
              });"
  ];
}