////
/// @group wysiwyg
////
/// For auto formatting general HTML elements (used around editor/body text). This selector can't currently be changed.

@use "sass:list";
@use "sass:map";

@use "../element";
@use "../typography";
@use "../utils";


/// Module Settings
/// @type Map
/// @prop {List} img-excluded-selectors [(".wysiwyg__exclude",)]
/// @prop {List} ul-excluded-selectors [(".list-lines", ".wysiwyg__exclude")]
/// @prop {Map} headline-sizes [Map]

$config: (
  "img-excluded-selectors" : (".wysiwyg__exclude",),
  "ul-excluded-selectors" : (".list-lines", ".wysiwyg__exclude"),
  "headline-sizes" : (
    "h2" : "h2",
    "h3" : "h3",
    "h4" : "h4",
    "h5" : "h5",
    "h6" : "h6",
  )
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-wysiwyg-set(( "property" : value ));

@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {Map} $name Name of property
/// @example scss
///   @include ulu.component-wysiwyg-get("property");

@function get($name) {
  @return utils.require-map-get($config, $name, "component-wysiwyg [config]");
}

/// Output component stylesheet
/// - Note this is setup so that it can be used for separate stylesheets (ie. tinyMCE or ckeditor)
/// @example scss
///   @include ulu.component-wysiwyg-styles(true);
///   // Output not in selector (for editor stylesheet/preview)
///   @include ulu.component-wysiwyg-styles(false); 

@mixin styles($in-selector: true) {
  @if ($in-selector) {
    .wysiwyg {
      @include _styles;
    }
  } @else {
    @include _styles;
  }
}

// Internal mixin
@mixin _styles() {
  $ul-excludes: list.join(get("ul-excluded-selectors"), (), $separator: comma);
  $img-excludes: list.join(get("img-excluded-selectors"), (), $separator: comma);

  a:not([class]) {
    @include element.link($visited: true, $active: true);
  }
  ul:not(#{ $ul-excludes }) {
    @include element.styles-unordered-list();
  }
  ol {
    @include element.styles-ordered-list(inherit);
  }
  ul,
  ol {
    margin-bottom: element.get("margin");
  }
  @each $element, $size in get("headline-sizes") {
    #{ $element } {
      @include typography.size($size);
    }
  }
  img:not(#{ $img-excludes }) {
    margin-bottom: element.get("margin");
    margin-top: element.get("margin");
  }
}