How to configure Annotation display mode when add Comments Plugins
nighttiger1990 opened this issue · 2 comments
nighttiger1990 commented
I follow this integrate and this display mode
But I can't configure out show Wide Sidebar or Inline or Narrow Sidebar.
1./ This above not show any Sidebar. How can I show any Sidebar? I want to work with many ckeditor5 instance too
2./ When I select some text and click Comment button on Toolbar, I got this error. How can I add comments?
Plus: I download custom build from online builder (without Comments Plugins). Then I add Comments Plugins mannually.
I'm using LicenseTrial key
Hope anyone help me. Thank for working!!
nighttiger1990 commented
I resolved problem "2./" by this doc
I can show Wide or Narrow Sidebar with this fix. But don't know how to configure for multi instance
onReady={(editor) => {
editor.plugins.get('Sidebar').setContainer(document.querySelector('.sidebar-x'))
editor.plugins.get('AnnotationsUIs').switchTo('wideSidebar')
}}
nighttiger1990 commented
I end my problem with this
import React, { useEffect, useRef, useState } from 'react'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import Editor from '@ckeditor/ckeditor5-custom-build/build/ckeditor'
import classNames from 'classnames'
import ckeditor5Helpers from '../helpers/ckeditor5Helpers'
const commentSideBarDisplayMode = ['inline', 'wideSidebar', 'narrowSidebar']
const defaultConfig = {
placeholder: 'Typing here...',
fontSize: {
options: [9, 11, 13, 'default', 17, 19, 21],
},
extraPlugins: [ckeditor5Helpers.createImageUploadPlugins()],
licenseKey:
'my-secret-key',
sidebar: {
// preventScrollOutOfView: false,
},
toolbar: [
'bold',
'underline',
'italic',
'strikethrough',
'alignment',
'|',
'comment',
'commentsArchive',
],
commentsOnly: true,
}
/**
*
* @param {EditorConfig} param0
* @param {EditorConfig} otherProps
* @returns
*/
const CCKEditor5WithComments = (
{ value, config, onChange, onBlur, onFocus, onReady, onError, invalid, valid },
...otherProps
) => {
const sideBarRef = useRef()
const editorRef = useRef()
const [displayMode, setDisplayMode] = useState(commentSideBarDisplayMode[0])
const onReadyEditor = (editor) => {
editorRef.current = editor
onReady?.(editor)
}
const onChangeEditor = (e, editor) => {
onChange?.(editor.getData())
}
const onBlurEditor = (e, editor) => {
onBlur?.(e, editor)
}
const onFocusEditor = (e, editor) => {
onFocus?.(e, editor)
}
const onErrorEditor = (error, errorDetail) => {
console.error(error, errorDetail)
onError?.(error, errorDetail)
}
useEffect(() => {
if (sideBarRef.current) {
sideBarRef.current.style.display =
displayMode === commentSideBarDisplayMode[0] ? 'none' : 'block'
}
}, [displayMode])
useEffect(() => {
// editor.plugins.get('Sidebar').setContainer(document.querySelector('.sidebar-comment'))
if (editorRef.current) {
editorRef.current.plugins.get('Sidebar').setContainer(sideBarRef.current)
editorRef.current.plugins.get('AnnotationsUIs').switchTo(displayMode)
}
return () => {
if (editorRef.current) {
editorRef.current.plugins?.get('AnnotationsUIs')?.deactivateAll()
}
}
}, [])
return (
<div
className={classNames({
'is-valid': valid === true ? true : false,
'is-invalid': invalid === true ? true : false,
'editor-container': true,
})}
>
<CKEditor
editor={Editor}
config={{
...defaultConfig,
...config,
extraPlugins: [...defaultConfig.extraPlugins, ...(config?.extraPlugins || [])],
}}
data={value}
onReady={onReadyEditor}
onChange={onChangeEditor}
onBlur={onBlurEditor}
onFocus={onFocusEditor}
onError={onErrorEditor}
{...otherProps}
/>
<div
className={classNames('sidebar-container', {
narrow: displayMode === commentSideBarDisplayMode[2],
})}
style={{
minWidth:
displayMode === commentSideBarDisplayMode[0]
? 0
: displayMode === commentSideBarDisplayMode[1]
? 300
: 65,
}}
ref={sideBarRef}
></div>
</div>
)
}
export default CCKEditor5WithComments