deps: resolve conflicts
This commit is contained in:
vamsi
commit
3b900c1d8b
45 changed files with 2340 additions and 600 deletions
31
components/lexical/config.ts
Normal file
31
components/lexical/config.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
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";
|
||||
// theme
|
||||
import { defaultTheme } from "./theme";
|
||||
|
||||
export const initialConfig = {
|
||||
namespace: "LexicalEditor",
|
||||
// The editor theme
|
||||
theme: defaultTheme,
|
||||
// Handling of errors during update
|
||||
onError(error: any) {
|
||||
console.error(error);
|
||||
},
|
||||
// Any custom nodes go here
|
||||
nodes: [
|
||||
HeadingNode,
|
||||
ListNode,
|
||||
ListItemNode,
|
||||
QuoteNode,
|
||||
CodeNode,
|
||||
CodeHighlightNode,
|
||||
TableNode,
|
||||
TableCellNode,
|
||||
TableRowNode,
|
||||
AutoLinkNode,
|
||||
LinkNode,
|
||||
],
|
||||
};
|
||||
73
components/lexical/editor.tsx
Normal file
73
components/lexical/editor.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { FC } from "react";
|
||||
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
|
||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
||||
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
|
||||
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
||||
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
||||
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
||||
import { TRANSFORMERS, CHECK_LIST } from "@lexical/markdown";
|
||||
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
|
||||
import { $generateHtmlFromNodes } from "@lexical/html";
|
||||
import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
|
||||
|
||||
// custom plugins
|
||||
import { CodeHighlightPlugin } from "./plugins/code-highlight";
|
||||
import { LexicalToolbar } from "./toolbar";
|
||||
// config
|
||||
import { initialConfig } from "./config";
|
||||
// helpers
|
||||
import { getValidatedValue } from "./helpers/editor";
|
||||
|
||||
export interface RichTextEditorProps {
|
||||
onChange: (state: string) => void;
|
||||
id: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const RichTextEditor: FC<RichTextEditorProps> = (props) => {
|
||||
// props
|
||||
const { onChange, value, id } = props;
|
||||
|
||||
function handleChange(state: EditorState, editor: LexicalEditor) {
|
||||
state.read(() => {
|
||||
onChange(JSON.stringify(state.toJSON()));
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<LexicalComposer
|
||||
initialConfig={{
|
||||
...initialConfig,
|
||||
namespace: id || "Lexical Editor",
|
||||
editorState: getValidatedValue(value),
|
||||
}}
|
||||
>
|
||||
<div className="border border-[#e2e2e2] rounded-md">
|
||||
<LexicalToolbar />
|
||||
<div className="relative">
|
||||
<RichTextPlugin
|
||||
contentEditable={
|
||||
<ContentEditable className='className="h-[450px] outline-none py-[15px] px-2.5 resize-none overflow-hidden text-ellipsis' />
|
||||
}
|
||||
placeholder={
|
||||
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
|
||||
Enter some text...
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<OnChangePlugin onChange={handleChange} />
|
||||
<HistoryPlugin />
|
||||
<CodeHighlightPlugin />
|
||||
<ListPlugin />
|
||||
<LinkPlugin />
|
||||
<CheckListPlugin />
|
||||
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
|
||||
</div>
|
||||
</div>
|
||||
</LexicalComposer>
|
||||
);
|
||||
};
|
||||
|
||||
export default RichTextEditor;
|
||||
33
components/lexical/helpers/editor.ts
Normal file
33
components/lexical/helpers/editor.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
export const positionEditorElement = (editor: any, rect: any) => {
|
||||
if (window) {
|
||||
if (rect === null) {
|
||||
editor.style.opacity = "0";
|
||||
editor.style.top = "-1000px";
|
||||
editor.style.left = "-1000px";
|
||||
} else {
|
||||
editor.style.opacity = "1";
|
||||
editor.style.top = `${
|
||||
rect.top + rect.height + window.pageYOffset + 10
|
||||
}px`;
|
||||
editor.style.left = `${
|
||||
rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
|
||||
}px`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const getValidatedValue = (value: string) => {
|
||||
const defaultValue =
|
||||
'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
|
||||
|
||||
if (value) {
|
||||
try {
|
||||
const json = JSON.parse(value);
|
||||
return JSON.stringify(json);
|
||||
} catch (error) {
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
return defaultValue;
|
||||
};
|
||||
17
components/lexical/helpers/node.ts
Normal file
17
components/lexical/helpers/node.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { $isAtNodeEnd } from "@lexical/selection";
|
||||
|
||||
export const getSelectedNode = (selection: any) => {
|
||||
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;
|
||||
}
|
||||
};
|
||||
11
components/lexical/plugins/code-highlight.tsx
Normal file
11
components/lexical/plugins/code-highlight.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { useEffect } from "react";
|
||||
import { registerCodeHighlighting } from "@lexical/code";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
|
||||
export const CodeHighlightPlugin = () => {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
useEffect(() => {
|
||||
return registerCodeHighlighting(editor);
|
||||
}, [editor]);
|
||||
return null;
|
||||
};
|
||||
21
components/lexical/plugins/read-only.tsx
Normal file
21
components/lexical/plugins/read-only.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import { getValidatedValue } from "../helpers/editor";
|
||||
|
||||
const ReadOnlyPlugin = ({ value }: { value: string }) => {
|
||||
const [editor] = useLexicalComposerContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (editor && value) {
|
||||
const initialEditorState = editor?.parseEditorState(
|
||||
getValidatedValue(value) || ""
|
||||
);
|
||||
editor.setEditorState(initialEditorState);
|
||||
}
|
||||
}, [editor, value]);
|
||||
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export default ReadOnlyPlugin;
|
||||
67
components/lexical/theme.ts
Normal file
67
components/lexical/theme.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
export const defaultTheme = {
|
||||
ltr: "ltr",
|
||||
rtl: "rtl",
|
||||
placeholder: "editor-placeholder",
|
||||
paragraph: "mb-1",
|
||||
quote: "editor-quote",
|
||||
heading: {
|
||||
h1: "text-3xl font-bold",
|
||||
h2: "text-2xl font-bold",
|
||||
h3: "text-xl font-bold",
|
||||
h4: "text-lg font-bold",
|
||||
h5: "text-base font-bold",
|
||||
},
|
||||
list: {
|
||||
nested: {
|
||||
listitem: "list-item",
|
||||
},
|
||||
ol: "list-decimal pl-4",
|
||||
ul: "list-disc pl-4",
|
||||
listitem: "list-item",
|
||||
},
|
||||
image: "editor-image",
|
||||
link: "editor-link",
|
||||
text: {
|
||||
bold: "font-bold",
|
||||
italic: "italic",
|
||||
overflowed: "editor-text-overflowed",
|
||||
hashtag: "editor-text-hashtag",
|
||||
underline: "underline",
|
||||
strikethrough: "line-through",
|
||||
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",
|
||||
},
|
||||
};
|
||||
333
components/lexical/toolbar/block-type-select.tsx
Normal file
333
components/lexical/toolbar/block-type-select.tsx
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
import { FC, Fragment, useState, useEffect, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import {
|
||||
CAN_REDO_COMMAND,
|
||||
CAN_UNDO_COMMAND,
|
||||
REDO_COMMAND,
|
||||
UNDO_COMMAND,
|
||||
SELECTION_CHANGE_COMMAND,
|
||||
FORMAT_TEXT_COMMAND,
|
||||
FORMAT_ELEMENT_COMMAND,
|
||||
$getSelection,
|
||||
$isRangeSelection,
|
||||
$createParagraphNode,
|
||||
$getNodeByKey,
|
||||
} from "lexical";
|
||||
import {
|
||||
INSERT_ORDERED_LIST_COMMAND,
|
||||
INSERT_UNORDERED_LIST_COMMAND,
|
||||
INSERT_CHECK_LIST_COMMAND,
|
||||
REMOVE_LIST_COMMAND,
|
||||
$isListNode,
|
||||
ListNode,
|
||||
} from "@lexical/list";
|
||||
import {
|
||||
$isParentElementRTL,
|
||||
$isAtNodeEnd,
|
||||
$wrapNodes,
|
||||
} from "@lexical/selection";
|
||||
import {
|
||||
$createHeadingNode,
|
||||
$createQuoteNode,
|
||||
$isHeadingNode,
|
||||
} from "@lexical/rich-text";
|
||||
import {
|
||||
$createCodeNode,
|
||||
$isCodeNode,
|
||||
getDefaultCodeLanguage,
|
||||
getCodeLanguages,
|
||||
} from "@lexical/code";
|
||||
|
||||
const BLOCK_DATA = [
|
||||
{ type: "paragraph", name: "Normal" },
|
||||
{ type: "h1", name: "Large Heading" },
|
||||
{ type: "h2", name: "Small Heading" },
|
||||
{ type: "h3", name: "Heading" },
|
||||
{ type: "h4", name: "Heading" },
|
||||
{ type: "h5", name: "Heading" },
|
||||
{ type: "Quote", name: "quote" },
|
||||
{ type: "ol", name: "Numbered List" },
|
||||
{ type: "ul", name: "Bulleted List" },
|
||||
];
|
||||
|
||||
const supportedBlockTypes = new Set([
|
||||
"paragraph",
|
||||
"quote",
|
||||
"code",
|
||||
"h1",
|
||||
"h2",
|
||||
"ul",
|
||||
"ol",
|
||||
]);
|
||||
|
||||
const blockTypeToBlockName: any = {
|
||||
code: "Code Block",
|
||||
h1: "Large Heading",
|
||||
h2: "Small Heading",
|
||||
h3: "Heading",
|
||||
h4: "Heading",
|
||||
h5: "Heading",
|
||||
ol: "Numbered List",
|
||||
paragraph: "Normal",
|
||||
quote: "Quote",
|
||||
ul: "Bulleted List",
|
||||
};
|
||||
|
||||
export interface BlockTypeSelectProps {
|
||||
editor: any;
|
||||
toolbarRef: any;
|
||||
blockType: string;
|
||||
}
|
||||
|
||||
export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
|
||||
const { editor, toolbarRef, blockType } = props;
|
||||
// refs
|
||||
const dropDownRef = useRef<any>(null);
|
||||
// states
|
||||
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
|
||||
useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const toolbar = toolbarRef.current;
|
||||
const dropDown = dropDownRef.current;
|
||||
|
||||
if (toolbar !== null && dropDown !== null) {
|
||||
const { top, left } = toolbar.getBoundingClientRect();
|
||||
dropDown.style.top = `${top + 40}px`;
|
||||
dropDown.style.left = `${left}px`;
|
||||
}
|
||||
}, [dropDownRef, toolbarRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const dropDown = dropDownRef.current;
|
||||
const toolbar = toolbarRef.current;
|
||||
|
||||
if (dropDown !== null && toolbar !== null) {
|
||||
const handle = (event: any) => {
|
||||
const target = event.target;
|
||||
|
||||
if (!dropDown.contains(target) && !toolbar.contains(target)) {
|
||||
setShowBlockOptionsDropDown(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", handle);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("click", handle);
|
||||
};
|
||||
}
|
||||
}, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
|
||||
|
||||
const formatParagraph = () => {
|
||||
if (blockType !== "paragraph") {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
$wrapNodes(selection, () => $createParagraphNode());
|
||||
}
|
||||
});
|
||||
}
|
||||
setShowBlockOptionsDropDown(false);
|
||||
};
|
||||
|
||||
const formatLargeHeading = () => {
|
||||
console.log("blockType ", blockType);
|
||||
if (blockType !== "h1") {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
$wrapNodes(selection, () => $createHeadingNode("h1"));
|
||||
}
|
||||
});
|
||||
}
|
||||
setShowBlockOptionsDropDown(false);
|
||||
};
|
||||
|
||||
const formatSmallHeading = () => {
|
||||
if (blockType !== "h2") {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
$wrapNodes(selection, () => $createHeadingNode("h2"));
|
||||
}
|
||||
});
|
||||
}
|
||||
setShowBlockOptionsDropDown(false);
|
||||
};
|
||||
|
||||
const formatBulletList = () => {
|
||||
if (blockType !== "ul") {
|
||||
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
|
||||
} else {
|
||||
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
||||
}
|
||||
setShowBlockOptionsDropDown(false);
|
||||
};
|
||||
|
||||
const formatNumberedList = () => {
|
||||
if (blockType !== "ol") {
|
||||
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
|
||||
} else {
|
||||
editor.dispatchCommand(REMOVE_LIST_COMMAND);
|
||||
}
|
||||
setShowBlockOptionsDropDown(false);
|
||||
};
|
||||
|
||||
const formatQuote = () => {
|
||||
if (blockType !== "quote") {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
$wrapNodes(selection, () => $createQuoteNode());
|
||||
}
|
||||
});
|
||||
}
|
||||
setShowBlockOptionsDropDown(false);
|
||||
};
|
||||
|
||||
const formatCode = () => {
|
||||
if (blockType !== "code") {
|
||||
editor.update(() => {
|
||||
const selection = $getSelection();
|
||||
|
||||
if ($isRangeSelection(selection)) {
|
||||
$wrapNodes(selection, () => $createCodeNode());
|
||||
}
|
||||
});
|
||||
}
|
||||
setShowBlockOptionsDropDown(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
className="p-2 mr-2 text-sm flex items-center"
|
||||
onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
|
||||
aria-label="Formatting Options"
|
||||
>
|
||||
<span className="mr-2">{blockTypeToBlockName[blockType]}</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-chevron-down"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
{showBlockOptionsDropDown && (
|
||||
<ul
|
||||
className="absolute mt-1 w-full min-w-[160px] overflow-auto rounded-md bg-white z-10 p-1 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
ref={dropDownRef}
|
||||
>
|
||||
<li className="p-1 cursor-pointer" onClick={formatParagraph}>
|
||||
<span className="icon paragraph" />
|
||||
<span className="text">Normal</span>
|
||||
{blockType === "paragraph" && <span className="active" />}
|
||||
</li>
|
||||
<li className="p-1 cursor-pointer" onClick={formatLargeHeading}>
|
||||
<span className="icon large-heading" />
|
||||
<span className="text">Large Heading</span>
|
||||
{blockType === "h1" && <span className="active" />}
|
||||
</li>
|
||||
<li className="p-1 cursor-pointer" onClick={formatSmallHeading}>
|
||||
<span className="icon small-heading" />
|
||||
<span className="text">Small Heading</span>
|
||||
{blockType === "h2" && <span className="active" />}
|
||||
</li>
|
||||
<li className="p-1 cursor-pointer" onClick={formatBulletList}>
|
||||
<span className="icon bullet-list" />
|
||||
<span className="text">Bullet List</span>
|
||||
{blockType === "ul" && <span className="active" />}
|
||||
</li>
|
||||
<li className="p-1 cursor-pointer" onClick={formatNumberedList}>
|
||||
<span className="icon numbered-list" />
|
||||
<span className="text">Numbered List</span>
|
||||
{blockType === "ol" && <span className="active" />}
|
||||
</li>
|
||||
|
||||
<li className="p-1 cursor-pointer" onClick={formatQuote}>
|
||||
<span className="icon quote" />
|
||||
<span className="text">Quote</span>
|
||||
{blockType === "quote" && <span className="active" />}
|
||||
</li>
|
||||
{/* <button className="item" onClick={formatCode}>
|
||||
<span className="icon code" />
|
||||
<span className="text">Code Block</span>
|
||||
{blockType === 'code' && <span className="active" />}
|
||||
</button> */}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// export const BlockTypeSelect: FC<any> = () => {
|
||||
// const [selected, setSelected] = useState(BLOCK_DATA[0]);
|
||||
|
||||
// return (
|
||||
// <div className="inline-flex pr-1">
|
||||
// <Listbox value={selected} onChange={setSelected}>
|
||||
// <div className="relative">
|
||||
// <Listbox.Button className="relative w-full min-w-[160px] cursor-default rounded border border-[#e2e2e2] bg-white py-1 pl-3 pr-10 text-left outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-xs">
|
||||
// <span className="block truncate">{selected.name}</span>
|
||||
// <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
// <svg
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// width="16"
|
||||
// height="16"
|
||||
// fill="currentColor"
|
||||
// className="bi bi-chevron-down"
|
||||
// viewBox="0 0 16 16"
|
||||
// >
|
||||
// <path
|
||||
// fillRule="evenodd"
|
||||
// d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
|
||||
// ></path>
|
||||
// </svg>
|
||||
// </span>
|
||||
// </Listbox.Button>
|
||||
// <Transition
|
||||
// as={Fragment}
|
||||
// leave="transition ease-in duration-100"
|
||||
// leaveFrom="opacity-100"
|
||||
// leaveTo="opacity-0"
|
||||
// >
|
||||
// <Listbox.Options className="absolute mt-1 max-h-60 w-full min-w-[160px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
||||
// {BLOCK_DATA.map((blockType, index) => (
|
||||
// <Listbox.Option
|
||||
// key={index}
|
||||
// className={({ active }) =>
|
||||
// `relative cursor-default select-none py-2 px-2 ${
|
||||
// active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
|
||||
// }`
|
||||
// }
|
||||
// value={blockType}
|
||||
// >
|
||||
// {({ selected }) => (
|
||||
// <>
|
||||
// <span
|
||||
// className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
|
||||
// >
|
||||
// {blockType.name}
|
||||
// </span>
|
||||
// </>
|
||||
// )}
|
||||
// </Listbox.Option>
|
||||
// ))}
|
||||
// </Listbox.Options>
|
||||
// </Transition>
|
||||
// </div>
|
||||
// </Listbox>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
156
components/lexical/toolbar/floating-link-editor.tsx
Normal file
156
components/lexical/toolbar/floating-link-editor.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import { useRef, useState, useCallback, useEffect } from 'react';
|
||||
import { SELECTION_CHANGE_COMMAND, $getSelection, $isRangeSelection } from 'lexical';
|
||||
import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
|
||||
import { mergeRegister } from '@lexical/utils';
|
||||
|
||||
// helper functions
|
||||
import { positionEditorElement } from '../helpers/editor';
|
||||
import { getSelectedNode } from '../helpers/node';
|
||||
|
||||
const LowPriority = 1;
|
||||
|
||||
export interface FloatingLinkEditorProps {
|
||||
editor: any;
|
||||
}
|
||||
|
||||
export const FloatingLinkEditor = ({ editor }: FloatingLinkEditorProps) => {
|
||||
// refs
|
||||
const editorRef = useRef<any>(null);
|
||||
const inputRef = useRef<any>(null);
|
||||
const mouseDownRef = useRef(false);
|
||||
// states
|
||||
const [linkUrl, setLinkUrl] = useState('');
|
||||
const [isEditMode, setEditMode] = useState(false);
|
||||
const [lastSelection, setLastSelection] = useState<any>(null);
|
||||
|
||||
const updateLinkEditor = useCallback(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
const node = getSelectedNode(selection);
|
||||
const parent = node.getParent();
|
||||
if ($isLinkNode(parent)) {
|
||||
setLinkUrl(parent.getURL());
|
||||
} else if ($isLinkNode(node)) {
|
||||
setLinkUrl(node.getURL());
|
||||
} else {
|
||||
setLinkUrl('');
|
||||
}
|
||||
}
|
||||
const editorElem = editorRef.current;
|
||||
const nativeSelection = window?.getSelection();
|
||||
const activeElement = document.activeElement;
|
||||
|
||||
if (editorElem === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rootElement = editor.getRootElement();
|
||||
if (
|
||||
selection !== null &&
|
||||
!nativeSelection?.isCollapsed &&
|
||||
rootElement !== null &&
|
||||
rootElement.contains(nativeSelection?.anchorNode)
|
||||
) {
|
||||
const domRange = nativeSelection?.getRangeAt(0);
|
||||
let rect;
|
||||
if (nativeSelection?.anchorNode === rootElement) {
|
||||
let inner = rootElement;
|
||||
while (inner.firstElementChild != null) {
|
||||
inner = inner.firstElementChild;
|
||||
}
|
||||
rect = inner.getBoundingClientRect();
|
||||
} else {
|
||||
rect = domRange?.getBoundingClientRect();
|
||||
}
|
||||
|
||||
if (!mouseDownRef.current) {
|
||||
positionEditorElement(editorElem, rect);
|
||||
}
|
||||
setLastSelection(selection);
|
||||
} else if (!activeElement || activeElement.className !== 'link-input') {
|
||||
positionEditorElement(editorElem, null);
|
||||
setLastSelection(null);
|
||||
setEditMode(false);
|
||||
setLinkUrl('');
|
||||
}
|
||||
|
||||
return true;
|
||||
}, [editor]);
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerUpdateListener(({ editorState }: any) => {
|
||||
editorState.read(() => {
|
||||
updateLinkEditor();
|
||||
});
|
||||
}),
|
||||
|
||||
editor.registerCommand(
|
||||
SELECTION_CHANGE_COMMAND,
|
||||
() => {
|
||||
updateLinkEditor();
|
||||
return true;
|
||||
},
|
||||
LowPriority
|
||||
)
|
||||
);
|
||||
}, [editor, updateLinkEditor]);
|
||||
|
||||
useEffect(() => {
|
||||
editor.getEditorState().read(() => {
|
||||
updateLinkEditor();
|
||||
});
|
||||
}, [editor, updateLinkEditor]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditMode && inputRef?.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [isEditMode]);
|
||||
|
||||
return (
|
||||
<div ref={editorRef} className="link-editor">
|
||||
{isEditMode ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="link-input"
|
||||
value={linkUrl}
|
||||
onChange={(event) => {
|
||||
setLinkUrl(event.target.value);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
if (lastSelection !== null) {
|
||||
if (linkUrl !== '') {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
|
||||
}
|
||||
setEditMode(false);
|
||||
}
|
||||
} else if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
setEditMode(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="link-input">
|
||||
<a href={linkUrl} target="_blank" rel="noopener noreferrer">
|
||||
{linkUrl}
|
||||
</a>
|
||||
<div
|
||||
className="link-edit"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onMouseDown={(event) => event.preventDefault()}
|
||||
onClick={() => {
|
||||
setEditMode(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
430
components/lexical/toolbar/index.tsx
Normal file
430
components/lexical/toolbar/index.tsx
Normal file
|
|
@ -0,0 +1,430 @@
|
|||
import { useEffect, useState, useRef, useCallback } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import {
|
||||
CAN_REDO_COMMAND,
|
||||
CAN_UNDO_COMMAND,
|
||||
REDO_COMMAND,
|
||||
UNDO_COMMAND,
|
||||
SELECTION_CHANGE_COMMAND,
|
||||
FORMAT_TEXT_COMMAND,
|
||||
FORMAT_ELEMENT_COMMAND,
|
||||
$getSelection,
|
||||
$isRangeSelection,
|
||||
$createParagraphNode,
|
||||
$getNodeByKey,
|
||||
RangeSelection,
|
||||
NodeSelection,
|
||||
GridSelection,
|
||||
} from "lexical";
|
||||
import {
|
||||
INSERT_ORDERED_LIST_COMMAND,
|
||||
INSERT_UNORDERED_LIST_COMMAND,
|
||||
REMOVE_LIST_COMMAND,
|
||||
$isListNode,
|
||||
ListNode,
|
||||
} from "@lexical/list";
|
||||
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
|
||||
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
||||
import {
|
||||
$isParentElementRTL,
|
||||
$wrapNodes,
|
||||
$isAtNodeEnd,
|
||||
} from "@lexical/selection";
|
||||
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
|
||||
import {
|
||||
$createHeadingNode,
|
||||
$createQuoteNode,
|
||||
$isHeadingNode,
|
||||
} from "@lexical/rich-text";
|
||||
// custom elements
|
||||
import { FloatingLinkEditor } from "./floating-link-editor";
|
||||
import { BlockTypeSelect } from "./block-type-select";
|
||||
|
||||
const LowPriority = 1;
|
||||
|
||||
function getSelectedNode(selection: any) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
export const LexicalToolbar = () => {
|
||||
// editor
|
||||
const [editor] = useLexicalComposerContext();
|
||||
// ref
|
||||
const toolbarRef = useRef(null);
|
||||
// states
|
||||
const [canUndo, setCanUndo] = useState(false);
|
||||
const [canRedo, setCanRedo] = useState(false);
|
||||
const [blockType, setBlockType] = useState("paragraph");
|
||||
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
const [isRTL, setIsRTL] = useState(false);
|
||||
const [isLink, setIsLink] = useState(false);
|
||||
const [isBold, setIsBold] = useState(false);
|
||||
const [isItalic, setIsItalic] = useState(false);
|
||||
const [isUnderline, setIsUnderline] = useState(false);
|
||||
const [isStrikethrough, setIsStrikethrough] = useState(false);
|
||||
const [isCode, setIsCode] = useState(false);
|
||||
|
||||
const updateToolbar = useCallback(() => {
|
||||
const selection = $getSelection();
|
||||
if ($isRangeSelection(selection)) {
|
||||
const anchorNode = selection.anchor.getNode();
|
||||
const element =
|
||||
anchorNode.getKey() === "root"
|
||||
? anchorNode
|
||||
: anchorNode.getTopLevelElementOrThrow();
|
||||
const elementKey = element.getKey();
|
||||
const elementDOM = editor.getElementByKey(elementKey);
|
||||
if (elementDOM !== null) {
|
||||
setSelectedElementKey(elementKey);
|
||||
if ($isListNode(element)) {
|
||||
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
|
||||
const type = parentList ? parentList.getTag() : element.getTag();
|
||||
setBlockType(type);
|
||||
} else {
|
||||
const type = $isHeadingNode(element)
|
||||
? element.getTag()
|
||||
: element.getType();
|
||||
setBlockType(type);
|
||||
}
|
||||
}
|
||||
// Update text format
|
||||
setIsBold(selection.hasFormat("bold"));
|
||||
setIsItalic(selection.hasFormat("italic"));
|
||||
setIsUnderline(selection.hasFormat("underline"));
|
||||
setIsStrikethrough(selection.hasFormat("strikethrough"));
|
||||
setIsRTL($isParentElementRTL(selection));
|
||||
|
||||
// Update links
|
||||
const node = getSelectedNode(selection);
|
||||
const parent = node.getParent();
|
||||
if ($isLinkNode(parent) || $isLinkNode(node)) {
|
||||
setIsLink(true);
|
||||
} else {
|
||||
setIsLink(false);
|
||||
}
|
||||
}
|
||||
}, [editor]);
|
||||
|
||||
useEffect(() => {
|
||||
return mergeRegister(
|
||||
editor.registerUpdateListener(({ editorState }) => {
|
||||
editorState.read(() => {
|
||||
updateToolbar();
|
||||
});
|
||||
}),
|
||||
editor.registerCommand(
|
||||
SELECTION_CHANGE_COMMAND,
|
||||
(_payload, newEditor) => {
|
||||
updateToolbar();
|
||||
return false;
|
||||
},
|
||||
LowPriority
|
||||
),
|
||||
editor.registerCommand(
|
||||
CAN_UNDO_COMMAND,
|
||||
(payload) => {
|
||||
setCanUndo(payload);
|
||||
return false;
|
||||
},
|
||||
LowPriority
|
||||
),
|
||||
editor.registerCommand(
|
||||
CAN_REDO_COMMAND,
|
||||
(payload) => {
|
||||
setCanRedo(payload);
|
||||
return false;
|
||||
},
|
||||
LowPriority
|
||||
)
|
||||
);
|
||||
}, [editor, updateToolbar]);
|
||||
|
||||
const insertLink = useCallback(
|
||||
(e: any) => {
|
||||
e.preventDefault();
|
||||
if (!isLink) {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
|
||||
} else {
|
||||
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
|
||||
}
|
||||
},
|
||||
[editor, isLink]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
|
||||
ref={toolbarRef}
|
||||
>
|
||||
<button
|
||||
disabled={!canUndo}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(UNDO_COMMAND, undefined);
|
||||
}}
|
||||
className="p-2 mr-2"
|
||||
aria-label="Undo"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-arrow-counterclockwise"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8 3a5 5 0 11-4.546 2.914.5.5 0 00-.908-.417A6 6 0 108 2v1z"
|
||||
></path>
|
||||
<path d="M8 4.466V.534a.25.25 0 00-.41-.192L5.23 2.308a.25.25 0 000 .384l2.36 1.966A.25.25 0 008 4.466z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
disabled={!canRedo}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(REDO_COMMAND, undefined);
|
||||
}}
|
||||
className="p-2 mr-2"
|
||||
aria-label="Redo"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-arrow-clockwise"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M8 3a5 5 0 104.546 2.914.5.5 0 01.908-.417A6 6 0 118 2v1z"
|
||||
></path>
|
||||
<path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<BlockTypeSelect
|
||||
editor={editor}
|
||||
toolbarRef={toolbarRef}
|
||||
blockType={blockType}
|
||||
/>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
|
||||
}}
|
||||
className={`p-2 mr-2 ${isBold ? "active" : ""}`}
|
||||
aria-label="Format Bold"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-type-bold"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 001.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
|
||||
}}
|
||||
className={"p-2 mr-2" + (isItalic ? "active" : "")}
|
||||
aria-label="Format Italics"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-type-italic"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
|
||||
}}
|
||||
className={"p-2 mr-2" + (isUnderline ? "active" : "")}
|
||||
aria-label="Format Underline"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-type-underline"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
|
||||
}}
|
||||
className={"p-2 mr-2" + (isStrikethrough ? "active" : "")}
|
||||
aria-label="Format Strikethrough"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-type-strikethrough"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 01-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
|
||||
}}
|
||||
className={"p-2 mr-2 " + (isCode ? "active" : "")}
|
||||
aria-label="Insert Code"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-code"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={insertLink}
|
||||
className={"p-2 mr-2 " + (isLink ? "active" : "")}
|
||||
aria-label="Insert Link"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-link"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M6.354 5.5H4a3 3 0 000 6h3a3 3 0 002.83-4H9c-.086 0-.17.01-.25.031A2 2 0 017 10.5H4a2 2 0 110-4h1.535c.218-.376.495-.714.82-1z"></path>
|
||||
<path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
{isLink &&
|
||||
createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
|
||||
}}
|
||||
className="p-2 mr-2"
|
||||
aria-label="Left Align"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-text-left"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M2 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
|
||||
}}
|
||||
className="p-2 mr-2"
|
||||
aria-label="Center Align"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-text-center"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm2-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
|
||||
}}
|
||||
className="p-2 mr-2"
|
||||
aria-label="Right Align"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-text-right"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M6 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm4-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
|
||||
}}
|
||||
className="p-2 mr-2"
|
||||
aria-label="Justify Align"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
className="bi bi-justify"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M2 12.5a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>{" "}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
58
components/lexical/viewer.tsx
Normal file
58
components/lexical/viewer.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { FC } from "react";
|
||||
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
||||
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
||||
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
||||
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
|
||||
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
||||
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
|
||||
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
||||
import { TRANSFORMERS } from "@lexical/markdown";
|
||||
// custom plugins
|
||||
import { CodeHighlightPlugin } from "./plugins/code-highlight";
|
||||
import ReadOnlyPlugin from "./plugins/read-only";
|
||||
// config
|
||||
import { initialConfig } from "./config";
|
||||
// helpers
|
||||
import { getValidatedValue } from "./helpers/editor";
|
||||
|
||||
export interface RichTextViewerProps {
|
||||
id: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const RichTextViewer: FC<RichTextViewerProps> = (props) => {
|
||||
// props
|
||||
const { value, id } = props;
|
||||
|
||||
return (
|
||||
<LexicalComposer
|
||||
initialConfig={{
|
||||
...initialConfig,
|
||||
namespace: id || "Lexical Editor",
|
||||
editorState: getValidatedValue(value),
|
||||
editable: false,
|
||||
}}
|
||||
>
|
||||
<div className="relative">
|
||||
<RichTextPlugin
|
||||
contentEditable={
|
||||
<ContentEditable className='className="h-[450px] outline-none py-[15px] resize-none overflow-hidden text-ellipsis' />
|
||||
}
|
||||
placeholder={
|
||||
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
|
||||
Enter some text...
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<ReadOnlyPlugin value={value} />
|
||||
<HistoryPlugin />
|
||||
<CodeHighlightPlugin />
|
||||
<ListPlugin />
|
||||
<LinkPlugin />
|
||||
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
|
||||
</div>
|
||||
</LexicalComposer>
|
||||
);
|
||||
};
|
||||
|
||||
export default RichTextViewer;
|
||||
Loading…
Add table
Add a link
Reference in a new issue