feat(blocks): Add onTextSelection event to Html.

lowdefy · Oct 5, 2023 · 4f00d5e · 4f00d5e
1 parent ab633e6
commit 4f00d5e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/packages/plugins/blocks/blocks-basic/src/blocks/Html/Html.js b/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}

diff --git a/packages/utils/block-utils/src/HtmlComponent.js b/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}
         />
       );
     }