+
;
+};
+
+export default ChatHistory;
diff --git a/packages/app-desktop/gui/ChatPanel/ChatPanel.test.tsx b/packages/app-desktop/gui/ChatPanel/ChatPanel.test.tsx
new file mode 100644
index 0000000000..83280d5043
--- /dev/null
+++ b/packages/app-desktop/gui/ChatPanel/ChatPanel.test.tsx
@@ -0,0 +1,200 @@
+import * as React from 'react';
+import { act, fireEvent, render, waitFor, within } from '@testing-library/react';
+import BaseModel from '@joplin/lib/BaseModel';
+import ChatConversation from '@joplin/lib/models/ChatConversation';
+import Note from '@joplin/lib/models/Note';
+import CommandService from '@joplin/lib/services/CommandService';
+import { runNoteChat } from '@joplin/lib/services/ai/noteChat';
+import { ChatRole } from '@joplin/lib/services/ai/types';
+import { setupDatabaseAndSynchronizer, switchClient } from '@joplin/lib/testing/test-utils';
+import appReducer, { AiChatMessage, createAppDefaultState, createAppDefaultWindowState } from '../../app.reducer';
+import ChatPanel from './ChatPanel';
+import { WindowIdContext } from '../NewWindowOrIFrame';
+import uuid from '@joplin/lib/uuid';
+import '../../utils/window/eventHandlerOverrides';
+
+jest.mock('@joplin/lib/services/ai/noteChat', () => ({ runNoteChat: jest.fn() }));
+jest.mock('./ChatMessageItem', () => ({ message }: { message: { text: string } }) =>
+
+ {
+ setSearch(event.target.value);
+ props.onSearchChange(event.target.value);
+ }}
+ />
+
+ -
+ {props.conversations.map(conversation => {
+ const current = conversation.id === props.currentConversationId;
+ const title = conversation.title || _('(untitled)');
+ const editing = conversation.id === editingId;
+ return
- {
+ if (event.target === event.currentTarget) props.onOpen(conversation.id);
+ }}
+ >
+ {editing ? (
+ setDraftTitle(event.target.value)}
+ onKeyDown={event => onTitleKeyDown(event, conversation)}
+ onBlur={stopEditing}
+ />
+ ) : (
+
+ )}
+ + + ++ ;
+ })}
+
{message.text}
);
+
+const Panel = ChatPanel.WrappedComponent;
+const message: AiChatMessage = { id: 'question', createdTime: 1, role: 'user', text: 'Question', raw: [], noteId: 'note-a', noteTitle: 'A' };
+
+const renderPanel = (props: Partial
- {props.unavailableHint}
+
);
return { content, showingMessages: false };
@@ -408,24 +528,11 @@ const ChatPanel: React.FC{props.unavailableHint}
+ {props.showToolbarButton && <>
+ {_('If you do not want to use the AI features, you may hide the toolbar button:')}
+
+ {_('(You can show it again from Settings → AI)')}
+ }
= (props) => {
>
@@ -455,14 +599,19 @@ const mapStateToProps = (state: AppState, ownProps: OwnProps) => {
return {
themeId: state.settings.theme,
available: availability.available,
+ availabilityReason: availability.reason,
unavailableHint: availability.hint ?? '',
providerType: state.settings['ai.chat.providerType'] || 'openai-compatible',
noteId,
noteTitle: note?.title || '',
noteIsEncrypted: !!note?.encryption_applied,
messages: windowState.aiChatMessages || [],
+ conversationId: windowState.aiChatConversationId,
aiDegraded: !!state.aiStatus?.degraded,
+ showToolbarButton: !!state.settings['ai.chat.showToolbarButton'],
};
};
-export default connect(mapStateToProps)(ChatPanel);
+const ConversationPanel: React.FC{_('AI Chat')}
- {renderHeaderActions()} + {props.availabilityReason !== AvailabilityReason.Disabled && ( + + )} + {historyOpen && ( + // Placed right after its button so that Tab moves from the button into the popup +**not bold**' },
])('renderInlineMarkdown should render $input', ({ input, expected, inner }) => {
const div = document.createElement('div');
renderInlineMarkdown(div, input);
@@ -202,4 +209,63 @@ describe('renderTables', () => {
}
});
+ test.each([
+ '**[label](https://example.com)**',
+ '**bold**',
+ '*italic*',
+ '`code`',
+ ])('focus/blur cycles should not degrade cell markdown: %s', async (cellSource) => {
+ jest.useFakeTimers();
+ let editor: EditorView | null = null;
+ try {
+ const markdown = `| a | b |\n|---|---|\n| ${cellSource} | y |`;
+ editor = await createEditor(markdown);
+ document.body.appendChild(editor.dom);
+
+ // Each cycle re-renders the cell without editing it.
+ for (let i = 0; i < 3; i++) {
+ const cell = findCellTextDivs(editor)[2];
+ focusCell(cell);
+ cell.dispatchEvent(new Event('blur'));
+ jest.advanceTimersByTime(200);
+ jest.runOnlyPendingTimers();
+
+ const rendered = findCellTextDivs(editor)[2];
+ expect(rendered.classList.contains('cm-tw-raw')).toBe(false);
+ }
+
+ expect(editor.state.doc.toString()).toContain(cellSource);
+ } finally {
+ editor?.destroy();
+ jest.useRealTimers();
+ }
+ });
+
+ test('a blurred cell should not write its rendered text back to the document', async () => {
+ jest.useFakeTimers();
+ let editor: EditorView | null = null;
+ try {
+ editor = await createEditor('| a | b |\n|---|---|\n| **[x](http://e.com)** | y |');
+ document.body.appendChild(editor.dom);
+
+ const cell = findCellTextDivs(editor)[2];
+ focusCell(cell);
+ cell.dispatchEvent(new Event('blur'));
+ jest.advanceTimersByTime(200);
+ jest.runOnlyPendingTimers();
+
+ // An input event on the now-rendered cell, as a stray mutation
+ // would fire, must not harvest its stripped text.
+ const rendered = findCellTextDivs(editor)[2];
+ rendered.dispatchEvent(new Event('input'));
+ jest.advanceTimersByTime(700);
+ jest.runOnlyPendingTimers();
+
+ expect(editor.state.doc.toString()).toContain('**[x](http://e.com)**');
+ } finally {
+ editor?.destroy();
+ jest.useRealTimers();
+ }
+ });
+
});
diff --git a/packages/editor/CodeMirror/extensions/rendering/renderTables.ts b/packages/editor/CodeMirror/extensions/rendering/renderTables.ts
index a668afe123..2339a4ea2a 100644
--- a/packages/editor/CodeMirror/extensions/rendering/renderTables.ts
+++ b/packages/editor/CodeMirror/extensions/rendering/renderTables.ts
@@ -27,6 +27,8 @@ const W = 'cm-tw';
const CELL = 'cm-tw-c';
const HDR = 'cm-tw-h';
const CTX = 'cm-tw-ctx';
+// Marks a cell holding raw source. Only these may be read back into the model.
+const RAW = 'cm-tw-raw';
// Cache for rendered table widget heights so CodeMirror can estimate
// heights correctly for scroll position and coordinate mapping.
@@ -59,45 +61,54 @@ const escapeHtml = (s: string): string => {
// shown as plain |. The assembled HTML is run through DOMPurify before
// insertion, so unsafe URL schemes (javascript:, data:, ...) and any tags
// or attributes that slipped through the regex are removed.
+// Wrapper contents recurse so nested markup works (**[label](url)** is a bold
+// link). Code spans do not: their contents are literal in markdown.
+const inlineMarkdownToHtml = (segment: string): string => {
+ // Single regex with alternatives, scanned left-to-right. Each branch
+ // captures its inner content. Single * and _ emphasis use word-
+ // boundary guards so identifiers like `foo_bar_baz` or `a*b*c` are
+ // not rendered as emphasis.
+ const re = /\*\*([\s\S]+?)\*\*|__([\s\S]+?)__|(? lastIdx) {
+ parts.push(escapeHtml(segment.slice(lastIdx, m.index)));
+ }
+ if (m[1] !== undefined || m[2] !== undefined) {
+ parts.push(`${inlineMarkdownToHtml((m[1] ?? m[2])!)}`);
+ } else if (m[3] !== undefined || m[4] !== undefined) {
+ parts.push(`${inlineMarkdownToHtml((m[3] ?? m[4])!)}`);
+ } else if (m[5] !== undefined) {
+ parts.push(`${escapeHtml(m[5])}`);
+ } else if (m[6] !== undefined) {
+ parts.push(`for soft breaks. const normalised = text.replace(/\\\|/g, '|'); - const segments = normalised.split(/
'); - const segment = segments[s]; - // Single regex with alternatives, scanned left-to-right. Each branch - // captures its inner content. Single * and _ emphasis use word- - // boundary guards so identifiers like `foo_bar_baz` or `a*b*c` are - // not rendered as emphasis. - const re = /\*\*([^*]+)\*\*|__([^_]+)__|(? lastIdx) { - parts.push(escapeHtml(segment.slice(lastIdx, m.index))); - } - if (m[1] !== undefined || m[2] !== undefined) { - parts.push(`${escapeHtml((m[1] ?? m[2])!)}`); - } else if (m[3] !== undefined || m[4] !== undefined) { - parts.push(`${escapeHtml((m[3] ?? m[4])!)}`); - } else if (m[5] !== undefined) { - parts.push(`
${escapeHtml(m[5])}`);
- } else if (m[6] !== undefined) {
- parts.push(`'); + parent.innerHTML = sanitizeHtml(html); }; +// Stashed on the container so destroy() can reach toDOM()'s closure state. +const teardownKey = Symbol('tableWidgetTeardown'); +type TableWidgetContainer = HTMLElement & { [teardownKey]?: ()=> void }; + class TableWidget extends WidgetType { public constructor( private tableText: string, @@ -202,6 +213,9 @@ class TableWidget extends WidgetType { let scrollbarDragging = false; let lastFocusedTextDiv: HTMLElement | null = null; + // Disconnected on destroy so a detached DOM cannot still schedule syncs. + const cellObservers: MutationObserver[] = []; + // Debounced dispatch so the document source stays in sync with cell // edits — important so the preview pane reflects in-cell changes // (e.g. deleting an image) without waiting for blur or a structural @@ -214,19 +228,14 @@ class TableWidget extends WidgetType { } }; - // Sync the focused cell's current text into the table model. Other - // cells are kept in sync continuously via their oninput handler, so - // this is just a final read of whichever cell is being edited right - // now. Reading textContent of an unfocused cell would be wrong — - // rendered cells have stripped markdown markers (** etc). + // Sync the raw-mode cell's text into the model. Reading a rendered cell + // would drop one layer of markup per round-trip, since its textContent + // has the markers stripped (#16498). const syncDirtyCells = () => { - const active = doc.activeElement as HTMLElement | null; - if (!active || !active.classList.contains('cm-tw-text')) return; - if (!container.contains(active)) return; for (let ri = 0; ri < allCells.length; ri++) { for (let ci = 0; ci < allCells[ri].length; ci++) { const td = allCells[ri][ci].querySelector('.cm-tw-text') as HTMLElement; - if (td !== active) continue; + if (!td || !td.classList.contains(RAW)) continue; const v = (td.textContent || '').trim().replace(/\n/g, '
').replace(/\|/g, '\\|'); const isH = ri === 0; if (isH) table.header.cells[ci].content = v; @@ -250,6 +259,37 @@ class TableWidget extends WidgetType { // swap to the raw source so the user edits the markdown text. renderInlineMarkdown(textDiv, text); + // Track IME composition so we don't rebuild the cell DOM + // mid-composition — rebuilding would cancel the IME and drop + // any in-progress candidates. + let isComposing = false; + + // Some browsers do not fire `input` reliably when non-text nodes + // (e.g.
').replace(/\|/g, '\\|'); if (isHdr) table.header.cells[c].content = v; @@ -277,6 +318,7 @@ class TableWidget extends WidgetType { }; const scheduleLiveSync = () => { + if (!textDiv.classList.contains(RAW)) return; pushToModel(); cancelLiveSync(); const offset = caretOffset(); @@ -330,10 +372,6 @@ class TableWidget extends WidgetType { }, 500); }; - // Track IME composition so we don't rebuild the cell DOM - // mid-composition — rebuilding would cancel the IME and drop - // any in-progress candidates. - let isComposing = false; textDiv.addEventListener('compositionstart', () => { isComposing = true; cancelLiveSync(); @@ -347,14 +385,6 @@ class TableWidget extends WidgetType { if (isComposing) return; scheduleLiveSync(); }; - // Some browsers do not fire `input` reliably when non-text nodes - // (e.g.