Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 10:26:08 +01:00
Code Issues Packages Projects Releases Activity

chore(react/ribbon): add some CKEditor events

Browse Source
This commit is contained in:
Elian Doran
2025-08-23 11:52:40 +03:00
parent 6d37e19b40
commit 73038efccf
2 changed files with 28 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/client/src/widgets/attribute_widgets/attribute_editor.ts
View File

@@ -212,29 +212,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem
return $("<div>").html(str).text();
}
async initEditor() {
this.$widget.show();
this.$editor.on("click", (e) => this.handleEditorClick(e));
this.textEditor.model.document.on("change:data", () => this.dataChanged());
this.textEditor.editing.view.document.on(
"enter",
(event, data) => {
// disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422
data.preventDefault();
event.stop();
},
{ priority: "high" }
);
// disable spellcheck for attribute editor
const documentRoot = this.textEditor.editing.view.document.getRoot();
if (documentRoot) {
this.textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot));
}
}
dataChanged() {
this.lastUpdatedNoteId = this.noteId;

30
apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef } from "preact/hooks"
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"
import { AttributeEditor as CKEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5";
import { t } from "../../../services/i18n";
import server from "../../../services/server";
@@ -61,17 +61,43 @@ const editorConfig: EditorConfig = {
export default function AttributeEditor() {
const editorContainerRef = useRef<HTMLDivElement>(null);
const [ attributeDetailVisible, setAttributeDetailVisible ] = useState(false);
const onClick = useCallback(() => {
console.log("Clicked");
}, []);
useEffect(() => {
if (!editorContainerRef.current) return;
CKEditor.create(editorContainerRef.current, editorConfig).then((textEditor) => {
function onDataChanged() {
console.log("Data changed");
}
// Prevent newlines
textEditor.editing.view.document.on(
"enter",
(event, data) => {
// disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422
data.preventDefault();
event.stop();
},
{ priority: "high" }
);
// disable spellcheck for attribute editor
const documentRoot = textEditor.editing.view.document.getRoot();
if (documentRoot) {
textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot));
}
textEditor.model.document.on("change:data", onDataChanged);
});
}, []);
return (
<div style="position: relative; padding-top: 10px; padding-bottom: 10px">
<div style="position: relative; padding-top: 10px; padding-bottom: 10px" onClick={onClick}>
<div ref={editorContainerRef} class="attribute-list-editor" tabindex={200} />
</div>
)