redhotmagma-graphics-editor 1.35.8 → 1.36.0

package/Components/SelectionToolbox/TextTools.js

@@ -242,7 +242,8 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
           fullTextCommandList = renderObj.fullTextCommandList,
           autoFocusWhenMounted = renderObj.autoFocusWhenMounted,
           canvas = renderObj.canvas,
-          textEditorElementProps = renderObj.textEditorElementProps;
+          textEditorElementProps = renderObj.textEditorElementProps,
+          disableLinebreaks = renderObj.disableLinebreaks;
       var selectedCanvasObject = canvas.selectedObject;
       var explicitStyleParams = selectedCanvasObject ? selectedCanvasObject.getExplicitStyleParams() : {};
       var renderTextEditor = _this.props.renderTextEditor;
@@ -266,7 +267,8 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
         fullTextCommandList: fullTextCommandList,
         autoFocusWhenMounted: autoFocusWhenMounted,
         explicitStyleParams: explicitStyleParams,
-        elementProps: textEditorElementProps
+        elementProps: textEditorElementProps,
+        disableLinebreaks: disableLinebreaks
       });
     });
 

package/Components/TextEditor/TextEditor.js

@@ -176,8 +176,14 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (evt) {
-      // prevent direct line-breaks
+      var disableLinebreaks = _this.props.disableLinebreaks;
+
+      if (disableLinebreaks && evt.keyCode === 13) {
+        evt.preventDefault();
+      } // prevent direct line-breaks
       // it inserts a <br> tag which can lead to wrong structure
+
+
       if (evt.keyCode === 13 && evt.shiftKey) {
         evt.preventDefault();
       } else if (evt.keyCode === 66 && evt.ctrlKey) {
@@ -202,7 +208,8 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
       setTimeout(function () {
         var container = _this.contentRef.current;
         var defaultStyle = (0, _get["default"])(_this.props, 'textEditorState.defaultStyle', {});
-        (0, _DOM.updatePastedTextNode)(container);
+        var disableLinebreaks = _this.props.disableLinebreaks;
+        (0, _DOM.updatePastedTextNode)(container, disableLinebreaks);
 
         var divs = _toConsumableArray(container.childNodes);
 
@@ -452,7 +459,8 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps) {
       var _this$props4 = this.props,
           content = _this$props4.content,
-          defaultStyle = _this$props4.textEditorState.defaultStyle;
+          defaultStyle = _this$props4.textEditorState.defaultStyle,
+          disableLinebreaks = _this$props4.disableLinebreaks;
 
       if (content && content !== prevProps.content) {
         this.setState({
@@ -465,6 +473,10 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
       if (defaultStyle !== prevProps.textEditorState.defaultStyle) {
         this.updateContent();
       }
+
+      if (disableLinebreaks && disableLinebreaks !== prevProps.disableLinebreaks) {
+        (0, _DOM.removeLinebreaks)(this.contentRef.current);
+      }
     }
   }, {
     key: "wrapSingleTextNodeWithStyle",
@@ -584,7 +596,8 @@ var TextEditor = /*#__PURE__*/function (_React$Component) {
 exports.TextEditor = TextEditor;
 
 _defineProperty(TextEditor, "defaultProps", {
-  autoFocusWhenMounted: true
+  autoFocusWhenMounted: true,
+  disableLinebreaks: false
 });
 
 var _default = (0, _TextEditorStateProvider.withTextEditorState)(TextEditor);

package/Utils/DOM.js

@@ -10,7 +10,7 @@ exports.getFirstEndNode = getFirstEndNode;
 exports.getLastEndNode = getLastEndNode;
 exports.getNextNode = getNextNode;
 exports.fixContentEditableDOM = fixContentEditableDOM;
-exports.traverse = exports.updateTextWrapper = exports.updatePastedTextNode = exports.placeCaretAtEnd = exports.getClosestAttribute = void 0;
+exports.traverse = exports.updateTextWrapper = exports.removeLinebreaks = exports.updatePastedTextNode = exports.placeCaretAtEnd = exports.getClosestAttribute = void 0;
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
@@ -120,55 +120,80 @@ var placeCaretAtEnd = function placeCaretAtEnd(el) {
 
 exports.placeCaretAtEnd = placeCaretAtEnd;
 
-var updatePastedTextNode = function updatePastedTextNode(rootNode) {
+var updatePastedTextNode = function updatePastedTextNode(rootNode, disableLinebreaks) {
   var divs = rootNode.childNodes;
 
-  var _iterator = _createForOfIteratorHelper(divs),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var child = _step.value;
-      // get the text nodes and wrap it in Div and span in order to apply styles
-      var text = child.textContent || '';
-
-      if (child.nodeType === Node.TEXT_NODE) {
-        if ((text.match(/\n/g) || []).length) {
-          // To support multi line
-          var textElements = text.split('\n');
-
-          var _iterator2 = _createForOfIteratorHelper(textElements),
-              _step2;
-
-          try {
-            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-              var element = _step2.value;
-              var textWrapper = document.createElement('span');
-              var wrapperDiv = document.createElement('div');
-              textWrapper.innerText = element.trim();
-              wrapperDiv.appendChild(textWrapper);
-              child.parentNode && child.parentNode.insertBefore(wrapperDiv, child);
-              placeCaretAtEnd(textWrapper);
+  if (disableLinebreaks) {
+    removeLinebreaks(rootNode);
+  } else {
+    var _iterator = _createForOfIteratorHelper(divs),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        // get the text nodes and wrap it in Div and span in order to apply styles
+        var text = child.textContent || '';
+
+        if (child.nodeType === Node.TEXT_NODE) {
+          if ((text.match(/\n/g) || []).length) {
+            // To support multi line
+            var textElements = text.split('\n');
+
+            var _iterator2 = _createForOfIteratorHelper(textElements),
+                _step2;
+
+            try {
+              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                var element = _step2.value;
+                var textWrapper = document.createElement('span');
+                var wrapperDiv = document.createElement('div');
+                textWrapper.innerText = element.trim();
+                wrapperDiv.appendChild(textWrapper);
+                child.parentNode && child.parentNode.insertBefore(wrapperDiv, child);
+                placeCaretAtEnd(textWrapper);
+              }
+            } catch (err) {
+              _iterator2.e(err);
+            } finally {
+              _iterator2.f();
             }
-          } catch (err) {
-            _iterator2.e(err);
-          } finally {
-            _iterator2.f();
+          } else {
+            updateTextWrapper(child);
           }
-        } else {
-          updateTextWrapper(child);
         }
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
   }
 };
 
 exports.updatePastedTextNode = updatePastedTextNode;
 
+var removeLinebreaks = function removeLinebreaks(rootNode) {
+  var divs = rootNode.childNodes;
+  divs.forEach(function (child, key) {
+    if (key !== 0) {
+      if (rootNode.firstChild) {
+        var parentText = rootNode.firstChild.textContent || '';
+        var childText = child.textContent || '';
+        rootNode.firstChild.textContent = "".concat(parentText, " ").concat(childText);
+      }
+
+      rootNode.removeChild(child);
+    }
+  });
+
+  if (rootNode && rootNode.textContent) {
+    rootNode.textContent = rootNode.textContent.split('\n').join(' ');
+  }
+};
+
+exports.removeLinebreaks = removeLinebreaks;
+
 var updateTextWrapper = function updateTextWrapper(child) {
   var textWrapper = document.createElement('span');
   var wrapperDiv = document.createElement('div');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redhotmagma-graphics-editor",
-  "version": "1.35.8",
+  "version": "1.36.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",

package/src/Components/SelectionToolbox/TextTools.js

@@ -289,6 +289,7 @@ export class TextTools extends React.Component {
       autoFocusWhenMounted,
       canvas,
       textEditorElementProps,
+      disableLinebreaks,
     } = renderObj;
     const { selectedObject: selectedCanvasObject } = canvas;
     const explicitStyleParams = selectedCanvasObject ? selectedCanvasObject.getExplicitStyleParams() : {};
@@ -314,6 +315,7 @@ export class TextTools extends React.Component {
         autoFocusWhenMounted={autoFocusWhenMounted}
         explicitStyleParams={explicitStyleParams}
         elementProps={textEditorElementProps}
+        disableLinebreaks={disableLinebreaks}
       />
     );
   };

package/src/Components/TextEditor/TextEditor.js

@@ -6,6 +6,7 @@ import {
   getFirstEndNode,
   updatePastedTextNode,
   placeCaretAtEnd,
+  removeLinebreaks,
 } from '../../Utils/DOM';
 import { getNodesInRange, selectAll } from '../../Utils/Range';
 import { withTextEditorState } from './TextEditorStateProvider';
@@ -13,6 +14,7 @@ import { withTextEditorState } from './TextEditorStateProvider';
 export class TextEditor extends React.Component {
   static defaultProps = {
     autoFocusWhenMounted: true,
+    disableLinebreaks: false,
   };
 
   state = {
@@ -69,6 +71,7 @@ export class TextEditor extends React.Component {
     const {
       content,
       textEditorState: { defaultStyle },
+      disableLinebreaks,
     } = this.props;
     if (content && content !== prevProps.content) {
       this.setState({
@@ -80,6 +83,9 @@ export class TextEditor extends React.Component {
     if (defaultStyle !== prevProps.textEditorState.defaultStyle) {
       this.updateContent();
     }
+    if (disableLinebreaks && disableLinebreaks !== prevProps.disableLinebreaks) {
+      removeLinebreaks(this.contentRef.current);
+    }
   }
 
   selectionChangeListener = () => {
@@ -243,6 +249,10 @@ export class TextEditor extends React.Component {
   };
 
   onKeyDown = evt => {
+    const { disableLinebreaks } = this.props;
+    if (disableLinebreaks && evt.keyCode === 13) {
+      evt.preventDefault();
+    }
     // prevent direct line-breaks
     // it inserts a <br> tag which can lead to wrong structure
     if (evt.keyCode === 13 && evt.shiftKey) {
@@ -267,7 +277,8 @@ export class TextEditor extends React.Component {
     setTimeout(() => {
       const container = this.contentRef.current;
       const defaultStyle = get(this.props, 'textEditorState.defaultStyle', {});
-      updatePastedTextNode(container);
+      const { disableLinebreaks } = this.props;
+      updatePastedTextNode(container, disableLinebreaks);
       const divs = [...container.childNodes];
       divs.forEach(div => {
         div.dataset && this.setNodeData(div, 'color', defaultStyle.color.identifier);

package/src/Utils/DOM.ts

@@ -88,30 +88,52 @@ export const placeCaretAtEnd = (el: HTMLElement) => {
   }
 };
 
-export const updatePastedTextNode = (rootNode: HTMLElement) => {
+export const updatePastedTextNode = (rootNode: HTMLElement, disableLinebreaks: boolean) => {
   const divs = rootNode.childNodes;
-  for (const child of divs) {
-    // get the text nodes and wrap it in Div and span in order to apply styles
-    const text = child.textContent || '';
-    if (child.nodeType === Node.TEXT_NODE) {
-      if ((text.match(/\n/g) || []).length) {
-        // To support multi line
-        const textElements = text.split('\n');
-        for (const element of textElements) {
-          const textWrapper = document.createElement('span');
-          const wrapperDiv = document.createElement('div');
-          textWrapper.innerText = element.trim();
-          wrapperDiv.appendChild(textWrapper);
-          child.parentNode && child.parentNode.insertBefore(wrapperDiv, child);
-          placeCaretAtEnd(textWrapper);
+  if (disableLinebreaks) {
+    removeLinebreaks(rootNode);
+  } else {
+    for (const child of divs) {
+      // get the text nodes and wrap it in Div and span in order to apply styles
+      const text = child.textContent || '';
+      if (child.nodeType === Node.TEXT_NODE) {
+        if ((text.match(/\n/g) || []).length) {
+          // To support multi line
+          const textElements = text.split('\n');
+          for (const element of textElements) {
+            const textWrapper = document.createElement('span');
+            const wrapperDiv = document.createElement('div');
+            textWrapper.innerText = element.trim();
+            wrapperDiv.appendChild(textWrapper);
+            child.parentNode && child.parentNode.insertBefore(wrapperDiv, child);
+            placeCaretAtEnd(textWrapper);
+          }
+        } else {
+          updateTextWrapper(child);
         }
-      } else {
-        updateTextWrapper(child);
       }
     }
   }
 };
 
+export const removeLinebreaks = (rootNode: HTMLElement) => {
+  const divs = rootNode.childNodes;
+  divs.forEach((child, key) => {
+    if (key !== 0) {
+      if (rootNode.firstChild) {
+        const parentText = rootNode.firstChild.textContent || '';
+        const childText = child.textContent || '';
+        rootNode.firstChild.textContent = `${parentText} ${childText}`;
+      }
+      rootNode.removeChild(child);
+    }
+  });
+
+  if (rootNode && rootNode.textContent) {
+    rootNode.textContent = rootNode.textContent.split('\n').join(' ');
+  }
+};
+
 export const updateTextWrapper = (child: ChildNode) => {
   const textWrapper = document.createElement('span');
   const wrapperDiv = document.createElement('div');