feat: prettify html inside textarea

This commit is contained in:
Michal Szczepanski 2023-02-08 02:40:08 +01:00
parent b682befad3
commit 2c1a764171
4 changed files with 37 additions and 1 deletions

11
package-lock.json generated

@ -14,6 +14,7 @@
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.3",
"css": "^3.0.0",
"html-prettify": "^1.0.7",
"jwt-decode": "^3.1.2",
"marked": "^4.2.5",
"mathml-to-latex": "^1.2.0",
@ -13677,6 +13678,11 @@
"react-is": "^16.7.0"
}
},
"node_modules/html-prettify": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/html-prettify/-/html-prettify-1.0.7.tgz",
"integrity": "sha512-99pRsP2PV2DyWnrVibNyad7gNmzCP7AANO8jw7Z9yanWyXH9dPdqdMXGefySplroqCNdk95u7j5TLxfyJ1Cbbg=="
},
"node_modules/htmlnano": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-2.0.3.tgz",
@ -24877,6 +24883,11 @@
"react-is": "^16.7.0"
}
},
"html-prettify": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/html-prettify/-/html-prettify-1.0.7.tgz",
"integrity": "sha512-99pRsP2PV2DyWnrVibNyad7gNmzCP7AANO8jw7Z9yanWyXH9dPdqdMXGefySplroqCNdk95u7j5TLxfyJ1Cbbg=="
},
"htmlnano": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-2.0.3.tgz",

@ -57,6 +57,7 @@
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.3",
"css": "^3.0.0",
"html-prettify": "^1.0.7",
"jwt-decode": "^3.1.2",
"marked": "^4.2.5",
"mathml-to-latex": "^1.2.0",

@ -15,6 +15,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { HtmlComponent, HtmlComponentFocusable } from '../../../common/model/html.model';
import { HtmlPrettifyFactory } from '../../factory/html-prettify.factory';
import { PinComponent } from '../pin.component';
import { PinUpdateCommand } from '../../../common/command/pin/pin-update.command';
import { applyStylesToElement } from '../../../common/style.utils';
@ -69,7 +70,7 @@ export class HtmlEditComponent implements HtmlComponent<HTMLElement>, HtmlCompon
}
focusin(): void {
this.text.value = this.parent.object.data.htmlEdit || this.parent.ref.innerHTML;
this.text.value = HtmlPrettifyFactory.prettify(this.parent.object.data.htmlEdit || this.parent.ref.innerHTML);
this.el.style.display = 'flex';
}

@ -0,0 +1,23 @@
/*
* This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
* Copyright (c) 2023 Michal Szczepanski.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import prettify from 'html-prettify';
export class HtmlPrettifyFactory {
static prettify(value: string): string {
return prettify(value);
}
}