105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import { CodeHighlightNode, CodeNode } from "@lexical/code";
|
|
import { AutoLinkNode, LinkNode } from "@lexical/link";
|
|
import { ListItemNode, ListNode } from "@lexical/list";
|
|
import { TRANSFORMERS } from "@lexical/markdown";
|
|
import { LexicalComposer } from "@lexical/react/LexicalComposer";
|
|
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
|
|
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
|
|
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
|
|
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
|
|
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
|
|
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
|
|
import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
|
|
import type { Dispatch, SetStateAction } from "react";
|
|
|
|
import { classNames } from "@calcom/lib";
|
|
|
|
import ExampleTheme from "./ExampleTheme";
|
|
import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
|
|
import ToolbarPlugin from "./plugins/ToolbarPlugin";
|
|
import "./stylesEditor.css";
|
|
|
|
/*
|
|
Detault toolbar items:
|
|
- blockType
|
|
- bold
|
|
- italic
|
|
- link
|
|
*/
|
|
export type TextEditorProps = {
|
|
getText: () => string;
|
|
setText: (text: string) => void;
|
|
excludedToolbarItems?: string[];
|
|
variables?: string[];
|
|
height?: string;
|
|
placeholder?: string;
|
|
disableLists?: boolean;
|
|
updateTemplate?: boolean;
|
|
firstRender?: boolean;
|
|
setFirstRender?: Dispatch<SetStateAction<boolean>>;
|
|
editable?: boolean;
|
|
};
|
|
|
|
const editorConfig = {
|
|
theme: ExampleTheme,
|
|
onError(error: any) {
|
|
throw error;
|
|
},
|
|
namespace: "",
|
|
nodes: [
|
|
HeadingNode,
|
|
ListNode,
|
|
ListItemNode,
|
|
QuoteNode,
|
|
CodeNode,
|
|
CodeHighlightNode,
|
|
TableNode,
|
|
TableCellNode,
|
|
TableRowNode,
|
|
AutoLinkNode,
|
|
LinkNode,
|
|
],
|
|
};
|
|
|
|
export const Editor = (props: TextEditorProps) => {
|
|
const editable = props.editable ?? true;
|
|
return (
|
|
<div className="editor rounded-md">
|
|
<LexicalComposer initialConfig={{ ...editorConfig, editable }}>
|
|
<div className="editor-container rounded-md p-0">
|
|
<ToolbarPlugin
|
|
getText={props.getText}
|
|
setText={props.setText}
|
|
editable={editable}
|
|
excludedToolbarItems={props.excludedToolbarItems}
|
|
variables={props.variables}
|
|
updateTemplate={props.updateTemplate}
|
|
firstRender={props.firstRender}
|
|
setFirstRender={props.setFirstRender}
|
|
/>
|
|
<div
|
|
className={classNames("editor-inner scroll-bar", !editable && "bg-muted")}
|
|
style={{ height: props.height }}>
|
|
<RichTextPlugin
|
|
contentEditable={<ContentEditable style={{ height: props.height }} className="editor-input" />}
|
|
placeholder={<div className="text-muted -mt-11 p-3 text-sm">{props.placeholder || ""}</div>}
|
|
/>
|
|
<ListPlugin />
|
|
<LinkPlugin />
|
|
<AutoLinkPlugin />
|
|
<MarkdownShortcutPlugin
|
|
transformers={
|
|
props.disableLists
|
|
? TRANSFORMERS.filter((value, index) => {
|
|
if (index !== 3 && index !== 4) return value;
|
|
})
|
|
: TRANSFORMERS
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</LexicalComposer>
|
|
</div>
|
|
);
|
|
};
|