Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uiw/react-textarea-code-editor

Package Overview
Dependencies
Maintainers
1
Versions
55
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-textarea-code-editor - npm Package Compare versions

Comparing version 1.4.5 to 1.4.6

67

esm/index.js

@@ -12,28 +12,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";

export * from './SelectionText';
export default /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-tc-editor' : _props$prefixCls,
_ = props.value,
_props$padding = props.padding,
padding = _props$padding === void 0 ? 10 : _props$padding,
_props$minHeight = props.minHeight,
minHeight = _props$minHeight === void 0 ? 16 : _props$minHeight,
placeholder = props.placeholder,
language = props.language,
className = props.className,
style = props.style,
_onChange = props.onChange,
export default /*#__PURE__*/React.forwardRef((props, ref) => {
var {
prefixCls = 'w-tc-editor',
padding = 10,
minHeight = 16,
placeholder,
language,
className,
style,
onChange: _onChange
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
var _useState = useState(props.value || ''),
value = _useState[0],
setValue = _useState[1];
useEffect(function () {
return setValue(props.value || '');
}, [props.value]);
var [value, setValue] = useState(props.value || '');
useEffect(() => setValue(props.value || ''), [props.value]);
var textRef = useRef(null);
useImperativeHandle(ref, function () {
return textRef.current;
});
useImperativeHandle(ref, () => textRef.current);
var contentStyle = {

@@ -45,16 +36,12 @@ paddingTop: padding,

};
var htmlStr = useMemo(function () {
return processHtml("<pre aria-hidden=true><code " + (language ? "class=\"language-" + language + "\"" : '') + " >" + htmlEncode(String(value || '')) + "</code><br /></pre>");
}, [value, language]);
var preView = useMemo(function () {
return /*#__PURE__*/_jsx("div", {
style: _extends({}, styles.editor, contentStyle, {
minHeight: minHeight
}),
className: prefixCls + "-preview " + (language ? "language-" + language : ''),
dangerouslySetInnerHTML: {
__html: htmlStr
}
});
}, // eslint-disable-next-line react-hooks/exhaustive-deps
var htmlStr = useMemo(() => processHtml("<pre aria-hidden=true><code " + (language ? "class=\"language-" + language + "\"" : '') + " >" + htmlEncode(String(value || '')) + "</code><br /></pre>"), [value, language]);
var preView = useMemo(() => /*#__PURE__*/_jsx("div", {
style: _extends({}, styles.editor, contentStyle, {
minHeight
}),
className: prefixCls + "-preview " + (language ? "language-" + language : ''),
dangerouslySetInnerHTML: {
__html: htmlStr
}
}), // eslint-disable-next-line react-hooks/exhaustive-deps
[prefixCls, language, htmlStr]);

@@ -71,3 +58,3 @@ return /*#__PURE__*/_jsxs("div", {

placeholder: placeholder,
onKeyDown: function onKeyDown(evn) {
onKeyDown: evn => {
shortcuts(evn);

@@ -77,3 +64,3 @@ other.onKeyDown && other.onKeyDown(evn);

style: _extends({}, styles.editor, styles.textarea, contentStyle, {
minHeight: minHeight
minHeight
}, placeholder && !value ? {

@@ -83,3 +70,3 @@ WebkitTextFillColor: 'inherit'

ref: textRef,
onChange: function onChange(evn) {
onChange: evn => {
setValue(evn.target.value);

@@ -86,0 +73,0 @@ _onChange && _onChange(evn);

@@ -1,3 +0,3 @@

export var SelectionText = /*#__PURE__*/function () {
function SelectionText(elm) {
export class SelectionText {
constructor(elm) {
this.elm = void 0;

@@ -7,4 +7,6 @@ this.start = void 0;

this.value = void 0;
var selectionStart = elm.selectionStart,
selectionEnd = elm.selectionEnd;
var {
selectionStart,
selectionEnd
} = elm;
this.elm = elm;

@@ -16,8 +18,7 @@ this.start = selectionStart;

var _proto = SelectionText.prototype;
_proto.position = function position(start, end) {
var _this$elm = this.elm,
selectionStart = _this$elm.selectionStart,
selectionEnd = _this$elm.selectionEnd;
position(start, end) {
var {
selectionStart,
selectionEnd
} = this.elm;
this.start = typeof start === 'number' && !isNaN(start) ? start : selectionStart;

@@ -28,5 +29,5 @@ this.end = typeof end === 'number' && !isNaN(end) ? end : selectionEnd;

return this;
};
}
_proto.insertText = function insertText(text) {
insertText(text) {
// Most of the used APIs only work with the field selected

@@ -38,12 +39,13 @@ this.elm.focus();

return this;
};
}
_proto.getSelectedValue = function getSelectedValue(start, end) {
var _this$elm2 = this.elm,
selectionStart = _this$elm2.selectionStart,
selectionEnd = _this$elm2.selectionEnd;
getSelectedValue(start, end) {
var {
selectionStart,
selectionEnd
} = this.elm;
return this.value.slice(typeof start === 'number' && !isNaN(start) ? start : selectionStart, typeof end === 'number' && !isNaN(end) ? start : selectionEnd);
};
}
_proto.getLineStartNumber = function getLineStartNumber() {
getLineStartNumber() {
var start = this.start;

@@ -63,15 +65,13 @@

/** Indent on new lines */
;
_proto.getIndentText = function getIndentText() {
getIndentText() {
var start = this.getLineStartNumber();
var str = this.getSelectedValue(start);
var indent = '';
str.replace(/(^(\s)+)/, function (str, old) {
return indent = old;
});
str.replace(/(^(\s)+)/, (str, old) => indent = old);
return indent;
};
}
_proto.lineStarInstert = function lineStarInstert(text) {
lineStarInstert(text) {
if (text) {

@@ -81,11 +81,9 @@ var oldStart = this.start;

var str = this.getSelectedValue(start);
this.position(start, this.end).insertText(str.split('\n').map(function (txt) {
return text + txt;
}).join('\n')).position(oldStart + text.length, this.end);
this.position(start, this.end).insertText(str.split('\n').map(txt => text + txt).join('\n')).position(oldStart + text.length, this.end);
}
return this;
};
}
_proto.lineStarRemove = function lineStarRemove(text) {
lineStarRemove(text) {
if (text) {

@@ -102,11 +100,9 @@ var oldStart = this.start;

this.position(start, this.end).insertText(str.split('\n').map(function (txt) {
return txt.replace(reg, '');
}).join('\n')).position(newStart, this.end);
this.position(start, this.end).insertText(str.split('\n').map(txt => txt.replace(reg, '')).join('\n')).position(newStart, this.end);
}
}
/** Notify any possible listeners of the change */
;
_proto.notifyChange = function notifyChange() {
notifyChange() {
var event = new Event('input', {

@@ -117,6 +113,5 @@ bubbles: true,

this.elm.dispatchEvent(event);
};
}
return SelectionText;
}();
}
//# sourceMappingURL=SelectionText.js.map
import { rehype } from 'rehype'; // @ts-ignore
import rehypePrism from '@mapbox/rehype-prism';
export var processHtml = function processHtml(html) {
export var processHtml = html => {
return rehype().data('settings', {

@@ -18,10 +18,8 @@ fragment: true

export function htmlEncode(sHtml) {
return sHtml.replace(/[<>&"]/g, function (c) {
return {
'<': '&lt;',
'>': '&gt;',
'&': '&amp;',
'"': '&quot;'
}[c];
});
return sHtml.replace(/[<>&"]/g, c => ({
'<': '&lt;',
'>': '&gt;',
'&': '&amp;',
'"': '&quot;'
})[c]);
}

@@ -28,0 +26,0 @@ export function stopPropagation(e) {

{
"name": "@uiw/react-textarea-code-editor",
"version": "1.4.5",
"version": "1.4.6",
"description": "A simple code editor with syntax highlighting.",

@@ -98,3 +98,3 @@ "homepage": "https://uiwjs.github.io/react-textarea-code-editor/",

"rehype-attr": "1.4.2",
"tsbb": "3.0.1"
"tsbb": "3.0.2"
},

@@ -101,0 +101,0 @@ "eslintConfig": {

@@ -7,5 +7,4 @@ {

"outDir": "../cjs",
"emitDeclarationOnly": true,
"noEmit": false
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc