Replies: 1 comment 4 replies
-
Hi, heres the code that worked for me: slash-element.tsx:
slash-combobox.tsx
lib/slash-commands.tsx:
Mine combobox has additional options including a custom AI plugin I created for PlateJS for a SaaS im developing called https://krastie.ai. If you are interested in AI plugin, feel free to comment me back. |
Beta Was this translation helpful? Give feedback.
4 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
have figure out almost everything that I require for my project except for the / dropdown thing, can someone please guide me for doing this. Thankyou so much for the time, tried searching for this in docs but not able to find it, if you can redirect me to docs then that'll be great and if someone has already done it then can you please help me. Thnakyou for giving the time!
import React, { useEffect, useRef, useState } from "react";
// import EditorJS, { OutputData } from "@editorjs/editorjs";
// // @ts-ignore
// import Header from "@editorjs/header";
// // @ts-ignore
// import List from "@editorjs/list";
// // @ts-ignore
// import Table from "@editorjs/table";
// // @ts-ignore
// import Checklist from "@editorjs/checklist";
// // @ts-ignore
// import Quote from "@editorjs/quote";
import axios from "axios";
import { withProps } from "@udecode/cn";
import {
createPlugins,
Plate,
RenderAfterEditable,
PlateLeaf,
} from "@udecode/plate-common";
import {
createParagraphPlugin,
ELEMENT_PARAGRAPH,
} from "@udecode/plate-paragraph";
import {
createHeadingPlugin,
ELEMENT_H1,
ELEMENT_H2,
ELEMENT_H3,
ELEMENT_H4,
} from "@udecode/plate-heading";
import {
createBlockquotePlugin,
ELEMENT_BLOCKQUOTE,
} from "@udecode/plate-block-quote";
import {
createCodeBlockPlugin,
ELEMENT_CODE_BLOCK,
ELEMENT_CODE_LINE,
ELEMENT_CODE_SYNTAX,
} from "@udecode/plate-code-block";
import { createLinkPlugin, ELEMENT_LINK } from "@udecode/plate-link";
import {
createImagePlugin,
ELEMENT_IMAGE,
createMediaEmbedPlugin,
ELEMENT_MEDIA_EMBED,
} from "@udecode/plate-media";
import { createCaptionPlugin } from "@udecode/plate-caption";
import {
createMentionPlugin,
ELEMENT_MENTION,
ELEMENT_MENTION_INPUT,
} from "@udecode/plate-mention";
import { createTodoListPlugin, ELEMENT_TODO_LI } from "@udecode/plate-list";
import {
createBoldPlugin,
MARK_BOLD,
createItalicPlugin,
MARK_ITALIC,
createUnderlinePlugin,
MARK_UNDERLINE,
createStrikethroughPlugin,
MARK_STRIKETHROUGH,
createCodePlugin,
MARK_CODE,
createSubscriptPlugin,
MARK_SUBSCRIPT,
createSuperscriptPlugin,
MARK_SUPERSCRIPT,
} from "@udecode/plate-basic-marks";
import {
createFontColorPlugin,
createFontBackgroundColorPlugin,
createFontSizePlugin,
} from "@udecode/plate-font";
import {
createHighlightPlugin,
MARK_HIGHLIGHT,
} from "@udecode/plate-highlight";
import { createKbdPlugin, MARK_KBD } from "@udecode/plate-kbd";
import { createAlignPlugin } from "@udecode/plate-alignment";
import { createIndentPlugin } from "@udecode/plate-indent";
import { createIndentListPlugin } from "@udecode/plate-indent-list";
import { createLineHeightPlugin } from "@udecode/plate-line-height";
import { createAutoformatPlugin } from "@udecode/plate-autoformat";
import { createBlockSelectionPlugin } from "@udecode/plate-selection";
import { createEmojiPlugin } from "@udecode/plate-emoji";
import {
createExitBreakPlugin,
createSoftBreakPlugin,
} from "@udecode/plate-break";
import { createNodeIdPlugin } from "@udecode/plate-node-id";
import { createResetNodePlugin } from "@udecode/plate-reset-node";
import { createDeletePlugin } from "@udecode/plate-select";
import { createTabbablePlugin } from "@udecode/plate-tabbable";
import { createTrailingBlockPlugin } from "@udecode/plate-trailing-block";
import { createDeserializeMdPlugin } from "@udecode/plate-serializer-md";
//@ts-ignore
import { BlockquoteElement } from "components/plate-ui/blockquote-element";
//@ts-ignore
import { CodeBlockElement } from "components/plate-ui/code-block-element";
//@ts-ignore
import { CodeLineElement } from "components/plate-ui/code-line-element";
//@ts-ignore
import { CodeSyntaxLeaf } from "components/plate-ui/code-syntax-leaf";
//@ts-ignore
import { ImageElement } from "components/plate-ui/image-element";
//@ts-ignore
import { LinkElement } from "components/plate-ui/link-element";
//@ts-ignore
import { LinkFloatingToolbar } from "components/plate-ui/link-floating-toolbar";
//@ts-ignore
import { HeadingElement } from "components/plate-ui/heading-element";
//@ts-ignore
import { MediaEmbedElement } from "components/plate-ui/media-embed-element";
//@ts-ignore
import { MentionElement } from "components/plate-ui/mention-element";
//@ts-ignore
import { MentionInputElement } from "components/plate-ui/mention-input-element";
//@ts-ignore
import { ParagraphElement } from "components/plate-ui/paragraph-element";
//@ts-ignore
import { TodoListElement } from "components/plate-ui/todo-list-element";
//@ts-ignore
import { CodeLeaf } from "components/plate-ui/code-leaf";
//@ts-ignore
import { HighlightLeaf } from "components/plate-ui/highlight-leaf";
//@ts-ignore
import { KbdLeaf } from "components/plate-ui/kbd-leaf";
//@ts-ignore
import { Editor } from "components/plate-ui/editor";
//@ts-ignore
import { FixedToolbar } from "components/plate-ui/fixed-toolbar";
//@ts-ignore
import { FixedToolbarButtons } from "components/plate-ui/fixed-toolbar-buttons";
//@ts-ignore
import { FloatingToolbar } from "components/plate-ui/floating-toolbar";
//@ts-ignore
import { FloatingToolbarButtons } from "components/plate-ui/floating-toolbar-buttons";
//@ts-ignore
import { withPlaceholders } from "components/plate-ui/placeholder";
//@ts-ignore
import { EmojiInputElement } from "components/plate-ui/emoji-input-element";
const plugins = createPlugins(
[
createParagraphPlugin(),
createHeadingPlugin(),
createBlockquotePlugin(),
createCodeBlockPlugin(),
createLinkPlugin({
renderAfterEditable: LinkFloatingToolbar as RenderAfterEditable,
}),
createImagePlugin(),
createMediaEmbedPlugin(),
createCaptionPlugin({
options: {
pluginKeys: [
// ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED
],
},
}),
createMentionPlugin(),
createTodoListPlugin(),
createBoldPlugin(),
createItalicPlugin(),
createUnderlinePlugin(),
createStrikethroughPlugin(),
createCodePlugin(),
createSubscriptPlugin(),
createSuperscriptPlugin(),
createFontColorPlugin(),
createFontBackgroundColorPlugin(),
createFontSizePlugin(),
createHighlightPlugin(),
createKbdPlugin(),
createAlignPlugin({
inject: {
props: {
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3
],
},
},
}),
createIndentPlugin({
inject: {
props: {
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK
],
},
},
}),
createIndentListPlugin({
inject: {
props: {
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_BLOCKQUOTE, ELEMENT_CODE_BLOCK
],
},
},
}),
createLineHeightPlugin({
inject: {
props: {
defaultNodeValue: 1.5,
validNodeValues: [1, 1.2, 1.5, 2, 3],
validTypes: [
ELEMENT_PARAGRAPH,
// ELEMENT_H1, ELEMENT_H2, ELEMENT_H3
],
},
},
}),
createAutoformatPlugin({
options: {
rules: [
// Usage: https://platejs.org/docs/autoformat
],
enableUndoOnDelete: true,
},
}),
createBlockSelectionPlugin({
options: {
sizes: {
top: 0,
bottom: 0,
},
},
}),
createEmojiPlugin(),
createExitBreakPlugin({
options: {
rules: [
{
hotkey: "mod+enter",
},
{
hotkey: "mod+shift+enter",
before: true,
},
{
hotkey: "enter",
query: {
start: true,
end: true,
// allow: KEYS_HEADING,
},
relative: true,
level: 1,
},
],
},
}),
createNodeIdPlugin(),
createResetNodePlugin({
options: {
rules: [
// Usage: https://platejs.org/docs/reset-node
],
},
}),
createDeletePlugin(),
createSoftBreakPlugin({
options: {
rules: [
{ hotkey: "shift+enter" },
{
hotkey: "enter",
query: {
allow: [
// ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD
],
},
},
],
},
}),
createTabbablePlugin(),
createTrailingBlockPlugin({
options: { type: ELEMENT_PARAGRAPH },
}),
createDeserializeMdPlugin(),
],
{
components: withPlaceholders({
[ELEMENT_BLOCKQUOTE]: BlockquoteElement,
[ELEMENT_CODE_BLOCK]: CodeBlockElement,
[ELEMENT_CODE_LINE]: CodeLineElement,
[ELEMENT_CODE_SYNTAX]: CodeSyntaxLeaf,
[ELEMENT_IMAGE]: ImageElement,
[ELEMENT_LINK]: LinkElement,
[ELEMENT_H1]: withProps(HeadingElement, { variant: "h1" }),
[ELEMENT_H2]: withProps(HeadingElement, { variant: "h2" }),
[ELEMENT_H3]: withProps(HeadingElement, { variant: "h3" }),
[ELEMENT_H4]: withProps(HeadingElement, { variant: "h4" }),
[ELEMENT_MEDIA_EMBED]: MediaEmbedElement,
[ELEMENT_MENTION]: MentionElement,
[ELEMENT_MENTION_INPUT]: MentionInputElement,
[ELEMENT_PARAGRAPH]: ParagraphElement,
[ELEMENT_TODO_LI]: TodoListElement,
[MARK_BOLD]: withProps(PlateLeaf, { as: "strong" }),
[MARK_CODE]: CodeLeaf,
[MARK_HIGHLIGHT]: HighlightLeaf,
[MARK_ITALIC]: withProps(PlateLeaf, { as: "em" }),
[MARK_KBD]: KbdLeaf,
[MARK_STRIKETHROUGH]: withProps(PlateLeaf, { as: "s" }),
[MARK_SUBSCRIPT]: withProps(PlateLeaf, { as: "sub" }),
[MARK_SUPERSCRIPT]: withProps(PlateLeaf, { as: "sup" }),
[MARK_UNDERLINE]: withProps(PlateLeaf, { as: "u" }),
}),
}
);
const initialValue = [
{
id: "1",
type: "p",
children: [{ text: "Hello, World!" }],
},
];
const TextEditor: React.FC = () => {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [grade, setGrade] = useState<number | null>(null);
const [section, setSection] = useState("");
const [collegeSemester, setCollegeSemester] = useState<number | null>(null);
const [subject, setSubject] = useState("");
const [isPublic, setIsPublic] = useState(false);
return (
);
};
export default TextEditor;
Beta Was this translation helpful? Give feedback.
All reactions