Каков правильный тип ввода поля для ввода CSS или JavaScript, чтобы избежать нежелательных символов? ⇐ CSS

[Гость]

Я хочу, чтобы пользователи могли добавлять CSS в одно поле и JavaScript в другое поле моего приложения React. Я предполагаю, что ответом может быть текстовое поле, но я не уверен в правильности типа ввода для этого и, к моему удивлению, не могу найти нигде, где это прояснялось бы.
У меня есть textarea, но есть много нежелательных символов, которые могут вызвать проблемы, например \n и \t и т. д. Вот пример:
Если я хочу ввести этот CSS:

Код: Выделить всё

.el {
color: red;
font-size: 12px;
}

Значение входной текстовой области может быть примерно таким:

Код: Выделить всё

".el {\ncolor: red;\nfont-size: 12px;\n\n"

Как это можно преодолеть, чтобы не загрязнять ценности? Вот мой пример кода реакции:

Код: Выделить всё

import React, { Component, useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import useForm from 'react-hook-form';

function createArrayWithNumbers(length) {
return Array.from({ length }, (_, k) => k + 1);
}

function YourForm() {
const { register, handleSubmit, watch, errors } = useForm()
const onSubmit = data => {
}; // your form submit function which will invoke after successful validation

console.log('values: ', watch()) // you can watch individual input by pass the name of the input
return (

{/* include validation with required field or other standard html validation rules */}

{/* errors will return true if particular field validation is invalid  */}
{errors.example && 'This field is required'}


)
}

class App extends Component {
render() {
return (



);
}
}

render(, document.getElementById('root'));

Я пробовал:

[*]Копировать и вставлять в поле как обычный текст
[*]Создание функции, которая заменяет вставку по умолчанию на вставку в виде обычного текста
[*]Функциональная очистка ввода от нежелательных символов, хотя, похоже, в этом слишком много крайних случаев, чтобы быть точным >
[*]Используйте пакет minify из csso, но он не может обрабатывать некоторые странные символы Юникода (например, вставленные из заметок Apple)
< /ol>
Иногда значение также выглядит следующим образом (например, при вставке в поле при копировании из заметок Apple):

Код: Выделить всё

.imgtest {
    max-height: 1000px;\t
    border-radius: 8px;\t
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);\t
    filter: grayscale(50%) invert(1);\n}\n\n\n"

Что в любом случае отображается в VSC так:
Символ U+2028 "" можно спутать с ASCII символ U+0020, который чаще встречается в исходном коде."
[img]https://i .stack.imgur.com/vqX9P.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/781 ... -avoid-unw