Аналіз HTML-редакторів на відповідність ключовим вимогам
Функціональні сценарії
-
Внесення змін до Thymeleaf HTML-шаблонів для генерації витягів з реєстру
-
Внесення змін до Thymeleaf HTML-шаблонів для генерації поштових повідомлень
Приклади коду для редагування
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="center">
<img src="images/ua.png" class="trinity"/>
</div>
<p class="header text14" th:if="${user} == 'Joe'">
...
</p>
<table>
<tbody>
<tr th:each="animal: ${animals}">
<td th:text="${animal.name}"></td>
</tr>
</tbody>
</table>
</body>
</html>Аналіз на відповідність вимогам
| Критерій / Функціональність | @monaco-editor/react |
|---|---|
Автодоповнення |
Так |
Синтаксичний аналіз |
Ні |
Підтримка автодоповнення директив із Thymeleaf |
Так |
Підтримка коментарів |
Так |
Можливість згортання та розгортання блока з кодом |
Так |
Рішення за результатами аналізу
Рекомендовано використовувати бібліотеку @monaco-editor/react, яка повністю покриває вимоги до HTML редактора
Підтримка темування та стилізації
Бібліотека @monaco-editor/react надає доступні варіанти теми "vs-dark" | «light». Також ми можемо визначати власні теми за допомогою monaco.editor.defineTheme Приклад
Підтримка автодоповнення
Бібліотека monaco-editor надає наступне API для підтримки автодоповнення. Для цього ми викликаємо метод registerCompletionItemProvider() у об’єкта monaco.languages, який приймає два аргументи languageId(мова, на прикладі html) та об’єкт provider. В об’єкта provider є значення provideCompletionItems, в яке передаємо функцію, яка, в свою чергу, повертає об’єкт зі значенням suggestions - це масив елементів, в якому ми опишемо значення для автодоповнення.
На приклад:
monaco.languages.registerCompletionItemProvider('html', {
provideCompletionItems: function () {
return {
suggestions: [
{
label: "th:if",
kind: monaco.languages.CompletionItemKind.Snippet,
documentation: "",
insertText: 'th:if="${1:condition}"',
insertTextRules:
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
}
]
};
}
});На прикладі вищє, якщо користувач почне набирати символи які будуть співпадати з полем label, редактор запропонує вибрати це значення зі списку автодоповнення. Якщо користувач натисне на це слово, в редакторі автоматично підставиться значення з поля insertText.
