50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import {
|
|
createBoldPlugin,
|
|
createItalicPlugin,
|
|
createUnderlinePlugin,
|
|
} from '@udecode/plate-basic-marks'
|
|
import { createPlugins } from '@udecode/plate-core'
|
|
import { createLinkPlugin, ELEMENT_LINK } from '@udecode/plate-link'
|
|
import { PlateFloatingLink } from '@udecode/plate-ui-link'
|
|
|
|
export const editorStyle = (backgroundColor: string): React.CSSProperties => ({
|
|
flex: 1,
|
|
padding: '1rem',
|
|
backgroundColor,
|
|
borderRadius: '0.25rem',
|
|
})
|
|
|
|
export const platePlugins = createPlugins(
|
|
[
|
|
createBoldPlugin(),
|
|
createItalicPlugin(),
|
|
createUnderlinePlugin(),
|
|
createLinkPlugin({
|
|
renderAfterEditable: PlateFloatingLink,
|
|
options: {
|
|
isUrl: (url: string) =>
|
|
url.startsWith('http:') ||
|
|
url.startsWith('https:') ||
|
|
url.startsWith('mailto:') ||
|
|
url.startsWith('tel:') ||
|
|
url.startsWith('sms:'),
|
|
forceSubmit: true,
|
|
},
|
|
}),
|
|
],
|
|
{
|
|
components: {
|
|
[ELEMENT_LINK]: (props) => (
|
|
<a
|
|
href={props.element.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={props.className}
|
|
>
|
|
{props.children}
|
|
</a>
|
|
),
|
|
},
|
|
}
|
|
)
|