bug: UI doesn't show up on Safari/MacOS, Chrome/iPad and Safari/iOS

[xu4wang]

Describe the bug

https://dtstack.github.io/molecule-examples/#/

The link above is working properly on Chrome/MacOS. But not working with below browsers:

• Safari/MacOS
• Safari/iPad
• Chrom/iPad
• Safari/iPhone

Versions

• OS: latest MacOS/iPad OS and iOS
• Browser: latest version
• Molecule: current deployed demo version.

To reproduce

Expected

in Chrome/MacOS, it's working.

### Actually happening

Show blank page on:

• Safari/MacOS
• Safari/iPad
• Chrom/iPad
• Safari/iPhone

[xu4wang]

iPhone 和 iPad 如果无法使用，会限制很多场景。

[xu4wang]

在mac safari下看了看，似乎有个正则表达式报错了。

[xu4wang]

用例子源码跑了一下， 错误出在：

      data.location = ((_b = currentIndex.node.location) === null || _b === void 0 ? void 0 : _b.replace(/(?<=\/)[^\/]+$/, `${data.name}`)) || '';

上下文是：

  getPosOfType(type, folderList) {
    if (!folderList.length) return 0;

    if (type === _model_workbench_explorer_folderTree__WEBPACK_IMPORTED_MODULE_4__.FileTypes.Folder || type === _model_workbench_explorer_folderTree__WEBPACK_IMPORTED_MODULE_4__.FileTypes.RootFolder) {
      return 0;
    } // find the first file type


    const index = folderList.findIndex(list => list.fileType === _model_workbench_explorer_folderTree__WEBPACK_IMPORTED_MODULE_4__.FileTypes.File);
    return index === -1 ? folderList.length : index;
  }

  add(data, id) {
    var _a, _b;

    const isRootFolder = data.fileType === 'RootFolder';
    const {
      autoSort
    } = this.state;

    if (isRootFolder) {
      this.addRootFolder(data);
      return;
    }

    if (!id && id !== 0) throw new Error('File node or folder node both need id');
    const cloneData = ((_a = this.state.folderTree) === null || _a === void 0 ? void 0 : _a.data) || [];
    const {
      tree,
      index
    } = this.getCurrentRootFolderInfo(id); // this index is root folder index

    if (index <= -1) {
      _common_logger__WEBPACK_IMPORTED_MODULE_7__["default"].error('Please check id again, there is not folder tree');
      return;
    }

    const currentIndex = tree.getHashMap(id);

    if (currentIndex.node.fileType === _model_workbench_explorer_folderTree__WEBPACK_IMPORTED_MODULE_4__.FileTypes.File) {
      data.location = ((_b = currentIndex.node.location) === null || _b === void 0 ? void 0 : _b.replace(/(?<=\/)[^\/]+$/, `${data.name}`)) || '';
      const parentNode = tree.getNode(currentIndex.parent);
      const pos = this.getPosOfType(data.fileType, parentNode.children || []);
      tree.insertNode(data, currentIndex.parent, pos);
    } else {
      this.setCurrentFolderLocation(data, id);
      const pos = this.getPosOfType(data.fileType, currentIndex.node.children || []);
      tree === null || tree === void 0 ? void 0 : tree.insertNode(data, currentIndex.id, pos);
    }

    cloneData[index] = tree.obj;

    if (autoSort) {
      this.sortTree(cloneData[index].children || []);
    }

    this.setState({
      folderTree: Object.assign(Object.assign({}, this.state.folderTree), {
        data: lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_2___default()(cloneData)
      })
    });
  }

[wewoor]

iPhone 和 iPad 如果无法使用，会限制很多场景。

据我们所知，Monoco Editor 目前在触屏上面的支持并不是很好的

[xu4wang]

可能的原因是， safari不支持下面几种断言验证：

• (?!)零宽负向先行断言
• (?=)零宽先行断言
• (?<=)零宽后行断言
• (?<!)零宽负向后行断言。

下面文章里有个解决方案。 RE要重新换个写法。

https://blog.csdn.net/catchaobject/article/details/122301402?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-122301402-blog-122480888.pc_relevant_aa2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-122301402-blog-122480888.pc_relevant_aa2&utm_relevant_index=1

[wewoor]

感谢反馈，非常详细，我们尽快修复

[xu4wang]

https://microsoft.github.io/monaco-editor/playground.html
上面playground在iphone上跑起来没问题。

一般触屏设备只是临时能看一下。 并不指望用ipad/iphone长时间编辑。