EZQMS-393: Add CollaboratorEditor prop to hide popups (#4051)

Signed-off-by: Anna No <anna.no@xored.com>
This commit is contained in:
Anna No 2023-11-27 13:09:06 +07:00 committed by GitHub
parent d83b1a92b9
commit 6f37f276e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 24 deletions

View File

@ -69,6 +69,7 @@
export let boundary: HTMLElement | undefined = undefined export let boundary: HTMLElement | undefined = undefined
export let attachFile: FileAttachFunction | undefined = undefined export let attachFile: FileAttachFunction | undefined = undefined
export let canShowPopups = true
let element: HTMLElement let element: HTMLElement
@ -262,6 +263,7 @@
$: updateEditor(editor, field, comparedVersion) $: updateEditor(editor, field, comparedVersion)
$: if (editor) dispatch('editor', editor) $: if (editor) dispatch('editor', editor)
$: isStyleToolbarSupported = (!readonly || textNodeActions.length > 0) && canShowPopups
$: tippyOptions = { $: tippyOptions = {
zIndex: 100000, zIndex: 100000,
@ -304,7 +306,7 @@
InlineStyleToolbarExtension.configure({ InlineStyleToolbarExtension.configure({
tippyOptions, tippyOptions,
element: textToolbarElement, element: textToolbarElement,
isSupported: () => !readonly, isSupported: () => isStyleToolbarSupported,
isSelectionOnly: () => false isSelectionOnly: () => false
}), }),
InlinePopupExtension.configure({ InlinePopupExtension.configure({
@ -315,7 +317,7 @@
appendTo: () => boundary ?? element appendTo: () => boundary ?? element
}, },
shouldShow: () => { shouldShow: () => {
if (!visible && !readonly) { if (!visible || !readonly || !canShowPopups) {
return false return false
} }
return editor?.isActive('image') return editor?.isActive('image')
@ -448,27 +450,31 @@
bind:this={textToolbarElement} bind:this={textToolbarElement}
style="visibility: hidden;" style="visibility: hidden;"
> >
<TextEditorStyleToolbar {#if isStyleToolbarSupported}
textEditor={editor} <TextEditorStyleToolbar
textFormatCategories={[ textEditor={editor}
TextFormatCategory.Heading, textFormatCategories={readonly
TextFormatCategory.TextDecoration, ? []
TextFormatCategory.Link, : [
TextFormatCategory.List, TextFormatCategory.Heading,
TextFormatCategory.Quote, TextFormatCategory.TextDecoration,
TextFormatCategory.Code, TextFormatCategory.Link,
TextFormatCategory.Table TextFormatCategory.List,
]} TextFormatCategory.Quote,
formatButtonSize={buttonSize} TextFormatCategory.Code,
{textNodeActions} TextFormatCategory.Table
on:focus={() => { ]}
needFocus = true formatButtonSize={buttonSize}
}} {textNodeActions}
on:action={(event) => { on:focus={() => {
dispatch('action', event.detail) needFocus = true
needFocus = true }}
}} on:action={(event) => {
/> dispatch('action', event.detail)
needFocus = true
}}
/>
{/if}
</div> </div>
<div <div

View File

@ -49,7 +49,7 @@ export const InlineStyleToolbarExtension = Extension.create<InlineStyleToolbarOp
return false return false
} }
if (editor.isDestroyed || !editor.isEditable) { if (editor.isDestroyed) {
return false return false
} }