chores: remove unused files
This commit is contained in:
zerosoul
@@ -1,89 +0,0 @@
|
||||
import {
|
||||
// AutoformatRule,
|
||||
ELEMENT_BLOCKQUOTE,
|
||||
ELEMENT_CODE_BLOCK,
|
||||
ELEMENT_DEFAULT,
|
||||
ELEMENT_H1,
|
||||
ELEMENT_H2,
|
||||
ELEMENT_H3,
|
||||
ELEMENT_H4,
|
||||
ELEMENT_H5,
|
||||
ELEMENT_H6,
|
||||
ELEMENT_HR,
|
||||
getPluginType,
|
||||
insertEmptyCodeBlock,
|
||||
insertNodes,
|
||||
// PlateEditor,
|
||||
setNodes,
|
||||
} from "@udecode/plate";
|
||||
import { preFormat } from "./autoformatUtils";
|
||||
|
||||
export const autoformatBlocks = [
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_H1,
|
||||
match: "# ",
|
||||
preFormat,
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_H2,
|
||||
match: "## ",
|
||||
preFormat,
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_H3,
|
||||
match: "### ",
|
||||
preFormat,
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_H4,
|
||||
match: "#### ",
|
||||
preFormat,
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_H5,
|
||||
match: "##### ",
|
||||
preFormat,
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_H6,
|
||||
match: "###### ",
|
||||
preFormat,
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_BLOCKQUOTE,
|
||||
match: "> ",
|
||||
preFormat,
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_CODE_BLOCK,
|
||||
match: "```",
|
||||
triggerAtBlockStart: false,
|
||||
preFormat,
|
||||
format: (editor) => {
|
||||
insertEmptyCodeBlock(editor, {
|
||||
defaultType: getPluginType(editor, ELEMENT_DEFAULT),
|
||||
insertNodesOptions: { select: true },
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_HR,
|
||||
match: ["---", "—-", "___ "],
|
||||
format: (editor) => {
|
||||
setNodes(editor, { type: ELEMENT_HR });
|
||||
insertNodes(editor, {
|
||||
type: ELEMENT_DEFAULT,
|
||||
children: [{ text: "" }],
|
||||
});
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -1,47 +0,0 @@
|
||||
import {
|
||||
// AutoformatRule,
|
||||
ELEMENT_LI,
|
||||
ELEMENT_OL,
|
||||
ELEMENT_TODO_LI,
|
||||
ELEMENT_UL,
|
||||
setNodes,
|
||||
// TElement,
|
||||
// TodoListItemNodeData,
|
||||
} from "@udecode/plate";
|
||||
import { Editor } from "slate";
|
||||
import { formatList, preFormat } from "./autoformatUtils";
|
||||
|
||||
export const autoformatLists = [
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_LI,
|
||||
match: ["* ", "- "],
|
||||
preFormat,
|
||||
format: (editor) => formatList(editor, ELEMENT_UL),
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_LI,
|
||||
match: ["1. ", "1) "],
|
||||
preFormat,
|
||||
format: (editor) => formatList(editor, ELEMENT_OL),
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_TODO_LI,
|
||||
match: "[] ",
|
||||
},
|
||||
{
|
||||
mode: "block",
|
||||
type: ELEMENT_TODO_LI,
|
||||
match: "[x] ",
|
||||
format: (editor) =>
|
||||
setNodes(
|
||||
editor,
|
||||
{ type: ELEMENT_TODO_LI, checked: true },
|
||||
{
|
||||
match: (n) => Editor.isBlock(editor, n),
|
||||
}
|
||||
),
|
||||
},
|
||||
];
|
||||
@@ -1,84 +0,0 @@
|
||||
import {
|
||||
// AutoformatRule,
|
||||
MARK_BOLD,
|
||||
MARK_CODE,
|
||||
MARK_HIGHLIGHT,
|
||||
MARK_ITALIC,
|
||||
MARK_STRIKETHROUGH,
|
||||
MARK_SUBSCRIPT,
|
||||
MARK_SUPERSCRIPT,
|
||||
MARK_UNDERLINE,
|
||||
} from "@udecode/plate";
|
||||
|
||||
export const autoformatMarks = [
|
||||
{
|
||||
mode: "mark",
|
||||
type: [MARK_BOLD, MARK_ITALIC],
|
||||
match: "***",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: [MARK_UNDERLINE, MARK_ITALIC],
|
||||
match: "__*",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: [MARK_UNDERLINE, MARK_BOLD],
|
||||
match: "__**",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: [MARK_UNDERLINE, MARK_BOLD, MARK_ITALIC],
|
||||
match: "___***",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_BOLD,
|
||||
match: "**",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_UNDERLINE,
|
||||
match: "__",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_ITALIC,
|
||||
match: "*",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_ITALIC,
|
||||
match: "_",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_STRIKETHROUGH,
|
||||
match: "~~",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_SUPERSCRIPT,
|
||||
match: "^",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_SUBSCRIPT,
|
||||
match: "~",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_HIGHLIGHT,
|
||||
match: "==",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_HIGHLIGHT,
|
||||
match: "≡",
|
||||
},
|
||||
{
|
||||
mode: "mark",
|
||||
type: MARK_CODE,
|
||||
match: "`",
|
||||
},
|
||||
];
|
||||
@@ -1,23 +0,0 @@
|
||||
import {
|
||||
autoformatArrow,
|
||||
autoformatLegal,
|
||||
autoformatLegalHtml,
|
||||
autoformatMath,
|
||||
autoformatPunctuation,
|
||||
autoformatSmartQuotes,
|
||||
} from "@udecode/plate";
|
||||
import { autoformatBlocks } from "./autoformatBlocks";
|
||||
import { autoformatLists } from "./autoformatLists";
|
||||
import { autoformatMarks } from "./autoformatMarks";
|
||||
|
||||
export const autoformatRules = [
|
||||
...autoformatBlocks,
|
||||
...autoformatLists,
|
||||
...autoformatMarks,
|
||||
...autoformatSmartQuotes,
|
||||
...autoformatPunctuation,
|
||||
...autoformatLegal,
|
||||
...autoformatLegalHtml,
|
||||
...autoformatArrow,
|
||||
...autoformatMath,
|
||||
];
|
||||
@@ -1,41 +0,0 @@
|
||||
import {
|
||||
// AutoformatBlockRule,
|
||||
ELEMENT_CODE_BLOCK,
|
||||
ELEMENT_CODE_LINE,
|
||||
getParent,
|
||||
isElement,
|
||||
isType,
|
||||
// PlateEditor,
|
||||
// TEditor,
|
||||
toggleList,
|
||||
unwrapList,
|
||||
} from "@udecode/plate";
|
||||
|
||||
export const preFormat = (editor) => unwrapList(editor);
|
||||
|
||||
export const format = (editor, customFormatting) => {
|
||||
if (editor.selection) {
|
||||
const parentEntry = getParent(editor, editor.selection);
|
||||
if (!parentEntry) return;
|
||||
const [node] = parentEntry;
|
||||
if (
|
||||
isElement(node) &&
|
||||
!isType(editor, node, ELEMENT_CODE_BLOCK) &&
|
||||
!isType(editor, node, ELEMENT_CODE_LINE)
|
||||
) {
|
||||
customFormatting();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const formatList = (editor, elementType = "") => {
|
||||
format(editor, () =>
|
||||
toggleList(editor, {
|
||||
type: elementType,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
export const formatText = (editor, text = "") => {
|
||||
format(editor, () => editor.insertText(text));
|
||||
};
|
||||
@@ -1,54 +0,0 @@
|
||||
import "tippy.js/animations/scale.css";
|
||||
import "tippy.js/dist/tippy.css";
|
||||
import IconQuestion from "../../../../assets/icons/question.svg";
|
||||
import {
|
||||
BalloonToolbar,
|
||||
getPluginType,
|
||||
MARK_BOLD,
|
||||
MARK_ITALIC,
|
||||
MARK_UNDERLINE,
|
||||
MarkToolbarButton,
|
||||
usePlateEditorRef,
|
||||
} from "@udecode/plate";
|
||||
|
||||
const MarkBallonToolbar = () => {
|
||||
const editor = usePlateEditorRef();
|
||||
|
||||
const arrow = false;
|
||||
const theme = "dark";
|
||||
const tooltip = {
|
||||
arrow: true,
|
||||
delay: 0,
|
||||
duration: [200, 0],
|
||||
hideOnClick: false,
|
||||
offset: [0, 17],
|
||||
placement: "top",
|
||||
};
|
||||
|
||||
return (
|
||||
<BalloonToolbar
|
||||
popperOptions={{
|
||||
placement: "top",
|
||||
}}
|
||||
theme={theme}
|
||||
arrow={arrow}
|
||||
>
|
||||
<MarkToolbarButton
|
||||
type={getPluginType(editor, MARK_BOLD)}
|
||||
icon={<IconQuestion />}
|
||||
tooltip={{ content: "Bold (⌘B)", ...tooltip }}
|
||||
/>
|
||||
<MarkToolbarButton
|
||||
type={getPluginType(editor, MARK_ITALIC)}
|
||||
icon={<IconQuestion />}
|
||||
tooltip={{ content: "Italic (⌘I)", ...tooltip }}
|
||||
/>
|
||||
<MarkToolbarButton
|
||||
type={getPluginType(editor, MARK_UNDERLINE)}
|
||||
icon={<IconQuestion />}
|
||||
tooltip={{ content: "Underline (⌘U)", ...tooltip }}
|
||||
/>
|
||||
</BalloonToolbar>
|
||||
);
|
||||
};
|
||||
export default MarkBallonToolbar;
|
||||
@@ -1,19 +0,0 @@
|
||||
import {
|
||||
ELEMENT_H1,
|
||||
ELEMENT_PARAGRAPH,
|
||||
withPlaceholders,
|
||||
} from "@udecode/plate";
|
||||
|
||||
export const withStyledPlaceHolders = (components) =>
|
||||
withPlaceholders(components, [
|
||||
{
|
||||
key: ELEMENT_PARAGRAPH,
|
||||
placeholder: "Type a paragraph",
|
||||
hideOnBlur: true,
|
||||
},
|
||||
{
|
||||
key: ELEMENT_H1,
|
||||
placeholder: "Untitled",
|
||||
hideOnBlur: false,
|
||||
},
|
||||
]);
|
||||
@@ -1,180 +0,0 @@
|
||||
import {
|
||||
// AutoformatPlugin,
|
||||
CodeBlockElement,
|
||||
createPlateUI,
|
||||
ELEMENT_BLOCKQUOTE,
|
||||
ELEMENT_CODE_BLOCK,
|
||||
ELEMENT_H1,
|
||||
ELEMENT_H2,
|
||||
ELEMENT_H3,
|
||||
ELEMENT_H4,
|
||||
ELEMENT_H5,
|
||||
ELEMENT_H6,
|
||||
ELEMENT_HR,
|
||||
ELEMENT_IMAGE,
|
||||
ELEMENT_PARAGRAPH,
|
||||
ELEMENT_TD,
|
||||
ELEMENT_TODO_LI,
|
||||
// ExitBreakPlugin,
|
||||
// IndentPlugin,
|
||||
isBlockAboveEmpty,
|
||||
isSelectionAtBlockStart,
|
||||
KEYS_HEADING,
|
||||
// NormalizeTypesPlugin,
|
||||
// PlatePlugin,
|
||||
// ResetNodePlugin,
|
||||
// SelectOnBackspacePlugin,
|
||||
// SoftBreakPlugin,
|
||||
// TrailingBlockPlugin,
|
||||
withProps,
|
||||
} from "@udecode/plate";
|
||||
// import { EditableProps } from 'slate-react/dist/components/editable'
|
||||
import { css } from "styled-components";
|
||||
import { autoformatRules } from "./autoformat/autoformatRules";
|
||||
// import { MENTIONABLES } from './mentionables'
|
||||
|
||||
const resetBlockTypesCommonRule = {
|
||||
types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
|
||||
defaultType: ELEMENT_PARAGRAPH,
|
||||
};
|
||||
|
||||
export const CONFIG = {
|
||||
editableProps: {
|
||||
spellCheck: false,
|
||||
autoFocus: true,
|
||||
placeholder: "Type…",
|
||||
},
|
||||
components: createPlateUI({
|
||||
[ELEMENT_CODE_BLOCK]: withProps(CodeBlockElement, {
|
||||
styles: {
|
||||
root: [
|
||||
css`
|
||||
background-color: #111827;
|
||||
code {
|
||||
color: white;
|
||||
}
|
||||
`,
|
||||
],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
|
||||
align: {
|
||||
inject: {
|
||||
props: {
|
||||
validTypes: [
|
||||
ELEMENT_PARAGRAPH,
|
||||
ELEMENT_H1,
|
||||
ELEMENT_H2,
|
||||
ELEMENT_H3,
|
||||
ELEMENT_H4,
|
||||
ELEMENT_H5,
|
||||
ELEMENT_H6,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
indent: {
|
||||
inject: {
|
||||
props: {
|
||||
validTypes: [
|
||||
ELEMENT_PARAGRAPH,
|
||||
ELEMENT_H1,
|
||||
ELEMENT_H2,
|
||||
ELEMENT_H3,
|
||||
ELEMENT_H4,
|
||||
ELEMENT_H5,
|
||||
ELEMENT_H6,
|
||||
ELEMENT_BLOCKQUOTE,
|
||||
ELEMENT_CODE_BLOCK,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
lineHeight: {
|
||||
inject: {
|
||||
props: {
|
||||
defaultNodeValue: 1.5,
|
||||
validNodeValues: [1, 1.2, 1.5, 2, 3],
|
||||
validTypes: [
|
||||
ELEMENT_PARAGRAPH,
|
||||
ELEMENT_H1,
|
||||
ELEMENT_H2,
|
||||
ELEMENT_H3,
|
||||
ELEMENT_H4,
|
||||
ELEMENT_H5,
|
||||
ELEMENT_H6,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
resetBlockType: {
|
||||
options: {
|
||||
rules: [
|
||||
{
|
||||
...resetBlockTypesCommonRule,
|
||||
hotkey: "Enter",
|
||||
predicate: isBlockAboveEmpty,
|
||||
},
|
||||
{
|
||||
...resetBlockTypesCommonRule,
|
||||
hotkey: "Backspace",
|
||||
predicate: isSelectionAtBlockStart,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
trailingBlock: { type: ELEMENT_PARAGRAPH },
|
||||
softBreak: {
|
||||
options: {
|
||||
rules: [
|
||||
// { hotkey: "shift+enter" },
|
||||
// {
|
||||
// hotkey: "enter",
|
||||
// query: {
|
||||
// allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
|
||||
// },
|
||||
// },
|
||||
],
|
||||
},
|
||||
},
|
||||
exitBreak: {
|
||||
options: {
|
||||
rules: [
|
||||
{
|
||||
hotkey: "mod+enter",
|
||||
},
|
||||
// {
|
||||
// hotkey: "mod+shift+enter",
|
||||
// before: true,
|
||||
// },
|
||||
// {
|
||||
// hotkey: "enter",
|
||||
// query: {
|
||||
// start: true,
|
||||
// end: true,
|
||||
// allow: KEYS_HEADING,
|
||||
// },
|
||||
// },
|
||||
],
|
||||
},
|
||||
},
|
||||
selectOnBackspace: {
|
||||
options: {
|
||||
query: {
|
||||
allow: [ELEMENT_IMAGE, ELEMENT_HR],
|
||||
},
|
||||
},
|
||||
},
|
||||
autoformat: {
|
||||
options: {
|
||||
rules: autoformatRules,
|
||||
},
|
||||
},
|
||||
// mentionItems: MENTIONABLES,
|
||||
forceLayout: {
|
||||
options: {
|
||||
rules: [{ path: [0], strictType: ELEMENT_H1 }],
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,206 +0,0 @@
|
||||
import { useState, useRef, useCallback, useMemo, useEffect } from "react";
|
||||
import { serialize } from "remark-slate";
|
||||
import { useKey } from "rooks";
|
||||
|
||||
import { useUploadImageMutation } from "../../../app/services/message";
|
||||
import nodeTypes from "./values/nodeTypes";
|
||||
import {
|
||||
createPlateUI,
|
||||
// HeadingToolbar,
|
||||
// MentionCombobox,
|
||||
Plate,
|
||||
createAutoformatPlugin,
|
||||
createBlockquotePlugin,
|
||||
createBoldPlugin,
|
||||
createCodeBlockPlugin,
|
||||
createCodePlugin,
|
||||
createExitBreakPlugin,
|
||||
createHeadingPlugin,
|
||||
createHighlightPlugin,
|
||||
createKbdPlugin,
|
||||
createImagePlugin,
|
||||
createItalicPlugin,
|
||||
createLinkPlugin,
|
||||
createListPlugin,
|
||||
// createMediaEmbedPlugin,
|
||||
createNodeIdPlugin,
|
||||
createParagraphPlugin,
|
||||
createResetNodePlugin,
|
||||
createSelectOnBackspacePlugin,
|
||||
createSoftBreakPlugin,
|
||||
// createDndPlugin,
|
||||
createStrikethroughPlugin,
|
||||
createTablePlugin,
|
||||
createTodoListPlugin,
|
||||
createTrailingBlockPlugin,
|
||||
createUnderlinePlugin,
|
||||
// createComboboxPlugin,
|
||||
// createMentionPlugin,
|
||||
createIndentPlugin,
|
||||
createDeserializeMdPlugin,
|
||||
createHorizontalRulePlugin,
|
||||
createPlugins,
|
||||
ELEMENT_PARAGRAPH,
|
||||
getPlateActions,
|
||||
platesActions,
|
||||
eventEditorStore,
|
||||
// usePlateStore
|
||||
// usePlateStore
|
||||
} from "@udecode/plate";
|
||||
// import MarkBallonToolbar from "./components/MarkBallonToolbar";
|
||||
import Styled from "./styled";
|
||||
// import { withStyledPlaceHolders } from "./components/withStyledPlaceHolders";
|
||||
// import { MENTIONABLES } from "./mentionables";
|
||||
import { CONFIG } from "./config";
|
||||
// import { VALUES } from "./values/values";
|
||||
|
||||
const id = "rustchat_rich_editor";
|
||||
|
||||
let components = createPlateUI({
|
||||
// customize your components by plugin key
|
||||
});
|
||||
// components = withStyledPlaceHolders(components);
|
||||
|
||||
const initialValue = [{ type: ELEMENT_PARAGRAPH, children: [{ text: "" }] }];
|
||||
const Plugins = ({
|
||||
placeholder = "Write some markdown...",
|
||||
updateMarkdown,
|
||||
updatePureText,
|
||||
sendMessage,
|
||||
}) => {
|
||||
const editableRef = useRef(null);
|
||||
// const editor = useEditorRef();
|
||||
// const { } =usePlateStore()
|
||||
const [uploadImage] = useUploadImageMutation();
|
||||
useKey(
|
||||
"Enter",
|
||||
(evt) => {
|
||||
console.log("enter keypress", evt);
|
||||
if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.isComposing) {
|
||||
return true;
|
||||
}
|
||||
evt.preventDefault();
|
||||
sendMessage();
|
||||
platesActions.unset(id);
|
||||
platesActions.set(id, {
|
||||
initialValue,
|
||||
});
|
||||
// eventEditorStore.set()
|
||||
getPlateActions(id).enabled(false);
|
||||
getPlateActions(id).enabled(true);
|
||||
// eventEditorStore.get();
|
||||
// getPlateActions(id).set;
|
||||
// editor.reset
|
||||
},
|
||||
{
|
||||
// eventTypes: ["keydown"],
|
||||
target: editableRef,
|
||||
// when: !shift,
|
||||
}
|
||||
);
|
||||
const plugins = createPlugins(
|
||||
[
|
||||
createParagraphPlugin(),
|
||||
createBlockquotePlugin(),
|
||||
createTodoListPlugin(),
|
||||
createHeadingPlugin(),
|
||||
createImagePlugin({
|
||||
options: {
|
||||
uploadImage: (imageData) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch(imageData)
|
||||
.then((res) => res.blob())
|
||||
.then((blob) => {
|
||||
uploadImage(blob).then(({ data }) => {
|
||||
console.log("upload image ", data);
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
}),
|
||||
createHorizontalRulePlugin(),
|
||||
createLinkPlugin(),
|
||||
createListPlugin(),
|
||||
createTablePlugin(),
|
||||
// createMediaEmbedPlugin(),
|
||||
createCodeBlockPlugin(),
|
||||
createBoldPlugin(),
|
||||
createCodePlugin(),
|
||||
createItalicPlugin(),
|
||||
createHighlightPlugin(),
|
||||
createUnderlinePlugin(),
|
||||
createStrikethroughPlugin(),
|
||||
createKbdPlugin(),
|
||||
createNodeIdPlugin(),
|
||||
// createDndPlugin(),
|
||||
createIndentPlugin(CONFIG.indent),
|
||||
createAutoformatPlugin(CONFIG.autoformat),
|
||||
createResetNodePlugin(CONFIG.resetBlockType),
|
||||
// createSoftBreakPlugin(CONFIG.softBreak),
|
||||
createExitBreakPlugin(CONFIG.exitBreak),
|
||||
createTrailingBlockPlugin(CONFIG.trailingBlock),
|
||||
createSelectOnBackspacePlugin(CONFIG.selectOnBackspace),
|
||||
// createComboboxPlugin(),
|
||||
// createMentionPlugin(),
|
||||
createDeserializeMdPlugin(),
|
||||
],
|
||||
{
|
||||
components,
|
||||
}
|
||||
);
|
||||
const handleChange = (val) => {
|
||||
const nonEmptyElements = val;
|
||||
// .filter((v) => {
|
||||
// const obj = v.children[0];
|
||||
// return obj.type == "p" && !!v.children[0].text;
|
||||
// });
|
||||
const md = nonEmptyElements
|
||||
.map((v) =>
|
||||
serialize(v, {
|
||||
nodeTypes,
|
||||
listDepth: 3,
|
||||
})
|
||||
)
|
||||
.join("\n");
|
||||
console.log("md changed", val, nonEmptyElements, md);
|
||||
updateMarkdown(md);
|
||||
const nonParagraphs = nonEmptyElements.filter((v) => {
|
||||
return v.type != "p" || v.children.length > 1;
|
||||
});
|
||||
if (nonParagraphs.length == 0) {
|
||||
const nonEmptyPs = nonEmptyElements.filter((v) => !!v.children[0].text);
|
||||
// 全部是P
|
||||
const pureText = nonEmptyPs
|
||||
.map((v) => {
|
||||
return v.children.map(({ text }) => text).join("");
|
||||
})
|
||||
.join("\n");
|
||||
console.log("pure text", nonEmptyPs, pureText);
|
||||
updatePureText(pureText);
|
||||
} else {
|
||||
updatePureText("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Styled className="input" ref={editableRef}>
|
||||
<Plate
|
||||
onChange={handleChange}
|
||||
id={id}
|
||||
editableProps={{
|
||||
...CONFIG.editableProps,
|
||||
placeholder,
|
||||
}}
|
||||
initialValue={initialValue}
|
||||
plugins={plugins}
|
||||
>
|
||||
{/* <MarkBallonToolbar /> */}
|
||||
|
||||
{/* <MentionCombobox items={MENTIONABLES} /> */}
|
||||
</Plate>
|
||||
</Styled>
|
||||
);
|
||||
};
|
||||
export default Plugins;
|
||||
@@ -1,42 +0,0 @@
|
||||
import {
|
||||
createBasicElementsPlugin,
|
||||
createBlockquotePlugin,
|
||||
createBoldPlugin,
|
||||
createCodeBlockPlugin,
|
||||
createCodePlugin,
|
||||
createHeadingPlugin,
|
||||
createImagePlugin,
|
||||
createItalicPlugin,
|
||||
createParagraphPlugin,
|
||||
createSelectOnBackspacePlugin,
|
||||
createStrikethroughPlugin,
|
||||
createUnderlinePlugin,
|
||||
} from "@udecode/plate";
|
||||
import { CONFIG } from "./config";
|
||||
|
||||
const basicElements = [
|
||||
createParagraphPlugin(), // paragraph element
|
||||
createBlockquotePlugin(), // blockquote element
|
||||
createCodeBlockPlugin(), // code block element
|
||||
createHeadingPlugin(), // heading elements
|
||||
];
|
||||
|
||||
const basicMarks = [
|
||||
createBoldPlugin(), // bold mark
|
||||
createItalicPlugin(), // italic mark
|
||||
createUnderlinePlugin(), // underline mark
|
||||
createStrikethroughPlugin(), // strikethrough mark
|
||||
createCodePlugin(), // code mark
|
||||
];
|
||||
|
||||
export const PLUGINS = {
|
||||
basicElements,
|
||||
basicMarks,
|
||||
basicNodes: [...basicElements, ...basicMarks],
|
||||
image: [
|
||||
createBasicElementsPlugin(),
|
||||
...basicMarks,
|
||||
createImagePlugin(),
|
||||
createSelectOnBackspacePlugin(CONFIG.selectOnBackspace),
|
||||
],
|
||||
};
|
||||
@@ -1,58 +0,0 @@
|
||||
import styled from "styled-components";
|
||||
const Styled = styled.div`
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #475467;
|
||||
}
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
/* i {
|
||||
font-style: italic;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #475467;
|
||||
list-style-position: inside;
|
||||
}
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
color: #475467;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
blockquote {
|
||||
margin-bottom: 10px;
|
||||
color: #98a2b3;
|
||||
opacity: 0.8;
|
||||
box-shadow: inset 2px 0px 0px #a8b0bd;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 16px;
|
||||
} */
|
||||
`;
|
||||
|
||||
export default Styled;
|
||||
@@ -1,24 +0,0 @@
|
||||
const nodeTypes = {
|
||||
heading: {
|
||||
1: "h1",
|
||||
2: "h2",
|
||||
3: "h3",
|
||||
4: "h4",
|
||||
5: "h5",
|
||||
6: "h6",
|
||||
},
|
||||
paragraph: "p",
|
||||
link: "a",
|
||||
block_quote: "blockquote",
|
||||
ol_list: "ol",
|
||||
ul_list: "ul",
|
||||
listItem: "li",
|
||||
strong_mark: "bold",
|
||||
inline_code_mark: "code",
|
||||
emphasis_mark: "italic",
|
||||
delete_mark: "strikethrough",
|
||||
image: "img",
|
||||
code_block: "code_block",
|
||||
};
|
||||
|
||||
export default nodeTypes;
|
||||
@@ -1,63 +0,0 @@
|
||||
import {
|
||||
ELEMENT_LI,
|
||||
ELEMENT_LIC,
|
||||
ELEMENT_PARAGRAPH,
|
||||
ELEMENT_UL,
|
||||
// TElement,
|
||||
} from "@udecode/plate";
|
||||
// import { Text } from 'slate'
|
||||
|
||||
export const createElement = (
|
||||
text = "",
|
||||
{ type = ELEMENT_PARAGRAPH, mark } = {}
|
||||
) => {
|
||||
const leaf = { text };
|
||||
if (mark) {
|
||||
leaf[mark] = true;
|
||||
}
|
||||
|
||||
return {
|
||||
type,
|
||||
children: [leaf],
|
||||
};
|
||||
};
|
||||
|
||||
export const createList = (items = [], { splitSeparator = "`" } = {}) => {
|
||||
const children = items.map((item) => {
|
||||
const texts = item.split(splitSeparator);
|
||||
const marks = texts.map((text, index) => {
|
||||
const res = { text };
|
||||
if (index % 2 === 1) {
|
||||
res.code = true;
|
||||
}
|
||||
return res;
|
||||
});
|
||||
|
||||
return {
|
||||
type: ELEMENT_LI,
|
||||
children: [
|
||||
{
|
||||
type: ELEMENT_LIC,
|
||||
children: marks,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
return [
|
||||
{
|
||||
type: ELEMENT_UL,
|
||||
children,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export const getNodesWithRandomId = (nodes = []) => {
|
||||
let _id = 10000;
|
||||
nodes.forEach((node) => {
|
||||
node.id = _id;
|
||||
_id++;
|
||||
});
|
||||
|
||||
return nodes;
|
||||
};
|
||||
@@ -1,275 +0,0 @@
|
||||
import { ELEMENT_HR } from "@udecode/plate";
|
||||
// import { jsx } from "@udecode/plate-test-utils";
|
||||
import { createList, getNodesWithRandomId } from "./utils";
|
||||
|
||||
const align = (
|
||||
<>
|
||||
<hh1 align="right">Alignment</hh1>
|
||||
<hp align="right">This block text is aligned to the right.</hp>
|
||||
<hh2 align="center">Center</hh2>
|
||||
<hp align="justify">This block text is justified.</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const indent = (
|
||||
<>
|
||||
<hh1>Changing block indentation</hh1>
|
||||
<hp indent={1}>
|
||||
Use the toolbar buttons to control the indentation of specific blocks. You
|
||||
can use these tools to highlight an important piece of information,
|
||||
communicate a hierarchy or just give your content some room.
|
||||
</hp>
|
||||
<hp indent={2}>
|
||||
For instance, this paragraph looks like it belongs to the previous one.
|
||||
</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const horizontalRule = (
|
||||
<>
|
||||
<hp>This is a paragraph.</hp>
|
||||
<element type={ELEMENT_HR}>
|
||||
<htext />
|
||||
</element>
|
||||
<hp>And this is another paragraph.</hp>
|
||||
<element type={ELEMENT_HR}>
|
||||
<htext />
|
||||
</element>
|
||||
<hp>But between those paragraphs are horizontal rules.</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const mediaEmbed = (
|
||||
<>
|
||||
<hh2>🎥 Media Embed</hh2>
|
||||
<hp>
|
||||
In addition to simple image nodes, you can actually create complex
|
||||
embedded nodes. For example, this one contains an input element that lets
|
||||
you change the video being rendered!
|
||||
</hp>
|
||||
<hmediaembed url="https://player.vimeo.com/video/26689853">
|
||||
<htext />
|
||||
</hmediaembed>
|
||||
<hp>
|
||||
Try it out! This editor is built to handle Vimeo embeds, but you could
|
||||
handle any type.
|
||||
</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const image = (
|
||||
<>
|
||||
<hh2>📷 Image</hh2>
|
||||
<hp>
|
||||
In addition to nodes that contain editable text, you can also create other
|
||||
types of nodes, like images or videos.
|
||||
</hp>
|
||||
<himg url="https://source.unsplash.com/kFrdX5IeQzI" width="75%">
|
||||
<htext />
|
||||
</himg>
|
||||
<hp>
|
||||
This example shows images in action. It features two ways to add images.
|
||||
You can either add an image via the toolbar icon above, or if you want in
|
||||
on a little secret, copy an image URL to your keyboard and paste it
|
||||
anywhere in the editor! Additionally, you can customize the toolbar button
|
||||
to load an url asynchronously, for example showing a file picker and
|
||||
uploading a file to Amazon S3. You can also add a caption and resize the
|
||||
image.
|
||||
</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const link = (
|
||||
<>
|
||||
<hh2>🔗 Link</hh2>
|
||||
<hp>
|
||||
In addition to block nodes, you can create inline nodes, like{" "}
|
||||
<ha url="https://en.wikipedia.org/wiki/Hypertext">hyperlinks</ha>!
|
||||
</hp>
|
||||
<hp>
|
||||
This example shows hyperlinks in action. It features two ways to add
|
||||
links. You can either add a link via the toolbar icon above, or if you
|
||||
want in on a little secret, copy a URL to your keyboard and paste it while
|
||||
a range of text is selected.
|
||||
</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const autoformat = (
|
||||
<>
|
||||
<hh1>🏃♀️ Autoformat</hh1>
|
||||
<hp>
|
||||
The editor gives you full control over the logic you can add. For example,
|
||||
it's fairly common to want to add markdown-like shortcuts to editors.
|
||||
</hp>
|
||||
<hp>While typing, try these (mark rules):</hp>
|
||||
<hul>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>**</htext> or <htext code>__</htext> on either side
|
||||
of your text to add **bold* mark.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>*</htext> or <htext code>_</htext> on either side of
|
||||
your text to add *italic mark.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>`</htext> on either side of your text to add `inline
|
||||
code mark.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>~~</htext> on either side of your text to add
|
||||
~~strikethrough~ mark.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Note that nothing happens when there is a character before, try
|
||||
on:*bold
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
We even support smart quotes, try typing{" "}
|
||||
<htext code>"hello" 'world'</htext>.
|
||||
</hlic>
|
||||
</hli>
|
||||
</hul>
|
||||
<hp>
|
||||
At the beginning of any new block or existing block, try these (block
|
||||
rules):
|
||||
</hp>
|
||||
<hul>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>*</htext>, <htext code>-</htext> or{" "}
|
||||
<htext code>+</htext> followed by <htext code>space</htext> to create
|
||||
a bulleted list.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>1.</htext> or <htext code>1)</htext> followed by{" "}
|
||||
<htext code>space</htext> to create a numbered list.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>></htext> followed by <htext code>space</htext> to
|
||||
create a block quote.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>```</htext> to create a code block.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>---</htext> to create a horizontal rule.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>#</htext> followed by <htext code>space</htext> to
|
||||
create an H1 heading.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>##</htext> followed by <htext code>space</htext> to
|
||||
create an H2 sub-heading.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>###</htext> followed by <htext code>space</htext> to
|
||||
create an H3 sub-heading.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>####</htext> followed by <htext code>space</htext> to
|
||||
create an H4 sub-heading.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>#####</htext> followed by <htext code>space</htext>{" "}
|
||||
to create an H5 sub-heading.
|
||||
</hlic>
|
||||
</hli>
|
||||
<hli>
|
||||
<hlic>
|
||||
Type <htext code>######</htext> followed by <htext code>space</htext>{" "}
|
||||
to create an H6 sub-heading.
|
||||
</hlic>
|
||||
</hli>
|
||||
</hul>
|
||||
</>
|
||||
);
|
||||
|
||||
const pasteHtml = (
|
||||
<>
|
||||
<hh1>🍪 Deserialize HTML</hh1>
|
||||
<hp>
|
||||
By default, pasting content into a Slate editor will use the clipboard's{" "}
|
||||
<htext code>'text/plain'</htext> data. That's okay for some use cases, but
|
||||
sometimes you want users to be able to paste in content and have it
|
||||
maintain its formatting. To do this, your editor needs to handle{" "}
|
||||
<htext code>'text/html'</htext> data.
|
||||
</hp>
|
||||
<hp>This is an example of doing exactly that!</hp>
|
||||
<hp>
|
||||
Try it out for yourself! Copy and paste some rendered HTML rich text
|
||||
content (not the source code) from another site into this editor and it's
|
||||
formatting should be preserved.
|
||||
</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const pasteMd = (
|
||||
<>
|
||||
<hh1>🍩 Deserialize Markdown</hh1>
|
||||
<hp>
|
||||
By default, pasting content into a Slate editor will use the clipboard's{" "}
|
||||
<htext code>'text/plain'</htext> data. That's okay for some use cases, but
|
||||
sometimes you want users to be able to paste in content and have it
|
||||
maintain its formatting. To do this, your editor needs to handle{" "}
|
||||
<htext code>'text/html'</htext> data.
|
||||
</hp>
|
||||
<hp>This is an example of doing exactly that!</hp>
|
||||
<hp>
|
||||
Try it out for yourself! Copy and paste Markdown content from{" "}
|
||||
<ha url="https://markdown-it.github.io/">
|
||||
https://markdown-it.github.io/
|
||||
</ha>
|
||||
</hp>
|
||||
</>
|
||||
);
|
||||
|
||||
const basicMarks = [
|
||||
<hp key="d">
|
||||
The basic marks consist of text formatting such as bold, italic, underline,
|
||||
strikethrough, subscript, superscript, and code.
|
||||
</hp>,
|
||||
];
|
||||
const basicElements = [
|
||||
<hblockquote key="3">Blockquote</hblockquote>,
|
||||
<hcodeblock key="4" lang="javascript">
|
||||
<hcodeline>const a = 'Hello';</hcodeline>
|
||||
<hcodeline>const b = 'World';</hcodeline>
|
||||
</hcodeblock>,
|
||||
];
|
||||
|
||||
const playground = [...basicMarks, ...basicElements];
|
||||
|
||||
export const VALUES = {
|
||||
playground,
|
||||
};
|
||||
Reference in New Issue
Block a user