Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-viewer-react/src/components/visual/Text/Text.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Layout from '../../../layout';
+import PointerListeners from '../../../pointerlisteners';
+import { Noodl } from '../../../types';
+
+export interface TextProps extends Noodl.ReactProps {
+  as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
+
+  textStyle: Noodl.TextStyle;
+  text: string;
+
+  sizeMode?: Noodl.SizeMode;
+  width?: string;
+  height?: string;
+  fixedWidth?: boolean;
+  fixedHeight?: boolean;
+
+  // Extra Attributes
+  dom: Record<string, unknown>;
+}
+
+export function Text(props: TextProps) {
+  const { as: Component = 'div' } = props;
+
+  const style = {
+    ...props.textStyle,
+    ...props.style
+  };
+
+  Layout.size(style, props);
+  Layout.align(style, props);
+
+  style.color = props.noodlNode.context.styles.resolveColor(style.color);
+
+  // Respect '\n' in the string
+  if (props.sizeMode === 'contentSize' || props.sizeMode === 'contentWidth') {
+    style.whiteSpace = 'pre';
+  } else {
+    style.whiteSpace = 'pre-wrap';
+    style.overflowWrap = 'anywhere';
+  }
+
+  if (style.opacity === 0) {
+    style.pointerEvents = 'none';
+  }
+
+  return (
+    <Component
+      className={['ndl-visual-text', props.className].join(' ')}
+      {...props.dom}
+      {...PointerListeners(props)}
+      style={style}
+    >
+      {String(props.text)}
+    </Component>
+  );
+}