@premieroctet/next-admin
Version:
Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your proje
176 lines (175 loc) • 9.21 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import external_clsx_default from "clsx";
import { useMemo } from "react";
import { createEditor } from "slate";
import { withHistory } from "slate-history";
import { Editable, Slate, withReact } from "slate-react";
import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, BullettedList, Code, Heading, Italic, NumberedList, Quote, Strikethrough, Underline } from "../../../assets/icons/RichTextActions.mjs";
import { Button, EditorContainer, Separator, Toolbar } from "./components.mjs";
import { DEFAULT_HTML_VALUE, DEFAULT_JSON_VALUE, deserialize, renderElement, renderLeaf, serialize } from "./utils.mjs";
const RichTextField = ({ schema, onChange, disabled, required, ...props })=>{
const { value } = props;
const format = schema?.format?.split("-")[1];
const deserializedValue = deserialize(value, format);
const editor = useMemo(()=>withHistory(withReact(createEditor())), []);
let initialValue = deserializedValue;
const handleChange = (value)=>{
const isAstChange = editor.operations.some((op)=>"set_selection" !== op.type);
if (isAstChange) {
const serializedValue = serialize(value, format);
onChange?.({
target: {
value: serializedValue
}
});
}
};
const inputValue = useMemo(()=>{
if (required) {
if ("html" === format && value === DEFAULT_HTML_VALUE) return "";
try {
if ("json" === format && value === JSON.stringify(DEFAULT_JSON_VALUE)) return "";
} catch {
return value;
}
}
return value ?? "";
}, [
value
]);
return /*#__PURE__*/ jsx(Slate, {
editor: editor,
initialValue: initialValue,
onChange: handleChange,
children: /*#__PURE__*/ jsxs("div", {
className: "relative",
children: [
/*#__PURE__*/ jsx("input", {
name: props.name,
value: inputValue,
className: "absolute inset-0 -z-10 h-full w-full opacity-0",
required: required,
readOnly: true
}),
/*#__PURE__*/ jsxs(EditorContainer, {
children: [
/*#__PURE__*/ jsxs(Toolbar, {
children: [
/*#__PURE__*/ jsx(Button, {
format: "bold",
icon: /*#__PURE__*/ jsx(Bold, {}),
title: "Bold",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "italic",
icon: /*#__PURE__*/ jsx(Italic, {}),
title: "Italic",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "underline",
icon: /*#__PURE__*/ jsx(Underline, {}),
title: "Underline",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "strikethrough",
icon: /*#__PURE__*/ jsx(Strikethrough, {}),
title: "Strikethrough",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "code",
icon: /*#__PURE__*/ jsx(Code, {}),
title: "Code",
disabled: disabled
}),
/*#__PURE__*/ jsx(Separator, {}),
/*#__PURE__*/ jsx(Button, {
format: "blockquote",
icon: /*#__PURE__*/ jsx(Quote, {}),
title: "Blockquote",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "bulleted-list",
icon: /*#__PURE__*/ jsx(BullettedList, {}),
title: "Bulleted list",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "numbered-list",
icon: /*#__PURE__*/ jsx(NumberedList, {}),
title: "Numbered list",
disabled: disabled
}),
/*#__PURE__*/ jsx(Separator, {}),
/*#__PURE__*/ jsx(Button, {
format: "heading-one",
icon: /*#__PURE__*/ jsx(Heading, {
level: 1
}),
title: "Heading 1",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "heading-two",
icon: /*#__PURE__*/ jsx(Heading, {
level: 2
}),
title: "Heading 2",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "heading-three",
icon: /*#__PURE__*/ jsx(Heading, {
level: 3
}),
title: "Heading 3",
disabled: disabled
}),
/*#__PURE__*/ jsx(Separator, {}),
/*#__PURE__*/ jsx(Button, {
format: "left",
icon: /*#__PURE__*/ jsx(AlignLeft, {}),
title: "Align left",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "center",
icon: /*#__PURE__*/ jsx(AlignCenter, {}),
title: "Align center",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "right",
icon: /*#__PURE__*/ jsx(AlignRight, {}),
title: "Align right",
disabled: disabled
}),
/*#__PURE__*/ jsx(Button, {
format: "justify",
icon: /*#__PURE__*/ jsx(AlignJustify, {}),
title: "Align justify",
disabled: disabled
})
]
}),
/*#__PURE__*/ jsx(Editable, {
spellCheck: true,
renderElement: renderElement,
renderLeaf: renderLeaf,
readOnly: disabled,
className: external_clsx_default("border-nextadmin-border-default dark:border-dark-nextadmin-border-default bg-nextadmin-background-default text-nextadmin-content-inverted", "ring-nextadmin-border-default", "focus:ring-nextadmin-brand-default", "dark:focus:ring-dark-nextadmin-brand-default", "dark:ring-dark-nextadmin-border-strong", "dark:text-dark-nextadmin-content-inverted", "dark:bg-dark-nextadmin-background-subtle min-h-[150px] rounded-bl-md p-3 shadow-sm ring-1 focus:ring-2 focus-visible:outline-none", {
"cursor-not-allowed opacity-50": disabled
}, "h-[150px] overflow-y-auto", "resize-y")
})
]
})
]
})
});
};
const RichText_RichTextField = RichTextField;
export { RichText_RichTextField as default };