Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow users to toggle word wrapping on the doc editor #1454

Merged

Conversation

Antonio-Maranhao
Copy link
Contributor

Overview

Allow users to toggle word wrapping on the doc editor, which prevents horizontal scrolling on long lines.

Word wrap OFF
image

Word wrap ON
image

Testing recommendations

  • Edit a document and use the new preferences button in the toolbar to switch on/off word wrapping.
  • Reload the page and check that your previous selection is kept.

GitHub issue number

n/a

Related Pull Requests

n/a

Checklist

  • Code is written and works correctly;
  • Changes are covered by tests;
  • Documentation reflects the changes;
  • Update rebar.config.script with the correct tag once a new Fauxton release is made

@glynnbird
Copy link
Contributor

Looks great!

import React from 'react';
import PropTypes from 'prop-types';
import Components from '../../../components/react-components';
// import Constants from '../constants';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// import Constants from '../constants';

Copy link
Contributor Author

@Antonio-Maranhao Antonio-Maranhao Jun 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

@@ -39,6 +40,7 @@ export class StringEditModal extends React.Component {
this.editor = ace.edit(dom_node);
this.editor.setShowPrintMargin(false);
this.editor.setOption('highlightActiveLine', true);
this.editor.setOption('wrap', !!this.props.wordWrapEnabled);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is on purpose to turn falsy/truthy values to false / true

@@ -39,6 +40,7 @@ export class StringEditModal extends React.Component {
this.editor = ace.edit(dom_node);
this.editor.setShowPrintMargin(false);
this.editor.setOption('highlightActiveLine', true);
this.editor.setOption('wrap', !!this.props.wordWrapEnabled);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is on purpose to turn falsy/truthy values to false / true

@Antonio-Maranhao Antonio-Maranhao merged commit 55b75bf into apache:main Jun 13, 2024
3 checks passed
@Antonio-Maranhao Antonio-Maranhao deleted the code-editor-preferences branch June 13, 2024 13:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants