mirror of
https://github.com/zadam/trilium.git
synced 2025-11-11 08:58:58 +01:00
chore(react/type_widget): add more options to editable code
This commit is contained in:
parent
79be13e6c7
commit
9480227b69
@ -4,7 +4,8 @@ import { TypeWidgetProps } from "../type_widget";
|
||||
import "./code.css";
|
||||
import CodeMirror from "./CodeMirror";
|
||||
import utils from "../../../services/utils";
|
||||
import { useEditorSpacedUpdate, useNoteBlob } from "../../react/hooks";
|
||||
import { useEditorSpacedUpdate, useNoteBlob, useTriliumOptionBool } from "../../react/hooks";
|
||||
import { t } from "../../../services/i18n";
|
||||
|
||||
export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
|
||||
const [ content, setContent ] = useState("");
|
||||
@ -29,8 +30,12 @@ export function ReadOnlyCode({ note, viewScope, ntxId }: TypeWidgetProps) {
|
||||
)
|
||||
}
|
||||
|
||||
export function EditableCode({ note, ntxId }: TypeWidgetProps) {
|
||||
export function EditableCode({ note, ntxId, debounceUpdate }: TypeWidgetProps & {
|
||||
// if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
|
||||
debounceUpdate?: boolean;
|
||||
}) {
|
||||
const editorRef = useRef<VanillaCodeMirror>(null);
|
||||
const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
|
||||
const spacedUpdate = useEditorSpacedUpdate({
|
||||
note,
|
||||
getData: () => ({ content: editorRef.current?.getText() }),
|
||||
@ -49,7 +54,13 @@ export function EditableCode({ note, ntxId }: TypeWidgetProps) {
|
||||
editorRef={editorRef}
|
||||
className="note-detail-code-editor"
|
||||
ntxId={ntxId}
|
||||
placeholder={t("editable_code.placeholder")}
|
||||
vimKeybindings={vimKeymapEnabled}
|
||||
tabIndex={300}
|
||||
onContentChanged={() => {
|
||||
if (debounceUpdate) {
|
||||
spacedUpdate.resetUpdateTimer();
|
||||
}
|
||||
spacedUpdate.scheduleUpdate();
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -14,15 +14,6 @@ const TPL = /*html*/`
|
||||
|
||||
export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
|
||||
|
||||
private debounceUpdate: boolean;
|
||||
|
||||
/**
|
||||
* @param debounceUpdate if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
|
||||
*/
|
||||
constructor(debounceUpdate: boolean = false) {
|
||||
super();
|
||||
this.debounceUpdate = debounceUpdate;
|
||||
}
|
||||
|
||||
static getType() {
|
||||
return "editableCode";
|
||||
@ -38,28 +29,9 @@ export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
|
||||
super.doRender();
|
||||
}
|
||||
|
||||
getExtraOpts(): Partial<EditorConfig> {
|
||||
return {
|
||||
placeholder: t("editable_code.placeholder"),
|
||||
vimKeybindings: options.is("vimKeymapEnabled"),
|
||||
onContentChanged: () => {
|
||||
if (this.debounceUpdate) {
|
||||
this.spacedUpdate.resetUpdateTimer();
|
||||
}
|
||||
},
|
||||
tabIndex: 300
|
||||
}
|
||||
}
|
||||
|
||||
async doRefresh(note: FNote) {
|
||||
const blob = await this.note?.getBlob();
|
||||
|
||||
await this.spacedUpdate.allowUpdateWithoutChange(() => {
|
||||
this._update(note, blob?.content ?? "");
|
||||
});
|
||||
|
||||
this.show();
|
||||
|
||||
if (this.parent && hasTouchBar) {
|
||||
this.triggerCommand("refreshTouchBar");
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user