Skip to content

Commit

Permalink
chore(code-editor): add more specific typings
Browse files Browse the repository at this point in the history
  • Loading branch information
billiegoose committed Nov 28, 2018
1 parent 73a063c commit 09801df
Showing 1 changed file with 22 additions and 12 deletions.
34 changes: 22 additions & 12 deletions src/CodeEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import noop = require('lodash/noop');
import 'prismjs/components/';
import * as React from 'react';
import { useCallback } from 'react';
import Editor from 'react-simple-code-editor';
import ReactSimpleCodeEditor from 'react-simple-code-editor';
import styled from 'styled-components';
import { themeGet } from './utils';
import { highlightCode } from './utils/highlightCode';
Expand Down Expand Up @@ -49,17 +49,27 @@ export const supportedLanguages = {
...optionalSupport,
};

const CodeEditorView = React.forwardRef((props: ICodeEditorProps & { className: string }, ref: any) => {
const { className, language, onChange = noop, value } = props;

const highlightCodeCallback = useCallback(() => highlightCode(value, language), [value, language]);

return (
<div className={className}>
<Editor ref={ref} value={value} onValueChange={onChange} highlight={highlightCodeCallback} padding={10} />
</div>
);
});
export type ReactSimpleCodeEditorRef = ReactSimpleCodeEditor;

const CodeEditorView = React.forwardRef<ReactSimpleCodeEditorRef, ICodeEditorProps & { className: string }>(
(props, ref) => {
const { className, language, onChange = noop, value } = props;

const highlightCodeCallback = useCallback(() => highlightCode(value, language), [value, language]);

return (
<div className={className}>
<ReactSimpleCodeEditor
ref={ref}
value={value}
onValueChange={onChange}
highlight={highlightCodeCallback}
padding={10}
/>
</div>
);
}
);

// @ts-ignore
export const CodeEditor = styled<ICodeEditorProps>(CodeEditorView as any)`
Expand Down

0 comments on commit 09801df

Please sign in to comment.