Bryan Frimin
@@ -1,461 +0,0 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
||||
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
||||
import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
|
||||
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
|
||||
import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
|
||||
import { ListItemNode, ListNode } from "@lexical/list";
|
||||
import { CodeHighlightNode, CodeNode } from "@lexical/code";
|
||||
import { AutoLinkNode, LinkNode } from "@lexical/link";
|
||||
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
|
||||
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
||||
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
||||
import { TRANSFORMERS } from "@lexical/markdown";
|
||||
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
|
||||
import { $getRoot, $insertNodes, EditorState, LexicalEditor } from "lexical";
|
||||
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
|
||||
import {
|
||||
Bold,
|
||||
Italic,
|
||||
Underline,
|
||||
List,
|
||||
ListOrdered,
|
||||
Heading1,
|
||||
Heading2,
|
||||
} from "lucide-react";
|
||||
import { $isRangeSelection, FORMAT_TEXT_COMMAND, $getSelection } from "lexical";
|
||||
import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
|
||||
import { $setBlocksType } from "@lexical/selection";
|
||||
import { $createParagraphNode } from "lexical";
|
||||
import {
|
||||
INSERT_ORDERED_LIST_COMMAND,
|
||||
INSERT_UNORDERED_LIST_COMMAND,
|
||||
} from "@lexical/list";
|
||||
|
||||
import "./PolicyEditor.css";
|
||||
|
||||
// Custom plugin to preserve scroll position
|
||||
function ScrollPlugin() {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
const scrollRef = useRef<number>(0);
|
||||
const editorRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
|
||||
// Skip if there are no changes
|
||||
if (dirtyElements.size === 0 && dirtyLeaves.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only run after the DOM has been updated
|
||||
setTimeout(() => {
|
||||
if (!editorRef.current) {
|
||||
const rootElement = editor.getRootElement();
|
||||
if (rootElement) {
|
||||
// Find the actual contentEditable element
|
||||
const contentEditables = rootElement.getElementsByClassName(
|
||||
"policy-editor-input"
|
||||
);
|
||||
if (contentEditables.length > 0) {
|
||||
editorRef.current = contentEditables[0] as HTMLElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (editorRef.current) {
|
||||
// After updates, restore the scroll position
|
||||
editorRef.current.scrollTop = scrollRef.current;
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}, [editor]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editorRef.current) {
|
||||
const rootElement = editor.getRootElement();
|
||||
if (rootElement) {
|
||||
const contentEditables = rootElement.getElementsByClassName(
|
||||
"policy-editor-input"
|
||||
);
|
||||
if (contentEditables.length > 0) {
|
||||
editorRef.current = contentEditables[0] as HTMLElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const saveScrollPosition = () => {
|
||||
if (editorRef.current) {
|
||||
scrollRef.current = editorRef.current.scrollTop;
|
||||
}
|
||||
};
|
||||
|
||||
if (editorRef.current) {
|
||||
editorRef.current.addEventListener("scroll", saveScrollPosition);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (editorRef.current) {
|
||||
editorRef.current.removeEventListener("scroll", saveScrollPosition);
|
||||
}
|
||||
};
|
||||
}, [editor]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Theme for the editor
|
||||
const theme = {
|
||||
ltr: "ltr",
|
||||
rtl: "rtl",
|
||||
paragraph: "editor-paragraph",
|
||||
quote: "editor-quote",
|
||||
heading: {
|
||||
h1: "editor-heading-h1",
|
||||
h2: "editor-heading-h2",
|
||||
h3: "editor-heading-h3",
|
||||
h4: "editor-heading-h4",
|
||||
h5: "editor-heading-h5",
|
||||
},
|
||||
list: {
|
||||
nested: {
|
||||
listitem: "editor-nested-listitem",
|
||||
},
|
||||
ol: "editor-list-ol",
|
||||
ul: "editor-list-ul",
|
||||
listitem: "editor-listitem",
|
||||
listitemChecked: "editor-listitem--checked",
|
||||
listitemUnchecked: "editor-listitem--unchecked",
|
||||
},
|
||||
image: "editor-image",
|
||||
link: "editor-link",
|
||||
text: {
|
||||
bold: "editor-text-bold",
|
||||
italic: "editor-text-italic",
|
||||
underline: "editor-text-underline",
|
||||
strikethrough: "editor-text-strikethrough",
|
||||
underlineStrikethrough: "editor-text-underlineStrikethrough",
|
||||
code: "editor-text-code",
|
||||
},
|
||||
code: "editor-code",
|
||||
codeHighlight: {
|
||||
atrule: "editor-tokenAttr",
|
||||
attr: "editor-tokenAttr",
|
||||
boolean: "editor-tokenProperty",
|
||||
builtin: "editor-tokenSelector",
|
||||
cdata: "editor-tokenComment",
|
||||
char: "editor-tokenSelector",
|
||||
class: "editor-tokenFunction",
|
||||
"class-name": "editor-tokenFunction",
|
||||
comment: "editor-tokenComment",
|
||||
constant: "editor-tokenProperty",
|
||||
deleted: "editor-tokenProperty",
|
||||
doctype: "editor-tokenComment",
|
||||
entity: "editor-tokenOperator",
|
||||
function: "editor-tokenFunction",
|
||||
important: "editor-tokenVariable",
|
||||
inserted: "editor-tokenSelector",
|
||||
keyword: "editor-tokenAttr",
|
||||
namespace: "editor-tokenVariable",
|
||||
number: "editor-tokenProperty",
|
||||
operator: "editor-tokenOperator",
|
||||
prolog: "editor-tokenComment",
|
||||
property: "editor-tokenProperty",
|
||||
punctuation: "editor-tokenPunctuation",
|
||||
regex: "editor-tokenVariable",
|
||||
selector: "editor-tokenSelector",
|
||||
string: "editor-tokenSelector",
|
||||
symbol: "editor-tokenProperty",
|
||||
tag: "editor-tokenProperty",
|
||||
url: "editor-tokenOperator",
|
||||
variable: "editor-tokenVariable",
|
||||
},
|
||||
};
|
||||
|
||||
// Simple Toolbar Plugin
|
||||
function ToolbarPlugin() {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
const [isBold, setIsBold] = useState(false);
|
||||
const [isItalic, setIsItalic] = useState(false);
|
||||
const [isUnderline, setIsUnderline] = useState(false);
|
||||
const [blockType, setBlockType] = useState("paragraph");
|
||||
|
||||
useEffect(() => {
|
||||
return editor.registerUpdateListener(({ editorState }) => {
|
||||
editorState.read(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
setIsBold(selection.hasFormat("bold"));
|
||||
setIsItalic(selection.hasFormat("italic"));
|
||||
setIsUnderline(selection.hasFormat("underline"));
|
||||
|
||||
const anchorNode = selection.anchor.getNode();
|
||||
const element = anchorNode.getTopLevelElementOrThrow();
|
||||
if ($isHeadingNode(element)) {
|
||||
setBlockType(element.getTag());
|
||||
} else {
|
||||
setBlockType("paragraph");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}, [editor]);
|
||||
|
||||
const formatHeading = (headingSize: "h1" | "h2") => {
|
||||
if (blockType !== headingSize) {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
$setBlocksType(selection, () => $createHeadingNode(headingSize));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
$setBlocksType(selection, () => $createParagraphNode());
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const formatBulletList = () => {
|
||||
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
|
||||
};
|
||||
|
||||
const formatNumberedList = () => {
|
||||
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="toolbar">
|
||||
<button
|
||||
onClick={() => {
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
||||
}}
|
||||
className={isBold ? "active" : ""}
|
||||
title="Bold"
|
||||
type="button"
|
||||
aria-label="Format text as bold"
|
||||
>
|
||||
<Bold className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
||||
}}
|
||||
className={isItalic ? "active" : ""}
|
||||
title="Italic"
|
||||
type="button"
|
||||
aria-label="Format text as italics"
|
||||
>
|
||||
<Italic className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
||||
}}
|
||||
className={isUnderline ? "active" : ""}
|
||||
title="Underline"
|
||||
type="button"
|
||||
aria-label="Format text to underlined"
|
||||
>
|
||||
<Underline className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<button
|
||||
onClick={() => formatHeading("h1")}
|
||||
className={blockType === "h1" ? "active" : ""}
|
||||
title="Heading 1"
|
||||
type="button"
|
||||
aria-label="Format as heading 1"
|
||||
>
|
||||
<Heading1 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => formatHeading("h2")}
|
||||
className={blockType === "h2" ? "active" : ""}
|
||||
title="Heading 2"
|
||||
type="button"
|
||||
aria-label="Format as heading 2"
|
||||
>
|
||||
<Heading2 className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<button
|
||||
onClick={formatBulletList}
|
||||
title="Bullet List"
|
||||
type="button"
|
||||
aria-label="Format as bullet list"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={formatNumberedList}
|
||||
title="Numbered List"
|
||||
type="button"
|
||||
aria-label="Format as numbered list"
|
||||
>
|
||||
<ListOrdered className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Import HTML Plugin
|
||||
function HtmlImportPlugin({
|
||||
initialHtml,
|
||||
setEditor,
|
||||
}: {
|
||||
initialHtml: string;
|
||||
setEditor: (editor: LexicalEditor) => void;
|
||||
}) {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
const isInitializedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(
|
||||
"HtmlImportPlugin effect running, editor:",
|
||||
!!editor,
|
||||
"initialHtml:",
|
||||
initialHtml
|
||||
? initialHtml.substring(0, 50) + (initialHtml.length > 50 ? "..." : "")
|
||||
: "empty"
|
||||
);
|
||||
|
||||
if (editor && !isInitializedRef.current) {
|
||||
setEditor(editor);
|
||||
isInitializedRef.current = true;
|
||||
|
||||
editor.update(() => {
|
||||
try {
|
||||
if (initialHtml && initialHtml.trim() !== "") {
|
||||
console.log("Importing HTML content into editor");
|
||||
const parser = new DOMParser();
|
||||
const dom = parser.parseFromString(initialHtml, "text/html");
|
||||
const nodes = $generateNodesFromDOM(editor, dom);
|
||||
|
||||
const root = $getRoot();
|
||||
root.clear();
|
||||
$insertNodes(nodes);
|
||||
console.log("HTML content imported successfully");
|
||||
} else {
|
||||
// If no initial content, ensure we have at least a paragraph
|
||||
const root = $getRoot();
|
||||
if (root.getChildrenSize() === 0) {
|
||||
const paragraph = $createParagraphNode();
|
||||
root.append(paragraph);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error importing HTML content:", error);
|
||||
// Ensure we have at least a paragraph on error
|
||||
const root = $getRoot();
|
||||
if (root.getChildrenSize() === 0) {
|
||||
const paragraph = $createParagraphNode();
|
||||
root.append(paragraph);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [editor, initialHtml, setEditor]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export interface PolicyEditorProps {
|
||||
initialContent: string;
|
||||
onChange: (html: string) => void;
|
||||
}
|
||||
|
||||
export default function PolicyEditor({
|
||||
initialContent,
|
||||
onChange,
|
||||
}: PolicyEditorProps) {
|
||||
const [editor, setEditor] = useState<LexicalEditor | null>(null);
|
||||
const initialContentRef = useRef(initialContent);
|
||||
|
||||
// Update reference if initialContent changes
|
||||
useEffect(() => {
|
||||
initialContentRef.current = initialContent;
|
||||
}, [initialContent]);
|
||||
|
||||
console.log("PolicyEditor rendering with initialContent:", initialContent);
|
||||
|
||||
// Function to handle editor changes
|
||||
const handleEditorChange = (editorState: EditorState) => {
|
||||
if (!editor) return;
|
||||
|
||||
editorState.read(() => {
|
||||
const htmlString = $generateHtmlFromNodes(editor);
|
||||
console.log(
|
||||
"Editor content changed:",
|
||||
htmlString.substring(0, 100) + (htmlString.length > 100 ? "..." : "")
|
||||
);
|
||||
onChange(htmlString);
|
||||
});
|
||||
};
|
||||
|
||||
// Lexical Editor Configuration
|
||||
const initialConfig = {
|
||||
namespace: "PolicyEditor",
|
||||
theme,
|
||||
onError: (error: Error) => {
|
||||
console.error("Lexical Editor Error:", error);
|
||||
},
|
||||
nodes: [
|
||||
HeadingNode,
|
||||
QuoteNode,
|
||||
ListNode,
|
||||
ListItemNode,
|
||||
CodeNode,
|
||||
CodeHighlightNode,
|
||||
TableNode,
|
||||
TableCellNode,
|
||||
TableRowNode,
|
||||
AutoLinkNode,
|
||||
LinkNode,
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="policy-editor-container">
|
||||
<LexicalComposer initialConfig={initialConfig}>
|
||||
<div className="policy-editor">
|
||||
<ToolbarPlugin />
|
||||
<div className="policy-editor-inner">
|
||||
<RichTextPlugin
|
||||
contentEditable={
|
||||
<ContentEditable className="policy-editor-input" />
|
||||
}
|
||||
placeholder={
|
||||
<div className="policy-editor-placeholder">
|
||||
Enter policy content...
|
||||
</div>
|
||||
}
|
||||
ErrorBoundary={LexicalErrorBoundary}
|
||||
/>
|
||||
<HistoryPlugin />
|
||||
<AutoFocusPlugin />
|
||||
<ListPlugin />
|
||||
<LinkPlugin />
|
||||
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
|
||||
<OnChangePlugin onChange={handleEditorChange} />
|
||||
<HtmlImportPlugin
|
||||
initialHtml={initialContentRef.current}
|
||||
setEditor={setEditor}
|
||||
/>
|
||||
<ScrollPlugin />
|
||||
</div>
|
||||
</div>
|
||||
</LexicalComposer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,405 +0,0 @@
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import {
|
||||
$createParagraphNode,
|
||||
$getSelection,
|
||||
$isRangeSelection,
|
||||
FORMAT_TEXT_COMMAND,
|
||||
UNDO_COMMAND,
|
||||
REDO_COMMAND,
|
||||
Point,
|
||||
RangeSelection,
|
||||
} from "lexical";
|
||||
import {
|
||||
$createHeadingNode,
|
||||
$createQuoteNode,
|
||||
$isHeadingNode,
|
||||
} from "@lexical/rich-text";
|
||||
import {
|
||||
$isListNode,
|
||||
INSERT_ORDERED_LIST_COMMAND,
|
||||
INSERT_UNORDERED_LIST_COMMAND,
|
||||
ListNode,
|
||||
REMOVE_LIST_COMMAND,
|
||||
} from "@lexical/list";
|
||||
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
|
||||
import {
|
||||
$getSelectionStyleValueForProperty,
|
||||
$patchStyleText,
|
||||
$setBlocksType,
|
||||
} from "@lexical/selection";
|
||||
import { $getNearestNodeOfType } from "@lexical/utils";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
Bold,
|
||||
Italic,
|
||||
Underline,
|
||||
Strikethrough,
|
||||
List,
|
||||
ListOrdered,
|
||||
Link,
|
||||
Quote,
|
||||
Heading1,
|
||||
Heading2,
|
||||
Heading3,
|
||||
Undo,
|
||||
Redo,
|
||||
AlignLeft,
|
||||
AlignCenter,
|
||||
AlignRight,
|
||||
AlignJustify,
|
||||
} from "lucide-react";
|
||||
|
||||
export function ToolbarPlugin() {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
const [activeEditor] = useState(editor);
|
||||
const [isBold, setIsBold] = useState(false);
|
||||
const [isItalic, setIsItalic] = useState(false);
|
||||
const [isUnderline, setIsUnderline] = useState(false);
|
||||
const [isStrikethrough, setIsStrikethrough] = useState(false);
|
||||
const [isLink, setIsLink] = useState(false);
|
||||
const [blockType, setBlockType] = useState("paragraph");
|
||||
const [, setSelectedElementKey] = useState<string | null>(null);
|
||||
const [textAlignment, setTextAlignment] = useState<
|
||||
"left" | "center" | "right" | "justify"
|
||||
>("left");
|
||||
|
||||
const updateToolbar = useCallback(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
setIsBold(selection.hasFormat("bold"));
|
||||
setIsItalic(selection.hasFormat("italic"));
|
||||
setIsUnderline(selection.hasFormat("underline"));
|
||||
setIsStrikethrough(selection.hasFormat("strikethrough"));
|
||||
|
||||
// Check for links
|
||||
const node = getSelectedNode(selection);
|
||||
const parent = node.getParent();
|
||||
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
||||
setIsLink(true);
|
||||
} else {
|
||||
setIsLink(false);
|
||||
}
|
||||
|
||||
// Get text alignment
|
||||
const alignment = $getSelectionStyleValueForProperty(
|
||||
selection,
|
||||
"text-align",
|
||||
"left"
|
||||
) as "left" | "center" | "right" | "justify";
|
||||
setTextAlignment(alignment);
|
||||
|
||||
// Update block type
|
||||
const anchorNode = selection.anchor.getNode();
|
||||
const element =
|
||||
anchorNode.getKey() === "root"
|
||||
? anchorNode
|
||||
: anchorNode.getTopLevelElementOrThrow();
|
||||
const elementKey = element.getKey();
|
||||
const elementDOM = activeEditor.getElementByKey(elementKey);
|
||||
|
||||
setSelectedElementKey(elementKey);
|
||||
|
||||
if (elementDOM !== null) {
|
||||
if ($isHeadingNode(element)) {
|
||||
const tag = element.getTag();
|
||||
setBlockType(tag);
|
||||
} else if ($isListNode(element)) {
|
||||
const parentList = $getNearestNodeOfType<ListNode>(
|
||||
anchorNode,
|
||||
ListNode
|
||||
);
|
||||
const listType = parentList
|
||||
? parentList.getListType()
|
||||
: element.getListType();
|
||||
setBlockType(listType);
|
||||
} else {
|
||||
setBlockType("paragraph");
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [activeEditor]);
|
||||
|
||||
useEffect(() => {
|
||||
return editor.registerUpdateListener(({ editorState }) => {
|
||||
editorState.read(() => {
|
||||
updateToolbar();
|
||||
});
|
||||
});
|
||||
}, [editor, updateToolbar]);
|
||||
|
||||
const formatHeading = (headingSize: "h1" | "h2" | "h3") => {
|
||||
if (blockType !== headingSize) {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
$setBlocksType(selection, () => $createHeadingNode(headingSize));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
$setBlocksType(selection, () => $createParagraphNode());
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const formatQuote = () => {
|
||||
if (blockType !== "quote") {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
$setBlocksType(selection, () => $createQuoteNode());
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
$setBlocksType(selection, () => $createParagraphNode());
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const formatBulletList = () => {
|
||||
if (blockType !== "ul") {
|
||||
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
|
||||
} else {
|
||||
editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const formatNumberedList = () => {
|
||||
if (blockType !== "ol") {
|
||||
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
|
||||
} else {
|
||||
editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const formatLink = () => {
|
||||
if (!isLink) {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
const url = prompt("Enter URL", "https://");
|
||||
if (url) {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
|
||||
}
|
||||
};
|
||||
|
||||
const formatTextAlignment = (
|
||||
alignment: "left" | "center" | "right" | "justify"
|
||||
) => {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
$patchStyleText(selection, {
|
||||
"text-align": alignment,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="toolbar">
|
||||
<button
|
||||
onClick={() => {
|
||||
activeEditor.dispatchCommand(UNDO_COMMAND, undefined);
|
||||
}}
|
||||
title="Undo"
|
||||
type="button"
|
||||
aria-label="Undo"
|
||||
>
|
||||
<Undo className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
activeEditor.dispatchCommand(REDO_COMMAND, undefined);
|
||||
}}
|
||||
title="Redo"
|
||||
type="button"
|
||||
aria-label="Redo"
|
||||
>
|
||||
<Redo className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
||||
}}
|
||||
className={isBold ? "active" : ""}
|
||||
title="Bold"
|
||||
type="button"
|
||||
aria-label="Format text as bold"
|
||||
>
|
||||
<Bold className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
||||
}}
|
||||
className={isItalic ? "active" : ""}
|
||||
title="Italic"
|
||||
type="button"
|
||||
aria-label="Format text as italics"
|
||||
>
|
||||
<Italic className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
||||
}}
|
||||
className={isUnderline ? "active" : ""}
|
||||
title="Underline"
|
||||
type="button"
|
||||
aria-label="Format text to underlined"
|
||||
>
|
||||
<Underline className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
|
||||
}}
|
||||
className={isStrikethrough ? "active" : ""}
|
||||
title="Strikethrough"
|
||||
type="button"
|
||||
aria-label="Format text with a strikethrough"
|
||||
>
|
||||
<Strikethrough className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={formatLink}
|
||||
className={isLink ? "active" : ""}
|
||||
title="Link"
|
||||
type="button"
|
||||
aria-label="Insert link"
|
||||
>
|
||||
<Link className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<button
|
||||
onClick={() => formatHeading("h1")}
|
||||
className={blockType === "h1" ? "active" : ""}
|
||||
title="Heading 1"
|
||||
type="button"
|
||||
aria-label="Format as heading 1"
|
||||
>
|
||||
<Heading1 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => formatHeading("h2")}
|
||||
className={blockType === "h2" ? "active" : ""}
|
||||
title="Heading 2"
|
||||
type="button"
|
||||
aria-label="Format as heading 2"
|
||||
>
|
||||
<Heading2 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => formatHeading("h3")}
|
||||
className={blockType === "h3" ? "active" : ""}
|
||||
title="Heading 3"
|
||||
type="button"
|
||||
aria-label="Format as heading 3"
|
||||
>
|
||||
<Heading3 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={formatBulletList}
|
||||
className={blockType === "ul" ? "active" : ""}
|
||||
title="Bullet List"
|
||||
type="button"
|
||||
aria-label="Format as bullet list"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={formatNumberedList}
|
||||
className={blockType === "ol" ? "active" : ""}
|
||||
title="Numbered List"
|
||||
type="button"
|
||||
aria-label="Format as numbered list"
|
||||
>
|
||||
<ListOrdered className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={formatQuote}
|
||||
className={blockType === "quote" ? "active" : ""}
|
||||
title="Quote"
|
||||
type="button"
|
||||
aria-label="Format as blockquote"
|
||||
>
|
||||
<Quote className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<div className="divider" />
|
||||
|
||||
<button
|
||||
onClick={() => formatTextAlignment("left")}
|
||||
className={textAlignment === "left" ? "active" : ""}
|
||||
title="Align Left"
|
||||
type="button"
|
||||
aria-label="Align text left"
|
||||
>
|
||||
<AlignLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => formatTextAlignment("center")}
|
||||
className={textAlignment === "center" ? "active" : ""}
|
||||
title="Align Center"
|
||||
type="button"
|
||||
aria-label="Align text center"
|
||||
>
|
||||
<AlignCenter className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => formatTextAlignment("right")}
|
||||
className={textAlignment === "right" ? "active" : ""}
|
||||
title="Align Right"
|
||||
type="button"
|
||||
aria-label="Align text right"
|
||||
>
|
||||
<AlignRight className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => formatTextAlignment("justify")}
|
||||
className={textAlignment === "justify" ? "active" : ""}
|
||||
title="Justify"
|
||||
type="button"
|
||||
aria-label="Justify text"
|
||||
>
|
||||
<AlignJustify className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getSelectedNode(selection: RangeSelection) {
|
||||
const anchor = selection.anchor;
|
||||
const focus = selection.focus;
|
||||
const anchorNode = selection.anchor.getNode();
|
||||
const focusNode = selection.focus.getNode();
|
||||
if (anchorNode === focusNode) {
|
||||
return anchorNode;
|
||||
}
|
||||
const isBackward = selection.isBackward();
|
||||
if (isBackward) {
|
||||
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
|
||||
} else {
|
||||
return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
|
||||
}
|
||||
}
|
||||
|
||||
function $isAtNodeEnd(point: Point) {
|
||||
return point.offset === point.getNode().getTextContentSize();
|
||||
}
|
||||
Reference in New Issue
Block a user