@terrahq/wysiwyg
v1.0.0
Published
This package offers a seamless solution to effortlessly style the WYSIWYG and Gutenberg editor fields in WordPress and Sanity. With user-friendly customization options, it provides a hassle-free way to enhance the visual aesthetics of these content editor
Keywords
Readme
WYSIWYG By Terra
This package offers a seamless solution to effortlessly style the WYSIWYG and Gutenberg editor fields in WordPress and Sanity. With user-friendly customization options, it provides a hassle-free way to enhance the visual aesthetics of these content editors, ensuring a polished and cohesive design for your web content.
Installation
npm install @terrahq/wysiwygImport Mixins Globally
Import the mixing into the c--content file:
For Wordpress
@use "@terrahq/wysiwyg/wordpress" as *;For Sanity
@use "@terrahq/wysiwyg/sanity" as *;How to Use
The c--content consists of two mixins. One is responsible for styling properties to ensure components look visually appealing, while the other provides options to customize blocks for each project. In both mixins, it is crucial to specify the platform for which they are intended to be used (wp or sanity).
Each block has its own set of options for customization. If you want to learn more about any specific block, click on it. The blocks that are styled include:
- Headings
- Image
- Links
- Lists
- Paragraphs
- Quote (for Sanity, it doesn't have a cite option.)
- Footnote, this is a custom block (just for WP)
- Highlighted, this is a custom block (just for WP)
- Button (just for WP)
- Columns (just for WP)
- Separator (just for WP)
- Table (just for WP)
- Video (just for WP)
- Utilities (just for WP)
- Custom
Block Compatibility Table
This table shows which blocks are compatible with Gutenberg (WordPress), classic WYSIWYG content (like ACF fields or raw HTML editors), and Sanity:
| Block | Gutenberg (WP) | Classic WYSIWYG WP | Sanity | |---------------|---------------------|-----------------------|-----------------------| | Headings | ✅ | ✅ | ✅ | | Paragraphs | ✅ | ✅ | ✅ | | Lists | ✅ | ✅ | ✅ | | Links | ✅ | ✅ | ✅ | | Images | ✅ (with zoom) | ✅ (no zoom, no cite) | ✅ (no zoom, no cite) | | Quote | ✅ (with cite) | ✅ (no cite) | ✅ (no cite) | | Footnote | ✅ | ❌ | ❌ | | Highlighted | ✅ | ❌ | ❌ | | Button | ✅ | ❌ | ❌ | | Columns | ✅ | ❌ | ❌ | | Separator | ✅ | ❌ | ❌ | | Table | ✅ | ✅ | ❌ | | Video | ✅ | ✅ | ❌ | | Utilities | ✅ | ❌ | ❌ | | Custom | ✅ | ✅ | ✅ |
WP
HTML code
<div class="c--content-a"></div>SCSS code
.c--content-a {
@include make-content();
@include make-content-modifier(
$headings-options: (
// "h1": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*3,
// "padding-top": $measure*5,
// "text-align": center,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
"h2":
(
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 3,
"padding-top": $measure * 5,
// "text-align": center,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h3": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 3,
"padding-top": $measure * 5,
// "text-align": center,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h4": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 2,
"padding-top": $measure * 5,
// "text-align": center,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h5": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 2,
"padding-top": $measure * 5,
// "text-align": center,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h6": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure,
"padding-top": $measure * 5,
// "text-align": center,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
),
$image-options: (
// "border-color": red,
// "border-radius": 20px,
// "border-style": solid,
// "border-width": 2px,
// "object-fit": cover,
// "max-height": 700px,
// "min-height": 0,
// "object-position": center,
// "max-width": 100%,
// "min-width": 30px,
"margin-bottom": $measure * 5,
"caption": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
"padding-top": $measure * 2,
"text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// "zoom-button-background-color": red,
// "zoom-button-bottom": 0px,
// "zoom-button-right": 0px,
// "zoom-button-border-radius": 0 0 8px 0,
),
),
$link-options: (
// "className": g--link-01 g--link-01--second,
),
$lists-options: (
// "number-font": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
// "first-number-width": 14px,
// "first-level-number-color": map.get($color-options, d),
// "first-level-artwork-width": 8px,
// "first-level-artwork-top": 8px,
// "first-level-artwork-image": '(../img/artwork.png)',
// "first-level-artwork-background": map.get($color-options, d),
// "first-level-artwork-border-radius": 50%,
// "first-level-artwork-border-width": 1px,
// "first-level-artwork-border-color": map.get($color-options, d),
// "second-level-number-color": map.get($color-options, d),
// "second-level-artwork-width": 8px,
// "second-level-artwork-top": 8px,
// "second-level-artwork-image": '(../img/artwork.png)',
// "second-level-artwork-background": map.get($color-options, d),
// "second-level-artwork-border-radius": 50%,
// "second-level-artwork-border-width": 1px,
// "second-level-artwork-border-color": map.get($color-options, d),
// "third-level-number-color": map.get($color-options, d),
// "third-level-artwork-width": 8px,
// "third-level-artwork-top": 8px,
// "third-level-artwork-image": '(../img/artwork.png)',
// "third-level-artwork-background": map.get($color-options, d),
// "third-level-artwork-border-radius": 50%,
// "third-level-artwork-border-width": 1px,
// "third-level-artwork-border-color": map.get($color-options, d),
"margin-bottom": $measure * 4,
// "nested-list-spacing": $measure,
"font-styles": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 2,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
),
$paragraphs-options: (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 4,
// "padding-top": $measure*2,
// "text-align": right,
"margin-bottom-before-lists": $measure * 3,
// "bold-font-weight": 800,
),
$quote-options: (
"padding": $measure * 3 0,
"margin-top": $measure * 5,
"margin-bottom": $measure * 6,
// "border": (
// "border-color": red,
// "border-radius": 0,
// "border-style": solid,
// "border-width": 2px 0,
// ),
// "paragraph": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
"cite":
(
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
"padding-top": $measure * 3,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
),
$footnote-options: (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 2,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
$highlighted-options: (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 4,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
$btn-options: (
// "className": g--btn-01,
"margin-bottom": $measure * 4,
),
$columns-options: (
"breakpoint": $tablets,
"margin-bottom": $measure * 4,
),
$separator-options: (
"margin": $measure * 6 auto,
// "width": 60%,
// "color": orange,
// "height": 2px,
),
$table-options: (
"margin-bottom": $measure * 4,
"header-cells-padding": $measure * 2,
"body-cells-padding": $measure $measure * 2,
// "header-font-styles": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
// "header-border": (
// "border-radius": 1px,
// "border-width": 1px,
// "border-style": solid,
// "border-color": map.get($color-options, a)
// ),
// "header-background": map.get($color-options, a),
// "body-font-styles": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
// "body-border": (
// "border-radius": 1px,
// "border-width": 1px,
// "border-style": solid,
// "border-color": map.get($color-options, a)
// ),
// "body-background": map.get($color-options, a),
// "odd-rows-background": map.get($color-options, c),
// "odd-rows-text-color": map.get($color-options, d),
// "caption": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
"padding-top": $measure * 2,
"text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),,,,,,,,,,,,,
),
$video-options: (
// "border-color": red,
// "border-radius": 20px,
// "border-style": solid,
// "border-width": 2px,
// "object-fit": cover,
// "max-height": 700px,
// "min-height": 0,
// "object-position": center,
// "max-width": 100%,
// "min-width": 30px,
"margin-bottom": $measure * 5,
"caption": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
"padding-top": $measure * 2,
"text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
),
$utilities-options: (
"media-text-aligned-margin-x": $measure * 5,
)
);
}
@include zoom-modal-image();
@include zoom-modal-image-modifier(
$option: (
// "zoom-modal-bg-overlay": red,
// "zoom-close-btn-color": yellow,
)
);Now for WP (implemented on WordPress 6.4), we have another option to add a zoom to the image, when you click a modal appears and the image have a button. You have the option to change the zoom-button properties that you can find inside $image-options. You also have to add the zoom-modal-image mixin and the zoom-modal-image-modifier mixin OUTSIDE the .c--content-a class.
Example:
@include zoom-modal-image();
@include zoom-modal-image-modifier(
$option: (
// "zoom-modal-bg-overlay": red,
// "zoom-close-btn-color": yellow,
)
);Sanity
HTML code
<div class="c--content-a"></div>SCSS code
.c--content-a {
@include make-content();
@include make-content-modifier(
$headings-options: (
// "h1": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
// "padding-top": $measure*2,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
"h2":
(
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 3,
"padding-top": $measure * 5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h3": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 3,
"padding-top": $measure * 5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h4": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 2,
"padding-top": $measure * 5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h5": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 2,
"padding-top": $measure * 5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
"h6": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure,
"padding-top": $measure * 5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
),
$image-options: (
// "border-color": red,
// "border-radius": 20px,
// "border-style": solid,
// "border-width": 2px,
// "object-fit": cover,
// "max-height": 700px,
// "min-height": 0,
// "object-position": center,
// "max-width": 100%,
// "min-width": 30px,
"margin-bottom": $measure * 5,
"caption": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
"padding-top": $measure * 2,
"text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
),
$link-options: (
// "className": g--link-01 g--link-01--second,
),
$lists-options: (
// "number-font": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
// "padding-top": $measure*5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
// "first-number-width": 14px,
// "first-level-number-color": map.get($color-options, d),
// "first-level-artwork-width": 8px,
// "first-level-artwork-top": 8px,
// "first-level-artwork-image": '(../img/artwork.png)',
// "first-level-artwork-background": map.get($color-options, d),
// "first-level-artwork-border-radius": 50%,
// "first-level-artwork-border-width": 1px,
// "first-level-artwork-border-color": map.get($color-options, d),
// "second-level-number-color": map.get($color-options, d),
// "second-level-artwork-width": 8px,
// "second-level-artwork-top": 8px,
// "second-level-artwork-image": '(../img/artwork.png)',
// "second-level-artwork-background": map.get($color-options, d),
// "second-level-artwork-border-radius": 50%,
// "second-level-artwork-border-width": 1px,
// "second-level-artwork-border-color": map.get($color-options, d),
// "third-level-number-color": map.get($color-options, d),
// "third-level-artwork-width": 8px,
// "third-level-artwork-top": 8px,
// "third-level-artwork-image": '(../img/artwork.png)',
// "third-level-artwork-background": map.get($color-options, d),
// "third-level-artwork-border-radius": 50%,
// "third-level-artwork-border-width": 1px,
// "third-level-artwork-border-color": map.get($color-options, d),
"margin-bottom": $measure * 4,
// "nested-list-spacing": $measure,
"font-styles": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 2,
// "padding-top": $measure*5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
),
),
$paragraphs-options: (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
"margin-bottom": $measure * 4,
// "padding-top": $measure*5,
// "text-align": right,
"margin-bottom-before-lists": $measure * 3,
// "bold-font-weight": 800,
),
$quote-options: (
"padding": $measure * 3 0,
"margin-top": $measure * 5,
"margin-bottom": $measure * 6,
// "border": (
// "border-color": red,
// "border-radius": 0,
// "border-style": solid,
// "border-width": 2px 0,
// ),
// "paragraph": (
// "className": f--font-a,
// "color": #638c1d,
// "font-family": arial,
// "font-size": 2rem,
// "font-style": italic,
// "font-weight": 400,
// "letter-spacing": 1px,
// "line-height": 1.5,
// "max-lines": 3,
// "text-decoration": underline,
// "text-decoration-color": #000000,
// "text-underline-position": under,
// "margin-bottom": $measure*2,
// "padding-top": $measure*5,
// "text-align": right,
// "margin-bottom-before-lists": 24px,
// "bold-font-weight": 800,
// ),
)
);
}