Develop Reference

Editor is uneditable and options appear vertically

I am trying to use draft js to present a wysiwyg editor.
When I load the component, I am unable to edit anything and the options are coming up vertically.
Expecting it to appear horizontally. What am I doing wrong?
This is how it looks currently.
Implementation.
import React from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import dynamic from 'next/dynamic'
import { EditorProps } from 'react-draft-wysiwyg'
const TextEditor = () => {
// getting window undefined error thus importing this dynamically
const Editor = dynamic<EditorProps>(
() => import('react-draft-wysiwyg').then((mod) => mod.Editor),
{ ssr: false }
)
const [editorState, setEditorState] = React.useState(
EditorState.createEmpty()
);
return (
<div>
<Editor
editorState={editorState}
wrapperClassName="wrapper"
editorClassName="editor"
onEditorStateChange={() => setEditorState(editorState)}
/>
<textarea
disabled
value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
/>
</div>
);
}
export default TextEditor

One thing is wrong for sure, you wrote:
onEditorStateChange={() => setEditorState(editorState)}
It should be:
onEditorStateChange={(newEditorState) => setEditorState(newEditorState)}
// or shorter form:
onEditorStateChange={setEditorState}
Now regarding the style, two thing to look into.
double check that you have included the css somewhere, like import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; but check against your bundler config, not sure about the path on your machine.
It looks like you’re trying to customize the style with wrapperClassName="wrapper" editorClassName="editor". Try remove them for now and see if them interfere. I suspect this is part of the cause.

Ace: Create a custom mode in NextJS

I am trying to use ace to create an sql editor, but I need a unique highlight. So, I need to create a custom mode that inherits from the existing sql mode.
The issue is, because ace uses window, and nextjs is ssr, I am unable to create a custom mode using ace's tutorials as I get the window is not defined error in the .ts file.
I can get around this error in the .tsx file by importing it with next/dynamic and disabling ssr for that component, but for the mode I am stumped.
SqlMode.js (it's not .ts because ace typing just doesn't work for me)
import ace from 'ace-builds/src-noconflict/ace';
import 'ace-builds/src-noconflict/mode-sql'
export class SqlHighlightRules extends window.ace.acequire('ace/mode/text_highlight_rules').TextHighlightRules {
constructor() {
super();
this.$rules.start.unshift({
token: 'text-orange-main',
regex: '{{*.}}',
})
}
}
export class SqlMode extends window.ace.acequire('ace/mode/sql').Mode {
constructor() {
super()
this.HighlightRules = SqlHighlightRules;
}
}
The compilation fails in this file, as it uses window, which is undefined.
Editor.tsx
import { useEffect, useRef, useState } from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/ace';
import 'ace-builds/src-noconflict/theme-tomorrow';
import { SqlMode } from './config/SqlMode';
import 'ace-builds/src-noconflict/ext-language_tools';
const styles = { borderRadius: 8 };
export default function Editor() {
const editor = useRef<AceEditor>();
const [code, setCode] = useState<string>('');
useEffect(() => {
const mode = new SqlMode();
//#ts-ignore
editor.current.editor.getSession().setMode(mode);
}, []);
return (
<AceEditor
ref={editor}
theme="tomorrow"
value={code}
onChange={setCode}
enableBasicAutocompletion
enableLiveAutocompletion
style={styles}
/>
);
}
This file works if used through next/dynamic with { ssr: false } and without the custom mode. But as soon as I use the custom mode, errors.
sql.page.tsx
import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('../components/editor/Editor'), { ssr: false });
export default function SqlEditor() {
return (
<div className="w-full h-full flex justify-center items-center">
<Editor />
</div>
);
}
I would like to be able to create a custom highlight for the sql mode, while working with nextjs. If there is a solution I am not aware of, I'd be happy to learn.
Alternatively if there is another FE editor I could use that does largely the same thing as ace, that could also be useful.
Thank you.

semantic-ui-calendar-react flicker in .tsx

