@terrahq/wysiwyg 1.0.0

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

@@ -0,0 +1,244 @@
+@use "../_global-mixins" as *;
+@use "sass:map";
+
+$wysiwyg-time-b: .3s;
+$wysiwyg-transition: cubic-bezier(0.2, 0, 0.38, 0.9);
+
+@mixin block-image-wp() {
+  figure.wp-block-image {
+    display: block;
+    width: fit-content;
+    margin: 0 auto;
+    img {
+      width: auto;
+      height: auto;
+      margin: 0;
+      display: block;
+    }
+    figcaption {
+      display: block;
+    }
+    &.alignleft {
+      float: left;
+      figcaption {
+        display: block;
+      }
+    }
+    &.alignright {
+      float: right;
+      figcaption {
+        display: block;
+      }
+    }
+    &.aligncenter {
+      margin-left: auto;
+      margin-right: auto;
+      figcaption {
+        display: block;
+      }
+    }
+  }
+  div.wp-block-image {
+    margin: 0;
+    figure {
+      margin-top: 0;
+      img {
+        width: auto;
+        height: auto;
+        margin: 0;
+        display: block;
+      }
+      figcaption {
+        display: block;
+      }
+    }
+  }
+
+  *[class^="wp-block"] {
+    img {
+      width: auto;
+      height: auto;
+      margin: 0 auto;
+      display: block;
+      &.alignleft {
+        float: left;
+      }
+      &.alignright {
+        float: right;
+      }
+      &.aligncenter {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+  > p {
+    > img {
+      margin: 0;
+      display: block;
+
+      &.alignleft {
+        float: left;
+      }
+      &.alignright {
+        float: right;
+      }
+      &.aligncenter {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+}
+
+*:has(> button.lightbox-trigger) {
+  position: relative;
+}
+button.lightbox-trigger {
+  position: absolute;
+  top: auto !important;
+  left: auto !important;
+  width: 2rem;
+  height: 2rem;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNDk4MTkgNy4wMDAxNEM5LjQ5ODE5IDcuMTMyNzUgOS40NDU1MSA3LjI1OTkzIDkuMzUxNzQgNy4zNTM3QzkuMjU3OTggNy40NDc0NiA5LjEzMDggNy41MDAxNCA4Ljk5ODE5IDcuNTAwMTRINy40OTgxOVY5LjAwMDE0QzcuNDk4MTkgOS4xMzI3NSA3LjQ0NTUxIDkuMjU5OTMgNy4zNTE3NCA5LjM1MzdDNy4yNTc5NyA5LjQ0NzQ2IDcuMTMwOCA5LjUwMDE0IDYuOTk4MTkgOS41MDAxNEM2Ljg2NTU4IDkuNTAwMTQgNi43Mzg0IDkuNDQ3NDYgNi42NDQ2NCA5LjM1MzdDNi41NTA4NyA5LjI1OTkzIDYuNDk4MTkgOS4xMzI3NSA2LjQ5ODE5IDkuMDAwMTRWNy41MDAxNEg0Ljk5ODE5QzQuODY1NTggNy41MDAxNCA0LjczODQgNy40NDc0NiA0LjY0NDY0IDcuMzUzN0M0LjU1MDg3IDcuMjU5OTMgNC40OTgxOSA3LjEzMjc1IDQuNDk4MTkgNy4wMDAxNEM0LjQ5ODE5IDYuODY3NTMgNC41NTA4NyA2Ljc0MDM2IDQuNjQ0NjQgNi42NDY1OUM0LjczODQgNi41NTI4MiA0Ljg2NTU4IDYuNTAwMTQgNC45OTgxOSA2LjUwMDE0SDYuNDk4MTlWNS4wMDAxNEM2LjQ5ODE5IDQuODY3NTMgNi41NTA4NyA0Ljc0MDM2IDYuNjQ0NjQgNC42NDY1OUM2LjczODQgNC41NTI4MiA2Ljg2NTU4IDQuNTAwMTQgNi45OTgxOSA0LjUwMDE0QzcuMTMwOCA0LjUwMDE0IDcuMjU3OTcgNC41NTI4MiA3LjM1MTc0IDQuNjQ2NTlDNy40NDU1MSA0Ljc0MDM2IDcuNDk4MTkgNC44Njc1MyA3LjQ5ODE5IDUuMDAwMTRWNi41MDAxNEg4Ljk5ODE5QzkuMTMwOCA2LjUwMDE0IDkuMjU3OTggNi41NTI4MiA5LjM1MTc0IDYuNjQ2NTlDOS40NDU1MSA2Ljc0MDM2IDkuNDk4MTkgNi44Njc1MyA5LjQ5ODE5IDcuMDAwMTRaTTE0LjM1MTkgMTQuMzUzOUMxNC4zMDU1IDE0LjQwMDQgMTQuMjUwNCAxNC40MzczIDE0LjE4OTcgMTQuNDYyNEMxNC4xMjkgMTQuNDg3NiAxNC4wNjM5IDE0LjUwMDUgMTMuOTk4MiAxNC41MDA1QzEzLjkzMjUgMTQuNTAwNSAxMy44Njc0IDE0LjQ4NzYgMTMuODA2NyAxNC40NjI0QzEzLjc0NiAxNC40MzczIDEzLjY5MDkgMTQuNDAwNCAxMy42NDQ0IDE0LjM1MzlMMTAuNTE1NyAxMS4yMjQ1QzkuNDI2NzYgMTIuMTMxNSA4LjAzMDA2IDEyLjU4MzggNi42MTYxNSAxMi40ODczQzUuMjAyMjQgMTIuMzkwOCAzLjg3OTk3IDExLjc1MjggMi45MjQ0MiAxMC43MDYyQzEuOTY4ODcgOS42NTk2MyAxLjQ1MzYgOC4yODQ5MiAxLjQ4NTggNi44NjgwOEMxLjUxOCA1LjQ1MTI1IDIuMDk1MTkgNC4xMDEzNyAzLjA5NzMgMy4wOTkyNkM0LjA5OTQyIDIuMDk3MTQgNS40NDkyOSAxLjUxOTk1IDYuODY2MTMgMS40ODc3NUM4LjI4Mjk3IDEuNDU1NTUgOS42NTc2NyAxLjk3MDgyIDEwLjcwNDMgMi45MjYzN0MxMS43NTA5IDMuODgxOTMgMTIuMzg4OCA1LjIwNDE5IDEyLjQ4NTMgNi42MTgxQzEyLjU4MTkgOC4wMzIwMSAxMi4xMjk2IDkuNDI4NzEgMTEuMjIyNiAxMC41MTc2TDE0LjM1MTkgMTMuNjQ2NEMxNC4zOTg0IDEzLjY5MjggMTQuNDM1MyAxMy43NDggMTQuNDYwNSAxMy44MDg3QzE0LjQ4NTYgMTMuODY5NCAxNC40OTg2IDEzLjkzNDQgMTQuNDk4NiAxNC4wMDAxQzE0LjQ5ODYgMTQuMDY1OSAxNC40ODU2IDE0LjEzMDkgMTQuNDYwNSAxNC4xOTE2QzE0LjQzNTMgMTQuMjUyMyAxNC4zOTg0IDE0LjMwNzUgMTQuMzUxOSAxNC4zNTM5Wk02Ljk5ODE5IDExLjUwMDFDNy44ODgyMSAxMS41MDAxIDguNzU4MjMgMTEuMjM2MiA5LjQ5ODI2IDEwLjc0MThDMTAuMjM4MyAxMC4yNDczIDEwLjgxNTEgOS41NDQ0OSAxMS4xNTU2IDguNzIyMjJDMTEuNDk2MiA3Ljg5OTk1IDExLjU4NTQgNi45OTUxNSAxMS40MTE3IDYuMTIyMjRDMTEuMjM4MSA1LjI0OTMyIDEwLjgwOTUgNC40NDc1IDEwLjE4MDIgMy44MTgxNkM5LjU1MDgzIDMuMTg4ODMgOC43NDkwMSAyLjc2MDI0IDcuODc2MSAyLjU4NjYxQzcuMDAzMTggMi40MTI5OCA2LjA5ODM4IDIuNTAyMDkgNS4yNzYxMSAyLjg0MjY4QzQuNDUzODUgMy4xODMyOCAzLjc1MTA0IDMuNzYwMDYgMy4yNTY1OCA0LjUwMDA4QzIuNzYyMTEgNS4yNDAxIDIuNDk4MTkgNi4xMTAxMyAyLjQ5ODE5IDcuMDAwMTRDMi40OTk1MSA4LjE5MzIxIDIuOTc0MDQgOS4zMzcwNCAzLjgxNzY3IDEwLjE4MDdDNC42NjEzIDExLjAyNDMgNS44MDUxMiAxMS40OTg4IDYuOTk4MTkgMTEuNTAwMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
+  background-position: center;
+  background-repeat: no-repeat;
+  transform: translateY(-100%);
+  svg {
+    display: none;
+  }
+}
+
+$image-wysiwyg-options: (
+  "zoom-button-background-color": null,
+  "zoom-button-bottom": null,
+  "zoom-button-right": null,
+  "zoom-button-border-radius": null,
+);
+
+@mixin block-image-wp-modifier($options) {
+  @include make-media-wysiwyg-options(
+    $options,
+    $platform: wp,
+    $media-type: "image"
+  );
+}
+
+@mixin zoom-modal-image() {
+  .wp-lightbox-overlay.zoom {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity $wysiwyg-time-b $wysiwyg-transition;
+    button.close-button {
+      align-self: flex-end;
+      margin: 0 2rem 1rem 0;
+      width: 2rem;
+      height: 2rem;
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .lightbox-image-container {
+      width: 90%;
+      max-width: 1300px;
+      img {
+        width: 100%;
+        height: auto;
+        max-height: 80vh;
+        object-fit: contain !important;
+      }
+      ~ .lightbox-image-container {
+        display: none;
+      }
+    }
+    &.active {
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
+}
+
+$modal-wysiwyg-option: (
+  "zoom-modal-bg-overlay": null,
+  "zoom-close-btn-color": null,
+);
+
+@mixin zoom-modal-image-modifier($option) {
+  @each $property, $value in $option {
+    .wp-lightbox-overlay.zoom {
+      @if map.has-key($modal-wysiwyg-option, "zoom-modal-bg-overlay") {
+        background: map.get($option, "zoom-modal-bg-overlay");
+      }
+
+      @if map.has-key($modal-wysiwyg-option, "zoom-close-btn-color") {
+        button.close-button {
+          svg {
+            path {
+              fill: map.get($option, "zoom-close-btn-color");
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin block-image-sanity() {
+  figure {
+    display: block;
+    width: 100%;
+    max-width: fit-content;
+    margin: 0 auto;
+    &.c--content-media--small {
+      width: 25%;
+    }
+    &.c--content-media--medium {
+      width: 50%;
+    }
+    img {
+      width: auto;
+      height: auto;
+      margin: 0 auto;
+      display: block;
+    }
+    figcaption {
+      margin: 0 auto;
+    }
+    &.aligncenter {
+      img {
+        width: auto;
+      }
+    }
+    &.alignleft {
+      img {
+        width: auto;
+        margin-left: 0;
+        margin-right: auto;
+      }
+    }
+    &.alignright {
+      img {
+        width: auto;
+        margin-left: auto;
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+@mixin block-image-sanity-modifier($options) {
+  @include make-media-wysiwyg-options($options, $platform: sanity);
+}

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

@@ -0,0 +1,72 @@
+@use "sass:map";
+@use "../_global-mixins" as *;
+
+$quote-wysiwyg-options: (
+    "padding": null,
+    "margin-top": null,
+    "margin-bottom": null,
+    "border": null,
+    "paragraph": null,
+    "cite": null,
+);
+
+@mixin block-quote-wp() {
+    .wp-block-quote, blockquote {
+        cite{
+            display: block;
+        }
+    }
+}
+
+@mixin block-quote-wp-modifier ($options) {
+    .wp-block-quote, blockquote {
+        @each $property, $value in $options {
+            @if map.has-key($quote-wysiwyg-options, $property) {
+                @if $value {
+                    @if $property == "border" {
+                        @include make-border-wysiwyg-options($value);
+                    }
+                    @else if $property == "paragraph" {
+                        p {
+                            @include make-font-wysiwyg-options($value);
+                        }
+                    }
+                    @else if $property == "cite" {
+                        cite {
+                            @include make-font-wysiwyg-options($value);
+                        }
+                    }
+                    @else {
+                        #{$property}: $value;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@mixin block-quote-sanity-modifier ($options) {
+    blockquote {
+        @each $property, $value in $options {
+            @if map.has-key($quote-wysiwyg-options, $property) {
+                @if $value {
+                    @if $property == "border" {
+                        @include make-border-wysiwyg-options($value);
+                    }
+                    @else if $property == "paragraph" {
+                        p {
+                            @include make-font-wysiwyg-options($value);
+                        }
+                    }
+                    @else if $property == "cite" {
+                        @error "Sanity doesn't support cite styles for quotes";
+                    }
+                    @else {
+                        #{$property}: $value;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+@use "sass:map";
+
+$separator-wysiwyg-options: (
+    "margin": null,
+    "width": null,
+    "color": null,
+    "height": null,
+);
+
+@mixin block-separator-wp () {
+    .wp-block-separator {
+        width: 100%;
+        display: block;
+        border: none;
+    } 
+}
+
+@mixin block-separator-wp-modifier($options) {
+    .wp-block-separator {
+        @each $property, $value in $options {
+            @if map.has-key($separator-wysiwyg-options, $property) {
+                @if $value {
+                    @if $property == "color" {
+                        background: $value;
+                    }
+                    @else {
+                        #{$property}: $value;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,116 @@
+@use "sass:map";
+
+@use "../_global-mixins" as *;
+
+$table-wysiwyg-options: (
+    "header-font-styles": null,
+    "body-font-styles": null,
+    "caption": null,
+    "margin-bottom": null,
+    "header-cells-padding": null,
+    "body-cells-padding": null,
+    "header-border": null,
+    "header-background": null,
+    "body-border": null,
+    "body-background": null,
+    "odd-rows-background": null,
+    "odd-rows-text-color": null,
+);
+
+@mixin block-table-wp() {
+    .wp-block-table,
+    table {
+        width: 100%;
+        text-align: left;
+        margin: 0;
+        border: none;
+        padding: 0px;
+        border-spacing: 0;
+        border-collapse: collapse;
+
+        thead,
+        tfoot {
+            border: none;
+        }
+
+        td { //* all rows
+            margin: 0px;
+        }
+    }
+}
+
+@mixin block-table-wp-modifier($options) {
+    .wp-block-table,
+    table {
+        @each $property, $value in $options {
+            @if map.has-key($table-wysiwyg-options, $property) {
+                @if $value {
+                    @if $property == "header-font-styles" {
+                        thead tr { //* first row
+                            th {
+                                @include make-font-wysiwyg-options($options: $value);
+                            }
+                        }
+                    }
+                    @else if $property == "header-cells-padding" {
+                        thead tr { //* first row
+                            th {
+                                padding: $value;
+                            }
+                        }
+                    }
+                    @else if $property == "header-border" {
+                        thead tr {
+                            th {
+                                @include make-border-wysiwyg-options($options: $value);
+                            }
+                        }
+                    }
+                    @else if $property == "header-background" {
+                        thead tr {
+                            background: $value;
+                        }
+                    }
+                    @else if $property == "body-font-styles" {
+                        td { //* all rows
+                            @include make-font-wysiwyg-options($options: $value);
+                        }
+                    }
+                    @else if $property == "body-cells-padding" {
+                        td { //* all rows
+                            padding: $value;
+                        }
+                    }
+                    @else if $property == "body-border" {
+                        td {
+                            @include make-border-wysiwyg-options($options: $value);
+                        }
+                    }
+                    @else if $property == "body-background" {
+                        tbody tr {
+                            background: $value;
+                        }
+                    }
+                    @else if $property == "odd-rows-background" {
+                        tbody tr:nth-child(odd) {
+                            background: $value;
+                        }
+                    }
+                    @else if $property == "odd-rows-text-color" {
+                        tbody tr:nth-child(odd) td {
+                            color: $value;
+                        }
+                    }
+                    @else if $property == "caption" {
+                        figcaption {
+                            @include make-font-wysiwyg-options($options: $value);
+                        }
+                    }
+                    @else {
+                        #{$property}: $value;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,28 @@
+@use "../_global-mixins" as *;
+
+$video-wysiwyg-options: (
+    "margin-bottom": null,
+);
+
+@mixin block-video-wp() {
+    .wp-block-embed,
+    .wp-block-video {
+        width: 100%;
+        margin: 0 auto;
+        .wp-block-embed__wrapper {
+            iframe {
+                aspect-ratio: 16 / 9;
+                width: 100%;
+                height: auto;
+            }
+        }
+        video {
+            width: 100%;
+            display: block;
+        }
+    }
+}
+
+@mixin block-video-wp-modifier($options) {
+    @include make-media-wysiwyg-options($options, $platform: wp, $media-type: "video");
+}

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

@@ -0,0 +1,45 @@
+@use "sass:map";
+@use "../_global-mixins" as *;
+
+$headings-wysiwyg-options: (
+  "h1": null,
+  "h2": null,
+  "h3": null,
+  "h4": null,
+  "h5": null,
+  "h6": null,
+);
+
+@mixin headings-wp-modifier($options) {
+  @for $i from 1 through 6 {
+    $property: "h#{$i}";
+
+    @if map.has-key($headings-wysiwyg-options, $property) {
+      @if map.get($options, $property) {
+        & > #{$property},
+        .wp-block-column #{$property},
+        .wp-block-media-text #{$property} {
+          @include make-font-wysiwyg-options(
+            $options: map.get($options, $property)
+          );
+        }
+      }
+    }
+  }
+}
+
+@mixin headings-sanity-modifier($options) {
+  @for $i from 1 through 6 {
+    $property: "h#{$i}";
+
+    @if map.has-key($headings-wysiwyg-options, $property) {
+      @if map.get($options, $property) {
+        & > #{$property} {
+          @include make-font-wysiwyg-options(
+            $options: map.get($options, $property)
+          );
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "../_global-mixins" as *;
+
+$link-wysiwyg-options: (
+    "className": null,
+);
+
+@mixin block-link-wysiwyg-modifier ($options) {
+    @each $property, $value in $options {
+        @if map.has-key($link-wysiwyg-options, $property) {
+            @if $value {
+                @if $property == "className" {
+                    a:not([class]),
+                    a[class^='wp-'] {
+                        @include make-class-options($value);
+                    }
+                }
+            }
+        }
+    }
+}