Merge pull request #1684 from lowdefy/html-ontextselection-event

feat(blocks): Add onTextSelection event to Html.

packages/plugins/blocks/blocks-antd/src/blocks/Paragraph/Paragraph.js

@@ -101,7 +101,7 @@ const ParagraphBlock = ({ blockId, components: { Icon }, events, methods, proper
     type={properties.type}
     underline={properties.underline}
   >
-    {renderHtml({ html: properties.content, methods })}
+    {renderHtml({ html: properties.content, events, methods })}
   </Paragraph>
 );
 

packages/plugins/blocks/blocks-antd/src/blocks/Paragraph/schema.json

@@ -125,6 +125,10 @@
       "onCopy": {
         "type": "array",
         "description": "Trigger action when copy text is clicked."
+      },
+      "onTextSelection": {
+        "type": "array",
+        "description": "Trigger action when text is selected and pass selected text to the event object."
       }
     }
   }

packages/plugins/blocks/blocks-basic/src/blocks/Html/Html.js

@@ -17,9 +17,10 @@
 import React from 'react';
 import { blockDefaultProps, HtmlComponent } from '@lowdefy/block-utils';
 
-const HtmlBlock = ({ blockId, properties, methods }) => (
+const HtmlBlock = ({ blockId, events, properties, methods }) => (
   <HtmlComponent
     div={true}
+    events={events}
     html={properties.html}
     id={blockId}
     methods={methods}

packages/plugins/blocks/blocks-basic/src/blocks/Html/schema.json

@@ -19,5 +19,15 @@
         }
       }
     }
+  },
+  "events": {
+    "type": "object",
+    "additionalProperties": false,
+    "properties": {
+      "onTextSelection": {
+        "type": "array",
+        "description": "Trigger action when text is selected and pass selected text to the event object."
+      }
+    }
   }
 }

packages/utils/block-utils/src/HtmlComponent.js

@@ -24,6 +24,7 @@ class HtmlComponent extends React.Component {
     this.div = {
       innerHTML: '',
     };
+    this.onTextSelection = this.onTextSelection.bind(this);
   }
 
   componentDidMount() {
@@ -36,6 +37,19 @@ class HtmlComponent extends React.Component {
     this.div.innerHTML = DOMPurify.sanitize(htmlString);
   }
 
+  onTextSelection() {
+    if (this.props.events?.onTextSelection) {
+      const selection = window.getSelection().toString();
+      if (selection !== '') {
+        this.props.methods.triggerEvent({
+          name: 'onTextSelection',
+          event: {
+            selection: selection,
+          },
+        });
+      }
+    }
+  }
   render() {
     const { div, id, methods, style } = this.props;
     if (div === true) {
@@ -49,6 +63,7 @@ class HtmlComponent extends React.Component {
             }
           }}
           className={methods.makeCssClass(style)}
+          onMouseUp={this.onTextSelection}
         />
       );
     }
@@ -62,6 +77,7 @@ class HtmlComponent extends React.Component {
           }
         }}
         className={methods.makeCssClass(style)}
+        onMouseUp={this.onTextSelection}
       />
     );
   }

packages/utils/block-utils/src/renderHtml.js

@@ -19,9 +19,9 @@ import { type } from '@lowdefy/helpers';
 
 import HtmlComponent from './HtmlComponent.js';
 
-const renderHtml = ({ div, html, id, methods, style }) =>
+const renderHtml = ({ div, events, html, id, methods, style }) =>
   type.isNone(html) ? undefined : (
-    <HtmlComponent div={div} html={html} id={id} methods={methods} style={style} />
+    <HtmlComponent div={div} events={events} html={html} id={id} methods={methods} style={style} />
   );
 
 export default renderHtml;