Merge pull request #2225 from tf/inline-text-effects

Support inline text effects in via custom theme properties

Author: tf

entry_types/scrolled/package/src/contentElements/heading/stories.js

@@ -117,6 +117,29 @@ storiesOfContentElement(module, {
       configuration: {
         color: 'accent'
       }
-    }
+    },
+    {
+      name: 'With text effects',
+      configuration: {
+        typographyVariant: 'highlight',
+        children: 'Some Heading\nText',
+      },
+      themeOptions: {
+        typography: {
+          'heading-highlight': {
+            transform: 'rotate(-2.7deg)',
+            'font-style': 'italic',
+            '--text-highlight-padding': '0 0.2em',
+            '--text-highlight-background-color': '#fff',
+            '--text-highlight-line-height': '1.5',
+            '--background-clip-text-fallback-color': '#000',
+            '--background-clip-text-background': 'linear-gradient(90deg, red 0%, #ff00ff 100%)',
+            '--background-clip-text-background-clip': 'text',
+            '--background-clip-text-color': 'transparent',
+            '--background-clip-text-padding': '0 0.2em 0 0'
+          }
+        }
+      }
+    },
   ]
 });

entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js

@@ -16,7 +16,6 @@ import {insidePagerButton} from './PagerButton';
 import {
   EditableText,
   EditableInlineText,
-  EditableLink,
   InlineFileRights,
   Image,
   Text,

entry_types/scrolled/package/src/frontend/EditableInlineText.js

@@ -8,10 +8,13 @@ import styles from './EditableInlineText.module.css';
 export const EditableInlineText = withInlineEditingAlternative(
   'EditableInlineText',
   function EditableInlineText({value, hyphens, defaultValue = ''}) {
+    const text = value ? value[0]?.children[0]?.text : defaultValue;
+
     return (
       <span className={classNames(styles.root,
+                                  styles.textEffects,
                                   styles[`hyphens-${hyphens}`])}>
-        {value ? value[0]?.children[0]?.text : defaultValue}
+        <span>{text}</span>
       </span>
     );
   }

entry_types/scrolled/package/src/frontend/EditableInlineText.module.css

@@ -31,3 +31,28 @@
   hyphens: none;
   word-wrap: normal;
 }
+
+.textEffects {
+  padding: var(--text-highlight-padding);
+  line-height: var(--text-highlight-line-height);
+  box-decoration-break: clone;
+}
+
+.textEffects:not(:has([data-slate-zero-width="n"])) {
+  background-color: var(--text-highlight-background-color);
+}
+
+.textEffects > span {
+  color: var(--background-clip-text-fallback-color);
+  padding: var(--background-clip-text-padding);
+  box-decoration-break: clone;
+}
+
+@supports ((background-clip: text) or (-webkit-background-clip: text)) {
+  .textEffects > span {
+    background: var(--background-clip-text-background);
+    background-clip: var(--background-clip-text-background-clip);
+    color: var(--background-clip-text-color);
+    caret-color: var(--background-clip-text-fallback-color);
+  }
+}

entry_types/scrolled/package/src/frontend/Text.js

@@ -2,8 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import {camelize} from './utils/camelize';
-
 import styles from './Text.module.css';
 
 /**

entry_types/scrolled/package/src/frontend/inlineEditing/EditableInlineText/index.js

@@ -49,6 +49,7 @@ export const EditableInlineText = memo(function EditableInlineText({
       <Slate editor={editor} value={cachedValue} onChange={setCachedValue}>
         <Editable decorate={decorateLineBreaks}
                   onKeyDown={handleKeyDown}
+                  renderElement={props => <Element {...props} />}
                   renderLeaf={renderLeaf} />
       </Slate>
       <TextPlaceholder text={placeholder}
@@ -57,6 +58,16 @@ export const EditableInlineText = memo(function EditableInlineText({
   );
 });
 
+function Element({attributes, children, element}) {
+  return (
+    <div {...attributes} style={{position: 'relative'}}>
+      <span className={frontendStyles.textEffects}>
+        {children}
+      </span>
+    </div>
+  );
+}
+
 function renderLeaf({attributes, children, leaf}) {
   if (leaf.shy) {
     children = <span className={styles.shy}>{children}</span>;

entry_types/scrolled/package/src/frontend/inlineEditing/EditableInlineText/index.module.css

@@ -1,6 +1,7 @@
 .shy [data-slate-string],
 .newLine {
   position: relative;
+  color: var(--background-clip-text-fallback-color);
 }
 
 .selected.manualHyphens .shy [data-slate-string]::before {