font family typo, and choosing font family doesn't actually change the selected text font

[liadbe]

Hi, Great project, looks good on our app.

Few small issues with font-families array:

1. When selecting text and changing the font family, it doesn't change in the editor (it stays with the previous style).
2. I believe there's a typo, it says 'Araial' instead of 'Arial'.
3. How could I custom the list of the fonts? I'm looking at this docs file https://www.yuque.com/braft-editor/be/gz44tn#7fvnkr but it's not mentioned how to apply the new fontFamilies array in the controls array.

Thanks much:)

[margox]

thanks very mush for using this project, and you can try this :

const myFontFamilies = [
    {
        name: 'Araial',
        family: 'Arial, Helvetica, sans-serif'
    }, {
        name: 'Georgia',
        family: 'Georgia, serif'
    }, {
        name: 'Impact',
        family: 'Impact, serif'
    }, {
        name: 'Monospace',
        family: '"Courier New", Courier, monospace'
    }, {
        name: 'Tahoma',
        family: 'tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif'
    }
]

<BraftEditor fontFamilies={myFontFamilies}/>

[liadbe]

Thanks for the quick response, it did solve that issue.

The thing is that it still doesn't change the font on the editor, it does change the font in the html the editor produce though.

[margox]

I will check this tonight, thank you for your feedback. :)

[margox]

btw, which version of the braft-editor are you using? I need to know if you are using the old version(v1.xx)

[liadbe]

"braft-editor": "^2.1.32",
"braft-utils": "^3.0.8",

[margox]

Hi! I just tested it in my computer and it works well:

Have you checked the DOM of the text that applied the fonts through the developer tools? just like the picture I posted above. and also make sure the font you want to use has been installed on your computer

[margox]

In addition, you can check if there are other CSS styles that override the font style of the editor text.

[liadbe]

Unfortunately it's still doesn't work in my project. I commented all styling in the project and still choosing a font doesnt make any change neither to the text in the editor, nor applied to the DOM when I look in the developer tools.

Worth to mention all other styling of the editor works perfectly.

[margox]

maybe you can post your code here, I will make a demo with your code to see what happened.

[liadbe]

import React from 'react';
import PropTypes from 'prop-types';
import {inject, observer} from 'mobx-react/index';
import {toJS, observable, computed, action} from 'mobx';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

const fontFamilies = [
    {
        name: 'Arial',
        family: 'Arial, Helvetica, sans-serif'
    }, {
        name: 'Georgia',
        family: 'Georgia, serif'
    }, {
        name: 'Impact',
        family: 'Impact, serif'
    }, {
        name: 'Monospace',
        family: '"Courier New", Courier, monospace'
    }, {
        name: 'Tahoma',
        family: 'Tahoma, Arial, sans-serif'
    }
];

const controls = [
    'bold', 'italic', 'underline', 'separator',
    'font-family', 'font-size', 'text-color', 'separator',
    'text-align', 'separator',
    'text-indent', 'list-ul', 'list-ol', 'separator',
    'link', 'media', 'blockquote', 'separator',
    'undo', 'redo',
];

@inject("apiRest", "appStore")
@observer
export default class ExceedEditor extends React.Component {
  @observable editorState = BraftEditor.createEditorState(this.props.value);

  UNSAFE_componentWillReceiveProps(nextProps, nextState) {
    if (nextProps.value !== this.editorState.toHTML()) {
      this.editorState = BraftEditor.createEditorState(nextProps.value);
    }
  }

  handleChange(value) {
    this.editorState = value;
    this.props.onChange(this.editorState.toHTML());
  }

  render() {
    const excludeControls = this.props.excludeControls ? [
      'text-indent', 'list-ul', 'list-ol', 'blockquote', 'undo', 'redo'
    ] : [];

    const contentStyle = {
      minHeight: this.props.minHeight,
      maxHeight: this.props.maxHeight,
    };

    return (
        <div>
          <BraftEditor
            value={this.editorState}
            onChange={this.handleChange.bind(this)}
            language={'en'}
            controls={controls}
            className="exceed-ant-input"
            contentStyle={contentStyle}
            excludeControls={excludeControls}
            fontFamilies={fontFamilies}
          />
        </div>
      )
  }
}

[margox]

I still can't reproduce this issue even with your code, and there is one thing I should tell you, currently I can't find a good way to detect the text font family from HTML string when converting the HTML string to editorState, I mean, when using createEditorState to create an editorState object from a HTML string, all font family styles will lost, and that's why I hide the font-family control by default.

The best way to keep your content editable is using RAW content, and store a HTML content for showing in front page.

I've no idea how you use the ExceedEditor in your page, but you can add a console.log in this location:

UNSAFE_componentWillReceiveProps(nextProps, nextState) {
    if (nextProps.value !== this.editorState.toHTML()) {
      console.log('new value applied')
      this.editorState = BraftEditor.createEditorState(nextProps.value);
    }
  }

If you see the string 'new value applied' in browser console when you input, the reason for the problem is obvious.

[margox]

I just noticed that you said the output HTML sting applied the font family styles correctly, that's so wried, I suggest you checking the DOM again, try more times.

[liadbe]

Hi, sorry for confusing, it's not applied to the DOM at anytime. But, it is applied to the HTML string (when converting editorState.toHTML()), but when I refresh the screen (re-mount the component) then it's not there anymore.

Now I understand why it happens (it falls in createEditorState() func). Im not sure I'll be able to work with RAW as my BE stores HTML (I can make conversions thoguh, I'm not sure how comfortable it'll be). At the moment maybe it's better to close the issue, but I'll be happy to know if there are any changes in createEditorState() from HTML format.

Thanks.

[margox]

I will keep this issue. In a future version, I will enhance the font-family related functions, but I am not sure when it will be completed, after all, it is the end of the year in China, and usually there is a lot of work to be done.

[liadbe]

Works now, tnx!