1.7.0 to 1.8.3 breaks scrolling and selection

[cristianoccazinsp]

I'm not sure what changed between 1.7.0 and 1.8.3, but rendering the editor with both useContainer={true} or useContainer={false} no can scroll up-down when rendered inside a <View>.

Additionally, something also changed with spacing and the text selection thumb is not visible when the last line is selected (it ends up hidden below the actual web view).

Any ideas of what changed and how I can resolve the above?

[cristianoccazinsp]

Previous behaviour:

1.8.3 behaviour: You can see the text selection thumb is no longer visible. Scrolling is also no longer possible with finger movements (only with the thumb)

[stulip]

@cristianoccazinsp Due to the time difference, it is already 23 o'clock on my side. I can only confirm the question you raised during the day tomorrow.

[cristianoccazinsp]

@stulip no hurries!

[stulip]

@cristianoccazinsp The 1.8 version is mainly to fix the problem that the input cursor is not displayed on the screen, and the input cursor color setting is added

[stulip]

I researched it and found that this line is too close to the edge, causing the system thumb to not appear

[cristianoccazinsp]

The thumb is one issue. What about scrolling behaviour changes? With 1.7 scrolling inside a modal was working fine, with something like this (no ScrollView):

editorHeader = this.state.editorLoaded ? (
  <RichToolbar
    style={editorStyle.richBar}
    getEditor={this.getEditor}
    disabled={false}
    iconTint={editorContentStyle.color}
    selectedIconTint={'#2095F2'}
    disabledIconTint={'#8b8b8b'}
    iconSize={ICON_HEADER_SIZE}
    iconGap={ICON_HEADER_GAP}
    actions={[
      actions.setBold,
      actions.setItalic,
      actions.setUnderline,
      actions.insertBulletsList,
      actions.removeFormat,
      'undo',
      'fullScreen',
      'done',
    ]}
    iconMap={{
      [actions.setBold]: ({tintColor}) => (
        <Icon
          name="format-bold"
          type="MaterialIcons"
          style={[editorStyle.icon, {color: tintColor}]}
        />
      ),
      [actions.setItalic]: ({tintColor}) => (
        <Icon
          name="format-italic"
          type="MaterialIcons"
          style={[editorStyle.icon, {color: tintColor}]}
        />
      ),
      [actions.setUnderline]: ({tintColor}) => (
        <Icon
          name="format-underlined"
          type="MaterialIcons"
          style={[editorStyle.icon, {color: tintColor}]}
        />
      ),
      [actions.insertBulletsList]: ({tintColor}) => (
        <Icon
          name="format-list-bulleted"
          type="MaterialIcons"
          style={[editorStyle.icon, {color: tintColor}]}
        />
      ),
      [actions.removeFormat]: ({tintColor}) => (
        <Icon
          name="format-clear"
          type="MaterialIcons"
          style={[editorStyle.icon, {color: tintColor}]}
        />
      ),
      undo: ({tintColor}) => (
        <Icon
          name="undo"
          type="MaterialCommunityIcons"
          style={editorStyle.icon}
        />
      ),
      done: ({tintColor}) => (
        <Icon
          name="done"
          type="MaterialIcons"
          success
          style={editorStyle.icon}
        />
      ),
      fullScreen: ({tintColor}) => (
        <Icon
          name="fullscreen"
          type="MaterialIcons"
          style={editorStyle.icon}
        />
      ),
    }}
    done={this.stopTextEdit}
    undo={this.undo}
    fullScreen={this.toggleFullScreen}
  />
) : null;

textEditor = (
  <RichEditor
    useContainer={false}
    initialFocus={false}
    disabled={false}
    editorStyle={editorContentStyle}
    ref={this.setRef}
    style={editorStyle.rich}
    placeholder={`${this.props.field.name}...`}
    initialContentHTML={value || ''}
    editorInitializedCallback={this.editorInitializedCallback}
    onChange={this.handleChange}
    onBlur={() => {
      if (!this.state.fullScreen) {
        this.stopTextEdit();
      }
    }}
    onFocus={this.onFocus}
    pasteAsPlainText={true}
    autoCapitalize="on"
    setSupportMultipleWindows={false}
    scrollEnabled={false}
    renderError={this.renderError}
    startInLoadingState={true}
    renderLoading={this.renderLoading}
  />
);

// this is a Modal wrapper
<PromptModal
  promptStyle={editorStyle.promptBox}
  height={'100%'}
  transparent={true}
  Wrapper={View}
  onKeyboard={(open, height) =>
    this.setState({keyboardHeight: height || 0})
  }>
  <View style={{height: fullScreenHeight}}>
    <View style={{flex: 0, height: 50}}>
      {editorHeader}
      <View
        style={
          fullScreen
            ? editorStyle.richContainerFull
            : editorStyle.richContainer
        }>
        {textEditor}
      </View>
    </View>
  </View>

The above code would rely on the actual webview to scroll and it would work fine. But with 1.8.0, the webview no longer scrolls and it is impossible to use your finger to move around; you can only move with moving the thumb.

[stulip]

Does' 1.8.5 'also have the problem of not scrolling?

[cristianoccazinsp]

Just tested 1.8.5 and I'm still seeing the not scrolling issue. The thumb also still doesn't show when the last line is selected.

[cristianoccazinsp]

Scrolling is also not working on iOS. Even worse, the text doesn't even scroll automatically when typing :(. Worked fine with 1.7.0

[cristianoccazinsp]

Looks like the scrolling and thumb are not working because the view changes height dynamically (based on if the keyboard is open or not), but the webview does not adjust to that change at all.

I don't know why it works with 1.7.0 and not with 1.8.5 though.

[cristianoccazinsp]

Ok I believe I have tracked down the issues to around this lines: https://github.com/wxik/react-native-rich-editor/compare/v1.7.0...v1.8.5#diff-9cb70b5abda24bd38f9b38e0e94a71393277f56f9436e0855f42efa3270b90c6R392

I guess the webview is not adjusting its height due to these updates.

More specifically, this line https://github.com/wxik/react-native-rich-editor/compare/v1.7.0...v1.8.5#diff-9cb70b5abda24bd38f9b38e0e94a71393277f56f9436e0855f42efa3270b90c6L372 here, if we remove the container check, the height and scrolling starts to work just fine.

body.style.height = docEle.clientHeight + 'px'; basically breaks any height changes done to the parent view.

[joshjens]

Any update on this issue? I also see a selection issue with 1.8.5

[raultrujillo]

i use the control with out scrollView and set use useContainer={false} and is Ok for me. "react-native-pell-rich-editor": "^1.8.5" Windows app with react native.

 <RichTextEditor
        disabled={false}
        editorStyle={contentStyle} // default light style
        ref={richText}
        style={styles.rich}
        useContainer={false}
        initialHeight={height}
        placeholder={'please input content'}
        pasteAsPlainText={true}
        scrollEnabled={false}
      />       

[stulip]

@cristianoccazinsp body.style.height = docEle.clientHeight + 'px'; Removed in the new version

[AleksandrKarashev]

i use the control with out scrollView and set use useContainer={false} and is Ok for me. "react-native-pell-rich-editor": "^1.8.5" Windows app with react native.

 <RichTextEditor
        disabled={false}
        editorStyle={contentStyle} // default light style
        ref={richText}
        style={styles.rich}
        useContainer={false}
        initialHeight={height}
        placeholder={'please input content'}
        pasteAsPlainText={true}
        scrollEnabled={false}
      />       

It helped me, thank u a lot! 💯