Installing Custom build from the Online Builder

[nchristopherteague]

I went to the Online Builder and customized a package for an inline editor.
I downloaded the package and ran npm install "local folder". I verified it was installed and symlink was created in node_modules.

import React, { useRef } from 'react'
import { makeStyles } from '@material-ui/styles'
import Editor from 'custom-ckeditor-balloon/build/ckeditor'
import CKEditor from '@ckeditor/ckeditor5-react'
import clsx from 'clsx'

const useStyles = makeStyles((theme) => ({
	wrapper: {},
}))

function CkEditorBalloon({ ...props }) {
	const { id, data, onFocus, onBlur, readOnly = false } = props
	const classes = useStyles()
	const editorRef = useRef(null)
	return (
		<div className={clsx(classes.wrapper, 'w-full h-full')}>
			<CKEditor
				editor={Editor}
				ref={editorRef}
				key={id}
				id={id}
				data={data}
				config={{
					toolbar: {
						items: [
							'heading',
							'|',
							'bold',
							'italic',
							'link',
							'bulletedList',
							'numberedList',
							'blockQuote',
							'|',
							'insertTable',
							'|',
							'undo',
							'redo',
						],
					},
					heading: {
						options: [
							{
								model: 'paragraph',
								title: 'Paragraph',
								class: 'ck-heading_paragraph',
							},
							{
								model: 'heading1',
								view: {
									name: 'h1',
									classes: 'MuiTypography-root MuiTypography-h1',
								},
								title: 'Heading 1',
								// It needs to be converted before the standard 'heading2'.
								converterPriority: 'high',
							},
							{
								model: 'heading2',
								view: {
									name: 'h2',
									classes: 'MuiTypography-root MuiTypography-h2',
								},
								title: 'Heading 2',
								// It needs to be converted before the standard 'heading2'.
								converterPriority: 'high',
							},
							{
								model: 'heading3',
								view: {
									name: 'h3',
									classes: 'MuiTypography-root MuiTypography-h3',
								},
								title: 'Heading 3',
								// It needs to be converted before the standard 'heading2'.
								converterPriority: 'high',
							},
							{
								model: 'heading4',
								view: {
									name: 'h4',
									classes: 'MuiTypography-root MuiTypography-h4',
								},
								title: 'Heading 4',
								// It needs to be converted before the standard 'heading2'.
								converterPriority: 'high',
							},
						],
					},
					// indentBlock: {
					// 	offset: 1,
					// 	unit: 'em',
					// },
					link: {
						// Automatically add target="_blank" and rel="noopener noreferrer" to all external links.
						addTargetToExternalLinks: true,
					},
					placeholder: 'Start by typing content here!',
				}}
				onInit={(editor) => {
					editor.isReadOnly = readOnly
				}}
				onChange={(event, editor) => {}}
				onBlur={(event, editor) => {
					const data = editor.getData()
					!onBlur || onBlur(event, editor, data)
				}}
				onFocus={(event, editor) => {
					const data = editor.getData()
					!onFocus || onFocus(event, editor, data)
				}}
			/>
		</div>
	)
}

export default CkEditorBalloon

When I run npm start or build I get Fatal JavaScript heap out of memory issues
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

If I use one of the other builds such as the ckeditor5-build-inline or ckeditor5-build-balloon, etc. All works with no issues. I only get this when I install and use the custom builds.

I have tried installing this within the project, from a folder outside a project, created a tar file and installed, etc. And all with same issue.

Can someone help me?

[BlakeBrown]

I'm also having trouble getting the online builder to work with React.

Have you made any progress here?

[nchristopherteague]

No I haven't. I am using the inline build for now, but really like to get this going. I have tried many things and end up with the same results.

[Mgsy]

Hi, it seems this is the same problem as ckeditor/ckeditor5-react#124. Could you please describe your problem (with as many details as you can) in the mentioned ticket? In the issue, you can find one solution which might be helpful - ckeditor/ckeditor5-react#124 (comment)

[Claudio-Magalhaes]

estou tento o mesmo problema...
já tentei diversas coisas e nada deu jeito.