feat: add renderValue prop

Author: alioguzhan

dist/index.es.js

@@ -996,6 +996,47 @@ export default function App() {
           </div>
         </div>
         {/* ============ End of Example ============ */}
+        <div className="tile is-parent is-vertical is-10" id="render-value">
+          <div className="subtitle">
+            <a href="#edit-on-enter">Customizing Rendered Value</a>
+          </div>
+          <p className="content">
+            You may want to customize the renderd value. You may want to parse
+            it or apply some regular expressions before rendering.
+            <br />
+            You can pass <code>renderValue</code> function prop for this
+            purpose. EdiText will call that function before rendering the value.
+          </p>
+          <div className="columns">
+            <div className="column is-half">
+              <SyntaxHighlighter language="javascript" showLineNumbers={true}>
+                {examples.example25}
+              </SyntaxHighlighter>
+            </div>
+            <div className="column">
+              <div className="subtitle">Output</div>
+              <EdiText
+                value="this the website of the matrix: www.whatisthematrix.com"
+                onSave={handleSave}
+                submitOnEnter
+                editing={true}
+                renderValue={(value) => {
+                  const regexp = /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/gi
+                  const valueWithParsedURLS = value.replace(
+                    regexp,
+                    "<a target='_blank' href='http://$&'>$&</a>"
+                  )
+                  return (
+                    <span
+                      dangerouslySetInnerHTML={{ __html: valueWithParsedURLS }}
+                    />
+                  )
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        {/* ============ End of Example ============ */}
       </div>
       <footer className="footer" style={{ padding: 20 }}>
         <div className="content has-text-centered">

dist/index.es.js.map

@@ -413,3 +413,21 @@ export const example24 = `<input
   tabIndex={8}
 />
 `
+export const example25 = `<EdiText
+  value="Unfortunately, no one can be told what The Matrix is."
+  onSave={handleSave}
+  submitOnEnter
+  renderValue={(value) => {
+    const regexp = /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/gi
+    const valueWithParsedURLS = value.replace(
+      regexp,
+      "<a target='_blank' href='http://$&'>$&</a>"
+    )
+    return (
+      <span
+        dangerouslySetInnerHTML={{ __html: valueWithParsedURLS }}
+      />
+    )
+  }}
+/>
+`

dist/index.js

@@ -1,13 +1,13 @@
-.my-react-header{
-    font-size: 1.2em;
-    border: 1.5px solid #6CDAF7;
-    padding: 5px;
-    border-radius: 5px;
-    background-color: #1F2229;
-    color: #6CDAF7;
+.my-react-header {
+  font-size: 1.2em;
+  border: 1.5px solid #6cdaf7;
+  padding: 5px;
+  border-radius: 5px;
+  background-color: #1f2229;
+  color: #6cdaf7;
 }
 a {
-  color: #1F2229;
+  color: crimson;
 }
 a:hover {
   color: palevioletred;

dist/index.js.map

@@ -193,6 +193,13 @@ declare module 'react-editext' {
      * NOTE: This requires the element to be in focus.
      */
     startEditingOnEnter?: boolean
+    /**
+     * Custom render method for the content in the view mode.
+     * Use this prop to customize the displayed value in view mode.
+     * The return value from this function will be rendered in view mode.
+     * You can return string or JSX. Both are allowed.
+     */
+    renderValue?: (value: any) => any
   }
 
   export default class EdiText extends React.Component<EdiTextProps, any> {

dist/index.min.js

@@ -272,7 +272,8 @@ export default class EdiText extends Component {
       hideIcons,
       buttonsAlign,
       editOnViewClick,
-      showButtonsOnHover
+      showButtonsOnHover,
+      renderValue
     } = this.props
     // calculate edit button classes
     const editButtonDefaultClasses = classnames(
@@ -293,6 +294,10 @@ export default class EdiText extends Component {
     const viewClickHandler = editOnViewClick
       ? this.handleActivateEditMode
       : undefined
+    const value =
+      typeof renderValue === 'function'
+        ? renderValue(this.state.value)
+        : this.state.value
     return (
       <div
         className={viewContainerClass}
@@ -310,7 +315,7 @@ export default class EdiText extends Component {
             onClick={viewClickHandler}
             editext="view"
           >
-            {this.state.value}
+            {value}
           </div>
         )}
         <div className={buttonsContainerClass}>
@@ -335,7 +340,7 @@ export default class EdiText extends Component {
             onClick={viewClickHandler}
             editext={dataAttributes.viewContainer}
           >
-            {this.state.value}
+            {value}
           </div>
         )}
       </div>
@@ -428,5 +433,6 @@ EdiText.propTypes = {
   // from creating duplicate code for both `inputProps` and `viewProps`
   tabIndex: PropTypes.any,
   startEditingOnFocus: PropTypes.bool,
-  startEditingOnEnter: PropTypes.bool
+  startEditingOnEnter: PropTypes.bool,
+  renderValue: PropTypes.func
 }