react2angular issue when binding second directive to the same data object (they control each other values)

Published

This works fine, but whenever i split these 2 components:"Editor" and "EditorToolbar" (in the link i update values same way for both) editor becomes very slow and at the same time nor editor-toolbar works ( this code works fine if i have 1 react component which holds 1 state for both but now i don’t "state" i have to update value in angular so that it works same way i unite these 2 components as 1 holding state inside react(that’s what i’m trying to achieve)

I assume problem is inside link how i assign values to both components

1 week trying and dying to solve this.

Editor

<kmp-note-editor has-toolbar="hasToolbar" ng-model="editorState.content" ng-change="handleDocumentNoteChange()" style="background-color: white; border: solid 1px #D2D6DE;" ng-disabled="(documentNote.status.id_name==='signed' && !enableSignedDocument) || encounterIsClosed"></kmp-note-editor>

Toolbar

<kmp-note-editor-toolbar ng-model="editorState.content" ng-change="handleToolbarChange()" ng-disabled="(documentNote.status.id_name==='signed' && !enableSignedDocument) || encounterIsClosed"></kmp-note-editor-toolbar>

React2Angular code

.directive("kmpNoteEditor", [
    "$timeout",
    ($timeout) => ({
      restrict: "E",
      require: "ngModel",
      template:
        '<kmp-note-editor-with-toolbar-raw attr="1" disabled="disabled" value="viewValue" on-change="handleChange"></kmp-note-editor-with-toolbar-raw>',
      link: {
        pre: (scope, element, attrs, ngModelCtrl) => {
          scope.disabled = attrs.disabled;
          ngModelCtrl.$render = () => {
            render(ngModelCtrl.$viewValue);
          };

          function render(value) {
            scope.viewValue = value;
          }

          scope.handleChange = (change) => {
            console.log("CH");
            console.log(change);
            ngModelCtrl.$setViewValue(change.value);
            /* Anti Pattern!
             * https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Anti-Patterns
             * Fixes bug (part 3): https://vabaco.atlassian.net/browse/EVXBL-7736
             */

            if (mobileAndTabletcheck()) {
              // ngModelCtrl.$setViewValue(change);
              // ngModelCtrl.$render();
            } else {
              if (scope.$$phase) {
                $timeout(function() {
                  fn();
                });
              } else {
                $timeout(function() {
                  scope.$apply(fn);
                });
              }
            }
            function fn() {
              $timeout(function() {
                if (!mobileAndTabletcheck()) {
                  if (
                    change.operations.every(
                      (operation) => operation.type === "set_selection"
                    )
                  ) {
                    // render(change.value);
                  } else {
                    // ngModelCtrl.$setViewValue(change.value);
                    // ngModelCtrl.$render();
                  }
                }
              });
            }
          };

          if (!mobileAndTabletcheck()) {
            ngModelCtrl.$formatters.push((html) => {
              return mobileAndTabletcheck()
                ? html
                : htmlSerializer.deserialize(html || "");
            });

            ngModelCtrl.$parsers.push((value) => {
              return mobileAndTabletcheck()
                ? value
                : htmlSerializer.serialize(value);
            });

            ngModelCtrl.$viewChangeListeners.push(() => {});
          }
        },
      },
    }),
  ])

React code

import htmlSerializer from "@components/NoteEditor/htmlSerializer";
import * as React from "react";
import NoteEditor from "../NoteEditor";
import NoteEditorToolbar from "../NoteEditorToolbar";

interface NoteEditorWithToolbarProps {
  value: Object | string;
  onChange?: (Object) => void;
  disabled?: boolean;
  hasToolbar:boolean;
}
const createDOMPurify = require("dompurify");
const DOMPurify = createDOMPurify(window);
interface NoteEditorWithToolbarState {}

const NoteEditorWithToolbar = (props:NoteEditorWithToolbarProps) => {
  const [value, setValue] = React.useState(props.value);
  
  console.log(props)
  React.useEffect(() => {
    setValue(props?.value);
    console.log("sss")
  }, [props.value]);
  const changeHandler = (event) => {
    if (!event.operations.some((operation) => operation.type === "set_value")) {
      setValue(event.value);
      props.onChange(event);
    }
  };
  return (
    <div className="kmp__NoteEditorWithToolbar" id="kmp__NoteEditorWithToolbar">
      {props.hasToolbar && (
        <NoteEditorToolbar
          value={value}
          onChange={changeHandler}
          disabled={props.disabled}
        />
      )}

      <NoteEditor
        value={value}
        onChange={changeHandler}
        disabled={props.disabled}
      />
    </div>
  );
};
export default NoteEditorWithToolbar;

Source: AngularJS Questions

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq