gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 17:08:58 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

chore(react/type_widget): insert date/time to text

Browse Source
This commit is contained in:
Elian Doran 2025-09-22 18:00:12 +03:00
parent a26ee0d769
commit db46ca0a76
No known key found for this signature in database
2 changed files with 36 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
apps/client/src/widgets/type_widgets/text/EditableText.tsx
View File

@ -2,12 +2,14 @@ import { useRef, useState } from "preact/hooks";
import dialog from "../../../services/dialog";
import toast from "../../../services/toast";
import utils, { deferred, isMobile } from "../../../services/utils";
import { useEditorSpacedUpdate, useNoteLabel, useTriliumEvent, useTriliumOption } from "../../react/hooks";
import { useEditorSpacedUpdate, useKeyboardShortcuts, useNoteLabel, useTriliumEvent, useTriliumOption } from "../../react/hooks";
import { TypeWidgetProps } from "../type_widget";
import CKEditorWithWatchdog from "./CKEditorWithWatchdog";
import "./EditableText.css";
import { CKTextEditor, ClassicEditor, EditorWatchdog } from "@triliumnext/ckeditor5";
import Component from "../../../components/component";
import { RefObject } from "preact";
import options from "../../../services/options";
/**
* The editor can operate into two distinct modes:
@ -15,7 +17,8 @@ import Component from "../../../components/component";
* - Ballon block mode, in which there is a floating toolbar for the selected text, but another floating button for the entire block (i.e. paragraph).
* - Decoupled mode, in which the editing toolbar is actually added on the client side (in {@link ClassicEditorToolbar}), see https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for an example on how the decoupled editor works.
*/
export default function EditableText({ note, parentComponent, ntxId }: TypeWidgetProps) {
export default function EditableText({ note, parentComponent, ntxId, noteContext }: TypeWidgetProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [ content, setContent ] = useState<string>();
const watchdogRef = useRef<EditorWatchdog>(null);
const [ language ] = useNoteLabel(note, "language");
@ -59,14 +62,43 @@ export default function EditableText({ note, parentComponent, ntxId }: TypeWidge
useTriliumEvent("focusOnDetail", async ({ ntxId: eventNtxId }) => {
if (eventNtxId !== ntxId) return;
const editor = await waitForEditor();
editor?.editing.view.focus();
});
async function waitForEditor() {
await initialized.current;
const editor = watchdogRef.current?.editor;
if (!editor) return;
editor.editing.view.focus();
return editor;
}
async function addTextToEditor(text: string) {
const editor = await waitForEditor();
editor?.model.change((writer) => {
const insertPosition = editor.model.document.selection.getLastPosition();
if (insertPosition) {
writer.insertText(text, insertPosition);
}
});
}
useKeyboardShortcuts("text-detail", containerRef, parentComponent);
useTriliumEvent("insertDateTimeToText", ({ ntxId: eventNtxId }) => {
if (eventNtxId !== ntxId) return;
const date = new Date();
const customDateTimeFormat = options.get("customDateTimeFormat");
const dateString = utils.formatDateTime(date, customDateTimeFormat);
addTextToEditor(dateString);
});
useTriliumEvent("addTextToActiveEditor", ({ text }) => {
if (!noteContext?.isActive()) return;
addTextToEditor(text);
});
return (
<div class="note-detail-editable-text note-detail-printable">
<div ref={containerRef} class="note-detail-editable-text note-detail-printable">
{note && <CKEditorWithWatchdog
className="note-detail-editable-text-editor use-tn-links" tabIndex={300}
content={content}

29
apps/client/src/widgets/type_widgets_old/editable_text.ts
View File

@ -29,8 +29,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
this.initialized = this.initEditor();
keyboardActionService.setupActionsForElement("text-detail", this.$widget, this);
this.setupImageOpening(false);
super.doRender();
@ -57,14 +55,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
return this.watchdog?.editor;
}
insertDateTimeToTextCommand() {
const date = new Date();
const customDateTimeFormat = options.get("customDateTimeFormat");
const dateString = utils.formatDateTime(date, customDateTimeFormat);
this.addTextToEditor(dateString);
}
async addLinkToEditor(linkHref: string, linkTitle: string) {
await this.initialized;
@ -76,25 +66,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
});
}
async addTextToEditor(text: string) {
await this.initialized;
this.watchdog.editor?.model.change((writer) => {
const insertPosition = this.watchdog.editor?.model.document.selection.getLastPosition();
if (insertPosition) {
writer.insertText(text, insertPosition);
}
});
}
addTextToActiveEditorEvent({ text }: EventData<"addTextToActiveEditor">) {
if (!this.isActive()) {
return;
}
this.addTextToEditor(text);
}
async addLink(notePath: string, linkTitle: string | null, externalLink: boolean = false) {
await this.initialized;