enh: note selection edit support

This commit is contained in:
Timothy Jaeryang Baek 2025-07-19 16:35:03 +04:00
parent e35f7748f6
commit 3af2938efc
4 changed files with 102 additions and 16 deletions

View file

@ -40,6 +40,11 @@ code {
width: auto;
}
.editor-selection {
background: rgba(180, 213, 255, 0.5);
border-radius: 2px;
}
.font-secondary {
font-family: 'InstrumentSerif', sans-serif;
}

View file

@ -56,6 +56,7 @@
import { Fragment, DOMParser } from 'prosemirror-model';
import { EditorState, Plugin, PluginKey, TextSelection, Selection } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';
import { Editor, Extension } from '@tiptap/core';
// Yjs imports
@ -167,6 +168,8 @@
});
};
export let onSelectionUpdate = (e) => {};
export let id = '';
export let value = '';
export let html = '';
@ -192,6 +195,8 @@
let jsonValue = '';
let mdValue = '';
let lastSelectionBookmark = null;
// Yjs setup
let ydoc = null;
let yXmlFragment = null;
@ -827,6 +832,33 @@
}
};
const SelectionDecoration = Extension.create({
name: 'selectionDecoration',
addProseMirrorPlugins() {
return [
new Plugin({
key: new PluginKey('selection'),
props: {
decorations: (state) => {
const { selection } = state;
const { focused } = this.editor;
if (focused || selection.empty) {
return null;
}
return DecorationSet.create(state.doc, [
Decoration.inline(selection.from, selection.to, {
class: 'editor-selection'
})
]);
}
}
})
];
}
});
onMount(async () => {
content = value;
@ -882,6 +914,7 @@
link: link
}),
Placeholder.configure({ placeholder }),
SelectionDecoration,
CodeBlockLowlight.configure({
lowlight
@ -1168,7 +1201,8 @@
if (files) {
editor.storage.files = files;
}
}
},
onSelectionUpdate: onSelectionUpdate
});
if (messageInput) {

View file

@ -121,6 +121,8 @@
let showPanel = false;
let selectedPanel = 'chat';
let selectedContent = null;
let showDeleteConfirm = false;
let showAccessControlModal = false;
@ -1199,6 +1201,16 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
image={true}
placeholder={$i18n.t('Write something...')}
editable={versionIdx === null && !editing}
onSelectionUpdate={({ editor }) => {
const { from, to } = editor.state.selection;
const selectedText = editor.state.doc.textBetween(from, to, ' ');
selectedContent = {
text: selectedText,
from: from,
to: to
};
}}
onChange={(content) => {
note.data.content.html = content.html;
note.data.content.md = content.md;
@ -1398,6 +1410,9 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
bind:editing
bind:streaming
bind:stopResponseFlag
{editor}
{inputElement}
{selectedContent}
{files}
onInsert={insertHandler}
onStop={stopResponseHandler}

View file

@ -56,11 +56,14 @@
const i18n = getContext('i18n');
export let editor = null;
export let editing = false;
export let streaming = false;
export let stopResponseFlag = false;
export let note = null;
export let selectedContent = null;
export let files = [];
export let messages = [];
@ -79,20 +82,23 @@
let messagesContainerElement: HTMLDivElement;
let system = '';
let editorEnabled = false;
let editEnabled = false;
let chatInputElement = null;
const DEFAULT_DOCUMENT_EDITOR_PROMPT = `You are an expert document editor.
## Task
Based on the user's instruction, update and enhance the existing notes by incorporating relevant and accurate information from the provided context in the content's primary language. Ensure all edits strictly follow the users intent.
Based on the user's instruction, update and enhance the existing notes or selection by incorporating relevant and accurate information from the provided context in the content's primary language. Ensure all edits strictly follow the users intent.
## Input Structure
- Existing notes: Enclosed within <notes></notes> XML tags.
- Additional context: Enclosed within <context></context> XML tags.
- Current note selection: Enclosed within <selection></selection> XML tags.
- Editing instruction: Provided in the user message.
## Output Instructions
- If a selection is provided, edit **only** the content within <selection></selection>. Leave unselected parts unchanged.
- If no selection is provided, edit the entire notes.
- Deliver a single, rewritten version of the notes in markdown format.
- Integrate information from the context only if it directly supports the user's instruction.
- Use clear, organized markdown elements: headings, lists, task lists ([ ]) where tasks or checklists are strongly implied, bold and italic text as appropriate.
@ -155,7 +161,7 @@ Based on the user's instruction, update and enhance the existing notes by incorp
system = '';
if (editorEnabled) {
if (editEnabled) {
system = `${DEFAULT_DOCUMENT_EDITOR_PROMPT}\n\n`;
} else {
system = `You are a helpful assistant. Please answer the user's questions based on the context provided.\n\n`;
@ -165,7 +171,8 @@ Based on the user's instruction, update and enhance the existing notes by incorp
`<notes>${note?.data?.content?.md ?? ''}</notes>` +
(files && files.length > 0
? `\n<context>${files.map((file) => `${file.name}: ${file?.file?.data?.content ?? 'Could not extract content'}\n`).join('')}</context>`
: '');
: '') +
(selectedContent ? `\n<selection>${selectedContent?.text}</selection>` : '');
const chatMessages = JSON.parse(
JSON.stringify([
@ -206,7 +213,7 @@ Based on the user's instruction, update and enhance the existing notes by incorp
controller.abort('User: Stop Response');
}
if (editorEnabled) {
if (editEnabled) {
editing = false;
streaming = false;
onEdited();
@ -222,8 +229,20 @@ Based on the user's instruction, update and enhance the existing notes by incorp
if (line !== '') {
console.log(line);
if (line === 'data: [DONE]') {
if (editorEnabled) {
if (editEnabled) {
responseMessage.content = `<status title="${$i18n.t('Edited')}" done="true" />`;
if (selectedContent && editor) {
editor.commands.insertContentAt(
{
from: selectedContent.from,
to: selectedContent.to
},
enhancedContent.html || enhancedContent.md || ''
);
selectedContent = null;
}
}
responseMessage.done = true;
@ -236,20 +255,23 @@ Based on the user's instruction, update and enhance the existing notes by incorp
if (responseMessage.content == '' && deltaContent == '\n') {
continue;
} else {
if (editorEnabled) {
if (editEnabled) {
editing = true;
streaming = true;
enhancedContent.md += deltaContent;
enhancedContent.html = marked.parse(enhancedContent.md);
if (!selectedContent) {
note.data.content.md = enhancedContent.md;
note.data.content.html = enhancedContent.html;
note.data.content.json = null;
scrollToBottomHandler();
}
responseMessage.content = `<status title="${$i18n.t('Editing')}" done="false" />`;
scrollToBottomHandler();
messages = messages;
} else {
messageContent += deltaContent;
@ -297,7 +319,7 @@ Based on the user's instruction, update and enhance the existing notes by incorp
};
onMount(async () => {
editorEnabled = localStorage.getItem('noteEditorEnabled') === 'true';
editEnabled = localStorage.getItem('noteEditEnabled') === 'true';
loaded = true;
@ -355,6 +377,16 @@ Based on the user's instruction, update and enhance the existing notes by incorp
</div>
<div class=" pb-2">
{#if selectedContent}
<div class="text-xs rounded-xl px-3.5 py-3 w-full markdown-prose-xs">
<blockquote>
<div class=" line-clamp-3">
{selectedContent?.text}
</div>
</blockquote>
</div>
{/if}
<MessageInput
bind:chatInputElement
acceptFiles={false}
@ -368,12 +400,12 @@ Based on the user's instruction, update and enhance the existing notes by incorp
<Tooltip content={$i18n.t('Edit')} placement="top">
<button
on:click|preventDefault={() => {
editorEnabled = !editorEnabled;
editEnabled = !editEnabled;
localStorage.setItem('noteEditorEnabled', editorEnabled ? 'true' : 'false');
localStorage.setItem('noteEditEnabled', editEnabled ? 'true' : 'false');
}}
type="button"
class="px-2 @xl:px-2.5 py-2 flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-800 {editorEnabled
class="px-2 @xl:px-2.5 py-2 flex gap-1.5 items-center text-sm rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-800 {editEnabled
? ' text-sky-500 dark:text-sky-300 bg-sky-50 dark:bg-sky-200/5'
: 'bg-transparent text-gray-600 dark:text-gray-300 '}"
>