Restrict the creation of elements inside other elements (i.e. tables)

[bensquire]

Another question, sorry!

In our project the final resting format is markdown, markdown only supports a subset of the availble formatting within tables, for example:

Supported:

• Bold
• Italic
• Superscript
• Images

Not supported

• Codeblocks
• Quoteblocks
• Headings
• Tables

So the question is; is it currently possible to restrict certain elements from being created in a table. And if it's not how would you envisage implementing that functionality.

Thanks for the help once again!

[bensquire]

So after some deadends and more documentation digging I stumbled across "Slate schemas":

https://docs.slatejs.org/v/v0.47/guides/schemas (docs)

https://github.com/ianstormtaylor/slate/blob/405cef0225c314b4162d587c74cfce6b65a7b257/examples/forced-layout/index.js#L62 (example usage)

How would I go abouts exposing the 'schema' Slate editor prop, it doesn't look like I can pass it into the Plate component directly, nor via editableProps.

[dylans]

That's from the pre mega 0.5 Slate rewrite so I'm not sure if Slate schemas are a thing any more.

That said, slate does have a revised forced layout example that should feel a lot more familiar at https://github.com/ianstormtaylor/slate/blob/main/site/examples/forced-layout.tsx . Another option is to sort of follow the examples of things like trailing block, e.g. https://github.com/udecode/plate/blob/main/packages/trailing-block/src/createTrailingBlockPlugin.ts#L41-L67

In my application, I restrict the toolbar and keyboard shortcuts from inserting elements in the wrong place. I have a number of rules to determine what the selection lives inside, and based on that decide if something can get inserted. That said, my approach doesn't currently restrict what might get applied from copy+paste, so having normalization rules would be a better approach probably.

[bensquire]

@dylans This is very helpful, thanks! Another question (yay!).

The plugins only trigger on change, whats the best way to normalise plate syntax onLoad (i.e before any onChange is triggered).

[karthikcodes6]

Hi Ben, this should work

Editor.normalize(editor, { force: true });

It will force the editor to call normalize on load

[bensquire]

@karthikcodes6 Smashing thanks for this!

[bensquire]

For anyone thats wondering:

To strip out unwanted elements from tables

// See: https://docs.slatejs.org/concepts/11-normalizing
export const withPreventTableChildren = (
	disallowedBlockTypes = [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_HR],
	disallowedInlineTypes = [ELEMENT_H1, ELEMENT_H2, ELEMENT_H3, ELEMENT_H4, ELEMENT_H5, ELEMENT_H6]
) => (editor) => {
	const { normalizeNode } = editor

	editor.normalizeNode = ([currentNode, currentPath]) => {
		if (!Element.isElement(currentNode) || (currentNode.type !== ELEMENT_TD && currentNode.type !== ELEMENT_TH)) {
			return normalizeNode([currentNode, currentPath])
		}

		for (const [childNode, childPath] of Node.children(editor, currentPath)) {
			const childType = childNode.type
			const isInvalidBlockElement = disallowedBlockTypes.includes(childType)	// Note: could combine these, but anticipating divergent use-cases
			const isInvalidInlineElement = disallowedInlineTypes.includes(childType)

			if (isInvalidBlockElement || isInvalidInlineElement) {
				const content = childNode.children[0].text || ''
				Transforms.delete(editor, { at: childPath })
				Transforms.insertNodes(editor, { type: ELEMENT_PARAGRAPH, children: [{ text: content }] }, { at: childPath })
				Transforms.select(editor, Editor.start(editor, childPath))
				return
			}
		}

		return normalizeNode([currentNode, currentPath])
	}

	return editor
}

export const createPreventTableChildrenPlugin = getPlatePluginWithOverrides(
	withPreventTableChildren
)

To normalize content onLoad

export const convertHtmlToPlate = (editor, plugins, html, returnDefault = undefined) => {
	if (html === '') {
		return returnDefault
	}

	// Convert HTML to plate
	editor.children = deserializeHTMLToDocumentFragment(editor, {
		plugins,
		element: html,
		stripWhitespace: false
	})

	Editor.normalize(editor, { force: true });
	return editor.children
}

Thanks to @karthikcodes6 and @dylans