chore(ts): port read_only_code

This commit is contained in:
Panagiotis Papadopoulos 2025-02-28 09:37:46 +01:00
parent 06a439e95d
commit 3fec958fb3

View File

@ -1,3 +1,5 @@
import type { EventData } from "../../components/app_context.js";
import type FNote from "../../entities/fnote.js";
import AbstractCodeTypeWidget from "./abstract_code_type_widget.js"; import AbstractCodeTypeWidget from "./abstract_code_type_widget.js";
const TPL = ` const TPL = `
@ -7,7 +9,7 @@ const TPL = `
min-height: 50px; min-height: 50px;
position: relative; position: relative;
} }
.note-detail-readonly-code-content { .note-detail-readonly-code-content {
padding: 10px; padding: 10px;
} }
@ -17,6 +19,8 @@ const TPL = `
</div>`; </div>`;
export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget { export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
$editor!: JQuery<HTMLElement>;
static getType() { static getType() {
return "readOnlyCode"; return "readOnlyCode";
} }
@ -29,12 +33,12 @@ export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
super.doRender(); super.doRender();
} }
async doRefresh(note) { async doRefresh(note: FNote | null | undefined) {
let { content } = await this.note.getBlob(); const blob = await this.note?.getBlob();
if (!blob || !note) return false;
if (note.type === "text" && this.noteContext?.viewScope?.viewMode === "source") { const isFormattable = note.type === "text" && this.noteContext?.viewScope?.viewMode === "source";
content = this.format(content); const content = isFormattable ? this.format(blob.content) : blob.content;
}
this._update(note, content); this._update(note, content);
this.show(); this.show();
@ -46,7 +50,7 @@ export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
}; };
} }
async executeWithContentElementEvent({ resolve, ntxId }) { async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
if (!this.isNoteContext(ntxId)) { if (!this.isNoteContext(ntxId)) {
return; return;
} }
@ -56,11 +60,11 @@ export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
resolve(this.$editor); resolve(this.$editor);
} }
format(html) { format(html: string) {
let indent = "\n"; let indent = "\n";
const tab = "\t"; const tab = "\t";
let i = 0; let i = 0;
let pre = []; let pre: { indent: string; tag: string }[] = [];
html = html html = html
.replace(new RegExp("<pre>((.|\\t|\\n|\\r)+)?</pre>"), function (x) { .replace(new RegExp("<pre>((.|\\t|\\n|\\r)+)?</pre>"), function (x) {
@ -69,11 +73,13 @@ export default class ReadOnlyCodeTypeWidget extends AbstractCodeTypeWidget {
}) })
.replace(new RegExp("<[^<>]+>[^<]?", "g"), function (x) { .replace(new RegExp("<[^<>]+>[^<]?", "g"), function (x) {
let ret; let ret;
let tag = /<\/?([^\s/>]+)/.exec(x)[1]; const tagRegEx = /<\/?([^\s/>]+)/.exec(x);
let tag = tagRegEx ? tagRegEx[1] : "";
let p = new RegExp("<--TEMPPRE(\\d+)/-->").exec(x); let p = new RegExp("<--TEMPPRE(\\d+)/-->").exec(x);
if (p) { if (p) {
pre[p[1]].indent = indent; const pInd = parseInt(p[1]);
pre[pInd].indent = indent;
} }
if (["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr"].indexOf(tag) >= 0) { if (["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr"].indexOf(tag) >= 0) {