@agilemotion/oui-react-js 1.8.57 → 1.8.59

package/dist/components/WordDocumentViewer.js

@@ -16,7 +16,7 @@ var _LottieIcon = _interopRequireDefault(require("./LottieIcon"));
 require("./WordDocumentViewer.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const KEY = exports.KEY = 'ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5adkJiWHtWdXBXT2Je';
+const KEY = exports.KEY = 'Ngo9BigBOggjHTQxAR8/V1JGaF5cXGpCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdlWX5ceHVRQ2BYUUdwX0NWYEs=';
 (0, _ej2Base.registerLicense)(KEY);
 const DOCSVC = exports.DOCSVC = "https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/";
 _ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
@@ -73,90 +73,24 @@ function applyLevel(ed) {
   ed.selection.paragraphFormat.listLevelNumber = depth;
   ed.applyNumbering(LEVEL_FMT[depth], 'Arabic');
 }
-const ANCHOR_REGEX = /\[\[(.*?)\]\]/g;
 const WordDocumentViewer = props => {
   const [container, setContainer] = _react.default.useState(null);
   const [items, setItems] = _react.default.useState(null);
-  const [height, setHeight] = _react.default.useState(0);
-  const [width, setWidth] = _react.default.useState(0);
   const [visible, setVisible] = _react.default.useState(true);
   const [reRendering, setReRendering] = _react.default.useState(false);
   const [json, setJson] = _react.default.useState(null);
   const [errorMessage, setErrorMessage] = _react.default.useState(null);
-  const restrictedRangesRef = (0, _react.useRef)([]);
+  const currentText = _react.default.useRef(null);
+  const activeAnchorRef = (0, _react.useRef)(null);
+  const anchorEnd = (0, _react.useRef)(false);
+  const deleteLockRef = (0, _react.useRef)(false);
+  const loading = (0, _react.useRef)(true);
   const ref = useOnFullyVisible(el => {
-    //console.log('Document fully visible & rendered:', el);
     if (!reRendering) {
       setVisible(false);
       setReRendering(true);
     }
   });
-  function extractDocumentText() {
-    const doc = container.documentEditor;
-    doc.selection.selectAll();
-    const text = doc.selection.getText();
-    doc.selection.clear();
-    return text;
-  }
-  function extractAnchorTokens(text) {
-    const tokens = new Set();
-    let match;
-    while ((match = ANCHOR_REGEX.exec(text)) !== null) {
-      tokens.add(match[0]); // exact token string
-    }
-    return Array.from(tokens);
-  }
-  function locateTokenRanges(token) {
-    var _search$searchResults;
-    const doc = container.documentEditor;
-    const search = doc.search;
-    const ranges = [];
-    search.find(token);
-    const results = (_search$searchResults = search.searchResults) === null || _search$searchResults === void 0 || (_search$searchResults = _search$searchResults.searchModule) === null || _search$searchResults === void 0 || (_search$searchResults = _search$searchResults.textSearchResults) === null || _search$searchResults === void 0 ? void 0 : _search$searchResults.innerList;
-    if (!results || results.length === 0) {
-      search.clear();
-      return ranges;
-    }
-    for (let i = 0; i < results.length; i++) {
-      const res = results[i];
-      ranges.push({
-        token,
-        start: res.startIn,
-        // ✅ SAFE
-        end: res.endIn // ✅ SAFE
-      });
-    }
-    doc.selection.clear();
-    return ranges;
-  }
-  function rebuildRestrictedRanges() {
-    if (!(container !== null && container !== void 0 && container.documentEditor)) return;
-    const text = extractDocumentText();
-    const tokens = extractAnchorTokens(text);
-    restrictedRangesRef.current = [];
-    tokens.forEach(token => {
-      const ranges = locateTokenRanges(token);
-      ranges.forEach(r => {
-        restrictedRangesRef.current.push({
-          id: 'rehydrated-' + restrictedRangesRef.current.length,
-          token: r.token,
-          start: r.start,
-          end: r.end
-        });
-      });
-    });
-  }
-
-  /*let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', '|', 'CreateLink', '|',
-      {
-          template: '' +
-              '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar"  style="width:100%"><div class="e-tbar-btn-text" style="font-weight: normal; font-size: inherit;"> Placeholders</div></button>',
-          undo: true,
-          click: onClick.bind(this),
-          tooltipText: 'Insert Placeholders'
-      }, '|', 'Undo', 'Redo'
-  ];*/
-
   function isPointInsideElement(x, y, el) {
     if (!el) return false;
     const rect = el.getBoundingClientRect();
@@ -165,76 +99,40 @@ const WordDocumentViewer = props => {
   function getViewerElement() {
     return document.getElementById("".concat(props.id, "-container_editor_viewerContainer"));
   }
-  function moveCaretToDropPoint(dropPosition) {
-    const viewer = getViewerElement();
-    if (!viewer) return false;
-
-    // Ensure it's inside the viewer
-    if (!isPointInsideElement(dropPosition.x, dropPosition.y, viewer)) return false;
-
-    // Focus editor first
-    container.documentEditor.focusIn();
-
-    // IMPORTANT: click the actual element under the pointer (not just viewer)
-    const target = document.elementFromPoint(dropPosition.x, dropPosition.y) || viewer;
-    const down = new MouseEvent("mousedown", {
-      bubbles: true,
-      cancelable: true,
-      clientX: dropPosition.x,
-      clientY: dropPosition.y,
-      buttons: 1
-    });
-    const up = new MouseEvent("mouseup", {
-      bubbles: true,
-      cancelable: true,
-      clientX: dropPosition.x,
-      clientY: dropPosition.y
-    });
-    const click = new MouseEvent("click", {
-      bubbles: true,
-      cancelable: true,
-      clientX: dropPosition.x,
-      clientY: dropPosition.y
-    });
-    target.dispatchEvent(down);
-    target.dispatchEvent(up);
-    target.dispatchEvent(click);
-    return true;
+  function isNavigationKey(e) {
+    return ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(e.key);
+  }
+  function normalizeAnchor(value) {
+    if (!value) return null;
+    return value.replace(/^\[\[|\]\]$/g, '').replace(/^<<|>>$/g, '');
   }
+  let viewerElement = getViewerElement();
   function insertReadonlyAnchor(eventData, dropPosition) {
     if (!(container !== null && container !== void 0 && container.documentEditor)) return;
     if (!dropPosition) return;
-
-    //const moved = moveCaretToDropPoint(dropPosition);
-    //if (!moved) return; // drop wasn't inside this document
-
-    const viewer = getViewerElement();
-    if (!isPointInsideElement(dropPosition.x, dropPosition.y, viewer)) {
+    if (!isPointInsideElement(dropPosition.x, dropPosition.y, viewerElement)) {
       // Drop did not happen inside this document
+      //console.log("DROP NOT INSIDE THIS DOCUMENT : ", dropPosition);
       return;
     }
     const doc = container.documentEditor;
     const ed = doc.editor;
     const sel = doc.selection;
     if (!ed || !sel) return;
-    const start = sel.start.clone();
-    const token = "[[".concat(eventData, "]]");
+    const token = "[[".concat(normalizeAnchor(eventData), "]]");
     ed.insertText(token);
-    const end = sel.end.clone();
-    restrictedRangesRef.current.push({
-      id: 'anchor-' + Date.now(),
-      start,
-      end,
-      token
-    });
   }
+  const dropData = _react.default.useRef(null);
   const api = () => {
     return {
       getValue: () => {
         return saveAsBase64();
       },
-      insertReadonlyAnchor: (value, dropPosition) => {
-        insertReadonlyAnchor(value, dropPosition);
+      insertReadonlyAnchor: async (value, dropPosition) => {
+        dropData.current = {
+          value,
+          dropPosition
+        };
       }
     };
   };
@@ -256,86 +154,6 @@ const WordDocumentViewer = props => {
     id: 'clear',
     text: 'Clear list'
   }];
-  const onNumberingSelect = args => {
-    var _containerRef$current;
-    const ed = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || (_containerRef$current = _containerRef$current.documentEditor) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.editor;
-    if (!ed) return;
-    switch (args.item.id) {
-      case 'lvl-0':
-        applyLevel(ed, 0);
-        break;
-      case 'lvl-1':
-        applyLevel(ed, 1);
-        break;
-      case 'lvl-2':
-        applyLevel(ed, 2);
-        break;
-      case 'clear':
-        ed.clearList();
-        break;
-      default:
-        break;
-    }
-  };
-  const onCreated = () => {
-    var _container$toolbarMod;
-    const container = containerRef.current;
-    const tb = container === null || container === void 0 || (_container$toolbarMod = container.toolbarModule) === null || _container$toolbarMod === void 0 ? void 0 : _container$toolbarMod.toolbar; // EJ2 Toolbar instance
-    if (!tb) return;
-
-    // 1) Add a placeholder button into the toolbar at the end
-    tb.addItems([{
-      type: 'Separator'
-    }, {
-      // Use a real HTML template (string) and give it an id
-      template: '<button id="numbering-ddb" class="e-btn e-flat" type="button">Numbering</button>',
-      tooltipText: 'Numbering styles'
-    }], tb.items.length);
-
-    // 2) Turn that placeholder into a functioning DropDownButton
-    const ddb = new DropDownButton({
-      content: 'Numbering',
-      cssClass: 'e-flat',
-      items: [{
-        id: 'lvl-0',
-        text: '1.'
-      }, {
-        id: 'lvl-1',
-        text: '1.1'
-      }, {
-        id: 'lvl-2',
-        text: '1.1.1'
-      }, {
-        separator: true
-      }, {
-        id: 'clear',
-        text: 'Clear list'
-      }],
-      select: args => {
-        const ed = container.documentEditor.editor;
-        if (!ed) return;
-        switch (args.item.id) {
-          case 'lvl-0':
-            applyLevel(ed, 0);
-            break;
-          case 'lvl-1':
-            applyLevel(ed, 1);
-            break;
-          case 'lvl-2':
-            applyLevel(ed, 2);
-            break;
-          case 'clear':
-            ed.clearList();
-            break;
-          default:
-            break;
-        }
-      }
-    }, '#numbering-ddb');
-
-    // (optional) keep a ref if you want to dispose on unmount
-    container._numberingDDB = ddb;
-  };
   _react.default.useEffect(() => {
     let toolbarItems = props.commentsOnly ? ["Comments"] : ["Undo", "Redo", "Separator", {
       id: 'bullets',
@@ -403,11 +221,173 @@ const WordDocumentViewer = props => {
       });
     }
   };
-  function selectionOverlapsRange(selection, range) {
-    const selStart = selection.start;
-    const selEnd = selection.end;
-    if (selStart.location.yIn !== range.start.location.yIn) return false;
-    return !(selEnd.location.xIn < range.start.location.xIn || selStart.location.xIn > range.end.location.xIn);
+  function extractDocumentText(editor) {
+    if (currentText.current) return currentText.current;
+    const originalStart = selection.startOffset;
+    const originalEnd = selection.endOffset;
+    editor.selection.selectAll();
+    const text = editor.selection.getText();
+    editor.selection.select(originalStart, originalEnd);
+    currentText.current = text;
+    return text;
+  }
+  function extractAnchorTokens(text) {
+    const regex = /\[\[[^\[\]]+?\]\]/g;
+    const tokens = new Set();
+    let match;
+    while ((match = regex.exec(text)) !== null) {
+      tokens.add(match[0]); // exact [[TEXT]]
+    }
+    return Array.from(tokens);
+  }
+  function isCaretWithinRange(caret, start, end) {
+    if (caret.paragraph !== start.paragraph) return false;
+    const x = caret.location.xIn;
+    const y = caret.location.yIn;
+
+    //console.log("CHECKING CARET WITHIN RANGE : ", x, y, start.location.xIn, start.location.yIn, end.location.xIn, end.location.yIn);
+    return y === start.location.yIn && x >= start.location.xIn && x <= end.location.xIn;
+  }
+  function deleteCurrentAnchor(container) {
+    const editor = container === null || container === void 0 ? void 0 : container.documentEditor;
+    const selection = editor === null || editor === void 0 ? void 0 : editor.selection;
+    const docEditor = editor === null || editor === void 0 ? void 0 : editor.editor;
+    const anchor = activeAnchorRef.current;
+    if (!editor || !selection || !docEditor || !anchor) return;
+
+    //console.log("END OFFSET : ", anchor.endOffset, bumpOffset(anchor.endOffset, -1))
+    //console.log("START - END : ", anchor.startOffset, bumpOffset(anchor.endOffset, -1));
+    try {
+      selection.select(anchor.startOffset, anchor.endOffset);
+      //console.log("SELECTION TEXT : " + selection.text);
+      //docEditor.delete();
+      //selection.select(anchor.startOffset, anchor.startOffset);
+    } finally {
+      activeAnchorRef.current = null;
+      updateActiveAnchor(container);
+    }
+  }
+  function updateActiveAnchor(container) {
+    activeAnchorRef.current = grabAnchorWithBounds(container);
+  }
+  function scanRightUntilAnchor(editor, originOffset) {
+    let maxScan = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 500;
+    const sel = editor.selection;
+    let current = originOffset;
+    for (let i = 0; i < maxScan; i++) {
+      // move right
+      current = bumpOffset(current, +1);
+      sel.select(current, current);
+
+      // select ONE character only
+      sel.select(current, bumpOffset(current, +1));
+      const ch = sel.text;
+
+      // ⛔ Bail on whitespace or paragraph break
+      if (!ch || /\s/.test(ch)) return null;
+
+      // Detect closing "]]"
+      if (ch === ']') {
+        // lookahead one char
+        const next = bumpOffset(current, +1);
+        sel.select(next, bumpOffset(next, +1));
+        if (sel.text === ']') {
+          // return position AFTER ]]
+          return bumpOffset(current, +2);
+        }
+      }
+    }
+    return null;
+  }
+  function scanLeftUntilAnchor(editor, originOffset) {
+    let maxScan = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 500;
+    const sel = editor.selection;
+    let current = originOffset;
+    for (let i = 0; i < maxScan; i++) {
+      current = bumpOffset(current, -1);
+
+      // select one char to the left
+      sel.select(bumpOffset(current, -1), current);
+      const ch = sel.text;
+      if (!ch || /\s/.test(ch)) return null;
+
+      // detect [[
+      if (ch === '[') {
+        const prev = bumpOffset(current, -1);
+        sel.select(bumpOffset(prev, -1), prev);
+        if (sel.text === '[') {
+          // 🔑 FIX: go back TWO chars
+          return bumpOffset(current, -2);
+        }
+      }
+    }
+    return null;
+  }
+  function getCharAt(editor, offset) {
+    const sel = editor.selection;
+    sel.select(offset, bumpOffset(offset, +1));
+    return sel.text || null;
+  }
+  function isCaretImmediatelyBeforeAnchorStart(editor, offset) {
+    const c0 = getCharAt(editor, offset);
+    const c1 = getCharAt(editor, bumpOffset(offset, +1));
+    return c0 === '[' && c1 === '['; // |[[TEXT]]
+  }
+  function isCaretImmediatelyAfterAnchor(editor, offset) {
+    return getCharAt(editor, bumpOffset(offset, -1)) === ']' && getCharAt(editor, bumpOffset(offset, -2)) === ']';
+  }
+  function grabAnchorWithBounds(container) {
+    const editor = container === null || container === void 0 ? void 0 : container.documentEditor;
+    const selection = editor === null || editor === void 0 ? void 0 : editor.selection;
+    const originalStart = selection.startOffset;
+    const originalEnd = selection.endOffset;
+    selection.selectCurrentWord();
+    selection.select(originalStart, originalEnd);
+
+    //let word = selection.text;
+    //console.log("grabAnchorWithBounds SELECTION TEXT : ", word);
+
+    let scanStart = originalStart;
+    try {
+      if (isCaretImmediatelyBeforeAnchorStart(editor, originalStart)) {
+        return null;
+      }
+      let isCaretAtEnd = isCaretImmediatelyAfterAnchor(editor, originalStart);
+      if (isCaretAtEnd) {
+        //console.log("CARET AT END");
+        scanStart = bumpOffset(originalStart, -3);
+      }
+      const left = scanLeftUntilAnchor(editor, scanStart);
+      const right = scanRightUntilAnchor(editor, scanStart);
+      if (left && right) {
+        selection.select(left, right);
+        const text = selection.text;
+        anchorEnd.current = isCaretAtEnd;
+
+        /*console.log("GRAB RESULT : ", {
+            token: text,
+            startOffset: left,
+            endOffset: right
+        });*/
+
+        if (/^\[\[.+?\]\]$/.test(text)) {
+          return {
+            token: text,
+            startOffset: left,
+            endOffset: right
+          };
+        }
+      }
+    } finally {
+      selection.select(originalStart, originalEnd);
+    }
+  }
+  function bumpOffset(offset, delta) {
+    const parts = offset.split(';');
+    const idx = parts.length - 1;
+    const value = Math.max(0, parseInt(parts[idx], 10) + delta);
+    parts[idx] = value.toString();
+    return parts.join(';');
   }
   _react.default.useEffect(() => {
     if (container) {
@@ -415,64 +395,109 @@ const WordDocumentViewer = props => {
       //autoSave();
 
       const editor = container.documentEditor;
-      const onKeyDown = args => {
-        const selection = editor.selection;
-        if (!selection) return;
-        const insideRestricted = restrictedRangesRef.current.some(range => selectionOverlapsRange(selection, range));
-        if (insideRestricted) {
-          const e = args.event;
-          if (e.key === 'Backspace' || e.key === 'Delete') {
-            e.preventDefault();
-            e.stopPropagation();
-            const range = restrictedRangesRef.current.find(r => selectionOverlapsRange(selection, r));
-            if (range) {
-              // Select only the anchor range
-              selection.selectRange(range.start, range.end);
+      editor.addEventListener('keyDown', args => {
+        const e = args.event;
 
-              // Delete selection safely
-              editor.editor.delete();
+        // 1️⃣ Navigation keys → inspect only
+        if (isNavigationKey(e)) {
+          requestAnimationFrame(() => {
+            updateActiveAnchor(container);
+            //console.log("ACTIVE ANCHOR : ", activeAnchorRef.current);
+          });
+          return;
+        }
 
-              // Remove range from registry
-              restrictedRangesRef.current = restrictedRangesRef.current.filter(r => r !== range);
-            }
+        //console.log("DELETE LOCKED : ", deleteLockRef.current);
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+          if (deleteLockRef.current) {
+            // Syncfusion already deleted → rewind safely
+            editor.editorHistory.undo();
+            e.preventDefault();
+            e.stopPropagation();
             return;
           }
 
-          // Block typing / paste
-          if (e.key.length === 1 || e.ctrlKey || e.metaKey) {
+          // Acquire lock
+          deleteLockRef.current = true;
+
+          // Release lock when editor is actually stable
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              deleteLockRef.current = false;
+            });
+          });
+        }
+
+        // 2️⃣ If we are inside a restricted anchor
+        //console.log("anchorEnd.current : ", anchorEnd.current, activeAnchorRef.current);
+        if (activeAnchorRef.current && !isNavigationKey(e) || anchorEnd.current) {
+          // Delete / Backspace = delete whole anchor
+          if (e.key === 'Backspace' || e.key === 'Delete') {
+            //editor.editorHistory.undo();
             e.preventDefault();
             e.stopPropagation();
+            deleteCurrentAnchor(container, activeAnchorRef.current);
+            activeAnchorRef.current = null;
+            anchorEnd.current = false;
+            deleteLockRef.current = false;
+            return;
           }
-        }
-      };
-      editor.addEventListener('keyDown', onKeyDown);
-      editor.addEventListener('contentChange', () => {
-        const sfdt = editor.serialize();
-        for (const range of restrictedRangesRef.current) {
-          if (!sfdt.includes(range.token)) {
-            editor.editorHistory.undo();
-            break;
+
+          // We do not want to block when we are at the end of an anchor. Input will never damage the anchor
+          //console.log("UNBLOCKING : ", anchorEnd.current, activeAnchorRef.current);
+          if (!anchorEnd.current) {
+            // 🔒 Block typing & paste
+            if (e.key.length === 1 ||
+            // printable char
+            e.ctrlKey || e.metaKey) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          } else {
+            activeAnchorRef.current = null;
           }
+          anchorEnd.current = false;
+        }
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+          requestAnimationFrame(() => {
+            updateActiveAnchor(container);
+          });
         }
       });
-      return () => {
-        if (!_Utils.default.isNull(editor)) {
-          //editor.removeEventListener('keyDown', onKeyDown);
+      const onMouseUp = e => {
+        if (!isPointInsideElement(e.clientX, e.clientY, viewerElement)) {
+          return;
+        }
+        if (dropData.current) {
+          insertReadonlyAnchor(dropData.current.value, dropData.current.dropPosition);
+          dropData.current = null;
         }
+        updateActiveAnchor(container);
+        //viewer.style.overflow = 'auto';
       };
+      viewerElement.addEventListener('mouseup', onMouseUp);
+      return () => viewerElement.removeEventListener('mouseup', onMouseUp);
     }
   }, [container]);
   _react.default.useEffect(() => {
     if (container && json) {
-      container.documentEditor.documentChange = () => {
+      container.documentEditor.documentChange = async () => {
         container.documentEditor.enableTrackChanges = !_Utils.default.isNull(props.trackChanges) ? props.trackChanges : true;
         if (props.commentsOnly) {
           container.documentEditor.editor.enforceProtection('password', 'CommentsOnly');
         } else if (props.readOnly) {
           container.documentEditor.isReadOnly = props.readOnly;
         }
+        if (loading.current) {
+          let file = await saveAsBase64();
+          if (props.valueChangeHandler) {
+            props.valueChangeHandler(file);
+          }
+          loading.current = false;
+        }
+        currentText.current = extractDocumentText(container.documentEditor.editor);
       };
-      container.documentEditor.addEventListener('contentChange', e => {
+      container.documentEditor.addEventListener('contentChange', async e => {
         if (props.disableAcceptChanges) {
           let acceptButtons = document.getElementsByClassName("e-de-track-accept-button");
           for (const acceptButton of acceptButtons) {
@@ -485,16 +510,18 @@ const WordDocumentViewer = props => {
             rejectButton.parentElement.removeChild(rejectButton);
           }
         }
-        if (props.valueChangeHandler) {
-          props.valueChangeHandler();
+        if (loading.current) {
+          let file = await saveAsBase64();
+          if (props.valueChangeHandler) {
+            props.valueChangeHandler(file);
+          }
+          loading.current = false;
         }
+        currentText.current = extractDocumentText(container.documentEditor.editor);
       });
       container.documentEditor.open(json);
       container.documentEditor.enableTrackChanges = !_Utils.default.isNull(props.trackChanges) ? props.trackChanges : true;
       //container.documentEditor.isReadOnly = (props.readOnly || props.commentsOnly);
-      setTimeout(() => {
-        rebuildRestrictedRanges();
-      }, 0);
     }
   }, [json, container]);
   const onToolbarClick = args => {
@@ -577,6 +604,7 @@ const WordDocumentViewer = props => {
     restrictEditing: props.readOnly && !props.commentsOnly,
     showPropertiesPane: false,
     enableTrackChanges: true,
+    enableAutoFocus: false,
     serviceUrl: DOCSVC,
     enableToolbar: !props.readOnly || props.commentsOnly
   }), visible && items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
@@ -596,6 +624,7 @@ const WordDocumentViewer = props => {
     toolbarItems: items,
     restrictEditing: props.readOnly && !props.commentsOnly,
     showPropertiesPane: false,
+    enableAutoFocus: false,
     serviceUrl: DOCSVC,
     enableToolbar: !props.readOnly || props.commentsOnly
   }));

package/dist/components/form/Form.js

@@ -238,7 +238,7 @@ const Form = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
   function loadData(eventConfig, componentConfig) {
     let eventData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     let service = !_Utils.default.isNull(componentConfig.dataService) ? componentConfig.dataService : eventConfig !== null ? eventConfig.dataService : null;
-    let componentValue = !_Utils.default.isNull(componentConfig.value) ? _ApplicationManager.default.resolveParameterConfigValue(componentConfig.value, eventData) : eventConfig !== null ? _ApplicationManager.default.resolveParameterConfigValue(eventConfig.value, eventData) : null;
+    let componentValue = !_Utils.default.isNull(componentConfig.value) ? _ApplicationManager.default.resolveParameterConfigValue(componentConfig.value, eventData) : !_Utils.default.isNull(eventConfig) ? _ApplicationManager.default.resolveParameterConfigValue(eventConfig.value, eventData) : null;
     if (!_Utils.default.isNull(service)) {
       doClear();
       if (service.type === 'rpc') {