client/src/components/Creatify/EditableFontface/index.js

@@ -19,6 +19,7 @@ export default class EditableFontface extends Component {
     } = me.state;
 
     const {
+      editable = true,
       fontFace,
     } = me.props;
 
@@ -30,23 +31,25 @@ export default class EditableFontface extends Component {
       MozOsxFontSmoothing: 'grayscale',
     }, fontFace.text);
 
-    console.log(textStyles);
+    const fontInput = (editable === true) ? (
+      <input type="text" onKeyPress={(e) => me.onKeyPress(e)} onChange={(e) => me.onChange(e)} style={{
+        ...{
+          bottom: 0,
+          opacity: 0,
+          padding: 0,
+          left: 0,
+          position: 'absolute',
+          top: 0,
+          width: '100%',
+          zIndex: 1,
+        },
+        ...(fontFace.editorStyle || {}),
+      }} />
+    ) : null;
 
     return (
       <div style={{ position: 'relative' }}>
-        <input type="text" onKeyPress={(e) => me.onKeyPress(e)} onChange={(e) => me.onChange(e)} style={{
+      {fontInput}
-          ...{
-            bottom: 0,
-            opacity: 0,
-            padding: 0,
-            left: 0,
-            position: 'absolute',
-            top: 0,
-            width: '100%',
-            zIndex: 1,
-          },
-          ...(fontFace.editorStyle || {}),
-        }} />
       <div ref={me.state.fontRender} style={textStyles} title={value}>{textRender(value)}</div>
       </div>
     );

client/src/components/Creatify/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Select from 'react-select'
 
 import RichDraggable from './RichDraggable';
 import EditableFontface, { PRESETS as FontPresets } from './EditableFontface';
@@ -20,12 +21,20 @@ export default class Creatify extends Component {
     this.canvas = React.createRef();
     this.contents = React.createRef();
 
+    const fontOptions = fontKeys.map(
+      (fontName) => (
+        {
+          value: fontName,
+          label: <EditableFontface fontFace={FontPresets[fontName]} value={fontName} editable="false" />,
+          fontName,
+        }
+      )
+    );
+
     this.state = {
       bounds: {},
       fontName: fontKeys[0],
-      fontOptions: fontKeys.map((fontName) => (
+      fontOptions,
-        <option key={fontName} value={fontName}>{fontName}</option>
-      )),
     };
   }
 
@@ -59,13 +68,19 @@ export default class Creatify extends Component {
       state,
     } = this;
 
+    const options = [
+      { value: 'chocolate', label: <div><b>Chocolate</b></div> },
+      { value: 'strawberry', label: 'Strawberry' },
+      { value: 'vanilla', label: 'Vanilla' },
+    ];
+
     return (
       <div style={{ flex: 1, display: 'flex' }}>
-        <button onClick={() => this.renderContents()}>Rasterize</button>
+        <div>
-        <canvas ref={me.canvas} width="200" height="200"></canvas>
+          <button onClick={() => this.renderContents()}>Rasterize</button>
-        <select value={state.fontName} onChange={(e) => this.onChangeFont(e)}>
+          <canvas ref={me.canvas} width="200" height="200"></canvas>
-          {state.fontOptions}
+          <Select options={state.fontOptions} onChange={(option) => this.setFont(option.fontName)} />
-        </select>
+        </div>
         <div ref={me.contents} style={{ flex: 1 }}>
           <RichDraggable bounds={state.bounds}>
             <EditableFontface fontFace={FontPresets[state.fontName]} value="Hello from LBRY" />
@@ -75,9 +90,9 @@ export default class Creatify extends Component {
     );
   }
 
-  onChangeFont(event) {
+  setFont(fontName) {
    this.setState({
-     fontName: event.target.value,
+     fontName,
    });
   }
 };