chore: remove unused files
This commit is contained in:
zerosoul
@@ -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,116 +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_TODO_LI,
|
||||
// ExitBreakPlugin,
|
||||
// IndentPlugin,
|
||||
isBlockAboveEmpty,
|
||||
isSelectionAtBlockStart,
|
||||
// NormalizeTypesPlugin,
|
||||
// PlatePlugin,
|
||||
// ResetNodePlugin,
|
||||
// SelectOnBackspacePlugin,
|
||||
// SoftBreakPlugin,
|
||||
// TrailingBlockPlugin,
|
||||
withProps,
|
||||
} from "@udecode/plate";
|
||||
// import { EditableProps } from 'slate-react/dist/components/editable'
|
||||
import { css } from "styled-components";
|
||||
|
||||
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;
|
||||
}
|
||||
`,
|
||||
],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
|
||||
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],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,122 +0,0 @@
|
||||
import { useState, useRef } from "react";
|
||||
// import { serialize } from "remark-slate";
|
||||
import { useKey } from "rooks";
|
||||
|
||||
import { useUploadImageMutation } from "../../../app/services/message";
|
||||
// import nodeTypes from "./values/nodeTypes";
|
||||
import { PLUGINS } from "./plugins";
|
||||
import {
|
||||
createPlateUI,
|
||||
// HeadingToolbar,
|
||||
// MentionCombobox,
|
||||
Plate,
|
||||
createExitBreakPlugin,
|
||||
// createMediaEmbedPlugin,
|
||||
createNodeIdPlugin,
|
||||
createParagraphPlugin,
|
||||
createResetNodePlugin,
|
||||
createSelectOnBackspacePlugin,
|
||||
createSoftBreakPlugin,
|
||||
// createDndPlugin,
|
||||
createTrailingBlockPlugin,
|
||||
// createComboboxPlugin,
|
||||
// createMentionPlugin,
|
||||
createPlugins,
|
||||
ELEMENT_PARAGRAPH,
|
||||
getPlateActions,
|
||||
platesActions,
|
||||
eventEditorStore,
|
||||
// usePlateStore
|
||||
// usePlateStore
|
||||
} from "@udecode/plate";
|
||||
import Styled from "./styled";
|
||||
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...", sendMessage }) => {
|
||||
const editableRef = useRef(null);
|
||||
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(),
|
||||
// // 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);
|
||||
// // });
|
||||
// // });
|
||||
// // });
|
||||
// // },
|
||||
// // },
|
||||
// // }),
|
||||
// createNodeIdPlugin(),
|
||||
// createResetNodePlugin(CONFIG.resetBlockType),
|
||||
// // createSoftBreakPlugin(CONFIG.softBreak),
|
||||
// createExitBreakPlugin(CONFIG.exitBreak),
|
||||
// createTrailingBlockPlugin(CONFIG.trailingBlock),
|
||||
// createSelectOnBackspacePlugin(CONFIG.selectOnBackspace),
|
||||
// ],
|
||||
// {
|
||||
// components,
|
||||
// }
|
||||
// );
|
||||
const handleChange = (val) => {
|
||||
console.log("changed", val);
|
||||
};
|
||||
|
||||
return (
|
||||
<Styled className="input" ref={editableRef}>
|
||||
<Plate
|
||||
onChange={handleChange}
|
||||
id={id}
|
||||
editableProps={{
|
||||
...CONFIG.editableProps,
|
||||
placeholder,
|
||||
}}
|
||||
initialValue={initialValue}
|
||||
plugins={PLUGINS}
|
||||
></Plate>
|
||||
</Styled>
|
||||
);
|
||||
};
|
||||
export default Plugins;
|
||||
@@ -1,44 +0,0 @@
|
||||
import {
|
||||
createBasicElementsPlugin,
|
||||
createBlockquotePlugin,
|
||||
createBoldPlugin,
|
||||
createCodeBlockPlugin,
|
||||
createCodePlugin,
|
||||
createHeadingPlugin,
|
||||
createImagePlugin,
|
||||
createItalicPlugin,
|
||||
createParagraphPlugin,
|
||||
createSelectOnBackspacePlugin,
|
||||
createStrikethroughPlugin,
|
||||
createUnderlinePlugin,
|
||||
createPreviewPlugin,
|
||||
} 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],
|
||||
createPreviewPlugin,
|
||||
image: [
|
||||
createBasicElementsPlugin(),
|
||||
...basicMarks,
|
||||
createImagePlugin(),
|
||||
createSelectOnBackspacePlugin(CONFIG.selectOnBackspace),
|
||||
],
|
||||
};
|
||||
@@ -1,13 +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;
|
||||
}
|
||||
`;
|
||||
|
||||
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