Horizontal Rule

[bensquire]

Maybe I'm missing something, but is there a Horizontal Rule plugin? It feels like it should be really simple, but then it also might be the only "type" that contains no actual content and is just syntax.

P.S. I did a search of issues, PRs and discussions and found nothing, so maybe it's just me.

[alexchoiweb]

@bensquire Did you find a solution for this yet? Wondering if it's possible to create a custom plugin for horizontal rule tags

[bensquire]

@alexchoiweb We did actually create a custom plugin, I'll try and get a PR in over the weekend.

[alexchoiweb]

@bensquire Thanks! Even a code snippet of the plugin would help, I'm currently blocked on trying to integrate this at work XD

[zbeyens]

Working on this now, expect a PR soon.

[bensquire]

@alexchoiweb @zbeyens Sorry, I'm trying to get stuff over the line atm. This might help:

import React from 'react'
import { getPlatePluginTypes, getPlatePluginOptions, getRenderElement } from '@udecode/plate-core'
import { getElementDeserializer, insertNodes } from '@udecode/plate-common'
import { Editor } from 'slate'

export const ELEMENT_HR = 'hr'

const getHorizontalRuleDeserialize = () => editor => {
	const options = getPlatePluginOptions(editor, ELEMENT_HR)

	return {
		element: getElementDeserializer({
			type: ELEMENT_HR,
			rules: [{ nodeNames: 'HR' }],
			...options.deserialize
		})
	}
}

export const createHorizontalRulePlugin = options => ({
	pluginKeys: ELEMENT_HR,
	renderElement: getRenderElement(ELEMENT_HR),
	voidTypes: getPlatePluginTypes(ELEMENT_HR),
	deserialize: getHorizontalRuleDeserialize(),
	serialize: {
		element: ({ element }) => {
			if (element.type === ELEMENT_HR) {
				return <hr />
			}
		}
	}
})

export const insertHorizontalRule = (editor) => {
	const selectionPath = Editor.path(editor, editor.selection)
	const insertPath = selectionPath.slice(0, 1)

	insertNodes(
		editor,
		{
			type: ELEMENT_HR,
			children: [{ text: '' }]
		},
		{
			at: insertPath
		}
	)
}

Component Logic

const HrElement = ({ attributes, children, nodeProps }) => {
	const selected = useSelected()

	return (
		<div {...attributes} {...nodeProps}>
			<div contentEditable={false}>
				<Hr selected={selected} />
			</div>
			{children}
		</div>
	)
}

const OPTIONS = {
	[ELEMENT_HR]: withProps(HrElement)
}

[alexchoiweb]

@bensquire Thanks!! Working pretty good so far, I incorporated insertHorizontalRule with a toolbar as well so thanks for that too.

The last issue I have is that the editor is not rendering the <hr>s visually, are you just targeting it with css styling in that case?

[bensquire]

@alexchoiweb Correct. In it's current form we haven't completely extracted the styling from our systems codebase.

[zbeyens]

Done in #1054
Thanks a lot @bensquire !

[bensquire]

@zbeyens Awesome! The thanks should go to @tjramage