The calendar is flickering Using DateInput in .tsx files
Tried fixing the issue by Why datepicker flicker in React when focus in input field?
App1.tsx
import React, { useState } from "react";
import { DateInput } from "semantic-ui-calendar-react";
import "./styles.css";
import "semantic-ui-css/semantic.min.css";
export default function App1() {
const [date, setDate] = useState("");
const handleChange = (event, { name, value }) => {
setDate(value);
};
return (
<div className="App">
<p>
App1.tsx - Flicker Fixed after using animation=false but getting build
error
</p>
<div>
<DateInput
name="date"
placeholder="Date"
value={date}
popupPosition="top right"
onChange={handleChange}
animation={false}
/>
</div>
</div>
);
}
This throws error Type 'false' is not assignable to type 'SemanticTRANSITIONS'
CodeSandbox
Also, I tried to set the duration property to 0. This works intermittently when there is one DateInput, but I have multiple controls on the page if one of them is open and I open another one, the second one flickers.
If there is any other fix for the flickering, please let me know.

Fixed this issue by wrapping the DateInput inside a js component and consuming that component from the tsx file.
Set animation={''} for fixing the issue as animation={false} gives console errors.

Using validate.js to validate my TextInput results in undefined

I am trying to use validate.js to manage my Textfields validations and after installing validate.js and importing it as import validate from 'validate.js'; then adding it to my InputField it seems that the result is undefined.
I tried to reproduce the issue with Expo snack but the following error appears Device: (953:881) Unable to resolve module 'module://validate.js' here is the Expo link:
https://snack.expo.io/#ahmedsaeed/validatetest
Do I miss something here and is there a better way to validate my form?
Here is my code snippet:
import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { HelperText } from 'react-native-paper';
import { InputField } from '../../../GlobalReusableComponents/TextFields';
import validate from 'validate.js';
const SkillsAndExperienceScreen = (props) => {
const [company, setCompany] = useState('');
const constraints = {
company: {
presence: true
}
};
const onCompanyChange = (val) => {
const result = validate({company: val}, constraints);
setCompany(val);
}
return (
<View>
<InputField
onChangeText={(val) => onCompanyChange(val)}
value={company}
placeholder='Company'
/>
</View>
);
}
export default SkillsAndExperienceScreen;
const Style = {
container: {
flex: 1,
backgroundColor: '#f8f9f9'
}
};
Thanks in advance.
Update: It seems that the project is showing me the same error
Unable to resolve module `validate` from `/Projects/Seem/src/screens/CompleteYourProfileScreens/SkillsAndExperienceScreen/index.js`: Module `validate` does not exist in the Haste module map.

Looking at the web, it seems import validate from "validate-js" is the way to go. The npm module is https://www.npmjs.com/package/validate-js. I tried it on your expo snack and it worked. But, i think that's an entirely different module.
There might be an expo snack specific problem on it, prolly the ".js" name perhaps?, not quite sure. I tried installing locally to project of mine and it worked.
I would suggest using https://www.npmjs.com/package/#hapi/joi since it's always has been my go to for object validation and it has much better community support, and updates are more frequent.

Bundle.js not recognizing one of my files?

Please bear with me because I am a javascript newbie, and just starting to learn react.
I am trying to make a small app but I keep getting an error that one of my files is not found... specifically this:
bundle.js:56 Uncaught Error: Cannot find module "./components/search_bar"
My file structure is that I have my index.js in a folder called src, then my search bar(search_bar.js) in a folder called components. I have triple checked the spelling on them but I continue to get this error.
This is my index.js
import SearchBar from './components/search_bar';
import React from 'react';
import ReactDOM from 'react-dom';
//Create a componant (some /HTML)
const API_KEY = 'AIzaSyC3Z3qTpvAacDLYEIxaueKflFJbWvdIHsw';
const App = () => {
return (
<div>
<SearchBar />
</div>
);
}
// Put that componant on the page (the DOM)
ReactDOM.render(<App />, document.querySelector('.container'));
And this is my search_bar.js
import React, { Component } from 'react';
class SearchBar extends Component {
contructor(props) {
super(props);
// when user updates the search bar this term will get updated.
this.state = { term: ''};
}
render() {
//update state
//use set state everywhere besides constructor!!
return (
<div>
<input onChange={event => this.setState({term: event.target.value})}
/>
Value of the input: {this.state.term}
</div>
);
}
}
export default SearchBar;
Any Ideas as to what I am doing wrong here?

Can you confirm the following directory structure?
my_project/src/index.js
my_project/src/components/search_bar.js
It seems like your current directory structure might instead look like this:
my_project/src/index.js, my_project/components/search_bar.js

AHHH I left an 's' out of constructor... so search_bar.js was unable to compile. I have been looking at this for about an hour now...