@terrahq/wysiwyg 1.0.0

package/src/scss/global-content/_global-mixins/blocks/_content-paragraph.scss

@@ -0,0 +1,22 @@
+@use "../_global-mixins" as *;
+
+@mixin paragraphs-wysiwyg() {
+  em {
+    font-style: italic;
+  }
+}
+
+
+@mixin paragraphs-wysiwyg-wp-modifier($options) {
+  & > p,
+  .wp-block-column > p,
+  .wp-block-media-text p {
+    @include make-font-wysiwyg-options($options: $options);
+  }
+}
+
+@mixin paragraphs-wysiwyg-sanity-modifier($options) {
+  & > p {
+    @include make-font-wysiwyg-options($options: $options);
+  }
+}

package/src/scss/global-content/_global-mixins/blocks/_content-utilities.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+
+$utilities-wysiwyg-options: (
+    "media-text-aligned-margin-x": null,
+);
+
+@mixin utilities-wp() {
+    *.alignleft{
+        float: left;
+    }
+    *.alignright{
+        float: right;
+    }
+    *.aligncenter{
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@mixin utilities-wp-modifier($options) {
+    @each $property, $value in $options {
+        @if map.has-key($utilities-wysiwyg-options, $property) {
+            @if $value {
+                @if $property == "media-text-aligned-margin-x" {
+                    *.alignleft{
+                        margin-right: $value !important;
+                    }
+                    *.alignright{
+                        margin-left: $value !important;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/global-content/_global-mixins/blocks/_content.scss

@@ -0,0 +1,14 @@
+@forward "./content-block-btn";
+@forward "./content-block-columns";
+@forward "./content-block-footnote";
+@forward "./content-block-highlighted.scss";
+@forward "./content-block-image.scss";
+@forward "./content-block-quote.scss";
+@forward "./content-block-separator.scss";
+@forward "./content-block-table.scss";
+@forward "./content-block-video";
+@forward "./content-heading.scss";
+@forward "./content-links.scss";
+@forward "./content-list.scss";
+@forward "./content-paragraph.scss";
+@forward "./content-utilities.scss";

package/src/scss/global-content/_global-mixins/helpers/_class.scss

@@ -0,0 +1,11 @@
+@use "sass:meta";
+
+@mixin make-class-options($className) {
+    @if meta.type-of($className) == list {
+        @each $class in $className {
+            @extend .#{$class};
+        }
+    } @else {
+        @extend .#{$className};
+    }
+}

package/src/scss/global-content/_global-mixins/helpers/_helpers.scss

@@ -0,0 +1 @@
+@forward './class';

package/src/scss/global-content/_global-mixins/properties/_border.scss

@@ -0,0 +1,18 @@
+@use "sass:map";
+
+@mixin make-border-wysiwyg-options($options) {
+    $border-wysiwyg-options: (
+        "border-color": null,
+        "border-radius": null,
+        "border-style": null,
+        "border-width": null,
+    );
+
+    @each $property, $value in $options {
+        @if map.has-key($border-wysiwyg-options, $property) {
+            @if $value {
+                #{$property}: $value;
+            }
+        }
+    }
+}

package/src/scss/global-content/_global-mixins/properties/_custom.scss

@@ -0,0 +1,51 @@
+@use "sass:meta";
+
+@mixin make-custom-wysiwyg-options($options) {
+  @each $selector, $properties in $options {
+    @if $selector {
+      @if $selector != "parent" {
+        #{$selector} {
+          @each $property, $value in $properties {
+            @if $property != "class" {
+              & {
+                #{$property}: $value;
+              }
+            } @else {
+              @if meta.type-of($value) == list {
+                @each $class in $value {
+                  & {
+                    @extend .#{$class};
+                  }
+                }
+              } @else {
+                & {
+                  @extend .#{$value};
+                }
+              }
+            }
+          }
+        }
+      } @else {
+        @each $property, $value in $properties {
+          @if $property != "class" {
+            & {
+              #{$property}: $value;
+            }
+          } @else {
+            @if meta.type-of($value) == list {
+              @each $class in $value {
+                & {
+                  @extend .#{$class};
+                }
+              }
+            } @else {
+              & {
+                @extend .#{$value};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/global-content/_global-mixins/properties/_font.scss

@@ -0,0 +1,60 @@
+@use "sass:meta";
+@use "sass:map";
+
+$font-wysiwyg-options: (
+    "color": null,
+    "font-family": null,
+    "font-size": null,
+    "font-style": null,
+    "font-weight": null,
+    "letter-spacing": null,
+    "line-height": null,
+    "max-lines": null,
+    "text-decoration": null,
+    "text-decoration-color": null,
+    "text-underline-position": null,
+    "className": null,
+    "margin-bottom": null,
+    "margin-bottom-before-lists": null,
+    "padding-top": null,
+    "text-align": null,
+    "bold-font-weight": null,
+);
+
+@mixin make-font-wysiwyg-options($options) {
+    @each $property, $value in $options {
+        @if map.has-key($font-wysiwyg-options, $property) {
+            @if $value {
+                @if $property == "className" {
+                    @if meta.type-of($value) == list {
+                        @each $class in $value {
+                            @extend .#{$class};
+                        }
+                    } @else {
+                        @extend .#{$value};
+                    }
+                } @else if $property == "max-lines" {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: $value;
+                    -webkit-box-orient: vertical;
+                } @else if $property == "bold-font-weight" {
+                    b,
+                    strong {
+                        font-weight: $value;
+                    }
+                } @else if $property == "margin-bottom-before-lists" {
+                    &:has(
+                      + ul,
+                      + ol
+                    ){
+                      margin-bottom: $value;
+                    }
+                } @else {
+                    #{$property}: $value;
+                }
+            }
+        }
+    }
+}

package/src/scss/global-content/_global-mixins/properties/_media.scss

@@ -0,0 +1,188 @@
+@use "sass:map";
+@use "./font" as *;
+
+$media-wysiwyg-options: (
+  "border-color": null,
+  "border-radius": null,
+  "border-style": null,
+  "border-width": null,
+  "object-fit": null,
+  "max-height": null,
+  "min-height": null,
+  "object-position": null,
+  "max-width": null,
+  "min-width": null,
+  "margin-bottom": null,
+  "caption": null,
+  "zoom-button-background-color": null,
+  "zoom-button-bottom": null,
+  "zoom-button-right": null,
+  "zoom-button-border-radius": null,
+);
+
+@mixin make-media-wysiwyg-options($options, $platform, $media-type: false) {
+  @each $property, $value in $options {
+    @if map.has-key($media-wysiwyg-options, $property) {
+      @if $value {
+        @if $platform == wp {
+          @if $media-type == "image" {
+            @if $property == "margin-bottom" {
+              figure.wp-block-image {
+                #{$property}: $value;
+              }
+              div.wp-block-image {
+                figure {
+                  #{$property}: $value;
+                }
+              }
+              *[class^="wp-block"] {
+                img {
+                  #{$property}: $value;
+                }
+              }
+              > p {
+                > img {
+                  #{$property}: $value;
+                }
+              }
+            } @else if $property == "caption" {
+              figure.wp-block-image {
+                figcaption {
+                  @include make-font-wysiwyg-options($options: $value);
+                }
+              }
+              div.wp-block-image {
+                figure {
+                  figcaption {
+                    @include make-font-wysiwyg-options($options: $value);
+                  }
+                }
+              }
+            } @else if $property == "zoom-button-background-color" {
+              button.lightbox-trigger {
+                background-color: $value;
+              }
+            } @else if $property == "zoom-button-right" {
+              button.lightbox-trigger {
+                right: $value !important;
+              }
+            } @else if $property == "zoom-button-bottom" {
+              button.lightbox-trigger {
+                transform: translateY(calc(-100% - #{$value})) !important;
+              }
+            } @else if $property == "zoom-button-border-radius" {
+              button.lightbox-trigger {
+                border-radius: $value;
+              }
+            } @else {
+              figure.wp-block-image {
+                img {
+                  #{$property}: $value;
+                }
+              }
+              div.wp-block-image {
+                figure {
+                  img {
+                    #{$property}: $value;
+                  }
+                }
+              }
+              *[class^="wp-block"] {
+                img {
+                  #{$property}: $value;
+                }
+              }
+              > p {
+                > img {
+                  #{$property}: $value;
+                }
+              }
+            }
+          } @else if $media-type == "video" {
+            @if $property == "margin-bottom" {
+              figure.wp-block-embed,
+              figure.wp-block-video {
+                #{$property}: $value;
+              }
+              div.wp-block-embed,
+              div.wp-block-video {
+                figure {
+                  #{$property}: $value;
+                }
+              }
+              > p {
+                > iframe,
+                > video {
+                  #{$property}: $value;
+                }
+              }
+            } @else if $property == "caption" {
+              figure.wp-block-embed,
+              figure.wp-block-video {
+                figcaption {
+                  @include make-font-wysiwyg-options($options: $value);
+                }
+              }
+              div.wp-block-embed,
+              div.wp-block-video {
+                figure {
+                  figcaption {
+                    @include make-font-wysiwyg-options($options: $value);
+                  }
+                }
+              }
+            } @else {
+              figure.wp-block-embed,
+              figure.wp-block-video {
+                iframe,
+                video {
+                  #{$property}: $value;
+                }
+              }
+              div.wp-block-embed,
+              div.wp-block-video {
+                figure {
+                  iframe,
+                  video {
+                    #{$property}: $value;
+                  }
+                }
+              }
+              *[class^="wp-block"] {
+                iframe,
+                video {
+                  #{$property}: $value;
+                }
+              }
+              > p {
+                > iframe,
+                > video {
+                  #{$property}: $value;
+                }
+              }
+            }
+          }
+        }
+        @if $platform == sanity {
+          @if $property == "margin-bottom" {
+            figure {
+              #{$property}: $value;
+            }
+          } @else if $property == "caption" {
+            figure {
+              figcaption {
+                @include make-font-wysiwyg-options($options: $value);
+              }
+            }
+          } @else {
+            figure {
+              img {
+                #{$property}: $value;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/global-content/_global-mixins/properties/_properties.scss

@@ -0,0 +1,3 @@
+@forward "./border";
+@forward "./font";
+@forward "./media";

package/src/scss/global-content/_library.scss

@@ -0,0 +1,2 @@
+//* Global Mixins
+@forward "./_global-mixins/global-mixins";

package/src/scss/global-content/_sanity.scss

@@ -0,0 +1,157 @@
+//* Global Mixins
+@use "sass:map";
+@use "sass:list";
+
+@use "./_global-mixins/blocks/content" as *;
+@use "./_global-mixins/properties/custom" as *;
+
+$wysiwyg-measure: .5rem;
+
+@mixin make-content($btn-options: ()) {
+  //* btn
+
+  //* columns
+
+  //* footnote
+
+  //* highlighted
+
+  //* image
+  @include block-image-sanity();
+
+  //* quote
+
+  //* separator
+
+  //* headings
+
+  //* link
+
+  //* paragraphs
+  @include paragraphs-wysiwyg();
+
+  //* lists
+  @include lists-wysiwyg-sanity();
+
+  //* video
+
+  //* table
+
+  //* utilities
+
+  & > h1:first-child,
+  & > h2:first-child,
+  & > h3:first-child,
+  & > h4:first-child,
+  & > h5:first-child,
+  & > h6:first-child,
+  & > p:first-child {
+    padding-top: 0 !important;
+  }
+  & > *:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
+@mixin make-content-modifier(
+  $btn-options: (),
+  $columns-options: (),
+  $footnote-options: (),
+  $highlighted-options: (),
+  $image-options: (),
+  $quote-options: (),
+  $separator-options: (),
+  $headings-options: (),
+  $link-options: (),
+  $paragraphs-options: (),
+  $lists-options: (),
+  $video-options: (),
+  $table-options: (),
+  $utilities-options: (),
+  $custom-options: ()
+) {
+  //* btn
+  @if list.length(map.keys($btn-options)) > 0 {
+    @error "Sanity doesn't support button styles";
+  }
+
+  //* columns
+  @if list.length(map.keys($columns-options)) > 0 {
+    @error "Sanity doesn't support columns styles";
+  }
+
+  //* footnote
+  @if list.length(map.keys($footnote-options)) > 0 {
+    @error "Sanity doesn't support footnote styles";
+  }
+
+  //* highlighted
+  @if list.length(map.keys($highlighted-options)) > 0 {
+    @error "Sanity doesn't support highlighted styles";
+  }
+
+  //* image
+  @include block-image-sanity-modifier($options: $image-options);
+  @if list.length(map.keys($image-options)) > 0 {
+    @if map.get($image-options, "margin-bottom") == null {
+      figure {
+        margin-bottom: $wysiwyg-measure * 5;
+      }
+    }
+  }
+
+  //* quote
+  @include block-quote-sanity-modifier($options: $quote-options);
+  @if list.length(map.keys($quote-options)) > 0 {
+    @if map.get($quote-options, "padding") == null {
+      blockquote {
+        padding: $wysiwyg-measure * 3 0;
+      }
+    }
+    @if map.get($quote-options, "margin-top") == null {
+      blockquote {
+        margin-top: $wysiwyg-measure * 5;
+      }
+    }
+    @if map.get($quote-options, "margin-bottom") == null {
+      blockquote {
+        margin-top: $wysiwyg-measure * 6;
+      }
+    }
+  }
+
+  //* separator
+  @if list.length(map.keys($separator-options)) > 0 {
+    @error "Sanity doesn't support separator styles";
+  }
+
+  //* headings
+  @include headings-sanity-modifier($options: $headings-options);
+
+  //* link
+  @include block-link-wysiwyg-modifier($options: $link-options);
+
+  //* paragraphs
+  @include paragraphs-wysiwyg-sanity-modifier($options: $paragraphs-options);
+
+  //* lists
+  @include lists-wysiwyg-sanity-modifier($options: $lists-options);
+
+  //* video
+  @if list.length(map.keys($video-options)) > 0 {
+    @error "Sanity doesn't support video styles";
+  }
+
+  //* table
+  @if list.length(map.keys($table-options)) > 0 {
+    @error "Sanity doesn't support table styles";
+  }
+
+  //* utilities
+  @if list.length(map.keys($utilities-options)) > 0 {
+    @error "Sanity doesn't support utilities styles";
+  }
+
+  //* custom
+  @include make-custom-wysiwyg-options($options: $custom-options);
+}