@wix/patterns-fields 1.0.0

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css

@@ -0,0 +1,363 @@
+:import {
+    -st-from: './list-items-indentations.js';
+    -st-named: unorderedListMixin, orderedListMixin;
+}
+
+@property st-global(--wds-color-black-100);
+@property st-global(--wds-color-black-700);
+@property st-global(--wds-font-family-default);
+@property st-global(--wds-font-weight-medium);
+@property st-global(--wds-font-weight-bold);
+@property st-global(--wds-font-size-500);
+@property st-global(--wds-font-line-height-300);
+
+@property st-global(--rt-h1-fontSize);
+@property st-global(--rt-h1-fontStyle);
+@property st-global(--rt-h1-fontWeight);
+@property st-global(--rt-h1-fontFamily);
+@property st-global(--rt-h1-lineHeight);
+
+@property st-global(--rt-h2-fontSize);
+@property st-global(--rt-h2-fontStyle);
+@property st-global(--rt-h2-fontWeight);
+@property st-global(--rt-h2-fontFamily);
+@property st-global(--rt-h2-lineHeight);
+
+@property st-global(--rt-h3-fontSize);
+@property st-global(--rt-h3-fontStyle);
+@property st-global(--rt-h3-fontWeight);
+@property st-global(--rt-h3-fontFamily);
+@property st-global(--rt-h3-lineHeight);
+
+@property st-global(--rt-h4-fontSize);
+@property st-global(--rt-h4-fontStyle);
+@property st-global(--rt-h4-fontWeight);
+@property st-global(--rt-h4-fontFamily);
+@property st-global(--rt-h4-lineHeight);
+
+@property st-global(--rt-h5-fontSize);
+@property st-global(--rt-h5-fontStyle);
+@property st-global(--rt-h5-fontWeight);
+@property st-global(--rt-h5-fontFamily);
+@property st-global(--rt-h5-lineHeight);
+
+@property st-global(--rt-h6-fontSize);
+@property st-global(--rt-h6-fontStyle);
+@property st-global(--rt-h6-fontWeight);
+@property st-global(--rt-h6-fontFamily);
+@property st-global(--rt-h6-lineHeight);
+@property st-global(--rt-p1-fontSize);
+@property st-global(--rt-p1-fontStyle);
+@property st-global(--rt-p1-fontWeight);
+@property st-global(--rt-p1-fontFamily);
+@property st-global(--rt-p1-lineHeight);
+
+@property st-global(--rt-unstyled-fontSize);
+@property st-global(--rt-unstyled-fontStyle);
+@property st-global(--rt-unstyled-fontWeight);
+@property st-global(--rt-unstyled-fontFamily);
+@property st-global(--rt-unstyled-lineHeight);
+
+@property st-global(--rt-p3-fontSize);
+@property st-global(--rt-p3-fontStyle);
+@property st-global(--rt-p3-fontWeight);
+@property st-global(--rt-p3-fontFamily);
+@property st-global(--rt-p3-lineHeight);
+
+:vars {
+    h1FontSize: var(--rt-h1-fontSize, 72px);
+    h1FontStyle: var(--rt-h1-fontStyle, normal);
+    h1FontWeight: var(--rt-h1-fontWeight, var(--wds-font-weight-bold));
+    h1FontFamily: var(--rt-h1-fontFamily, var(--wds-font-family-default));
+    h1LineHeight: var(--rt-h1-lineHeight, 1.33);
+    h1Font: value(h1FontStyle) value(h1FontWeight) value(h1FontSize)/value(h1LineHeight) value(h1FontFamily);
+
+    h2FontSize: var(--rt-h2-fontSize, 42px);
+    h2FontStyle: var(--rt-h2-fontStyle, normal);
+    h2FontWeight: var(--rt-h2-fontWeight, var(--wds-font-weight-bold));
+    h2FontFamily: var(--rt-h2-fontFamily, var(--wds-font-family-default));
+    h2LineHeight: var(--rt-h2-lineHeight, 1.2);
+    h2Font: value(h2FontStyle) value(h2FontWeight) value(h2FontSize)/value(h2LineHeight) value(h2FontFamily);
+
+    h3FontSize: var(--rt-h3-fontSize, 38px);
+    h3FontStyle: var(--rt-h3-fontStyle, normal);
+    h3FontWeight: var(--rt-h3-fontWeight, var(--wds-font-weight-medium));
+    h3FontFamily: var(--rt-h3-fontFamily, var(--wds-font-family-default));
+    h3LineHeight: var(--rt-h3-lineHeight, 1.2);
+    h3Font: value(h3FontStyle) value(h3FontWeight) value(h3FontSize)/value(h3LineHeight) value(h3FontFamily);
+
+    h4FontSize: var(--rt-h4-fontSize, 34px);
+    h4FontStyle: var(--rt-h4-fontStyle, normal);
+    h4FontWeight: var(--rt-h4-fontWeight, var(--wds-font-weight-bold));
+    h4FontFamily: var(--rt-h4-fontFamily, var(--wds-font-family-default));
+    h4LineHeight: var(--rt-h4-lineHeight, 1.2);
+    h4Font: value(h4FontStyle) value(h4FontWeight) value(h4FontSize)/value(h4LineHeight) value(h4FontFamily);
+
+    h5FontSize: var(--rt-h5-fontSize, 28px);
+    h5FontStyle: var(--rt-h5-fontStyle, normal);
+    h5FontWeight: var(--rt-h5-fontWeight, var(--wds-font-weight-bold));
+    h5FontFamily: var(--rt-h5-fontFamily, var(--wds-font-family-default));
+    h5LineHeight: var(--rt-h5-lineHeight, 1.2);
+    h5Font: value(h5FontStyle) value(h5FontWeight) value(h5FontSize)/value(h5LineHeight) value(h5FontFamily);
+
+    h6FontSize: var(--rt-h6-fontSize, 22px);
+    h6FontStyle: var(--rt-h6-fontStyle, normal);
+    h6FontWeight: var(--rt-h6-fontWeight, var(--wds-font-weight-medium));
+    h6FontFamily: var(--rt-h6-fontFamily, var(--wds-font-family-default));
+    h6LineHeight: var(--rt-h6-lineHeight, 1.2);
+    h6Font: value(h6FontStyle) value(h6FontWeight) value(h6FontSize)/value(h6LineHeight) value(h6FontFamily);
+
+    p1FontSize: var(--rt-p1-fontSize, 18px);
+    p1FontStyle: var(--rt-p1-fontStyle, normal);
+    p1FontWeight: var(--rt-p1-fontWeight, var(--wds-font-weight-medium));
+    p1FontFamily: var(--rt-p1-fontFamily, var(--wds-font-family-default));
+    p1LineHeight: var(--rt-p1-lineHeight, 24px);
+    p1Font: value(p1FontStyle) value(p1FontWeight) value(p1FontSize)/value(p1LineHeight) value(p1FontFamily);
+
+    unstyledFontSize: var(--rt-unstyled-fontSize, 16px);
+    unstyledFontStyle: var(--rt-unstyled-fontStyle, normal);
+    unstyledFontWeight: var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium));
+    unstyledFontFamily: var(--rt-unstyled-fontFamily, var(--wds-font-family-default));
+    unstyledLineHeight: var(--rt-unstyled-lineHeight, 24px);
+    unstyledFont: value(unstyledFontStyle) value(unstyledFontWeight) value(unstyledFontSize)/value(unstyledLineHeight) value(unstyledFontFamily);
+
+    p3FontSize: var(--rt-p3-fontSize, 14px);
+    p3FontStyle: var(--rt-p3-fontStyle, normal);
+    p3FontWeight: var(--rt-p3-fontWeight, var(--wds-font-weight-medium));
+    p3FontFamily: var(--rt-p3-fontFamily, var(--wds-font-family-default));
+    p3LineHeight: var(--rt-p3-lineHeight, 18px);
+    p3Font: value(p3FontStyle) value(p3FontWeight) value(p3FontSize)/value(p3LineHeight) value(p3FontFamily);
+}
+
+.root {
+    display: flex;
+    flex-direction: column;
+    font-weight: var(--wds-font-weight-medium);
+    font-size: var(--wds-font-size-500);
+    line-height: var(--wds-font-line-height-300);
+    font-family: var(--wds-font-family-default);
+}
+
+.editor {
+    box-sizing: border-box;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    cursor: text;
+    color: var(--wds-color-black-100);
+    background: var(--wds-color-black-700);
+}
+
+.editor :global(.DraftEditor-root) {
+    width: 100%;
+    height: 100%;
+}
+
+/* Fix for https://wix.atlassian.net/browse/CMS-205 */
+.editor :global(.DraftEditor-root) [data-contents] {
+    overflow: auto;
+}
+
+.editor :global(.DraftEditor-editorContainer) {
+    display: flex;
+    min-height: 100%;
+    background: white;
+}
+
+.editor :global(.public-DraftEditor-content) {
+    padding: 12px 24px 24px;
+    min-height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Folloding styles modify look of text in editor */
+
+.editor :global(.public-DraftEditor-content) ol,
+.editor :global(.public-DraftEditor-content) ul {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+}
+
+.editor :global(.public-DraftEditor-content) a,
+.editor :global(.public-DraftEditor-content) a:visited {
+    color: inherit;
+    text-decoration: none;
+}
+
+/* === Headings === */
+
+.header-one:not(li),
+.header-two:not(li),
+.header-three:not(li),
+.header-four:not(li),
+.header-five:not(li),
+.header-six:not(li) {
+    margin-block: 0;
+    margin: 0;
+}
+
+/* header-one */
+.header-one,
+.editor li.header-one :global(.public-DraftStyleDefault-block) {
+    font: value(h1Font);
+}
+
+/* header-two */
+.header-two,
+.editor li.header-two :global(.public-DraftStyleDefault-block) {
+    font: value(h2Font);
+}
+
+/* header-three */
+.header-three,
+.editor li.header-three :global(.public-DraftStyleDefault-block) {
+    font: value(h3Font);
+}
+
+/* header-four */
+.header-four,
+.editor li.header-four :global(.public-DraftStyleDefault-block) {
+    font: value(h4Font);
+}
+
+/* header-five */
+.header-five,
+.editor li.header-five :global(.public-DraftStyleDefault-block) {
+    font: value(h5Font);
+}
+
+/* header-six */
+.header-six,
+.editor li.header-six :global(.public-DraftStyleDefault-block) {
+    font: value(h6Font);
+}
+
+/* === Paragraphs === */
+
+/* paragraph-one */
+.paragraph-one,
+.editor li.paragraph-one :global(.public-DraftStyleDefault-block) {
+    font: value(p1Font);
+}
+
+/* paragraph-two (unstyled) */
+.unstyled,
+.editor li.unstyled :global(.public-DraftStyleDefault-block) {
+    font: value(unstyledFont);
+}
+
+/* paragraph-three */
+.paragraph-three,
+.editor li.paragraph-three :global(.public-DraftStyleDefault-block) {
+    font: value(p3Font);
+}
+
+/* === Lists === */
+
+/* Copy size of bullets/numbers in lists from first list item */
+.editor li.header-one:first-child ~ li {
+    font: value(h1Font);
+}
+
+.editor li.header-one:first-child ~ li::marker {
+    line-height: value(h1FontSize);
+}
+
+.editor li.header-two:first-child ~ li {
+    font: value(h2Font)
+}
+
+.editor li.header-two:first-child ~ li::marker {
+    line-height: value(h2FontSize);
+}
+
+.editor li.header-three:first-child ~ li {
+    font: value(h3Font)
+}
+
+.editor li.header-three:first-child ~ li::marker {
+    line-height: value(h3FontSize);
+}
+
+.editor li.header-four:first-child ~ li {
+    font: value(h4Font)
+}
+
+.editor li.header-four:first-child ~ li::marker {
+    line-height: value(h4FontSize);
+}
+
+.editor li.header-five:first-child ~ li {
+    font: value(h5Font)
+}
+
+.editor li.header-five:first-child ~ li::marker {
+    line-height: value(h5FontSize);
+}
+
+.editor li.header-six:first-child ~ li {
+    font: value(h6Font)
+}
+
+.editor li.header-six:first-child ~ li::marker {
+    line-height: value(h6FontSize);
+}
+
+.editor li.paragraph-one:first-child ~ li {
+    font: value(p1Font)
+}
+
+.editor li.unstyled:first-child ~ li {
+    font: value(unstyledFont)
+}
+
+.editor li.paragraph-three:first-child ~ li {
+    font: value(p3Font)
+}
+
+/* Indentations */
+:global(.public-DraftStyleDefault-ul) {
+    -st-mixin: unorderedListMixin(4);
+}
+
+:global(.public-DraftStyleDefault-ol) {
+    -st-mixin: orderedListMixin(4, 4);
+}
+
+.align-left {
+    text-align: left;
+    align-self: flex-start;
+}
+
+.align-right {
+    text-align: right;
+    align-self: flex-end;
+}
+
+.align-center {
+    text-align: center;
+    align-self: center;
+}
+
+.align-justify {
+    text-align: justify;
+    align-self: stretch;
+}
+
+.withMargin {
+    display: inline-block;
+}
+
+.dir-rtl,
+.editor :global(.public-DraftStyleDefault-rtl) {
+    direction: rtl;
+}
+
+.editor :global(.public-DraftStyleDefault-listRTL) {
+    direction: rtl;
+    text-align: right;
+    max-width: 100%;
+}

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richeditor3961393949";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"richeditor3961393949__root","editor":"richeditor3961393949__editor","header-one":"richeditor3961393949__header-one","header-two":"richeditor3961393949__header-two","header-three":"richeditor3961393949__header-three","header-four":"richeditor3961393949__header-four","header-five":"richeditor3961393949__header-five","header-six":"richeditor3961393949__header-six","paragraph-one":"richeditor3961393949__paragraph-one","unstyled":"richeditor3961393949__unstyled","paragraph-three":"richeditor3961393949__paragraph-three","align-left":"richeditor3961393949__align-left","align-right":"richeditor3961393949__align-right","align-center":"richeditor3961393949__align-center","align-justify":"richeditor3961393949__align-justify","withMargin":"richeditor3961393949__withMargin","dir-rtl":"richeditor3961393949__dir-rtl"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {"h1FontSize":"var(--rt-h1-fontSize, 72px)","h1FontStyle":"var(--rt-h1-fontStyle, normal)","h1FontWeight":"var(--rt-h1-fontWeight, var(--wds-font-weight-bold))","h1FontFamily":"var(--rt-h1-fontFamily, var(--wds-font-family-default))","h1LineHeight":"var(--rt-h1-lineHeight, 1.33)","h1Font":"var(--rt-h1-fontStyle, normal) var(--rt-h1-fontWeight, var(--wds-font-weight-bold)) var(--rt-h1-fontSize, 72px)/var(--rt-h1-lineHeight, 1.33) var(--rt-h1-fontFamily, var(--wds-font-family-default))","h2FontSize":"var(--rt-h2-fontSize, 42px)","h2FontStyle":"var(--rt-h2-fontStyle, normal)","h2FontWeight":"var(--rt-h2-fontWeight, var(--wds-font-weight-bold))","h2FontFamily":"var(--rt-h2-fontFamily, var(--wds-font-family-default))","h2LineHeight":"var(--rt-h2-lineHeight, 1.2)","h2Font":"var(--rt-h2-fontStyle, normal) var(--rt-h2-fontWeight, var(--wds-font-weight-bold)) var(--rt-h2-fontSize, 42px)/var(--rt-h2-lineHeight, 1.2) var(--rt-h2-fontFamily, var(--wds-font-family-default))","h3FontSize":"var(--rt-h3-fontSize, 38px)","h3FontStyle":"var(--rt-h3-fontStyle, normal)","h3FontWeight":"var(--rt-h3-fontWeight, var(--wds-font-weight-medium))","h3FontFamily":"var(--rt-h3-fontFamily, var(--wds-font-family-default))","h3LineHeight":"var(--rt-h3-lineHeight, 1.2)","h3Font":"var(--rt-h3-fontStyle, normal) var(--rt-h3-fontWeight, var(--wds-font-weight-medium)) var(--rt-h3-fontSize, 38px)/var(--rt-h3-lineHeight, 1.2) var(--rt-h3-fontFamily, var(--wds-font-family-default))","h4FontSize":"var(--rt-h4-fontSize, 34px)","h4FontStyle":"var(--rt-h4-fontStyle, normal)","h4FontWeight":"var(--rt-h4-fontWeight, var(--wds-font-weight-bold))","h4FontFamily":"var(--rt-h4-fontFamily, var(--wds-font-family-default))","h4LineHeight":"var(--rt-h4-lineHeight, 1.2)","h4Font":"var(--rt-h4-fontStyle, normal) var(--rt-h4-fontWeight, var(--wds-font-weight-bold)) var(--rt-h4-fontSize, 34px)/var(--rt-h4-lineHeight, 1.2) var(--rt-h4-fontFamily, var(--wds-font-family-default))","h5FontSize":"var(--rt-h5-fontSize, 28px)","h5FontStyle":"var(--rt-h5-fontStyle, normal)","h5FontWeight":"var(--rt-h5-fontWeight, var(--wds-font-weight-bold))","h5FontFamily":"var(--rt-h5-fontFamily, var(--wds-font-family-default))","h5LineHeight":"var(--rt-h5-lineHeight, 1.2)","h5Font":"var(--rt-h5-fontStyle, normal) var(--rt-h5-fontWeight, var(--wds-font-weight-bold)) var(--rt-h5-fontSize, 28px)/var(--rt-h5-lineHeight, 1.2) var(--rt-h5-fontFamily, var(--wds-font-family-default))","h6FontSize":"var(--rt-h6-fontSize, 22px)","h6FontStyle":"var(--rt-h6-fontStyle, normal)","h6FontWeight":"var(--rt-h6-fontWeight, var(--wds-font-weight-medium))","h6FontFamily":"var(--rt-h6-fontFamily, var(--wds-font-family-default))","h6LineHeight":"var(--rt-h6-lineHeight, 1.2)","h6Font":"var(--rt-h6-fontStyle, normal) var(--rt-h6-fontWeight, var(--wds-font-weight-medium)) var(--rt-h6-fontSize, 22px)/var(--rt-h6-lineHeight, 1.2) var(--rt-h6-fontFamily, var(--wds-font-family-default))","p1FontSize":"var(--rt-p1-fontSize, 18px)","p1FontStyle":"var(--rt-p1-fontStyle, normal)","p1FontWeight":"var(--rt-p1-fontWeight, var(--wds-font-weight-medium))","p1FontFamily":"var(--rt-p1-fontFamily, var(--wds-font-family-default))","p1LineHeight":"var(--rt-p1-lineHeight, 24px)","p1Font":"var(--rt-p1-fontStyle, normal) var(--rt-p1-fontWeight, var(--wds-font-weight-medium)) var(--rt-p1-fontSize, 18px)/var(--rt-p1-lineHeight, 24px) var(--rt-p1-fontFamily, var(--wds-font-family-default))","unstyledFontSize":"var(--rt-unstyled-fontSize, 16px)","unstyledFontStyle":"var(--rt-unstyled-fontStyle, normal)","unstyledFontWeight":"var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium))","unstyledFontFamily":"var(--rt-unstyled-fontFamily, var(--wds-font-family-default))","unstyledLineHeight":"var(--rt-unstyled-lineHeight, 24px)","unstyledFont":"var(--rt-unstyled-fontStyle, normal) var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium)) var(--rt-unstyled-fontSize, 16px)/var(--rt-unstyled-lineHeight, 24px) var(--rt-unstyled-fontFamily, var(--wds-font-family-default))","p3FontSize":"var(--rt-p3-fontSize, 14px)","p3FontStyle":"var(--rt-p3-fontStyle, normal)","p3FontWeight":"var(--rt-p3-fontWeight, var(--wds-font-weight-medium))","p3FontFamily":"var(--rt-p3-fontFamily, var(--wds-font-family-default))","p3LineHeight":"var(--rt-p3-lineHeight, 18px)","p3Font":"var(--rt-p3-fontStyle, normal) var(--rt-p3-fontWeight, var(--wds-font-weight-medium)) var(--rt-p3-fontSize, 14px)/var(--rt-p3-lineHeight, 18px) var(--rt-p3-fontFamily, var(--wds-font-family-default))"}; 
+export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","wds-font-family-default":"--wds-font-family-default","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight"}; 
+
+
+
+