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/nodes/visual/text.js

@@ -0,0 +1,169 @@
+import { Text } from '../../components/visual/Text';
+import NodeSharedPortDefinitions from '../../node-shared-port-definitions';
+import { createNodeFromReactComponent } from '../../react-component-node';
+import { createTooltip } from '../../tooltips';
+
+const TextNode = {
+  name: 'Text',
+  docs: 'https://docs.noodl.net/nodes/basic-elements/text',
+  visualStates: [
+    { name: 'neutral', label: 'Neutral' },
+    { name: 'hover', label: 'Hover' }
+  ],
+  allowChildren: false,
+  noodlNodeAsProp: true,
+  usePortAsLabel: 'text',
+  portLabelTruncationMode: 'length',
+  connectionPanel: {
+    groupPriority: ['General', 'Text', 'Text Style', 'Style', 'Events', 'Mounted', 'Hover Events', 'Pointer Events']
+  },
+  nodeDoubleClickAction: {
+    focusPort: 'text'
+  },
+  getReactComponent() {
+    return Text;
+  },
+  getInspectInfo() {
+    return this.props.text;
+  },
+  defaultCss: {
+    position: 'relative',
+    display: 'flex'
+  },
+  inputProps: {
+    text: {
+      index: 19,
+      group: 'Text',
+      displayName: 'Text',
+      default: 'Text',
+      type: {
+        name: 'string',
+        multiline: true
+      }
+    },
+    as: {
+      index: 100000,
+      group: 'Advanced HTML',
+      displayName: 'Tag',
+      type: {
+        name: 'enum',
+        enums: [
+          { label: '<div>', value: 'div' },
+          { label: '<h1>', value: 'h1' },
+          { label: '<h2>', value: 'h2' },
+          { label: '<h3>', value: 'h3' },
+          { label: '<h4>', value: 'h4' },
+          { label: '<h5>', value: 'h5' },
+          { label: '<h6>', value: 'h6' },
+          { label: '<p>', value: 'p' },
+          { label: '<span>', value: 'span' }
+          // { label: '<a>', value: 'a' },
+        ]
+      },
+      default: 'div'
+    }
+  },
+  inputCss: {
+    wordBreak: {
+      index: 27,
+      group: 'Text',
+      displayName: 'Word Break',
+      applyDefault: false,
+      type: {
+        name: 'enum',
+        enums: [
+          { label: 'Normal', value: 'normal' },
+          { label: 'Break All', value: 'break-all' }
+        ]
+      },
+      default: 'normal'
+    }
+  },
+  inputs: {
+    textAlignX: {
+      group: 'Text Alignment',
+      index: 13,
+      displayName: 'Text Horizontal Align',
+      type: {
+        name: 'enum',
+        enums: [
+          { label: 'left', value: 'left' },
+          { label: 'center', value: 'center' },
+          { label: 'right', value: 'right' }
+        ],
+        alignComp: 'justify'
+      },
+      default: 'left',
+      set(value) {
+        switch (value) {
+          case 'left':
+            this.setStyle({ textAlign: 'left', justifyContent: 'flex-start' });
+            break;
+          case 'center':
+            this.setStyle({ textAlign: 'center', justifyContent: 'center' });
+            break;
+          case 'right':
+            this.setStyle({ textAlign: 'right', justifyContent: 'flex-end' });
+            break;
+        }
+      }
+    },
+    textAlignY: {
+      group: 'Text Alignment',
+      index: 14,
+      displayName: 'Text Vertical Align',
+      type: {
+        name: 'enum',
+        enums: [
+          { label: 'Top', value: 'top' },
+          { label: 'Center', value: 'center' },
+          { label: 'Bottom', value: 'bottom' }
+        ],
+        alignComp: 'vertical'
+      },
+      default: 'top',
+      set(value) {
+        switch (value) {
+          case 'top':
+            this.setStyle({ alignItems: 'flex-start' });
+            break;
+          case 'center':
+            this.setStyle({ alignItems: 'center' });
+            break;
+          case 'bottom':
+            this.setStyle({ alignItems: 'flex-end' });
+            break;
+        }
+      }
+    }
+  }
+};
+
+NodeSharedPortDefinitions.addDimensions(TextNode, {
+  defaultSizeMode: 'contentHeight',
+  contentLabel: 'Text'
+});
+NodeSharedPortDefinitions.addTextStyleInputs(TextNode);
+NodeSharedPortDefinitions.addAlignInputs(TextNode);
+NodeSharedPortDefinitions.addTransformInputs(TextNode);
+NodeSharedPortDefinitions.addMarginInputs(TextNode);
+NodeSharedPortDefinitions.addSharedVisualInputs(TextNode);
+NodeSharedPortDefinitions.addPointerEventOutputs(TextNode);
+
+function defineTooltips(node) {
+  node.inputCss.wordBreak.tooltip = createTooltip({
+    title: 'Word break',
+    body: [
+      'Control where line breaks are allowed',
+      '- Normal: Break on spaces and other whitespace characters',
+      '- Break All: Allow line breaks between any two characters, including inside words'
+    ]
+  });
+}
+
+// eslint-disable-next-line no-undef
+if (!Noodl.runDeployed) {
+  defineTooltips(TextNode);
+}
+
+export default createNodeFromReactComponent(TextNode);