Support inline text effects in via custom theme properties

REDMINE-20977

Author: tf

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 {