apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-02 12:22:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: add support for HTML content in HitlEditPanel and PlateEditor components for only Confluence HITL tool

Browse source
This commit is contained in:
Anish Sarkar 2026-03-22 02:42:51 +05:30
parent 2bc6a0c3bc
commit a9683bb1dc
8 changed files with 131 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

40
surfsense_web/components/editor/plate-editor.tsx
View file

@ -1,7 +1,8 @@
"use client";
import { MarkdownPlugin, remarkMdx } from "@platejs/markdown";
import type { AnyPluginConfig } from "platejs";
import { slateToHtml } from "@slate-serializers/html";
import type { AnyPluginConfig, Descendant, Value } from "platejs";
import { createPlatePlugin, Key, Plate, usePlateEditor } from "platejs/react";
import { useEffect, useMemo, useRef } from "react";
import remarkGfm from "remark-gfm";
@ -14,8 +15,12 @@ import { Editor, EditorContainer } from "@/components/ui/editor";
export interface PlateEditorProps {
/** Markdown string to load as initial content */
markdown?: string;
/** HTML string to load as initial content. Takes precedence over `markdown`. */
html?: string;
/** Called when the editor content changes, with serialized markdown */
onMarkdownChange?: (markdown: string) => void;
/** Called when the editor content changes, with serialized HTML. Use with the `html` prop. */
onHtmlChange?: (html: string) => void;
/**
* Force permanent read-only mode (e.g. public/shared view).
* When true, the editor cannot be toggled to editing mode.
@ -57,7 +62,9 @@ export interface PlateEditorProps {
export function PlateEditor({
markdown,
html,
onMarkdownChange,
onHtmlChange,
readOnly = false,
placeholder = "Type...",
variant = "default",
@ -71,6 +78,7 @@ export function PlateEditor({
extraPlugins = [],
}: PlateEditorProps) {
const lastMarkdownRef = useRef(markdown);
const lastHtmlRef = useRef(html);
// Keep a stable ref to the latest onSave callback so the plugin shortcut
// always calls the most recent version without re-creating the editor.
@ -118,17 +126,28 @@ export function PlateEditor({
},
}),
],
// Use markdown deserialization for initial value if provided
value: markdown
? (editor) =>
editor.getApi(MarkdownPlugin).markdown.deserialize(escapeMdxExpressions(markdown))
: undefined,
value: html
? (editor) => editor.api.html.deserialize({ element: html }) as Value
: markdown
? (editor) =>
editor.getApi(MarkdownPlugin).markdown.deserialize(escapeMdxExpressions(markdown))
: undefined,
});
// Update editor content when html prop changes externally
useEffect(() => {
if (html !== undefined && html !== lastHtmlRef.current) {
lastHtmlRef.current = html;
const newValue = editor.api.html.deserialize({ element: html });
editor.tf.reset();
editor.tf.setValue(newValue);
}
}, [html, editor]);
// Update editor content when markdown prop changes externally
// (e.g., version switching in report panel)
useEffect(() => {
if (markdown !== undefined && markdown !== lastMarkdownRef.current) {
if (!html && markdown !== undefined && markdown !== lastMarkdownRef.current) {
lastMarkdownRef.current = markdown;
const newValue = editor
.getApi(MarkdownPlugin)
@ -136,7 +155,7 @@ export function PlateEditor({
editor.tf.reset();
editor.tf.setValue(newValue);
}
}, [markdown, editor]);
}, [html, markdown, editor]);
// When not forced read-only, the user can toggle between editing/viewing.
const canToggleMode = !readOnly;
@ -157,7 +176,10 @@ export function PlateEditor({
// (initialized to true via usePlateEditor, toggled via ModeToolbarButton).
{...(readOnly ? { readOnly: true } : {})}
onChange={({ value }) => {
if (onMarkdownChange) {
if (onHtmlChange && html) {
const serialized = slateToHtml(value as Descendant[]);
onHtmlChange(serialized);
} else if (onMarkdownChange) {
const md = editor.getApi(MarkdownPlugin).markdown.serialize({ value });
lastMarkdownRef.current = md;
onMarkdownChange(md);